diff --git a/README.md b/README.md index b66b7f6..18b384f 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master ## Resources -* [Getting Started](https://react.syncfusion.com/getting-started/introduction) +* [Getting Started](https://react.syncfusion.com/overview/introduction) * [View Online Demos](https://react.syncfusion.com/button) ## Pure React Components highlights @@ -241,6 +241,36 @@ Built-in Material 3 stylesheets provide a modern, accessible design out of the b +### Navigations + + + + + + + + + + + + + +
+ Context Menu + + npm package @syncfusion/react-navigations + + Source + + Live demo +
+ Toolbar + + Source + + Live demo +
+ ## Support Product support is available for through following mediums. * Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=react-ui-components) support system or [Community forum](https://www.syncfusion.com/forums/pure-react?utm_source=npm&utm_campaign=react-ui-components). @@ -250,6 +280,6 @@ Built-in Material 3 stylesheets provide a modern, accessible design out of the b Check the license detail [here](https://github.com/syncfusion/react-ui-components/blob/master/license). ## Changelog -Check the changelog [here](https://react-api.syncfusion.com/release-notes/29.2.4). +Check the changelog [here](https://react-api.syncfusion.com/release-notes/30.1.37). © Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. \ No newline at end of file diff --git a/components/base/README.md b/components/base/README.md index e08c0d7..3f691a4 100644 --- a/components/base/README.md +++ b/components/base/README.md @@ -43,4 +43,4 @@ Check the changelog [here](https://github.com/syncfusion/react-ui-components/blo See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. -© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. +© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. diff --git a/components/base/package.json b/components/base/package.json index dad1dd0..d843ac1 100644 --- a/components/base/package.json +++ b/components/base/package.json @@ -1,7 +1,7 @@ { "name": "@syncfusion/react-base", - "version": "29.2.4", - "description": "A common package of core Pure React base, methods and class definitions", + "version": "30.1.37", + "description": "A common package of core React base, methods and class definitions", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", "keywords": [ @@ -21,6 +21,9 @@ "homepage": "https://www.syncfusion.com/react-ui-components", "module": "./index.js", "readme": "README.md", + "bin": { + "syncfusion-license": "bin/syncfusion-license.js" + }, "devDependencies": { "gulp": "4.0.2", "gulp-typescript": "5.0.1", diff --git a/components/base/src/drag-util.tsx b/components/base/src/drag-util.tsx new file mode 100644 index 0000000..b27faa4 --- /dev/null +++ b/components/base/src/drag-util.tsx @@ -0,0 +1,211 @@ +import { select } from './dom'; +import { IPosition } from './draggable'; +import { isNullOrUndefined } from './util'; + +/** + * Position coordinates + */ +export interface PositionCoordinates { + left?: number; + top?: number; + bottom?: number; + right?: number; +} + +/** + * Coordinates for element position + * + * @private + */ +export interface Coordinates { + /** + * Defines the x Coordinate of page. + */ + pageX?: number; + /** + * Defines the y Coordinate of page. + */ + pageY?: number; + /** + * Defines the x Coordinate of client. + */ + clientX?: number; + /** + * Defines the y Coordinate of client. + */ + clientY?: number; +} + +let left: number; +let top: number; +let width: number; +let height: number; + +/** + * Sets the permitted drag area boundaries based on the defined dragArea. + * + * @private + * @param {HTMLElement | string} dragArea - The element or selector string defining the drag area + * @param {Element} helperElement - The helper element used in dragging + * @param {PositionCoordinates} borderWidth - The border width of the drag area + * @param {PositionCoordinates} padding - The padding of the drag area + * @param {PositionCoordinates} dragLimit - The object to store the calculated drag limits + * @returns {void} + */ +export function setDragArea( + dragArea: HTMLElement | string, helperElement: Element, + borderWidth: PositionCoordinates, padding: PositionCoordinates, + dragLimit: PositionCoordinates +): void { + let eleWidthBound: number; + let eleHeightBound: number; + let top: number = 0; + let left: number = 0; + let ele: HTMLElement; + const type: string = typeof dragArea; + if (type === 'string') { + ele = select(dragArea as string) as HTMLElement; + } else { + ele = dragArea as HTMLElement; + } + if (ele) { + const elementArea: ClientRect | DOMRect = ele.getBoundingClientRect(); + eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left; + eleHeightBound = ele.scrollHeight ? (dragArea && !isNullOrUndefined(helperElement) && helperElement.classList.contains('sf-treeview')) ? ele.clientHeight : ele.scrollHeight : elementArea.bottom - elementArea.top; + const keys: string[] = ['Top', 'Left', 'Bottom', 'Right']; + const styles: CSSStyleDeclaration = getComputedStyle(ele); + for (let i: number = 0; i < keys.length; i++) { + const key: string = keys[parseInt(i.toString(), 10)]; + const tborder: string = styles['border' + key + 'Width']; + const tpadding: string = styles['padding' + key]; + const lowerKey: string = key.toLowerCase(); + (borderWidth as Record)[`${lowerKey}`] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder); + (padding as Record)[`${lowerKey}`] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding); + } + if (dragArea && !isNullOrUndefined(helperElement) && helperElement.classList.contains('sf-treeview')) { + top = elementArea.top + document.scrollingElement.scrollTop; + } else { + top = elementArea.top; + } + left = elementArea.left; + dragLimit.left = left + borderWidth.left + padding.left; + dragLimit.top = ele.offsetTop + borderWidth.top + padding.top; + dragLimit.right = left + eleWidthBound - (borderWidth.right + padding.right); + dragLimit.bottom = top + eleHeightBound - (borderWidth.bottom + padding.bottom); + } +} + +/** + * Retrieves the document's full height or width, considering the scroll and offset values. + * + * @private + * @param {string} str - The dimension type ('Height' or 'Width') to calculate. + * @returns {number} - The maximum value across scroll, offset, and client dimensions. + */ +export function getDocumentWidthHeight(str: 'Height' | 'Width'): number { + const docBody: HTMLElement = document.body; + const docEle: HTMLElement = document.documentElement; + return Math.max( + docBody['scroll' + str], docEle['scroll' + str], + docBody['offset' + str], docEle['offset' + str], + docEle['client' + str] + ); +} + +/** + * Determines if a given element is within the bounds of the viewport. + * + * @private + * @param {HTMLElement} el - The element to check. + * @returns {boolean} - True if the element is in the viewport, false otherwise. + */ +export function elementInViewport(el: HTMLElement): boolean { + top = el.offsetTop; + left = el.offsetLeft; + width = el.offsetWidth; + height = el.offsetHeight; + while (el.offsetParent) { + el = el.offsetParent as HTMLElement; + top += el.offsetTop; + left += el.offsetLeft; + } + return ( + top >= window.pageYOffset && + left >= window.pageXOffset && + (top + height) <= (window.pageYOffset + window.innerHeight) && + (left + width) <= (window.pageXOffset + window.innerWidth) + ); +} + +/** + * Gets the coordinates of a mouse or touch event. + * + * @private + * @param {MouseEvent | TouchEvent} evt - The event object. + * @returns {Coordinates} - The x and y coordinates of the page and client. + */ +export function getCoordinates(evt: MouseEvent & TouchEvent): Coordinates { + if (evt.type.indexOf('touch') > -1) { + return evt.changedTouches[0]; + } + return evt as Coordinates; +} + +/** + * Calculates the parent position of the element relative to the document. + * + * @private + * @param {Element} ele - The element for which the parent position is calculated. + * @returns {IPosition} - The calculated left and top position. + */ +export function calculateParentPosition(ele: Element): IPosition { + if (isNullOrUndefined(ele)) { + return { left: 0, top: 0 }; + } + const rect: ClientRect | DOMRect = ele.getBoundingClientRect(); + const style: CSSStyleDeclaration = getComputedStyle(ele); + return { + left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10), + top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10) + }; +} + +/** + * Retrieves all elements from a point defined by event coordinates. + * + * @private + * @param {MouseEvent | TouchEvent} evt - The event object containing coordinates. + * @returns {Element[]} - An array of elements located at the event's point. + */ +export function getPathElements(evt: MouseEvent & TouchEvent): Element[] { + const elementTop: number = evt.clientX > 0 ? evt.clientX : 0; + const elementLeft: number = evt.clientY > 0 ? evt.clientY : 0; + return document.elementsFromPoint(elementTop, elementLeft); +} + +/** + * Identifies the scrollable parent of the current node element. + * + * @private + * @param {Element[]} nodes - The path of elements to check. + * @param {boolean} reverse - Whether to reverse the array to check from bottom to top. + * @returns {Element | null} - The first scrollable parent element or null. + */ +export function getScrollParent(nodes: Element[], reverse: boolean): Element | null { + const nodeList: Element[] = reverse ? [...nodes].reverse() : nodes; + for (const node of nodeList) { + const computedStyle: CSSStyleDeclaration = window.getComputedStyle(node); + const overflowY: string = computedStyle.overflowY; + if ((overflowY === 'auto' || overflowY === 'scroll') && + node.scrollHeight > node.clientHeight) { + return node; + } + } + const scrollingElement: HTMLElement = document.scrollingElement as HTMLElement; + const docOverflowY: string = window.getComputedStyle(scrollingElement).overflowY; + if (docOverflowY === 'visible') { + scrollingElement.style.overflow = 'auto'; + return scrollingElement; + } + return null; +} diff --git a/components/base/src/dragdrop.tsx b/components/base/src/dragdrop.tsx new file mode 100644 index 0000000..7e06ac5 --- /dev/null +++ b/components/base/src/dragdrop.tsx @@ -0,0 +1,131 @@ +import { createContext, useContext, useState, ReactNode, RefObject, useRef } from 'react'; +import { IDroppable } from './droppable'; + +/** + * Interface defining the methods available in the DragDropContext. + * + * @private + */ +export interface DragDropContextProps { + /** + * Registers a droppable instance with a unique identifier. + * + * @param {string} id - The unique identifier for the droppable instance + * @param {DragDropContext} instance - The droppable instance to register + * @returns {void} + */ + registerDroppable: (id: string, instance: DroppableContext) => void; + + /** + * Unregisters a droppable instance by its identifier. + * + * @param {string} id - The unique identifier of the droppable instance to unregister + * @returns {void} + */ + unregisterDroppable: (id: string) => void; + + /** + * Retrieves all registered droppable instances. + * + * @returns {Record} A record of all droppable instances indexed by their identifiers + */ + getAllDroppables: () => Record; +} + +/** + * Interface defining the Droppable instance reference with element. + * + * @private + */ +export interface DroppableContext extends IDroppable { + element?: RefObject; +} + +const DragDropContext: React.Context = createContext(undefined); + +/** + * Custom hook that provides access to the droppable context functionality. + * + * @private + * @returns {DragDropContextProps} The droppable context methods and state + */ +export const useDragDropContext: () => DragDropContextProps | undefined = (): DragDropContextProps | undefined => { + const context: DragDropContextProps | undefined = useContext(DragDropContext); + if (!context) { + return undefined; + } + return context; +}; + +/** + * Props for the DragDrop component. + */ +interface DragDropProps { + /** + * The child components that will have access to the droppable context. + */ + children: ReactNode; +} + +/** + * Provider component that manages droppable instances throughout the application, provides registration and retrieval methods for droppable elements. + * + * @param {DragDropProps} props - The component props + * @param {ReactNode} props.children - The child elements to render within the provider + * @returns {Element} The rendered DragDrop provider component + */ +export const DragDrop: React.FC = ({ children }: { children: ReactNode }) => { + const [droppables, setDroppables] = useState>({}); + const currentDroppables: RefObject> = useRef>({}); + + /** + * Registers a droppable instance with a unique identifier. + * + * @param {string} id - The unique identifier for the droppable instance + * @param {DragDropContext} instance - The droppable instance to register + * @returns {void} + */ + const registerDroppable: (id: string, instance: DroppableContext) => void = (id: string, instance: DroppableContext): void => { + setDroppables((prev: Record) => { + const updated: {[x: string]: DroppableContext} = { + ...prev, + [id]: instance + }; + currentDroppables.current = updated; + return updated; + }); + }; + + /** + * Unregisters a droppable instance by its identifier. + * + * @param {string} id - The unique identifier of the droppable instance to unregister + * @returns {void} + */ + const unregisterDroppable: (id: string) => void = (id: string): void => { + setDroppables((prev: Record) => { + const newDroppables: Record = { ...prev }; + delete newDroppables[`${id}`]; + return newDroppables; + }); + }; + + /** + * Retrieves all registered droppable instances. + * + * @returns {Record} A record of all droppable instances indexed by their identifiers + */ + const getAllDroppables: () => Record = (): Record => { + return currentDroppables.current || droppables; + }; + + return ( + + {children} + + ); +}; diff --git a/components/base/src/draggable.tsx b/components/base/src/draggable.tsx new file mode 100644 index 0000000..5d5fb9a --- /dev/null +++ b/components/base/src/draggable.tsx @@ -0,0 +1,1212 @@ +import { RefObject, useLayoutEffect } from 'react'; +import { extend, isUndefined, isNullOrUndefined, compareElementParent } from './util'; +import { closest, setStyleAttribute, createElement, addClass, isVisible, select } from './dom'; +import { Browser } from './browser'; +import { EventHandler } from './event-handler'; +import { setDragArea, PositionCoordinates, elementInViewport, getDocumentWidthHeight, Coordinates, getCoordinates, calculateParentPosition, getPathElements, getScrollParent } from './drag-util'; +import { DragDropContextProps, DroppableContext, useDragDropContext } from './dragdrop'; + +/** + * The default position coordinates used for initializing or resetting positions. + */ +const defaultPosition: PositionCoordinates = { left: 0, top: 0, bottom: 0, right: 0 }; +/** + * Drag state object to check if dragging has started. + */ +const isDraggedObject: DragObject = { isDragged: false }; + +/** + * Specifies the Direction in which drag movement happen. + */ +export type DragDirection = 'x' | 'y'; + +/** + * Drag object interface + */ +interface DragObject { + isDragged?: boolean; +} + +/** + * Specifies the position coordinates. + */ +export interface IPosition { + /** + * Specifies the left position of cursor in draggable. + */ + left?: number; + + /** + * Specifies the top position of cursor in draggable. + */ + top?: number; +} + +/** + * Hook to manage Position. + * + * @private + * @param {Partial} props - Initial values for the position properties. + * @returns {IPosition} - The initialized position properties. + */ +export function Position(props?: IPosition): IPosition { + const propsRef: IPosition = { + left: 0, + top: 0, + ...props + }; + return propsRef; +} +/** + * Page information + */ +interface PageInfo { + x?: number; + y?: number; +} + +/** + * Interface to specify the drag data in the droppable. + */ +export interface DropInfo { + /** + * Specifies the current draggable element + */ + draggable?: HTMLElement; + /** + * Specifies the current helper element. + */ + helper?: HTMLElement; + /** + * Specifies the drag target element + */ + draggedElement?: HTMLElement; +} + +export interface DropObject { + target?: HTMLElement; + instance?: DropOption; +} + +/** + * Used to access values + * + * @private + */ +export interface DragPosition { + left?: string; + top?: string; +} + +/** + * Droppable function to be invoked from draggable + * + * @private + */ +export interface DropOption { + /** + * Used to triggers over function while draggable element is over the droppable element. + */ + intOver?: Function; + /** + * Used to triggers out function while draggable element is out of the droppable element. + */ + intOut?: Function; + /** + * Used to triggers out function while draggable element is dropped on the droppable element. + */ + intDrop?: Function; + /** + * Specifies the information about the drag element. + */ + dragData?: DropInfo; + /** + * Specifies the status of the drag of drag stop calling. + */ + dragStopCalled?: boolean; +} + +/** + * Drag Event arguments + */ +export interface DragEventArgs { + /** + * Specifies the actual event. + */ + event?: MouseEvent & TouchEvent; + /** + * Specifies the current drag element. + */ + element?: HTMLElement; + /** + * Specifies the current target element. + */ + target?: HTMLElement; + /** + * 'true' if the drag or drop action is to be prevented; otherwise false. + */ + cancel?: boolean; +} + +/** + * Draggable interface for public and protected properties and methods. + */ +export interface IDraggable { + /** + * Defines the distance between the cursor and the draggable element. + */ + cursorAt?: IPosition; + /** + * If `clone` set to true, drag operations are performed in duplicate element of the draggable element. + * + * @default true + */ + clone?: boolean; + /** + * Defines the parent element in which draggable element movement will be restricted. + */ + dragArea?: HTMLElement | string; + /** + * Defines the dragArea is scrollable or not. + */ + isDragScroll?: boolean; + /** + * Defines whether to replace drag element by currentStateTarget. + * + * @private + */ + isReplaceDragEle?: boolean; + /** + * Defines whether to add prevent select class to body or not. + * + * @private + */ + isPreventSelect?: boolean; + /** + * Specifies the callback function for drag event. + * + * @event drag + */ + drag?: Function; + /** + * Specifies the callback function for dragStart event. + * + * @event dragStart + */ + dragStart?: Function; + /** + * Specifies the callback function for dragStop event. + * + * @event dragStop + */ + dragStop?: Function; + /** + * Defines the minimum distance draggable element to be moved to trigger the drag operation. + * + * @default 1 + */ + distance?: number; + /** + * Defines the child element selector which will act as drag handle. + */ + handle?: string; + /** + * Defines the child element selector which will prevent dragging of element. + */ + abort?: string | string[]; + /** + * Defines the callback function for customizing the cloned element. + */ + helper?: Function; + /** + * Defines the scope value to group sets of draggable and droppable items. + * A draggable with the same scope value will be accepted by the droppable. + * + * @default 'default' + */ + scope?: string; + /** + * Specifies the dragTarget by which the clone element is positioned if not given current context element will be considered. + * + * @private + */ + dragTarget?: string; + /** + * Defines the axis to limit the draggable element drag path. The possible axis path values are + * * `x` - Allows drag movement in horizontal direction only. + * * `y` - Allows drag movement in vertical direction only. + */ + axis?: DragDirection; + /** + * Defines the function to change the position value. + * + * @private + */ + queryPositionInfo?: Function; + /** + * Defines whether the drag clone element will be split form the cursor pointer. + * + * @private + */ + enableTailMode?: boolean; + /** + * Defines whether to skip the previous drag movement comparison. + * + * @private + */ + skipDistanceCheck?: boolean; + /** + * + * @private + */ + preventDefault?: boolean; + /** + * Defines whether to enable autoscroll on drag movement of draggable element. + * enableAutoScroll + * + * @private + */ + enableAutoScroll?: boolean; + /** + * Gets the element of the draggable. + */ + element?: RefObject; + /** + * Defines whether to enable taphold on mobile devices. + * enableAutoScroll + * + * @private + */ + enableTapHold?: boolean; + /** + * Specifies the time delay for tap hold. + * + * @default 750 + * @private + */ + tapHoldThreshold?: number; + /** + * + * @private + */ + enableScrollHandler?: boolean; + /** + * Destroys the draggable instance by removing event listeners and cleaning up resources. + * + * @private + */ + intDestroy?(): void; + /** + * Method to clean up and remove event handlers on the component destruction. + * + * @private + */ + destroy?(): void; +} + +/** + * Draggable function provides support to enable draggable functionality in Dom Elements. + * + * @param {RefObject} element - The reference to the HTML element to be made draggable + * @param {IDraggable} [props] - Optional properties to configure the draggable behavior + * @returns {IDraggable} A Draggable object with draggable functionality + */ +export function useDraggable(element: RefObject, props?: IDraggable): IDraggable { + const droppableContext: DragDropContextProps = useDragDropContext(); + const propsRef: IDraggable = { + cursorAt: Position({}), + clone: true, + dragArea: null, + isDragScroll: false, + isReplaceDragEle: false, + isPreventSelect: true, + distance: 1, + handle: '', + abort: '', + helper: null, + scope: 'default', + dragTarget: '', + axis: null, + queryPositionInfo: null, + enableTailMode: false, + skipDistanceCheck: false, + preventDefault: true, + enableAutoScroll: false, + enableTapHold: false, + tapHoldThreshold: 750, + enableScrollHandler: false, + element: element, + ...props + }; + + /* Global Variables */ + let target: HTMLElement; + let initialPosition: PageInfo; + let relativeXPosition: number; + let relativeYPosition: number; + let margin: PositionCoordinates; + let offset: PositionCoordinates; + let position: PositionCoordinates; + let dragLimit: PositionCoordinates = useDraggable.getDefaultPosition(); + let borderWidth: PositionCoordinates = useDraggable.getDefaultPosition(); + const padding: PositionCoordinates = useDraggable.getDefaultPosition(); + let pageX: number; + let diffX: number = 0; + let prevLeft: number = 0; + let prevTop: number = 0; + let dragProcessStarted: boolean = false; + let tapHoldTimer: ReturnType | null = null; + let dragElePosition: { top: number, left: number }; + let currentStateTarget: HTMLElement; + let externalInitialize: boolean = false; + let diffY: number = 0; + let pageY: number; + let helperElement: HTMLElement; + let hoverObject: DropObject; + let parentClientRect: IPosition; + let parentScrollX: number = 0; + let parentScrollY: number = 0; + let initialScrollX: number = 0; + let initialScrollY: number = 0; + const droppables: { [key: string]: DropInfo } = {}; + + /** + * Toggles event listeners for the draggable element. + * + * @param {boolean} [isUnWire] - Flag to determine if events should be removed. + * @returns {void} + */ + function toggleEvents(isUnWire?: boolean): void { + let ele: Element; + if (!isNullOrUndefined(propsRef.handle) && propsRef.handle !== '') { + ele = select(propsRef.handle, element.current); + } + const handler: Function = (propsRef.enableTapHold && Browser.isDevice && Browser.isTouch) ? mobileInitialize : initialize; + if (isUnWire) { + EventHandler.remove(ele || element.current, Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler); + } else { + EventHandler.add(ele || element.current, Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, handler); + } + } + + /** + * Initializes drag events for mobile devices with tap hold support. + * + * @param {MouseEvent | TouchEvent} evt - The initial event that triggered the drag. + * @returns {void} + */ + function mobileInitialize(evt: MouseEvent & TouchEvent): void { + const target: EventTarget = evt.currentTarget; + tapHoldTimer = setTimeout( + () => { + externalInitialize = true; + removeTapholdTimer(); + initialize(evt, target); + }, + propsRef.tapHoldThreshold + ); + EventHandler.add(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, removeTapholdTimer, this); + EventHandler.add(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, removeTapholdTimer, this); + } + + /** + * Binds drag-related events to the drag target element. + * + * @param {HTMLElement} dragTargetElement - The element that will act as the drag target. + * @returns {void} + */ + function bindDragEvents(dragTargetElement: HTMLElement): void { + if (isVisible(dragTargetElement)) { + EventHandler.add(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, intDrag, this); + EventHandler.add(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, intDragStop, this); + setGlobalDroppables(false, element.current, dragTargetElement); + } else { + toggleEvents(); + document.body.classList.remove('sf-prevent-select'); + } + } + + /** + * Removes the tap hold timer and detaches related event listeners. + * + * @returns {void} + */ + function removeTapholdTimer(): void { + clearTimeout(tapHoldTimer); + EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, removeTapholdTimer); + EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, removeTapholdTimer); + } + + /** + * Retrieves the scrollable parent of a given element along a specified axis. + * + * @param {HTMLElement} element - The element whose scrollable parent is to be found. + * @param {string} axis - The axis ('vertical' or 'horizontal') to check for scrollability. + * @returns {HTMLElement | null} - The scrollable parent element, or null if none found. + */ + // eslint-disable-next-line + const getScrollableParent: Function = (element: HTMLElement, axis: string): HTMLElement | null => { + const scroll: { [key: string]: string } = { 'vertical': 'scrollHeight', 'horizontal': 'scrollWidth' }; + const client: { [key: string]: string } = { 'vertical': 'clientHeight', 'horizontal': 'clientWidth' }; + if (isNullOrUndefined(element)) { + return null; + } + if ((element as unknown as { [key: string]: number })[scroll[`${axis}`]] > + ((element as unknown as { [key: string]: number })[client[`${axis}`]]) + ) { + if (axis === 'vertical' ? element.scrollTop > 0 : element.scrollLeft > 0) { + if (axis === 'vertical') { + parentScrollY += (parentScrollY === 0 ? element.scrollTop : element.scrollTop - parentScrollY); + } else { + parentScrollX += (parentScrollX === 0 ? element.scrollLeft : element.scrollLeft - parentScrollX); + } + if (!isNullOrUndefined(element)) { + return getScrollableParent(element.parentNode as HTMLElement, axis); + } else { + return element; + } + } else { + return getScrollableParent(element.parentNode as HTMLElement, axis); + } + } else { + return getScrollableParent(element.parentNode as HTMLElement, axis); + } + }; + + /** + * Calculates and stores scrollable values for the draggable element. + * + * @returns {void} + */ + function getScrollableValues(): void { + parentScrollX = 0; + parentScrollY = 0; + } + + /** + * Initializes the drag operation. + * + * @param {MouseEvent | TouchEvent} evt - The event that initiated the drag action. + * @param {EventTarget} [curTarget] - The current target element of the event. + * @returns {void} + */ + function initialize(evt: MouseEvent & TouchEvent, curTarget?: EventTarget): void { + element.current = getActualElement(element) as HTMLElement; + currentStateTarget = evt.target as HTMLElement; + if (isDragStarted()) { + return; + } else { + isDragStarted(true); + externalInitialize = false; + } + target = evt.currentTarget as HTMLElement || curTarget as HTMLElement; + dragProcessStarted = false; + if (propsRef.abort) { + let abortSelectors: string | string[] = propsRef.abort; + if (typeof abortSelectors === 'string') { + abortSelectors = [abortSelectors]; + } + for (let i: number = 0; i < abortSelectors.length; i++) { + if (!isNullOrUndefined(closest((evt.target as Element), abortSelectors[`${i}`]))) { + if (isDragStarted()) { + isDragStarted(true); + } + return; + } + } + } + if (propsRef.preventDefault && !isUndefined(evt.changedTouches) && evt.type !== 'touchstart') { + evt.preventDefault(); + } + element.current.setAttribute('aria-grabbed', 'true'); + const intCoord: Coordinates = getCoordinates(evt); + initialPosition = { x: intCoord.pageX, y: intCoord.pageY }; + if (!propsRef.clone) { + const pos: IPosition = element.current.getBoundingClientRect(); + getScrollableValues(); + relativeXPosition = intCoord.pageX - (pos.left + parentScrollX); + relativeYPosition = intCoord.pageY - (pos.top + parentScrollY); + } + + if (externalInitialize) { + intDragStart(evt); + } else { + EventHandler.add(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, intDragStart, this); + EventHandler.add(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, propsRef.intDestroy, this); + } + toggleEvents(true); + if (evt.type !== 'touchstart' && propsRef.isPreventSelect) { + document.body.classList.add('sf-prevent-select'); + } + externalInitialize = false; + EventHandler.trigger(document.documentElement, Browser.isSafari() ? 'touchstart' : Browser.touchStartEvent, evt); + } + + /** + * Initiates the drag start operation. + * + * @param {MouseEvent | TouchEvent} evt - The event that initiates the drag start. + * @returns {void} + */ + function intDragStart(evt: MouseEvent & TouchEvent): void { + removeTapholdTimer(); + if (document.scrollingElement) { + initialScrollX = document.scrollingElement.scrollLeft; + initialScrollY = document.scrollingElement.scrollTop; + } + const isChangeTouch: boolean = !isUndefined(evt.changedTouches); + if (isChangeTouch && (evt.changedTouches.length !== 1)) { + return; + } + const intCordinate: Coordinates = getCoordinates(evt); + let pos: IPosition; + const styleProp: CSSStyleDeclaration = getComputedStyle(element.current); + margin = { + left: parseInt(styleProp.marginLeft, 10), + top: parseInt(styleProp.marginTop, 10), + right: parseInt(styleProp.marginRight, 10), + bottom: parseInt(styleProp.marginBottom, 10) + }; + let dragElement: HTMLElement = element.current; + if (propsRef.clone && propsRef.dragTarget) { + const intClosest: HTMLElement = closest(evt.target as Element, propsRef.dragTarget) as HTMLElement; + if (!isNullOrUndefined(intClosest)) { + dragElement = intClosest; + } + } + if (propsRef.isReplaceDragEle) { + dragElement = currentStateCheck(evt.target as HTMLElement, dragElement); + } + offset = calculateParentPosition(dragElement); + position = getMousePosition(evt, propsRef.isDragScroll); + const x: number = initialPosition.x - intCordinate.pageX; + const y: number = initialPosition.y - intCordinate.pageY; + const distance: number = Math.sqrt((x * x) + (y * y)); + if ((distance >= propsRef.distance || externalInitialize)) { + const ele: HTMLElement = getHelperElement(evt); + if (!ele) { + return; + } + if (isChangeTouch) { + evt.preventDefault(); + } + const dragTargetElement: HTMLElement = helperElement = ele; + parentClientRect = calculateParentPosition(dragTargetElement.offsetParent); + if (propsRef.dragStart) { + const curTarget: HTMLElement = getProperTargetElement(evt); + const args: object = { + event: evt, + element: dragElement, + target: curTarget, + bindEvents: null, + dragElement: dragTargetElement + }; + propsRef.dragStart(args as DragEventArgs); + if ((args as DragEventArgs).cancel) { + return undefined; + } + } + if (propsRef.dragArea) { + setDragArea(propsRef.dragArea, helperElement, borderWidth, padding, dragLimit); + } else { + dragLimit = { left: 0, right: 0, bottom: 0, top: 0 }; + borderWidth = { top: 0, left: 0 }; + } + pos = { left: position.left - parentClientRect.left, top: position.top - parentClientRect.top }; + if (propsRef.clone && !propsRef.enableTailMode) { + diffX = position.left - offset.left; + diffY = position.top - offset.top; + } + + getScrollableValues(); + const styles: CSSStyleDeclaration = getComputedStyle(dragElement); + const marginTop: number = parseFloat(styles.marginTop); + if (propsRef.clone && marginTop !== 0) { + pos.top += marginTop; + } + if (propsRef.enableScrollHandler && !propsRef.clone) { + pos.top -= parentScrollY; + pos.left -= parentScrollX; + } + const posValue: DragPosition = getProcessedPositionValue({ + top: `${pos.top - diffY}px`, + left: `${pos.left - diffX}px` + }); + if (propsRef.dragArea && typeof propsRef.dragArea !== 'string' && propsRef.dragArea.classList.contains('sf-kanban-content') && propsRef.dragArea.style.position === 'relative') { + pos.top += propsRef.dragArea.scrollTop; + } + dragElePosition = { top: pos.top, left: pos.left }; + setStyleAttribute(dragTargetElement, getDragPosition({ position: 'absolute', left: posValue.left, top: posValue.top })); + EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, intDragStart); + EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, propsRef.intDestroy); + bindDragEvents(dragTargetElement); + } + } + + /** + * Initializes the variables and manages the drag operation progress. + * + * @param {MouseEvent |TouchEvent} evt - The event that triggers the drag. + * @returns {void} + */ + function intDrag(evt: MouseEvent & TouchEvent): void { + if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) { + return; + } + if (propsRef.clone && evt.changedTouches && Browser.isDevice && Browser.isTouch) { + evt.preventDefault(); + } + let left: number; + let top: number; + position = getMousePosition(evt, propsRef.isDragScroll); + const docHeight: number = getDocumentWidthHeight('Height'); + if (docHeight < position.top) { + position.top = docHeight; + } + const docWidth: number = getDocumentWidthHeight('Width'); + if (docWidth < position.left) { + position.left = docWidth; + } + if (propsRef.drag) { + const curTarget: HTMLElement = getProperTargetElement(evt); + propsRef.drag({ event: evt, element: element.current, target: curTarget } as DragEventArgs); + } + const eleObj: DropObject = checkTargetElement(evt); + if (eleObj.target && eleObj.instance) { + let flag: boolean = true; + if (hoverObject) { + if (hoverObject.instance !== eleObj.instance) { + triggerOutFunction(evt, eleObj); + } else { + flag = false; + } + } + if (flag) { + eleObj.instance.dragData[propsRef.scope] = droppables[propsRef.scope]; + eleObj.instance.intOver(evt, eleObj.target); + hoverObject = eleObj; + } + } else if (hoverObject) { + triggerOutFunction(evt, eleObj); + } + const helperElement: HTMLElement = droppables[propsRef.scope].helper; + parentClientRect = calculateParentPosition(helperElement.offsetParent); + const tLeft: number = parentClientRect.left; + const tTop: number = parentClientRect.top; + const intCoord: Coordinates = getCoordinates(evt); + const pagex: number = intCoord.pageX; + const pagey: number = intCoord.pageY; + const dLeft: number = position.left - diffX; + const dTop: number = position.top - diffY; + const styles: CSSStyleDeclaration = getComputedStyle(helperElement); + if (propsRef.dragArea) { + if (propsRef.enableAutoScroll) { + setDragArea(propsRef.dragArea, helperElement, borderWidth, padding, dragLimit); + } + if (pageX !== pagex || propsRef.skipDistanceCheck) { + const helperWidth: number = helperElement.offsetWidth + (parseFloat(styles.marginLeft) + parseFloat(styles.marginRight)); + if (dragLimit.left > dLeft && dLeft > 0) { + left = dragLimit.left; + } else if (dragLimit.right + window.pageXOffset < dLeft + helperWidth && dLeft > 0) { + left = dLeft - (dLeft - dragLimit.right) + window.pageXOffset - helperWidth; + } else { + left = dLeft < 0 ? dragLimit.left : dLeft; + } + } + if (pageY !== pagey || propsRef.skipDistanceCheck) { + const helperHeight: number = helperElement.offsetHeight + (parseFloat(styles.marginTop) + parseFloat(styles.marginBottom)); + if (dragLimit.top > dTop && dTop > 0) { + top = dragLimit.top; + } else if (dragLimit.bottom + window.pageYOffset < dTop + helperHeight && dTop > 0) { + top = dTop - (dTop - dragLimit.bottom) + window.pageYOffset - helperHeight; + } else { + top = dTop < 0 ? dragLimit.top : dTop; + } + } + } else { + left = dLeft; + top = dTop; + } + const iTop: number = tTop + borderWidth.top; + const iLeft: number = tLeft + borderWidth.left; + if (dragProcessStarted) { + if (isNullOrUndefined(top)) { + top = prevTop; + } + if (isNullOrUndefined(left)) { + left = prevLeft; + } + } + let draEleTop: number; + let draEleLeft: number; + if (helperElement.classList.contains('sf-treeview')) { + if (propsRef.dragArea) { + dragLimit.top = propsRef.clone ? dragLimit.top : 0; + draEleTop = (top - iTop) < 0 ? dragLimit.top : (top - borderWidth.top); + draEleLeft = (left - iLeft) < 0 ? dragLimit.left : (left - borderWidth.left); + } else { + draEleTop = top - borderWidth.top; + draEleLeft = left - borderWidth.left; + } + } else { + if (propsRef.dragArea) { + const isDialogEle: boolean = helperElement.classList.contains('sf-dialog'); + dragLimit.top = propsRef.clone ? dragLimit.top : 0; + draEleTop = (top - iTop) < 0 ? dragLimit.top : (top - iTop); + draEleLeft = (left - iLeft) < 0 ? isDialogEle ? (left - (iLeft - borderWidth.left)) : dragElePosition.left : (left - iLeft); + } else { + draEleTop = top - iTop; + draEleLeft = left - iLeft; + } + } + const marginTop: number = parseFloat(getComputedStyle(element.current).marginTop); + if (marginTop > 0) { + if (propsRef.clone) { + draEleTop += marginTop; + if (dTop < 0) { + if ((marginTop + dTop) >= 0) { + draEleTop = marginTop + dTop; + } else { + draEleTop -= marginTop; + } + } + if (propsRef.dragArea) { + draEleTop = (dragLimit.bottom < draEleTop) ? dragLimit.bottom : draEleTop; + } + } + if ((top - iTop) < 0) { + if (dTop + marginTop + (helperElement.offsetHeight - iTop) >= 0) { + const tempDraEleTop: number = dragLimit.top + dTop - iTop; + if ((tempDraEleTop + marginTop + iTop) < 0) { + draEleTop -= marginTop + iTop; + } else { + draEleTop = tempDraEleTop; + } + } else { + draEleTop -= marginTop + iTop; + } + } + } + + if (propsRef.dragArea && helperElement.classList.contains('sf-treeview')) { + const helperHeight: number = helperElement.offsetHeight + (parseFloat(styles.marginTop) + parseFloat(styles.marginBottom)); + draEleTop = (draEleTop + helperHeight) > dragLimit.bottom ? (dragLimit.bottom - helperHeight) : draEleTop; + } + + if (propsRef.enableScrollHandler && !propsRef.clone) { + draEleTop -= parentScrollY; + draEleLeft -= parentScrollX; + } + if (propsRef.dragArea && typeof propsRef.dragArea !== 'string' && propsRef.dragArea.classList.contains('sf-kanban-content') && propsRef.dragArea.style.position === 'relative') { + draEleTop += propsRef.dragArea.scrollTop; + } + const dragValue: DragPosition = getProcessedPositionValue({ top: draEleTop + 'px', left: draEleLeft + 'px' }); + setStyleAttribute(helperElement, getDragPosition(dragValue)); + if (!elementInViewport(helperElement) && propsRef.enableAutoScroll && !helperElement.classList.contains('sf-treeview')) { + helperElement.scrollIntoView(); + } + + let elements: NodeList | Element[] = document.querySelectorAll(':hover'); + if (propsRef.enableAutoScroll && helperElement.classList.contains('sf-treeview')) { + if (elements.length === 0) { + elements = getPathElements(evt); + } + let scrollParent: Element | null = getScrollParent(elements as Element[], false); + if (elementInViewport(helperElement)) { + getScrollPosition(scrollParent as HTMLElement, draEleTop); + } else if (!elementInViewport(helperElement)) { + elements = [].slice.call(document.querySelectorAll(':hover')); + if (elements.length === 0) { + elements = getPathElements(evt); + } + scrollParent = getScrollParent(elements as Element[], true); + getScrollPosition(scrollParent as HTMLElement, draEleTop); + } + } + + dragProcessStarted = true; + prevLeft = left; + prevTop = top; + position.left = left; + position.top = top; + pageX = pagex; + pageY = pagey; + } + + /** + * Stops the drag operation and performs cleanup. + * + * @param {MouseEvent | TouchEvent} evt - The event that initiated the drag stop. + * @returns {void} + */ + function intDragStop(evt: MouseEvent & TouchEvent): void { + dragProcessStarted = false; + initialScrollX = 0; + initialScrollY = 0; + if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) { + return; + } + const type: string[] = ['touchend', 'pointerup', 'mouseup']; + if (type.indexOf(evt.type) !== -1) { + if (propsRef.dragStop) { + const curTarget: HTMLElement = getProperTargetElement(evt); + propsRef.dragStop({ event: evt, element: element.current, target: curTarget, helper: helperElement } as DragEventArgs); + } + propsRef.intDestroy(); + } else { + element.current.setAttribute('aria-grabbed', 'false'); + } + const eleObj: DropObject = checkTargetElement(evt); + if (eleObj.target && eleObj.instance) { + eleObj.instance.dragStopCalled = true; + eleObj.instance.dragData[propsRef.scope] = droppables[propsRef.scope]; + eleObj.instance.intDrop(evt, eleObj.target); + } + setGlobalDroppables(true); + document.body.classList.remove('sf-prevent-select'); + } + + /** + * Method to bind events. + * + * @returns {void} + */ + function bind(): void { + toggleEvents(); + if (Browser.isIE) { + addClass([propsRef.element.current], 'sf-block-touch'); + } + droppables[propsRef.scope] = {}; + } + /** + * Destroys the draggable instance by removing event listeners and cleaning up resources. + * + * @returns {void} + */ + propsRef.intDestroy = (): void => { + dragProcessStarted = false; + toggleEvents(); + document.body.classList.remove('sf-prevent-select'); + element.current.setAttribute('aria-grabbed', 'false'); + EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, intDragStart); + EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, intDragStop); + EventHandler.remove(document, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, propsRef.intDestroy); + EventHandler.remove(document, Browser.isSafari() ? 'touchmove' : Browser.touchMoveEvent, intDrag); + if (isDragStarted()) { + isDragStarted(true); + } + }; + + /** + * Method to clean up and remove event handlers on the component destruction. + * + * @returns {void} + */ + propsRef.destroy = (): void => { + toggleEvents(true); + }; + + /** + * Triggers the out function for the previous hover target when a new draggable + * target is detected or when the pointer is out of the current drop zone. + * + * @param {MouseEvent | TouchEvent} evt - The event object. + * @param {DropObject} eleObj - The drop object containing target and instance. + * @returns {void} + */ + function triggerOutFunction(evt: MouseEvent & TouchEvent, eleObj: DropObject): void { + hoverObject.instance.intOut(evt, eleObj.target); + hoverObject.instance.dragData[propsRef.scope] = null; + hoverObject = null; + } + + /** + * Checks and retrieves the correct target element under the pointer during a drag operation. + * + * @param {MouseEvent | TouchEvent} evt - The event object. + * @returns {HTMLElement} - The correct target element. + */ + function getProperTargetElement(evt: MouseEvent & TouchEvent): HTMLElement { + const intCoord: Coordinates = getCoordinates(evt); + let ele: HTMLElement; + const prevStyle: string = helperElement.style.pointerEvents || ''; + const isPointer: boolean = evt.type.indexOf('pointer') !== -1 && Browser.info.name === 'safari' && parseInt(Browser.info.version, 10) > 12; + if (compareElementParent(evt.target as Element, helperElement) || evt.type.indexOf('touch') !== -1 || isPointer) { + helperElement.style.pointerEvents = 'none'; + ele = document.elementFromPoint(intCoord.clientX, intCoord.clientY) as HTMLElement; + helperElement.style.pointerEvents = prevStyle; + } else { + ele = evt.target as HTMLElement; + } + return ele; + } + + /** + * Retrieves the position of the mouse or touch event relative to the document or parent element. + * + * @param {MouseEvent | TouchEvent} evt - The drag event. + * @param {boolean} [isdragscroll] - Indicates if the dragging is performed with scrolling. + * @returns {IPosition} - The left and top coordinates of the drag event. + */ + function getMousePosition(evt: MouseEvent & TouchEvent, isdragscroll?: boolean): IPosition { + const dragEle: EventTarget | null = evt.srcElement !== undefined ? evt.srcElement : evt.target; + const intCoord: Coordinates = getCoordinates(evt); + let pageX: number; + let pageY: number; + const isOffsetParent: boolean = isNullOrUndefined((dragEle as HTMLElement).offsetParent); + if (isdragscroll) { + pageX = propsRef.clone ? intCoord.pageX + : (intCoord.pageX + (isOffsetParent ? 0 : (dragEle as HTMLElement).offsetParent.scrollLeft)) - relativeXPosition; + pageY = propsRef.clone ? intCoord.pageY + : (intCoord.pageY + (isOffsetParent ? 0 : (dragEle as HTMLElement).offsetParent.scrollTop)) - relativeYPosition; + if (!propsRef.clone) { + const offsetParent: HTMLElement = (dragEle as HTMLElement).offsetParent as HTMLElement; + if (!isOffsetParent && offsetParent) { + const currentScrollLeft: number = offsetParent.scrollLeft; + const currentScrollTop: number = offsetParent.scrollTop; + const scrollDeltaX: number = currentScrollLeft - initialScrollX; + const scrollDeltaY: number = currentScrollTop - initialScrollY; + pageX = pageX - scrollDeltaX; + pageY = pageY - scrollDeltaY; + } + } + } else { + pageX = propsRef.clone ? intCoord.pageX : (intCoord.pageX + window.pageXOffset) - relativeXPosition; + pageY = propsRef.clone ? intCoord.pageY : (intCoord.pageY + window.pageYOffset) - relativeYPosition; + if (document.scrollingElement && (!propsRef.clone)) { + const ele: Element = document.scrollingElement; + const currentScrollX: number = ele.scrollLeft; + const currentScrollY: number = ele.scrollTop; + const scrollDeltaX: number = currentScrollX - initialScrollX; + const scrollDeltaY: number = currentScrollY - initialScrollY; + pageX = pageX - scrollDeltaX; + pageY = pageY - scrollDeltaY; + } + } + return { + left: pageX - (margin.left + propsRef.cursorAt.left), + top: pageY - (margin.top + propsRef.cursorAt.top) + }; + } + + + /** + * Retrieves or creates the helper element for the drag operation. + * + * @param {MouseEvent | TouchEvent} evt - The event triggering the drag. + * @returns {HTMLElement} - The helper element used during dragging. + */ + function getHelperElement(evt: MouseEvent & TouchEvent): HTMLElement { + let element: HTMLElement; + if (propsRef.clone) { + if (propsRef.helper) { + element = propsRef.helper({ sender: evt, element: target }); + } else { + element = createElement('div', { className: 'sf-drag-helper sf-block-touch', innerHTML: 'Draggable' }); + document.body.appendChild(element); + } + } else { + element = propsRef.element.current; + } + return element; + } + + /** + * Sets the global drop object for the current scope, managing the relationship + * between draggable and droppable elements. + * + * @param {boolean} reset - Whether to reset or set the droppable object. + * @param {HTMLElement} [drag] - The current draggable element. + * @param {HTMLElement} [helper] - The helper element used during dragging. + * @returns {void} + */ + function setGlobalDroppables(reset: boolean, drag?: HTMLElement, helper?: HTMLElement): void { + droppables[propsRef.scope] = reset ? null : { + draggable: drag, + helper: helper, + draggedElement: propsRef.element.current + }; + } + + /** + * Checks and retrieves the drop target and its associated droppable instance. + * + * @param {MouseEvent | TouchEvent} evt - The event object. + * @returns {DropObject} - Contains the drop target and the droppable instance. + */ + function checkTargetElement(evt: MouseEvent & TouchEvent): DropObject { + const dropTarget: HTMLElement = getProperTargetElement(evt); + let dropInstance: DropOption = getDropInstance(dropTarget); + if (!dropInstance && dropTarget && !isNullOrUndefined(dropTarget.parentNode)) { + const parent: Element = closest(dropTarget.parentNode, '.sf-droppable') || dropTarget.parentElement; + if (parent) { + dropInstance = getDropInstance(parent); + } + } + return { target: dropTarget as HTMLElement, instance: dropInstance }; + } + + /** + * Retrieves the drop instance associated with a DOM element. + * + * @param {Element} ele - The DOM element to find the drop instance for + * @returns {DropOption} The drop instance if found, otherwise undefined + */ + function getDropInstance(ele: Element): DropOption | undefined { + let droppables: Record; + let dropInstance: DropOption; + if (droppableContext) { + const { getAllDroppables } = droppableContext; + droppables = getAllDroppables(); + for (const id in droppables) { + if (Object.prototype.hasOwnProperty.call(droppables, id)) { + const instance: DroppableContext = droppables[`${id}`]; + if (instance.element && instance.element.current === ele) { + dropInstance = instance; + break; + } + } + } + } + else { + return undefined; + } + return dropInstance; + } + + + /** + * Checks if the dragging has started and toggles the isDragged state. + * + * @param {boolean} [change] - Optional flag to change the drag state. + * @returns {boolean} - The current drag state. + */ + function isDragStarted(change?: boolean): boolean { + if (change) { + isDraggedObject.isDragged = !isDraggedObject.isDragged; + } + return isDraggedObject.isDragged; + } + + + /** + * Processes the position values of a draggable element. If a custom + * queryPositionInfo function is provided, it will use that to process + * the position. Otherwise, it returns the original value. + * + * @param {DragPosition} value - The position values (left and top) to be processed. + * @returns {DragPosition} - The processed or original position values. + */ + function getProcessedPositionValue(value: DragPosition): DragPosition { + if (propsRef.queryPositionInfo) { + return propsRef.queryPositionInfo(value); + } + return value; + } + + /** + * Computes the drag position of an element based on specified constraints or axis limitations. + * + * @param {DragPosition | { position: string }} dragValue - The raw drag position values. + * @returns {Record} - Adjusted drag position values with applied constraints. + */ + function getDragPosition(dragValue: DragPosition & { position?: string }): Record { + const temp: Record = { ...dragValue }; + if (propsRef.axis) { + if (propsRef.axis === 'x') { + delete temp.top; + } else if (propsRef.axis === 'y') { + delete temp.left; + } + } + return temp; + } + + /** + * Adjusts the scroll position of a parent element to ensure the draggable element + * remains visible during scrolling. + * + * @param {Element} nodeEle - The element intended to be scrolled. + * @param {number} draEleTop - The top position of the draggable element. + * @returns {void} + */ + function getScrollPosition(nodeEle: HTMLElement, draEleTop: number): void { + if (nodeEle === document.scrollingElement) { + if ((nodeEle.clientHeight + nodeEle.scrollTop - helperElement.clientHeight) < draEleTop + && nodeEle.getBoundingClientRect().height + parentClientRect.top > draEleTop) { + nodeEle.scrollTop += helperElement.clientHeight; + } else if (nodeEle.scrollTop > draEleTop - helperElement.clientHeight) { + nodeEle.scrollTop -= helperElement.clientHeight; + } + } else if (nodeEle) { + const docScrollTop: number = document.scrollingElement.scrollTop; + const helperClientHeight: number = helperElement.clientHeight; + if ((nodeEle.clientHeight + nodeEle.getBoundingClientRect().top - helperClientHeight + docScrollTop) < draEleTop) { + nodeEle.scrollTop += helperElement.clientHeight; + } else if (nodeEle.getBoundingClientRect().top > (draEleTop - helperClientHeight - docScrollTop)) { + nodeEle.scrollTop -= helperElement.clientHeight; + } + } + } + + /** + * Checks and returns the appropriate current state element. + * Determines whether to use the current state's target or revert to a specified element. + * + * @param {HTMLElement} ele - The current element. + * @param {HTMLElement} [oldEle] - The previous element, if any. + * @returns {HTMLElement} - The element considered to be in the current state. + */ + function currentStateCheck(ele: HTMLElement, oldEle?: HTMLElement): HTMLElement { + let elem: HTMLElement; + if (!isNullOrUndefined(currentStateTarget) && currentStateTarget !== ele) { + elem = currentStateTarget; + } else { + elem = !isNullOrUndefined(oldEle) ? oldEle : ele; + } + return elem; + } + + /** + * Retrieves the underlying HTML element from a possibly forwarded ref or custom element. + * + * @param {RefObject} elementRef - The ref object containing the element. + * @returns {HTMLElement} The actual HTML element + */ + function getActualElement( + elementRef: React.RefObject + ): HTMLElement | { element?: HTMLElement | undefined; } { + if (elementRef.current) { + if (!(elementRef.current instanceof HTMLElement) && + elementRef.current.element && + elementRef.current.element instanceof HTMLElement) { + return elementRef.current.element; + } + } + return elementRef.current; + } + + + useLayoutEffect(() => { + if (!propsRef.element.current) { + return undefined; + } + propsRef.element.current = getActualElement(propsRef.element) as HTMLElement; + addClass([propsRef.element.current], ['sf-lib', 'sf-draggable']); + bind(); + return () => { + propsRef.destroy(); + }; + }); + + return propsRef; +} + +/** + * Retrieves the default position coordinates. + * + * @returns {PositionCoordinates} - The default position coordinates with left, top, bottom, and right set to 0. + */ +useDraggable.getDefaultPosition = (): PositionCoordinates => { + return extend({}, defaultPosition); +}; diff --git a/components/base/src/droppable.tsx b/components/base/src/droppable.tsx new file mode 100644 index 0000000..5e542e1 --- /dev/null +++ b/components/base/src/droppable.tsx @@ -0,0 +1,268 @@ +import { RefObject, useId, useLayoutEffect } from 'react'; +import { Browser } from './browser'; +import { addClass, isVisible, matches } from './dom'; +import { compareElementParent } from './util'; +import { EventHandler } from './event-handler'; +import { DropInfo } from './draggable'; +import { Coordinates } from './drag-util'; +import { DragDropContextProps, useDragDropContext } from './dragdrop'; + +/** + * Droppable arguments in drop callback. + * + * @private + */ +export interface DropData { + /** + * Specifies that current element can be dropped. + */ + canDrop?: boolean; + /** + * Specifies target to drop. + */ + target?: HTMLElement; +} + +export interface DropEvents { + dropTarget?: HTMLElement; +} + +/** + * Interface for drop event args + */ +export interface DropEventArgs { + /** + * Specifies the original mouse or touch event arguments. + */ + event?: MouseEvent & TouchEvent; + /** + * Specifies the target element. + */ + target?: HTMLElement; + /** + * Specifies the dropped element. + */ + droppedElement?: HTMLElement; + /** + * Specifies the dragData. + */ + dragData?: DropInfo; +} + +/** + * Main interface for public properties in Droppable. + */ +export interface IDroppableProps { + /** + * Defines the selector for draggable element to be accepted by the droppable. + */ + accept?: string; + /** + * Defines the scope value to group sets of draggable and droppable items. + * A draggable with the same scope value will only be accepted by the droppable. + */ + scope?: string; + /** + * Specifies the callback function, which will be triggered while drag element is dropped in droppable. + * + * @event drop + */ + drop?: (args: DropEventArgs) => void; + /** + * Specifies the callback function, which will be triggered while drag element is moved over droppable element. + * + * @event over + */ + over?: Function; + /** + * Specifies the callback function, which will be triggered while drag element is moved out of droppable element. + * + * @event out + */ + out?: Function; +} + +/** + * Main interface for protected methods in Droppable. + */ +export interface IDroppable extends IDroppableProps { + /** + * Data associated with the current drag operation. + * + * @private + */ + dragData?: { [key: string]: DropInfo }; + /** + * Method for handling interactions when dragged item is over the droppable area. + * + * @private + * @param event - Mouse or touch event arguments. + * @param element - The target element over which the drag is happening. + */ + intOver?: (event: MouseEvent & TouchEvent, element?: Element) => void; + /** + * Method for handling interactions when dragged item is out of the droppable area. + * + * @private + * @param event - Mouse or touch event arguments. + * @param element - The target element from which the drag is moving out. + */ + intOut?: (event: MouseEvent & TouchEvent, element?: Element) => void; + /** + * Method to clean up and remove event handlers on the component destruction. + * + * @private + */ + intDrop?: (event: MouseEvent & TouchEvent, element?: Element) => void; +} + +/** + * Creates a droppable instance with the specified element and properties. + * + * @private + * @param {RefObject} [element] - Reference to the HTML element to make droppable. + * @param {IDroppable} [props] - Configuration properties for the droppable instance. + * @returns {IDroppable} The configured droppable instance. + */ +export function useDroppable(element?: RefObject, props?: IDroppable): IDroppable { + const droppableId: string = useId(); + const droppableContext: DragDropContextProps = useDragDropContext(); + const { registerDroppable, unregisterDroppable } = droppableContext || {}; + const propsRef: IDroppable = { + accept: '', + scope: 'default', + dragData: {}, + drop: null, + over: null, + out: null, + ...props + }; + /** Represents whether the mouse is over the droppable area */ + let mouseOverRef: boolean = false; + /** Indicates if drag stop has been called */ + let dragStopCalledRef: boolean = true; + + /** + * Method to add drop events. + * + * @returns {void} + */ + function addEvent(): void { + EventHandler.add(element.current, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, propsRef.intDrop); + } + + /** + * Handles interactions when a dragged item is over the droppable area. + * + * @param {MouseEvent | TouchEvent} event - Mouse or touch event arguments. + * @param {Element} [element] - The target element over which the drag is happening. + * @returns {void} + */ + propsRef.intOver = (event: MouseEvent & TouchEvent, element?: Element): void => { + if (!mouseOverRef) { + const drag: DropInfo = propsRef.dragData[propsRef.scope]; + if (propsRef.over) { + propsRef.over({ event, target: element, dragData: drag }); + } + mouseOverRef = true; + } + }; + + /** + * Method for handling interactions when dragged item is out of the droppable area. + * + * @param {MouseEvent | TouchEvent} event - Mouse or touch event arguments. + * @param {Element} [element] - The target element from which the drag is moving out. + * @returns {void} + */ + propsRef.intOut = (event: MouseEvent & TouchEvent, element?: Element): void => { + if (mouseOverRef) { + if (propsRef.out) { + propsRef.out({ event, target: element }); + } + mouseOverRef = false; + } + }; + + /** + * Method to handle drop event. + * + * @param {MouseEvent | TouchEvent} evt - Mouse or touch event arguments. + * @param {HTMLElement} [element] - The target element where the drop is happening. + * @returns {void} + */ + propsRef.intDrop = (evt: MouseEvent & TouchEvent, element?: HTMLElement): void => { + if (!dragStopCalledRef) { + return; + } else { + dragStopCalledRef = false; + } + let accept: boolean = true; + const drag: DropInfo = propsRef.dragData[propsRef.scope]; + const isDrag: boolean = drag ? (drag.helper && isVisible(drag.helper)) : false; + let area: DropData; + if (isDrag) { + area = isDropArea(evt, drag.helper, element); + if (propsRef.accept) { + accept = matches(drag.helper, propsRef.accept); + } + } + if (isDrag && propsRef.drop && area.canDrop && accept) { + propsRef.drop({ event: evt, target: area.target, droppedElement: drag.helper, dragData: drag }); + } + mouseOverRef = false; + }; + + /** + * Method to check if the drop area is valid. + * + * @param {MouseEvent | TouchEvent} evt - Mouse or touch event arguments. + * @param {HTMLElement} helper - The helper element involved in the drag operation. + * @param {HTMLElement} [element] - The element to check for drop validity. + * @returns {DropData} - The result indicating if the area is a valid drop target and the target itself. + */ + function isDropArea(evt: MouseEvent & TouchEvent, helper: HTMLElement, element?: HTMLElement): DropData { + const area: DropData = { canDrop: true, target: element || (evt.target as HTMLElement) }; + const isTouch: boolean = evt.type === 'touchend'; + if (isTouch || area.target === helper) { + helper.style.display = 'none'; + const coord: Coordinates = isTouch ? (evt.changedTouches[0]) : evt; + const ele: Element = document.elementFromPoint(coord.clientX, coord.clientY); + area.canDrop = false; + area.canDrop = compareElementParent(ele, element); + if (area.canDrop) { + area.target = ele as HTMLElement; + } + helper.style.display = ''; + } + return area; + } + + /** + * Method to clean up and remove event handlers on the component destruction. + * + * @returns {void} + */ + function removeEvent(): void { + EventHandler.remove(element.current, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, propsRef.intDrop); + } + + useLayoutEffect(() => { + addClass([element.current], ['sf-lib', 'sf-droppable']); + addEvent(); + if (registerDroppable) { + registerDroppable(droppableId, { + ...propsRef, + element: element + }); + } + return () => { + if (unregisterDroppable) { + unregisterDroppable(droppableId); + } + removeEvent(); + }; + }, []); + + return propsRef; +} diff --git a/components/base/src/index.ts b/components/base/src/index.ts index d16d516..05d324e 100644 --- a/components/base/src/index.ts +++ b/components/base/src/index.ts @@ -6,6 +6,10 @@ export * from './base'; export * from './browser'; export * from './component'; export * from './dom'; +export * from './drag-util'; +export * from './dragdrop'; +export * from './draggable'; +export * from './droppable'; export * from './event-handler'; export * from './fetch'; export * from './hijri-parser'; diff --git a/components/base/src/internationalization.tsx b/components/base/src/internationalization.tsx index 28e5a23..7db4e6c 100644 --- a/components/base/src/internationalization.tsx +++ b/components/base/src/internationalization.tsx @@ -81,6 +81,7 @@ export interface NumberFormatOptions { altSymbol?: string; } + /** * Specifies the CLDR data loaded for internationalization functionalities. * diff --git a/components/base/src/provider.tsx b/components/base/src/provider.tsx index 1474a6d..d150af9 100644 --- a/components/base/src/provider.tsx +++ b/components/base/src/provider.tsx @@ -15,23 +15,23 @@ const ProviderContext: React.Context = createContext` + validateMsg + ' ' + 'Claim your free account' + innerHTML: ` + + + + + + + + + + + + ` + validateMsg + ' ' + 'Claim your free account' }); errorDiv.setAttribute('style', `position: fixed; top: 10px; diff --git a/components/base/styles/common/_core.scss b/components/base/styles/common/_core.scss index 263307a..a03f90c 100644 --- a/components/base/styles/common/_core.scss +++ b/components/base/styles/common/_core.scss @@ -1,111 +1,112 @@ @include export-module('base-core') { - .sf-control, - .sf-css, - .sf-error { - font-family: $font-family; - font-size: $font-size; - font-weight: $font-weight; - } - - $white: #fff; - $background: #e82824; - $warning: #ffd800; - $yellow: #ff0; - .sf-error { - @if $skin-name == 'Material3' { - color: rgba($error-font-color); + .sf-control, + .sf-css, + .sf-error { + font-family: $font-family; + font-size: $font-size; + font-weight: $font-weight; } - @else { - color: $error-font-color; + + $white: #fff; + $background: #e82824; + $warning: #ffd800; + $yellow: #ff0; + .sf-error { + @if $skin-name == 'Material3' { + color: rgba($error-font-color); + } + @else { + color: $error-font-color; + } } - } - - .sf-control, - .sf-control [class ^= 'sf-'], - .sf-control [class *= ' sf-'] { - box-sizing: border-box; - } - - .sf-control:focus, - .sf-control *:focus { - outline: none; - } - - .sf-rtl { - direction: rtl; - text-align: right; - } - - .sf-overlay { - background-color: $overlay-bg-color; - height: 100%; - opacity: .5; - pointer-events: none; - touch-action: none; - width: 100%; - } - - .sf-hidden { - display: none; - } - - .sf-blazor-hidden { - visibility: hidden; - } - - .sf-disabled { - background-image: none; - cursor: default; - opacity: .35; - } - - .sf-ul { - list-style-type: none; - } - - .sf-prevent-select { - user-select: none; - } - - .sf-warning { - @if $skin-name == 'Material3' { - color: rgba($warning-font-color); + + .sf-control, + .sf-control [class ^= 'sf-'], + .sf-control [class *= ' sf-'] { + box-sizing: border-box; } - @else { - color: $warning-font-color; + + .sf-control:focus, + .sf-control *:focus { + outline: none; } - } - - .sf-success { - @if $skin-name == 'Material3' { - color: rgba($success-font-color); + + .sf-rtl { + direction: rtl; + text-align: right; } - @else { - color: $success-font-color; + + .sf-overlay { + background-color: $overlay-bg-color; + height: 100%; + opacity: .5; + pointer-events: none; + touch-action: none; + width: 100%; } - } - - .sf-information { - @if $skin-name == 'Material3' { - color: rgba($information-font-color); + + .sf-hidden { + display: none; } - @else { - color: $information-font-color; + + .sf-blazor-hidden { + visibility: hidden; + } + + .sf-disabled { + background-image: none; + cursor: default; + opacity: .35; + } + + .sf-ul { + list-style-type: none; + } + + .sf-prevent-select { + user-select: none; + } + + .sf-warning { + @if $skin-name == 'Material3' { + color: rgba($warning-font-color); + } + @else { + color: $warning-font-color; + } + } + + .sf-success { + @if $skin-name == 'Material3' { + color: rgba($success-font-color); + } + @else { + color: $success-font-color; + } + } + + .sf-information { + @if $skin-name == 'Material3' { + color: rgba($information-font-color); + } + @else { + color: $information-font-color; + } + } + + .sf-block-touch { + touch-action: pinch-zoom; + } + .sf-license { + color: $yellow; + text-decoration: none; + } + .sf-license-banner { + position: absolute; + right: 10px; + top: 27%; + cursor: pointer; } } - - .sf-block-touch { - touch-action: pinch-zoom; - } - .sf-license { - color: $yellow; - text-decoration: none; - } - .sf-license-banner { - position: absolute; - right: 10px; - top: 27%; - cursor: pointer; - } -} + \ No newline at end of file diff --git a/components/base/styles/definition/_material3-dark.scss b/components/base/styles/definition/_material3-dark.scss index 994eb2d..a049add 100644 --- a/components/base/styles/definition/_material3-dark.scss +++ b/components/base/styles/definition/_material3-dark.scss @@ -2,8 +2,6 @@ @use 'sass:color'; @use 'sass:meta'; @use 'sass:list'; -@import '../common/mixin.scss'; - @function mapcolorvariable($pallete-name){ @return var(#{'--color-sf-'+ $pallete-name}); } @@ -605,7 +603,7 @@ $rating-pressed-color: darken-color(rgba($primary), 10%) !default; $skeleton-wave-color: rgba(73, 69, 79, 1) !default; -$splitbtn-right-border: linear-gradient(to right, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; +$splitbtn-right-border: linear-gradient(to right, rgba(190, 162, 255, 1) 25%, rgba(190, 162, 255, 1) 75%) 1 !default; $splitbtn-right-border-rtl: linear-gradient(to left, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; $splitbtn-right-border-vertical: linear-gradient(to bottom, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; diff --git a/components/base/styles/definition/_material3.scss b/components/base/styles/definition/_material3.scss index 1ab6536..7576b7d 100644 --- a/components/base/styles/definition/_material3.scss +++ b/components/base/styles/definition/_material3.scss @@ -2,8 +2,6 @@ @use 'sass:color'; @use 'sass:meta'; @use 'sass:list'; -@import '../common/mixin.scss'; - @function mapcolorvariable($pallete-name){ @return var(#{'--color-sf-'+ $pallete-name}); } @@ -44,7 +42,7 @@ @return rgba($r, $g, $b, $opacity); } -:root { +:root, .sf-light-mode { --color-sf-black: 0, 0, 0; --color-sf-white: 255, 255, 255; --color-sf-primary: 103, 80, 164; @@ -619,7 +617,7 @@ $rating-pressed-color: darken-color(rgba($primary), 10%) !default; $skeleton-wave-color: rgba(255, 255, 255, 1) !default; -$splitbtn-right-border: linear-gradient(to right, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; +$splitbtn-right-border: linear-gradient(to right, rgba(92, 72, 147, 1) 25%, rgba(92, 72, 147, 1) 75%) 1 !default; $splitbtn-right-border-rtl: linear-gradient(to left, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; $splitbtn-right-border-vertical: linear-gradient(to bottom, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; diff --git a/components/base/styles/material3-dark.scss b/components/base/styles/material3-dark.scss index c14a867..63defcb 100644 --- a/components/base/styles/material3-dark.scss +++ b/components/base/styles/material3-dark.scss @@ -1,2 +1,2 @@ @import 'material3-dark-definition.scss'; -@import 'all.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/base/styles/material3.scss b/components/base/styles/material3.scss index 9eeb62e..2e9c602 100644 --- a/components/base/styles/material3.scss +++ b/components/base/styles/material3.scss @@ -1,2 +1,2 @@ @import 'material3-definition.scss'; -@import 'all.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/README.md b/components/buttons/README.md index d0a7925..619744c 100644 --- a/components/buttons/README.md +++ b/components/buttons/README.md @@ -2,7 +2,7 @@ ## What's Included in the React Button Package -The React Button package includes the following list of components. +The React Button package includes the following list of components. ### React Button @@ -106,6 +106,7 @@ Explore the demo [here](https://react.syncfusion.com/radio-button). - **Form Integration:** The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing. +

Trusted by the world's leading companies diff --git a/components/buttons/package.json b/components/buttons/package.json index 2412a7c..74ed541 100644 --- a/components/buttons/package.json +++ b/components/buttons/package.json @@ -1,7 +1,7 @@ { "name": "@syncfusion/react-buttons", - "version": "29.2.4", - "description": "A package of feature-rich native React Pure components such as Button, CheckBox and RadioButton.", + "version": "30.1.37", + "description": "A package of feature-rich Pure React components such as Button, CheckBox and RadioButton.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", "keywords": [ @@ -23,8 +23,6 @@ "flat button", "round button", "icon button", - "togglebutton", - "toggle button", "form control", "form controls", "input", @@ -40,7 +38,7 @@ "module": "./index.js", "readme": "README.md", "dependencies": { - "@syncfusion/react-base": "~29.2.4" + "@syncfusion/react-base": "~30.1.37" }, "devDependencies": { "gulp": "4.0.2", diff --git a/components/buttons/src/button/button.tsx b/components/buttons/src/button/button.tsx index ebd38db..eb967db 100644 --- a/components/buttons/src/button/button.tsx +++ b/components/buttons/src/button/button.tsx @@ -9,7 +9,7 @@ import * as React from 'react'; * Before :- When the label is positioned Before, it appears to the left of the component. * ``` */ -export type LabelPlacement = 'After' | 'Before'; +export type LabelPlacement = 'After' | 'Before' | 'Bottom'; /** * Specifies the position of an icon relative to text content in a button component. @@ -207,8 +207,8 @@ export const Button: React.ForwardRefExoticComponent )} - {children} + <> + {icon && children ? ( + {children} + ) : ( + children + )} + {children && icon && (iconPosition === 'Right' || iconPosition === 'Bottom') && ( {typeof icon !== 'string' && icon} diff --git a/components/buttons/src/check-box/check-box.tsx b/components/buttons/src/check-box/check-box.tsx index 3025058..d9fecfa 100644 --- a/components/buttons/src/check-box/check-box.tsx +++ b/components/buttons/src/check-box/check-box.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useCallback, useImperativeHandle, useRef, forwardRef, Ref, JSX, InputHTMLAttributes, ChangeEvent } from 'react'; import { preRender, useProviderContext, SvgIcon, useRippleEffect } from '@syncfusion/react-base'; -import {LabelPlacement} from '../button/button'; +import {Color, LabelPlacement, Size} from '../button/button'; const CHECK: string = 'sf-check'; const DISABLED: string = 'sf-checkbox-disabled'; @@ -30,6 +30,17 @@ export interface CheckBoxProps { */ label?: string; + /** + * Specifies the size style of the checkbox. Options include 'Small', 'Medium' and 'Large'. + * + * @default Size.Medium + */ + size?: Size; + + icon?: React.ReactNode; + + checkedIcon?: React.ReactNode; + /** * Specifies the position of the label relative to the CheckBox. It determines whether the label appears before or after the checkbox element in the UI. * @@ -44,6 +55,13 @@ export interface CheckBoxProps { */ checked?: boolean; + /** + * Specifies the Color style of the button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Danger', and 'Info'. + * + * @default - + */ + color?: Color; + /** * Defines `value` attribute for the CheckBox. It is a form data passed to the server when submitting the form. * @@ -89,12 +107,16 @@ export const Checkbox: React.ForwardRefExoticComponent = { checked, indeterminate, - value + value, + color, + size, + icon, + checkedIcon }; useImperativeHandle(ref, () => ({ @@ -155,6 +181,7 @@ export const Checkbox: React.ForwardRefExoticComponent): void => { const newChecked: boolean = event.target.checked; setIsIndeterminate(false); + setIsFocused(false); if (!isControlled) { setCheckedState(newChecked); } @@ -187,22 +214,13 @@ export const Checkbox: React.ForwardRefExoticComponent JSX.Element = () => ( - - {isIndeterminate && ( - - )} - {checkedState && !isIndeterminate && ( - - )} - - ); - const renderRipple: () => JSX.Element = () => ( {ripple && } @@ -210,9 +228,40 @@ export const Checkbox: React.ForwardRefExoticComponent JSX.Element = (label: string) => ( - {label} + {label} ); + const renderIcons: () => JSX.Element = () => { + const sizeDimensions: any = { + Small: { width: '12', height: '12', viewBox: '0 0 26 20' }, + Medium: { width: '12', height: '12', viewBox: '0 0 25 20' }, + Large: { width: '16', height: '16', viewBox: '0 0 26 20' } + }; + const dimensions: any = sizeDimensions[size as keyof typeof sizeDimensions] || sizeDimensions.Medium; + return ( + + {isIndeterminate && ( + + )} + {checkedState && !isIndeterminate && ( + + )} + + ); + }; + return (

); diff --git a/components/buttons/src/radio-button/radio-button.tsx b/components/buttons/src/radio-button/radio-button.tsx index 4a87e2e..4a29d73 100644 --- a/components/buttons/src/radio-button/radio-button.tsx +++ b/components/buttons/src/radio-button/radio-button.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useRef, useImperativeHandle, useState, useEffect, forwardRef, Ref, ChangeEvent, InputHTMLAttributes } from 'react'; import { preRender, useProviderContext, useRippleEffect } from '@syncfusion/react-base'; -import {LabelPlacement} from '../button/button'; +import {Color, LabelPlacement, Size} from '../button/button'; /** * Defines the properties for the RadioButton component. @@ -21,6 +21,20 @@ export interface RadioButtonProps { */ label?: string; + /** + * Specifies the size style of the checkbox. Options include 'Small', 'Medium' and 'Large'. + * + * @default Size.Medium + */ + size?: Size; + + /** + * Specifies the Color style of the radio-button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Danger', and 'Info'. + * + * @default - + */ + color?: Color; + /** * Specifies the position of the label relative to the RadioButton. It determines whether the label appears before or after the radio button element in the UI. * @@ -69,6 +83,8 @@ export const RadioButton: React.ForwardRefExoticComponent ({ @@ -115,18 +133,21 @@ export const RadioButton: React.ForwardRefExoticComponent -

+Trusted by the world's leading companies + + Syncfusion logo + +

+ +## Setup + +To install `icons`, use the following command, + +```sh +npm install @syncfusion/react-icons +``` + +## Support + +Product support is available through following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* Live chat + +## License and copyright + +> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). + +> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. + +See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. + +© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. diff --git a/components/icons/gulpfile.js b/components/icons/gulpfile.js new file mode 100644 index 0000000..b1bf280 --- /dev/null +++ b/components/icons/gulpfile.js @@ -0,0 +1,52 @@ +var gulp = require('gulp'); +const sass = require('gulp-sass')(require('sass')); + +/** + * Compile ts files + */ +gulp.task('scripts', function(done) { + var ts = require('gulp-typescript'); + var tsProject = ts.createProject('./tsconfig.json', { + typescript: require('typescript'), + declaration: true + }); + var tsResult = gulp.src(['./src/**/*.ts','./src/**/*.tsx', '!./node_modules/**/*.ts','!./node_modules/**/*.tsx'], { base: '.' }) + .pipe(tsProject()); + tsResult.js.pipe(gulp.dest('./')) + .on('end', function() { + tsResult.dts.pipe(gulp.dest('./')) + .on('end', function() { + done(); + }); + }); +}); + +/** + * Compile styles + */ +let isCompiled = true; +gulp.task('styles', function (done) { + var styles = './styles/**/*.scss'; + return gulp.src(styles, { base: './' }) + .pipe(sass({ + outputStyle: 'expanded', + includePaths: "./node_modules/@syncfusion/" + }).on('error', function (error) { + isCompiled = false; + console.log(error); + this.emit('end'); + })) + .pipe(gulp.dest('.')) + .on('end', function () { + if (!isCompiled) { + process.exit(1); + } + done(); + }); +}); + +/** + * Build ts and scss files + */ +gulp.task('build', gulp.series('scripts', 'styles')); + diff --git a/components/icons/license b/components/icons/license new file mode 100644 index 0000000..940fe7b --- /dev/null +++ b/components/icons/license @@ -0,0 +1,13 @@ +Syncfusion® License + +Copyright (c) Syncfusion®, Inc. All rights reserved. + +Essential® React library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License. + +To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions. + +If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options. + +You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions. + +The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf \ No newline at end of file diff --git a/components/icons/package.json b/components/icons/package.json new file mode 100644 index 0000000..cbe4b38 --- /dev/null +++ b/components/icons/package.json @@ -0,0 +1,41 @@ +{ + "name": "@syncfusion/react-icons", + "version": "30.1.37", + "description": "A common package for Pure React icon components", + "author": "Syncfusion Inc.", + "license": "SEE LICENSE IN license", + "keywords": [ + "syncfusion", + "web-components", + "react", + "react-icons", + "syncfusion-react", + "icons", + "icons-library", + "react-icons" + ], + "repository": { + "type": "git", + "url": "https://github.com/syncfusion/react-ui-components.git" + }, + "homepage": "https://www.syncfusion.com/react-ui-components", + "module": "./index.js", + "readme": "README.md", + "devDependencies": { + "gulp": "4.0.2", + "gulp-typescript": "5.0.1", + "typescript": "5.7.2", + "gulp-sass": "5.1.0", + "sass": "1.83.1", + "react": "19.0.0", + "react-dom": "19.0.0", + "@types/react": "19.0.1", + "@types/react-dom": "19.0.1", + "@types/node": "^22.15.17" + }, + "scripts": { + "build": "gulp build" + }, + "typings": "index.d.ts", + "sideEffects": false +} \ No newline at end of file diff --git a/components/icons/src/icon.tsx b/components/icons/src/icon.tsx new file mode 100644 index 0000000..92be67f --- /dev/null +++ b/components/icons/src/icon.tsx @@ -0,0 +1,47 @@ +import { HTMLAttributes, memo, SVGProps } from 'react'; +import { SvgIcon } from './svg-icon'; + +/** + * Type for the icon component + */ +export type IconComponent = React.FC & SVGProps>; + +/** + * Type definition for the icon creator function + * Represents a function that creates a memoized icon component from an SVG path + * + * @param path - The SVG path data string + * @returns A memoized React component that renders the icon + */ +type IconGenerator = (svgElements: React.ReactNode +) => React.NamedExoticComponent & SVGProps>; + +/** + * Base icon component creator function creates a reusable icon component from an SVG path. + * + * @param {string} svgElements - The SVG path data string + * @returns {IconComponent} A memoized React functional component + */ +export const createIcon: IconGenerator = (svgElements: React.ReactNode) => { + const IconComponent: React.FC & SVGProps> = ({ + width = 24, + height = 24, + viewBox = '0 0 24 24', + className = '', + ...otherProps + }: HTMLAttributes & SVGProps) => { + return ( + + {svgElements} + + + ); + }; + return memo(IconComponent); +}; diff --git a/components/icons/src/icons/above-average.tsx b/components/icons/src/icons/above-average.tsx new file mode 100644 index 0000000..820223a --- /dev/null +++ b/components/icons/src/icons/above-average.tsx @@ -0,0 +1,5 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AboveAverage: IconComponent = createIcon(path); + diff --git a/components/icons/src/icons/activities.tsx b/components/icons/src/icons/activities.tsx new file mode 100644 index 0000000..64f1f3b --- /dev/null +++ b/components/icons/src/icons/activities.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Activities: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/add-chart-element.tsx b/components/icons/src/icons/add-chart-element.tsx new file mode 100644 index 0000000..7359f79 --- /dev/null +++ b/components/icons/src/icons/add-chart-element.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AddChartElement: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/add-notes.tsx b/components/icons/src/icons/add-notes.tsx new file mode 100644 index 0000000..3255941 --- /dev/null +++ b/components/icons/src/icons/add-notes.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AddNotes: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/adjustment.tsx b/components/icons/src/icons/adjustment.tsx new file mode 100644 index 0000000..a39b52a --- /dev/null +++ b/components/icons/src/icons/adjustment.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Adjustment: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/agenda-date-range.tsx b/components/icons/src/icons/agenda-date-range.tsx new file mode 100644 index 0000000..4ba3b82 --- /dev/null +++ b/components/icons/src/icons/agenda-date-range.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AgendaDateRange: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/ai-chat.tsx b/components/icons/src/icons/ai-chat.tsx new file mode 100644 index 0000000..ef3bf58 --- /dev/null +++ b/components/icons/src/icons/ai-chat.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AiChat: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/align-bottom.tsx b/components/icons/src/icons/align-bottom.tsx new file mode 100644 index 0000000..dfbb19c --- /dev/null +++ b/components/icons/src/icons/align-bottom.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AlignBottom: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/align-center.tsx b/components/icons/src/icons/align-center.tsx new file mode 100644 index 0000000..9575a19 --- /dev/null +++ b/components/icons/src/icons/align-center.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AlignCenter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/align-left.tsx b/components/icons/src/icons/align-left.tsx new file mode 100644 index 0000000..f5e2d38 --- /dev/null +++ b/components/icons/src/icons/align-left.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AlignLeft: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/align-middle.tsx b/components/icons/src/icons/align-middle.tsx new file mode 100644 index 0000000..0163e8d --- /dev/null +++ b/components/icons/src/icons/align-middle.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AlignMiddle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/align-right.tsx b/components/icons/src/icons/align-right.tsx new file mode 100644 index 0000000..61beadf --- /dev/null +++ b/components/icons/src/icons/align-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AlignRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/align-top.tsx b/components/icons/src/icons/align-top.tsx new file mode 100644 index 0000000..78461f1 --- /dev/null +++ b/components/icons/src/icons/align-top.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AlignTop: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/all.tsx b/components/icons/src/icons/all.tsx new file mode 100644 index 0000000..7784882 --- /dev/null +++ b/components/icons/src/icons/all.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const All: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/animals.tsx b/components/icons/src/icons/animals.tsx new file mode 100644 index 0000000..87d3bc4 --- /dev/null +++ b/components/icons/src/icons/animals.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Animals: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/annotation-edit.tsx b/components/icons/src/icons/annotation-edit.tsx new file mode 100644 index 0000000..12eb378 --- /dev/null +++ b/components/icons/src/icons/annotation-edit.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AnnotationEdit: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/area.tsx b/components/icons/src/icons/area.tsx new file mode 100644 index 0000000..2333d24 --- /dev/null +++ b/components/icons/src/icons/area.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Area: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/arrow-down.tsx b/components/icons/src/icons/arrow-down.tsx new file mode 100644 index 0000000..0a738d4 --- /dev/null +++ b/components/icons/src/icons/arrow-down.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ArrowDown: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/arrow-head-fill.tsx b/components/icons/src/icons/arrow-head-fill.tsx new file mode 100644 index 0000000..9d8b4d5 --- /dev/null +++ b/components/icons/src/icons/arrow-head-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ArrowHeadFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/arrow-head.tsx b/components/icons/src/icons/arrow-head.tsx new file mode 100644 index 0000000..228d9e4 --- /dev/null +++ b/components/icons/src/icons/arrow-head.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ArrowHead: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/arrow-left.tsx b/components/icons/src/icons/arrow-left.tsx new file mode 100644 index 0000000..a6397c5 --- /dev/null +++ b/components/icons/src/icons/arrow-left.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ArrowLeft: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/arrow-right-up.tsx b/components/icons/src/icons/arrow-right-up.tsx new file mode 100644 index 0000000..497aceb --- /dev/null +++ b/components/icons/src/icons/arrow-right-up.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ArrowRightUp: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/arrow-right.tsx b/components/icons/src/icons/arrow-right.tsx new file mode 100644 index 0000000..7091678 --- /dev/null +++ b/components/icons/src/icons/arrow-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ArrowRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/arrow-tail-fill.tsx b/components/icons/src/icons/arrow-tail-fill.tsx new file mode 100644 index 0000000..6d652ca --- /dev/null +++ b/components/icons/src/icons/arrow-tail-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ArrowTailFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/arrow-tail.tsx b/components/icons/src/icons/arrow-tail.tsx new file mode 100644 index 0000000..9e23b45 --- /dev/null +++ b/components/icons/src/icons/arrow-tail.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ArrowTail: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/arrow-up.tsx b/components/icons/src/icons/arrow-up.tsx new file mode 100644 index 0000000..ea28064 --- /dev/null +++ b/components/icons/src/icons/arrow-up.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ArrowUp: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/audio.tsx b/components/icons/src/icons/audio.tsx new file mode 100644 index 0000000..e86df01 --- /dev/null +++ b/components/icons/src/icons/audio.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Audio: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/auto-fit-all-column.tsx b/components/icons/src/icons/auto-fit-all-column.tsx new file mode 100644 index 0000000..e6f049b --- /dev/null +++ b/components/icons/src/icons/auto-fit-all-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AutoFitAllColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/auto-fit-column.tsx b/components/icons/src/icons/auto-fit-column.tsx new file mode 100644 index 0000000..d71a614 --- /dev/null +++ b/components/icons/src/icons/auto-fit-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AutoFitColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/auto-fit-content.tsx b/components/icons/src/icons/auto-fit-content.tsx new file mode 100644 index 0000000..ffd870c --- /dev/null +++ b/components/icons/src/icons/auto-fit-content.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AutoFitContent: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/auto-fit-window.tsx b/components/icons/src/icons/auto-fit-window.tsx new file mode 100644 index 0000000..53d66d8 --- /dev/null +++ b/components/icons/src/icons/auto-fit-window.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const AutoFitWindow: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bar-head.tsx b/components/icons/src/icons/bar-head.tsx new file mode 100644 index 0000000..3a4e99a --- /dev/null +++ b/components/icons/src/icons/bar-head.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BarHead: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bar-tail.tsx b/components/icons/src/icons/bar-tail.tsx new file mode 100644 index 0000000..16bc97a --- /dev/null +++ b/components/icons/src/icons/bar-tail.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BarTail: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/below-average.tsx b/components/icons/src/icons/below-average.tsx new file mode 100644 index 0000000..2091966 --- /dev/null +++ b/components/icons/src/icons/below-average.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BelowAverage: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/between.tsx b/components/icons/src/icons/between.tsx new file mode 100644 index 0000000..c2d27d8 --- /dev/null +++ b/components/icons/src/icons/between.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Between: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/blockquote.tsx b/components/icons/src/icons/blockquote.tsx new file mode 100644 index 0000000..cdb5901 --- /dev/null +++ b/components/icons/src/icons/blockquote.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Blockquote: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bold.tsx b/components/icons/src/icons/bold.tsx new file mode 100644 index 0000000..9e1e32f --- /dev/null +++ b/components/icons/src/icons/bold.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bold: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bookmark.tsx b/components/icons/src/icons/bookmark.tsx new file mode 100644 index 0000000..d6f2b84 --- /dev/null +++ b/components/icons/src/icons/bookmark.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bookmark: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-all.tsx b/components/icons/src/icons/border-all.tsx new file mode 100644 index 0000000..c759107 --- /dev/null +++ b/components/icons/src/icons/border-all.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderAll: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-bottom.tsx b/components/icons/src/icons/border-bottom.tsx new file mode 100644 index 0000000..452b73a --- /dev/null +++ b/components/icons/src/icons/border-bottom.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderBottom: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-box.tsx b/components/icons/src/icons/border-box.tsx new file mode 100644 index 0000000..6f93e60 --- /dev/null +++ b/components/icons/src/icons/border-box.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderBox: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-center.tsx b/components/icons/src/icons/border-center.tsx new file mode 100644 index 0000000..4a35d00 --- /dev/null +++ b/components/icons/src/icons/border-center.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderCenter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-custom.tsx b/components/icons/src/icons/border-custom.tsx new file mode 100644 index 0000000..e9432ec --- /dev/null +++ b/components/icons/src/icons/border-custom.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderCustom: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-diagonal-1.tsx b/components/icons/src/icons/border-diagonal-1.tsx new file mode 100644 index 0000000..5e80fba --- /dev/null +++ b/components/icons/src/icons/border-diagonal-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderDiagonal1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-diagonal-2.tsx b/components/icons/src/icons/border-diagonal-2.tsx new file mode 100644 index 0000000..4bbbd34 --- /dev/null +++ b/components/icons/src/icons/border-diagonal-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderDiagonal2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-diagonal-down.tsx b/components/icons/src/icons/border-diagonal-down.tsx new file mode 100644 index 0000000..ebbc502 --- /dev/null +++ b/components/icons/src/icons/border-diagonal-down.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderDiagonalDown: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-diagonal-up.tsx b/components/icons/src/icons/border-diagonal-up.tsx new file mode 100644 index 0000000..3b5dcf3 --- /dev/null +++ b/components/icons/src/icons/border-diagonal-up.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderDiagonalUp: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-frame.tsx b/components/icons/src/icons/border-frame.tsx new file mode 100644 index 0000000..a649f0c --- /dev/null +++ b/components/icons/src/icons/border-frame.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderFrame: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-inner.tsx b/components/icons/src/icons/border-inner.tsx new file mode 100644 index 0000000..f57d8c0 --- /dev/null +++ b/components/icons/src/icons/border-inner.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderInner: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-left.tsx b/components/icons/src/icons/border-left.tsx new file mode 100644 index 0000000..8034883 --- /dev/null +++ b/components/icons/src/icons/border-left.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderLeft: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-middle.tsx b/components/icons/src/icons/border-middle.tsx new file mode 100644 index 0000000..d174d8d --- /dev/null +++ b/components/icons/src/icons/border-middle.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderMiddle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-none-1.tsx b/components/icons/src/icons/border-none-1.tsx new file mode 100644 index 0000000..8a9d7cc --- /dev/null +++ b/components/icons/src/icons/border-none-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderNone1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-none.tsx b/components/icons/src/icons/border-none.tsx new file mode 100644 index 0000000..e7c991d --- /dev/null +++ b/components/icons/src/icons/border-none.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderNone: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-outer.tsx b/components/icons/src/icons/border-outer.tsx new file mode 100644 index 0000000..4ca57b7 --- /dev/null +++ b/components/icons/src/icons/border-outer.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderOuter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-right.tsx b/components/icons/src/icons/border-right.tsx new file mode 100644 index 0000000..6652eaa --- /dev/null +++ b/components/icons/src/icons/border-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-shadow-1.tsx b/components/icons/src/icons/border-shadow-1.tsx new file mode 100644 index 0000000..1afca14 --- /dev/null +++ b/components/icons/src/icons/border-shadow-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderShadow1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-shadow-2.tsx b/components/icons/src/icons/border-shadow-2.tsx new file mode 100644 index 0000000..bd5e7e0 --- /dev/null +++ b/components/icons/src/icons/border-shadow-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderShadow2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/border-top.tsx b/components/icons/src/icons/border-top.tsx new file mode 100644 index 0000000..f1ec6fb --- /dev/null +++ b/components/icons/src/icons/border-top.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BorderTop: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bottom-10-items.tsx b/components/icons/src/icons/bottom-10-items.tsx new file mode 100644 index 0000000..37be4d7 --- /dev/null +++ b/components/icons/src/icons/bottom-10-items.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bottom10Items: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bottom-10.tsx b/components/icons/src/icons/bottom-10.tsx new file mode 100644 index 0000000..865bf2a --- /dev/null +++ b/components/icons/src/icons/bottom-10.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bottom10: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/box.tsx b/components/icons/src/icons/box.tsx new file mode 100644 index 0000000..4dfacdd --- /dev/null +++ b/components/icons/src/icons/box.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Box: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/break-page.tsx b/components/icons/src/icons/break-page.tsx new file mode 100644 index 0000000..69f8d8b --- /dev/null +++ b/components/icons/src/icons/break-page.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BreakPage: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/break-section.tsx b/components/icons/src/icons/break-section.tsx new file mode 100644 index 0000000..1b42477 --- /dev/null +++ b/components/icons/src/icons/break-section.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BreakSection: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/break.tsx b/components/icons/src/icons/break.tsx new file mode 100644 index 0000000..f41b8ab --- /dev/null +++ b/components/icons/src/icons/break.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Break: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/brightness.tsx b/components/icons/src/icons/brightness.tsx new file mode 100644 index 0000000..b16ad07 --- /dev/null +++ b/components/icons/src/icons/brightness.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Brightness: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bring-forward.tsx b/components/icons/src/icons/bring-forward.tsx new file mode 100644 index 0000000..1758b91 --- /dev/null +++ b/components/icons/src/icons/bring-forward.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BringForward: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bring-to-center.tsx b/components/icons/src/icons/bring-to-center.tsx new file mode 100644 index 0000000..cd408fc --- /dev/null +++ b/components/icons/src/icons/bring-to-center.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BringToCenter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bring-to-front.tsx b/components/icons/src/icons/bring-to-front.tsx new file mode 100644 index 0000000..4653f42 --- /dev/null +++ b/components/icons/src/icons/bring-to-front.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BringToFront: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bring-to-view.tsx b/components/icons/src/icons/bring-to-view.tsx new file mode 100644 index 0000000..24461ec --- /dev/null +++ b/components/icons/src/icons/bring-to-view.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BringToView: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/building-block.tsx b/components/icons/src/icons/building-block.tsx new file mode 100644 index 0000000..2ea4dc1 --- /dev/null +++ b/components/icons/src/icons/building-block.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const BuildingBlock: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bullet-1.tsx b/components/icons/src/icons/bullet-1.tsx new file mode 100644 index 0000000..c481be0 --- /dev/null +++ b/components/icons/src/icons/bullet-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bullet1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bullet-2.tsx b/components/icons/src/icons/bullet-2.tsx new file mode 100644 index 0000000..9d1bb23 --- /dev/null +++ b/components/icons/src/icons/bullet-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bullet2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bullet-3.tsx b/components/icons/src/icons/bullet-3.tsx new file mode 100644 index 0000000..a2efd6d --- /dev/null +++ b/components/icons/src/icons/bullet-3.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bullet3: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bullet-4.tsx b/components/icons/src/icons/bullet-4.tsx new file mode 100644 index 0000000..00aa27e --- /dev/null +++ b/components/icons/src/icons/bullet-4.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bullet4: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bullet-5.tsx b/components/icons/src/icons/bullet-5.tsx new file mode 100644 index 0000000..e1a194e --- /dev/null +++ b/components/icons/src/icons/bullet-5.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bullet5: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bullet-6.tsx b/components/icons/src/icons/bullet-6.tsx new file mode 100644 index 0000000..530772c --- /dev/null +++ b/components/icons/src/icons/bullet-6.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bullet6: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/bullet-7.tsx b/components/icons/src/icons/bullet-7.tsx new file mode 100644 index 0000000..04c8c6b --- /dev/null +++ b/components/icons/src/icons/bullet-7.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Bullet7: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/button-field.tsx b/components/icons/src/icons/button-field.tsx new file mode 100644 index 0000000..efe4d90 --- /dev/null +++ b/components/icons/src/icons/button-field.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ButtonField: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/calculate-sheet.tsx b/components/icons/src/icons/calculate-sheet.tsx new file mode 100644 index 0000000..a4bca96 --- /dev/null +++ b/components/icons/src/icons/calculate-sheet.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CalculateSheet: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/calculated-member.tsx b/components/icons/src/icons/calculated-member.tsx new file mode 100644 index 0000000..4ea7ac1 --- /dev/null +++ b/components/icons/src/icons/calculated-member.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CalculatedMember: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/calculation.tsx b/components/icons/src/icons/calculation.tsx new file mode 100644 index 0000000..e86bbfb --- /dev/null +++ b/components/icons/src/icons/calculation.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Calculation: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/caption-1.tsx b/components/icons/src/icons/caption-1.tsx new file mode 100644 index 0000000..43278b6 --- /dev/null +++ b/components/icons/src/icons/caption-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Caption1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/caption.tsx b/components/icons/src/icons/caption.tsx new file mode 100644 index 0000000..1254df7 --- /dev/null +++ b/components/icons/src/icons/caption.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Caption: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/cell.tsx b/components/icons/src/icons/cell.tsx new file mode 100644 index 0000000..0ff7e7a --- /dev/null +++ b/components/icons/src/icons/cell.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Cell: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/change-case.tsx b/components/icons/src/icons/change-case.tsx new file mode 100644 index 0000000..30c8769 --- /dev/null +++ b/components/icons/src/icons/change-case.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChangeCase: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/change-scale-ratio.tsx b/components/icons/src/icons/change-scale-ratio.tsx new file mode 100644 index 0000000..26b5e59 --- /dev/null +++ b/components/icons/src/icons/change-scale-ratio.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChangeScaleRatio: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/changes-accept.tsx b/components/icons/src/icons/changes-accept.tsx new file mode 100644 index 0000000..cf35730 --- /dev/null +++ b/components/icons/src/icons/changes-accept.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChangesAccept: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/changes-reject.tsx b/components/icons/src/icons/changes-reject.tsx new file mode 100644 index 0000000..e17da44 --- /dev/null +++ b/components/icons/src/icons/changes-reject.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChangesReject: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/changes-track.tsx b/components/icons/src/icons/changes-track.tsx new file mode 100644 index 0000000..46a8118 --- /dev/null +++ b/components/icons/src/icons/changes-track.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChangesTrack: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/character-style.tsx b/components/icons/src/icons/character-style.tsx new file mode 100644 index 0000000..1574bbf --- /dev/null +++ b/components/icons/src/icons/character-style.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CharacterStyle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-100-percent-stacked-area.tsx b/components/icons/src/icons/chart-2d-100-percent-stacked-area.tsx new file mode 100644 index 0000000..bac268f --- /dev/null +++ b/components/icons/src/icons/chart-2d-100-percent-stacked-area.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2d100PercentStackedArea: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-100-percent-stacked-bar.tsx b/components/icons/src/icons/chart-2d-100-percent-stacked-bar.tsx new file mode 100644 index 0000000..778b0f8 --- /dev/null +++ b/components/icons/src/icons/chart-2d-100-percent-stacked-bar.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2d100PercentStackedBar: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-100-percent-stacked-column.tsx b/components/icons/src/icons/chart-2d-100-percent-stacked-column.tsx new file mode 100644 index 0000000..e56991d --- /dev/null +++ b/components/icons/src/icons/chart-2d-100-percent-stacked-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2d100PercentStackedColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-100-percent-stacked-line-marked.tsx b/components/icons/src/icons/chart-2d-100-percent-stacked-line-marked.tsx new file mode 100644 index 0000000..a3d6841 --- /dev/null +++ b/components/icons/src/icons/chart-2d-100-percent-stacked-line-marked.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2d100PercentStackedLineMarked: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-100-percent-stacked-line.tsx b/components/icons/src/icons/chart-2d-100-percent-stacked-line.tsx new file mode 100644 index 0000000..6b6283d --- /dev/null +++ b/components/icons/src/icons/chart-2d-100-percent-stacked-line.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2d100PercentStackedLine: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-area.tsx b/components/icons/src/icons/chart-2d-area.tsx new file mode 100644 index 0000000..bd6bcf6 --- /dev/null +++ b/components/icons/src/icons/chart-2d-area.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dArea: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-clustered-bar.tsx b/components/icons/src/icons/chart-2d-clustered-bar.tsx new file mode 100644 index 0000000..3eff984 --- /dev/null +++ b/components/icons/src/icons/chart-2d-clustered-bar.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dClusteredBar: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-clustered-column.tsx b/components/icons/src/icons/chart-2d-clustered-column.tsx new file mode 100644 index 0000000..3fa4c5b --- /dev/null +++ b/components/icons/src/icons/chart-2d-clustered-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dClusteredColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-line-marked.tsx b/components/icons/src/icons/chart-2d-line-marked.tsx new file mode 100644 index 0000000..6d37cce --- /dev/null +++ b/components/icons/src/icons/chart-2d-line-marked.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dLineMarked: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-line.tsx b/components/icons/src/icons/chart-2d-line.tsx new file mode 100644 index 0000000..2edde4e --- /dev/null +++ b/components/icons/src/icons/chart-2d-line.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dLine: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-pie-2.tsx b/components/icons/src/icons/chart-2d-pie-2.tsx new file mode 100644 index 0000000..eb44ede --- /dev/null +++ b/components/icons/src/icons/chart-2d-pie-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dPie2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-stacked-area.tsx b/components/icons/src/icons/chart-2d-stacked-area.tsx new file mode 100644 index 0000000..1b47161 --- /dev/null +++ b/components/icons/src/icons/chart-2d-stacked-area.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dStackedArea: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-stacked-bar.tsx b/components/icons/src/icons/chart-2d-stacked-bar.tsx new file mode 100644 index 0000000..cdbed0c --- /dev/null +++ b/components/icons/src/icons/chart-2d-stacked-bar.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dStackedBar: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-stacked-column.tsx b/components/icons/src/icons/chart-2d-stacked-column.tsx new file mode 100644 index 0000000..325b7bf --- /dev/null +++ b/components/icons/src/icons/chart-2d-stacked-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dStackedColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-stacked-line-marked.tsx b/components/icons/src/icons/chart-2d-stacked-line-marked.tsx new file mode 100644 index 0000000..f4082ba --- /dev/null +++ b/components/icons/src/icons/chart-2d-stacked-line-marked.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dStackedLineMarked: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-2d-stacked-line.tsx b/components/icons/src/icons/chart-2d-stacked-line.tsx new file mode 100644 index 0000000..b1a7b03 --- /dev/null +++ b/components/icons/src/icons/chart-2d-stacked-line.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart2dStackedLine: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-axes-primary-horizontal.tsx b/components/icons/src/icons/chart-axes-primary-horizontal.tsx new file mode 100644 index 0000000..ee6672e --- /dev/null +++ b/components/icons/src/icons/chart-axes-primary-horizontal.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartAxesPrimaryHorizontal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-axes-primary-vertical.tsx b/components/icons/src/icons/chart-axes-primary-vertical.tsx new file mode 100644 index 0000000..8446f55 --- /dev/null +++ b/components/icons/src/icons/chart-axes-primary-vertical.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartAxesPrimaryVertical: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-axes.tsx b/components/icons/src/icons/chart-axes.tsx new file mode 100644 index 0000000..51b7a68 --- /dev/null +++ b/components/icons/src/icons/chart-axes.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartAxes: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-axis-titles-primary-horizontal.tsx b/components/icons/src/icons/chart-axis-titles-primary-horizontal.tsx new file mode 100644 index 0000000..8f5ccf6 --- /dev/null +++ b/components/icons/src/icons/chart-axis-titles-primary-horizontal.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartAxisTitlesPrimaryHorizontal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-axis-titles-primary-vertical.tsx b/components/icons/src/icons/chart-axis-titles-primary-vertical.tsx new file mode 100644 index 0000000..0805a3c --- /dev/null +++ b/components/icons/src/icons/chart-axis-titles-primary-vertical.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartAxisTitlesPrimaryVertical: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-axis-titles.tsx b/components/icons/src/icons/chart-axis-titles.tsx new file mode 100644 index 0000000..68d2e94 --- /dev/null +++ b/components/icons/src/icons/chart-axis-titles.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartAxisTitles: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-data-labels-center.tsx b/components/icons/src/icons/chart-data-labels-center.tsx new file mode 100644 index 0000000..bfedd29 --- /dev/null +++ b/components/icons/src/icons/chart-data-labels-center.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartDataLabelsCenter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-data-labels-inside-base.tsx b/components/icons/src/icons/chart-data-labels-inside-base.tsx new file mode 100644 index 0000000..b7a7706 --- /dev/null +++ b/components/icons/src/icons/chart-data-labels-inside-base.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartDataLabelsInsideBase: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-data-labels-inside-end.tsx b/components/icons/src/icons/chart-data-labels-inside-end.tsx new file mode 100644 index 0000000..5551510 --- /dev/null +++ b/components/icons/src/icons/chart-data-labels-inside-end.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartDataLabelsInsideEnd: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-data-labels-none.tsx b/components/icons/src/icons/chart-data-labels-none.tsx new file mode 100644 index 0000000..3ad3faf --- /dev/null +++ b/components/icons/src/icons/chart-data-labels-none.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartDataLabelsNone: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-data-labels-outside-end.tsx b/components/icons/src/icons/chart-data-labels-outside-end.tsx new file mode 100644 index 0000000..b8ef7b0 --- /dev/null +++ b/components/icons/src/icons/chart-data-labels-outside-end.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartDataLabelsOutsideEnd: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-data-labels.tsx b/components/icons/src/icons/chart-data-labels.tsx new file mode 100644 index 0000000..e0bbb69 --- /dev/null +++ b/components/icons/src/icons/chart-data-labels.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartDataLabels: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-donut.tsx b/components/icons/src/icons/chart-donut.tsx new file mode 100644 index 0000000..49ee8b2 --- /dev/null +++ b/components/icons/src/icons/chart-donut.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartDonut: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-gridlines.tsx b/components/icons/src/icons/chart-gridlines.tsx new file mode 100644 index 0000000..d4c8b3f --- /dev/null +++ b/components/icons/src/icons/chart-gridlines.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartGridlines: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-insert-bar.tsx b/components/icons/src/icons/chart-insert-bar.tsx new file mode 100644 index 0000000..deb93f0 --- /dev/null +++ b/components/icons/src/icons/chart-insert-bar.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartInsertBar: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-insert-column.tsx b/components/icons/src/icons/chart-insert-column.tsx new file mode 100644 index 0000000..83fbd4a --- /dev/null +++ b/components/icons/src/icons/chart-insert-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartInsertColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-insert-line.tsx b/components/icons/src/icons/chart-insert-line.tsx new file mode 100644 index 0000000..cc689ee --- /dev/null +++ b/components/icons/src/icons/chart-insert-line.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartInsertLine: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-insert-pie.tsx b/components/icons/src/icons/chart-insert-pie.tsx new file mode 100644 index 0000000..0847a5c --- /dev/null +++ b/components/icons/src/icons/chart-insert-pie.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartInsertPie: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-insert-x-y-scatter.tsx b/components/icons/src/icons/chart-insert-x-y-scatter.tsx new file mode 100644 index 0000000..275d87c --- /dev/null +++ b/components/icons/src/icons/chart-insert-x-y-scatter.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartInsertXYScatter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-legend-bottom.tsx b/components/icons/src/icons/chart-legend-bottom.tsx new file mode 100644 index 0000000..affb2d3 --- /dev/null +++ b/components/icons/src/icons/chart-legend-bottom.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartLegendBottom: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-legend-left.tsx b/components/icons/src/icons/chart-legend-left.tsx new file mode 100644 index 0000000..ae539b1 --- /dev/null +++ b/components/icons/src/icons/chart-legend-left.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartLegendLeft: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-legend-none.tsx b/components/icons/src/icons/chart-legend-none.tsx new file mode 100644 index 0000000..f402360 --- /dev/null +++ b/components/icons/src/icons/chart-legend-none.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartLegendNone: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-legend-right.tsx b/components/icons/src/icons/chart-legend-right.tsx new file mode 100644 index 0000000..cb5d306 --- /dev/null +++ b/components/icons/src/icons/chart-legend-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartLegendRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-legend-top.tsx b/components/icons/src/icons/chart-legend-top.tsx new file mode 100644 index 0000000..8f4024e --- /dev/null +++ b/components/icons/src/icons/chart-legend-top.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartLegendTop: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-legend.tsx b/components/icons/src/icons/chart-legend.tsx new file mode 100644 index 0000000..538d98f --- /dev/null +++ b/components/icons/src/icons/chart-legend.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartLegend: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-lines.tsx b/components/icons/src/icons/chart-lines.tsx new file mode 100644 index 0000000..72f11bc --- /dev/null +++ b/components/icons/src/icons/chart-lines.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartLines: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-primary-major-horizontal.tsx b/components/icons/src/icons/chart-primary-major-horizontal.tsx new file mode 100644 index 0000000..fb66d06 --- /dev/null +++ b/components/icons/src/icons/chart-primary-major-horizontal.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartPrimaryMajorHorizontal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-primary-major-vertical.tsx b/components/icons/src/icons/chart-primary-major-vertical.tsx new file mode 100644 index 0000000..548e6ba --- /dev/null +++ b/components/icons/src/icons/chart-primary-major-vertical.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartPrimaryMajorVertical: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-primary-minor-horizontal.tsx b/components/icons/src/icons/chart-primary-minor-horizontal.tsx new file mode 100644 index 0000000..dcd4db1 --- /dev/null +++ b/components/icons/src/icons/chart-primary-minor-horizontal.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartPrimaryMinorHorizontal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-primary-minor-vertical.tsx b/components/icons/src/icons/chart-primary-minor-vertical.tsx new file mode 100644 index 0000000..2d81756 --- /dev/null +++ b/components/icons/src/icons/chart-primary-minor-vertical.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartPrimaryMinorVertical: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-switch-row-column.tsx b/components/icons/src/icons/chart-switch-row-column.tsx new file mode 100644 index 0000000..7450911 --- /dev/null +++ b/components/icons/src/icons/chart-switch-row-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartSwitchRowColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-title-centered-overlay.tsx b/components/icons/src/icons/chart-title-centered-overlay.tsx new file mode 100644 index 0000000..c423513 --- /dev/null +++ b/components/icons/src/icons/chart-title-centered-overlay.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartTitleCenteredOverlay: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-title-none.tsx b/components/icons/src/icons/chart-title-none.tsx new file mode 100644 index 0000000..6b61f7f --- /dev/null +++ b/components/icons/src/icons/chart-title-none.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartTitleNone: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart-title.tsx b/components/icons/src/icons/chart-title.tsx new file mode 100644 index 0000000..5403ac8 --- /dev/null +++ b/components/icons/src/icons/chart-title.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChartTitle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chart.tsx b/components/icons/src/icons/chart.tsx new file mode 100644 index 0000000..6e643b9 --- /dev/null +++ b/components/icons/src/icons/chart.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Chart: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/check-box.tsx b/components/icons/src/icons/check-box.tsx new file mode 100644 index 0000000..f85ad80 --- /dev/null +++ b/components/icons/src/icons/check-box.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CheckBox: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/check-large.tsx b/components/icons/src/icons/check-large.tsx new file mode 100644 index 0000000..3812171 --- /dev/null +++ b/components/icons/src/icons/check-large.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CheckLarge: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/check-small.tsx b/components/icons/src/icons/check-small.tsx new file mode 100644 index 0000000..1edd974 --- /dev/null +++ b/components/icons/src/icons/check-small.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CheckSmall: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/check-tick.tsx b/components/icons/src/icons/check-tick.tsx new file mode 100644 index 0000000..2b4b1b3 --- /dev/null +++ b/components/icons/src/icons/check-tick.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CheckTick: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/check.tsx b/components/icons/src/icons/check.tsx new file mode 100644 index 0000000..58ba4d0 --- /dev/null +++ b/components/icons/src/icons/check.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Check: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-down-double.tsx b/components/icons/src/icons/chevron-down-double.tsx new file mode 100644 index 0000000..bc4a05c --- /dev/null +++ b/components/icons/src/icons/chevron-down-double.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronDownDouble: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-down-fill.tsx b/components/icons/src/icons/chevron-down-fill.tsx new file mode 100644 index 0000000..beab068 --- /dev/null +++ b/components/icons/src/icons/chevron-down-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronDownFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-down-small.tsx b/components/icons/src/icons/chevron-down-small.tsx new file mode 100644 index 0000000..208fd58 --- /dev/null +++ b/components/icons/src/icons/chevron-down-small.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronDownSmall: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-down.tsx b/components/icons/src/icons/chevron-down.tsx new file mode 100644 index 0000000..93252bb --- /dev/null +++ b/components/icons/src/icons/chevron-down.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronDown: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-left-double.tsx b/components/icons/src/icons/chevron-left-double.tsx new file mode 100644 index 0000000..d1a686d --- /dev/null +++ b/components/icons/src/icons/chevron-left-double.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronLeftDouble: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-left-fill.tsx b/components/icons/src/icons/chevron-left-fill.tsx new file mode 100644 index 0000000..c97c631 --- /dev/null +++ b/components/icons/src/icons/chevron-left-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronLeftFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-left-small.tsx b/components/icons/src/icons/chevron-left-small.tsx new file mode 100644 index 0000000..607fffd --- /dev/null +++ b/components/icons/src/icons/chevron-left-small.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronLeftSmall: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-left.tsx b/components/icons/src/icons/chevron-left.tsx new file mode 100644 index 0000000..42f8780 --- /dev/null +++ b/components/icons/src/icons/chevron-left.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronLeft: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-right-double.tsx b/components/icons/src/icons/chevron-right-double.tsx new file mode 100644 index 0000000..59ff0da --- /dev/null +++ b/components/icons/src/icons/chevron-right-double.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronRightDouble: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-right-fill.tsx b/components/icons/src/icons/chevron-right-fill.tsx new file mode 100644 index 0000000..9f7aa86 --- /dev/null +++ b/components/icons/src/icons/chevron-right-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronRightFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-right-small.tsx b/components/icons/src/icons/chevron-right-small.tsx new file mode 100644 index 0000000..8e20f70 --- /dev/null +++ b/components/icons/src/icons/chevron-right-small.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronRightSmall: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-right.tsx b/components/icons/src/icons/chevron-right.tsx new file mode 100644 index 0000000..d2edc12 --- /dev/null +++ b/components/icons/src/icons/chevron-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-up-double.tsx b/components/icons/src/icons/chevron-up-double.tsx new file mode 100644 index 0000000..dcc7311 --- /dev/null +++ b/components/icons/src/icons/chevron-up-double.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronUpDouble: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-up-fill.tsx b/components/icons/src/icons/chevron-up-fill.tsx new file mode 100644 index 0000000..74d8561 --- /dev/null +++ b/components/icons/src/icons/chevron-up-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronUpFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-up-small.tsx b/components/icons/src/icons/chevron-up-small.tsx new file mode 100644 index 0000000..32de196 --- /dev/null +++ b/components/icons/src/icons/chevron-up-small.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronUpSmall: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/chevron-up.tsx b/components/icons/src/icons/chevron-up.tsx new file mode 100644 index 0000000..256e287 --- /dev/null +++ b/components/icons/src/icons/chevron-up.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ChevronUp: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle-add.tsx b/components/icons/src/icons/circle-add.tsx new file mode 100644 index 0000000..9a43bbd --- /dev/null +++ b/components/icons/src/icons/circle-add.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CircleAdd: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle-check.tsx b/components/icons/src/icons/circle-check.tsx new file mode 100644 index 0000000..1d9ef39 --- /dev/null +++ b/components/icons/src/icons/circle-check.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CircleCheck: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle-close.tsx b/components/icons/src/icons/circle-close.tsx new file mode 100644 index 0000000..797c4ae --- /dev/null +++ b/components/icons/src/icons/circle-close.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CircleClose: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle-head-fill.tsx b/components/icons/src/icons/circle-head-fill.tsx new file mode 100644 index 0000000..5d82954 --- /dev/null +++ b/components/icons/src/icons/circle-head-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CircleHeadFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle-head.tsx b/components/icons/src/icons/circle-head.tsx new file mode 100644 index 0000000..61e8244 --- /dev/null +++ b/components/icons/src/icons/circle-head.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CircleHead: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle-info.tsx b/components/icons/src/icons/circle-info.tsx new file mode 100644 index 0000000..9863655 --- /dev/null +++ b/components/icons/src/icons/circle-info.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CircleInfo: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle-remove.tsx b/components/icons/src/icons/circle-remove.tsx new file mode 100644 index 0000000..f65dac8 --- /dev/null +++ b/components/icons/src/icons/circle-remove.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CircleRemove: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle-tail-fill.tsx b/components/icons/src/icons/circle-tail-fill.tsx new file mode 100644 index 0000000..c776288 --- /dev/null +++ b/components/icons/src/icons/circle-tail-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CircleTailFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle-tail.tsx b/components/icons/src/icons/circle-tail.tsx new file mode 100644 index 0000000..0a588b9 --- /dev/null +++ b/components/icons/src/icons/circle-tail.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CircleTail: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/circle.tsx b/components/icons/src/icons/circle.tsx new file mode 100644 index 0000000..6755ff7 --- /dev/null +++ b/components/icons/src/icons/circle.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Circle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/clear-form.tsx b/components/icons/src/icons/clear-form.tsx new file mode 100644 index 0000000..6161022 --- /dev/null +++ b/components/icons/src/icons/clear-form.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ClearForm: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/clear-format.tsx b/components/icons/src/icons/clear-format.tsx new file mode 100644 index 0000000..c5a02a8 --- /dev/null +++ b/components/icons/src/icons/clear-format.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ClearFormat: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/clear-rules.tsx b/components/icons/src/icons/clear-rules.tsx new file mode 100644 index 0000000..b0443e6 --- /dev/null +++ b/components/icons/src/icons/clear-rules.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ClearRules: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/clock.tsx b/components/icons/src/icons/clock.tsx new file mode 100644 index 0000000..b5d3e90 --- /dev/null +++ b/components/icons/src/icons/clock.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Clock: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/close.tsx b/components/icons/src/icons/close.tsx new file mode 100644 index 0000000..24f2098 --- /dev/null +++ b/components/icons/src/icons/close.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Close: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/code-view.tsx b/components/icons/src/icons/code-view.tsx new file mode 100644 index 0000000..cc55dd7 --- /dev/null +++ b/components/icons/src/icons/code-view.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CodeView: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/collapse-2.tsx b/components/icons/src/icons/collapse-2.tsx new file mode 100644 index 0000000..b023ba6 --- /dev/null +++ b/components/icons/src/icons/collapse-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Collapse2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/color-scales.tsx b/components/icons/src/icons/color-scales.tsx new file mode 100644 index 0000000..34ae659 --- /dev/null +++ b/components/icons/src/icons/color-scales.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ColorScales: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/columns.tsx b/components/icons/src/icons/columns.tsx new file mode 100644 index 0000000..a0d75b1 --- /dev/null +++ b/components/icons/src/icons/columns.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Columns: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/combo-box.tsx b/components/icons/src/icons/combo-box.tsx new file mode 100644 index 0000000..e6f2a44 --- /dev/null +++ b/components/icons/src/icons/combo-box.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ComboBox: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/comment-add.tsx b/components/icons/src/icons/comment-add.tsx new file mode 100644 index 0000000..ab0bbe8 --- /dev/null +++ b/components/icons/src/icons/comment-add.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CommentAdd: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/comment-reopen.tsx b/components/icons/src/icons/comment-reopen.tsx new file mode 100644 index 0000000..73c211e --- /dev/null +++ b/components/icons/src/icons/comment-reopen.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CommentReopen: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/comment-resolve.tsx b/components/icons/src/icons/comment-resolve.tsx new file mode 100644 index 0000000..c4316a8 --- /dev/null +++ b/components/icons/src/icons/comment-resolve.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CommentResolve: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/comment-show.tsx b/components/icons/src/icons/comment-show.tsx new file mode 100644 index 0000000..d4b43aa --- /dev/null +++ b/components/icons/src/icons/comment-show.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CommentShow: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/conditional-formatting-large.tsx b/components/icons/src/icons/conditional-formatting-large.tsx new file mode 100644 index 0000000..a205cba --- /dev/null +++ b/components/icons/src/icons/conditional-formatting-large.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ConditionalFormattingLarge: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/conditional-formatting.tsx b/components/icons/src/icons/conditional-formatting.tsx new file mode 100644 index 0000000..0052b3b --- /dev/null +++ b/components/icons/src/icons/conditional-formatting.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ConditionalFormatting: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/content-control.tsx b/components/icons/src/icons/content-control.tsx new file mode 100644 index 0000000..d69d69d --- /dev/null +++ b/components/icons/src/icons/content-control.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ContentControl: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/continue-numbering.tsx b/components/icons/src/icons/continue-numbering.tsx new file mode 100644 index 0000000..5f87bdc --- /dev/null +++ b/components/icons/src/icons/continue-numbering.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ContinueNumbering: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/continuous-page-break.tsx b/components/icons/src/icons/continuous-page-break.tsx new file mode 100644 index 0000000..ab35328 --- /dev/null +++ b/components/icons/src/icons/continuous-page-break.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ContinuousPageBreak: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/contrast.tsx b/components/icons/src/icons/contrast.tsx new file mode 100644 index 0000000..e057d06 --- /dev/null +++ b/components/icons/src/icons/contrast.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Contrast: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/copy.tsx b/components/icons/src/icons/copy.tsx new file mode 100644 index 0000000..4f0b434 --- /dev/null +++ b/components/icons/src/icons/copy.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Copy: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/critical-path.tsx b/components/icons/src/icons/critical-path.tsx new file mode 100644 index 0000000..f17dde2 --- /dev/null +++ b/components/icons/src/icons/critical-path.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const CriticalPath: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/crop.tsx b/components/icons/src/icons/crop.tsx new file mode 100644 index 0000000..9c3bc65 --- /dev/null +++ b/components/icons/src/icons/crop.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Crop: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/cut.tsx b/components/icons/src/icons/cut.tsx new file mode 100644 index 0000000..ac4d0f3 --- /dev/null +++ b/components/icons/src/icons/cut.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Cut: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/data-bars.tsx b/components/icons/src/icons/data-bars.tsx new file mode 100644 index 0000000..3486e36 --- /dev/null +++ b/components/icons/src/icons/data-bars.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DataBars: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/data-validation.tsx b/components/icons/src/icons/data-validation.tsx new file mode 100644 index 0000000..6f99ce8 --- /dev/null +++ b/components/icons/src/icons/data-validation.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DataValidation: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/date-occurring.tsx b/components/icons/src/icons/date-occurring.tsx new file mode 100644 index 0000000..a1014b2 --- /dev/null +++ b/components/icons/src/icons/date-occurring.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DateOccurring: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/day.tsx b/components/icons/src/icons/day.tsx new file mode 100644 index 0000000..40f4d2d --- /dev/null +++ b/components/icons/src/icons/day.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Day: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/decrease-indent-rtl.tsx b/components/icons/src/icons/decrease-indent-rtl.tsx new file mode 100644 index 0000000..5ff33ea --- /dev/null +++ b/components/icons/src/icons/decrease-indent-rtl.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DecreaseIndentRtl: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/decrease-indent.tsx b/components/icons/src/icons/decrease-indent.tsx new file mode 100644 index 0000000..7c6f79a --- /dev/null +++ b/components/icons/src/icons/decrease-indent.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DecreaseIndent: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/delete-column.tsx b/components/icons/src/icons/delete-column.tsx new file mode 100644 index 0000000..d7dd8a3 --- /dev/null +++ b/components/icons/src/icons/delete-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DeleteColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/delete-notes.tsx b/components/icons/src/icons/delete-notes.tsx new file mode 100644 index 0000000..86f176f --- /dev/null +++ b/components/icons/src/icons/delete-notes.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DeleteNotes: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/delete-row.tsx b/components/icons/src/icons/delete-row.tsx new file mode 100644 index 0000000..fa1e0f4 --- /dev/null +++ b/components/icons/src/icons/delete-row.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DeleteRow: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/description.tsx b/components/icons/src/icons/description.tsx new file mode 100644 index 0000000..03c71e2 --- /dev/null +++ b/components/icons/src/icons/description.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Description: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/dimension.tsx b/components/icons/src/icons/dimension.tsx new file mode 100644 index 0000000..ace34ce --- /dev/null +++ b/components/icons/src/icons/dimension.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Dimension: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/display.tsx b/components/icons/src/icons/display.tsx new file mode 100644 index 0000000..abdfe88 --- /dev/null +++ b/components/icons/src/icons/display.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Display: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/double-check.tsx b/components/icons/src/icons/double-check.tsx new file mode 100644 index 0000000..4ae89ec --- /dev/null +++ b/components/icons/src/icons/double-check.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DoubleCheck: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/download.tsx b/components/icons/src/icons/download.tsx new file mode 100644 index 0000000..59f6b9b --- /dev/null +++ b/components/icons/src/icons/download.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Download: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/drag-and-drop-indicator.tsx b/components/icons/src/icons/drag-and-drop-indicator.tsx new file mode 100644 index 0000000..ae2f53b --- /dev/null +++ b/components/icons/src/icons/drag-and-drop-indicator.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DragAndDropIndicator: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/drag-and-drop.tsx b/components/icons/src/icons/drag-and-drop.tsx new file mode 100644 index 0000000..bd57321 --- /dev/null +++ b/components/icons/src/icons/drag-and-drop.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DragAndDrop: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/drag-fill.tsx b/components/icons/src/icons/drag-fill.tsx new file mode 100644 index 0000000..89c28e7 --- /dev/null +++ b/components/icons/src/icons/drag-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DragFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/drop-down.tsx b/components/icons/src/icons/drop-down.tsx new file mode 100644 index 0000000..6c83fc2 --- /dev/null +++ b/components/icons/src/icons/drop-down.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DropDown: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/dropdown-list.tsx b/components/icons/src/icons/dropdown-list.tsx new file mode 100644 index 0000000..8205436 --- /dev/null +++ b/components/icons/src/icons/dropdown-list.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DropdownList: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/duplicate-cell.tsx b/components/icons/src/icons/duplicate-cell.tsx new file mode 100644 index 0000000..f70da01 --- /dev/null +++ b/components/icons/src/icons/duplicate-cell.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const DuplicateCell: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/duplicate.tsx b/components/icons/src/icons/duplicate.tsx new file mode 100644 index 0000000..a3b42ff --- /dev/null +++ b/components/icons/src/icons/duplicate.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Duplicate: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/edit-notes.tsx b/components/icons/src/icons/edit-notes.tsx new file mode 100644 index 0000000..515b584 --- /dev/null +++ b/components/icons/src/icons/edit-notes.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const EditNotes: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/edit.tsx b/components/icons/src/icons/edit.tsx new file mode 100644 index 0000000..6cc464a --- /dev/null +++ b/components/icons/src/icons/edit.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Edit: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/elaborate.tsx b/components/icons/src/icons/elaborate.tsx new file mode 100644 index 0000000..e0dbd20 --- /dev/null +++ b/components/icons/src/icons/elaborate.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Elaborate: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/emoji.tsx b/components/icons/src/icons/emoji.tsx new file mode 100644 index 0000000..75db695 --- /dev/null +++ b/components/icons/src/icons/emoji.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Emoji: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/end-footnote.tsx b/components/icons/src/icons/end-footnote.tsx new file mode 100644 index 0000000..831db1a --- /dev/null +++ b/components/icons/src/icons/end-footnote.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const EndFootnote: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/equalto.tsx b/components/icons/src/icons/equalto.tsx new file mode 100644 index 0000000..a2b8884 --- /dev/null +++ b/components/icons/src/icons/equalto.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Equalto: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/erase.tsx b/components/icons/src/icons/erase.tsx new file mode 100644 index 0000000..95591bc --- /dev/null +++ b/components/icons/src/icons/erase.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Erase: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/error-treeview.tsx b/components/icons/src/icons/error-treeview.tsx new file mode 100644 index 0000000..6a722e0 --- /dev/null +++ b/components/icons/src/icons/error-treeview.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ErrorTreeview: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/even-page-break.tsx b/components/icons/src/icons/even-page-break.tsx new file mode 100644 index 0000000..834b287 --- /dev/null +++ b/components/icons/src/icons/even-page-break.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const EvenPageBreak: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/exit-full-screen.tsx b/components/icons/src/icons/exit-full-screen.tsx new file mode 100644 index 0000000..0e02a8d --- /dev/null +++ b/components/icons/src/icons/exit-full-screen.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ExitFullScreen: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/expand.tsx b/components/icons/src/icons/expand.tsx new file mode 100644 index 0000000..114cdb8 --- /dev/null +++ b/components/icons/src/icons/expand.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Expand: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/export-csv.tsx b/components/icons/src/icons/export-csv.tsx new file mode 100644 index 0000000..7ded746 --- /dev/null +++ b/components/icons/src/icons/export-csv.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ExportCsv: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/export-excel.tsx b/components/icons/src/icons/export-excel.tsx new file mode 100644 index 0000000..9d484cf --- /dev/null +++ b/components/icons/src/icons/export-excel.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ExportExcel: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/export-pdf-1.tsx b/components/icons/src/icons/export-pdf-1.tsx new file mode 100644 index 0000000..f97faf1 --- /dev/null +++ b/components/icons/src/icons/export-pdf-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ExportPdf1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/export-pdf.tsx b/components/icons/src/icons/export-pdf.tsx new file mode 100644 index 0000000..ff0a367 --- /dev/null +++ b/components/icons/src/icons/export-pdf.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ExportPdf: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/export-png.tsx b/components/icons/src/icons/export-png.tsx new file mode 100644 index 0000000..884cd47 --- /dev/null +++ b/components/icons/src/icons/export-png.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ExportPng: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/export-svg.tsx b/components/icons/src/icons/export-svg.tsx new file mode 100644 index 0000000..d81aafb --- /dev/null +++ b/components/icons/src/icons/export-svg.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ExportSvg: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/export-word-1.tsx b/components/icons/src/icons/export-word-1.tsx new file mode 100644 index 0000000..321f187 --- /dev/null +++ b/components/icons/src/icons/export-word-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ExportWord1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/export-xls.tsx b/components/icons/src/icons/export-xls.tsx new file mode 100644 index 0000000..03ceec9 --- /dev/null +++ b/components/icons/src/icons/export-xls.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ExportXls: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/export.tsx b/components/icons/src/icons/export.tsx new file mode 100644 index 0000000..2d3e318 --- /dev/null +++ b/components/icons/src/icons/export.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Export: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/eye-slash.tsx b/components/icons/src/icons/eye-slash.tsx new file mode 100644 index 0000000..a1b5a78 --- /dev/null +++ b/components/icons/src/icons/eye-slash.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const EyeSlash: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/eye.tsx b/components/icons/src/icons/eye.tsx new file mode 100644 index 0000000..21009d1 --- /dev/null +++ b/components/icons/src/icons/eye.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Eye: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/fade.tsx b/components/icons/src/icons/fade.tsx new file mode 100644 index 0000000..952c89d --- /dev/null +++ b/components/icons/src/icons/fade.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Fade: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/field-settings.tsx b/components/icons/src/icons/field-settings.tsx new file mode 100644 index 0000000..b4b5c89 --- /dev/null +++ b/components/icons/src/icons/field-settings.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FieldSettings: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/file-document.tsx b/components/icons/src/icons/file-document.tsx new file mode 100644 index 0000000..a38206d --- /dev/null +++ b/components/icons/src/icons/file-document.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FileDocument: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/file-new.tsx b/components/icons/src/icons/file-new.tsx new file mode 100644 index 0000000..1394ff1 --- /dev/null +++ b/components/icons/src/icons/file-new.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FileNew: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/filter-active.tsx b/components/icons/src/icons/filter-active.tsx new file mode 100644 index 0000000..f142f31 --- /dev/null +++ b/components/icons/src/icons/filter-active.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FilterActive: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/filter-clear.tsx b/components/icons/src/icons/filter-clear.tsx new file mode 100644 index 0000000..ec57053 --- /dev/null +++ b/components/icons/src/icons/filter-clear.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FilterClear: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/filter-main.tsx b/components/icons/src/icons/filter-main.tsx new file mode 100644 index 0000000..7935705 --- /dev/null +++ b/components/icons/src/icons/filter-main.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FilterMain: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/filter.tsx b/components/icons/src/icons/filter.tsx new file mode 100644 index 0000000..ec2f7c6 --- /dev/null +++ b/components/icons/src/icons/filter.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Filter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/filtered-sort-ascending.tsx b/components/icons/src/icons/filtered-sort-ascending.tsx new file mode 100644 index 0000000..2e71f14 --- /dev/null +++ b/components/icons/src/icons/filtered-sort-ascending.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FilteredSortAscending: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/filtered-sort-descending.tsx b/components/icons/src/icons/filtered-sort-descending.tsx new file mode 100644 index 0000000..da2bef2 --- /dev/null +++ b/components/icons/src/icons/filtered-sort-descending.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FilteredSortDescending: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/filtered.tsx b/components/icons/src/icons/filtered.tsx new file mode 100644 index 0000000..37f9e6d --- /dev/null +++ b/components/icons/src/icons/filtered.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Filtered: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/filters.tsx b/components/icons/src/icons/filters.tsx new file mode 100644 index 0000000..d438558 --- /dev/null +++ b/components/icons/src/icons/filters.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Filters: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/first-page.tsx b/components/icons/src/icons/first-page.tsx new file mode 100644 index 0000000..9542557 --- /dev/null +++ b/components/icons/src/icons/first-page.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FirstPage: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/fixed-column-width.tsx b/components/icons/src/icons/fixed-column-width.tsx new file mode 100644 index 0000000..d2dba18 --- /dev/null +++ b/components/icons/src/icons/fixed-column-width.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FixedColumnWidth: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/flags.tsx b/components/icons/src/icons/flags.tsx new file mode 100644 index 0000000..ca845a5 --- /dev/null +++ b/components/icons/src/icons/flags.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Flags: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/flip-horizontal.tsx b/components/icons/src/icons/flip-horizontal.tsx new file mode 100644 index 0000000..18fe730 --- /dev/null +++ b/components/icons/src/icons/flip-horizontal.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FlipHorizontal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/flip-vertical.tsx b/components/icons/src/icons/flip-vertical.tsx new file mode 100644 index 0000000..b5522a0 --- /dev/null +++ b/components/icons/src/icons/flip-vertical.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FlipVertical: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/folder-open.tsx b/components/icons/src/icons/folder-open.tsx new file mode 100644 index 0000000..e91839c --- /dev/null +++ b/components/icons/src/icons/folder-open.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FolderOpen: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/folder.tsx b/components/icons/src/icons/folder.tsx new file mode 100644 index 0000000..2084d9d --- /dev/null +++ b/components/icons/src/icons/folder.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Folder: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/font-color.tsx b/components/icons/src/icons/font-color.tsx new file mode 100644 index 0000000..f11c1de --- /dev/null +++ b/components/icons/src/icons/font-color.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FontColor: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/font-name.tsx b/components/icons/src/icons/font-name.tsx new file mode 100644 index 0000000..02d9217 --- /dev/null +++ b/components/icons/src/icons/font-name.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FontName: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/font-size.tsx b/components/icons/src/icons/font-size.tsx new file mode 100644 index 0000000..d4f511c --- /dev/null +++ b/components/icons/src/icons/font-size.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FontSize: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/food-and-drinks.tsx b/components/icons/src/icons/food-and-drinks.tsx new file mode 100644 index 0000000..a84c53b --- /dev/null +++ b/components/icons/src/icons/food-and-drinks.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FoodAndDrinks: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/footer.tsx b/components/icons/src/icons/footer.tsx new file mode 100644 index 0000000..39db4a7 --- /dev/null +++ b/components/icons/src/icons/footer.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Footer: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/form-field.tsx b/components/icons/src/icons/form-field.tsx new file mode 100644 index 0000000..d737124 --- /dev/null +++ b/components/icons/src/icons/form-field.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FormField: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/format-painter.tsx b/components/icons/src/icons/format-painter.tsx new file mode 100644 index 0000000..2716337 --- /dev/null +++ b/components/icons/src/icons/format-painter.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FormatPainter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-1.tsx b/components/icons/src/icons/frame-1.tsx new file mode 100644 index 0000000..66b86f8 --- /dev/null +++ b/components/icons/src/icons/frame-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-10.tsx b/components/icons/src/icons/frame-10.tsx new file mode 100644 index 0000000..91e63b7 --- /dev/null +++ b/components/icons/src/icons/frame-10.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame10: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-11.tsx b/components/icons/src/icons/frame-11.tsx new file mode 100644 index 0000000..d68f175 --- /dev/null +++ b/components/icons/src/icons/frame-11.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame11: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-2.tsx b/components/icons/src/icons/frame-2.tsx new file mode 100644 index 0000000..5990fba --- /dev/null +++ b/components/icons/src/icons/frame-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-3.tsx b/components/icons/src/icons/frame-3.tsx new file mode 100644 index 0000000..508f2db --- /dev/null +++ b/components/icons/src/icons/frame-3.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame3: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-4.tsx b/components/icons/src/icons/frame-4.tsx new file mode 100644 index 0000000..4ea3a97 --- /dev/null +++ b/components/icons/src/icons/frame-4.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame4: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-5.tsx b/components/icons/src/icons/frame-5.tsx new file mode 100644 index 0000000..9e6ee77 --- /dev/null +++ b/components/icons/src/icons/frame-5.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame5: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-6.tsx b/components/icons/src/icons/frame-6.tsx new file mode 100644 index 0000000..9699b74 --- /dev/null +++ b/components/icons/src/icons/frame-6.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame6: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-7.tsx b/components/icons/src/icons/frame-7.tsx new file mode 100644 index 0000000..71d694d --- /dev/null +++ b/components/icons/src/icons/frame-7.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame7: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-8.tsx b/components/icons/src/icons/frame-8.tsx new file mode 100644 index 0000000..b759a97 --- /dev/null +++ b/components/icons/src/icons/frame-8.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame8: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-9.tsx b/components/icons/src/icons/frame-9.tsx new file mode 100644 index 0000000..58ce6e7 --- /dev/null +++ b/components/icons/src/icons/frame-9.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Frame9: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-bevel.tsx b/components/icons/src/icons/frame-bevel.tsx new file mode 100644 index 0000000..860dd61 --- /dev/null +++ b/components/icons/src/icons/frame-bevel.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FrameBevel: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-custom.tsx b/components/icons/src/icons/frame-custom.tsx new file mode 100644 index 0000000..fd2df75 --- /dev/null +++ b/components/icons/src/icons/frame-custom.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FrameCustom: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-hook.tsx b/components/icons/src/icons/frame-hook.tsx new file mode 100644 index 0000000..9c3b31e --- /dev/null +++ b/components/icons/src/icons/frame-hook.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FrameHook: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-inset.tsx b/components/icons/src/icons/frame-inset.tsx new file mode 100644 index 0000000..7b0dfb8 --- /dev/null +++ b/components/icons/src/icons/frame-inset.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FrameInset: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-line.tsx b/components/icons/src/icons/frame-line.tsx new file mode 100644 index 0000000..d3c54f1 --- /dev/null +++ b/components/icons/src/icons/frame-line.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FrameLine: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-mat.tsx b/components/icons/src/icons/frame-mat.tsx new file mode 100644 index 0000000..f4af887 --- /dev/null +++ b/components/icons/src/icons/frame-mat.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FrameMat: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/frame-none.tsx b/components/icons/src/icons/frame-none.tsx new file mode 100644 index 0000000..5e6554c --- /dev/null +++ b/components/icons/src/icons/frame-none.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FrameNone: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/freeze-column.tsx b/components/icons/src/icons/freeze-column.tsx new file mode 100644 index 0000000..343d90b --- /dev/null +++ b/components/icons/src/icons/freeze-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FreezeColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/freeze-pane.tsx b/components/icons/src/icons/freeze-pane.tsx new file mode 100644 index 0000000..03cbfe3 --- /dev/null +++ b/components/icons/src/icons/freeze-pane.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FreezePane: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/freeze-row.tsx b/components/icons/src/icons/freeze-row.tsx new file mode 100644 index 0000000..954bc49 --- /dev/null +++ b/components/icons/src/icons/freeze-row.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FreezeRow: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/full-screen.tsx b/components/icons/src/icons/full-screen.tsx new file mode 100644 index 0000000..f75ef0a --- /dev/null +++ b/components/icons/src/icons/full-screen.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const FullScreen: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/gantt-gripper.tsx b/components/icons/src/icons/gantt-gripper.tsx new file mode 100644 index 0000000..dea01b2 --- /dev/null +++ b/components/icons/src/icons/gantt-gripper.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const GanttGripper: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/grain.tsx b/components/icons/src/icons/grain.tsx new file mode 100644 index 0000000..5cb9cc9 --- /dev/null +++ b/components/icons/src/icons/grain.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Grain: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/grammar-check.tsx b/components/icons/src/icons/grammar-check.tsx new file mode 100644 index 0000000..ac1b332 --- /dev/null +++ b/components/icons/src/icons/grammar-check.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const GrammarCheck: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/grand-total.tsx b/components/icons/src/icons/grand-total.tsx new file mode 100644 index 0000000..959cf36 --- /dev/null +++ b/components/icons/src/icons/grand-total.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const GrandTotal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/greater-than.tsx b/components/icons/src/icons/greater-than.tsx new file mode 100644 index 0000000..06e5b57 --- /dev/null +++ b/components/icons/src/icons/greater-than.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const GreaterThan: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/grid-view.tsx b/components/icons/src/icons/grid-view.tsx new file mode 100644 index 0000000..a79cd0a --- /dev/null +++ b/components/icons/src/icons/grid-view.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const GridView: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/grip-vertical.tsx b/components/icons/src/icons/grip-vertical.tsx new file mode 100644 index 0000000..feb83e1 --- /dev/null +++ b/components/icons/src/icons/grip-vertical.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const GripVertical: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/group-1.tsx b/components/icons/src/icons/group-1.tsx new file mode 100644 index 0000000..5284e6f --- /dev/null +++ b/components/icons/src/icons/group-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Group1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/group-2.tsx b/components/icons/src/icons/group-2.tsx new file mode 100644 index 0000000..d7e1d1f --- /dev/null +++ b/components/icons/src/icons/group-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Group2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/group-icon.tsx b/components/icons/src/icons/group-icon.tsx new file mode 100644 index 0000000..9635487 --- /dev/null +++ b/components/icons/src/icons/group-icon.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const GroupIcon: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/hand-gestures.tsx b/components/icons/src/icons/hand-gestures.tsx new file mode 100644 index 0000000..467f619 --- /dev/null +++ b/components/icons/src/icons/hand-gestures.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const HandGestures: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/header.tsx b/components/icons/src/icons/header.tsx new file mode 100644 index 0000000..2d7a0cb --- /dev/null +++ b/components/icons/src/icons/header.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Header: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/hide-formula-bar.tsx b/components/icons/src/icons/hide-formula-bar.tsx new file mode 100644 index 0000000..bb8bb7b --- /dev/null +++ b/components/icons/src/icons/hide-formula-bar.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const HideFormulaBar: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/hide-gridlines.tsx b/components/icons/src/icons/hide-gridlines.tsx new file mode 100644 index 0000000..c9f818f --- /dev/null +++ b/components/icons/src/icons/hide-gridlines.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const HideGridlines: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/hide-headings.tsx b/components/icons/src/icons/hide-headings.tsx new file mode 100644 index 0000000..9a26251 --- /dev/null +++ b/components/icons/src/icons/hide-headings.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const HideHeadings: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/highlight-color.tsx b/components/icons/src/icons/highlight-color.tsx new file mode 100644 index 0000000..f776066 --- /dev/null +++ b/components/icons/src/icons/highlight-color.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const HighlightColor: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/highlight.tsx b/components/icons/src/icons/highlight.tsx new file mode 100644 index 0000000..1b8d3f1 --- /dev/null +++ b/components/icons/src/icons/highlight.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Highlight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/home.tsx b/components/icons/src/icons/home.tsx new file mode 100644 index 0000000..ad38af1 --- /dev/null +++ b/components/icons/src/icons/home.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Home: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/hyperlink-copy.tsx b/components/icons/src/icons/hyperlink-copy.tsx new file mode 100644 index 0000000..e184454 --- /dev/null +++ b/components/icons/src/icons/hyperlink-copy.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const HyperlinkCopy: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/hyperlink-edit.tsx b/components/icons/src/icons/hyperlink-edit.tsx new file mode 100644 index 0000000..9561fff --- /dev/null +++ b/components/icons/src/icons/hyperlink-edit.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const HyperlinkEdit: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/hyperlink-open.tsx b/components/icons/src/icons/hyperlink-open.tsx new file mode 100644 index 0000000..e93cd13 --- /dev/null +++ b/components/icons/src/icons/hyperlink-open.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const HyperlinkOpen: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/hyperlink-remove.tsx b/components/icons/src/icons/hyperlink-remove.tsx new file mode 100644 index 0000000..3a5affa --- /dev/null +++ b/components/icons/src/icons/hyperlink-remove.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const HyperlinkRemove: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/iconsets.tsx b/components/icons/src/icons/iconsets.tsx new file mode 100644 index 0000000..197f669 --- /dev/null +++ b/components/icons/src/icons/iconsets.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Iconsets: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/image.tsx b/components/icons/src/icons/image.tsx new file mode 100644 index 0000000..c9cce8d --- /dev/null +++ b/components/icons/src/icons/image.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Image: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/import-1.tsx b/components/icons/src/icons/import-1.tsx new file mode 100644 index 0000000..9c523e5 --- /dev/null +++ b/components/icons/src/icons/import-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Import1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/import-word.tsx b/components/icons/src/icons/import-word.tsx new file mode 100644 index 0000000..0ee21f8 --- /dev/null +++ b/components/icons/src/icons/import-word.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ImportWord: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/import.tsx b/components/icons/src/icons/import.tsx new file mode 100644 index 0000000..188c2a1 --- /dev/null +++ b/components/icons/src/icons/import.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Import: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/increase-indent-rtl.tsx b/components/icons/src/icons/increase-indent-rtl.tsx new file mode 100644 index 0000000..884c8ff --- /dev/null +++ b/components/icons/src/icons/increase-indent-rtl.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const IncreaseIndentRtl: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/increase-indent.tsx b/components/icons/src/icons/increase-indent.tsx new file mode 100644 index 0000000..a632ab7 --- /dev/null +++ b/components/icons/src/icons/increase-indent.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const IncreaseIndent: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/index.ts b/components/icons/src/icons/index.ts new file mode 100644 index 0000000..0910f00 --- /dev/null +++ b/components/icons/src/icons/index.ts @@ -0,0 +1,544 @@ +export * from './above-average'; +export * from './activities'; +export * from './add-chart-element'; +export * from './add-notes'; +export * from './adjustment'; +export * from './agenda-date-range'; +export * from './ai-chat'; +export * from './align-bottom'; +export * from './align-center'; +export * from './align-left'; +export * from './align-middle'; +export * from './align-right'; +export * from './align-top'; +export * from './all'; +export * from './animals'; +export * from './annotation-edit'; +export * from './area'; +export * from './arrow-down'; +export * from './arrow-head-fill'; +export * from './arrow-head'; +export * from './arrow-left'; +export * from './arrow-right-up'; +export * from './arrow-right'; +export * from './arrow-tail-fill'; +export * from './arrow-tail'; +export * from './arrow-up'; +export * from './audio'; +export * from './auto-fit-all-column'; +export * from './auto-fit-column'; +export * from './auto-fit-content'; +export * from './auto-fit-window'; +export * from './bar-head'; +export * from './bar-tail'; +export * from './below-average'; +export * from './between'; +export * from './blockquote'; +export * from './bold'; +export * from './bookmark'; +export * from './border-all'; +export * from './border-bottom'; +export * from './border-box'; +export * from './border-center'; +export * from './border-custom'; +export * from './border-diagonal-1'; +export * from './border-diagonal-2'; +export * from './border-diagonal-down'; +export * from './border-diagonal-up'; +export * from './border-frame'; +export * from './border-inner'; +export * from './border-left'; +export * from './border-middle'; +export * from './border-none-1'; +export * from './border-none'; +export * from './border-outer'; +export * from './border-right'; +export * from './border-shadow-1'; +export * from './border-shadow-2'; +export * from './border-top'; +export * from './bottom-10-items'; +export * from './bottom-10'; +export * from './box'; +export * from './break-page'; +export * from './break-section'; +export * from './break'; +export * from './brightness'; +export * from './bring-forward'; +export * from './bring-to-center'; +export * from './bring-to-front'; +export * from './bring-to-view'; +export * from './building-block'; +export * from './bullet-1'; +export * from './bullet-2'; +export * from './bullet-3'; +export * from './bullet-4'; +export * from './bullet-5'; +export * from './bullet-6'; +export * from './bullet-7'; +export * from './button-field'; +export * from './calculate-sheet'; +export * from './calculated-member'; +export * from './calculation'; +export * from './caption-1'; +export * from './caption'; +export * from './cell'; +export * from './change-case'; +export * from './change-scale-ratio'; +export * from './changes-accept'; +export * from './changes-reject'; +export * from './changes-track'; +export * from './character-style'; +export * from './chart-2d-100-percent-stacked-area'; +export * from './chart-2d-100-percent-stacked-bar'; +export * from './chart-2d-100-percent-stacked-column'; +export * from './chart-2d-100-percent-stacked-line-marked'; +export * from './chart-2d-100-percent-stacked-line'; +export * from './chart-2d-area'; +export * from './chart-2d-clustered-bar'; +export * from './chart-2d-clustered-column'; +export * from './chart-2d-line-marked'; +export * from './chart-2d-line'; +export * from './chart-2d-pie-2'; +export * from './chart-2d-stacked-area'; +export * from './chart-2d-stacked-bar'; +export * from './chart-2d-stacked-column'; +export * from './chart-2d-stacked-line-marked'; +export * from './chart-2d-stacked-line'; +export * from './chart-axes-primary-horizontal'; +export * from './chart-axes-primary-vertical'; +export * from './chart-axes'; +export * from './chart-axis-titles-primary-horizontal'; +export * from './chart-axis-titles-primary-vertical'; +export * from './chart-axis-titles'; +export * from './chart-data-labels-center'; +export * from './chart-data-labels-inside-base'; +export * from './chart-data-labels-inside-end'; +export * from './chart-data-labels-none'; +export * from './chart-data-labels-outside-end'; +export * from './chart-data-labels'; +export * from './chart-donut'; +export * from './chart-gridlines'; +export * from './chart-insert-bar'; +export * from './chart-insert-column'; +export * from './chart-insert-line'; +export * from './chart-insert-pie'; +export * from './chart-insert-x-y-scatter'; +export * from './chart-legend-bottom'; +export * from './chart-legend-left'; +export * from './chart-legend-none'; +export * from './chart-legend-right'; +export * from './chart-legend-top'; +export * from './chart-legend'; +export * from './chart-lines'; +export * from './chart-primary-major-horizontal'; +export * from './chart-primary-major-vertical'; +export * from './chart-primary-minor-horizontal'; +export * from './chart-primary-minor-vertical'; +export * from './chart-switch-row-column'; +export * from './chart-title-centered-overlay'; +export * from './chart-title-none'; +export * from './chart-title'; +export * from './chart'; +export * from './check-box'; +export * from './check-large'; +export * from './check-small'; +export * from './check-tick'; +export * from './check'; +export * from './chevron-down-double'; +export * from './chevron-down-fill'; +export * from './chevron-down-small'; +export * from './chevron-down'; +export * from './chevron-left-double'; +export * from './chevron-left-fill'; +export * from './chevron-left-small'; +export * from './chevron-left'; +export * from './chevron-right-double'; +export * from './chevron-right-fill'; +export * from './chevron-right-small'; +export * from './chevron-right'; +export * from './chevron-up-double'; +export * from './chevron-up-fill'; +export * from './chevron-up-small'; +export * from './chevron-up'; +export * from './circle-add'; +export * from './circle-check'; +export * from './circle-close'; +export * from './circle-head-fill'; +export * from './circle-head'; +export * from './circle-info'; +export * from './circle-remove'; +export * from './circle-tail-fill'; +export * from './circle-tail'; +export * from './circle'; +export * from './clear-form'; +export * from './clear-format'; +export * from './clear-rules'; +export * from './clock'; +export * from './close'; +export * from './code-view'; +export * from './collapse-2'; +export * from './color-scales'; +export * from './columns'; +export * from './combo-box'; +export * from './comment-add'; +export * from './comment-reopen'; +export * from './comment-resolve'; +export * from './comment-show'; +export * from './conditional-formatting-large'; +export * from './conditional-formatting'; +export * from './content-control'; +export * from './continue-numbering'; +export * from './continuous-page-break'; +export * from './contrast'; +export * from './copy'; +export * from './critical-path'; +export * from './crop'; +export * from './cut'; +export * from './data-bars'; +export * from './data-validation'; +export * from './date-occurring'; +export * from './day'; +export * from './decrease-indent-rtl'; +export * from './decrease-indent'; +export * from './delete-column'; +export * from './delete-notes'; +export * from './delete-row'; +export * from './description'; +export * from './dimension'; +export * from './display'; +export * from './double-check'; +export * from './download'; +export * from './drag-and-drop-indicator'; +export * from './drag-and-drop'; +export * from './drag-fill'; +export * from './drop-down'; +export * from './dropdown-list'; +export * from './duplicate-cell'; +export * from './duplicate'; +export * from './edit-notes'; +export * from './edit'; +export * from './elaborate'; +export * from './emoji'; +export * from './end-footnote'; +export * from './equalto'; +export * from './erase'; +export * from './error-treeview'; +export * from './even-page-break'; +export * from './exit-full-screen'; +export * from './expand'; +export * from './export-csv'; +export * from './export-excel'; +export * from './export-pdf-1'; +export * from './export-pdf'; +export * from './export-png'; +export * from './export-svg'; +export * from './export-word-1'; +export * from './export-xls'; +export * from './export'; +export * from './eye-slash'; +export * from './eye'; +export * from './fade'; +export * from './field-settings'; +export * from './file-document'; +export * from './file-new'; +export * from './filter-active'; +export * from './filter-clear'; +export * from './filter-main'; +export * from './filter'; +export * from './filtered-sort-ascending'; +export * from './filtered-sort-descending'; +export * from './filtered'; +export * from './filters'; +export * from './first-page'; +export * from './fixed-column-width'; +export * from './flags'; +export * from './flip-horizontal'; +export * from './flip-vertical'; +export * from './folder-open'; +export * from './folder'; +export * from './font-color'; +export * from './font-name'; +export * from './font-size'; +export * from './food-and-drinks'; +export * from './footer'; +export * from './form-field'; +export * from './format-painter'; +export * from './frame-1'; +export * from './frame-10'; +export * from './frame-11'; +export * from './frame-2'; +export * from './frame-3'; +export * from './frame-4'; +export * from './frame-5'; +export * from './frame-6'; +export * from './frame-7'; +export * from './frame-8'; +export * from './frame-9'; +export * from './frame-bevel'; +export * from './frame-custom'; +export * from './frame-hook'; +export * from './frame-inset'; +export * from './frame-line'; +export * from './frame-mat'; +export * from './frame-none'; +export * from './freeze-column'; +export * from './freeze-pane'; +export * from './freeze-row'; +export * from './full-screen'; +export * from './gantt-gripper'; +export * from './grain'; +export * from './grammar-check'; +export * from './grand-total'; +export * from './greater-than'; +export * from './grid-view'; +export * from './grip-vertical'; +export * from './group-1'; +export * from './group-2'; +export * from './group-icon'; +export * from './hand-gestures'; +export * from './header'; +export * from './hide-formula-bar'; +export * from './hide-gridlines'; +export * from './hide-headings'; +export * from './highlight-color'; +export * from './highlight'; +export * from './home'; +export * from './hyperlink-copy'; +export * from './hyperlink-edit'; +export * from './hyperlink-open'; +export * from './hyperlink-remove'; +export * from './iconsets'; +export * from './image'; +export * from './import-1'; +export * from './import-word'; +export * from './import'; +export * from './increase-indent-rtl'; +export * from './increase-indent'; +export * from './insert-above'; +export * from './insert-below'; +export * from './insert-code'; +export * from './insert-left'; +export * from './insert-right'; +export * from './insert-sheet'; +export * from './intermediate-state-2'; +export * from './intermediate-state'; +export * from './italic'; +export * from './justify'; +export * from './kpi'; +export * from './last-page'; +export * from './launcher'; +export * from './layers'; +export * from './length'; +export * from './less-than'; +export * from './level-1'; +export * from './level-2'; +export * from './level-3'; +export * from './level-4'; +export * from './level-5'; +export * from './line-normal'; +export * from './line-small'; +export * from './line-spacing'; +export * from './line-very-small'; +export * from './line'; +export * from './link-remove'; +export * from './link'; +export * from './linked-style'; +export * from './list-ordered-rtl'; +export * from './list-ordered'; +export * from './list-unordered-rtl'; +export * from './list-unordered'; +export * from './location'; +export * from './lock'; +export * from './lower-case'; +export * from './mdx'; +export * from './menu'; +export * from './merge-cells'; +export * from './microphone'; +export * from './month-agenda'; +export * from './month'; +export * from './more-chevron'; +export * from './more-horizontal-1'; +export * from './more-scatter-charts'; +export * from './more-vertical-1'; +export * from './more-vertical-2'; +export * from './mouse-pointer'; +export * from './multiple-comment-resolve'; +export * from './multiple-comment'; +export * from './named-set'; +export * from './nature'; +export * from './none'; +export * from './notes'; +export * from './number-formatting'; +export * from './objects'; +export * from './odd-page-break'; +export * from './opacity'; +export * from './open-link'; +export * from './order'; +export * from './organize-pdf'; +export * from './page-column-left'; +export * from './page-column-one'; +export * from './page-column-right'; +export * from './page-column-three'; +export * from './page-column-two'; +export * from './page-column'; +export * from './page-columns'; +export * from './page-numbering'; +export * from './page-setup'; +export * from './page-size'; +export * from './page-text-wrap'; +export * from './paint-bucket'; +export * from './pan'; +export * from './paragraph'; +export * from './password'; +export * from './paste-match-destination'; +export * from './paste-style'; +export * from './paste-text-only'; +export * from './paste'; +export * from './pause'; +export * from './pentagon'; +export * from './people'; +export * from './perimeter'; +export * from './play'; +export * from './plus'; +export * from './preformat-code'; +export * from './print-layout'; +export * from './print'; +export * from './properties-1'; +export * from './properties-2'; +export * from './protect-sheet'; +export * from './protect-workbook'; +export * from './radio-button'; +export * from './radius'; +export * from './reapply'; +export * from './rectangle'; +export * from './recurrence-edit'; +export * from './redact'; +export * from './redaction'; +export * from './redo'; +export * from './refresh'; +export * from './rename'; +export * from './repeat'; +export * from './repeating-section'; +export * from './rephrase'; +export * from './replace'; +export * from './reset'; +export * from './resize'; +export * from './resizer-horizontal'; +export * from './resizer-right'; +export * from './resizer-vertical'; +export * from './resizer'; +export * from './restart-at-1'; +export * from './saturation'; +export * from './save-as'; +export * from './save'; +export * from './search'; +export * from './select-all'; +export * from './selection'; +export * from './send-backward'; +export * from './send-to-back'; +export * from './send'; +export * from './settings'; +export * from './shapes'; +export * from './sharpness'; +export * from './shorten'; +export * from './show-hide-panel'; +export * from './signature'; +export * from './smart-paste'; +export * from './sort-ascending-2'; +export * from './sort-ascending'; +export * from './sort-descending-2'; +export * from './sort-descending'; +export * from './sorting-1'; +export * from './sorting-2'; +export * from './sorting-3'; +export * from './spacing-after'; +export * from './spacing-before'; +export * from './spell-check'; +export * from './split-horizontal'; +export * from './split-vertical'; +export * from './square-head-fill'; +export * from './square-head'; +export * from './square-tail-fill'; +export * from './square-tail'; +export * from './squiggly'; +export * from './stamp'; +export * from './star-filled'; +export * from './stop-rectangle'; +export * from './strikethrough'; +export * from './stroke-width'; +export * from './style'; +export * from './sub-total'; +export * from './subscript'; +export * from './sum'; +export * from './superscript'; +export * from './symbols'; +export * from './table-2'; +export * from './table-align-center'; +export * from './table-align-left'; +export * from './table-align-right'; +export * from './table-border-custom'; +export * from './table-cell-none'; +export * from './table-cell'; +export * from './table-delete'; +export * from './table-header'; +export * from './table-insert-column'; +export * from './table-insert-row'; +export * from './table-merge'; +export * from './table-nested'; +export * from './table-of-content'; +export * from './table-overwrite-cells'; +export * from './table-update'; +export * from './table'; +export * from './text-alternative'; +export * from './text-annotation'; +export * from './text-form'; +export * from './text-header'; +export * from './text-outline'; +export * from './text-that-contains'; +export * from './text-wrap'; +export * from './thumbnail'; +export * from './thumbs-down-fill'; +export * from './thumbs-down'; +export * from './thumbs-up-fill'; +export * from './thumbs-up'; +export * from './time-zone'; +export * from './timeline-day'; +export * from './timeline-month'; +export * from './timeline-today'; +export * from './timeline-week'; +export * from './timeline-work-week'; +export * from './tint'; +export * from './top-10'; +export * from './top-bottom-rules'; +export * from './transform-left'; +export * from './transform-right'; +export * from './transform'; +export * from './translate'; +export * from './trash'; +export * from './travel-and-places'; +export * from './triangle'; +export * from './two-column'; +export * from './two-row'; +export * from './underline'; +export * from './undo'; +export * from './unfiltered'; +export * from './ungroup-1'; +export * from './ungroup-2'; +export * from './unlock'; +export * from './upload-1'; +export * from './upper-case'; +export * from './user-defined'; +export * from './user'; +export * from './vertical-align-bottom'; +export * from './vertical-align-center'; +export * from './vertical-align-top'; +export * from './video'; +export * from './view-side'; +export * from './volume'; +export * from './warning'; +export * from './web-layout'; +export * from './week'; +export * from './xml-mapping'; +export * from './zoom-in'; +export * from './zoom-out'; +export * from './zoom-to-fit'; diff --git a/components/icons/src/icons/insert-above.tsx b/components/icons/src/icons/insert-above.tsx new file mode 100644 index 0000000..bc808c8 --- /dev/null +++ b/components/icons/src/icons/insert-above.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const InsertAbove: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/insert-below.tsx b/components/icons/src/icons/insert-below.tsx new file mode 100644 index 0000000..2b5e004 --- /dev/null +++ b/components/icons/src/icons/insert-below.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const InsertBelow: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/insert-code.tsx b/components/icons/src/icons/insert-code.tsx new file mode 100644 index 0000000..68caca7 --- /dev/null +++ b/components/icons/src/icons/insert-code.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const InsertCode: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/insert-left.tsx b/components/icons/src/icons/insert-left.tsx new file mode 100644 index 0000000..0bdead5 --- /dev/null +++ b/components/icons/src/icons/insert-left.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const InsertLeft: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/insert-right.tsx b/components/icons/src/icons/insert-right.tsx new file mode 100644 index 0000000..b898eef --- /dev/null +++ b/components/icons/src/icons/insert-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const InsertRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/insert-sheet.tsx b/components/icons/src/icons/insert-sheet.tsx new file mode 100644 index 0000000..cfdd87a --- /dev/null +++ b/components/icons/src/icons/insert-sheet.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const InsertSheet: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/intermediate-state-2.tsx b/components/icons/src/icons/intermediate-state-2.tsx new file mode 100644 index 0000000..900ace4 --- /dev/null +++ b/components/icons/src/icons/intermediate-state-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const IntermediateState2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/intermediate-state.tsx b/components/icons/src/icons/intermediate-state.tsx new file mode 100644 index 0000000..d1d231c --- /dev/null +++ b/components/icons/src/icons/intermediate-state.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const IntermediateState: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/italic.tsx b/components/icons/src/icons/italic.tsx new file mode 100644 index 0000000..91661ce --- /dev/null +++ b/components/icons/src/icons/italic.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Italic: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/justify.tsx b/components/icons/src/icons/justify.tsx new file mode 100644 index 0000000..b4136cb --- /dev/null +++ b/components/icons/src/icons/justify.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Justify: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/kpi.tsx b/components/icons/src/icons/kpi.tsx new file mode 100644 index 0000000..cc426be --- /dev/null +++ b/components/icons/src/icons/kpi.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Kpi: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/last-page.tsx b/components/icons/src/icons/last-page.tsx new file mode 100644 index 0000000..d2afe4b --- /dev/null +++ b/components/icons/src/icons/last-page.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const LastPage: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/launcher.tsx b/components/icons/src/icons/launcher.tsx new file mode 100644 index 0000000..e7ad1cc --- /dev/null +++ b/components/icons/src/icons/launcher.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Launcher: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/layers.tsx b/components/icons/src/icons/layers.tsx new file mode 100644 index 0000000..601f518 --- /dev/null +++ b/components/icons/src/icons/layers.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Layers: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/length.tsx b/components/icons/src/icons/length.tsx new file mode 100644 index 0000000..bf394af --- /dev/null +++ b/components/icons/src/icons/length.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Length: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/less-than.tsx b/components/icons/src/icons/less-than.tsx new file mode 100644 index 0000000..5001906 --- /dev/null +++ b/components/icons/src/icons/less-than.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const LessThan: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/level-1.tsx b/components/icons/src/icons/level-1.tsx new file mode 100644 index 0000000..9127676 --- /dev/null +++ b/components/icons/src/icons/level-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Level1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/level-2.tsx b/components/icons/src/icons/level-2.tsx new file mode 100644 index 0000000..9035d0c --- /dev/null +++ b/components/icons/src/icons/level-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Level2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/level-3.tsx b/components/icons/src/icons/level-3.tsx new file mode 100644 index 0000000..7f6ce71 --- /dev/null +++ b/components/icons/src/icons/level-3.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Level3: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/level-4.tsx b/components/icons/src/icons/level-4.tsx new file mode 100644 index 0000000..63efcc3 --- /dev/null +++ b/components/icons/src/icons/level-4.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Level4: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/level-5.tsx b/components/icons/src/icons/level-5.tsx new file mode 100644 index 0000000..2b3af32 --- /dev/null +++ b/components/icons/src/icons/level-5.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Level5: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/line-normal.tsx b/components/icons/src/icons/line-normal.tsx new file mode 100644 index 0000000..aaf643d --- /dev/null +++ b/components/icons/src/icons/line-normal.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const LineNormal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/line-small.tsx b/components/icons/src/icons/line-small.tsx new file mode 100644 index 0000000..f9d80aa --- /dev/null +++ b/components/icons/src/icons/line-small.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const LineSmall: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/line-spacing.tsx b/components/icons/src/icons/line-spacing.tsx new file mode 100644 index 0000000..45ec577 --- /dev/null +++ b/components/icons/src/icons/line-spacing.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const LineSpacing: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/line-very-small.tsx b/components/icons/src/icons/line-very-small.tsx new file mode 100644 index 0000000..156e12b --- /dev/null +++ b/components/icons/src/icons/line-very-small.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const LineVerySmall: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/line.tsx b/components/icons/src/icons/line.tsx new file mode 100644 index 0000000..2d75c20 --- /dev/null +++ b/components/icons/src/icons/line.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Line: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/link-remove.tsx b/components/icons/src/icons/link-remove.tsx new file mode 100644 index 0000000..379e119 --- /dev/null +++ b/components/icons/src/icons/link-remove.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const LinkRemove: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/link.tsx b/components/icons/src/icons/link.tsx new file mode 100644 index 0000000..126b9b9 --- /dev/null +++ b/components/icons/src/icons/link.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Link: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/linked-style.tsx b/components/icons/src/icons/linked-style.tsx new file mode 100644 index 0000000..8be9102 --- /dev/null +++ b/components/icons/src/icons/linked-style.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const LinkedStyle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/list-ordered-rtl.tsx b/components/icons/src/icons/list-ordered-rtl.tsx new file mode 100644 index 0000000..f3f1022 --- /dev/null +++ b/components/icons/src/icons/list-ordered-rtl.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ListOrderedRtl: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/list-ordered.tsx b/components/icons/src/icons/list-ordered.tsx new file mode 100644 index 0000000..a4cdb26 --- /dev/null +++ b/components/icons/src/icons/list-ordered.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ListOrdered: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/list-unordered-rtl.tsx b/components/icons/src/icons/list-unordered-rtl.tsx new file mode 100644 index 0000000..82076a3 --- /dev/null +++ b/components/icons/src/icons/list-unordered-rtl.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ListUnorderedRtl: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/list-unordered.tsx b/components/icons/src/icons/list-unordered.tsx new file mode 100644 index 0000000..ac4c68d --- /dev/null +++ b/components/icons/src/icons/list-unordered.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ListUnordered: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/location.tsx b/components/icons/src/icons/location.tsx new file mode 100644 index 0000000..bbeac22 --- /dev/null +++ b/components/icons/src/icons/location.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Location: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/lock.tsx b/components/icons/src/icons/lock.tsx new file mode 100644 index 0000000..cd55884 --- /dev/null +++ b/components/icons/src/icons/lock.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Lock: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/lower-case.tsx b/components/icons/src/icons/lower-case.tsx new file mode 100644 index 0000000..551eee9 --- /dev/null +++ b/components/icons/src/icons/lower-case.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const LowerCase: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/mdx.tsx b/components/icons/src/icons/mdx.tsx new file mode 100644 index 0000000..8e336fa --- /dev/null +++ b/components/icons/src/icons/mdx.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Mdx: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/menu.tsx b/components/icons/src/icons/menu.tsx new file mode 100644 index 0000000..1269453 --- /dev/null +++ b/components/icons/src/icons/menu.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Menu: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/merge-cells.tsx b/components/icons/src/icons/merge-cells.tsx new file mode 100644 index 0000000..bd49507 --- /dev/null +++ b/components/icons/src/icons/merge-cells.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MergeCells: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/microphone.tsx b/components/icons/src/icons/microphone.tsx new file mode 100644 index 0000000..6dde141 --- /dev/null +++ b/components/icons/src/icons/microphone.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Microphone: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/month-agenda.tsx b/components/icons/src/icons/month-agenda.tsx new file mode 100644 index 0000000..75fb390 --- /dev/null +++ b/components/icons/src/icons/month-agenda.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MonthAgenda: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/month.tsx b/components/icons/src/icons/month.tsx new file mode 100644 index 0000000..43cf9a8 --- /dev/null +++ b/components/icons/src/icons/month.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Month: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/more-chevron.tsx b/components/icons/src/icons/more-chevron.tsx new file mode 100644 index 0000000..2849baa --- /dev/null +++ b/components/icons/src/icons/more-chevron.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MoreChevron: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/more-horizontal-1.tsx b/components/icons/src/icons/more-horizontal-1.tsx new file mode 100644 index 0000000..17e3fde --- /dev/null +++ b/components/icons/src/icons/more-horizontal-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MoreHorizontal1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/more-scatter-charts.tsx b/components/icons/src/icons/more-scatter-charts.tsx new file mode 100644 index 0000000..59e190c --- /dev/null +++ b/components/icons/src/icons/more-scatter-charts.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MoreScatterCharts: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/more-vertical-1.tsx b/components/icons/src/icons/more-vertical-1.tsx new file mode 100644 index 0000000..459f028 --- /dev/null +++ b/components/icons/src/icons/more-vertical-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MoreVertical1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/more-vertical-2.tsx b/components/icons/src/icons/more-vertical-2.tsx new file mode 100644 index 0000000..5afdfed --- /dev/null +++ b/components/icons/src/icons/more-vertical-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MoreVertical2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/mouse-pointer.tsx b/components/icons/src/icons/mouse-pointer.tsx new file mode 100644 index 0000000..5f3cefc --- /dev/null +++ b/components/icons/src/icons/mouse-pointer.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MousePointer: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/multiple-comment-resolve.tsx b/components/icons/src/icons/multiple-comment-resolve.tsx new file mode 100644 index 0000000..0305f38 --- /dev/null +++ b/components/icons/src/icons/multiple-comment-resolve.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MultipleCommentResolve: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/multiple-comment.tsx b/components/icons/src/icons/multiple-comment.tsx new file mode 100644 index 0000000..9d0fb54 --- /dev/null +++ b/components/icons/src/icons/multiple-comment.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const MultipleComment: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/named-set.tsx b/components/icons/src/icons/named-set.tsx new file mode 100644 index 0000000..0f09e93 --- /dev/null +++ b/components/icons/src/icons/named-set.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const NamedSet: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/nature.tsx b/components/icons/src/icons/nature.tsx new file mode 100644 index 0000000..87c1680 --- /dev/null +++ b/components/icons/src/icons/nature.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Nature: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/none.tsx b/components/icons/src/icons/none.tsx new file mode 100644 index 0000000..3a1814b --- /dev/null +++ b/components/icons/src/icons/none.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = <>; +export const None: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/notes.tsx b/components/icons/src/icons/notes.tsx new file mode 100644 index 0000000..e8e826c --- /dev/null +++ b/components/icons/src/icons/notes.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Notes: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/number-formatting.tsx b/components/icons/src/icons/number-formatting.tsx new file mode 100644 index 0000000..b01b6cc --- /dev/null +++ b/components/icons/src/icons/number-formatting.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const NumberFormatting: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/objects.tsx b/components/icons/src/icons/objects.tsx new file mode 100644 index 0000000..8e7ab3f --- /dev/null +++ b/components/icons/src/icons/objects.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = <>; +export const Objects: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/odd-page-break.tsx b/components/icons/src/icons/odd-page-break.tsx new file mode 100644 index 0000000..3f851f6 --- /dev/null +++ b/components/icons/src/icons/odd-page-break.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const OddPageBreak: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/opacity.tsx b/components/icons/src/icons/opacity.tsx new file mode 100644 index 0000000..41a62f8 --- /dev/null +++ b/components/icons/src/icons/opacity.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Opacity: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/open-link.tsx b/components/icons/src/icons/open-link.tsx new file mode 100644 index 0000000..d8afc65 --- /dev/null +++ b/components/icons/src/icons/open-link.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const OpenLink: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/order.tsx b/components/icons/src/icons/order.tsx new file mode 100644 index 0000000..328e028 --- /dev/null +++ b/components/icons/src/icons/order.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Order: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/organize-pdf.tsx b/components/icons/src/icons/organize-pdf.tsx new file mode 100644 index 0000000..774f879 --- /dev/null +++ b/components/icons/src/icons/organize-pdf.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const OrganizePdf: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-column-left.tsx b/components/icons/src/icons/page-column-left.tsx new file mode 100644 index 0000000..e729f8b --- /dev/null +++ b/components/icons/src/icons/page-column-left.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageColumnLeft: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-column-one.tsx b/components/icons/src/icons/page-column-one.tsx new file mode 100644 index 0000000..f8b9606 --- /dev/null +++ b/components/icons/src/icons/page-column-one.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageColumnOne: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-column-right.tsx b/components/icons/src/icons/page-column-right.tsx new file mode 100644 index 0000000..f3098c1 --- /dev/null +++ b/components/icons/src/icons/page-column-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageColumnRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-column-three.tsx b/components/icons/src/icons/page-column-three.tsx new file mode 100644 index 0000000..d2c9ac1 --- /dev/null +++ b/components/icons/src/icons/page-column-three.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageColumnThree: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-column-two.tsx b/components/icons/src/icons/page-column-two.tsx new file mode 100644 index 0000000..29e0489 --- /dev/null +++ b/components/icons/src/icons/page-column-two.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageColumnTwo: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-column.tsx b/components/icons/src/icons/page-column.tsx new file mode 100644 index 0000000..0a8cd4e --- /dev/null +++ b/components/icons/src/icons/page-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-columns.tsx b/components/icons/src/icons/page-columns.tsx new file mode 100644 index 0000000..21685e3 --- /dev/null +++ b/components/icons/src/icons/page-columns.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageColumns: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-numbering.tsx b/components/icons/src/icons/page-numbering.tsx new file mode 100644 index 0000000..6aef7dc --- /dev/null +++ b/components/icons/src/icons/page-numbering.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageNumbering: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-setup.tsx b/components/icons/src/icons/page-setup.tsx new file mode 100644 index 0000000..599976b --- /dev/null +++ b/components/icons/src/icons/page-setup.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageSetup: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-size.tsx b/components/icons/src/icons/page-size.tsx new file mode 100644 index 0000000..fe07c95 --- /dev/null +++ b/components/icons/src/icons/page-size.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageSize: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/page-text-wrap.tsx b/components/icons/src/icons/page-text-wrap.tsx new file mode 100644 index 0000000..25ae65f --- /dev/null +++ b/components/icons/src/icons/page-text-wrap.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PageTextWrap: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/paint-bucket.tsx b/components/icons/src/icons/paint-bucket.tsx new file mode 100644 index 0000000..62763fb --- /dev/null +++ b/components/icons/src/icons/paint-bucket.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PaintBucket: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/pan.tsx b/components/icons/src/icons/pan.tsx new file mode 100644 index 0000000..05a4d4f --- /dev/null +++ b/components/icons/src/icons/pan.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Pan: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/paragraph.tsx b/components/icons/src/icons/paragraph.tsx new file mode 100644 index 0000000..1c775ce --- /dev/null +++ b/components/icons/src/icons/paragraph.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Paragraph: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/password.tsx b/components/icons/src/icons/password.tsx new file mode 100644 index 0000000..32be966 --- /dev/null +++ b/components/icons/src/icons/password.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Password: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/paste-match-destination.tsx b/components/icons/src/icons/paste-match-destination.tsx new file mode 100644 index 0000000..f1347e6 --- /dev/null +++ b/components/icons/src/icons/paste-match-destination.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PasteMatchDestination: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/paste-style.tsx b/components/icons/src/icons/paste-style.tsx new file mode 100644 index 0000000..73b7130 --- /dev/null +++ b/components/icons/src/icons/paste-style.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PasteStyle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/paste-text-only.tsx b/components/icons/src/icons/paste-text-only.tsx new file mode 100644 index 0000000..898bd5b --- /dev/null +++ b/components/icons/src/icons/paste-text-only.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PasteTextOnly: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/paste.tsx b/components/icons/src/icons/paste.tsx new file mode 100644 index 0000000..67d01d0 --- /dev/null +++ b/components/icons/src/icons/paste.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Paste: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/pause.tsx b/components/icons/src/icons/pause.tsx new file mode 100644 index 0000000..173f4d7 --- /dev/null +++ b/components/icons/src/icons/pause.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Pause: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/pentagon.tsx b/components/icons/src/icons/pentagon.tsx new file mode 100644 index 0000000..226ae10 --- /dev/null +++ b/components/icons/src/icons/pentagon.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Pentagon: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/people.tsx b/components/icons/src/icons/people.tsx new file mode 100644 index 0000000..c193971 --- /dev/null +++ b/components/icons/src/icons/people.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const People: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/perimeter.tsx b/components/icons/src/icons/perimeter.tsx new file mode 100644 index 0000000..1accc0f --- /dev/null +++ b/components/icons/src/icons/perimeter.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Perimeter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/play.tsx b/components/icons/src/icons/play.tsx new file mode 100644 index 0000000..97d77dd --- /dev/null +++ b/components/icons/src/icons/play.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Play: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/plus.tsx b/components/icons/src/icons/plus.tsx new file mode 100644 index 0000000..fd59c0a --- /dev/null +++ b/components/icons/src/icons/plus.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Plus: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/preformat-code.tsx b/components/icons/src/icons/preformat-code.tsx new file mode 100644 index 0000000..f7c551c --- /dev/null +++ b/components/icons/src/icons/preformat-code.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PreformatCode: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/print-layout.tsx b/components/icons/src/icons/print-layout.tsx new file mode 100644 index 0000000..ff57b8b --- /dev/null +++ b/components/icons/src/icons/print-layout.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const PrintLayout: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/print.tsx b/components/icons/src/icons/print.tsx new file mode 100644 index 0000000..b444bd7 --- /dev/null +++ b/components/icons/src/icons/print.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Print: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/properties-1.tsx b/components/icons/src/icons/properties-1.tsx new file mode 100644 index 0000000..f56d112 --- /dev/null +++ b/components/icons/src/icons/properties-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Properties1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/properties-2.tsx b/components/icons/src/icons/properties-2.tsx new file mode 100644 index 0000000..6dd015a --- /dev/null +++ b/components/icons/src/icons/properties-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Properties2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/protect-sheet.tsx b/components/icons/src/icons/protect-sheet.tsx new file mode 100644 index 0000000..5a62566 --- /dev/null +++ b/components/icons/src/icons/protect-sheet.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ProtectSheet: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/protect-workbook.tsx b/components/icons/src/icons/protect-workbook.tsx new file mode 100644 index 0000000..30a5ea5 --- /dev/null +++ b/components/icons/src/icons/protect-workbook.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ProtectWorkbook: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/radio-button.tsx b/components/icons/src/icons/radio-button.tsx new file mode 100644 index 0000000..c78c351 --- /dev/null +++ b/components/icons/src/icons/radio-button.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const RadioButton: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/radius.tsx b/components/icons/src/icons/radius.tsx new file mode 100644 index 0000000..c475876 --- /dev/null +++ b/components/icons/src/icons/radius.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Radius: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/reapply.tsx b/components/icons/src/icons/reapply.tsx new file mode 100644 index 0000000..34d7a98 --- /dev/null +++ b/components/icons/src/icons/reapply.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Reapply: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/rectangle.tsx b/components/icons/src/icons/rectangle.tsx new file mode 100644 index 0000000..1fec4c5 --- /dev/null +++ b/components/icons/src/icons/rectangle.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Rectangle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/recurrence-edit.tsx b/components/icons/src/icons/recurrence-edit.tsx new file mode 100644 index 0000000..fddc1cb --- /dev/null +++ b/components/icons/src/icons/recurrence-edit.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const RecurrenceEdit: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/redact.tsx b/components/icons/src/icons/redact.tsx new file mode 100644 index 0000000..826c47a --- /dev/null +++ b/components/icons/src/icons/redact.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Redact: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/redaction.tsx b/components/icons/src/icons/redaction.tsx new file mode 100644 index 0000000..46f6465 --- /dev/null +++ b/components/icons/src/icons/redaction.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Redaction: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/redo.tsx b/components/icons/src/icons/redo.tsx new file mode 100644 index 0000000..9df4398 --- /dev/null +++ b/components/icons/src/icons/redo.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Redo: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/refresh.tsx b/components/icons/src/icons/refresh.tsx new file mode 100644 index 0000000..346e611 --- /dev/null +++ b/components/icons/src/icons/refresh.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Refresh: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/rename.tsx b/components/icons/src/icons/rename.tsx new file mode 100644 index 0000000..21148bf --- /dev/null +++ b/components/icons/src/icons/rename.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Rename: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/repeat.tsx b/components/icons/src/icons/repeat.tsx new file mode 100644 index 0000000..a5843cf --- /dev/null +++ b/components/icons/src/icons/repeat.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Repeat: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/repeating-section.tsx b/components/icons/src/icons/repeating-section.tsx new file mode 100644 index 0000000..17dd167 --- /dev/null +++ b/components/icons/src/icons/repeating-section.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const RepeatingSection: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/rephrase.tsx b/components/icons/src/icons/rephrase.tsx new file mode 100644 index 0000000..d59d996 --- /dev/null +++ b/components/icons/src/icons/rephrase.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Rephrase: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/replace.tsx b/components/icons/src/icons/replace.tsx new file mode 100644 index 0000000..16b0893 --- /dev/null +++ b/components/icons/src/icons/replace.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Replace: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/reset.tsx b/components/icons/src/icons/reset.tsx new file mode 100644 index 0000000..26b8035 --- /dev/null +++ b/components/icons/src/icons/reset.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Reset: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/resize.tsx b/components/icons/src/icons/resize.tsx new file mode 100644 index 0000000..16b9c9b --- /dev/null +++ b/components/icons/src/icons/resize.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Resize: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/resizer-horizontal.tsx b/components/icons/src/icons/resizer-horizontal.tsx new file mode 100644 index 0000000..5dbbee7 --- /dev/null +++ b/components/icons/src/icons/resizer-horizontal.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ResizerHorizontal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/resizer-right.tsx b/components/icons/src/icons/resizer-right.tsx new file mode 100644 index 0000000..a8fdfb7 --- /dev/null +++ b/components/icons/src/icons/resizer-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ResizerRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/resizer-vertical.tsx b/components/icons/src/icons/resizer-vertical.tsx new file mode 100644 index 0000000..bddb777 --- /dev/null +++ b/components/icons/src/icons/resizer-vertical.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ResizerVertical: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/resizer.tsx b/components/icons/src/icons/resizer.tsx new file mode 100644 index 0000000..bf7ed93 --- /dev/null +++ b/components/icons/src/icons/resizer.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Resizer: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/restart-at-1.tsx b/components/icons/src/icons/restart-at-1.tsx new file mode 100644 index 0000000..c9c6533 --- /dev/null +++ b/components/icons/src/icons/restart-at-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const RestartAt1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/saturation.tsx b/components/icons/src/icons/saturation.tsx new file mode 100644 index 0000000..f146dee --- /dev/null +++ b/components/icons/src/icons/saturation.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Saturation: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/save-as.tsx b/components/icons/src/icons/save-as.tsx new file mode 100644 index 0000000..1a41ad7 --- /dev/null +++ b/components/icons/src/icons/save-as.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SaveAs: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/save.tsx b/components/icons/src/icons/save.tsx new file mode 100644 index 0000000..f277d94 --- /dev/null +++ b/components/icons/src/icons/save.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Save: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/search.tsx b/components/icons/src/icons/search.tsx new file mode 100644 index 0000000..f5a8d23 --- /dev/null +++ b/components/icons/src/icons/search.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Search: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/select-all.tsx b/components/icons/src/icons/select-all.tsx new file mode 100644 index 0000000..d87b9aa --- /dev/null +++ b/components/icons/src/icons/select-all.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SelectAll: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/selection.tsx b/components/icons/src/icons/selection.tsx new file mode 100644 index 0000000..607954b --- /dev/null +++ b/components/icons/src/icons/selection.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Selection: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/send-backward.tsx b/components/icons/src/icons/send-backward.tsx new file mode 100644 index 0000000..d7ed707 --- /dev/null +++ b/components/icons/src/icons/send-backward.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SendBackward: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/send-to-back.tsx b/components/icons/src/icons/send-to-back.tsx new file mode 100644 index 0000000..528a471 --- /dev/null +++ b/components/icons/src/icons/send-to-back.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SendToBack: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/send.tsx b/components/icons/src/icons/send.tsx new file mode 100644 index 0000000..4a8c013 --- /dev/null +++ b/components/icons/src/icons/send.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Send: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/settings.tsx b/components/icons/src/icons/settings.tsx new file mode 100644 index 0000000..bfaa379 --- /dev/null +++ b/components/icons/src/icons/settings.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Settings: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/shapes.tsx b/components/icons/src/icons/shapes.tsx new file mode 100644 index 0000000..1d392fa --- /dev/null +++ b/components/icons/src/icons/shapes.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Shapes: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sharpness.tsx b/components/icons/src/icons/sharpness.tsx new file mode 100644 index 0000000..929ca7e --- /dev/null +++ b/components/icons/src/icons/sharpness.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Sharpness: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/shorten.tsx b/components/icons/src/icons/shorten.tsx new file mode 100644 index 0000000..f30a3a7 --- /dev/null +++ b/components/icons/src/icons/shorten.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Shorten: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/show-hide-panel.tsx b/components/icons/src/icons/show-hide-panel.tsx new file mode 100644 index 0000000..e824091 --- /dev/null +++ b/components/icons/src/icons/show-hide-panel.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ShowHidePanel: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/signature.tsx b/components/icons/src/icons/signature.tsx new file mode 100644 index 0000000..32f4d8b --- /dev/null +++ b/components/icons/src/icons/signature.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Signature: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/smart-paste.tsx b/components/icons/src/icons/smart-paste.tsx new file mode 100644 index 0000000..5be4077 --- /dev/null +++ b/components/icons/src/icons/smart-paste.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SmartPaste: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sort-ascending-2.tsx b/components/icons/src/icons/sort-ascending-2.tsx new file mode 100644 index 0000000..c8c4845 --- /dev/null +++ b/components/icons/src/icons/sort-ascending-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SortAscending2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sort-ascending.tsx b/components/icons/src/icons/sort-ascending.tsx new file mode 100644 index 0000000..ddc5c58 --- /dev/null +++ b/components/icons/src/icons/sort-ascending.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SortAscending: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sort-descending-2.tsx b/components/icons/src/icons/sort-descending-2.tsx new file mode 100644 index 0000000..15c323c --- /dev/null +++ b/components/icons/src/icons/sort-descending-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SortDescending2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sort-descending.tsx b/components/icons/src/icons/sort-descending.tsx new file mode 100644 index 0000000..e35430c --- /dev/null +++ b/components/icons/src/icons/sort-descending.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SortDescending: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sorting-1.tsx b/components/icons/src/icons/sorting-1.tsx new file mode 100644 index 0000000..9964d78 --- /dev/null +++ b/components/icons/src/icons/sorting-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Sorting1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sorting-2.tsx b/components/icons/src/icons/sorting-2.tsx new file mode 100644 index 0000000..c7e8c01 --- /dev/null +++ b/components/icons/src/icons/sorting-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Sorting2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sorting-3.tsx b/components/icons/src/icons/sorting-3.tsx new file mode 100644 index 0000000..0e079b9 --- /dev/null +++ b/components/icons/src/icons/sorting-3.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Sorting3: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/spacing-after.tsx b/components/icons/src/icons/spacing-after.tsx new file mode 100644 index 0000000..172ec9e --- /dev/null +++ b/components/icons/src/icons/spacing-after.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SpacingAfter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/spacing-before.tsx b/components/icons/src/icons/spacing-before.tsx new file mode 100644 index 0000000..a852a63 --- /dev/null +++ b/components/icons/src/icons/spacing-before.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SpacingBefore: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/spell-check.tsx b/components/icons/src/icons/spell-check.tsx new file mode 100644 index 0000000..d1e13ce --- /dev/null +++ b/components/icons/src/icons/spell-check.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SpellCheck: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/split-horizontal.tsx b/components/icons/src/icons/split-horizontal.tsx new file mode 100644 index 0000000..e700ed1 --- /dev/null +++ b/components/icons/src/icons/split-horizontal.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SplitHorizontal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/split-vertical.tsx b/components/icons/src/icons/split-vertical.tsx new file mode 100644 index 0000000..e6ffe29 --- /dev/null +++ b/components/icons/src/icons/split-vertical.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SplitVertical: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/square-head-fill.tsx b/components/icons/src/icons/square-head-fill.tsx new file mode 100644 index 0000000..e4a5953 --- /dev/null +++ b/components/icons/src/icons/square-head-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SquareHeadFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/square-head.tsx b/components/icons/src/icons/square-head.tsx new file mode 100644 index 0000000..2b97a67 --- /dev/null +++ b/components/icons/src/icons/square-head.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SquareHead: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/square-tail-fill.tsx b/components/icons/src/icons/square-tail-fill.tsx new file mode 100644 index 0000000..80310da --- /dev/null +++ b/components/icons/src/icons/square-tail-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SquareTailFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/square-tail.tsx b/components/icons/src/icons/square-tail.tsx new file mode 100644 index 0000000..dc91f6f --- /dev/null +++ b/components/icons/src/icons/square-tail.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SquareTail: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/squiggly.tsx b/components/icons/src/icons/squiggly.tsx new file mode 100644 index 0000000..97fecae --- /dev/null +++ b/components/icons/src/icons/squiggly.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Squiggly: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/stamp.tsx b/components/icons/src/icons/stamp.tsx new file mode 100644 index 0000000..ec9dfe5 --- /dev/null +++ b/components/icons/src/icons/stamp.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Stamp: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/star-filled.tsx b/components/icons/src/icons/star-filled.tsx new file mode 100644 index 0000000..715946f --- /dev/null +++ b/components/icons/src/icons/star-filled.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const StarFilled: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/stop-rectangle.tsx b/components/icons/src/icons/stop-rectangle.tsx new file mode 100644 index 0000000..bca2471 --- /dev/null +++ b/components/icons/src/icons/stop-rectangle.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const StopRectangle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/strikethrough.tsx b/components/icons/src/icons/strikethrough.tsx new file mode 100644 index 0000000..ab25527 --- /dev/null +++ b/components/icons/src/icons/strikethrough.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Strikethrough: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/stroke-width.tsx b/components/icons/src/icons/stroke-width.tsx new file mode 100644 index 0000000..71b6ef3 --- /dev/null +++ b/components/icons/src/icons/stroke-width.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const StrokeWidth: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/style.tsx b/components/icons/src/icons/style.tsx new file mode 100644 index 0000000..673c5a7 --- /dev/null +++ b/components/icons/src/icons/style.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Style: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sub-total.tsx b/components/icons/src/icons/sub-total.tsx new file mode 100644 index 0000000..7e3947c --- /dev/null +++ b/components/icons/src/icons/sub-total.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const SubTotal: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/subscript.tsx b/components/icons/src/icons/subscript.tsx new file mode 100644 index 0000000..bb28c0e --- /dev/null +++ b/components/icons/src/icons/subscript.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Subscript: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/sum.tsx b/components/icons/src/icons/sum.tsx new file mode 100644 index 0000000..42ba12b --- /dev/null +++ b/components/icons/src/icons/sum.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Sum: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/superscript.tsx b/components/icons/src/icons/superscript.tsx new file mode 100644 index 0000000..213ec96 --- /dev/null +++ b/components/icons/src/icons/superscript.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Superscript: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/symbols.tsx b/components/icons/src/icons/symbols.tsx new file mode 100644 index 0000000..24a466c --- /dev/null +++ b/components/icons/src/icons/symbols.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Symbols: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-2.tsx b/components/icons/src/icons/table-2.tsx new file mode 100644 index 0000000..d51b8fa --- /dev/null +++ b/components/icons/src/icons/table-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Table2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-align-center.tsx b/components/icons/src/icons/table-align-center.tsx new file mode 100644 index 0000000..e652887 --- /dev/null +++ b/components/icons/src/icons/table-align-center.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableAlignCenter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-align-left.tsx b/components/icons/src/icons/table-align-left.tsx new file mode 100644 index 0000000..35485c3 --- /dev/null +++ b/components/icons/src/icons/table-align-left.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableAlignLeft: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-align-right.tsx b/components/icons/src/icons/table-align-right.tsx new file mode 100644 index 0000000..f170e52 --- /dev/null +++ b/components/icons/src/icons/table-align-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableAlignRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-border-custom.tsx b/components/icons/src/icons/table-border-custom.tsx new file mode 100644 index 0000000..8b9568e --- /dev/null +++ b/components/icons/src/icons/table-border-custom.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableBorderCustom: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-cell-none.tsx b/components/icons/src/icons/table-cell-none.tsx new file mode 100644 index 0000000..66ee61d --- /dev/null +++ b/components/icons/src/icons/table-cell-none.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableCellNone: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-cell.tsx b/components/icons/src/icons/table-cell.tsx new file mode 100644 index 0000000..90a1d3c --- /dev/null +++ b/components/icons/src/icons/table-cell.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableCell: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-delete.tsx b/components/icons/src/icons/table-delete.tsx new file mode 100644 index 0000000..ca23ad3 --- /dev/null +++ b/components/icons/src/icons/table-delete.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableDelete: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-header.tsx b/components/icons/src/icons/table-header.tsx new file mode 100644 index 0000000..b438c4b --- /dev/null +++ b/components/icons/src/icons/table-header.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableHeader: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-insert-column.tsx b/components/icons/src/icons/table-insert-column.tsx new file mode 100644 index 0000000..399c623 --- /dev/null +++ b/components/icons/src/icons/table-insert-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableInsertColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-insert-row.tsx b/components/icons/src/icons/table-insert-row.tsx new file mode 100644 index 0000000..24a5a6e --- /dev/null +++ b/components/icons/src/icons/table-insert-row.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableInsertRow: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-merge.tsx b/components/icons/src/icons/table-merge.tsx new file mode 100644 index 0000000..9b29851 --- /dev/null +++ b/components/icons/src/icons/table-merge.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableMerge: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-nested.tsx b/components/icons/src/icons/table-nested.tsx new file mode 100644 index 0000000..5ebb55d --- /dev/null +++ b/components/icons/src/icons/table-nested.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableNested: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-of-content.tsx b/components/icons/src/icons/table-of-content.tsx new file mode 100644 index 0000000..42d9121 --- /dev/null +++ b/components/icons/src/icons/table-of-content.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableOfContent: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-overwrite-cells.tsx b/components/icons/src/icons/table-overwrite-cells.tsx new file mode 100644 index 0000000..e901714 --- /dev/null +++ b/components/icons/src/icons/table-overwrite-cells.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableOverwriteCells: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table-update.tsx b/components/icons/src/icons/table-update.tsx new file mode 100644 index 0000000..5728bf3 --- /dev/null +++ b/components/icons/src/icons/table-update.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TableUpdate: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/table.tsx b/components/icons/src/icons/table.tsx new file mode 100644 index 0000000..686e80f --- /dev/null +++ b/components/icons/src/icons/table.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Table: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/text-alternative.tsx b/components/icons/src/icons/text-alternative.tsx new file mode 100644 index 0000000..03f0d25 --- /dev/null +++ b/components/icons/src/icons/text-alternative.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TextAlternative: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/text-annotation.tsx b/components/icons/src/icons/text-annotation.tsx new file mode 100644 index 0000000..b921003 --- /dev/null +++ b/components/icons/src/icons/text-annotation.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TextAnnotation: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/text-form.tsx b/components/icons/src/icons/text-form.tsx new file mode 100644 index 0000000..422f092 --- /dev/null +++ b/components/icons/src/icons/text-form.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TextForm: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/text-header.tsx b/components/icons/src/icons/text-header.tsx new file mode 100644 index 0000000..caf61c3 --- /dev/null +++ b/components/icons/src/icons/text-header.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TextHeader: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/text-outline.tsx b/components/icons/src/icons/text-outline.tsx new file mode 100644 index 0000000..3d7bfa4 --- /dev/null +++ b/components/icons/src/icons/text-outline.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TextOutline: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/text-that-contains.tsx b/components/icons/src/icons/text-that-contains.tsx new file mode 100644 index 0000000..fb8fc94 --- /dev/null +++ b/components/icons/src/icons/text-that-contains.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TextThatContains: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/text-wrap.tsx b/components/icons/src/icons/text-wrap.tsx new file mode 100644 index 0000000..4d91363 --- /dev/null +++ b/components/icons/src/icons/text-wrap.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TextWrap: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/thumbnail.tsx b/components/icons/src/icons/thumbnail.tsx new file mode 100644 index 0000000..dc61854 --- /dev/null +++ b/components/icons/src/icons/thumbnail.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Thumbnail: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/thumbs-down-fill.tsx b/components/icons/src/icons/thumbs-down-fill.tsx new file mode 100644 index 0000000..75554a7 --- /dev/null +++ b/components/icons/src/icons/thumbs-down-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = <>; +export const ThumbsDownFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/thumbs-down.tsx b/components/icons/src/icons/thumbs-down.tsx new file mode 100644 index 0000000..bc657f9 --- /dev/null +++ b/components/icons/src/icons/thumbs-down.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ThumbsDown: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/thumbs-up-fill.tsx b/components/icons/src/icons/thumbs-up-fill.tsx new file mode 100644 index 0000000..bf65907 --- /dev/null +++ b/components/icons/src/icons/thumbs-up-fill.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = <>; +export const ThumbsUpFill: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/thumbs-up.tsx b/components/icons/src/icons/thumbs-up.tsx new file mode 100644 index 0000000..1f92f55 --- /dev/null +++ b/components/icons/src/icons/thumbs-up.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ThumbsUp: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/time-zone.tsx b/components/icons/src/icons/time-zone.tsx new file mode 100644 index 0000000..9d98deb --- /dev/null +++ b/components/icons/src/icons/time-zone.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TimeZone: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/timeline-day.tsx b/components/icons/src/icons/timeline-day.tsx new file mode 100644 index 0000000..0758fff --- /dev/null +++ b/components/icons/src/icons/timeline-day.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TimelineDay: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/timeline-month.tsx b/components/icons/src/icons/timeline-month.tsx new file mode 100644 index 0000000..175ad8e --- /dev/null +++ b/components/icons/src/icons/timeline-month.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TimelineMonth: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/timeline-today.tsx b/components/icons/src/icons/timeline-today.tsx new file mode 100644 index 0000000..9cc60c4 --- /dev/null +++ b/components/icons/src/icons/timeline-today.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TimelineToday: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/timeline-week.tsx b/components/icons/src/icons/timeline-week.tsx new file mode 100644 index 0000000..31a7053 --- /dev/null +++ b/components/icons/src/icons/timeline-week.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TimelineWeek: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/timeline-work-week.tsx b/components/icons/src/icons/timeline-work-week.tsx new file mode 100644 index 0000000..fee434d --- /dev/null +++ b/components/icons/src/icons/timeline-work-week.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TimelineWorkWeek: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/tint.tsx b/components/icons/src/icons/tint.tsx new file mode 100644 index 0000000..dffef6b --- /dev/null +++ b/components/icons/src/icons/tint.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Tint: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/top-10.tsx b/components/icons/src/icons/top-10.tsx new file mode 100644 index 0000000..227d3ce --- /dev/null +++ b/components/icons/src/icons/top-10.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Top10: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/top-bottom-rules.tsx b/components/icons/src/icons/top-bottom-rules.tsx new file mode 100644 index 0000000..35c4d78 --- /dev/null +++ b/components/icons/src/icons/top-bottom-rules.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TopBottomRules: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/transform-left.tsx b/components/icons/src/icons/transform-left.tsx new file mode 100644 index 0000000..bd5e3aa --- /dev/null +++ b/components/icons/src/icons/transform-left.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TransformLeft: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/transform-right.tsx b/components/icons/src/icons/transform-right.tsx new file mode 100644 index 0000000..b62944c --- /dev/null +++ b/components/icons/src/icons/transform-right.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TransformRight: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/transform.tsx b/components/icons/src/icons/transform.tsx new file mode 100644 index 0000000..7cb6103 --- /dev/null +++ b/components/icons/src/icons/transform.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Transform: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/translate.tsx b/components/icons/src/icons/translate.tsx new file mode 100644 index 0000000..f245fe8 --- /dev/null +++ b/components/icons/src/icons/translate.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Translate: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/trash.tsx b/components/icons/src/icons/trash.tsx new file mode 100644 index 0000000..b746fff --- /dev/null +++ b/components/icons/src/icons/trash.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Trash: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/travel-and-places.tsx b/components/icons/src/icons/travel-and-places.tsx new file mode 100644 index 0000000..33bdd83 --- /dev/null +++ b/components/icons/src/icons/travel-and-places.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TravelAndPlaces: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/triangle.tsx b/components/icons/src/icons/triangle.tsx new file mode 100644 index 0000000..059cd53 --- /dev/null +++ b/components/icons/src/icons/triangle.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Triangle: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/two-column.tsx b/components/icons/src/icons/two-column.tsx new file mode 100644 index 0000000..14ef300 --- /dev/null +++ b/components/icons/src/icons/two-column.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TwoColumn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/two-row.tsx b/components/icons/src/icons/two-row.tsx new file mode 100644 index 0000000..0dfdea9 --- /dev/null +++ b/components/icons/src/icons/two-row.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const TwoRow: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/underline.tsx b/components/icons/src/icons/underline.tsx new file mode 100644 index 0000000..67b5945 --- /dev/null +++ b/components/icons/src/icons/underline.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Underline: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/undo.tsx b/components/icons/src/icons/undo.tsx new file mode 100644 index 0000000..60fb788 --- /dev/null +++ b/components/icons/src/icons/undo.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Undo: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/unfiltered.tsx b/components/icons/src/icons/unfiltered.tsx new file mode 100644 index 0000000..003f14f --- /dev/null +++ b/components/icons/src/icons/unfiltered.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Unfiltered: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/ungroup-1.tsx b/components/icons/src/icons/ungroup-1.tsx new file mode 100644 index 0000000..84b2a93 --- /dev/null +++ b/components/icons/src/icons/ungroup-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Ungroup1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/ungroup-2.tsx b/components/icons/src/icons/ungroup-2.tsx new file mode 100644 index 0000000..7765a96 --- /dev/null +++ b/components/icons/src/icons/ungroup-2.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Ungroup2: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/unlock.tsx b/components/icons/src/icons/unlock.tsx new file mode 100644 index 0000000..a70ea34 --- /dev/null +++ b/components/icons/src/icons/unlock.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Unlock: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/upload-1.tsx b/components/icons/src/icons/upload-1.tsx new file mode 100644 index 0000000..960e26b --- /dev/null +++ b/components/icons/src/icons/upload-1.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Upload1: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/upper-case.tsx b/components/icons/src/icons/upper-case.tsx new file mode 100644 index 0000000..db9d443 --- /dev/null +++ b/components/icons/src/icons/upper-case.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const UpperCase: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/user-defined.tsx b/components/icons/src/icons/user-defined.tsx new file mode 100644 index 0000000..aac5dfa --- /dev/null +++ b/components/icons/src/icons/user-defined.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const UserDefined: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/user.tsx b/components/icons/src/icons/user.tsx new file mode 100644 index 0000000..117b11b --- /dev/null +++ b/components/icons/src/icons/user.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const User: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/vertical-align-bottom.tsx b/components/icons/src/icons/vertical-align-bottom.tsx new file mode 100644 index 0000000..d59343e --- /dev/null +++ b/components/icons/src/icons/vertical-align-bottom.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const VerticalAlignBottom: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/vertical-align-center.tsx b/components/icons/src/icons/vertical-align-center.tsx new file mode 100644 index 0000000..f30aa06 --- /dev/null +++ b/components/icons/src/icons/vertical-align-center.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const VerticalAlignCenter: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/vertical-align-top.tsx b/components/icons/src/icons/vertical-align-top.tsx new file mode 100644 index 0000000..e05343f --- /dev/null +++ b/components/icons/src/icons/vertical-align-top.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const VerticalAlignTop: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/video.tsx b/components/icons/src/icons/video.tsx new file mode 100644 index 0000000..9498293 --- /dev/null +++ b/components/icons/src/icons/video.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Video: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/view-side.tsx b/components/icons/src/icons/view-side.tsx new file mode 100644 index 0000000..ade789c --- /dev/null +++ b/components/icons/src/icons/view-side.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ViewSide: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/volume.tsx b/components/icons/src/icons/volume.tsx new file mode 100644 index 0000000..8ee0065 --- /dev/null +++ b/components/icons/src/icons/volume.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Volume: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/warning.tsx b/components/icons/src/icons/warning.tsx new file mode 100644 index 0000000..f5d3147 --- /dev/null +++ b/components/icons/src/icons/warning.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Warning: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/web-layout.tsx b/components/icons/src/icons/web-layout.tsx new file mode 100644 index 0000000..4b0ce31 --- /dev/null +++ b/components/icons/src/icons/web-layout.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const WebLayout: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/week.tsx b/components/icons/src/icons/week.tsx new file mode 100644 index 0000000..7d967c7 --- /dev/null +++ b/components/icons/src/icons/week.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const Week: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/xml-mapping.tsx b/components/icons/src/icons/xml-mapping.tsx new file mode 100644 index 0000000..debaa14 --- /dev/null +++ b/components/icons/src/icons/xml-mapping.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const XmlMapping: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/zoom-in.tsx b/components/icons/src/icons/zoom-in.tsx new file mode 100644 index 0000000..7a2950f --- /dev/null +++ b/components/icons/src/icons/zoom-in.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ZoomIn: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/zoom-out.tsx b/components/icons/src/icons/zoom-out.tsx new file mode 100644 index 0000000..a5c695e --- /dev/null +++ b/components/icons/src/icons/zoom-out.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ZoomOut: IconComponent = createIcon(path); diff --git a/components/icons/src/icons/zoom-to-fit.tsx b/components/icons/src/icons/zoom-to-fit.tsx new file mode 100644 index 0000000..9aaa30d --- /dev/null +++ b/components/icons/src/icons/zoom-to-fit.tsx @@ -0,0 +1,4 @@ +import { createIcon } from '../icon'; +import { IconComponent } from '../icon'; +const path: React.ReactNode = ; +export const ZoomToFit: IconComponent = createIcon(path); diff --git a/components/icons/src/index.ts b/components/icons/src/index.ts new file mode 100644 index 0000000..55434fb --- /dev/null +++ b/components/icons/src/index.ts @@ -0,0 +1,3 @@ +export * from './icons/index'; +export * from './icon'; +export * from './svg-icon'; diff --git a/components/icons/src/svg-icon.tsx b/components/icons/src/svg-icon.tsx new file mode 100644 index 0000000..c5700d6 --- /dev/null +++ b/components/icons/src/svg-icon.tsx @@ -0,0 +1,78 @@ +import * as React from 'react'; +import { HTMLAttributes, SVGProps } from 'react'; + +/** + * Common icon props interface + */ +export interface IIcons { + /** + * Specifies the width of the icon. + * + * @default 24px + */ + width?: number | string; + + /** + * Specifies the height of the icon. + * + * @default 24px + */ + height?: number | string; + + /** + * Defines the SVG viewBox attribute which controls the visible area of the icon. + * + * @default "0 0 24 24" + */ + viewBox?: string; + + /** + * Sets the color of the SVG icon, can be any valid CSS color value. + * + * @default - + */ + color?: string; + + /** + * Additional CSS class names to apply to the icon component. + * + * @private + */ + className?: string; +} + +type SvgProps = HTMLAttributes & SVGProps; + +/** + * The SVG component displays SVG icons with a given height, width, and viewBox. + * + * @private + * @param {SvgProps} props - The props of the component. + * @returns {void} Returns the SVG element. + */ +export const SvgIcon: React.FC = ((props: SvgProps) => { + const { + height = 24, + viewBox = '0 0 24 24', + width = 24, + children, + focusable = 'false', + 'aria-hidden': ariaHidden = true, + ...restProps + } = props; + + return ( + + {children} + + ); +}); + +export default SvgIcon; diff --git a/components/icons/tsconfig.json b/components/icons/tsconfig.json new file mode 100644 index 0000000..1da9467 --- /dev/null +++ b/components/icons/tsconfig.json @@ -0,0 +1,51 @@ +{ + "compilerOptions": { + "allowUnreachableCode": false, // Disable unreachable code warnings. + "allowUnusedLabels": false, // Disable unused label warnings. + "declaration": true, // Generate .d.ts files. + "forceConsistentCasingInFileNames": true, // Enforce consistent file name casing. + "jsx": "react-jsx", // Enable JSX syntax support. + "module": "ESNext", // Use ESNext module system. + "moduleResolution": "Node", // Resolve modules using Node-style resolution. + "noEmitOnError": true, // Prevent emitting JS files if there are errors. + "noFallthroughCasesInSwitch": true, // Prevent fallthrough in switch cases. + "noImplicitAny": false, // Disallow implicit any types. + "noImplicitReturns": true, // Ensure functions return a value. + "noUnusedLocals": true, // Warn on unused local variables. + "noUnusedParameters": true, // Warn on unused function parameters. + "strict": false, // Enable all strict checks. + "strictBindCallApply": false, // Enable strict checking of bind, call, and apply methods. + "strictFunctionTypes": false, // Enable strict checking of function types. + "strictNullChecks": false, // Enable strict null checks. + "skipLibCheck": true, // Skip checking of declaration files. + "sourceMap": true, // Generate source maps. + "target": "ES2020", // Set ECMAScript version to ES2020. + "typeRoots": [ + "./node_modules/@types", + "./node_modules/@testing-library" + ], // Specify root directory for type declarations. + "types": [ + "node", + "react", + "react-dom" + ], // Include type declarations. + "lib": [ + "ES2020", + "DOM", + "DOM.Iterable" + ] // Include libraries for ES2020 and DOM. + }, + "include": [ + "src", + "spec", + "samples" + ], // Include only the provided directory for compilation. + "exclude": [ + "node_modules", + "dist", + "public", + "coverage", + "test-report" + ], // Exclude these directories from compilation. + "compileOnSave": false // Disable Compile-on-Save. +} \ No newline at end of file diff --git a/components/inputs/package.json b/components/inputs/package.json index 0fbc3cd..7bcfbce 100644 --- a/components/inputs/package.json +++ b/components/inputs/package.json @@ -1,6 +1,6 @@ { "name": "@syncfusion/react-inputs", - "version": "29.2.4", + "version": "30.1.37", "description": "A package of Pure react input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", @@ -12,25 +12,6 @@ "react-inputs", "input box", "textbox", - "html5 textbox", - "floating input", - "floating label", - "form controls", - "input controls", - "color", - "color picker", - "colorpicker", - "picker", - "palette", - "hsv colorpicker", - "alpha colorpicker", - "color palette", - "custom palette", - "react colorpicker", - "color chooser", - "validator", - "form", - "form validator", "masked textbox", "masked input", "input mask", @@ -66,10 +47,10 @@ "module": "./index.js", "readme": "README.md", "dependencies": { - "@syncfusion/react-base": "~29.2.4", - "@syncfusion/react-buttons": "~29.2.4", - "@syncfusion/react-popups": "~29.2.4", - "@syncfusion/react-splitbuttons": "~29.2.4" + "@syncfusion/react-base": "~30.1.37", + "@syncfusion/react-buttons": "~30.1.37", + "@syncfusion/react-popups": "~30.1.37", + "@syncfusion/react-splitbuttons": "~30.1.37" }, "devDependencies": { "gulp": "4.0.2", diff --git a/components/inputs/styles/input/material3-dark.scss b/components/inputs/styles/input/material3-dark.scss index bc1eba0..c14a867 100644 --- a/components/inputs/styles/input/material3-dark.scss +++ b/components/inputs/styles/input/material3-dark.scss @@ -1,3 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; @import 'material3-dark-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/inputs/styles/input/material3.scss b/components/inputs/styles/input/material3.scss index 3130aa3..9eeb62e 100644 --- a/components/inputs/styles/input/material3.scss +++ b/components/inputs/styles/input/material3.scss @@ -1,3 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; @import 'material3-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/inputs/styles/material3-dark.scss b/components/inputs/styles/material3-dark.scss index acb900d..35b41d9 100644 --- a/components/inputs/styles/material3-dark.scss +++ b/components/inputs/styles/material3-dark.scss @@ -1,11 +1,8 @@ -@import 'react-base/styles/definition/material3-dark.scss'; +@import 'input/material3-dark-definition.scss'; +@import 'input/all.scss'; @import 'numerictextbox/material3-dark-definition.scss'; -@import 'numerictextbox/icons/material3-dark.scss'; @import 'numerictextbox/all.scss'; -@import 'react-popups/styles/tooltip/material3-dark-definition.scss'; @import 'textbox/material3-dark-definition.scss'; @import 'textbox/all.scss'; @import 'textarea/material3-dark-definition.scss'; @import 'textarea/all.scss'; -@import 'react-buttons/styles/button/material3-dark-definition.scss'; -@import 'react-splitbuttons/styles/split-button/material3-dark-definition.scss'; diff --git a/components/inputs/styles/material3.scss b/components/inputs/styles/material3.scss index 791129b..34e749c 100644 --- a/components/inputs/styles/material3.scss +++ b/components/inputs/styles/material3.scss @@ -1,12 +1,8 @@ -@import 'react-base/styles/definition/material3.scss'; -@import 'numerictextbox/_material3-definition.scss'; -@import 'numerictextbox/_all.scss'; -@import 'react-popups/styles/tooltip/material3-definition.scss'; -@import 'textbox/_material3-definition.scss'; -@import 'textbox/_all.scss'; -@import 'textarea/_material3-definition.scss'; -@import 'textarea/_all.scss'; -@import 'react-buttons/styles/button/material3-definition.scss'; -@import 'react-splitbuttons/styles/split-button/material3-definition.scss'; -@import 'input/_material3-definition.scss'; -@import 'input/_all.scss'; +@import 'input/material3-definition.scss'; +@import 'input/all.scss'; +@import 'numerictextbox/material3-definition.scss'; +@import 'numerictextbox/all.scss'; +@import 'textbox/material3-definition.scss'; +@import 'textbox/all.scss'; +@import 'textarea/material3-definition.scss'; +@import 'textarea/all.scss'; diff --git a/components/inputs/styles/numerictextbox/icons/_material3-dark.scss b/components/inputs/styles/numerictextbox/icons/_material3-dark.scss deleted file mode 100644 index 2bc48b5..0000000 --- a/components/inputs/styles/numerictextbox/icons/_material3-dark.scss +++ /dev/null @@ -1 +0,0 @@ -@import './material3.scss'; diff --git a/components/inputs/styles/numerictextbox/material3-dark.scss b/components/inputs/styles/numerictextbox/material3-dark.scss index 899379b..c14a867 100644 --- a/components/inputs/styles/numerictextbox/material3-dark.scss +++ b/components/inputs/styles/numerictextbox/material3-dark.scss @@ -1,5 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; -@import '../input/material3-dark-definition.scss'; @import 'material3-dark-definition.scss'; -@import 'icons/material3-dark.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/inputs/styles/numerictextbox/material3.scss b/components/inputs/styles/numerictextbox/material3.scss index 5b78198..9eeb62e 100644 --- a/components/inputs/styles/numerictextbox/material3.scss +++ b/components/inputs/styles/numerictextbox/material3.scss @@ -1,4 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; -@import '../input/material3-definition.scss'; @import 'material3-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/inputs/styles/textarea/material3-dark.scss b/components/inputs/styles/textarea/material3-dark.scss index cd4263e..c14a867 100644 --- a/components/inputs/styles/textarea/material3-dark.scss +++ b/components/inputs/styles/textarea/material3-dark.scss @@ -1,5 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; -@import '../input/material3-dark-definition.scss'; -@import '../textbox/material3-dark-definition.scss'; @import 'material3-dark-definition.scss'; @import 'all.scss'; diff --git a/components/inputs/styles/textarea/material3.scss b/components/inputs/styles/textarea/material3.scss index 100639b..9eeb62e 100644 --- a/components/inputs/styles/textarea/material3.scss +++ b/components/inputs/styles/textarea/material3.scss @@ -1,5 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; -@import '../input/material3-definition.scss'; -@import '../textbox/material3-definition.scss'; @import 'material3-definition.scss'; @import 'all.scss'; diff --git a/components/inputs/styles/textbox/material3-dark.scss b/components/inputs/styles/textbox/material3-dark.scss index ccf7adb..c14a867 100644 --- a/components/inputs/styles/textbox/material3-dark.scss +++ b/components/inputs/styles/textbox/material3-dark.scss @@ -1,4 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; -@import '../input/material3-dark-definition.scss'; @import 'material3-dark-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/inputs/styles/textbox/material3.scss b/components/inputs/styles/textbox/material3.scss index 5b78198..9eeb62e 100644 --- a/components/inputs/styles/textbox/material3.scss +++ b/components/inputs/styles/textbox/material3.scss @@ -1,4 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; -@import '../input/material3-definition.scss'; @import 'material3-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/navigations/CHANGELOG.md b/components/navigations/CHANGELOG.md new file mode 100644 index 0000000..69c222e --- /dev/null +++ b/components/navigations/CHANGELOG.md @@ -0,0 +1,36 @@ +# Changelog + +## [Unreleased] + +## 30.1.37 (2025-06-25) + +### Context Menu + +The ContextMenu component displays a menu with options when triggered by a right-click or custom event. It provides a powerful way to offer context-specific actions with support for nested submenus, icons, and various customization options. + + **Key features** + + - **Icon Support:** Enhance visual recognition by adding icons to menu items using CSS classes or React components (SVG). + - **Separator Items:** Visual grouping of related menu items using separator lines. + - **Nested Submenus:** Create hierarchical menu structures with unlimited nesting levels, allowing for organization of related commands and options. + - **Custom Positioning:** Control the exact position of the context menu using offset coordinates or automatic positioning relative to the target element. + - **Template Customization:** Create fully customized menu item displays using React components as templates for advanced UI requirements. + - **Animation Effects:** Choose from various animation effects like FadeIn, SlideDown, and ZoomIn to control how the menu appears. + - **Keyboard Navigation:** Comprehensive keyboard support for accessibility, including arrow keys for navigation, Enter for selection, and Escape to close menus. + + +### Toolbar + +The Toolbar component helps users efficiently organize and access frequently used actions through a compact and customizable interface. It offers multiple overflow handling modes to accommodate different UI requirements and screen sizes. + + **Key features** + + - **Flexible Item Layout:** Supports toolbar items, separators, and spacers for organized grouping of actions. + - **Multiple Overflow Modes:** Choose from four different handling strategies when toolbar items exceed the available space: + - **Scrollable**: Maintains overflow items with scrolling + - **Popup**: Moves overflow items to a popup menu accessed via an expand button + - **MultiRow**: Wraps overflow items to additional rows within the toolbar + - **Extended**: Hides overflow items in a secondary row accessible through an expand button + - **Orientation Options:** Configure the toolbar in either horizontal or vertical layout to fit different UI design requirements. + - **Keyboard Navigation:** Comprehensive keyboard accessibility with arrow key navigation, Home/End for first/last item access, and Tab for focus management. + \ No newline at end of file diff --git a/components/navigations/README.md b/components/navigations/README.md new file mode 100644 index 0000000..c694887 --- /dev/null +++ b/components/navigations/README.md @@ -0,0 +1,67 @@ +# React Navigation Components + +## What's Included in the React Navigation Package + +The React Navigations package includes the following component. + +### React Context Menu +The ContextMenu component displays a menu with options when triggered by a right-click or custom event. It provides a powerful way to offer context-specific actions with support for nested submenus, icons, and various customization options. + + **Key features** + - **Nested Submenus:** Create hierarchical menu structures with unlimited nesting levels, allowing for organization of related commands and options. + - **Icon Support:** Enhance visual recognition by adding icons to menu items using CSS classes or React components (SVG). + - **Animation Effects:** Choose from various animation effects like FadeIn, SlideDown, and ZoomIn to control how the menu appears. + - **Keyboard Navigation:** Comprehensive keyboard support for accessibility, including arrow keys for navigation, Enter for selection, and Escape to close menus. + - **Custom Positioning:** Control the exact position of the context menu using offset coordinates or automatic positioning relative to the target element. + - **Template Customization:** Create fully customized menu item displays using React components as templates for advanced UI requirements. + - **Separator Items:** Visual grouping of related menu items using separator lines. + +### React Toolbar +The Toolbar component helps users efficiently organize and access frequently used actions through a compact and customizable interface. It offers multiple overflow handling modes to accommodate different UI requirements and screen sizes. + + **Key features** + - **Multiple Overflow Modes:** Choose from four different handling strategies when toolbar items exceed the available space: + - **Scrollable**: Maintains overflow items with scrolling + - **Popup**: Moves overflow items to a popup menu accessed via an expand button + - **MultiRow**: Wraps overflow items to additional rows within the toolbar + - **Extended**: Hides overflow items in a secondary row accessible through an expand button + - **Orientation Options:** Configure the toolbar in either horizontal or vertical layout to fit different UI design requirements. + - **Keyboard Navigation:** Comprehensive keyboard accessibility with arrow key navigation, Home/End for first/last item access, and Tab for focus management. + - **Scroll Step Customization:** Configure the scrolling distance in pixels for the Scrollable overflow mode. + - **Flexible Item Layout:** Supports toolbar items, separators, and spacers for organized grouping of actions. + +

+Trusted by the world's leading companies + + Syncfusion logo + +

+ +## Setup + +To install `navigations` and its dependent packages, use the following command, + +```sh +npm install @syncfusion/react-navigations +``` + +## Support + +Product support is available through following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* Live chat + +## Changelog + +Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/navigations/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates. + +## License and copyright + +> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). + +> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. + +See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. + +© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. diff --git a/components/navigations/gulpfile.js b/components/navigations/gulpfile.js new file mode 100644 index 0000000..b1bf280 --- /dev/null +++ b/components/navigations/gulpfile.js @@ -0,0 +1,52 @@ +var gulp = require('gulp'); +const sass = require('gulp-sass')(require('sass')); + +/** + * Compile ts files + */ +gulp.task('scripts', function(done) { + var ts = require('gulp-typescript'); + var tsProject = ts.createProject('./tsconfig.json', { + typescript: require('typescript'), + declaration: true + }); + var tsResult = gulp.src(['./src/**/*.ts','./src/**/*.tsx', '!./node_modules/**/*.ts','!./node_modules/**/*.tsx'], { base: '.' }) + .pipe(tsProject()); + tsResult.js.pipe(gulp.dest('./')) + .on('end', function() { + tsResult.dts.pipe(gulp.dest('./')) + .on('end', function() { + done(); + }); + }); +}); + +/** + * Compile styles + */ +let isCompiled = true; +gulp.task('styles', function (done) { + var styles = './styles/**/*.scss'; + return gulp.src(styles, { base: './' }) + .pipe(sass({ + outputStyle: 'expanded', + includePaths: "./node_modules/@syncfusion/" + }).on('error', function (error) { + isCompiled = false; + console.log(error); + this.emit('end'); + })) + .pipe(gulp.dest('.')) + .on('end', function () { + if (!isCompiled) { + process.exit(1); + } + done(); + }); +}); + +/** + * Build ts and scss files + */ +gulp.task('build', gulp.series('scripts', 'styles')); + diff --git a/components/navigations/license b/components/navigations/license new file mode 100644 index 0000000..af45e1a --- /dev/null +++ b/components/navigations/license @@ -0,0 +1,13 @@ +Syncfusion® License + +Copyright (c) Syncfusion®, Inc. All rights reserved. + +Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License. + +To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions. + +If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options. + +You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions. + +The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf diff --git a/components/navigations/package.json b/components/navigations/package.json new file mode 100644 index 0000000..aa50a92 --- /dev/null +++ b/components/navigations/package.json @@ -0,0 +1,47 @@ +{ + "name": "@syncfusion/react-navigations", + "version": "30.1.37", + "description": "A package of Pure React navigation components such as Toolbar and Context-menu which is used to navigate from one page to another", + "author": "Syncfusion Inc.", + "license": "SEE LICENSE IN license", + "keywords": [ + "syncfusion", + "web-components", + "react", + "syncfusion-react", + "react-navigations", + "toolbar", + "context-menu" + ], + "repository": { + "type": "git", + "url": "https://github.com/syncfusion/react-ui-components.git" + }, + "homepage": "https://www.syncfusion.com/react-ui-components", + "module": "./index.js", + "readme": "README.md", + "dependencies": { + "@syncfusion/react-base": "~30.1.37", + "@syncfusion/react-icons": "~30.1.37", + "@syncfusion/react-buttons": "~30.1.37", + "@syncfusion/react-inputs": "~30.1.37", + "@syncfusion/react-popups": "~30.1.37" + }, + "devDependencies": { + "gulp": "4.0.2", + "gulp-typescript": "5.0.1", + "typescript": "5.7.2", + "gulp-sass": "5.1.0", + "sass": "1.83.1", + "react": "19.0.0", + "react-dom": "19.0.0", + "@types/react": "19.0.1", + "@types/react-dom": "19.0.1", + "@types/node": "^22.15.17" + }, + "scripts": { + "build": "gulp build" + }, + "typings": "index.d.ts", + "sideEffects": false +} \ No newline at end of file diff --git a/components/navigations/src/common/h-scroll.tsx b/components/navigations/src/common/h-scroll.tsx new file mode 100644 index 0000000..2859168 --- /dev/null +++ b/components/navigations/src/common/h-scroll.tsx @@ -0,0 +1,437 @@ +import { + useRef, useState, forwardRef, useImperativeHandle, HTMLAttributes, useEffect, useMemo, memo, + RefObject, MouseEvent, Ref, useCallback, RefAttributes, KeyboardEvent, + ForwardRefExoticComponent, UIEvent, FC +} from 'react'; +import { ChevronLeft, ChevronRight } from '@syncfusion/react-icons'; +import { + Touch, TouchEventArgs, getUniqueID, Browser, ITouch, SwipeEventArgs, ScrollEventArgs, useProviderContext +} from '@syncfusion/react-base'; + +const CLS_ROOT: string = 'sf-hscroll'; +const CLS_RTL: string = 'sf-rtl'; +const CLS_DISABLE: string = 'sf-overlay'; +const CLS_HSCROLLBAR: string = 'sf-hscroll-bar'; +const CLS_HSCROLLCON: string = 'sf-hscroll-content'; +const CLS_NAVARROW: string = 'sf-nav-arrow'; +const CLS_NAVRIGHTARROW: string = 'sf-nav-right-arrow'; +const CLS_NAVLEFTARROW: string = 'sf-nav-left-arrow'; +const CLS_HSCROLLNAV: string = 'sf-scroll-nav'; +const CLS_HSCROLLNAVRIGHT: string = 'sf-scroll-right-nav'; +const CLS_HSCROLLNAVLEFT: string = 'sf-scroll-left-nav'; +const CLS_DEVICE: string = 'sf-scroll-device'; + +interface NavIconProps { + direction: 'left' | 'right'; + id: string; + isDisabled: boolean; + onKeyPress: (e: KeyboardEvent) => void; + onKeyUp: (e: KeyboardEvent) => void; + onMouseUp: () => void; + onClick: (e: MouseEvent) => void; + onTapHold: (e: TapEventArgs) => void; +} + +interface TapEventArgs { + name: string; + originalEvent: TouchEventArgs | TouchEvent | KeyboardEvent; +} + +/** + * Specifies the props for the HScroll component. + */ +export interface HScrollProps { + /** + * Specifies the left or right scrolling distance of the horizontal scrollbar moving. + * This property controls how far content scrolls when navigation buttons are clicked. + * + * @default undefined + */ + scrollStep?: number; + + /** + * Specifies whether the HScroll component is enabled or disabled. + * When set to `true`, the component will be disabled. + * + * @default false + */ + isDisabled?: boolean; +} + +/** + * Specifies the interface for the HScroll component instance. + */ +export interface IHScroll extends HScrollProps { + /** + * Specifies the h-scroll component element. + * + * @private + * @default null + */ + element?: HTMLDivElement | null; +} + +/** + * HScroll component introduces horizontal scroller when content exceeds the current viewing area. + * It can be useful for components like Toolbar, Tab which need horizontal scrolling. + * Hidden content can be viewed by touch moving or navigation icon click. + * + * ```typescript + * + *
Item 1
+ *
Item 2
+ *
Item 3
+ * + * ``` + */ +export const HScroll: ForwardRefExoticComponent & RefAttributes> = memo(forwardRef< +IHScroll, HScrollProps & HTMLAttributes +>((props: HScrollProps & HTMLAttributes, ref: Ref) => { + const { + className = '', + scrollStep: scrollStepProp = undefined, + isDisabled = false, + children, + ...restProps + } = props; + + const scrollStep: RefObject = useRef(scrollStepProp); + const uniqueId: RefObject = useRef(getUniqueID('hscroll')); + const [leftNavDisabled, setLeftNavDisabled] = useState(true); + const [rightNavDisabled, setRightNavDisabled] = useState(false); + const { dir }: { dir: string } = useProviderContext(); + + const elementRef: RefObject = useRef(null); + const scrollEleRef: RefObject = useRef(null); + const touchModuleRef: RefObject = useRef(null); + const timeoutRef: RefObject = useRef(null); + const keyTimeoutRef: RefObject = useRef(false); + const keyTimerRef: RefObject = useRef(null); + + const publicAPI: Partial = { + scrollStep: scrollStepProp, + isDisabled + }; + + const browserInfo: { + name: string | undefined; + isDevice: boolean; + isMozilla: boolean; + } = useMemo(() => ({ + name: Browser.info.name, + isDevice: Browser.isDevice, + isMozilla: Browser.info.name === 'mozilla' + }), []); + + useEffect(() => { + const setScrollState: () => void = () => { + if (typeof scrollStepProp !== 'number' || scrollStepProp < 0) { + scrollStep.current = scrollEleRef.current?.offsetWidth || undefined; + } else { + scrollStep.current = scrollStepProp; + } + }; + setScrollState(); + }, [scrollStepProp]); + + const scrollUpdating: (scrollVal: number, action: string) => void = useCallback((scrollVal: number, action: string) => { + if (scrollEleRef.current) { + if (action === 'add') { + scrollEleRef.current.scrollLeft += scrollVal; + } else { + scrollEleRef.current.scrollLeft -= scrollVal; + } + if (dir === 'rtl' && scrollEleRef.current.scrollLeft > 0) { + scrollEleRef.current.scrollLeft = 0; + } + } + }, [dir]); + + const frameScrollRequest: (scrollVal: number, action: string, isContinuous: boolean) => void = useCallback(( + scrollVal: number, action: string, isContinuous: boolean) => { + const step: number = 10; + if (isContinuous) { + scrollUpdating(scrollVal, action); + return; + } + const animate: () => void = () => { + let scrollValue: number = scrollVal; + let scrollStep: number = step; + if (elementRef.current?.classList.contains(CLS_RTL) && browserInfo.isMozilla) { + scrollValue = -scrollVal; + scrollStep = -step; + } + if (scrollValue < step) { + cancelAnimationFrame(scrollStep); + } else { + scrollUpdating(scrollStep, action); + scrollVal -= scrollStep; + requestAnimationFrame(animate); + } + }; + animate(); + }, [browserInfo.isMozilla, scrollUpdating]); + + const eleScrolling: (scrollDis: number, trgt: HTMLElement, isContinuous: boolean) => void = useCallback(( + scrollDis: number, trgt: HTMLElement, isContinuous: boolean) => { + const rootEle: HTMLElement = elementRef.current as HTMLElement; + let classList: DOMTokenList = trgt.classList; + if (!classList.contains(CLS_HSCROLLNAV)) { + const sctollNav: HTMLElement | null = trgt.closest('.' + CLS_HSCROLLNAV); + if (sctollNav) { + trgt = sctollNav; + } + } + classList = (trgt.querySelector(`.${CLS_NAVARROW}`) as HTMLElement).classList; + if (rootEle.classList.contains(CLS_RTL) && browserInfo.isMozilla) { + scrollDis = -scrollDis; + } + if ((!rootEle.classList.contains(CLS_RTL) || browserInfo.isMozilla)) { + if (classList.contains(CLS_NAVRIGHTARROW)) { + frameScrollRequest(scrollDis, 'add', isContinuous); + } else { + frameScrollRequest(scrollDis, '', isContinuous); + } + } else { + if (classList.contains(CLS_NAVLEFTARROW)) { + frameScrollRequest(scrollDis, 'add', isContinuous); + } else { + frameScrollRequest(scrollDis, '', isContinuous); + } + } + }, [browserInfo.isMozilla, frameScrollRequest]); + + const tapHoldHandler: (e: TapEventArgs | undefined) => void = useCallback((e: TapEventArgs | undefined) => { + if (e) { + const trgt: HTMLElement = e.originalEvent.target as HTMLElement; + const scrollDis: number = 10; + const timeoutFun: () => void = () => { + eleScrolling(scrollDis, trgt, true); + }; + timeoutRef.current = window.setInterval(() => { + timeoutFun(); + }, 50); + } + }, [eleScrolling]); + + const onKeyPress: (e: KeyboardEvent) => void = useCallback((e: KeyboardEvent) => { + if (e.key === 'Enter') { + const timeoutFun: () => void = () => { + keyTimeoutRef.current = true; + eleScrolling(10, e.target as HTMLElement, true); + }; + keyTimerRef.current = window.setTimeout(() => { + timeoutFun(); + }, 100); + } + }, [eleScrolling]); + + const onKeyUp: (e: KeyboardEvent) => void = useCallback((e: KeyboardEvent) => { + if (e.key !== 'Enter') { + return; + } + if (keyTimeoutRef.current) { + keyTimeoutRef.current = false; + } else { + (e.target as HTMLElement).click(); + } + clearTimeout(keyTimerRef.current as number); + }, []); + + const repeatScroll: () => void = useCallback((): void => { + clearInterval(timeoutRef.current as number); + }, []); + + const clickEventHandler: (e: MouseEvent) => void = useCallback((e: MouseEvent) => { + eleScrolling(scrollStep.current as number, e.target as HTMLElement, false); + }, [eleScrolling]); + + const swipeHandler: (e: SwipeEventArgs | undefined) => void = useCallback((e: SwipeEventArgs | undefined) => { + if (e) { + const swipeEle: HTMLElement = scrollEleRef.current as HTMLElement; + let distance: number; + if (typeof e.velocity === 'number' && typeof e.distanceX === 'number') { + if (e.velocity <= 1) { + distance = e.distanceX / (e.velocity * 10); + } else { + distance = e.distanceX / e.velocity; + } + } + let start: number = 0.5; + const animate: () => void = () => { + const step: number = Math.sin(start); + if (step <= 0) { + cancelAnimationFrame(step); + } else { + if (e.swipeDirection === 'Left') { + swipeEle.scrollLeft += distance * step; + } else if (e.swipeDirection === 'Right') { + swipeEle.scrollLeft -= distance * step; + } + start -= 0.5; + requestAnimationFrame(animate); + } + }; + animate(); + } + }, []); + + const touchHandler: (e: ScrollEventArgs | undefined) => void = useCallback((e: ScrollEventArgs | undefined) => { + if (e) { + const ele: HTMLDivElement | null = scrollEleRef.current; + if (ele && typeof e.distanceX === 'number') { + const distance: number = e.distanceX; + if (e.scrollDirection === 'Left') { + ele.scrollLeft = ele.scrollLeft + distance; + } else if (e.scrollDirection === 'Right') { + ele.scrollLeft = ele.scrollLeft - distance; + } + } + } + }, []); + + const scrollHandler: (e: UIEvent) => void = (e: UIEvent) => { + const target: HTMLElement = e.target as HTMLElement; + const width: number = target.offsetWidth; + let scrollLeft: number = target.scrollLeft; + if (scrollLeft <= 0) { + scrollLeft = -scrollLeft; + } + + if (scrollLeft === 0) { + setLeftNavDisabled(true); + setRightNavDisabled(false); + repeatScroll(); + } else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) { + setLeftNavDisabled(false); + setRightNavDisabled(true); + repeatScroll(); + } else { + setLeftNavDisabled(false); + setRightNavDisabled(false); + } + }; + + useImperativeHandle(ref, () => { + return { + ...publicAPI as IHScroll, + element: elementRef.current + }; + }); + + useEffect(() => { + return () => { + if (timeoutRef.current) { + clearInterval(timeoutRef.current); + } + if (keyTimerRef.current) { + clearTimeout(keyTimerRef.current); + } + }; + }, []); + + const touchProps: ITouch = useMemo(() => ({ + swipe: swipeHandler, + scroll: touchHandler + }), [swipeHandler, touchHandler]); + touchModuleRef.current = Touch(elementRef as RefObject, touchProps); + + const classNames: string = useMemo(() => { + return [ + 'sf-control', + 'sf-lib', + CLS_ROOT, + dir === 'rtl' && CLS_RTL, + browserInfo.isDevice && CLS_DEVICE, + isDisabled && CLS_DISABLE, + className + ].filter(Boolean).join(' '); + }, [className, dir, browserInfo.isDevice, isDisabled]); + + return ( +
+ +
+
+ {children} +
+
+ +
+ ); +})); +HScroll.displayName = 'HScrollComponent'; +export default HScroll; + +const NavIcon: FC = memo(({ + direction, + id, + isDisabled, + onKeyPress, + onKeyUp, + onMouseUp, + onClick, + onTapHold +}: NavIconProps) => { + const isRight: boolean = direction === 'right'; + const className: string = `sf-${id}_nav ${CLS_HSCROLLNAV} ${isRight ? CLS_HSCROLLNAVRIGHT : CLS_HSCROLLNAVLEFT}`; + const arrowClass: string = `${isRight ? CLS_NAVRIGHTARROW : CLS_NAVLEFTARROW} ${CLS_NAVARROW} sf-icons`; + const navRef: RefObject = useRef(null); + + const touchProps: ITouch = useMemo(() => ({ + tapHold: onTapHold, + tapHoldThreshold: 500 + }), [onTapHold]) as ITouch; + Touch(navRef as RefObject, touchProps); + + return ( +
e.preventDefault()} + onClick={onClick} + > +
+ {isRight ? : } +
+
+ ); +}); +NavIcon.displayName = 'NavIcon'; diff --git a/components/navigations/src/common/index.ts b/components/navigations/src/common/index.ts new file mode 100644 index 0000000..5278fd6 --- /dev/null +++ b/components/navigations/src/common/index.ts @@ -0,0 +1,5 @@ +/** + * Navigation common modules + */ +export * from './h-scroll'; +export * from './v-scroll'; diff --git a/components/navigations/src/common/v-scroll.tsx b/components/navigations/src/common/v-scroll.tsx new file mode 100644 index 0000000..ab2b05e --- /dev/null +++ b/components/navigations/src/common/v-scroll.tsx @@ -0,0 +1,419 @@ +import { + forwardRef, useImperativeHandle, useRef, HTMLAttributes, useEffect, useState, useMemo, memo, + RefObject, MouseEvent, TouchEvent, KeyboardEvent, FC, ForwardRefExoticComponent, RefAttributes, UIEvent, useCallback, Ref, + WheelEvent +} from 'react'; +import { ChevronUp, ChevronDown } from '@syncfusion/react-icons'; +import { + Touch, ScrollEventArgs, TouchEventArgs, getUniqueID, useProviderContext, + SwipeEventArgs, ITouch, Browser +} from '@syncfusion/react-base'; + +const CLS_ROOT: string = 'sf-vscroll'; +const CLS_RTL: string = 'sf-rtl'; +const CLS_DISABLE: string = 'sf-overlay'; +const CLS_VSCROLLBAR: string = 'sf-vscroll-bar'; +const CLS_VSCROLLCON: string = 'sf-vscroll-content'; +const CLS_NAVARROW: string = 'sf-nav-arrow'; +const CLS_NAVUPARROW: string = 'sf-nav-up-arrow'; +const CLS_NAVDOWNARROW: string = 'sf-nav-down-arrow'; +const CLS_VSCROLLNAV: string = 'sf-scroll-nav'; +const CLS_VSCROLLNAVUP: string = 'sf-scroll-up-nav'; +const CLS_VSCROLLNAVDOWN: string = 'sf-scroll-down-nav'; +const CLS_DEVICE: string = 'sf-scroll-device'; + +interface TapEventArgs { + name: string; + originalEvent: TouchEventArgs | TouchEvent | KeyboardEvent; +} + +interface NavIconProps { + direction: 'up' | 'down'; + id: string; + isDisabled: boolean; + onKeyPress: (e: KeyboardEvent) => void; + onKeyUp: (e: KeyboardEvent) => void; + onMouseUp: () => void; + onClick: (e: MouseEvent) => void; + onTapHold: (e: TapEventArgs) => void; +} + +export interface VScrollProps { + /** + * Specifies the up or down scrolling distance of the vertical scrollbar moving. + * This property controls how far content scrolls when navigation buttons are clicked. + * + * @default undefined + */ + scrollStep?: number; + + /** + * Specifies whether the VScroll component is enabled or disabled. + * When set to `true`, the component will be disabled. + * + * @default false + */ + isDisabled?: boolean; +} + +/** + * Specifies the interface for the VScroll component instance. + */ +export interface IVScroll extends VScrollProps { + /** + * Specifies the VScroll component element. + * + * @private + * @default null + */ + element?: HTMLDivElement | null; +} + +/** + * VScroll component introduces vertical scroller when content exceeds the current viewing area. + * It can be useful for components like Toolbar, Tab which need vertical scrolling. + * Hidden content can be viewed by touch moving or navigation icon click. + * + * ```typescript + * + *
Item 1
+ *
Item 2
+ *
Item 3
+ * + * ``` + */ +export const VScroll: ForwardRefExoticComponent & RefAttributes> = memo(forwardRef< +IVScroll, VScrollProps & HTMLAttributes +>((props: VScrollProps & HTMLAttributes, ref: Ref) => { + const { + className = '', + scrollStep: scrollStepProp = undefined, + isDisabled = false, + children, + ...restProps + } = props; + + const scrollStep: RefObject = useRef(scrollStepProp); + const uniqueId: RefObject = useRef(getUniqueID('vscroll')); + const [upNavDisabled, setUpNavDisabled] = useState(true); + const [downNavDisabled, setDownNavDisabled] = useState(false); + const { dir }: { dir: string } = useProviderContext(); + + const elementRef: RefObject = useRef(null); + const scrollEleRef: RefObject = useRef(null); + const touchModuleRef: RefObject = useRef(null); + const timeoutRef: RefObject = useRef(null); + const keyTimeoutRef: RefObject = useRef(false); + const keyTimerRef: RefObject = useRef(null); + + const browserInfo: { isDevice: boolean; } = useMemo(() => ({ isDevice: Browser.isDevice }), []); + + const publicAPI: Partial = { + scrollStep: scrollStepProp, + isDisabled + }; + + useEffect(() => { + const setScrollState: () => void = () => { + if (typeof scrollStepProp !== 'number' || scrollStepProp < 0) { + scrollStep.current = scrollEleRef.current?.offsetHeight || undefined; + } else { + scrollStep.current = scrollStepProp; + } + }; + setScrollState(); + }, [scrollStepProp]); + + const scrollUpdating: (scrollVal: number, action: string) => void = useCallback((scrollVal: number, action: string) => { + if (scrollEleRef.current) { + if (action === 'add') { + scrollEleRef.current.scrollTop += scrollVal; + } else { + scrollEleRef.current.scrollTop -= scrollVal; + } + } + }, []); + + const frameScrollRequest: (scrollVal: number, action: string, isContinuous: boolean) => void = useCallback(( + scrollVal: number, action: string, isContinuous: boolean) => { + const step: number = 10; + if (isContinuous) { + scrollUpdating(scrollVal, action); + return; + } + const animate: () => void = () => { + if (scrollVal < step) { + cancelAnimationFrame(step); + } else { + scrollUpdating(step, action); + scrollVal -= step; + requestAnimationFrame(animate); + } + }; + animate(); + }, [scrollUpdating]); + + const eleScrolling: (scrollDis: number, trgt: HTMLElement, isContinuous: boolean) => void = useCallback(( + scrollDis: number, trgt: HTMLElement, isContinuous: boolean) => { + let elementClassList: DOMTokenList = trgt.classList; + if (!elementClassList.contains(CLS_VSCROLLNAV)) { + const sctollNav: HTMLElement | null = trgt.closest('.' + CLS_VSCROLLNAV); + if (sctollNav) { + trgt = sctollNav; + } + } + const arrowElement: HTMLElement | null = trgt.querySelector(`.${CLS_NAVARROW}`); + if (arrowElement) { + elementClassList = arrowElement.classList; + } + if (elementClassList.contains(CLS_NAVDOWNARROW)) { + frameScrollRequest(scrollDis, 'add', isContinuous); + } else if (elementClassList.contains(CLS_NAVUPARROW)) { + frameScrollRequest(scrollDis, '', isContinuous); + } + }, [frameScrollRequest]); + + const tapHoldHandler: (e: TapEventArgs | undefined) => void = useCallback((e: TapEventArgs | undefined) => { + if (e) { + const trgt: HTMLElement = e.originalEvent.target as HTMLElement; + const scrollDis: number = 10; + const timeoutFun: () => void = () => { + eleScrolling(scrollDis, trgt, true); + }; + timeoutRef.current = window.setInterval(() => { + timeoutFun(); + }, 50); + } + }, [eleScrolling]); + + const onKeyPress: (e: KeyboardEvent) => void = useCallback((e: KeyboardEvent) => { + if (e.key === 'Enter') { + const timeoutFun: () => void = () => { + keyTimeoutRef.current = true; + eleScrolling(10, e.target as HTMLElement, true); + }; + keyTimerRef.current = window.setTimeout(() => { + timeoutFun(); + }, 100); + } + }, [eleScrolling]); + + const onKeyUp: (e: KeyboardEvent) => void = useCallback((e: KeyboardEvent) => { + if (e.key !== 'Enter') { + return; + } + if (keyTimeoutRef.current) { + keyTimeoutRef.current = false; + } else { + (e.target as HTMLElement).click(); + } + if (keyTimerRef.current) { + clearTimeout(keyTimerRef.current); + } + }, []); + + const repeatScroll: () => void = useCallback((): void => { + clearInterval(timeoutRef?.current as number); + }, []); + + const clickEventHandler: (e: MouseEvent) => void = useCallback((e: MouseEvent) => { + eleScrolling(scrollStep.current as number, e.target as HTMLElement, false); + }, [eleScrolling, scrollStep]); + + const wheelEventHandler: (e: WheelEvent) => void = useCallback((e: WheelEvent) => { + e.preventDefault(); + frameScrollRequest(scrollStep.current as number, (e.deltaY > 0 ? 'add' : ''), false); + }, [frameScrollRequest, scrollStep]); + + const swipeHandler: (e: SwipeEventArgs | undefined) => void = useCallback((e: SwipeEventArgs | undefined) => { + if (e && scrollEleRef.current) { + const swipeElement: HTMLElement = scrollEleRef.current as HTMLElement; + let distance: number = 0; + if (typeof e.velocity === 'number' && typeof e.distanceY === 'number') { + if (e.velocity <= 1) { + distance = e.distanceY / (e.velocity * 10); + } else { + distance = e.distanceY / e.velocity; + } + } + let start: number = 0.5; + const animate: () => void = () => { + const step: number = Math.sin(start); + if (step <= 0) { + cancelAnimationFrame(step); + } else { + if (e.swipeDirection === 'Up') { + swipeElement.scrollTop += distance * step; + } else if (e.swipeDirection === 'Down') { + swipeElement.scrollTop -= distance * step; + } + start -= 0.02; + requestAnimationFrame(animate); + } + }; + animate(); + } + }, []); + + const touchHandler: (e: ScrollEventArgs | undefined) => void = useCallback((e: ScrollEventArgs | undefined) => { + if (e) { + const ele: HTMLDivElement | null = scrollEleRef.current; + if (ele && typeof e.distanceY === 'number') { + const distance: number = e.distanceY; + if (e.scrollDirection === 'Up') { + ele.scrollTop = ele.scrollTop + distance; + } else if (e.scrollDirection === 'Down') { + ele.scrollTop = ele.scrollTop - distance; + } + } + } + }, []); + + const scrollHandler: (e: UIEvent) => void = useCallback((e: UIEvent) => { + const target: HTMLElement = e.target as HTMLElement; + const height: number = target.offsetHeight; + let scrollTop: number = target.scrollTop; + if (scrollTop <= 0) { + scrollTop = -scrollTop; + } + + if (scrollTop === 0) { + setUpNavDisabled(true); + setDownNavDisabled(false); + repeatScroll(); + } else if (Math.ceil(height + scrollTop + .1) >= target.scrollHeight) { + setUpNavDisabled(false); + setDownNavDisabled(true); + repeatScroll(); + } else { + setUpNavDisabled(false); + setDownNavDisabled(false); + } + }, [repeatScroll]); + + useImperativeHandle(ref, () => { + return { + ...publicAPI as IVScroll, + element: elementRef.current + }; + }); + + useEffect(() => { + return () => { + if (timeoutRef.current) { + clearInterval(timeoutRef.current); + } + if (keyTimerRef.current) { + clearTimeout(keyTimerRef.current); + } + }; + }, []); + + const touchProps: ITouch = useMemo(() => ({ + scroll: touchHandler, + swipe: swipeHandler + }), [swipeHandler, touchHandler]); + + touchModuleRef.current = Touch(elementRef as RefObject, touchProps); + + const classNames: string = useMemo(() => { + return [ + 'sf-control', + 'sf-lib', + CLS_ROOT, + dir === 'rtl' && CLS_RTL, + browserInfo.isDevice && CLS_DEVICE, + isDisabled && CLS_DISABLE, + className + ].filter(Boolean).join(' '); + }, [className, dir, browserInfo.isDevice, isDisabled]); + + return ( +
+ +
+
+ {children} +
+
+ +
+ ); +})); +VScroll.displayName = 'VScrollComponent'; +export default VScroll; + +const NavIcon: FC = memo(({ + direction, + id, + isDisabled, + onKeyPress, + onKeyUp, + onMouseUp, + onClick, + onTapHold +}: NavIconProps) => { + const isDown: boolean = direction === 'down'; + const className: string = `sf-${id}_nav ${CLS_VSCROLLNAV} ${isDown ? CLS_VSCROLLNAVDOWN : CLS_VSCROLLNAVUP}`; + const arrowClass: string = `${isDown ? CLS_NAVDOWNARROW : CLS_NAVUPARROW} ${CLS_NAVARROW} sf-icons`; + const navRef: RefObject = useRef(null); + + const touchProps: ITouch = useMemo(() => ({ + tapHold: onTapHold, + tapHoldThreshold: 500 + }), [onTapHold]) as ITouch; + Touch(navRef as RefObject, touchProps); + + return ( +
e.preventDefault()} + onClick={onClick} + > +
+ {isDown ? : } +
+
+ ); +}); +NavIcon.displayName = 'NavIcon'; diff --git a/components/navigations/src/contextMenu/context-menu.tsx b/components/navigations/src/contextMenu/context-menu.tsx new file mode 100644 index 0000000..cd59608 --- /dev/null +++ b/components/navigations/src/contextMenu/context-menu.tsx @@ -0,0 +1,1077 @@ +import { useRef, useImperativeHandle, forwardRef, useEffect, useState, HTMLAttributes, useCallback } from 'react'; +import { calculatePosition, isCollide, OffsetPosition, fit } from '@syncfusion/react-popups'; +import { AnimationOptions, Browser, Effect, IAnimation, MouseEventArgs, preRender, TouchEventArgs } from '@syncfusion/react-base'; +import { Animation, useProviderContext, SvgIcon, useRippleEffect, Touch, ITouch, TapEventArgs } from '@syncfusion/react-base'; +import * as React from 'react'; +import { createPortal } from 'react-dom'; + +const SUBMENU_ICON: string = 'M7.58582 18L13.5858 12L7.58582 6L9.00003 4.58578L16.4142 12L9.00003 19.4142L7.58582 18Z'; +const PREVIOUS_ICON: string = 'M12.4142 19L6.41424 13H21V11H6.41424L12.4142 5L11 3.58578L2.58582 12L11 20.4142L12.4142 19Z'; + +/** + * Interface for select event arguments when an item is selected from the ContextMenu. + */ +export interface MenuEvent { + /** + * Specifies the item data object of the selected menu item. + * + * @default - + */ + item: MenuItemProps; + + /** + * Specifies the React synthetic event triggered by the user interaction. + * + * @default - + */ + event?: React.SyntheticEvent; +} + +/** + * Interface for menu item model. + */ +export interface MenuItemProps { + /** + * Specifies the display text for the menu item. + * + * @default - + */ + text?: string; + + /** + * Specifies the unique identifier for the menu item. + * + * @default - + */ + id?: string; + + /** + * Specifies the icon CSS class or React node for the menu item that is used to include an icon. + * Can be a string (CSS class) or a React element. + * + * @default - + */ + icon?: string | React.ReactNode; + + /** + * Specifies the URL for the menu item that creates an anchor link to navigate to the provided URL. + * When clicked, the browser will navigate to this URL. + * + * @default - + */ + url?: string; + + /** + * Specifies a separator between the items. Separators are used to group menu items visually. + * When true, renders a horizontal line instead of a clickable menu item. + * + * @default false + */ + separator?: boolean; + + /** + * Specifies the sub menu items as an array of MenuItem models for creating nested menu structures. + * + * @default [] + */ + items?: MenuItemProps[]; + + /** + * Specifies the htmlAttributes property to support adding custom HTML attributes to the menu item. + * These attributes will be directly applied to the rendered list item element. + * + * @default - + */ + htmlAttributes?: HTMLAttributes; + + /** + * Specifies whether the item is disabled or not. When true, the item will be non-interactive + * and displayed with a disabled visual state. + * + * @default false + */ + disabled?: boolean; +} + +interface SubmenuType { + parentIndex: number[]; + position: { x: number; y: number; }; + isVisible: boolean; + currentTarget: HTMLElement; + positionChanged?: boolean; +} + +/** + * Specifies the animation effect for the ContextMenu. + * + */ +export type MenuEffect = 'None' | 'SlideDown' | 'ZoomIn' | 'FadeIn'; + +/** + * Interface for ContextMenu animation settings that controls how the menu appears. + */ +export interface MenuAnimationProp { + /** + * Specifies the effect shown in the ContextMenu transform. + * The possible effects are: + * * None: Specifies the ContextMenu transform with no animation effect. + * * SlideDown: Specifies the ContextMenu transform with slide down effect. + * * ZoomIn: Specifies the ContextMenu transform with zoom in effect. + * * FadeIn: Specifies the ContextMenu transform with fade in effect. + * + * @default 'FadeIn' + */ + effect?: MenuEffect; + + /** + * Specifies the time duration in milliseconds for the transform animation. + * + * @default 400 + */ + duration?: number; + + /** + * Specifies the easing effect applied during the transform animation. + * + * @default 'ease' + */ + easing?: string; +} + +/** + * Interface for ContextMenu component props. + */ +export interface ContextMenuProps { + /** + * Specifies whether to show the sub menu on click instead of hover. + * When set to true, the sub menu will open only on mouse click rather than on hover. + * + * @default false + */ + itemOnClick?: boolean; + + /** + * Specifies menu items with their properties which will be rendered as ContextMenu. + * This array defines the structure and content of the menu. + * + * @default [] + */ + items?: MenuItemProps[]; + + /** + * Specifies the delay time in milliseconds before opening the submenu when hovering. + * + * @default 0 + */ + hoverDelay?: number; + + /** + * Specifies the animation settings for the ContextMenu open. + * + * @default { duration: 400, easing: 'ease', effect: 'FadeIn' } + */ + animation?: MenuAnimationProp; + + /** + * Specifies the visibility of the ContextMenu. + * If set to true, the ContextMenu is displayed. If false, it is hidden. + * + * @default - + */ + open?: boolean; + + /** + * Specifies the position (left/top coordinates) of the ContextMenu. + * This determines where the menu will appear on the screen. + * + * @default - + */ + offset?: { left: number; top: number }; + + /** + * Specifies target element on which the ContextMenu should be opened. When provided, ContextMenu + * events on this element will automatically trigger the context menu to appear at the cursor position. + * + * The standard contextmenu event is not supported on iOS devices, so this component automatically + * implements a tapHold touch event handler when iOS is detected. This ensures consistent context menu + * functionality across all platforms and devices. If you prefer to use your own event handling mechanism + * or need different trigger behaviors, you can omit this prop and manually control menu display with + * the `open` and `offset` props instead. + * + * @default - + */ + targetRef?: React.RefObject; + + /** + * Specifies whether to close the ContextMenu when the document is scrolled. + * When set to true, scrolling the page will automatically close the menu. + * + * @default true + */ + closeOnScroll?: boolean; + + /** + * Specifies a custom template for menu items. This function receives the entire item object + * as an argument and should return a React node that will replace the default content. + * + * @default - + */ + itemTemplate?: (item: MenuItemProps) => React.ReactNode; + + /** + * Specifies the callback function that triggers before open the ContextMenu. + * + * @event onOpen + */ + onOpen?: (event: Event) => void; + + /** + * Specifies the callback function that triggers before closing the ContextMenu. + * + * @event onClose + */ + onClose?: (event: Event) => void; + + /** + * Specifies the callback function that triggers when selecting a ContextMenu item. + * + * * item - Specifies the item data object of the selected menu item. + * * event - Specifies the React synthetic event triggered by the user interaction. + * + * @event onSelect + */ + onSelect?: (args: MenuEvent) => void; +} + +/** + * Interface for ContextMenu component instance. + */ +export interface IContextMenu extends ContextMenuProps { + /** + * Specifies the DOM element of the ContextMenu. + * + * @private + */ + element: HTMLDivElement | null; +} + +type ContextMenuComponentProps = ContextMenuProps & Omit< HTMLAttributes, 'onSelect'>; + +type MenuItemComponentProps = MenuItemProps & Omit & HTMLAttributes; + +/** + * The MenuItem component represents an individual item within a ContextMenu. + * It serves as a configuration component and doesn't render anything directly. + * + * @example + * ```jsx + * + * + * + * + * + * + * + * ...}> + * ...} /> + * + * + * ``` + * + * @returns {null} This is a wrapper component that doesn't render anything directly. + */ +export const MenuItem: React.FC = () => { + return null; +}; + +interface MenuListItemProps { + item: MenuItemProps; + itemClasses: string; + isFocused: boolean; + hasSubmenu: boolean; + isDisabled: boolean; + isSelected: boolean; + isSeparator: boolean; + onMouseEnter: (e: React.MouseEvent) => void; + onClick: (e: React.MouseEvent) => void; + getContent: (item: MenuItemProps) => React.ReactNode; + focusedItemRef: React.RefObject; + attributes?: React.HTMLAttributes; +} + +const MenuListItem: React.FC = (props: MenuListItemProps ) => { + const { item, itemClasses, isFocused, hasSubmenu, isDisabled, isSelected, isSeparator, + onMouseEnter, onClick, getContent, focusedItemRef, attributes } = props; + const { ripple } = useProviderContext(); + const { rippleMouseDown, Ripple } = useRippleEffect(ripple); + const handleMouseDown: (e: React.MouseEvent) => void = + (e: React.MouseEvent): void => { + if (ripple && !isDisabled && !isSeparator) { + rippleMouseDown(e); + } + }; + + return ( +
  • + {!isSeparator && (item.url ? ( + ) => e.stopPropagation()}> +
    + {getContent(item)} +
    +     + ) : (getContent(item)))} + {hasSubmenu && } + {ripple && !isDisabled && !isSeparator && } +
    • + ); +}; + +/** + * The ContextMenu component displays a menu with a list of options when triggered by a right-click. + * It supports nested submenus, keyboard navigation, icons, and various animation effects. + * + * ```typescript + * const targetRef = useRef(null); + * return ( + *
    + * + * }> + * + * + * + * + *
    + * ); + * ``` + */ +export const ContextMenu: React.ForwardRefExoticComponent> = + forwardRef((props: ContextMenuComponentProps, ref: React.Ref) => { + const { + items = [], + hoverDelay = 0, + onOpen, + onClose, + onSelect, + open, + offset, + animation = { duration: 400, easing: 'ease', effect: 'FadeIn' }, + itemOnClick, + closeOnScroll = true, + targetRef, + className, + children, + itemTemplate, + ...restProps + } = props; + + const elementRef: React.RefObject = useRef(null); + const parentRef: React.RefObject = useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 }); + const [openSubmenus, setOpenSubmenus] = useState>([]); + const hoverTimeoutRef: React.RefObject = useRef(null); + const submenuRefs: React.RefObject> = React.useRef>(new Map()); + const [focusedItem, setFocusedItem] = useState<{focusedItems: number[] | null, hoveredItems?: number[] | null}> + ({focusedItems: null, hoveredItems: null}); + const focusedItemRef: React.RefObject = useRef(null); + const initialShowState: React.RefObject = useRef(open); + const { dir } = useProviderContext(); + const menuItemsRef: React.RefObject = useRef([]); + + const handleTargetContextMenu: (event: MouseEvent | TapEventArgs | React.MouseEvent) => void = + useCallback((event: MouseEvent | TapEventArgs | React.MouseEvent): void => { + if (Browser.isIos && touchModule.current && (event as TapEventArgs).originalEvent) { + (event as TapEventArgs).originalEvent?.preventDefault(); + const touch: TouchEventArgs | MouseEventArgs = (event as TapEventArgs).originalEvent.changedTouches[0]; + setMenuPosition({ x: touch.clientX, y: touch.clientY }); + } + else { + (event as MouseEvent).preventDefault(); + setMenuPosition({ x: (event as MouseEvent).pageX, y: (event as MouseEvent).pageY }); + } + onOpen?.(((event as TapEventArgs).originalEvent ? (event as TapEventArgs).originalEvent : event) as Event); + if (onOpen && open === false) { return; } + setIsOpen(true); + }, []); + + const touchModule: React.RefObject = + useRef(Touch(Browser.isIos && targetRef ? targetRef : { current: null } as unknown as React.RefObject, + { tapHold: handleTargetContextMenu })); + const refInstance: Partial = { + items: menuItemsRef.current, + hoverDelay, + animation, + open, + offset, + itemOnClick, + targetRef, + closeOnScroll, + itemTemplate + }; + useEffect(() => { + preRender('contextmenu'); + return () => { + submenuRefs.current?.clear(); + if (hoverTimeoutRef.current) { + clearTimeout(hoverTimeoutRef.current); + hoverTimeoutRef.current = null; + } + touchModule.current?.destroy?.(); + }; + }, []); + + const handleScroll: (args: Event) => void = (args: Event) => { + if (isOpen && closeOnScroll && !elementRef?.current?.contains(args.target as Node)) { + onClose?.(args); + if (onClose && open === true) { return; } + closeMenu(); + } + }; + + useEffect(() => { + if (closeOnScroll) { + document.addEventListener('scroll', handleScroll, true); + } + return () => { + document.removeEventListener('scroll', handleScroll, true); + }; + }, [isOpen, closeOnScroll, onClose, open]); + + useEffect(() => { + const targetElement: HTMLElement = targetRef?.current as HTMLElement; + if (targetElement) { + targetElement.addEventListener('contextmenu', handleTargetContextMenu); + } + return () => { + if (targetElement) { + targetElement.removeEventListener('contextmenu', handleTargetContextMenu); + } + }; + }, [targetRef]); + + useEffect(() => { + if (!open && initialShowState.current === open) { return; } + initialShowState.current = open; + if (open){ + if (offset && offset.left !== undefined && offset.top !== undefined){ + setMenuPosition({ x: offset.left, y: offset.top }); + } + setIsOpen(true); + } + else { + closeMenu(); + } + }, [open, offset]); + + useEffect(() => { + if (isOpen) { + let left: number = menuPosition.x; + let top: number = menuPosition.y; + const collide: string[] = isCollide(parentRef.current, document.documentElement, left, top); + if (collide.includes('left') || collide.includes('right')) { + left = left - (parentRef?.current?.offsetWidth || 0); + } + if (collide.includes('bottom')) { + const position: OffsetPosition = fit(parentRef.current, null, { X: false, Y: true }, + { top: top, left: left }) as OffsetPosition; + top = position.top; + } + if (left !== menuPosition.x || top !== menuPosition.y) { + setMenuPosition({x: left, y: top}); + } + applyAnimation(parentRef.current as HTMLUListElement); + document.addEventListener('mousedown', handleClickOutside); + } else { + document.removeEventListener('mousedown', handleClickOutside); + } + return () => document.removeEventListener('mousedown', handleClickOutside); + }, [isOpen, menuPosition]); + + useEffect(() => { + if (focusedItemRef.current) { + focusedItemRef.current.focus(); + } + }, [focusedItem]); + + useEffect(() => { + const filteredChildren: React.ReactNode[] = (children + ? React.Children.toArray(children).filter((child: React.ReactNode) => + React.isValidElement(child) && child.type === MenuItem) : null) as React.ReactNode[]; + const rawMenuItems: MenuItemProps[] = filteredChildren?.length ? parseMenuItemChildren(filteredChildren) : items; + menuItemsRef.current = addMobileHeaderToNestedItems(rawMenuItems); + }, [items, children]); + + useImperativeHandle(ref, () => ({ + ...refInstance as IContextMenu, + element: elementRef.current + })); + + useEffect(() => { + if (openSubmenus.length > 0) { + const pathKey: string = openSubmenus[openSubmenus.length - 1].parentIndex.join('-'); + const currentUl: HTMLElement = submenuRefs.current?.get(pathKey) as HTMLElement; + if (Browser.isDevice) { + applyAnimation(currentUl); + return; + } + const lastSubmenu: SubmenuType = openSubmenus[openSubmenus.length - 1]; + if (lastSubmenu.positionChanged) { + applyAnimation(currentUl); + return; + } + let left: number = lastSubmenu.position.x; + let top: number = lastSubmenu.position.y; + const collide: string[] = isCollide(currentUl, document.documentElement, dir === 'rtl' ? left - (currentUl?.offsetWidth || 0) : left, top); + if (collide.includes('left') || collide.includes('right')) { + left = calculatePosition(lastSubmenu.currentTarget, dir === 'rtl' ? 'right' : 'left', 'top').left; + left = dir === 'rtl' ? left : left - (currentUl?.offsetWidth || 0); + } + if ((dir === 'rtl' && !collide.includes('right') && !collide.includes('left') )) { + left = left - (submenuRefs.current?.get(pathKey)?.offsetWidth || 0); + } + if (collide.includes('bottom')) { + const position: OffsetPosition = fit(currentUl, null, { X: false, Y: true }, + { top: top, left: left }) as OffsetPosition; + top = position.top; + } + const previousUlKey: string = openSubmenus.length > 1 ? openSubmenus[openSubmenus.length - 2].parentIndex.join('-') : ''; + const previousUl: HTMLElement = submenuRefs.current?.size === 1 ? + parentRef.current as HTMLElement : submenuRefs.current?.get(previousUlKey) as HTMLElement; + if (previousUl && !collide.includes('right')) { + const scrollBarWidth: number = previousUl.offsetWidth - previousUl.clientWidth; + if (scrollBarWidth > 5) { + left += dir === 'rtl' ? -scrollBarWidth : scrollBarWidth; + } + } + if (lastSubmenu.position.x !== left || lastSubmenu.position.y !== top) { + setOpenSubmenus((prev: SubmenuType[]) => prev.map((submenu: SubmenuType, index: number) => { + if (index === prev.length - 1) { + submenuRefs.current?.clear(); + return { + ...submenu, + position: { x: left, y: top }, positionChanged: true + }; + } + return submenu; + })); + } + else { + applyAnimation(currentUl); + } + } + }, [openSubmenus]); + + const closeMenu: () => void = () => { + setIsOpen(false); + setOpenSubmenus([]); + submenuRefs?.current?.clear(); + setFocusedItem({focusedItems: null, hoveredItems: null}); + }; + + const handleClickOutside: (event: MouseEvent) => void = (event: MouseEvent) => { + if (elementRef.current?.contains(event.target as Node)) { return; } + onClose?.(event); + if (onClose && open === true) { return; } + closeMenu(); + }; + + const processChild: (child: React.ReactNode) => MenuItemComponentProps | null = + (child: React.ReactNode): MenuItemComponentProps | null => { + if (!React.isValidElement(child) || child.type !== MenuItem) { return null; } + const { children: subChildren, text, id, icon, url, separator, disabled, ...restProps } = + child.props as MenuItemComponentProps; + const menuItem: MenuItemComponentProps = { text, id, icon, url, separator, disabled }; + if (subChildren) { + const validTemplateNodes: React.ReactNode[] | Function = typeof subChildren === 'function' ? subChildren : React.Children.toArray(subChildren).filter((subChild: React.ReactNode) => + React.isValidElement(subChild) && subChild.type !== MenuItem + ); + if (validTemplateNodes.length > 0) { + menuItem.children = typeof validTemplateNodes !== 'function' ? (validTemplateNodes.length === 1 ? validTemplateNodes[0] : validTemplateNodes) : validTemplateNodes; + } + const subItems: MenuItemComponentProps[] = React.Children.toArray(subChildren).map(processChild) + .filter(Boolean) as MenuItemComponentProps[]; + if (subItems.length > 0) { + menuItem.items = subItems; + } + } + if (Object.keys(restProps).length > 0) { + menuItem.htmlAttributes = restProps; + } + return menuItem; + }; + + const parseMenuItemChildren: (childrenNodes: React.ReactNode) => MenuItemProps[] = + (childrenNodes: React.ReactNode): MenuItemProps[] => { + if (!childrenNodes) { return items; } + const menuItems: MenuItemProps[] = React.Children.toArray(childrenNodes).map(processChild).filter(Boolean) as MenuItemProps[]; + return menuItems.length > 0 ? menuItems : items; + }; + + + const addMobileHeaderToNestedItems: (menuItems: MenuItemProps[]) => MenuItemProps[] + = (menuItems: MenuItemProps[]): MenuItemProps[] => { + if (!Browser.isDevice) { + return menuItems; + } + const processItems: (items: MenuItemProps[]) => MenuItemProps[] + = (items: MenuItemProps[]): MenuItemProps[] => { + return items.map((item: MenuItemComponentProps) => { + if (item.items && item.items.length > 0) { + const hasHeader: boolean = item.items.length > 0 && (item.items[0]?.icon as React.ReactElement)?.key === 'previous'; + let processedSubItems: MenuItemProps[] = item.items; + if (!hasHeader) { + const headerItem: MenuItemComponentProps = { + text: item.text, + children: item.children, + icon: previousIcon, + separator: false, + items: [] + }; + processedSubItems = [headerItem, ...item.items]; + } + processedSubItems = processItems(processedSubItems); + return { ...item, items: processedSubItems }; + } + return item; + }); + }; + return processItems(menuItems); + }; + + const handleSubmenuOpen: (parentIndexPath: number[], target: HTMLElement) => void = + (parentIndexPath: number[], target: HTMLElement) => { + if (!target || !parentRef.current) { return; } + let left: number = menuPosition.x; + let top: number = menuPosition.y; + if (!Browser.isDevice) { + const offset: OffsetPosition = calculatePosition(target, dir === 'rtl' ? 'left' : 'right', 'top'); + top = offset.top; + left = offset.left; + } + setOpenSubmenus((prev: SubmenuType[]) => [ + ...prev.filter((submenu: SubmenuType) => submenu.parentIndex.length < parentIndexPath.length) + .map((submenu: SubmenuType) => ({ ...submenu, isVisible: false })), + { parentIndex: parentIndexPath, position: { x: left, y: top }, isVisible: true, currentTarget: target, + positionChanged: false } + ]); + submenuRefs.current?.clear(); + }; + + const handleBackNavigation: () => void = () => { + if (openSubmenus.length < 1) { return; } + setOpenSubmenus((prev: SubmenuType[]) => { + const newSubmenus: SubmenuType[] = prev.filter((_: SubmenuType, index: number) => index !== prev.length - 1); + return newSubmenus.map((submenu: SubmenuType, index: number) => ({ + ...submenu, + isVisible: index === newSubmenus.length - 1 + })); + }); + submenuRefs.current?.clear(); + }; + + const applyAnimation: (targetElement: HTMLElement) => void = (targetElement: HTMLElement) => { + if (!targetElement) { return; } + if (animation == null || (animation.duration && animation.duration <= 0) || animation?.effect === 'None' || targetElement.style.visibility === 'visible') { + targetElement.style.visibility = 'visible'; + parentRef.current?.focus(); + return; + } + const animationRef: IAnimation = Animation({ + duration: animation.duration, + timingFunction: animation.easing, + name: animation.effect as Effect, + begin: (args?: AnimationOptions) => { + if ( args?.element) { + args.element.style.visibility = 'visible'; + if (animation.effect === 'SlideDown'){ + args.element.style.maxHeight = args.element.offsetHeight + 'px'; + args.element.style.overflow = 'hidden'; + } + } + }, + end: (args?: AnimationOptions) => { + if (args?.element) { + if (animation.effect === 'SlideDown') { + args.element.style.maxHeight = ''; + } + parentRef.current?.focus(); + } + } + }); + if (targetElement) { + animationRef.animate(targetElement); + } + }; + + const navigateToNextLevel: () => void = () => { + const currentFocusedItem: number[] | null = focusedItem?.focusedItems; + const itemsToOpen: MenuItemProps[] = currentFocusedItem ? getItemsByPath(currentFocusedItem) : []; + if (itemsToOpen.length === 0) { return; } + let nextIndex: number = 0; + while (nextIndex < itemsToOpen.length && (itemsToOpen[nextIndex as number].separator || + itemsToOpen[nextIndex as number].disabled)) { + nextIndex++; + } + if (nextIndex >= itemsToOpen.length) { return; } + setFocusedItem((prev: { focusedItems: number[] | null; hoveredItems?: number[] | null; }) => + ({focusedItems: [...currentFocusedItem as number[], nextIndex], hoveredItems: prev?.hoveredItems})); + let targetElement: HTMLElement; + if (openSubmenus.length > 0) { + const parentPath: number[] = currentFocusedItem?.slice(0, -1) as number[]; + targetElement = submenuRefs.current.get(parentPath.join('-'))?.children[currentFocusedItem?.[currentFocusedItem.length - 1] as number] as HTMLElement; + } + else { + targetElement = parentRef.current?.children[currentFocusedItem?.[0] as number] as HTMLElement; + } + openSubmenu(currentFocusedItem as number[], targetElement); + }; + + const openSubmenu: (parentIndexPath: number[], target: HTMLElement) => void = (parentIndexPath: number[], target: HTMLElement) => { + if (hoverTimeoutRef.current) { + clearTimeout(hoverTimeoutRef.current); + } + hoverTimeoutRef.current = window.setTimeout(() => { + handleSubmenuOpen(parentIndexPath, target); + }, hoverDelay); + }; + + const handleKeyDown: (e: React.KeyboardEvent) => void = (e: React.KeyboardEvent) => { + const key: string = e.key; + switch (key) { + case 'Escape': + if (openSubmenus.length > 0) { + handleBackNavigation(); + if (focusedItem.focusedItems && focusedItem.focusedItems.length > 1) { + setFocusedItem((prev: { focusedItems: number[] | null; hoveredItems?: number[] | null; }) => + ({focusedItems: prev?.focusedItems?.slice(0, -1) as number[], hoveredItems: prev?.hoveredItems})); + } + } else { + closeMenu(); + } + e.preventDefault(); + break; + + case 'Enter': + case ' ': { + const activeItems: MenuItemProps[] = openSubmenus.length > 0 + ? getItemsByPath(openSubmenus[openSubmenus.length - 1].parentIndex) : menuItemsRef.current; + const currentItem: MenuItemProps | undefined = focusedItem.focusedItems && focusedItem.focusedItems.length > 0 + ? activeItems[focusedItem.focusedItems[focusedItem.focusedItems.length - 1]] : undefined; + if (!currentItem?.items || currentItem.items.length === 0) { + onSelect?.({item: currentItem as MenuItemProps, event: e}); + closeMenu(); + return; + } + navigateToNextLevel(); + e.preventDefault(); + break; + } + + case 'ArrowUp': + e.preventDefault(); + navigateVertical(-1); + break; + + case 'ArrowDown': + e.preventDefault(); + navigateVertical(1); + break; + + case 'ArrowLeft': + e.preventDefault(); + if (focusedItem.focusedItems && focusedItem.focusedItems.length > 1) { + setFocusedItem((prev: { focusedItems: number[] | null; hoveredItems?: number[] | null; }) => + ({focusedItems: prev?.focusedItems?.slice(0, -1) as number[], hoveredItems: prev?.hoveredItems})); + } + if (openSubmenus.length > 0) { + handleBackNavigation(); + } + break; + + case 'ArrowRight': + e.preventDefault(); + navigateToNextLevel(); + break; + case 'Home': + e.preventDefault(); + navigateToPosition('first'); + break; + + case 'End': + e.preventDefault(); + navigateToPosition('last'); + break; + default: + if (key.length === 1 && /[a-zA-Z0-9]/.test(key)) { + e.preventDefault(); + navigateToPosition('character', key.toLowerCase()); + } + break; + } + }; + + const navigateToPosition: (type: 'first' | 'last' | 'character', char?: string) => void = + (type: 'first' | 'last' | 'character', char?: string) => { + const activeItems: MenuItemProps[] = openSubmenus.length > 0 ? + getItemsByPath(openSubmenus[openSubmenus.length - 1].parentIndex) : menuItemsRef.current; + if (!activeItems?.length) {return; } + const currentPath: number[] = openSubmenus.length > 0 ? [...(openSubmenus[openSubmenus.length - 1]?.parentIndex || [])] : + []; + const currentIndex: number = focusedItem?.focusedItems?.length === currentPath.length + 1 + ? focusedItem.focusedItems[focusedItem.focusedItems.length - 1] : -1; + + const isValidItem: (item: MenuItemProps) => boolean = (item: MenuItemProps): boolean => + item && !item.separator && !item.disabled; + + const matchesChar: (item: MenuItemProps, searchChar: string) => boolean = (item: MenuItemProps, searchChar: string): boolean => + (item.text && typeof item.text === 'string' && item.text.toLowerCase().startsWith(searchChar)) as boolean; + let targetIndex: number = -1; + switch (type) { + case 'first': + targetIndex = activeItems.findIndex(isValidItem); + break; + + case 'last': + targetIndex = activeItems.map((item: MenuItemProps, idx: number) => ({ item, idx })) + .reverse().find(( {item}: { item: MenuItemProps; } ) => isValidItem(item))?.idx ?? -1; + break; + + case 'character': + if (!char || typeof char !== 'string' || char.length !== 1) { return; } + + { + const startIndex: number = Math.max(0, currentIndex + 1); + const searchOrder: MenuItemProps[] = [ + ...activeItems.slice(startIndex), + ...activeItems.slice(0, startIndex) + ]; + const foundItem: MenuItemProps | undefined = searchOrder.find((item: MenuItemProps) => + isValidItem(item) && matchesChar(item, char) + ); + if (foundItem) { + targetIndex = activeItems.indexOf(foundItem); + } + } + break; + } + if (targetIndex >= 0) { + setFocusedItem?.((prev: { focusedItems: number[] | null; hoveredItems?: number[] | null; }) => ({ + focusedItems: [...currentPath, targetIndex], + hoveredItems: prev?.hoveredItems || null + })); + } + }; + + const navigateVertical: (direction: number) => void = (direction: number) => { + const activeItems: MenuItemProps[] = openSubmenus.length > 0 + ? getItemsByPath(openSubmenus[openSubmenus.length - 1].parentIndex) : menuItemsRef.current; + if (activeItems.length === 0) { return; } + const currentPath: number[] = openSubmenus.length > 0 ? [...openSubmenus[openSubmenus.length - 1].parentIndex] : []; + const currentIndex: number | null = focusedItem.focusedItems && (focusedItem.focusedItems.length === currentPath.length + 1) + ? focusedItem.focusedItems[focusedItem.focusedItems.length - 1] : null; + let nextIndex: number = currentIndex === null + ? (direction > 0 ? 0 : activeItems.length - 1) : (currentIndex + direction + activeItems.length) % activeItems.length; + let itemsChecked: number = 0; + while (nextIndex < activeItems.length && (activeItems[nextIndex as number].separator || + activeItems[nextIndex as number].disabled) && itemsChecked < activeItems.length) { + nextIndex = (nextIndex + direction + activeItems.length) % activeItems.length; + itemsChecked++; + } + if (itemsChecked >= activeItems.length) { return; } + setFocusedItem((prev: { focusedItems: number[] | null; hoveredItems?: number[] | null; }) => ({focusedItems: + [...currentPath, nextIndex], hoveredItems: prev?.hoveredItems})); + }; + + const getItemsByPath: (indexPath: number[]) => MenuItemProps[] = useCallback((indexPath: number[]) => { + return indexPath.reduce( + (currentItems: MenuItemProps[], subIndex: number) => currentItems[subIndex as number]?.items || [], menuItemsRef.current ); + }, []); + + const previousIcon: React.ReactNode = React.useMemo(() => , []); + + const getContent: (item: MenuItemProps) => React.ReactNode = (item: MenuItemProps) => { + if (itemTemplate) { + return (item as MenuItemComponentProps).children || itemTemplate(item); + } + return (<> + {item.icon && + {typeof item.icon !== 'string' && item.icon} + } + {(item as MenuItemComponentProps).children || item.text} + ); + }; + + const renderMenuItems: (menuItems: MenuItemProps[], parentIndexPath: number[]) => React.ReactNode = + (menuItems: MenuItemProps[], parentIndexPath: number[]) => { + return menuItems.map((item: MenuItemProps, index: number) => { + const currentIndexPath: number[] = [...parentIndexPath, index]; + const hasSubmenu: boolean = (item.items ? item.items.length > 0 : false); + const isDisabled: boolean = item.disabled === true; + const isHeaderItem: boolean = Browser.isDevice && (item.icon as React.ReactElement)?.key === 'previous'; + const { className, ...restAttributes } = item.htmlAttributes || {}; + const isFocused: boolean = currentIndexPath.join('-') === focusedItem.focusedItems?.join('-'); + const isHovered: boolean = currentIndexPath.join('-') === focusedItem.hoveredItems?.join('-'); + const isBlankIcon: boolean = !item.icon && menuItems.find((iconItem: MenuItemProps, iconIndex: number) => + iconIndex !== index && iconItem.icon) !== undefined; + const isSelected: boolean = openSubmenus.some((submenu: SubmenuType) => { + if (parentIndexPath.length === 0) { + return submenu.parentIndex[0] === index; + } + return ( + parentIndexPath.length === submenu.parentIndex.length - 1 && + submenu.parentIndex.slice(0, -1).join('-') === parentIndexPath.join('-') && + submenu.parentIndex[submenu.parentIndex.length - 1] === index + ); + }); + const itemClasses: string = [ + 'sf-menu-item', + item.separator && 'sf-separator', + isDisabled && 'sf-disabled', + isHeaderItem && 'sf-menu-header', + (isFocused || isHovered) && 'sf-focused', + isSelected && hasSubmenu && 'sf-selected', + isBlankIcon && 'sf-blank-icon', + className + ].filter(Boolean).join(' '); + + const handleMouseEnter: (e: React.MouseEvent) => void = + (e: React.MouseEvent): void => { + setFocusedItem((prev: { focusedItems: number[] | null; hoveredItems?: number[] | null; }) => + ({focusedItems: prev?.focusedItems, hoveredItems: currentIndexPath})); + if (!hasSubmenu) { + if (openSubmenus.length === currentIndexPath.length) { + handleBackNavigation(); + } + else if (openSubmenus.length > currentIndexPath.length) { + setOpenSubmenus(openSubmenus.slice(0, currentIndexPath.length - 1)); + submenuRefs?.current?.clear(); + } + return; + } + + if (!Browser.isDevice && hasSubmenu && !itemOnClick && !isDisabled) { + if (openSubmenus && openSubmenus.find((submenu: SubmenuType) => submenu.parentIndex.join('-') === currentIndexPath.join('-'))) { + return; + } + submenuRefs?.current?.clear(); + openSubmenu(currentIndexPath, e.currentTarget); + } + }; + + const handleItemClick: (e: React.MouseEvent) => void = + (e: React.MouseEvent): void => { + e.preventDefault(); + if (isDisabled) { return; } + if (isHeaderItem) { + handleBackNavigation(); + } else if (hasSubmenu) { + if (Browser.isDevice) { + handleSubmenuOpen(currentIndexPath, e.currentTarget as HTMLElement); + } else if (itemOnClick) { + openSubmenu(currentIndexPath, e.currentTarget); + } + } else { + onSelect?.({item: item, event: e}); + onClose?.(e as unknown as Event); + if (onClose && open === true) { return; } + closeMenu(); + } + }; + + return ( + } + attributes={restAttributes} + /> + ); + }); + }; + + const renderSubmenus: () => React.ReactNode = () => { + return openSubmenus.map(({ parentIndex, position, isVisible }: SubmenuType) => { + const submenuItems: MenuItemProps[] = getItemsByPath(parentIndex); + const pathKey: string = parentIndex.join('-'); + return ( +
      { + if (el && submenuRefs.current) { submenuRefs.current.set(pathKey, el); } + }} + className={'sf-menu-parent sf-ul'} + style={{ left: position.x, top: position.y, display: Browser.isDevice && !isVisible ? 'none' : 'block', visibility: 'hidden' }} + tabIndex={0} + role="menu" + > + {renderMenuItems(submenuItems, parentIndex)} +
    + ); + }); + }; + + const rootClassName: string = React.useMemo(() => { + return [ + 'sf-contextmenu-wrapper', + dir === 'rtl' ? 'sf-rtl' : '', + className + ].filter(Boolean).join(' '); + }, [dir]); + const portalContainer: HTMLElement | null = typeof document !== 'undefined' ? document.body : null; + if (!portalContainer) { + return null; + } + + return (<> + {isOpen && createPortal( +
    +
      0 ? 'none' : 'block', + visibility: 'hidden' + }} + role="menu" + tabIndex={0} + ref={parentRef} + > + {(menuItemsRef.current && menuItemsRef.current.length > 0) && renderMenuItems(menuItemsRef.current, [])} +
    + {renderSubmenus()} +
    + , + portalContainer + )} + ); + }); + +export default ContextMenu; diff --git a/components/navigations/src/contextMenu/index.ts b/components/navigations/src/contextMenu/index.ts new file mode 100644 index 0000000..48de5b7 --- /dev/null +++ b/components/navigations/src/contextMenu/index.ts @@ -0,0 +1 @@ +export * from './context-menu'; diff --git a/components/navigations/src/index.ts b/components/navigations/src/index.ts new file mode 100644 index 0000000..eb52c10 --- /dev/null +++ b/components/navigations/src/index.ts @@ -0,0 +1,3 @@ +export * from './common'; +export * from './toolbar'; +export * from './contextMenu'; diff --git a/components/navigations/src/toolbar/index.ts b/components/navigations/src/toolbar/index.ts new file mode 100644 index 0000000..3471764 --- /dev/null +++ b/components/navigations/src/toolbar/index.ts @@ -0,0 +1,7 @@ +/** + * Toolbar modules + */ +export * from './toolbar'; +export * from './toolbar-item'; +export * from './toolbar-separator'; +export * from './toolbar-spacer'; diff --git a/components/navigations/src/toolbar/toolbar-item.tsx b/components/navigations/src/toolbar/toolbar-item.tsx new file mode 100644 index 0000000..e988616 --- /dev/null +++ b/components/navigations/src/toolbar/toolbar-item.tsx @@ -0,0 +1,66 @@ +import { + forwardRef, useImperativeHandle, useRef, HTMLAttributes, useMemo, memo, + RefObject, Ref, ForwardRefExoticComponent, RefAttributes +} from 'react'; + +const CLS_ITEM: string = 'sf-toolbar-item'; + +export interface IToolbarItem { + /** + * Toolbar item element. + * + * @default null + */ + element?: HTMLElement | null; +} + +type IToolbarItemProps = IToolbarItem & HTMLAttributes; + +/** + * The ToolbarItem component allows for the rendering of individual items within a Toolbar. + * + * ```typescript + * + * + * + * + * + * ``` + */ +export const ToolbarItem: ForwardRefExoticComponent> = memo(forwardRef< +IToolbarItem, IToolbarItemProps +>((props: IToolbarItemProps, ref: Ref) => { + const { + className = '', + children, + ...eleAttr + } = props; + + const itemRef: RefObject = useRef(null); + + const classes: string = useMemo(() => { + const classes: string[] = [CLS_ITEM]; + if (className) { + classes.push(className); + } + return classes.join(' '); + }, [className]); + + useImperativeHandle(ref, () => { + return { + element: itemRef.current + }; + }); + + return ( +
    + {children} +
    + ); +})); +ToolbarItem.displayName = 'ToolbarItem'; +export default ToolbarItem; diff --git a/components/navigations/src/toolbar/toolbar-multi-row.tsx b/components/navigations/src/toolbar/toolbar-multi-row.tsx new file mode 100644 index 0000000..97a7f55 --- /dev/null +++ b/components/navigations/src/toolbar/toolbar-multi-row.tsx @@ -0,0 +1,49 @@ +import { FC, memo, HTMLAttributes, useEffect, useRef, RefObject, Children } from 'react'; +import { isNullOrUndefined } from '@syncfusion/react-base'; + +const CLS_ITEMS: string = 'sf-toolbar-items'; +const CLS_MULTIROW: string = 'sf-toolbar-multirow'; + +export interface ToolbarMultiRowProps { + /** + * Callback function that is triggered to handle keyboard interactions with the toolbar. + * + * This is called after the component mounts to set up proper keyboard navigation + * for toolbar items. + */ + onOverflowChange: () => void; +} + +type IToolbarMultiRowProps = ToolbarMultiRowProps & HTMLAttributes; + +/** + * ToolbarMultiRow component that renders toolbar items in multiple rows. + * + * This component allows toolbar items to wrap to the next line when they exceed + * the available horizontal space, providing better space utilization and + * responsive behavior for toolbars with many items. + */ +const ToolbarMultiRow: FC = memo((props: IToolbarMultiRowProps) => { + const { + children, + onOverflowChange + } = props; + + const previousChildrenCountRef: RefObject = useRef(null); + + useEffect(() => { + const currentCount: number = Children.count(children); + if (isNullOrUndefined(previousChildrenCountRef.current) || previousChildrenCountRef.current !== currentCount) { + previousChildrenCountRef.current = Children.count(children); + onOverflowChange(); + } + }, [onOverflowChange, children]); + + return ( +
    + {children} +
    + ); +}); +ToolbarMultiRow.displayName = 'ToolbarMultiRow'; +export { ToolbarMultiRow }; diff --git a/components/navigations/src/toolbar/toolbar-popup.tsx b/components/navigations/src/toolbar/toolbar-popup.tsx new file mode 100644 index 0000000..7b5b7ee --- /dev/null +++ b/components/navigations/src/toolbar/toolbar-popup.tsx @@ -0,0 +1,621 @@ +import { + useRef, HTMLAttributes, useMemo, RefObject, useCallback, useEffect, useLayoutEffect, useState, Children, isValidElement, ReactNode, + cloneElement, ReactElement, CSSProperties, ForwardRefExoticComponent, RefAttributes, memo, forwardRef, Ref, useImperativeHandle +} from 'react'; +import { ChevronUp, ChevronDown } from '@syncfusion/react-icons'; +import { isVisible, closest, useProviderContext } from '@syncfusion/react-base'; +import { Popup, IPopup, CollisionType } from '@syncfusion/react-popups'; +import { OverflowMode, Orientation } from './toolbar'; +import { ToolbarItem, IToolbarItem } from './toolbar-item'; +import { ToolbarSeparator, IToolbarSeparator } from './toolbar-separator'; +import { ToolbarSpacer, IToolbarSpacer } from './toolbar-spacer'; + +const CLS_ITEMS: string = 'sf-toolbar-items'; +const CLS_POPUPICON: string = 'sf-popup-up-icon'; +const CLS_POPUPDOWN: string = 'sf-popup-down-icon'; +const CLS_POPUPOPEN: string = 'sf-popup-open'; +const CLS_POPUPNAV: string = 'sf-hor-nav'; +const CLS_TBARNAVACT: string = 'sf-nav-active'; +const CLS_POPUPCLASS: string = 'sf-toolbar-pop'; +const CLS_HIDDEN_POPUP: string = 'sf-hidden-popup'; +const CLS_EXTENDABLE_CLASS: string = 'sf-toolbar-extended'; +const CLS_EXTENDPOPUP: string = 'sf-extended-nav'; +const CLS_OVERFLOW: string = 'sf-popup-overflow'; +const CLS_SEPARATOR: string = 'sf-separator'; +const CLS_SPACER: string = 'sf-spacer'; +const CLS_ITEM: string = 'sf-toolbar-item'; + +/** + * Specifies the props for the ToolbarPopup component. + */ +export interface ToolbarPopupProps { + /** + * Specifies the reference to the toolbar element. + * Used to access the toolbar DOM element for measurements and positioning. + * + * @default null + */ + toolbarRef: RefObject; + + /** + * Specifies the layout direction of toolbar items. + * + * The possible values are: + * - Horizontal: Arranges Toolbar items in a row from left to right. + * - Vertical: Stacks Toolbar items in a column from top to bottom. + * + * @default Orientation.Horizontal + */ + orientation: Orientation; + + /** + * Specifies whether the Toolbar reference is ready. + * This property indicates if the toolbar element has been properly initialized. + * + * @default false + */ + isToolbarRefReady: boolean; + + /** + * Specifies the Toolbar display mode for overflow content. + * This property determines how overflowing items are handled (Popup or Extended). + * + * @default OverflowMode.Popup + */ + overflowMode: OverflowMode; + + /** + * Specifies whether popups adjust their position to avoid overlapping with other elements. + * This property is applicable only when in `Popup` mode. + * + * @default true + */ + collision?: boolean; + + /** + * Specifies the visibility state of the popup externally. + * When true, the popup is displayed; otherwise, it's hidden. + * + * @default false + */ + isPopupVisible: boolean; + + /** + * Specifies the callback function triggered when the popup's open/close state changes. + * This function is called with the updated state whenever the popup visibility changes. + * + * @param isOpen boolean value indicating whether the popup is open (true) or closed (false) + */ + onPopupOpenChange: (isOpen: boolean) => void; + + /** + * Specifies the callback function triggered when the overflow state changes. + * This function is called to set up proper keyboard navigation for toolbar items. + */ + onOverflowChange: () => void; +} + +/** + * Specifies the reference interface for the ToolbarPopup component. + */ +export interface ToolbarPopupRef { + /** + * Specifies the method to refresh the overflow calculation for popup toolbar items. + * This method recalculates which items should be visible in the toolbar + * and which should be moved to the popup based on current dimensions and content. + */ + refreshOverflow: () => void; +} + +type IToolbarPopupProps = ToolbarPopupProps & HTMLAttributes; +type IToolbarSeparatorProps = IToolbarSeparator & HTMLAttributes; +type IToolbarSpacerProps = IToolbarSpacer & HTMLAttributes; +type IToolbarItemProps = IToolbarItem & HTMLAttributes; +type IToolbarItems = ReactElement; + +/** + * ToolbarPopup component that renders the overflowing toolbar items in the popup. + * + * This component manages the display of toolbar items that don't fit in the available space + * by moving them to a popup. It supports both Popup and Extended overflow modes and + * automatically calculates which items should be visible in the toolbar and which should + * be moved to the popup based on available space. + */ +const ToolbarPopup: ForwardRefExoticComponent> = memo(forwardRef< +ToolbarPopupRef, IToolbarPopupProps +>((props: IToolbarPopupProps, ref: Ref) => { + const { + toolbarRef, + orientation, + overflowMode, + isToolbarRefReady, + children, + className, + collision, + isPopupVisible, + onPopupOpenChange, + onOverflowChange + } = props; + + const getItems: (items: ReactNode) => IToolbarItems[] = useCallback((items: ReactNode): IToolbarItems[] => { + return Children.toArray(items) + .filter((child: ReactNode): child is IToolbarItems => + isValidElement(child) && (child.type === ToolbarItem || child.type === ToolbarSeparator || child.type === ToolbarSpacer) + ) + .map((child: IToolbarItems, index: number) => + cloneElement(child, { key: child.key || index }) + ); + }, []); + + const resizeObserverRef: RefObject = useRef(null); + const previousChildrenCountRef: RefObject = useRef(Children.count(children)); + const itemsRef: RefObject = useRef(getItems(children)); + const toolbarItemsRef: RefObject = useRef([...itemsRef.current]); + const popupItemsRef: RefObject = useRef([]); + const popupNavRef: RefObject = useRef(null); + const popupRef: RefObject = useRef(null); + + const { dir }: { dir: string } = useProviderContext(); + + const [toolbarItems, setToolbarItems] = useState([...toolbarItemsRef.current]); + const [popupItems, setPopupItems] = useState([]); + const [hasInitialRenderCompleted, setHasInitialRenderCompleted] = useState(false); + const [isPopupOpen, setIsPopupOpen] = useState(isPopupVisible); + const [isPopupRefresh, setIsPopupRefresh] = useState(false); + const [popupStyles, setPopupStyles] = useState({ maxHeight: '' }); + + const getEleWidth: (item: HTMLElement | null) => number = useCallback((item: HTMLElement | null): number => { + let width: number = 0; + if (item) { + width = orientation === Orientation.Vertical ? item.offsetHeight : item.offsetWidth; + } + return width; + }, [orientation]); + + const getEleLeft: (item: HTMLElement | null) => number = useCallback((item: HTMLElement | null): number => { + let width: number = 0; + if (item) { + width = orientation === Orientation.Vertical ? item.offsetTop : item.offsetLeft; + } + return width; + }, [orientation]); + + const getPopupNavOffset: () => number = useCallback((): number => { + if (popupNavRef.current) { + return getEleWidth(popupNavRef.current); + } + return orientation === Orientation.Horizontal ? 40 : 48; + }, [getEleWidth, orientation]); + + const getElementOffsetY: () => number = useCallback((): number => { + return toolbarRef.current ? toolbarRef.current.offsetHeight : 0; + }, [overflowMode]); + + const getToolbarPopupWidth: () => number = useCallback((): number => { + let toolbarWidth: number = 0; + if (toolbarRef.current) { + const computedStyle: CSSStyleDeclaration = window.getComputedStyle(toolbarRef.current); + const width: number = parseFloat(computedStyle.width); + const borderRightWidth: number = parseFloat(computedStyle.borderRightWidth); + toolbarWidth = width + (borderRightWidth * 2); + } + return toolbarWidth; + }, []); + + const onPopupOpen: () => void = useCallback((): void => { + if (toolbarRef.current && popupRef.current?.element) { + const popupElement: HTMLElement = popupRef.current.element; + const toolbarElement: HTMLElement | null = toolbarRef.current; + const popupElementPos: number = popupElement.offsetTop + popupElement.offsetHeight + + (toolbarElement.getBoundingClientRect().top || 0); + const scrollVal: number = window.scrollY || 0; + if (orientation === Orientation.Horizontal && (window.innerHeight + scrollVal) < popupElementPos && + toolbarElement.offsetTop < popupElement.offsetHeight && overflowMode === OverflowMode.Popup) { + let overflowHeight: number = (popupElement.offsetHeight - ((popupElementPos - window.innerHeight - scrollVal) + 5)); + for (let i: number = 0; i < popupElement.childElementCount; i++) { + const ele: HTMLElement = popupElement.children[parseInt(i.toString(), 10)] as HTMLElement; + if (ele.offsetTop + ele.offsetHeight > overflowHeight) { + overflowHeight = ele.offsetTop; + break; + } + } + setPopupStyles((prevStyles: CSSProperties) => ({ ...prevStyles, maxHeight: `${overflowHeight}px` })); + } else if (orientation === Orientation.Vertical) { + const tbEleData: DOMRect = toolbarElement.getBoundingClientRect(); + setPopupStyles((prevStyles: CSSProperties) => ({ + ...prevStyles, + maxHeight: `${tbEleData.top + toolbarElement.offsetHeight}px`, + bottom: '0' + })); + } + } + }, [overflowMode, orientation]); + + const onPopupClose: () => void = useCallback((): void => { + setIsPopupOpen(false); + setPopupStyles({ maxHeight: '' }); + }, []); + + const updateOverflowItems: (itemsElement: HTMLElement | null) => void = useCallback((itemsElement: HTMLElement | null): void => { + if (toolbarRef.current && itemsElement && isVisible(toolbarRef.current)) { + const toolbarItemsData: IToolbarItems[] = [...toolbarItems]; + const popupItemsData: IToolbarItems[] = [...popupItems]; + const items: HTMLElement[] = Array.from(itemsElement.children) as HTMLElement[]; + const toolbarWidth: number = getEleWidth(toolbarRef.current); + const computedStyle: CSSStyleDeclaration = window.getComputedStyle(itemsElement); + const padding: number = parseInt(orientation === Orientation.Vertical ? + computedStyle.paddingTop : computedStyle.paddingLeft, 10); + + if (dir === 'rtl' && orientation === Orientation.Horizontal) { + const itemsGap: number = parseInt(computedStyle.gap, 10) || 0; + const totalItems: number = items.length; + let totalRequiredWidth: number = 0; + + items.forEach((item: HTMLElement) => { + totalRequiredWidth += getEleWidth(item); + }); + + totalRequiredWidth += (padding * 2) + (itemsGap * (totalItems - 1)); + + const isOverflow: boolean = totalRequiredWidth > toolbarWidth; + const popupNavWidth: number = popupItemsData.length > 0 || isOverflow ? getPopupNavOffset() : 0; + const availableToolbarWidth: number = toolbarWidth - popupNavWidth; + + if (totalRequiredWidth > availableToolbarWidth) { + let requiredWidth: number = totalRequiredWidth; + + for (let i: number = totalItems - 1; i >= 0; i--) { + const item: HTMLElement = items[parseInt(i.toString(), 10)]; + + if (requiredWidth > availableToolbarWidth || item.classList.contains(CLS_SEPARATOR)) { + const itemWidth: number = getEleWidth(item); + requiredWidth -= (itemWidth + ((i === 0) ? 0 : itemsGap)); + + popupItemsData.unshift(toolbarItemsData[parseInt(i.toString(), 10)]); + toolbarItemsData.pop(); + } else { + break; + } + } + } + } else { + let itemWidth: number = getEleWidth(items[items.length - 1]); + let itemLeft: number = getEleLeft(items[items.length - 1]); + const isOverflow: boolean = itemLeft + itemWidth + padding > toolbarWidth; + const popupNavWidth: number = popupItemsData.length > 0 || isOverflow ? getPopupNavOffset() : 0; + const availableWidth: number = toolbarWidth - popupNavWidth; + + for (let i: number = items.length - 1; i >= 0; i--) { + const item: HTMLElement = items[parseInt(i.toString(), 10)]; + itemWidth = getEleWidth(item); + itemLeft = getEleLeft(item); + const isItemOverflow: boolean = (itemLeft + itemWidth + padding > availableWidth); + + if (isItemOverflow || item.classList.contains(CLS_SEPARATOR)) { + popupItemsData.unshift(toolbarItemsData[parseInt(i.toString(), 10)]); + toolbarItemsData.pop(); + } else { + break; + } + } + } + toolbarItemsRef.current = toolbarItemsData; + popupItemsRef.current = popupItemsData; + } + }, [orientation, getEleWidth, getEleLeft, getPopupNavOffset, toolbarItems, popupItems, dir]); + + const setItems: () => void = useCallback((): void => { + if (toolbarItems !== toolbarItemsRef.current) { + setToolbarItems((prev: IToolbarItems[]) => prev.length !== toolbarItemsRef.current.length ? + [...toolbarItemsRef.current] : prev + ); + setPopupItems((prev: IToolbarItems[]) => prev.length !== popupItemsRef.current.length ? [...popupItemsRef.current] : prev); + } + }, [toolbarItems]); + + const resize: () => void = useCallback((): void => { + if (toolbarRef.current && !isPopupRefresh) { + const toolbarItems: HTMLElement = toolbarRef.current.querySelector(`.${CLS_ITEMS}`) as HTMLElement; + if (overflowMode === OverflowMode.Popup) { + setIsPopupOpen((prevState: boolean) => prevState ? false : prevState); + } + updateOverflowItems(toolbarItems); + setItems(); + setIsPopupRefresh(popupItemsRef.current.length > 0 ? true : false); + } + }, [updateOverflowItems, isPopupRefresh, setItems, overflowMode]); + + const resizeRef: RefObject<() => void> = useRef<() => void>(resize); + + useLayoutEffect(() => { + resizeRef.current = resize; + }, [resize]); + + const getItemsWidth: (itemsElement: HTMLElement) => number = useCallback((itemsElement: HTMLElement): number => { + let totalWidth: number = 0; + if (itemsElement) { + const items: HTMLElement[] = Array.from(itemsElement.children) as HTMLElement[]; + const computedStyle: CSSStyleDeclaration = window.getComputedStyle(itemsElement); + const itemsGap: number = parseInt(computedStyle.gap, 10) || 0; + const itemPadding: number = + parseInt((orientation === Orientation.Vertical ? computedStyle.paddingTop : computedStyle.paddingLeft), 10); + + items.forEach((item: HTMLElement) => { + totalWidth += (item.classList.contains(CLS_SPACER) ? 0 : getEleWidth(item)) + itemsGap; + }); + + if (items.length > 0) { + totalWidth -= itemsGap; + } + totalWidth += (itemPadding * 2); + } + return totalWidth; + }, [getEleWidth, orientation]); + + const popupEleRefresh: (availableSpace: number, popup: HTMLElement) => void = useCallback(( + availableSpace: number, popup: HTMLElement + ): void => { + const popupItemElements: HTMLElement[] = [].slice.call(popup.querySelectorAll(`.${CLS_ITEM}`)); + const toolbarItemsData: IToolbarItems[] = [...toolbarItems]; + const popupItemsData: IToolbarItems[] = [...popupItems]; + const itemsElement: HTMLElement = toolbarRef.current?.querySelector(`.${CLS_ITEMS}`) as HTMLElement; + const itemsGap: number = parseInt(window.getComputedStyle(itemsElement).gap, 10) || 0; + + for (let i: number = 0; i < popupItemElements.length; i++) { + const item: HTMLElement = popupItemElements[parseInt(i.toString(), 10)]; + const isSpacer: boolean = item.classList.contains(CLS_SPACER); + const hasToolbarItems: boolean = toolbarItemsData.length > 0; + const itemWidth: number = (isSpacer ? 0 : getEleWidth(item)) + (hasToolbarItems ? itemsGap : 0); + let isSpaceAvailable: boolean = availableSpace > itemWidth; + + if (isSpacer || item.classList.contains(CLS_SEPARATOR)) { + let nextItemWidth: number = itemWidth; + let j: number = i + 1; + + while (j < popupItemElements.length) { + const nextItem: HTMLElement = popupItemElements[parseInt(j.toString(), 10)]; + const isNextSpacer: boolean = nextItem.classList.contains(CLS_SPACER); + nextItemWidth += (isNextSpacer ? 0 : getEleWidth(nextItem)) + (hasToolbarItems ? itemsGap : 0); + + if (!nextItem.classList.contains(CLS_SPACER) && !nextItem.classList.contains(CLS_SEPARATOR)) { + break; + } + j++; + } + + isSpaceAvailable = availableSpace > nextItemWidth; + } + + if (isSpaceAvailable) { + toolbarItemsData.push(popupItemsData[0]); + popupItemsData.shift(); + availableSpace -= itemWidth; + } else { + break; + } + } + toolbarItemsRef.current = toolbarItemsData; + popupItemsRef.current = popupItemsData; + }, [getEleWidth, toolbarItems, popupItems]); + + const popupRefresh: () => void = useCallback((): void => { + if (toolbarRef.current && popupRef.current?.element) { + const itemsElement: HTMLElement = toolbarRef.current.querySelector(`.${CLS_ITEMS}`) as HTMLElement; + const itemsElementWidth: number = getEleWidth(itemsElement); + const itemsWidth: number = getItemsWidth(itemsElement); + const availableSpace: number = itemsElementWidth - itemsWidth; + const itemsGap: number = parseInt(window.getComputedStyle(itemsElement).gap, 10) || 0; + const popupItemWidth: number = getEleWidth(popupRef.current.element.querySelector(`.${CLS_ITEM}`)) + itemsGap; + const isSpaceAvailable: boolean = availableSpace > popupItemWidth; + + const popupElements: HTMLElement[] = [].slice.call(popupRef.current.element.querySelectorAll(`.${CLS_ITEM}`)); + let popupItemsWidth: number = 0; + popupElements.forEach((item: HTMLElement) => { + popupItemsWidth += item.classList.contains(CLS_SPACER) ? 0 : getEleWidth(item); + }); + popupItemsWidth += (popupElements.length * itemsGap); + const isResetToDefault: boolean = (availableSpace + getPopupNavOffset()) > popupItemsWidth; + + if (isResetToDefault) { + toolbarItemsRef.current = [...itemsRef.current]; + popupItemsRef.current = []; + } else if (isSpaceAvailable) { + popupEleRefresh(availableSpace, popupRef.current.element); + } + } + }, [getEleWidth, getItemsWidth, popupEleRefresh]); + + const onPopupClick: () => void = useCallback((): void => { + if (overflowMode === OverflowMode.Popup && isPopupOpen) { + setIsPopupOpen(false); + } + }, [overflowMode, isPopupOpen]); + + const onPopupNavClick: () => void = (): void => { + setIsPopupOpen((prev: boolean) => !prev); + }; + + const refreshOverflow: () => void = useCallback(() => { + resize(); + }, [resize]); + + useEffect(() => { + if (overflowMode === OverflowMode.Popup || overflowMode === OverflowMode.Extended) { + const closePopup: (event: Event) => void = (event: Event): void => { + if (overflowMode === OverflowMode.Popup && popupRef.current && popupRef.current.element) { + const isNotPopup: boolean = !closest(event.target as Element, '.sf-popup'); + const isOpen: boolean = popupRef.current.element.classList.contains(CLS_POPUPOPEN); + if (isNotPopup && isOpen) { + setIsPopupOpen(false); + } + } + }; + document.addEventListener('click', closePopup); + document.addEventListener('scroll', closePopup, true); + + return () => { + document.removeEventListener('click', closePopup); + document.removeEventListener('scroll', closePopup, true); + }; + } + return undefined; + }, [overflowMode]); + + useEffect(() => { + onPopupOpenChange(isPopupOpen); + }, [isPopupOpen, onPopupOpenChange]); + + useEffect(() => { + setIsPopupOpen((prev: boolean) => prev !== isPopupVisible ? isPopupVisible : prev); + }, [isPopupVisible]); + + useEffect(() => { + onOverflowChange(); + }, [toolbarItems, onOverflowChange]); + + useLayoutEffect(() => { + if (toolbarRef.current && isToolbarRefReady && !hasInitialRenderCompleted) { + resizeRef.current(); + setHasInitialRenderCompleted(true); + } + }, [isToolbarRefReady, hasInitialRenderCompleted]); + + useEffect(() => { + if (toolbarRef.current) { + let isFirstObservation: boolean = true; + + if (!resizeObserverRef.current) { + resizeObserverRef.current = new ResizeObserver(() => { + if (isFirstObservation) { + isFirstObservation = false; + return; + } + resizeRef.current(); + }); + resizeObserverRef.current.observe(toolbarRef.current); + } + + return () => { + resizeObserverRef.current?.disconnect(); + resizeObserverRef.current = null; + }; + } + return undefined; + }, []); + + useLayoutEffect(() => { + if (isPopupRefresh) { + popupRefresh(); + setItems(); + setIsPopupOpen((prev: boolean) => prev && popupItemsRef.current.length <= 0 ? false : prev); + setIsPopupRefresh(false); + } + }, [isPopupRefresh, popupRefresh, setItems]); + + useLayoutEffect(() => { + const currentCount: number = Children.count(children); + if (hasInitialRenderCompleted && previousChildrenCountRef.current !== currentCount) { + previousChildrenCountRef.current = Children.count(children); + itemsRef.current = getItems(children); + toolbarItemsRef.current = [...itemsRef.current]; + popupItemsRef.current = []; + setToolbarItems([...itemsRef.current]); + setPopupItems([]); + setIsPopupOpen(false); + setHasInitialRenderCompleted(false); + } + }, [children, hasInitialRenderCompleted, getItems]); + + useImperativeHandle(ref, () => ({ + refreshOverflow + }), [refreshOverflow]); + + const classes: string = useMemo(() => { + const classArray: string[] = [CLS_ITEMS]; + if (popupItems.length > 0) { + classArray.push(CLS_OVERFLOW); + } + return classArray.join(' '); + }, [popupItems]); + + const popupNavClasses: string = useMemo(() => { + const classArray: string[] = [CLS_POPUPNAV]; + if (overflowMode === OverflowMode.Extended) { + classArray.push(CLS_EXTENDPOPUP); + } + if (isPopupOpen) { + classArray.push(CLS_TBARNAVACT); + } + return classArray.join(' '); + }, [overflowMode, isPopupOpen]); + + const popupClasses: string = useMemo(() => { + const classArray: string[] = [CLS_POPUPCLASS]; + if (overflowMode === OverflowMode.Extended) { + classArray.push(CLS_EXTENDABLE_CLASS); + } + if (className) { + classArray.push(className); + } + if (isPopupRefresh) { + classArray.push(CLS_HIDDEN_POPUP); + } + return classArray.join(' '); + }, [overflowMode, className, isPopupRefresh]); + + return ( + <> +
    + {toolbarItems} +
    + { + (popupItems.length > 0) && +
    +
    + {isPopupOpen ? : } +
    +
    + } + { + popupItems.length > 0 && + + { + popupItems + } + + } + + ); +})); +ToolbarPopup.displayName = 'ToolbarPopup'; +export { ToolbarPopup }; diff --git a/components/navigations/src/toolbar/toolbar-scrollable.tsx b/components/navigations/src/toolbar/toolbar-scrollable.tsx new file mode 100644 index 0000000..d94e2d3 --- /dev/null +++ b/components/navigations/src/toolbar/toolbar-scrollable.tsx @@ -0,0 +1,216 @@ +import { + useRef, HTMLAttributes, useState, memo, useMemo, RefObject, useCallback, + forwardRef, Ref, useImperativeHandle, ForwardRefExoticComponent, RefAttributes, + useEffect, Children +} from 'react'; +import { isVisible, isNullOrUndefined } from '@syncfusion/react-base'; +import { Orientation } from './toolbar'; +import { HScroll, VScroll } from '../common/index'; + +const CLS_ITEMS: string = 'sf-toolbar-items'; +const CLS_HSCROLLBAR: string = 'sf-hscroll-bar'; +const CLS_VSCROLLBAR: string = 'sf-vscroll-bar'; +const CLS_HSCROLLCNT: string = 'sf-hscroll-content'; +const CLS_VSCROLLCNT: string = 'sf-vscroll-content'; + +/** + * Specifies the props for the ToolbarScrollable component. + */ +export interface ToolbarScrollableProps { + /** + * Specifies the reference to the toolbar element. + * Used to access the toolbar DOM element for measurements and manipulation. + * + * @default null + */ + toolbarRef: RefObject; + + /** + * Specifies the layout direction of toolbar items. + * + * The possible values are: + * - Horizontal: Arranges Toolbar items in a row from left to right. + * - Vertical: Stacks Toolbar items in a column from top to bottom. + * + * @default Orientation.Horizontal + */ + orientation: Orientation; + + /** + * Specifies the scrolling distance in pixels when the toolbar items overflow in Scrollable mode. + * This property controls how far items scroll when navigation buttons are clicked. + * + * @default undefined + */ + scrollStep?: number; + + /** + * Specifies the callback function triggered when the overflow state changes. + * This function is called to set up proper keyboard navigation for toolbar items. + */ + onOverflowChange: () => void; +} + +/** + * Specifies the reference interface for the ToolbarScrollable component. + */ +export interface ToolbarScrollableRef { + /** + * Specifies the method to refresh the overflow calculation for scrollable toolbar items. + * This method recalculates the scrollable area and updates the visibility + * of scroll buttons based on current dimensions and content. + */ + refreshOverflow: () => void; +} + +type IToolbarScrollableProps = ToolbarScrollableProps & HTMLAttributes; + +/** + * ToolbarScrollable component that renders toolbar items with scrolling capability. + * + * This component manages the display of toolbar items that don't fit in the available space + * by providing horizontal or vertical scrolling functionality. It automatically detects + * when content overflows and renders appropriate scroll controls based on the toolbar's + * orientation. + */ +const ToolbarScrollable: ForwardRefExoticComponent> = memo(forwardRef< +ToolbarScrollableRef, IToolbarScrollableProps +>((props: IToolbarScrollableProps, ref: Ref) => { + const { + toolbarRef, + orientation, + scrollStep, + children, + className, + onOverflowChange + } = props; + + const resizeObserverRef: RefObject = useRef(null); + const previousChildrenCountRef: RefObject = useRef(null); + const resizeTimerRef: RefObject = useRef(null); + + const [isOverflow, setIsOverflow] = useState(false); + const [activeScrollStep, setActiveScrollStep] = useState(scrollStep); + + const getScrollCntEle: (itemsElement: HTMLElement) => HTMLElement = useCallback((itemsElement: HTMLElement): HTMLElement => { + return itemsElement.querySelector('.' + (orientation === Orientation.Vertical ? CLS_VSCROLLCNT : CLS_HSCROLLCNT)) as HTMLElement; + }, [orientation]); + + const checkOverflow: () => boolean = useCallback((): boolean => { + let itemsOverflowing: boolean = false; + if (toolbarRef.current && isVisible(toolbarRef.current)) { + let itemsElement: HTMLElement = toolbarRef.current.querySelector(`.${CLS_ITEMS}`) as HTMLElement; + itemsElement = isOverflow ? getScrollCntEle(itemsElement) : itemsElement; + const isVertical: boolean = orientation === Orientation.Vertical; + const toolbarWidth: number = isVertical ? toolbarRef.current.offsetHeight : toolbarRef.current.offsetWidth; + const itemsWidth: number = isVertical ? itemsElement.scrollHeight : itemsElement.scrollWidth; + + if (itemsWidth > toolbarWidth) { + itemsOverflowing = true; + } + else { + itemsOverflowing = false; + } + } + return itemsOverflowing; + }, [isOverflow, orientation, getScrollCntEle]); + + const resize: (updateScrollStep?: boolean) => void = useCallback((updateScrollStep: boolean = true): void => { + if (toolbarRef.current) { + if (resizeTimerRef.current) { + clearTimeout(resizeTimerRef.current); + } + const isOverflowing: boolean = checkOverflow(); + if (isOverflowing !== isOverflow) { + setIsOverflow(isOverflowing); + } + + if (isOverflowing && updateScrollStep) { + resizeTimerRef.current = window.setTimeout(() => { + if (toolbarRef.current) { + const selector: string = orientation === Orientation.Vertical ? `.${CLS_VSCROLLBAR}` : `.${CLS_HSCROLLBAR}`; + const scrollBar: HTMLElement = toolbarRef.current.querySelector(selector) as HTMLElement; + if (scrollBar) { + setActiveScrollStep(orientation === Orientation.Vertical ? scrollBar.offsetHeight : scrollBar.offsetWidth); + } + } + }, 500); + } + } + }, [checkOverflow, orientation, isOverflow]); + + const resizeRef: RefObject<(updateScrollStep?: boolean) => void> = useRef<(updateScrollStep?: boolean) => void>(resize); + + useEffect(() => { + resizeRef.current = resize; + }, [resize]); + + const refreshOverflow: () => void = useCallback(() => { + resizeRef.current(); + }, []); + + useEffect(() => { + if (toolbarRef.current) { + let isFirstObservation: boolean = true; + + resizeObserverRef.current = new ResizeObserver(() => { + if (isFirstObservation) { + isFirstObservation = false; + return; + } + resizeRef.current(); + }); + + resizeObserverRef.current.observe(toolbarRef.current); + } + return () => { + resizeObserverRef.current?.disconnect(); + resizeObserverRef.current = null; + }; + }, []); + + useEffect(() => { + const currentCount: number = Children.count(children); + if (isNullOrUndefined(previousChildrenCountRef.current) || previousChildrenCountRef.current !== currentCount) { + previousChildrenCountRef.current = Children.count(children); + onOverflowChange(); + resizeRef.current(false); + } + }, [children, onOverflowChange]); + + useEffect(() => { + onOverflowChange(); + }, [isOverflow, onOverflowChange]); + + useImperativeHandle(ref, () => ({ + refreshOverflow + }), [refreshOverflow]); + + const classes: string = useMemo(() => { + const classArray: string[] = [CLS_ITEMS]; + if (className) { + classArray.push(className); + } + return classArray.join(' '); + }, [className]); + + if (isOverflow) { + if (orientation === Orientation.Horizontal) { + return ( + + {children} + + ); + } else { + return ( + + {children} + + ); + } + } else { + return
    {children}
    ; + } +})); +ToolbarScrollable.displayName = 'ToolbarScrollable'; +export { ToolbarScrollable }; diff --git a/components/navigations/src/toolbar/toolbar-separator.tsx b/components/navigations/src/toolbar/toolbar-separator.tsx new file mode 100644 index 0000000..1ef2526 --- /dev/null +++ b/components/navigations/src/toolbar/toolbar-separator.tsx @@ -0,0 +1,64 @@ +import { + forwardRef, useImperativeHandle, useRef, HTMLAttributes, memo, + RefObject, Ref, ForwardRefExoticComponent, RefAttributes, useMemo +} from 'react'; + +const CLS_ITEM: string = 'sf-toolbar-item'; +const CLS_SEPARATOR: string = 'sf-separator'; + +export interface IToolbarSeparator { + /** + * Separator element within the toolbar. + * + * @default null + */ + element?: HTMLElement | null; +} + +type IToolbarSeparatorProps = IToolbarSeparator & HTMLAttributes; + +/** + * The ToolbarSeparator component is used for rendering a visual separation between items in a Toolbar. + * + * ```typescript + * + * + * + * + * + * ``` + */ +export const ToolbarSeparator: ForwardRefExoticComponent> = memo(forwardRef< +IToolbarSeparator, IToolbarSeparatorProps +>((props: IToolbarSeparatorProps, ref: Ref) => { + const { + className = '', + ...eleAttr + } = props; + + const separatorRef: RefObject = useRef(null); + + const classes: string = useMemo(() => { + const classes: string[] = [CLS_ITEM, CLS_SEPARATOR]; + if (className) { + classes.push(className); + } + return classes.join(' '); + }, [className]); + + useImperativeHandle(ref, () => { + return { + element: separatorRef.current + }; + }); + + return ( +
    + ); +})); +ToolbarSeparator.displayName = 'ToolbarSeparator'; +export default ToolbarSeparator; diff --git a/components/navigations/src/toolbar/toolbar-spacer.tsx b/components/navigations/src/toolbar/toolbar-spacer.tsx new file mode 100644 index 0000000..2bb9fa9 --- /dev/null +++ b/components/navigations/src/toolbar/toolbar-spacer.tsx @@ -0,0 +1,66 @@ +import { + forwardRef, useImperativeHandle, useRef, HTMLAttributes, memo, + RefObject, Ref, ForwardRefExoticComponent, RefAttributes, useMemo +} from 'react'; + +const CLS_ITEM: string = 'sf-toolbar-item'; +const CLS_SPACER: string = 'sf-spacer'; + +export interface IToolbarSpacer { + /** + * Spacer element within the toolbar. + * + * @default null + */ + element?: HTMLElement | null; +} + +type IToolbarSpacerProps = IToolbarSpacer & HTMLAttributes; + +/** + * The ToolbarSpacer component is used to render an adjustable space within a Toolbar. + * + * ```typescript + * + * + * + * + * + * + * ``` + */ +export const ToolbarSpacer: ForwardRefExoticComponent> = memo(forwardRef< +IToolbarSpacer, +IToolbarSpacerProps +>((props: IToolbarSpacerProps, ref: Ref) => { + const { + className = '', + ...eleAttr + } = props; + + const spacerRef: RefObject = useRef(null); + + const classes: string = useMemo(() => { + const classes: string[] = [CLS_ITEM, CLS_SPACER]; + if (className) { + classes.push(className); + } + return classes.join(' '); + }, [className]); + + useImperativeHandle(ref, () => { + return { + element: spacerRef.current + }; + }); + + return ( +
    + ); +})); +ToolbarSpacer.displayName = 'ToolbarSpacer'; +export default ToolbarSpacer; diff --git a/components/navigations/src/toolbar/toolbar.tsx b/components/navigations/src/toolbar/toolbar.tsx new file mode 100644 index 0000000..3ab7b60 --- /dev/null +++ b/components/navigations/src/toolbar/toolbar.tsx @@ -0,0 +1,506 @@ +import { + forwardRef, useImperativeHandle, useRef, HTMLAttributes, useLayoutEffect, useState, useMemo, memo, + RefObject, RefAttributes, Ref, ForwardRefExoticComponent, useCallback, KeyboardEvent +} from 'react'; +import { preRender, useProviderContext, closest, isNullOrUndefined } from '@syncfusion/react-base'; +import { ToolbarMultiRow } from './toolbar-multi-row'; +import { ToolbarScrollable, ToolbarScrollableRef } from './toolbar-scrollable'; +import { ToolbarPopup, ToolbarPopupRef } from './toolbar-popup'; + +/** + * Specifies the options of Toolbar display mode. Display option is considered when Toolbar content exceeds the available space. + */ +export enum OverflowMode { + /** + * All the elements are displayed in a single line with horizontal or vertical scrolling enabled. + */ + Scrollable = 'Scrollable', + + /** + * Overflowing elements are moved to the popup. Shows the overflowing Toolbar items when you click the expand button. If the popup content overflows the height of the page, the rest of the elements will be hidden. + */ + Popup = 'Popup', + + /** + * Displays the overflowing Toolbar items in multiple rows within the Toolbar, allowing all items to remain visible by wrapping to new lines as needed. + */ + MultiRow = 'MultiRow', + + /** + * Hides the overflowing Toolbar items in the next row. Shows the overflowing Toolbar items when you click the expand button. + */ + Extended = 'Extended' +} + +/** + * Specifies the layout direction of how the Toolbar items are arranged. + */ +export enum Orientation { + /** + * Arranges Toolbar items in a row from left to right. + */ + Horizontal = 'Horizontal', + + /** + * Stacks Toolbar items in a column from top to bottom. + */ + Vertical = 'Vertical' +} + +const CLS_TOOLBAR: string = 'sf-toolbar'; +const CLS_VERTICAL: string = 'sf-vertical'; +const CLS_ITEMS: string = 'sf-toolbar-items'; +const CLS_RTL: string = 'sf-rtl'; +const CLS_TBARSCRLNAV: string = 'sf-scroll-nav'; +const CLS_POPUPNAV: string = 'sf-hor-nav'; +const CLS_POPUPCLASS: string = 'sf-toolbar-pop'; +const CLS_EXTENDABLE_TOOLBAR: string = 'sf-extended-toolbar'; +const CLS_MULTIROW_TOOLBAR: string = 'sf-multirow-toolbar'; +const CLS_EXTENDEDPOPOPEN: string = 'sf-tbar-extended'; +const CLS_POPUP_TOOLBAR: string = 'sf-toolpop'; + +/** + * Specifies the props for the Toolbar component. + */ +export interface ToolbarProps { + /** + * Specifies whether keyboard interaction is enabled within the Toolbar. + * When set to `true` (default), keyboard navigation is allowed. + * + * @default true + */ + keyboardNavigation?: boolean; + + /** + * Specifies whether popups adjust their position to avoid overlapping with other elements. + * This property is applicable only when in `Popup` and `Extended` modes. + * + * @default true + */ + collision?: boolean; + + /** + * Specifies the layout direction of how the Toolbar items are arranged. + * + * The possible values for this property as follows + * - Horizontal: Arranges Toolbar items in a row from left to right. + * - Vertical: Stacks Toolbar items in a column from top to bottom. + * + * @default Orientation.Horizontal + */ + orientation?: Orientation; + + /** + * Specifies the Toolbar display mode when Toolbar content exceeds the viewing area. + * + * The possible values for this property as follows + * - Scrollable: All elements are displayed in a single line with horizontal or vertical scrolling enabled. + * - Popup: Overflowing elements are moved to the popup. Shows the overflowing Toolbar items when you click the expand button. if the popup content overflows the height of the page, the rest of the elements will be hidden. + * - MultiRow: Displays the overflowing Toolbar items in multiple rows within the Toolbar, allowing all items to remain visible by wrapping to new lines as needed. + * - Extended: Hides the overflowing Toolbar items in the next row. Shows the overflowing Toolbar items when you click the expand button. + * + * @default OverflowMode.Scrollable + */ + overflowMode?: OverflowMode; + + /** + * Specifies the scrolling distance in pixels when the Toolbar items overflow in Scrollable mode. + * This property is applicable only when the Toolbar is in `Scrollable` mode. + * + * @default undefined + */ + scrollStep?: number; +} + +/** + * Specifies the interface for the Toolbar component. + */ +export interface IToolbar extends ToolbarProps { + /** + * Specifies the Toolbar element. + * + * @private + * @default null + */ + element?: HTMLDivElement | null; + + /** + * Refreshes the Toolbar overflow state and recalculates item visibility. + * This method should be called when Toolbar content or container dimensions change. + * Note: This method is not applicable when the Toolbar is in MultiRow mode. + * + * @public + * @returns {void} + */ + refreshOverflow(): void; +} + +interface ElementContext { + isToolbar: boolean; + items: HTMLElement[]; + currentIndex: number; +} + +type NavigationDirection = 'next' | 'previous' | 'first' | 'last'; +type IToolbarProps = ToolbarProps & HTMLAttributes; + +/** + * The Toolbar component helps users to effectively organize and quickly access frequently used actions. + * It provides multiple overflow handling modes to accommodate different UI requirements and screen sizes. + * + * ```typescript + * + * + * + * + * + * + * + * + * ``` + */ +export const Toolbar: ForwardRefExoticComponent> = memo(forwardRef< +IToolbar, IToolbarProps +>((props: IToolbarProps, ref: Ref) => { + const { + keyboardNavigation = true, + children, + className = '', + collision = true, + orientation = Orientation.Horizontal, + overflowMode = OverflowMode.Scrollable, + scrollStep = undefined, + ...eleAttr + } = props; + + const toolbarRef: RefObject = useRef(null); + const focusItemsRef: RefObject<{ toolbar: HTMLElement[]; popup: HTMLElement[]; }> = + useRef<{ toolbar: HTMLElement[]; popup: HTMLElement[]; }>({ toolbar: [], popup: [] }); + const focusItemRef: RefObject = useRef(null); + const scrollableRef: RefObject = useRef(null); + const popupRef: RefObject = useRef(null); + + const { dir }: { dir: string } = useProviderContext(); + + const [isToolbarRefReady, setIsToolbarRefReady] = useState(false); + const [isPopupVisible, setIsPopupVisible] = useState(false); + + const onOverflowChange: () => void = useCallback((): void => { + if (keyboardNavigation && toolbarRef.current) { + const queryElements: (containerClass: string) => HTMLElement[] = (containerClass: string): HTMLElement[] => { + return toolbarRef.current ? Array.from(toolbarRef.current.querySelectorAll(`.${containerClass} .sf-btn`)) : []; + }; + focusItemsRef.current.toolbar = queryElements(CLS_ITEMS); + + if (overflowMode === OverflowMode.Extended || overflowMode === OverflowMode.Popup) { + focusItemsRef.current.popup = queryElements(CLS_POPUPCLASS); + } + + let focusItemIndex: number = 0; + if (focusItemRef.current) { + focusItemIndex = focusItemsRef.current.toolbar.indexOf(focusItemRef.current); + focusItemIndex = focusItemIndex === -1 ? 0 : focusItemIndex; + } + + const allItems: HTMLElement[] = [...focusItemsRef.current.toolbar, ...focusItemsRef.current.popup]; + allItems.forEach((item: HTMLElement, i: number) => { + item.tabIndex = i === focusItemIndex ? 0 : -1; + if (i === focusItemIndex) { + focusItemRef.current = item; + } + }); + } + }, [keyboardNavigation, overflowMode]); + + const getElementContext: (target: HTMLElement) => ElementContext = useCallback((target: HTMLElement): ElementContext => { + const isInPopup: boolean = !!closest(target, '.' + CLS_POPUPCLASS); + return { + isToolbar: !isInPopup, + items: isInPopup ? focusItemsRef.current.popup : focusItemsRef.current.toolbar, + currentIndex: isInPopup ? + focusItemsRef.current.popup.indexOf(target) : + focusItemsRef.current.toolbar.indexOf(target) + }; + }, []); + + const isInPopup: (target: HTMLElement) => boolean = useCallback((target: HTMLElement): boolean => { + return !isNullOrUndefined(closest(target, '.' + CLS_POPUPCLASS)); + }, []); + + const isPopupNavElement: (target: HTMLElement) => boolean = useCallback((target: HTMLElement): boolean => { + return !isNullOrUndefined(closest(target, '.' + CLS_POPUPNAV)); + }, []); + + const manageFocus: (newIndex: number, isToolbar: boolean) => void = useCallback((newIndex: number, isToolbar: boolean): void => { + const items: HTMLElement[] = isToolbar ? focusItemsRef.current.toolbar : focusItemsRef.current.popup; + if (newIndex > -1 && newIndex < items.length) { + items.forEach((item: HTMLElement) => { + item.tabIndex = -1; + }); + + const item: HTMLElement = items[parseInt(newIndex.toString(), 10)]; + item.tabIndex = 0; + item.focus(); + + if (isToolbar) { + focusItemRef.current = item; + } + } + }, []); + + const navigateItems: (target: HTMLElement, direction: NavigationDirection) => void = useCallback(( + target: HTMLElement, direction: NavigationDirection + ): void => { + const { isToolbar, items, currentIndex }: ElementContext = getElementContext(target); + let newIndex: number; + switch (direction) { + case 'next': + newIndex = (currentIndex + 1) % items.length; + break; + case 'previous': + newIndex = (currentIndex - 1 + items.length) % items.length; + break; + case 'first': + newIndex = 0; + break; + case 'last': + newIndex = items.length - 1; + break; + } + manageFocus(newIndex, isToolbar); + }, [getElementContext, manageFocus]); + + const handleHorizontalNavigation: (target: HTMLElement, key: string) => void = useCallback((target: HTMLElement, key: string): void => { + if (orientation === Orientation.Horizontal) { + const isNavButton: boolean = target.classList.contains(CLS_POPUPNAV); + const isScrollButton: boolean = target.classList.contains(CLS_TBARSCRLNAV); + + if (key === 'ArrowRight' && toolbarRef.current === target) { + manageFocus(0, true); + return; + } + + if ((key === 'ArrowRight' || key === 'ArrowLeft') && !isNavButton && !isScrollButton) { + const direction: NavigationDirection = key === 'ArrowRight' ? 'next' : 'previous'; + navigateItems(target, direction); + } + } + }, [manageFocus, navigateItems, orientation]); + + const handleVerticalNavigation: (target: HTMLElement, key: string) => void = useCallback((target: HTMLElement, key: string): void => { + const isVerticalMode: boolean = orientation === Orientation.Vertical; + const inPopup: boolean = isInPopup(target); + const isPopupNav: boolean = isPopupNavElement(target); + + if (key === 'ArrowUp' && !isPopupNav && (isVerticalMode || inPopup)) { + navigateItems(target, 'previous'); + } else if (key === 'ArrowDown') { + if (isPopupNav && isPopupVisible && focusItemsRef.current.popup.length > 0) { + manageFocus(0, false); + } else if (isVerticalMode || inPopup) { + navigateItems(target, 'next'); + } + } + }, [isInPopup, isPopupNavElement, isPopupVisible, manageFocus, navigateItems, orientation]); + + const handleEdgeNavigation: (target: HTMLElement, key: string) => void = useCallback((target: HTMLElement, key: string): void => { + const direction: NavigationDirection = key === 'Home' ? 'first' : 'last'; + navigateItems(target, direction); + }, [navigateItems]); + + const handleTabNavigation: (target: HTMLElement) => void = useCallback((target: HTMLElement): void => { + const isNavButton: boolean = target.classList.contains(CLS_POPUPNAV); + const isScrollButton: boolean = target.classList.contains(CLS_TBARSCRLNAV); + const toolbarElement: HTMLDivElement | null = toolbarRef.current; + + if (!isScrollButton && !isNavButton && toolbarElement === target && focusItemsRef.current.toolbar) { + if (focusItemRef.current) { + focusItemRef.current.focus(); + } else { + manageFocus(0, true); + } + } + }, [manageFocus]); + + const handleEnterKey: (target: HTMLElement) => void = useCallback((target: HTMLElement): void => { + const isNavButton: boolean = target.classList.contains(CLS_POPUPNAV); + + if (isNavButton) { + setIsPopupVisible((prevState: boolean) => !prevState); + } + }, []); + + const handleEscapeKey: () => void = useCallback((): void => { + if (overflowMode === OverflowMode.Popup && isPopupVisible) { + setIsPopupVisible(false); + } + }, [isPopupVisible, overflowMode]); + + const keyActionHandler: (e: KeyboardEvent) => void = useCallback((e: KeyboardEvent): void => { + if (!toolbarRef.current || !keyboardNavigation || ['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement).tagName)) { + return; + } + + const target: HTMLElement = e.target as HTMLElement; + e.preventDefault(); + + const keyHandlers: Record void> = { + ArrowRight: () => handleHorizontalNavigation(target, e.key), + ArrowLeft: () => handleHorizontalNavigation(target, e.key), + ArrowUp: () => handleVerticalNavigation(target, e.key), + ArrowDown: () => handleVerticalNavigation(target, e.key), + Home: () => handleEdgeNavigation(target, e.key), + End: () => handleEdgeNavigation(target, e.key), + Tab: () => handleTabNavigation(target), + Enter: () => handleEnterKey(target), + Escape: () => handleEscapeKey() + }; + + const handler: (() => void) | undefined = keyHandlers[e.key]; + if (handler) { + handler(); + } + }, [ + keyboardNavigation, + handleHorizontalNavigation, + handleVerticalNavigation, + handleEdgeNavigation, + handleTabNavigation, + handleEnterKey, + handleEscapeKey + ]); + + const handleDocKeyDown: (e: KeyboardEvent) => void = useCallback((e: KeyboardEvent): void => { + if (!keyboardNavigation || ['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement).tagName)) { + return; + } + + const popupCheck: boolean = overflowMode === OverflowMode.Popup && isPopupVisible; + if (e.key === 'Tab' && (e.target as HTMLElement).classList.contains(CLS_POPUPNAV) && popupCheck) { + setIsPopupVisible(false); + } + + if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'End' || e.key === 'Home') { + e.preventDefault(); + } + }, [keyboardNavigation, overflowMode, isPopupVisible]); + + const handlePopupStateChange: (isOpen: boolean) => void = useCallback((isOpen: boolean) => { + setIsPopupVisible(isOpen); + }, []); + + const refreshOverflow: () => void = useCallback((): void => { + if (overflowMode === OverflowMode.Scrollable && scrollableRef.current) { + scrollableRef.current.refreshOverflow(); + } else if ((overflowMode === OverflowMode.Popup || overflowMode === OverflowMode.Extended) && popupRef.current) { + popupRef.current.refreshOverflow(); + } + }, [overflowMode]); + + useLayoutEffect(() => { + preRender('toolbar'); + setIsToolbarRefReady(true); + }, []); + + const classes: string = useMemo(() => { + const classArray: string[] = ['sf-control', CLS_TOOLBAR, 'sf-lib']; + if (dir === 'rtl') { + classArray.push(CLS_RTL); + } + switch (overflowMode) { + case OverflowMode.MultiRow: + classArray.push(CLS_MULTIROW_TOOLBAR); + break; + case OverflowMode.Popup: + classArray.push(CLS_POPUP_TOOLBAR); + break; + case OverflowMode.Extended: + classArray.push(CLS_EXTENDABLE_TOOLBAR); + if (isPopupVisible) { + classArray.push(CLS_EXTENDEDPOPOPEN); + } + break; + } + if (orientation === Orientation.Vertical) { + classArray.push(CLS_VERTICAL); + } + if (className) { + classArray.push(className); + } + return classArray.join(' '); + }, [className, dir, orientation, isPopupVisible, overflowMode]); + + const publicAPI: Partial = { + keyboardNavigation, + collision, + orientation, + overflowMode, + scrollStep + }; + + useImperativeHandle(ref, () => { + return { + ...publicAPI as IToolbar, + refreshOverflow: refreshOverflow, + element: toolbarRef.current + }; + }); + + return ( +
    + {(() => { + switch (overflowMode) { + case OverflowMode.Scrollable: + return ( + + {children} + + ); + case OverflowMode.MultiRow: + return ( + + {children} + + ); + case OverflowMode.Popup: + case OverflowMode.Extended: + return ( + + {children} + + ); + } + })()} +
    + ); +})); +Toolbar.displayName = 'Toolbar'; +export default Toolbar; diff --git a/components/navigations/styles/context-menu/_all.scss b/components/navigations/styles/context-menu/_all.scss new file mode 100644 index 0000000..a0fe77d --- /dev/null +++ b/components/navigations/styles/context-menu/_all.scss @@ -0,0 +1,2 @@ +@import 'layout.scss'; +@import 'theme.scss'; diff --git a/components/navigations/styles/context-menu/_layout.scss b/components/navigations/styles/context-menu/_layout.scss new file mode 100644 index 0000000..e6d8d77 --- /dev/null +++ b/components/navigations/styles/context-menu/_layout.scss @@ -0,0 +1,122 @@ +@include export-module('contextmenu-layout') { + + .sf-contextmenu-wrapper { + & ul { + font-weight: $cmenu-font-weight; + list-style-image: none; + list-style-position: outside; + list-style-type: none; + margin: 0; + overflow: hidden; + user-select: none; + font-size: $cmenu-font-size; + padding: $cmenu-ul-padding; + border: $cmenu-ul-border; + border-radius: $cmenu-ul-border-radius; + box-shadow: $cmenu-sub-ul-box-shadow; + display: none; + min-width: $cmenu-min-width; + position: absolute; + font-family: $font-family; + + &.sf-ul, + &.sf-ul * { + box-sizing: border-box; + + &:focus { + outline: none; + } + } + + &.sf-contextmenu { + box-shadow: $cmenu-parent-ul-box-shadow; + padding: 4px 0; + } + + .sf-menu-item { + cursor: pointer; + position: relative; + height: $cmenu-li-height; + line-height: $cmenu-li-line-height; + padding: $cmenu-li-padding; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: flex; + align-items: center; + + &.sf-menu-header { + border-bottom-style: $cmenu-li-border-style; + border-bottom-width: $cmenu-li-border-width; + } + + .sf-menu-url { + text-decoration: none; + display: inline-block; + min-width: 120px; + } + + .sf-menu-icon { + display: inline-flex; + font-size: $cmenu-icon-font-size; + line-height: $cmenu-li-height; + margin-right: $cmenu-icon-margin-right; + width: 1em; + vertical-align: middle; + } + + &.sf-separator { + cursor: auto; + line-height: normal; + pointer-events: none; + border-bottom-style: $cmenu-li-border-style; + border-bottom-width: $cmenu-li-border-width; + height: auto; + margin: $cmenu-seperator-padding; + padding: 0px 12px; + } + + .sf-submenu-icon { + line-height: $cmenu-li-height; + margin: 0 0 0 auto; + padding-left: 16px; + float: right; + display: flex; + font-size: $cmenu-caret-font-size; + } + + &.sf-blank-icon { + padding-left: $cmenu-caret-blank-icon; + } + + &.sf-disabled { + cursor: auto; + pointer-events: none; + } + } + } + + .sf-menu-parent[sf-animate=true] { + pointer-events: none; + } + } +} + +.sf-rtl.sf-contextmenu-wrapper .sf-menu-item { + .sf-menu-icon { + margin-right: 0; + margin-left: $cmenu-icon-margin-right; + } + + .sf-submenu-icon { + margin-left: 0; + margin-right: auto; + float: left; + transform: rotate(180deg); + } + + &.sf-blank-icon { + padding-right: $cmenu-caret-blank-icon; + padding-left: $cmenu-li-right-padding; + } +} \ No newline at end of file diff --git a/components/navigations/styles/context-menu/_material3-dark-definition.scss b/components/navigations/styles/context-menu/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/navigations/styles/context-menu/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/navigations/styles/context-menu/_material3-definition.scss b/components/navigations/styles/context-menu/_material3-definition.scss new file mode 100644 index 0000000..2ec02ed --- /dev/null +++ b/components/navigations/styles/context-menu/_material3-definition.scss @@ -0,0 +1,40 @@ +$cmenu-min-width: 120px !default; +$cmenu-max-width: 240px !default; +$cmenu-font-size: $text-sm !default; +$cmenu-font-weight: $font-weight-normal !default; +$cmenu-color: rgba($flyout-text-color) !default; + +$cmenu-ul-padding: 4px 0 !default; +$cmenu-ul-border: 1px solid rgba($border-light) !default; +$cmenu-ul-border-radius: 4px !default; +$cmenu-ul-bgcolor: $flyout-bg-color !default; +$cmenu-parent-ul-box-shadow: $shadow-md !default; +$cmenu-sub-ul-box-shadow: $shadow-md !default; + +$cmenu-li-height: 32px !default; +$cmenu-li-line-height: 20px !default; +$cmenu-li-padding: 5px 12px !default; +$cmenu-li-right-padding: 12px !default; +$cmenu-li-border-width: 1px !default; +$cmenu-li-border-style: solid !default; +$cmenu-li-border-color: rgba($flyout-border) !default; +$cmenu-li-bgcolor: $flyout-bg-color-hover !default; +$cmenu-li-selection-bgcolor: $flyout-bg-color-selected !default; +$cmenu-li-selection-font-color: rgba($flyout-text-color-selected) !default; +$cmenu-selected-color: rgba($flyout-text-color-selected) !default; +$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default; +$cmenu-li-hover-outline-offset: 0 !default; +$cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default; +$cmenu-li-selected-outline-offset: 0 !default; +$cmenu-seperator-padding: 4px 0 !default; +$cmenu-disable-text: $flyout-text-color-disabled !default; + +$cmenu-icon-font-size: $text-base !default; +$cmenu-icon-margin-right: 10px !default; +$cmenu-icon-color: rgba($icon-color) !default; +$cmenu-icon-disabled-color: $icon-color-disabled !default; +$cmenu-hover-icon-color: rgba($icon-color) !default; +$cmenu-caret-font-size: $text-base !default; +$cmenu-caret-color: rgba($icon-color) !default; +$cmenu-caret-hover-color: rgba($icon-color) !default; +$cmenu-caret-blank-icon: 38px !default; diff --git a/components/navigations/styles/context-menu/_theme-mixin.scss b/components/navigations/styles/context-menu/_theme-mixin.scss new file mode 100644 index 0000000..34cd7c8 --- /dev/null +++ b/components/navigations/styles/context-menu/_theme-mixin.scss @@ -0,0 +1,17 @@ +@mixin focused-icon-color { + & .sf-submenu-icon { + color: $cmenu-caret-color; + + path { + fill: $cmenu-caret-color; + } + } + + & .sf-menu-icon { + color: $cmenu-icon-color; + + path { + fill: $cmenu-icon-color; + } + } +} diff --git a/components/navigations/styles/context-menu/_theme.scss b/components/navigations/styles/context-menu/_theme.scss new file mode 100644 index 0000000..4faf87a --- /dev/null +++ b/components/navigations/styles/context-menu/_theme.scss @@ -0,0 +1,82 @@ +@import 'theme-mixin.scss'; + +@include export-module('contextmenu-theme') { + + .sf-contextmenu-wrapper { + ul { + background: $cmenu-ul-bgcolor; + color: $cmenu-color; + + .sf-menu-item { + &.sf-menu-header { + border-bottom-color: $cmenu-li-border-color; + } + + @include focused-icon-color; + + .sf-menu-url { + color: $cmenu-color; + } + + &.sf-focused { + background-color: $cmenu-li-bgcolor; + color: $cmenu-li-selection-font-color; + outline: $cmenu-li-hover-outline; + outline-offset: $cmenu-li-hover-outline-offset; + @include focused-icon-color; + } + + &.sf-selected { + background-color: $cmenu-li-selection-bgcolor; + color: $cmenu-selected-color; + outline: $cmenu-li-selected-outline; + outline-offset: $cmenu-li-selected-outline-offset; + + .sf-submenu-icon { + color: $cmenu-caret-hover-color; + + path { + fill: $cmenu-caret-hover-color; + } + } + + .sf-menu-icon { + color: $cmenu-hover-icon-color; + + path { + fill: $cmenu-hover-icon-color; + } + } + } + } + + .sf-disabled { + color: $cmenu-disable-text; + opacity: 1; + + .sf-menu-icon, + .sf-submenu-icon { + color: $cmenu-icon-disabled-color; + + path { + fill: $cmenu-icon-disabled-color; + } + } + + .sf-menu-url { + color: $cmenu-disable-text; + } + } + + .sf-separator { + border-bottom-color: $cmenu-li-border-color; + } + } + + .sf-menu-parent { + position: absolute; + max-height: 500px; + overflow-y: auto; + } + } +} \ No newline at end of file diff --git a/components/navigations/styles/context-menu/material3-dark.scss b/components/navigations/styles/context-menu/material3-dark.scss new file mode 100644 index 0000000..c14a867 --- /dev/null +++ b/components/navigations/styles/context-menu/material3-dark.scss @@ -0,0 +1,2 @@ +@import 'material3-dark-definition.scss'; +@import 'all.scss'; diff --git a/components/navigations/styles/context-menu/material3.scss b/components/navigations/styles/context-menu/material3.scss new file mode 100644 index 0000000..9eeb62e --- /dev/null +++ b/components/navigations/styles/context-menu/material3.scss @@ -0,0 +1,2 @@ +@import 'material3-definition.scss'; +@import 'all.scss'; diff --git a/components/navigations/styles/h-scroll/_all.scss b/components/navigations/styles/h-scroll/_all.scss new file mode 100644 index 0000000..a0fe77d --- /dev/null +++ b/components/navigations/styles/h-scroll/_all.scss @@ -0,0 +1,2 @@ +@import 'layout.scss'; +@import 'theme.scss'; diff --git a/components/navigations/styles/h-scroll/_layout.scss b/components/navigations/styles/h-scroll/_layout.scss new file mode 100644 index 0000000..d347129 --- /dev/null +++ b/components/navigations/styles/h-scroll/_layout.scss @@ -0,0 +1,105 @@ +@include export-module('h-scroll') { + + #{&}.sf-hscroll { + display: block; + position: relative; + width: inherit; + padding: $hscroll-padding; + + &.sf-rtl { + + .sf-nav-arrow svg { + transform: scaleX(-1); + } + } + + &.sf-overlay { + + .sf-hscroll-content { + + > * { + pointer-events: none; + } + } + } + + > * { + height: inherit; + line-height: normal; + } + + .sf-hscroll-content { + display: inline-block; + height: inherit; + position: relative; + + > * { + pointer-events: auto; + } + } + + &.sf-rtl { + + .sf-scroll-nav { + + &.sf-scroll-right-nav { + left: 0; + right: auto; + } + + &.sf-scroll-left-nav { + left: auto; + right: 0; + } + } + } + + .sf-scroll-nav { + align-items: center; + bottom: 0; + cursor: pointer; + display: flex; + overflow: hidden; + position: absolute; + top: 0; + width: $hscroll-nav-width; + + &.sf-scroll-left-nav { + left: 0; + } + + &.sf-scroll-right-nav { + right: 0; + } + } + + .sf-nav-arrow { + position: relative; + } + + .sf-nav-arrow.sf-icons { + display: flex; + text-align: center; + vertical-align: middle; + align-items: center; + justify-content: center; + width: 100%; + font-size: $hscroll-arrow-size; + + svg { + height: $hscroll-arrow-size; + width: $hscroll-arrow-size; + } + } + + .sf-hscroll-bar { + + .sf-hscroll-content { + + .sf-overlay { + pointer-events: none; + } + } + } + } +} diff --git a/components/navigations/styles/h-scroll/_material3-dark-definition.scss b/components/navigations/styles/h-scroll/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/navigations/styles/h-scroll/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/navigations/styles/h-scroll/_material3-definition.scss b/components/navigations/styles/h-scroll/_material3-definition.scss new file mode 100644 index 0000000..18ef987 --- /dev/null +++ b/components/navigations/styles/h-scroll/_material3-definition.scss @@ -0,0 +1,25 @@ +$hscroll-nav-width: 40px !default; +$hscroll-padding: 0 $hscroll-nav-width !default; +$hscroll-padding-device: 50px !default; +$hscroll-arrow-size: 18px !default; + +$hscroll-bg: $transparent !default; +$hscroll-bg-hover: $content-bg-color-hover !default; +$hscroll-bg-focus: $content-bg-color-focus !default; +$hscroll-bg-pressed: $content-bg-color-pressed !default; +$hscroll-nav-bg-hover-pressed: $content-bg-color-pressed !default; +$hscroll-icon-color: rgba($icon-color) !default; +$hscroll-icon-color-hover: rgba($icon-color) !default; +$hscroll-icon-color-active: rgba($content-text-color-alt2) !default; +$hscroll-icon-color-disabled: $hscroll-icon-color !default; +$hscroll-nav-icon-color-hover: $hscroll-icon-color !default; +$hscroll-nav-icon-color-active: $hscroll-icon-color !default; + +$hscroll-border-width: 1px !default; +$hscroll-border-style: solid !default; +$hscroll-border-color: rgba($border-light) !default; +$hscroll-border-active: 0 !default; +$hscroll-border-hover: 0 !default; +$hscroll-border-focus: 0 !default; + +$hscroll-shadow-active: none !default; diff --git a/components/navigations/styles/h-scroll/_theme.scss b/components/navigations/styles/h-scroll/_theme.scss new file mode 100644 index 0000000..a63071e --- /dev/null +++ b/components/navigations/styles/h-scroll/_theme.scss @@ -0,0 +1,101 @@ +@include export-module('h-scroll-theme') { + + #{&}.sf-hscroll { + + .sf-scroll-nav .sf-icons path { + fill: $hscroll-icon-color; + } + + &.sf-rtl { + + .sf-scroll-nav { + background: $hscroll-bg; + + &.sf-scroll-left-nav { + border-left: $hscroll-border-width $hscroll-border-style $hscroll-border-color; + border-right: 0; + } + + &.sf-scroll-right-nav { + border-left: 0; + border-right: $hscroll-border-width $hscroll-border-style $hscroll-border-color; + } + + &:hover { + background: $hscroll-bg-hover; + border: $hscroll-border-hover; + + path { + fill: $hscroll-icon-color-hover; + } + + &:active { + background: $hscroll-nav-bg-hover-pressed; + } + } + } + } + + .sf-scroll-nav { + + &:hover { + background: $hscroll-bg-hover; + + path { + fill: $hscroll-icon-color-hover; + } + + .sf-icons path { + fill: $hscroll-nav-icon-color-hover; + } + } + + &:focus { + background: $hscroll-bg-focus; + border: $hscroll-border-focus; + + path { + fill: $hscroll-icon-color-hover; + } + + .sf-icons path { + fill: $hscroll-nav-icon-color-hover; + } + } + + &:active { + background: $hscroll-bg-pressed; + border: $hscroll-border-active; + box-shadow: $hscroll-shadow-active; + + path { + fill: $hscroll-icon-color-active; + } + + .sf-icons path { + fill: $hscroll-nav-icon-color-active; + } + } + } + + .sf-scroll-nav { + background: $hscroll-bg; + &.sf-overlay { + &.sf-scroll-left-nav, + &.sf-scroll-right-nav { + .sf-nav-arrow.sf-icons path { + fill: $hscroll-icon-color-disabled; + } + } + } + + &.sf-scroll-left-nav { + border-right: $hscroll-border-width $hscroll-border-style $hscroll-border-color; + } + + &.sf-scroll-right-nav { + border-left: $hscroll-border-width $hscroll-border-style $hscroll-border-color; + } + } + } +} diff --git a/components/navigations/styles/h-scroll/material3-dark.scss b/components/navigations/styles/h-scroll/material3-dark.scss new file mode 100644 index 0000000..c14a867 --- /dev/null +++ b/components/navigations/styles/h-scroll/material3-dark.scss @@ -0,0 +1,2 @@ +@import 'material3-dark-definition.scss'; +@import 'all.scss'; diff --git a/components/navigations/styles/h-scroll/material3.scss b/components/navigations/styles/h-scroll/material3.scss new file mode 100644 index 0000000..9eeb62e --- /dev/null +++ b/components/navigations/styles/h-scroll/material3.scss @@ -0,0 +1,2 @@ +@import 'material3-definition.scss'; +@import 'all.scss'; diff --git a/components/navigations/styles/material3-dark.scss b/components/navigations/styles/material3-dark.scss new file mode 100644 index 0000000..f2d8aef --- /dev/null +++ b/components/navigations/styles/material3-dark.scss @@ -0,0 +1,8 @@ +@import 'context-menu/material3-dark-definition.scss'; +@import 'context-menu/all.scss'; +@import 'h-scroll/material3-dark-definition.scss'; +@import 'h-scroll/all.scss'; +@import 'toolbar/material3-dark-definition.scss'; +@import 'toolbar/all.scss'; +@import 'v-scroll/material3-dark-definition.scss'; +@import 'v-scroll/all.scss'; diff --git a/components/navigations/styles/material3.scss b/components/navigations/styles/material3.scss new file mode 100644 index 0000000..8d41ebb --- /dev/null +++ b/components/navigations/styles/material3.scss @@ -0,0 +1,8 @@ +@import 'context-menu/material3-definition.scss'; +@import 'context-menu/all.scss'; +@import 'h-scroll/material3-definition.scss'; +@import 'h-scroll/all.scss'; +@import 'toolbar/material3-definition.scss'; +@import 'toolbar/all.scss'; +@import 'v-scroll/material3-definition.scss'; +@import 'v-scroll/all.scss'; diff --git a/components/navigations/styles/toolbar/_all.scss b/components/navigations/styles/toolbar/_all.scss new file mode 100644 index 0000000..a0fe77d --- /dev/null +++ b/components/navigations/styles/toolbar/_all.scss @@ -0,0 +1,2 @@ +@import 'layout.scss'; +@import 'theme.scss'; diff --git a/components/navigations/styles/toolbar/_layout.scss b/components/navigations/styles/toolbar/_layout.scss new file mode 100644 index 0000000..6cd6684 --- /dev/null +++ b/components/navigations/styles/toolbar/_layout.scss @@ -0,0 +1,357 @@ +@include export-module('toolbar-layout') { + .sf-toolbar { + border-radius: $tbar-border-radius; + display: block; + height: $tbar-height; + min-height: $tbar-height; + position: relative; + user-select: none; + white-space: nowrap; + overflow: hidden; + + &.sf-control[class *= 'sf-toolbar'] { + box-sizing: content-box; + } + + .sf-toolbar-items { + border-radius: $tbar-border-radius 0 0 $tbar-border-radius; + display: flex; + height: 100%; + vertical-align: middle; + align-items: center; + overflow: hidden; + + &:not(.sf-hscroll):not(.sf-vscroll) { + padding: $tbar-items-padding; + gap: $tbar-items-gap; + } + + &.sf-popup-overflow { + width: calc(100% - $tbar-nav-width); + } + } + + .sf-toolbar-item { + align-content: center; + align-items: center; + cursor: pointer; + display: inline-flex; + vertical-align: middle; + width: auto; + flex: 0 0 auto; + + &:not(.sf-separator):not(.sf-spacer) { + height: inherit; + min-height: $tbar-item-min-height; + min-width: $tbar-item-min-width; + } + + &.sf-separator { + min-height: $tbar-separator-min-height; + min-width: 1px; + height: $tbar-separator-height; + cursor: auto; + + + .sf-separator, + &:last-of-type, + &:first-of-type { + display: none; + } + } + + input[type = 'checkbox'] { + height: auto; + } + + &.sf-spacer { + flex-grow: 1; + cursor: auto; + } + } + + &.sf-multirow-toolbar { + height: auto; + + .sf-toolbar-items.sf-toolbar-multirow { + white-space: normal; + flex-wrap: wrap; + } + } + + .sf-toolbar-items.sf-hscroll { + width: 100%; + + .sf-hscroll-bar { + display: flex; + + .sf-hscroll-content { + display: flex; + padding: $tbar-items-padding; + gap: $tbar-items-gap; + align-items: center; + } + } + } + + .sf-toolbar-items .sf-hscroll-bar .sf-hscroll-content { + touch-action: pan-y pinch-zoom; + } + + &.sf-toolpop { + overflow: visible; + + .sf-hidden-popup { + display: block; + visibility: hidden; + + .sf-toolbar-item { + position: absolute; + } + } + } + + .sf-hor-nav { + align-items: center; + border-radius: 0 $tbar-border-radius $tbar-border-radius 0; + cursor: pointer; + display: flex; + height: 100%; + overflow: hidden; + position: absolute; + right: $tbar-nav-position-offset; + top: $tbar-nav-position-offset; + width: $tbar-nav-width; + } + + .sf-popup-down-icon.sf-icons, + .sf-popup-up-icon.sf-icons { + display: flex; + text-align: center; + vertical-align: middle; + align-items: center; + justify-content: center; + width: 100%; + font-size: $tbar-popup-icon-font-size; + + svg { + height: $tbar-popup-icon-size; + width: $tbar-popup-icon-size; + } + } + + .sf-toolbar-pop { + border-radius: $tbar-popup-border-radius; + overflow: hidden; + padding: $tbar-popup-padding; + position: absolute; + + .sf-toolbar-item { + display: flex; + height: $tbar-item-height; + justify-content: center; + min-height: $tbar-popup-item-min-height; + + &:not(.sf-separator) { + height: $tbar-item-height; + min-width: 34px; + } + + > * { + height: 100%; + min-width: 100%; + display: flex; + justify-content: flex-start; + } + + &.sf-tbtn-align .sf-btn .sf-icons.sf-btn-icon { + min-width: 100%; + } + } + + .sf-toolbar-popup, + .sf-toolpopup { + text-align: center; + } + + &:not(.sf-hidden-popup) { + .sf-separator, + .sf-spacer { + display: none; + } + } + } + + &.sf-extended-toolbar { + overflow: visible; + + .sf-hidden-popup { + display: block; + visibility: hidden; + + .sf-toolbar-item { + position: absolute; + } + } + } + + &.sf-extended-toolbar:not(.sf-vertical) { + overflow: visible; + + &.sf-tbar-extended { + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + .sf-toolbar-extended { + border-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + min-height: $tbar-height; + box-shadow: $tbar-box-shadow; + display: flex; + flex-wrap: wrap; + white-space: normal; + gap: $tbar-items-gap; + padding: $tbar-items-padding; + vertical-align: middle; + align-items: center; + + .sf-toolbar-item { + display: inline-flex; + min-height: $tbar-item-min-height; + + &:not(.sf-separator) { + min-width: $tbar-item-min-width; + } + + &.sf-separator { + min-height: $tbar-separator-min-height; + height: $tbar-separator-height; + + &.sf-extended-separator { + display: none; + } + } + } + + &.sf-popup-close:not(.sf-hidden-popup) { + display: none; + } + + &.sf-toolbar-pop { + width: inherit; + + .sf-toolbar-item { + &:not(.sf-separator) { + height: auto; + } + } + + .sf-toolbar-item > * { + align-self: center; + } + } + } + + .sf-toolbar-items { + .sf-toolbar-item { + &.sf-separator:last-of-type { + display: inline-flex; + } + } + } + } + + &.sf-vertical { + height: auto; + display: flex; + flex-direction: column; + + .sf-toolbar-items { + flex-direction: column; + align-items: normal; + + &:not(.sf-vscroll) { + padding: $tbar-vertical-items-padding; + } + + .sf-vscroll-bar .sf-vscroll-content { + touch-action: pan-x pinch-zoom; + } + + &.sf-toolbar-item { + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + } + + .sf-toolbar-item { + display: flex; + height: auto; + + &:not(.sf-separator) { + min-width: 33px; + } + + &.sf-separator { + height: auto; + min-height: auto; + } + + > * { + width: 100%; + display: flex; + justify-content: flex-start; + } + } + + &.sf-popup-overflow { + width: 100%; + height: calc(100% - $tbar-items-height); + } + } + + .sf-toolbar-items.sf-vscroll { + .sf-vscroll-bar { + .sf-vscroll-content { + display: flex; + flex-direction: column; + padding: $tbar-vertical-items-padding; + gap: $tbar-items-gap; + } + } + } + + .sf-hor-nav { + bottom: 0; + height: auto; + left: 0; + min-height: $tbar-items-height; + min-width: 50px; + right: auto; + top: auto; + width: 100%; + } + } + + &.sf-rtl { + .sf-hor-nav { + left: $tbar-nav-position-offset; + right: auto; + border-radius: $tbar-border-radius 0 0 $tbar-border-radius; + } + } + + &.sf-extended-toolbar.sf-rtl:not(.sf-vertical) { + .sf-hor-nav { + left: 0; + right: auto; + } + } + } +} diff --git a/components/navigations/styles/toolbar/_material3-dark-definition.scss b/components/navigations/styles/toolbar/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/navigations/styles/toolbar/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/navigations/styles/toolbar/_material3-definition.scss b/components/navigations/styles/toolbar/_material3-definition.scss new file mode 100644 index 0000000..bc3f7b8 --- /dev/null +++ b/components/navigations/styles/toolbar/_material3-definition.scss @@ -0,0 +1,75 @@ +$tbar-height: 48px !default; +$tbar-border-radius: 0 !default; +$tbar-border-width: 0 !default; +$tbar-border-style: solid !default; +$tbar-border-color: rgba($border-light) !default; +$tbar-bg-color: $content-bg-color-alt2 !default; +$tbar-box-shadow: none !default; +$tbar-highlight-color: $content-bg-color-focus !default; + +$tbar-items-height: 48px !default; +$tbar-items-padding: 8px 12px !default; +$tbar-items-gap: 8px !default; + +$tbar-item-min-height: 32px !default; +$tbar-item-height: 32px !default; +$tbar-item-min-width: 32px !default; + +$tbar-vertical-items-padding: 12px 8px !default; + +$tbar-separator-height: 20px !default; +$tbar-separator-min-height: $tbar-separator-height !default; +$tbar-separator-width: 1px !default; +$tbar-separator-border-style: solid !default; +$tbar-separator-border-color: rgba($border-light) !default; +$tbar-separator-horizontal-border-width: 0 $tbar-separator-width 0 0 !default; +$tbar-separator-vertical-border-width: 0 0 $tbar-separator-width 0 !default; + +$tbar-nav-width: 40px !default; +$tbar-nav-border-style: solid !default; +$tbar-nav-press-border: 0 !default; +$tbar-nav-hover-border: 1px solid $tbar-border-color !default; +$tbar-nav-pressed-box-shadow: none !default; +$tbar-nav-selected-box-shadow: none !default; +$tbar-nav-position-offset: 0 !default; + +$tbar-popup-border-width: 0 0 0 1px !default; +$tbar-popup-rtl-border-width: 0 1px 0 0 !default; +$tbar-popup-vertical-border-width: 1px 0 0 0 !default; +$tbar-popup-vertical-rtl-border-width: 1px 0 0 0 !default; +$tbar-popup-padding: 0 !default; + +$tbar-popup-nav-active-border-bottom-right-radius: 0 !default; +$tbar-popup-nav-active-bg: $content-bg-color-pressed !default; +$tbar-popup-nav-active-icons-color: rgba($icon-color) !default; + +$tbar-popup-nav-hover-bg: $content-bg-color-hover !default; +$tbar-popup-nav-hover-icons-color: rgba($icon-color) !default; +$tbar-popup-nav-hover-border-color: $tbar-border-color !default; +$tbar-popup-nav-hover-border-width: 0 0 0 1px !default; + +$tbar-popup-nav-hover-active-bg: $content-bg-color-pressed !default; +$tbar-popup-nav-hover-active-border-color: $tbar-border-color !default; +$tbar-popup-nav-hover-active-border-width: 0 0 0 1px !default; + +$tbar-popup-nav-focus-bg: $content-bg-color-focus !default; +$tbar-popup-nav-focus-icons-color: rgba($icon-color) !default; +$tbar-popup-nav-focus-border-color: rgba($border-light) !default; +$tbar-popup-nav-focus-border-width: 0 0 0 1px !default; + +$tbar-popup-nav-selected-bg: $content-bg-color-pressed !default; +$tbar-popup-nav-selected-border-color: rgba($border-light) !default; +$tbar-popup-nav-selected-border-width: 0 0 0 1px !default; +$tbar-popup-nav-selected-focus-border-color: rgba($border-light) !default; +$tbar-popup-nav-selected-focus-border-width: 0 0 0 1px !default; +$tbar-popup-nav-selected-icons-active-color: rgba($icon-color) !default; + +$tbar-popup-icon-font-size: $text-sm !default; +$tbar-popup-icon-size: 18px !default; +$tbar-popup-icon-color: rgba($icon-color) !default; + +$tbar-popup-border-radius: 4px !default; +$tbar-popup-bg-color: $flyout-bg-color !default; +$tbar-popup-box-shadow: $shadow-md !default; +$tbar-popup-item-bg-color: $transparent !default; +$tbar-popup-item-min-height: 32px !default; diff --git a/components/navigations/styles/toolbar/_theme.scss b/components/navigations/styles/toolbar/_theme.scss new file mode 100644 index 0000000..a16ffd0 --- /dev/null +++ b/components/navigations/styles/toolbar/_theme.scss @@ -0,0 +1,164 @@ +@include export-module('toolbar-theme') { + .sf-toolbar { + -webkit-tap-highlight-color: $tbar-highlight-color; + background: $tbar-bg-color; + border: $tbar-border-width $tbar-border-style $tbar-border-color; + box-shadow: $tbar-box-shadow; + + .sf-toolbar-items { + background: $tbar-bg-color; + } + + .sf-toolbar-item { + &.sf-separator { + border: $tbar-separator-border-style $tbar-separator-border-color; + border-width: $tbar-separator-horizontal-border-width; + } + } + + .sf-hor-nav { + background: $tbar-bg-color; + border: $tbar-nav-border-style $tbar-border-color; + border-width: $tbar-popup-border-width; + color: $tbar-popup-icon-color; + + .sf-popup-down-icon, + .sf-popup-up-icon { + fill: currentColor; + } + + &.sf-nav-active { + &:active, + &:focus, + &:hover { + border-bottom-right-radius: $tbar-popup-nav-active-border-bottom-right-radius; + } + } + + &:active { + border: $tbar-nav-press-border; + box-shadow: $tbar-nav-pressed-box-shadow; + color: $tbar-popup-nav-active-icons-color; + background: $tbar-popup-nav-active-bg; + } + + &:hover { + background: $tbar-popup-nav-hover-bg; + border-left: $tbar-nav-hover-border; + color: $tbar-popup-nav-hover-icons-color; + + &:not(.sf-nav-active) { + border-color: $tbar-popup-nav-hover-border-color; + border-style: $tbar-nav-border-style; + border-width: $tbar-popup-nav-hover-border-width; + } + + &:active { + background: $tbar-popup-nav-hover-active-bg; + border-color: $tbar-popup-nav-hover-active-border-color; + border-style: $tbar-nav-border-style; + border-width: $tbar-popup-nav-hover-active-border-width; + } + } + + &:focus { + background: $tbar-popup-nav-focus-bg; + color: $tbar-popup-nav-focus-icons-color; + border-color: $tbar-popup-nav-focus-border-color; + border-style: $tbar-nav-border-style; + border-width: $tbar-popup-nav-focus-border-width; + } + } + + &.sf-toolpop { + .sf-hor-nav.sf-nav-active, + .sf-hor-nav.sf-nav-active:not(.sf-extended-nav) { + background: $tbar-popup-nav-selected-bg; + box-shadow: $tbar-nav-selected-box-shadow; + border-color: $tbar-popup-nav-selected-border-color; + border-style: $tbar-nav-border-style; + border-width: $tbar-popup-nav-selected-border-width; + + &:focus { + border-color: $tbar-popup-nav-selected-focus-border-color; + border-style: $tbar-nav-border-style; + border-width: $tbar-popup-nav-selected-focus-border-width; + } + + &:active { + color: $tbar-popup-nav-selected-icons-active-color; + } + } + } + + .sf-toolbar-pop { + background: $tbar-popup-bg-color; + border: $tbar-border-width $tbar-border-style $tbar-border-color; + box-shadow: $tbar-popup-box-shadow; + + .sf-toolbar-item { + &:not(.sf-separator) { + background: $tbar-popup-item-bg-color; + } + } + } + + &.sf-extended-toolbar:not(.sf-vertical) { + .sf-toolbar-extended { + .sf-toolbar-item { + &.sf-separator { + border: $tbar-separator-border-style $tbar-separator-border-color; + border-width: $tbar-separator-horizontal-border-width; + } + } + } + + .sf-toolbar-pop { + background: $tbar-bg-color; + } + } + + &.sf-vertical { + .sf-hor-nav { + border: $tbar-nav-border-style $tbar-border-color; + border-width: $tbar-popup-vertical-border-width; + + &:hover:not(.sf-nav-active), + &:focus, + &:hover:active, + &:active, + &.sf-nav-active, + &.sf-nav-active:not(.sf-extended-nav), + &.sf-nav-active:focus, + &.sf-nav-active:not(.sf-extended-nav):focus { + border-width: $tbar-popup-vertical-border-width; + } + } + + &.sf-rtl .sf-hor-nav { + border: $tbar-nav-border-style $tbar-border-color; + border-width: $tbar-popup-vertical-rtl-border-width; + + &:not(.sf-nav-active):hover { + border-width: $tbar-popup-vertical-rtl-border-width; + } + } + + .sf-toolbar-items .sf-toolbar-item { + &.sf-separator { + border-width: $tbar-separator-vertical-border-width; + } + } + } + + &.sf-rtl .sf-hor-nav { + border: $tbar-nav-border-style $tbar-border-color; + border-width: $tbar-popup-rtl-border-width; + + &:not(.sf-nav-active):hover { + border: $tbar-nav-border-style $tbar-border-color; + border-width: $tbar-popup-rtl-border-width; + } + } + } +} diff --git a/components/navigations/styles/toolbar/material3-dark.scss b/components/navigations/styles/toolbar/material3-dark.scss new file mode 100644 index 0000000..c14a867 --- /dev/null +++ b/components/navigations/styles/toolbar/material3-dark.scss @@ -0,0 +1,2 @@ +@import 'material3-dark-definition.scss'; +@import 'all.scss'; diff --git a/components/navigations/styles/toolbar/material3.scss b/components/navigations/styles/toolbar/material3.scss new file mode 100644 index 0000000..9eeb62e --- /dev/null +++ b/components/navigations/styles/toolbar/material3.scss @@ -0,0 +1,2 @@ +@import 'material3-definition.scss'; +@import 'all.scss'; diff --git a/components/navigations/styles/v-scroll/_all.scss b/components/navigations/styles/v-scroll/_all.scss new file mode 100644 index 0000000..a0fe77d --- /dev/null +++ b/components/navigations/styles/v-scroll/_all.scss @@ -0,0 +1,2 @@ +@import 'layout.scss'; +@import 'theme.scss'; diff --git a/components/navigations/styles/v-scroll/_layout.scss b/components/navigations/styles/v-scroll/_layout.scss new file mode 100644 index 0000000..0ed34fb --- /dev/null +++ b/components/navigations/styles/v-scroll/_layout.scss @@ -0,0 +1,76 @@ +@include export-module('v-scroll') { + + #{&}.sf-vscroll { + display: block; + position: relative; + width: inherit; + padding: $vscroll-padding; + + > * { + height: inherit; + } + + .sf-vscroll-content { + display: inline-block; + height: auto; + position: relative; + width: 100%; + + > * { + pointer-events: auto; + } + } + + &.sf-rtl { + + .sf-scroll-nav { + + &.sf-scroll-up-nav { + left: auto; + right: 0; + } + + &.sf-scroll-down-nav { + left: 0; + right: auto; + } + } + } + + .sf-scroll-nav { + align-items: center; + cursor: pointer; + display: flex; + height: $vscroll-nav-height; + overflow: hidden; + position: absolute; + width: 100%; + + &.sf-scroll-up-nav { + top: 0; + } + + &.sf-scroll-down-nav { + bottom: 0; + } + } + + .sf-nav-arrow { + position: relative; + } + + .sf-nav-arrow.sf-icons { + display: flex; + text-align: center; + vertical-align: middle; + align-items: center; + justify-content: center; + width: 100%; + + svg { + height: $vscroll-arrow-size; + width: $vscroll-arrow-size; + } + } + } +} diff --git a/components/navigations/styles/v-scroll/_material3-dark-definition.scss b/components/navigations/styles/v-scroll/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/navigations/styles/v-scroll/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/navigations/styles/v-scroll/_material3-definition.scss b/components/navigations/styles/v-scroll/_material3-definition.scss new file mode 100644 index 0000000..ae269ea --- /dev/null +++ b/components/navigations/styles/v-scroll/_material3-definition.scss @@ -0,0 +1,21 @@ +$vscroll-nav-height: 48px !default; +$vscroll-padding: $vscroll-nav-height 0 !default; +$vscroll-arrow-size: 18px !default; + +$vscroll-bg: $transparent !default; +$vscroll-bg-hover: $content-bg-color-hover !default; +$vscroll-bg-focus: $content-bg-color-focus !default; +$vscroll-bg-pressed: $content-bg-color-pressed !default; +$vscroll-icon-color: rgba($icon-color) !default; +$vscroll-icon-color-hover: rgba($icon-color) !default; +$vscroll-icon-color-active: rgba($icon-color) !default; + +$vscroll-border-size: 1px !default; +$vscroll-border-type: solid !default; +$vscroll-border-color: rgba($border-light) !default; +$vscroll-border-focus: 0 !default; +$vscroll-border-active: 0 !default; +$vscroll-border-hover: 0 !default; +$vscroll-border-hover-color: transparent !default; + +$vscroll-active-box-shadow: none !default; diff --git a/components/navigations/styles/v-scroll/_theme.scss b/components/navigations/styles/v-scroll/_theme.scss new file mode 100644 index 0000000..394d113 --- /dev/null +++ b/components/navigations/styles/v-scroll/_theme.scss @@ -0,0 +1,70 @@ +@include export-module('v-scroll-theme') { + + #{&}.sf-vscroll { + + .sf-icons path { + fill: $vscroll-icon-color; + } + + &.sf-rtl { + + .sf-scroll-nav { + background: $vscroll-bg; + + &:hover { + background: $vscroll-bg-hover; + border: $vscroll-border-hover; + border-color: $vscroll-border-hover-color; + + path { + fill: $vscroll-icon-color-hover; + } + } + } + } + + .sf-scroll-nav { + + &:hover { + background: $vscroll-bg-hover; + border: $vscroll-border-hover; + + path { + fill: $vscroll-icon-color-hover; + } + } + + &:focus { + background: $vscroll-bg-focus; + border: $vscroll-border-focus; + border-color: $vscroll-border-hover-color; + + path { + fill: $vscroll-icon-color-hover; + } + } + + &:active { + background: $vscroll-bg-pressed; + border: $vscroll-border-active; + box-shadow: $vscroll-active-box-shadow; + + path { + fill: $vscroll-icon-color-active; + } + } + } + + .sf-scroll-nav { + background: $vscroll-bg; + + &.sf-scroll-up-nav { + border-bottom: $vscroll-border-size $vscroll-border-type $vscroll-border-color; + } + + &.sf-scroll-down-nav { + border-top: $vscroll-border-size $vscroll-border-type $vscroll-border-color; + } + } + } +} diff --git a/components/navigations/styles/v-scroll/material3-dark.scss b/components/navigations/styles/v-scroll/material3-dark.scss new file mode 100644 index 0000000..c14a867 --- /dev/null +++ b/components/navigations/styles/v-scroll/material3-dark.scss @@ -0,0 +1,2 @@ +@import 'material3-dark-definition.scss'; +@import 'all.scss'; diff --git a/components/navigations/styles/v-scroll/material3.scss b/components/navigations/styles/v-scroll/material3.scss new file mode 100644 index 0000000..9eeb62e --- /dev/null +++ b/components/navigations/styles/v-scroll/material3.scss @@ -0,0 +1,2 @@ +@import 'material3-definition.scss'; +@import 'all.scss'; diff --git a/components/navigations/tsconfig.json b/components/navigations/tsconfig.json new file mode 100644 index 0000000..e580aa1 --- /dev/null +++ b/components/navigations/tsconfig.json @@ -0,0 +1,42 @@ +{ + "compilerOptions": { + "allowUnreachableCode": false, // Disable unreachable code warnings. + "allowUnusedLabels": false, // Disable unused label warnings. + "declaration": true, // Generate .d.ts files. + "forceConsistentCasingInFileNames": true, // Enforce consistent file name casing. + "jsx": "react-jsx", // Enable JSX syntax support. + "module": "ESNext", // Use ESNext module system. + "moduleResolution": "Node", // Resolve modules using Node-style resolution. + "noEmitOnError": true, // Prevent emitting JS files if there are errors. + "noFallthroughCasesInSwitch": true, // Prevent fallthrough in switch cases. + "noImplicitAny": true, // Disallow implicit any types. + "noImplicitReturns": true, // Ensure functions return a value. + "noUnusedLocals": true, // Warn on unused local variables. + "noUnusedParameters": true, // Warn on unused function parameters. + "strict": true, // Enable all strict checks. + "strictBindCallApply": true, // Enable strict checking of bind, call, and apply methods. + "strictFunctionTypes": true, // Enable strict checking of function types. + "strictNullChecks": true, // Enable strict null checks. + "skipLibCheck": true, // Skip checking of declaration files. + "sourceMap": true, // Generate source maps. + "target": "ES2020", // Set ECMAScript version to ES2020. + "types": [ + "node", + "react", + "react-dom" + ], // Include type declarations. + "lib": [ + "ES2020", + "DOM", + "DOM.Iterable" + ] // Include libraries for ES2020 and DOM. + }, + "exclude": [ + "node_modules", + "dist", + "public", + "coverage", + "test-report" + ], // Exclude these directories from compilation. + "compileOnSave": false // Disable Compile-on-Save. +} \ No newline at end of file diff --git a/components/notifications/package.json b/components/notifications/package.json index 57bd2a1..56cbfbf 100644 --- a/components/notifications/package.json +++ b/components/notifications/package.json @@ -1,6 +1,6 @@ { "name": "@syncfusion/react-notifications", - "version": "29.2.4", + "version": "30.1.37", "description": "A package of Pure React notification components such as Toast and Message which used to notify important information to end-users.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", @@ -19,8 +19,8 @@ "module": "./index.js", "readme": "README.md", "dependencies": { - "@syncfusion/react-base": "~29.2.4", - "@syncfusion/react-buttons": "~29.2.4" + "@syncfusion/react-base": "~30.1.37", + "@syncfusion/react-buttons": "~30.1.37" }, "devDependencies": { "gulp": "4.0.2", diff --git a/components/notifications/src/toast/toast.tsx b/components/notifications/src/toast/toast.tsx index f2abc80..f3d17a6 100644 --- a/components/notifications/src/toast/toast.tsx +++ b/components/notifications/src/toast/toast.tsx @@ -611,18 +611,12 @@ export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ childre title }); - if (toastRef.current) { - return toastRef.current?.show(content); - } else { - return ''; - } + return toastRef.current ? toastRef.current.show(content) : ''; }; const hide: (toastId?: string) => void = (toastId?: string) => { if (toastRef.current) { toastRef.current.hide(toastId); - } else { - console.warn('Toast reference is not available'); } }; @@ -660,11 +654,7 @@ export const ToastUtility: { }, show: (content: React.ReactNode) => { - if (globalToastRef) { - return globalToastRef.show(content); - } else { - return ''; - } + return globalToastRef ? globalToastRef.show(content) : ''; }, hide: (toastId?: string) => { diff --git a/components/notifications/styles/material3-dark.scss b/components/notifications/styles/material3-dark.scss index b327355..815d66b 100644 --- a/components/notifications/styles/material3-dark.scss +++ b/components/notifications/styles/material3-dark.scss @@ -1,5 +1,3 @@ -@import 'react-base/styles/definition/material3-dark.scss'; -@import 'react-buttons/styles/button/material3-dark-definition.scss'; @import 'toast/material3-dark-definition.scss'; @import 'toast/all.scss'; @import 'message/material3-dark-definition.scss'; diff --git a/components/notifications/styles/material3.scss b/components/notifications/styles/material3.scss index 76f8e6e..2dcfc44 100644 --- a/components/notifications/styles/material3.scss +++ b/components/notifications/styles/material3.scss @@ -1,5 +1,3 @@ -@import 'react-base/styles/definition/material3.scss'; -@import 'react-buttons/styles/button/material3-definition.scss'; @import 'toast/material3-definition.scss'; @import 'toast/all.scss'; @import 'message/material3-definition.scss'; diff --git a/components/notifications/styles/message/material3-dark.scss b/components/notifications/styles/message/material3-dark.scss index 9ecbb36..c14a867 100644 --- a/components/notifications/styles/message/material3-dark.scss +++ b/components/notifications/styles/message/material3-dark.scss @@ -1,3 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; @import 'material3-dark-definition.scss'; @import 'all.scss'; diff --git a/components/notifications/styles/message/material3.scss b/components/notifications/styles/message/material3.scss index 3130aa3..9eeb62e 100644 --- a/components/notifications/styles/message/material3.scss +++ b/components/notifications/styles/message/material3.scss @@ -1,3 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; @import 'material3-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/notifications/styles/skeleton/material3-dark.scss b/components/notifications/styles/skeleton/material3-dark.scss index 9ecbb36..c14a867 100644 --- a/components/notifications/styles/skeleton/material3-dark.scss +++ b/components/notifications/styles/skeleton/material3-dark.scss @@ -1,3 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; @import 'material3-dark-definition.scss'; @import 'all.scss'; diff --git a/components/notifications/styles/skeleton/material3.scss b/components/notifications/styles/skeleton/material3.scss index d9dcf4b..9eeb62e 100644 --- a/components/notifications/styles/skeleton/material3.scss +++ b/components/notifications/styles/skeleton/material3.scss @@ -1,3 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; @import 'material3-definition.scss'; @import 'all.scss'; diff --git a/components/notifications/styles/toast/material3-dark.scss b/components/notifications/styles/toast/material3-dark.scss index 3466e4a..c14a867 100644 --- a/components/notifications/styles/toast/material3-dark.scss +++ b/components/notifications/styles/toast/material3-dark.scss @@ -1,4 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; -@import 'react-buttons/styles/button/material3-dark-definition.scss'; @import 'material3-dark-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/notifications/styles/toast/material3.scss b/components/notifications/styles/toast/material3.scss index 56bb978..9eeb62e 100644 --- a/components/notifications/styles/toast/material3.scss +++ b/components/notifications/styles/toast/material3.scss @@ -1,4 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; -@import 'react-buttons/styles/button/material3-definition.scss'; @import 'material3-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/popups/README.md b/components/popups/README.md index d6e8dbb..9ff30a2 100644 --- a/components/popups/README.md +++ b/components/popups/README.md @@ -2,7 +2,7 @@ ## What's Included in the React Popups Package -The React Popups package includes the following component. +The React Popups package includes the following component. ### React Tooltip diff --git a/components/popups/package.json b/components/popups/package.json index 3dfa2b6..684a44d 100644 --- a/components/popups/package.json +++ b/components/popups/package.json @@ -1,6 +1,6 @@ { "name": "@syncfusion/react-popups", - "version": "29.2.4", + "version": "30.1.37", "description": "A package of Pure React popup components such as Tooltip that is used to display information or messages in separate pop-ups.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", @@ -32,8 +32,8 @@ "module": "./index.js", "readme": "README.md", "dependencies": { - "@syncfusion/react-base": "~29.2.4", - "@syncfusion/react-buttons": "~29.2.4" + "@syncfusion/react-base": "~30.1.37", + "@syncfusion/react-buttons": "~30.1.37" }, "devDependencies": { "gulp": "4.0.2", diff --git a/components/popups/src/common/collision.tsx b/components/popups/src/common/collision.tsx index c82f9d9..6e98d64 100644 --- a/components/popups/src/common/collision.tsx +++ b/components/popups/src/common/collision.tsx @@ -1,48 +1,37 @@ -// collision.ts -import * as React from 'react'; + import { calculatePosition, OffsetPosition } from './position'; -import { RefObject } from 'react'; export interface CollisionCoordinates { X: boolean; Y: boolean; } -/** - * Calculates the flipped position for an element. - * - * @param {RefObject} elementRef - The reference to the HTML element. - * @param {RefObject} targetRef - The reference to the target HTML element. - * @param {number} offsetX - The offset on the X-axis (default: 0). - * @param {number} offsetY - The offset on the Y-axis (default: 0). - * @param {string} [positionX] - The alignment for the X-axis (optional). - * @param {string} [positionY] - The alignment for the Y-axis (optional). - * @param {RefObject | null} [viewPortElementRef] - The reference to the viewport HTML element (default: null). - * @param {CollisionCoordinates} [axis] - The axis directions for collision detection (default: {X: true, Y: true}). - * @returns {OffsetPosition | null} The new position as OffsetPosition or null. - */ -export function flip( - elementRef: RefObject, - targetRef: RefObject, +export const flip: (elementRef: HTMLElement | null, + targetRef: HTMLElement | null, + offsetX: number, offsetY: number, + positionX?: string, positionY?: string, + viewPortElementRef?: HTMLElement | null, + axis?: CollisionCoordinates) +=> OffsetPosition | null = ( + elementRef: HTMLElement | null, + targetRef: HTMLElement | null, offsetX: number, offsetY: number, positionX?: string, positionY?: string, - viewPortElementRef?: RefObject | null, + viewPortElementRef?: HTMLElement | null, axis?: CollisionCoordinates -): OffsetPosition | null { - if (!elementRef?.current || !targetRef.current) { - console.warn('Flip function: Missing element or target reference.'); +): OffsetPosition | null => { + if (elementRef === null || targetRef === null) { return null; } - const target: HTMLElement | undefined = targetRef.current; + const target: HTMLElement | undefined = targetRef; if (!target) { - console.warn('Flip function: Target element reference is null.'); return null; } - const element: HTMLElement = elementRef.current; - const viewPortElement: HTMLElement | null = viewPortElementRef?.current ?? null; + const element: HTMLElement = elementRef; + const viewPortElement: HTMLElement | null = viewPortElementRef ?? null; const position: OffsetPosition = calculatePosition( targetRef, @@ -58,7 +47,7 @@ export function flip( if ((axis as CollisionCoordinates).X) { if ( positionX === 'left' && - elementRect.right > (viewPortElement?.clientWidth || window.innerWidth) + elementRect.right > (viewPortElement?.clientWidth || window.innerWidth) ) { position.left = targetRect.left - elementRect.width - offsetX; positionX = 'right'; @@ -71,7 +60,7 @@ export function flip( if ((axis as CollisionCoordinates).Y) { if ( positionY === 'top' && - elementRect.bottom > (viewPortElement?.clientHeight || window.innerHeight) + elementRect.bottom > (viewPortElement?.clientHeight || window.innerHeight) ) { position.top = targetRect.top - elementRect.height - offsetY; positionY = 'bottom'; @@ -82,39 +71,31 @@ export function flip( } return position; -} - -/** - * Adjusts the position of an element to fit within the viewport. - * - * @param {RefObject} element - The reference to the element to be positioned. - * @param {RefObject | null} viewPortElement - The reference to the viewport element (default: null). - * @param {CollisionCoordinates} axis - The axes to fit (default: {X: false, Y: false}). - * @param {OffsetPosition} position - The starting position of the element. - * @returns {OffsetPosition | null} The adjusted position as OffsetPosition or null. - */ -export function fit( - element: React.RefObject, - viewPortElement?: React.RefObject | null, +}; + +export const fit: (element: HTMLElement | null, + viewPortElement?: HTMLElement | null, + axis?: CollisionCoordinates, position?: OffsetPosition) +=> OffsetPosition | null = ( + element: HTMLElement | null, + viewPortElement?: HTMLElement | null, axis?: CollisionCoordinates, position?: OffsetPosition -): OffsetPosition | null { - if (!element?.current) { - console.warn('Fit function: Missing element reference.'); +): OffsetPosition | null => { + if (element === null) { return null; } if (!position) { - console.warn('Fit function: Missing position.'); return null; } - const elementRect: DOMRect = element.current.getBoundingClientRect(); + const elementRect: DOMRect = element.getBoundingClientRect(); const viewPortRect: DOMRect | { top: number; left: number; right: number; bottom: number } = - viewPortElement?.current?.getBoundingClientRect() || { - top: 0, - left: 0, - right: window.innerWidth, - bottom: window.innerHeight - }; + viewPortElement?.getBoundingClientRect() || { + top: 0, + left: 0, + right: window.innerWidth, + bottom: window.innerHeight + }; let { left, top } = position; @@ -137,64 +118,50 @@ export function fit( } return { left, top }; -} - -/** - * Checks if the element collides with the viewport. - * - * @param {RefObject | null} element - The reference to the element to check. - * @param {RefObject | null} viewPortElement - The reference to the viewport element (default: null). - * @param {number} x - specifies the number - * @param {number} y - specifies the number - * @returns {string[]} An array of collision sides ('top', 'left', 'right', 'bottom'). - */ -export function isCollide(element: React.RefObject, - viewPortElement: React.RefObject, x?: number, y?: number): string[] { - if (!element?.current) { - console.warn('isCollide function: Missing element reference.'); +}; + +export const isCollide: (element: HTMLElement | null, + viewPortElement: HTMLElement | null, x?: number, y?: number) => string[] = ( + element: HTMLElement | null, + viewPortElement: HTMLElement | null, + x?: number, + y?: number +): string[] => { + if (!element) { return []; } - const targetContainer: HTMLElement | null = viewPortElement?.current; - const parentDocument: Document = element.current.ownerDocument; - - const elementRect: DOMRect = element.current.getBoundingClientRect(); + const targetContainer: HTMLElement | null = viewPortElement; + const parentDocument: Document = element.ownerDocument; + const elementRect: DOMRect = element.getBoundingClientRect(); const left: number = x ? x : elementRect.left; const top: number = y ? y : elementRect.top; const right: number = left + elementRect.width; const bottom: number = top + elementRect.height; - const scrollLeft: number = parentDocument?.documentElement.scrollLeft || parentDocument?.body.scrollLeft || 0; const scrollTop: number = parentDocument?.documentElement.scrollTop || parentDocument?.body.scrollTop || 0; - - const containerRect: | DOMRect | { left: number; top: number; width: number; height: number } = - targetContainer?.getBoundingClientRect() || { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; - + const containerRect: DOMRect | { left: number; top: number; width: number; height: number } = + targetContainer?.getBoundingClientRect() || { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; const containerLeft: number = containerRect.left; const containerRight: number = scrollLeft + containerRect.left + containerRect.width; const containerTop: number = containerRect.top; const containerBottom: number = scrollTop + containerRect.top + containerRect.height; - return [top - scrollTop < containerTop ? 'top' : '', right > containerRight ? 'right' : '', - left - scrollLeft < containerLeft ? 'left' : '', bottom > containerBottom ? 'bottom' : ''].filter(Boolean); -} - -/** - * Finds the nearest transform element for an HTMLElement. - * - * @param {RefObject} element - The reference to the HTML element. - * @returns {HTMLElement | null} The nearest transform element or null. - */ -export function getTransformElement( - element: React.RefObject -): HTMLElement | null { - if (!element.current) { - console.warn('getTransformElement function: Missing element reference.'); + return [ + top - scrollTop < containerTop ? 'top' : '', + right > containerRight ? 'right' : '', + left - scrollLeft < containerLeft ? 'left' : '', + bottom > containerBottom ? 'bottom' : '' + ].filter(Boolean); +}; + +export const getTransformElement: (element: HTMLElement | null) => HTMLElement | null = ( + element: HTMLElement | null +): HTMLElement | null => { + if (element === null) { return null; } - - let currentElement: HTMLElement | null = element.current; - + let currentElement: HTMLElement | null = element; while (currentElement && currentElement !== document.body) { const style: CSSStyleDeclaration = window.getComputedStyle(currentElement); if (style.transform !== 'none' || parseFloat(style.zoom) !== 1) { @@ -202,22 +169,13 @@ export function getTransformElement( } currentElement = currentElement.parentElement; } - return null; -} +}; -/** - * Retrieves the zoom value of an HTMLElement. - * - * @param {RefObject} element - The reference to the HTML element. - * @returns {number} The zoom value as a float. - */ -export function getZoomValue(element: React.RefObject): number { - if (!element.current) { - console.warn('getZoomValue function: Missing element reference.'); +export const getZoomValue: (element: HTMLElement | null) => number = (element: HTMLElement | null): number => { + if (element === null) { return 1; } - - const style: CSSStyleDeclaration = window.getComputedStyle(element.current); + const style: CSSStyleDeclaration = window.getComputedStyle(element); return parseFloat(style.zoom) || 1; -} +}; diff --git a/components/popups/src/common/position.tsx b/components/popups/src/common/position.tsx index 2e51399..3a7908e 100644 --- a/components/popups/src/common/position.tsx +++ b/components/popups/src/common/position.tsx @@ -1,5 +1,3 @@ -// position.ts -import * as React from 'react'; /** * Provides information about a OffsetPosition. */ @@ -16,28 +14,18 @@ export interface PositionProps { Y: string; } -/** - * Calculates the absolute position of an element based on its reference, desired position, - * and optionally the target values. - * - * @param {React.RefObject} elementRef - Reference to the HTML element. - * @param {string} positionX - Desired X position ('left', 'center', 'right'). - * @param {string} positionY - Desired Y position ('top', 'center', 'bottom'). - * @param {DOMRect} [targetValues] - Optional DOMRect values to adjust the position. - * @returns {OffsetPosition} - Returns the calculated offset position. - */ -export function calculatePosition( - elementRef: React.RefObject, +export const calculatePosition: (elementRef: HTMLElement | null, + positionX: string, positionY: string, targetValues?: DOMRect) => OffsetPosition = ( + elementRef: HTMLElement | null, positionX: string, positionY: string, targetValues?: DOMRect -): OffsetPosition { - if (!elementRef.current) { - console.warn('calculatePosition: elementRef does not have a current value.'); +): OffsetPosition => { + if (!elementRef || elementRef === null) { return { left: 0, top: 0 }; } - const currentElement: HTMLElement = elementRef.current; + const currentElement: HTMLElement = elementRef; const parentDocument: Document = currentElement.ownerDocument; const elementRect: ClientRect = currentElement.getBoundingClientRect() || targetValues; const fixedElement: boolean = getComputedStyle(currentElement).position === 'fixed'; @@ -57,30 +45,21 @@ export function calculatePosition( }; return positionMap[`${positionY.toLowerCase()}${positionX.toLowerCase()}`] || positionMap['topleft']; -} +}; -/** - * Calculates the position of an element relative to an anchor element. - * - * @param {React.RefObject} anchor - Reference to the anchor HTML element. - * @param {React.RefObject} element - Reference to the HTML element to position. - * @returns {OffsetPosition} - Returns the relative offset position. - */ -export function calculateRelativeBasedPosition( - anchor: React.RefObject, - element: React.RefObject -): OffsetPosition { - if (!anchor.current || !element.current) { - console.warn('calculateRelativeBasedPosition: Missing anchor or element ref.'); +export const calculateRelativeBasedPosition: (anchor: HTMLElement | null, + element: HTMLElement | null) => OffsetPosition = ( + anchor: HTMLElement | null, + element: HTMLElement | null +): OffsetPosition => { + if (anchor === null || element === null) { return { left: 0, top: 0 }; } - - const anchorRect: DOMRect = anchor.current.getBoundingClientRect(); - const elementRect: DOMRect = element.current.getBoundingClientRect(); - const fixedElement: boolean = getComputedStyle(element.current).position === 'fixed'; - + const anchorRect: DOMRect = anchor.getBoundingClientRect(); + const elementRect: DOMRect = element.getBoundingClientRect(); + const fixedElement: boolean = getComputedStyle(element).position === 'fixed'; return { left: anchorRect.left - elementRect.left + (fixedElement ? 0 : window.pageXOffset || document.documentElement.scrollLeft), top: anchorRect.top - elementRect.top + (fixedElement ? 0 : window.pageYOffset || document.documentElement.scrollTop) }; -} +}; diff --git a/components/popups/src/index.ts b/components/popups/src/index.ts index 88693db..8a95182 100644 --- a/components/popups/src/index.ts +++ b/components/popups/src/index.ts @@ -5,3 +5,4 @@ export * from './popup/index'; export * from './common/index'; export * from './tooltip/index'; +export * from './spinner/index'; diff --git a/components/popups/src/popup/popup.tsx b/components/popups/src/popup/popup.tsx index 2d9baa3..7337a61 100644 --- a/components/popups/src/popup/popup.tsx +++ b/components/popups/src/popup/popup.tsx @@ -3,7 +3,7 @@ import { useRef, useEffect, useState, forwardRef, useImperativeHandle } from 're import { calculatePosition, OffsetPosition, calculateRelativeBasedPosition } from '../common/position'; import { AnimationOptions, IAnimation, preRender, useProviderContext } from '@syncfusion/react-base'; import { Animation } from '@syncfusion/react-base'; -import { flip, fit, isCollide } from '../common/collision'; +import { flip, fit, isCollide, CollisionCoordinates } from '../common/collision'; /** * PositionAxis type. @@ -87,28 +87,16 @@ export enum ActionOnScrollType { None = 'None' } -/** - * Defines the possible reference types for positioning a popup element. - */ -export enum TargetType { - /** - * Uses the immediate container element as the reference for positioning. - * The popup will be positioned relative to its parent container element. - */ - Container = 'Container', - +export interface PopupAnimationOptions { /** - * Uses a custom specified element as the reference for positioning. - * The popup will be positioned relative to this specified element. + * Specifies the animation that should happen when toast opens. */ - Relative = 'Relative', + show?: AnimationOptions; /** - * Uses the document body as the reference for positioning. - * The popup will be positioned relative to the document body, allowing it to be - * placed anywhere on the page regardless of parent container boundaries. + * Specifies the animation that should happen when toast closes. */ - Body = 'Body' + hide?: AnimationOptions; } export interface PopupProps { @@ -124,13 +112,6 @@ export interface PopupProps { */ isOpen?: boolean; - /** - * Specifies the relative element type of the component. - * - * @default TargetType.Container - */ - targetType?: TargetType; - /** Reference to the target element to which the popup is anchored. */ targetRef?: React.RefObject; @@ -159,18 +140,12 @@ export interface PopupProps { collision?: CollisionAxis; /** - * specifies the animation that should happen when popup open. - * - * @default 'null' - */ - showAnimation?: AnimationOptions; - - /** - * specifies the animation that should happen when popup closes. + * Specifies the animations that should happen when toast opens and closes. * - * @default 'null' + * @default { show: { name: 'FadeIn', duration: 0, timingFunction: 'ease-out' }, + * hide: { name: 'FadeOut', duration: 0, timingFunction: 'ease-out' } } */ - hideAnimation?: AnimationOptions; + animation?: PopupAnimationOptions; /** * Specifies the relative container element of the popup element.Based on the relative element, popup element will be positioned. @@ -183,7 +158,7 @@ export interface PopupProps { * * @default null */ - viewPortElementRef?: React.RefObject; + viewPortElementRef?: React.RefObject; /** Defines the popup relate's element when opening the popup. * @@ -237,6 +212,11 @@ export interface PopupProps { onTargetExitViewport?: () => void; } +interface EleOffsetPosition { + left: string | number + top: string | number +} + export interface IPopup extends IPopupProps { /** * Identifies all scrollable parent elements of a given element. @@ -283,207 +263,193 @@ type IPopupProps = PopupProps & Omit, * ``` */ export const Popup: React.ForwardRefExoticComponent> = -forwardRef < IPopup, IPopupProps > ((props: IPopupProps, ref: React.Ref < IPopup > ) => { - const { - children, - isOpen = false, - targetRef, - relativeElement = null, - position = { X: 'left', Y: 'top' }, - offsetX = 0, - offsetY = 0, - collision = { X: CollisionType.None, Y: CollisionType.None }, - showAnimation = { - name: 'FadeIn', - duration: 0, - timingFunction: 'ease-out'}, - hideAnimation = { - name: 'FadeOut', - duration: 0, - timingFunction: 'ease-out'}, - relateTo = 'body', - viewPortElementRef, - zIndex = 1000, - width = 'auto', - height = 'auto', - className = '', - actionOnScroll = ActionOnScrollType.Reposition, - onOpen, - onClose, - targetType = TargetType.Container, - onTargetExitViewport, - style, - ...rest - } = props; - let targetTypes: string = targetType.toString(); - const popupRef: React.RefObject = useRef < HTMLDivElement > (null); - const initialOpenState: React.RefObject = useRef(isOpen); - const [leftPosition, setLeftPosition] = useState < number > (0); - const [topPosition, setTopPosition] = useState < number > (0); - const [popupClass, setPopupClass] = useState < string > (CLASSNAME_CLOSE); - const [fixedParent, setFixedParent] = useState < boolean > (false); - const [popupZIndex, setPopupZIndex] = useState < number > (1000); - const { dir } = useProviderContext(); - const [currentShowAnimation, setCurrentShowAnimation] = useState(showAnimation); - const [currentHideAnimation, setCurrentHideAnimation] = useState(hideAnimation); - const [currentRelatedElement, setRelativeElement] = useState(relativeElement); - - useImperativeHandle( - ref, - () => ({ - getScrollableParent: (element: HTMLElement): Element[] => { - return getScrollableParent(element); - }, - refreshPosition: (target?: HTMLElement, collision?: boolean): void => { - refreshPosition(target, collision); + forwardRef((props: IPopupProps, ref: React.Ref) => { + const { + children, + isOpen = false, + targetRef, + relativeElement = null, + position = { X: 'left', Y: 'top' }, + offsetX = 0, + offsetY = 0, + collision = { X: CollisionType.None, Y: CollisionType.None }, + animation = { + show: { + name: 'FadeIn', + duration: 0, + timingFunction: 'ease-out' + }, + hide: { + name: 'FadeOut', + duration: 0, + timingFunction: 'ease-out' + } }, - element: popupRef.current - }), - [] - ); - - useEffect(() => { - preRender('popup'); - }, []); - - useEffect(() => { - updatePosition(); - }, [targetRef, position, offsetX, offsetY, viewPortElementRef]); - - useEffect(() => { - checkCollision(); - }, [collision]); - - useEffect(() => { - if (!isEqual(currentShowAnimation, showAnimation)) { - setCurrentShowAnimation(showAnimation); - } - }, [showAnimation]); - - useEffect(() => { - if (!isEqual(currentHideAnimation, hideAnimation)) { - setCurrentHideAnimation(hideAnimation); - } - }, [hideAnimation]); + relateTo = 'body', + viewPortElementRef, + zIndex = 1000, + width = 'auto', + height = 'auto', + className = '', + actionOnScroll = ActionOnScrollType.Reposition, + onOpen, + onClose, + onTargetExitViewport, + style, + ...rest + } = props; + const popupRef: React.RefObject = useRef(null); + const initialOpenState: React.RefObject = useRef(isOpen); + const [leftPosition, setLeftPosition] = useState(0); + const [topPosition, setTopPosition] = useState(0); + const [popupClass, setPopupClass] = useState(CLASSNAME_CLOSE); + const [fixedParent, setFixedParent] = useState(false); + const [popupZIndex, setPopupZIndex] = useState(1000); + const { dir } = useProviderContext(); + const [currentShowAnimation, setCurrentShowAnimation] = useState(animation.show as AnimationOptions); + const [currentHideAnimation, setCurrentHideAnimation] = useState(animation.hide as AnimationOptions); + const [currentRelatedElement, setRelativeElement] = useState(relativeElement); + + useImperativeHandle( + ref, + () => ({ + getScrollableParent: (element: HTMLElement): Element[] => { + return getScrollableParent(element); + }, + refreshPosition: (target?: HTMLElement, collision?: boolean): void => { + refreshPosition(target, collision); + }, + element: popupRef.current + }), + [] + ); - useEffect(() => { - if (!isOpen && initialOpenState.current === isOpen) { - return; - } - initialOpenState.current = isOpen; - if (isOpen) { - show(showAnimation, currentRelatedElement); - } else { - hide(hideAnimation); - } - }, [isOpen]); + useEffect(() => { + preRender('popup'); + }, []); - useEffect(() => { - setPopupZIndex(zIndex); - }, [zIndex]); + useEffect(() => { + updatePosition(); + }, [targetRef, position, offsetX, offsetY, viewPortElementRef]); - useEffect(() => { - setRelativeElement(relativeElement); - }, [relativeElement]); + useEffect(() => { + checkCollision(); + }, [collision]); - /** - * Compares two objects for equality by converting them to JSON strings. - * - * @param {any} obj1 - The first object to compare - * @param {any} obj2 - The second object to compare - * @returns {boolean} True if the objects are equal, false otherwise - */ - function isEqual(obj1: any, obj2: any): boolean { - return JSON.stringify(obj1) === JSON.stringify(obj2); - } + useEffect(() => { + if (!isEqual(currentShowAnimation, animation.show as AnimationOptions)) { + setCurrentShowAnimation(animation.show as AnimationOptions); + } + }, [animation.show]); - /** - * Based on the `relative` element and `offset` values, `Popup` element position will refreshed. - * - * @param {HTMLElement} target - The target element. - * @param {boolean} collision - Specifies whether to check for collision. - * @returns {void} - */ - function refreshPosition(target?: HTMLElement, collision?: boolean): void { - if (target) { - checkFixedParent(target as HTMLElement); - } - updatePosition(); - if (!collision) { - checkCollision(); - } - } + useEffect(() => { + if (!isEqual(currentHideAnimation, animation.hide as AnimationOptions)) { + setCurrentHideAnimation(animation.hide as AnimationOptions); + } + }, [currentHideAnimation, animation.hide]); - /** - * Update the position of the popup based on the target reference and specified position and offset. - * - * @returns {void} - */ - function updatePosition(): void { - if (!popupRef.current) { - return; - } - const relateToElement: HTMLElement = getRelateToElement(); - let pos: OffsetPosition = { left: 0, top: 0 }; - if (typeof position.X === 'number' && typeof position.Y === 'number') { - pos = { - left: position.X, - top: position.Y - }; - } else if ( - ((typeof position.X === 'string' && typeof position.Y === 'number') || - (typeof position.X === 'number' && typeof position.Y === 'string')) && targetRef?.current - ) { - const anchorPosition: OffsetPosition = getAnchorPosition( - targetRef.current, - popupRef.current, - position, - offsetX, - offsetY - ); - if (typeof position.X === 'string') { - pos = { left: anchorPosition.left, top: position.Y as number }; + useEffect(() => { + if (!isOpen && initialOpenState.current === isOpen) { + return; + } + initialOpenState.current = isOpen; + if (isOpen) { + show(animation.show, currentRelatedElement); } else { - pos = { left: position.X as number, top: anchorPosition.top }; + hide(animation.hide); } - } else if (typeof position.X === 'string' && typeof position.Y === 'string' && targetRef?.current) { - pos = calculatePosition(targetRef, position.X.toLowerCase(), position.Y.toLowerCase()); - pos.left += offsetX; - pos.top += offsetY; - } else if (relateToElement) { - pos = getAnchorPosition(relateToElement, popupRef.current, position, offsetX, offsetY); - } - if (pos) { - setLeftPosition(pos.left); - setTopPosition(pos.top); - } - } + }, [isOpen]); - /** - * Shows the popup element from screen. - * - * @returns {void} - * @param {AnimationOptions } animationOptions - specifies the model - * @param { HTMLElement } relativeElement - To calculate the zIndex value dynamically. - */ - function show(animationOptions?: AnimationOptions, relativeElement?: HTMLElement | null): void { - if (popupRef?.current) { - addScrollListeners(); - if (relativeElement || zIndex === 1000) { - const zIndexElement: HTMLElement = !relativeElement ? popupRef?.current as HTMLElement : relativeElement as HTMLElement; - setPopupZIndex(getZindexPartial(zIndexElement as HTMLElement)); + useEffect(() => { + setPopupZIndex(zIndex); + }, [zIndex]); + + useEffect(() => { + setRelativeElement(relativeElement); + }, [relativeElement]); + + const isEqual: (previousAnimation: AnimationOptions, currentAnimation: AnimationOptions) + => boolean = (previousAnimation: AnimationOptions, currentAnimation: AnimationOptions): boolean => { + return JSON.stringify(previousAnimation) === JSON.stringify(currentAnimation); + }; + + const refreshPosition: (target?: HTMLElement, collision?: boolean) => void = (target?: HTMLElement, collision?: boolean): void => { + if (target) { + checkFixedParent(target as HTMLElement); } - if (collision.X !== CollisionType.None || collision.Y !== CollisionType.None) { - setPopupClass(CLASSNAME_OPEN); + updatePosition(); + if (!collision) { checkCollision(); - setPopupClass(CLASSNAME_CLOSE); } + }; + + const updatePosition: () => void = (): void => { + const element: HTMLDivElement | null = popupRef.current; + const relateToElement: HTMLElement = getRelateToElement(); + let pos: EleOffsetPosition = { left: 0, top: 0 }; + + if (!element) {return; } + + if (typeof position.X === 'number' && typeof position.Y === 'number') { + pos = { left: position.X, top: position.Y }; + } else if ((typeof position.X === 'string' && typeof position.Y === 'number') || + (typeof position.X === 'number' && typeof position.Y === 'string')) { + const anchorPos: OffsetPosition = getAnchorPosition(relateToElement, element, position, offsetX, offsetY); + pos = typeof position.X === 'string' ? { left: anchorPos.left, top: position.Y } : { left: position.X, top: anchorPos.top }; + } else if (relateToElement) { + const display: string = element.style.display; + element.style.display = 'block'; + pos = getAnchorPosition(relateToElement, element, position, offsetX, offsetY); + element.style.display = display; + } + + if ((pos !== null)) { + setLeftPosition(pos.left as number); + setTopPosition(pos.top as number); + } + }; + + const show: (animationOptions?: AnimationOptions, relativeElement?: HTMLElement | null) + => void = (animationOptions?: AnimationOptions, relativeElement?: HTMLElement | null): void => { + if (popupRef?.current) { + addScrollListeners(); + if (relativeElement || zIndex === 1000) { + const zIndexElement: HTMLElement = !relativeElement ? popupRef?.current as HTMLElement : relativeElement as HTMLElement; + setPopupZIndex(getZindexPartial(zIndexElement as HTMLElement)); + } + if (collision.X !== CollisionType.None || collision.Y !== CollisionType.None) { + setPopupClass(CLASSNAME_OPEN); + checkCollision(); + setPopupClass(CLASSNAME_CLOSE); + } + if (animationOptions) { + animationOptions.begin = () => { + setPopupClass(CLASSNAME_OPEN); + }; + animationOptions.end = () => { + onOpen?.(); + }; + if (Animation) { + const animationInstance: IAnimation = Animation(animationOptions); + if (animationInstance.animate) { + animationInstance.animate(popupRef.current as HTMLElement); + } + } + } + } + }; + + const hide: (animationOptions?: AnimationOptions) => void = (animationOptions?: AnimationOptions): void => { if (animationOptions) { animationOptions.begin = () => { - setPopupClass(CLASSNAME_OPEN); + let duration: number = animationOptions.duration ? animationOptions.duration - 30 : 0; + duration = duration > 0 ? duration : 0; + setTimeout(() => { + setPopupClass(CLASSNAME_CLOSE); + }, duration); }; animationOptions.end = () => { - onOpen?.(); + onClose?.(); }; if (Animation) { const animationInstance: IAnimation = Animation(animationOptions); @@ -492,280 +458,252 @@ forwardRef < IPopup, IPopupProps > ((props: IPopupProps, ref: React.Ref < IPopup } } } - } - } + removeScrollListeners(); + }; - /** - * Hides the popup element from screen. - * - * @param {AnimationOptions} animationOptions - To give the animation options. - * @returns {void} - */ - function hide(animationOptions?: AnimationOptions): void { - if (animationOptions) { - animationOptions.begin = () => { - let duration: number = animationOptions.duration ? animationOptions.duration - 30 : 0; - duration = duration > 0 ? duration : 0; - setTimeout(() => { - setPopupClass(CLASSNAME_CLOSE); - }, duration); - }; - animationOptions.end = () => { - onClose?.(); - }; - if (Animation) { - const animationInstance: IAnimation = Animation(animationOptions); - if (animationInstance.animate) { - animationInstance.animate(popupRef.current as HTMLElement); + const callFit: (param: CollisionCoordinates) => void = (param: CollisionCoordinates) => { + const element: HTMLDivElement | null = popupRef.current; + const viewPortElement: HTMLElement | undefined | null = viewPortElementRef?.current; + + if (!element || !viewPortElement) { + return; + } + + if (isCollide(element, viewPortElement).length !== 0) { + let data: OffsetPosition = { left: 0, top: 0 }; + if (!viewPortElement) { + data = fit(element, viewPortElement, param) as OffsetPosition; + } else { + const elementRect: DOMRect = element.getBoundingClientRect(); + const viewPortRect: DOMRect = viewPortElement.getBoundingClientRect(); + + if (!elementRect || !viewPortRect) { + return; + } + + if (param.Y) { + if (viewPortRect.top > elementRect.top) { + element.style.top = '0px'; + } else if (viewPortRect.bottom < elementRect.bottom) { + element.style.top = `${parseInt(element.style.top, 10) - (elementRect.bottom - viewPortRect.bottom)}px`; + } + } + if (param.X) { + if (viewPortRect.right < elementRect.right) { + element.style.left = `${parseInt(element.style.left, 10) - (elementRect.right - viewPortRect.right)}px`; + } else if (viewPortRect.left > elementRect.left) { + element.style.left = `${parseInt(element.style.left, 10) + (viewPortRect.left - elementRect.left)}px`; + } + } + } + if (param.X) { + element.style.left = `${data.left}px`; + } + if (param.Y) { + element.style.top = `${data.top}px`; } } - } - removeScrollListeners(); - } + }; - /** - * Update the position of the popup based on the target reference and specified position and offset. - * - * @returns {void} - */ - function checkCollision(): void { - if (!popupRef.current || !targetRef?.current) { - return; - } - const pos: OffsetPosition = { left: 0, top: 0 }; - let isPositionUpdated: boolean = false; - if (collision.X !== CollisionType.None || collision.Y !== CollisionType.None) { - const flippedPos: OffsetPosition | null = flip( - popupRef as React.RefObject, - targetRef, + const callFlip: (param: CollisionCoordinates) => void = (param: CollisionCoordinates) => { + const element: HTMLDivElement | null = popupRef.current; + const relateToElement: string | HTMLElement = getRelateToElement(); + const viewPortElement: HTMLElement | undefined | null = viewPortElementRef?.current; + + if (!element || !relateToElement) { + return; + } + + const flippedPos: OffsetPosition | null = flip( + element, + relateToElement as HTMLElement, offsetX, offsetY, typeof position.X === 'string' ? position.X : 'left', typeof position.Y === 'string' ? position.Y : 'top', - viewPortElementRef, - { X: collision.X === CollisionType.Flip, Y: collision.Y === CollisionType.Flip } + viewPortElement, + param ); if (flippedPos) { - pos.left = flippedPos.left; - pos.top = flippedPos.top; - isPositionUpdated = true; + setLeftPosition(flippedPos.left); + setTopPosition(flippedPos.top); } + }; - if (collision.X === CollisionType.Fit || collision.Y === CollisionType.Fit) { - const fittedPos: OffsetPosition | null = fit( - popupRef as React.RefObject, - viewPortElementRef, - { - X: collision.X === CollisionType.Fit, - Y: collision.Y === CollisionType.Fit - }, - pos - ); - - if (fittedPos) { - pos.left = fittedPos.left; - pos.top = fittedPos.top; - isPositionUpdated = true; + const checkCollision: () => void = (): void => { + const horz: CollisionType | undefined = collision.X; + const vert: CollisionType | undefined = collision.Y; + if (horz === CollisionType.None && vert === CollisionType.None) { + return; + } + if (horz === CollisionType.Flip && vert === CollisionType.Flip) { + callFlip({X: true, Y: true}); + } else if (horz === CollisionType.Fit && vert === CollisionType.Fit) { + callFit({X: true, Y: true}); + } else { + if (horz === CollisionType.Flip) { + callFlip({X: true, Y: false}); + } else if (vert === CollisionType.Flip) { + callFlip({Y: true, X: false}); + } + if (horz === CollisionType.Fit) { + callFit({X: true, Y: false}); + } else if (vert === CollisionType.Fit) { + callFit({X: false, Y: true}); } } - } - - if (isPositionUpdated) { - setLeftPosition(pos.left); - setTopPosition(pos.top); - } - } - - /** - * Calculates and returns the anchor position for a popup element. - * This function takes into account the current position, any offsets provided, - * and the dimensions of the target and popup elements to calculate the appropriate - * position for the popup. - * - * @param {HTMLElement} anchorEle - The reference to the target element. This is the element to which the popup is anchored. - * @param {HTMLElement} element - The reference to the popup element. This is the element that needs to be positioned. - * @param {PositionAxis} position - An object defining the initial x and y positions. - * @param {number} offsetX - Optional x-axis offset for fine-tuning the popup's position. - * @param {number} offsetY - Optional y-axis offset for fine-tuning the popup's position. - * @returns {OffsetPosition} An object containing the calculated x and y positions for the popup. - */ - function getAnchorPosition( - anchorEle: HTMLElement, - element: HTMLElement, - position: PositionAxis, - offsetX: number, - offsetY: number - ): OffsetPosition { - const anchorRect: DOMRect = anchorEle.getBoundingClientRect(); - const eleRect: DOMRect = element.getBoundingClientRect(); - const anchorPos: OffsetPosition = { left: 0, top: 0 }; - targetTypes = anchorEle.tagName.toUpperCase() === 'BODY' ? 'body' : 'container'; - switch (position.X) { - case 'center': - anchorPos.left = targetTypes === 'body' ? window.innerWidth / 2 - eleRect.width / 2 - : anchorRect.left + (anchorRect.width / 2 - eleRect.width / 2); - break; - case 'right': - anchorPos.left = targetTypes === 'body' ? window.innerWidth - eleRect.width - : anchorRect.left + (anchorRect.width - eleRect.width); - break; - default: - anchorPos.left = anchorRect.left; - } - - switch (position.Y) { - case 'center': - anchorPos.top = targetTypes === 'body' ? window.innerHeight / 2 - eleRect.height / 2 - : anchorRect.top + (anchorRect.height / 2 - eleRect.height / 2); - break; - case 'bottom': - anchorPos.top = targetTypes === 'body' ? window.innerHeight - eleRect.height - : anchorRect.top + (anchorRect.height - eleRect.height); - break; - default: - anchorPos.top = anchorRect.top; - } - - anchorPos.left += offsetX; - anchorPos.top += offsetY; - - return anchorPos; - } - - /** - * Adds scroll listeners to handle popup positioning when the target container is scrolled. - * - * @returns {void} - */ - function addScrollListeners(): void { - if (actionOnScroll !== ActionOnScrollType.None && getRelateToElement()) { - const scrollParents: Element[] = getScrollableParent(getRelateToElement()); - scrollParents.forEach((parent: Element) => { - parent.addEventListener('scroll', handleScroll); - }); - } - } + }; + + const getAnchorPosition: (anchorEle: HTMLElement, element: HTMLElement, + position: PositionAxis, offsetX: number, offsetY: number) => OffsetPosition = ( + anchorEle: HTMLElement, + element: HTMLElement, + position: PositionAxis, + offsetX: number, + offsetY: number + ): OffsetPosition => { + const anchorRect: DOMRect = anchorEle.getBoundingClientRect(); + const eleRect: DOMRect = element.getBoundingClientRect(); + const anchorPos: OffsetPosition = { left: 0, top: 0 }; + const targetTypes: string = anchorEle.tagName.toUpperCase() === 'BODY' ? 'body' : 'container'; + + switch (position.X) { + default: + case 'left': + break; + case 'center': + anchorPos.left = targetTypes === 'body' + ? window.innerWidth / 2 - eleRect.width / 2 + : anchorRect.left + (anchorRect.width / 2 - eleRect.width / 2); + break; + case 'right': + if (targetTypes === 'container') { + const scaleX: number = 1; + anchorPos.left += ((anchorRect.width - eleRect.width) / scaleX); + } else { + anchorPos.left += (anchorRect.width); + } + break; + } - /** - * Removes scroll listeners. - * - * @returns {void} - */ - function removeScrollListeners(): void { - if (actionOnScroll !== ActionOnScrollType.None && getRelateToElement()) { - const scrollParents: Element[] = getScrollableParent(getRelateToElement()); - scrollParents.forEach((parent: Element) => { - parent.removeEventListener('scroll', handleScroll); - }); - } - } + switch (position.Y) { + case 'top': + break; + case 'center': + anchorPos.top = targetTypes === 'body' + ? window.innerHeight / 2 - eleRect.height / 2 + : anchorRect.top + (anchorRect.height / 2 - eleRect.height / 2); + break; + case 'bottom': + anchorPos.top = targetTypes === 'body' + ? window.innerHeight - eleRect.height + : anchorRect.top + (anchorRect.height - eleRect.height); + break; + } + anchorPos.left += offsetX; + anchorPos.top += offsetY; + + return anchorPos; + }; + + const addScrollListeners: () => void = (): void => { + if (actionOnScroll !== ActionOnScrollType.None && getRelateToElement()) { + const scrollParents: Element[] = getScrollableParent(getRelateToElement()); + scrollParents.forEach((parent: Element) => { + parent.addEventListener('scroll', handleScroll); + }); + } + }; + + const removeScrollListeners: () => void = (): void => { + if (actionOnScroll !== ActionOnScrollType.None && getRelateToElement()) { + const scrollParents: Element[] = getScrollableParent(getRelateToElement()); + scrollParents.forEach((parent: Element) => { + parent.removeEventListener('scroll', handleScroll); + }); + } + }; + + const getRelateToElement: () => HTMLElement = (): HTMLElement => { + const relateToElement: HTMLElement | string = relateTo === '' || relateTo === null || relateTo === 'body' ? document.body : relateTo; + return relateToElement as HTMLElement; + }; + + const handleScroll: () => void = (): void => { + if (actionOnScroll === ActionOnScrollType.Reposition) { + refreshPosition(); + } else if (actionOnScroll === ActionOnScrollType.Hide) { + hide(); + onClose?.(); + } + if (targetRef?.current && !isElementOnViewport(targetRef?.current)) { + onTargetExitViewport?.(); + } + }; - /** - * Determines the element to which the popup is related. - * - * @returns {HTMLElement} The HTMLElement that the popup is related to. - */ - function getRelateToElement(): HTMLElement { - const relateToElement: HTMLElement | string = relateTo === '' || relateTo == null ? document.body : relateTo; - return typeof relateToElement === 'string' ? (document.querySelector(relateToElement) as HTMLElement) : relateToElement; - } + const getScrollableParent: (element: HTMLElement) => Element[] = (element: HTMLElement): Element[] => { + checkFixedParent(element); + return getFixedScrollableParent(element, fixedParent); + }; - /** - * Handle scroll event to optionally reposition or hide the popup. - * - * @returns {void} - */ - function handleScroll(): void { - if (actionOnScroll === ActionOnScrollType.Reposition) { - refreshPosition(); - } else if (actionOnScroll === ActionOnScrollType.Hide) { - hide(); - onClose?.(); - } - if (targetRef?.current && !isElementOnViewport(targetRef?.current)) { - onTargetExitViewport?.(); - } - } + const checkFixedParent: (element: HTMLElement) => void = (element: HTMLElement): void => { + let parent: HTMLElement | null = element.parentElement; + while (parent && parent.tagName !== 'HTML') { + const { position } = getComputedStyle(parent); - /** - * Identifies scrollable parents of a given element, used to attach scroll event listeners. - * - * @param {HTMLElement} element - The element to find scrollable parents for. - * @returns {Element[]} An array of scrollable parent elements. - */ - function getScrollableParent(element: HTMLElement): Element[] { - checkFixedParent(element); - return getFixedScrollableParent(element, fixedParent); - } + if (popupRef?.current) { + const popupElement: HTMLElement = popupRef.current; + const popupElementStyle: CSSStyleDeclaration = getComputedStyle(popupElement); - /** - * Checks for fixed or sticky positioned ancestors and updates popup positioning. - * - * @param {HTMLElement} element - The starting element to check for fixed or sticky parents. - * @returns {void} This function does not return a value. - */ - function checkFixedParent(element: HTMLElement): void { - let parent: HTMLElement | null = element.parentElement; - while (parent && parent.tagName !== 'HTML') { - const { position } = getComputedStyle(parent); - if (popupRef?.current) { - const popupElement: HTMLElement = popupRef.current; - const popupElementStyle: CSSStyleDeclaration = getComputedStyle(popupElement); - if (!popupElement?.offsetParent && position === 'fixed' && popupElementStyle && popupElementStyle.position === 'fixed') { - setFixedParent(true); + if (!popupElement?.offsetParent && position === 'fixed' && popupElementStyle && popupElementStyle.position === 'fixed') { + setFixedParent(true); + } + parent = parent.parentElement; } - parent = parent.parentElement; } - } - } + }; + + const isElementOnViewport: (element: Element) => boolean = (element: Element): boolean => { + const rect: DOMRect = element.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= window.innerHeight && + rect.right <= window.innerWidth + ); + }; + + const popupStyle: React.CSSProperties = { + position: 'absolute', + left: `${leftPosition}px`, + top: `${topPosition}px`, + zIndex: popupZIndex, + width: width, + height: height, + ...style + }; + + const popupClasses: string = [ + 'sf-popup sf-control sf-lib', + (dir === 'rtl') ? 'sf-rtl' : '', + popupClass, + className + ] + .filter(Boolean) + .join(' '); - /** - * Checks if a given element is fully visible in the current viewport. - * - * @param {Element} element - The element to check. - * @returns {boolean} True if the element is within the viewport, otherwise false. - */ - function isElementOnViewport(element: Element): boolean { - const rect: DOMRect = element.getBoundingClientRect(); return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= window.innerHeight && - rect.right <= window.innerWidth +
    + {children} +
    ); - } - - const popupStyle: React.CSSProperties = { - position: 'absolute', - left: `${leftPosition}px`, - top: `${topPosition}px`, - zIndex: popupZIndex, - width: width, - height: height, - ...style - }; - - const popupClasses: string = [ - 'sf-popup sf-control sf-lib', - (dir === 'rtl') ? 'sf-rtl' : '', - popupClass, - className - ] - .filter(Boolean) - .join(' '); - - return ( -
    - {children} -
    - ); -}); + }); export default React.memo(Popup); @@ -779,16 +717,10 @@ export { getFixedScrollableParent }; -/** - * Gets the maximum z-index of the given element. - * - * @returns {void} - * @param { HTMLElement } element - Specify the element to get the maximum z-index of it. - * @private - */ -function getZindexPartial(element: HTMLElement): number { +const getZindexPartial: (element: HTMLElement) => number = (element: HTMLElement): number => { let parent: HTMLElement | null = element.parentElement; const parentZindex: string[] = []; + while (parent) { if (parent.tagName !== 'BODY') { const computedStyle: CSSStyleDeclaration = window.getComputedStyle(parent); @@ -802,6 +734,7 @@ function getZindexPartial(element: HTMLElement): number { break; } } + const childrenZindex: string[] = []; for (let i: number = 0; i < document.body.children.length; i++) { const child: Element = document.body.children[i as number] as Element; @@ -815,11 +748,10 @@ function getZindexPartial(element: HTMLElement): number { } } childrenZindex.push('999'); + const siblingsZindex: string[] = []; if (element.parentElement && element.parentElement.tagName !== 'BODY') { - const childNodes: HTMLElement[] = Array.from( - element.parentElement.children - ) as HTMLElement[]; + const childNodes: HTMLElement[] = Array.from(element.parentElement.children) as HTMLElement[]; for (let i: number = 0; i < childNodes.length; i++) { const child: Element = childNodes[i as number] as Element; if (!element.isEqualNode(child) && child instanceof HTMLElement) { @@ -832,23 +764,18 @@ function getZindexPartial(element: HTMLElement): number { } } } - const finalValue: string[] = parentZindex.concat(childrenZindex, siblingsZindex - ); + + const finalValue: string[] = parentZindex.concat(childrenZindex, siblingsZindex); const currentZindexValue: number = Math.max(...finalValue.map(Number)) + 1; return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue; -} +}; -/** - * Gets scrollable parent elements for the given element. - * - * @param {HTMLElement} element - The element to get the scrollable parents of. - * @param {boolean} [fixedParent] - Whether to include fixed-positioned parents. - * @returns {HTMLElement[]} An array of scrollable parent elements. - */ -function getFixedScrollableParent(element: HTMLElement, fixedParent: boolean = false): HTMLElement[] { +const getFixedScrollableParent: (element: HTMLElement, fixedParent?: boolean) +=> HTMLElement[] = (element: HTMLElement, fixedParent: boolean = false): HTMLElement[] => { const scrollParents: HTMLElement[] = []; const overflowRegex: RegExp = /(auto|scroll)/; let parent: HTMLElement | null = element.parentElement; + while (parent && parent.tagName !== 'HTML') { const { position, overflow, overflowY, overflowX } = getComputedStyle(parent); if (!(getComputedStyle(element).position === 'absolute' && position === 'static') @@ -857,8 +784,9 @@ function getFixedScrollableParent(element: HTMLElement, fixedParent: boolean = f } parent = parent.parentElement; } + if (!fixedParent) { scrollParents.push(document.documentElement); } return scrollParents; -} +}; diff --git a/components/popups/src/spinner/index.ts b/components/popups/src/spinner/index.ts new file mode 100644 index 0000000..9961c0b --- /dev/null +++ b/components/popups/src/spinner/index.ts @@ -0,0 +1,4 @@ +/** + * spinner modules + */ +export * from './spinner'; diff --git a/components/popups/src/spinner/spinner.tsx b/components/popups/src/spinner/spinner.tsx new file mode 100644 index 0000000..3563853 --- /dev/null +++ b/components/popups/src/spinner/spinner.tsx @@ -0,0 +1,414 @@ +import { preRender } from '@syncfusion/react-base'; +import * as React from 'react'; +import { useState, useEffect, useRef, useImperativeHandle, forwardRef, useMemo } from 'react'; +import * as ReactDOM from 'react-dom'; + +const DEFT_WIDTHS: Record = { + Material3: 30, + Fluent2: 30, + Bootstrap5: 36, + Tailwind3: 30 +}; + +const CLS_MAPPINGS: Record = { + Material3: 'sf-spin-material3', + Fluent2: 'sf-spin-fluent2', + Bootstrap5: 'sf-spin-bootstrap5', + Tailwind3: 'sf-spin-tailwind3' +}; + +const CLS_SPINWRAP: string = 'sf-spinner-pane'; +const CLS_SPININWRAP: string = 'sf-spinner-inner'; +const CLS_SPINCIRCLE: string = 'sf-path-circle'; +const CLS_SPINARC: string = 'sf-path-arc'; +const CLS_SPINLABEL: string = 'sf-spin-label'; +const CLS_SPINTEMPLATE: string = 'sf-spin-template'; + +/** + * Defines the available design systems for spinner appearance. + * Each option represents a different visual style based on popular UI frameworks. + */ +export enum SpinnerType { + /** + * Material Design 3 spinner style with circular animation following + * Google's Material Design guidelines. + */ + Material3 = 'Material3', + + /** + * Bootstrap 5 spinner style following the Bootstrap framework's + * visual design patterns. + */ + Bootstrap5 = 'Bootstrap5', + + /** + * Fluent Design 2 spinner style following Microsoft's Fluent design + * system guidelines. + */ + Fluent2 = 'Fluent2', + + /** + * Tailwind CSS 3 spinner style following the Tailwind design + * aesthetic and principles. + */ + Tailwind3 = 'Tailwind3' +} + +/** + * Interface for the Spinner component props + * + * @public + */ +export interface SpinnerProps { + /** + * Defines the type/style of the Spinner + * + * @default SpinnerType.Material3 + */ + type?: SpinnerType; + + /** + * Text to be displayed below the Spinner + * + * @default - + */ + label?: string; + + /** + * Width of the Spinner in pixels or as string with units + * + * @default Based on the type selected (DEFT_WIDTHS mapping) + */ + width?: string | number; + + /** + * Controls the visibility state of the component. + * + * When true, the component will be rendered and displayed. + * When false, the component will be hidden but may remain in the DOM based on implementation. + * If not specified, the component will follow its default visibility behavior. + * + * @default false + */ + visible?: boolean; + + /** + * Custom HTML template for the Spinner + * + * @default - + */ + template?: string; + + /** + * Target element where the Spinner should be rendered + * + * @default - + */ + target?: HTMLElement | string; +} + +/** + * Interface for Spinner component with additional method. + */ +export interface ISpinner extends SpinnerProps { + /** + * This is spinner component element. + * + * @private + * @default null + */ + element?: HTMLElement | null; +} + +type ISpinnerProps = SpinnerProps & Omit, keyof SpinnerProps>; + + +const globalTemplate: string | null = null; +const globalCssClass: string | null = null; +const globalType: SpinnerType | null = null; +const spinnerInstances: React.RefObject[] = []; + +/** + * A versatile Spinner component that provides visual feedback for loading states. + * + * The Spinner supports multiple design systems through the SpinnerType enum + * and can be customized with various properties for size, color, and behavior. + * + * ```typescript + * + * ``` + */ +export const Spinner: React.ForwardRefExoticComponent< +ISpinnerProps & React.RefAttributes +> = forwardRef>( + (props: ISpinnerProps, ref: React.Ref) => { + const animationFrameRef: React.RefObject = useRef(null); + const { + className = '', + label, + width, + visible = false, + template, + target, + type: propType, + ...restProps + } = props; + + const [show, setIsVisible] = useState(visible); + const type: SpinnerType | null = propType || globalType || null; + const spinnerRef: React.RefObject = useRef(null); + const targetRef: React.RefObject = useRef(null); + useImperativeHandle(ref, () => ({ + element: spinnerRef.current + })); + useEffect(() => { + spinnerInstances.push(ref as React.RefObject); + return () => { + const index: number = spinnerInstances.indexOf(ref as React.RefObject); + if (index > -1) { + spinnerInstances.splice(index, 1); + } + }; + }, [ref]); + + useEffect(() => { + preRender('spinner'); + }, []); + + useEffect(() => { + setIsVisible(visible); + }, [visible]); + + useEffect(() => { + if (target) { + targetRef.current = typeof target === 'string' ? document.querySelector(target) : target; + } + }, [target]); + + const calculateRadius: number = useMemo(() => { + const baseWidth: number = DEFT_WIDTHS[type || 'Material3']; + const parsedWidth: number = width !== undefined ? parseFloat(width.toString()) : baseWidth; + return parsedWidth / (2); + }, [width, type]); + + const getSpinnerClassNames: () => string = () => { + return [ + CLS_SPINWRAP, + className || globalCssClass, + show ? 'sf-spin-show' : 'sf-spin-hide', + template || globalTemplate ? CLS_SPINTEMPLATE : '' + ].filter(Boolean).join(' '); + }; + const useAnimatedRotation: (deps?: never[]) => number = (deps: never[] | undefined = []): number => { + const [rotation, setRotation] = useState(0); + useEffect(() => { + if (!show) { return; } + const interval: NodeJS.Timeout = setInterval(() => { + setRotation((prev: number) => (prev + 45) % 360); + }, 100); + + return () => clearInterval(interval); + }, [show, ...deps]); + + return rotation; + }; + const randomGenerator: () => string = () => { + const combine: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + return Array.from({ length: 5 }, () => combine.charAt(Math.floor(Math.random() * combine.length))).join(''); + }; + + const getStrokeSize: (diameter: number) => number = (diameter: number) => { + return (10 / 100) * diameter; + }; + const drawArc: (diameter: number, strokeSize: number) => string = (diameter: number, strokeSize: number) => { + const radius: number = diameter / 2; + const offset: number = strokeSize / 2; + return `M${radius},${offset}A${radius - offset},${radius - offset} 0 1 1 ${offset},${radius}`; + }; + const defineCircle: (x: number, y: number, radius: number) => string = (x: number, y: number, radius: number) => { + return `M ${x} ${y} m ${-radius} 0 a ${radius} ${radius} 0 1 0 ${radius * 2} 0 a ${radius} ${radius} 0 1 0 ${-radius * 2} 0`; + }; + + const defineArc: (x: number, y: number, radius: number, startArc: number, endArc: number) => string = + (x: number, y: number, radius: number, startArc: number, endArc: number) => { + const start: { x: number; y: number; } = defineArcPoints(x, y, radius, endArc); + const end: { x: number; y: number; } = defineArcPoints(x, y, radius, startArc); + return `M ${start.x} ${start.y} A ${radius} ${radius} 0 0 0 ${end.x} ${end.y}`; + }; + + const defineArcPoints: (centerX: number, centerY: number, radius: number, angle: number) => { x: number; y: number } = + (centerX: number, centerY: number, radius: number, angle: number) => { + const radians: number = (angle - 90) * Math.PI / 180.0; + return { + x: centerX + (radius * Math.cos(radians)), + y: centerY + (radius * Math.sin(radians)) + }; + }; + + const renderBootstrapLikeSpinner: (spinnerType: 'Bootstrap5') => React.ReactNode = + (spinnerType: 'Bootstrap5') => { + const uniqueID: string = useRef(randomGenerator()).current; + const rotation: number = useAnimatedRotation(); + const className: string = spinnerType; + return show ? ( + + + + ) : null; + }; + const getDashOffset: ( + diameter: number, + strokeSize: number, + value: number, + max: number + ) => number = (diameter: number, strokeSize: number, value: number, max: number) => { + return (diameter - strokeSize) * Math.PI * ((3 * (max) / 100) - (value / 100)); + }; + const easeAnimation: (current: number, start: number, change: number, duration: number) => number = + (current: number, start: number, change: number, duration: number) => { + const timestamp: number = (current /= duration) * current; + const timecount: number = timestamp * current; + return start + change * (6 * timecount * timestamp + -15 * timestamp * timestamp + 10 * timecount); + }; + const renderMaterialLikeSpinner: (spinnerType: SpinnerType, radius: number) => React.ReactNode = + (spinnerType: SpinnerType, radius: number) => { + const uniqueID: string = useRef(randomGenerator()).current; + const diameter: number = radius * 2; + const strokeSize: number = getStrokeSize(diameter); + const [offset, setOffset] = useState(getDashOffset(diameter, strokeSize, 1, 75)); + const [rotation, setRotation] = useState(0); + const startTimeRef: React.RefObject = useRef(null); + const rotationCountRef: React.RefObject = useRef(0); + useEffect(() => { + if (!show) { return; } + const animate: (timestamp: number) => void = (timestamp: number) => { + if (!startTimeRef.current) { startTimeRef.current = timestamp; } + const elapsed: number = timestamp - startTimeRef.current; + const duration: number = 1333; + const progress: number = (elapsed % duration) / duration; + const easedProgress: number = easeAnimation(progress, 0, 1, 1); + const start: number = 1; + const end: number = 149; + const max: number = 75; + const currentValue: number = start + (end - start) * easedProgress; + setOffset(getDashOffset(diameter, strokeSize, currentValue, max)); + if (elapsed >= duration) { + rotationCountRef.current += 1; + setRotation(rotationCountRef.current * -90); + startTimeRef.current = timestamp; + } + animationFrameRef.current = requestAnimationFrame(animate); + }; + animationFrameRef.current = requestAnimationFrame(animate); + return () => { + if (animationFrameRef.current !== null) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, [show, diameter, strokeSize]); + let className: string; + switch (spinnerType) { + case 'Tailwind3': + className = CLS_MAPPINGS['Tailwind3']; + break; + default: + className = CLS_MAPPINGS['Material3']; + } + return show ? ( + + + + ) : null; + }; + + const renderCommonSpinner: (spinnerType: SpinnerType) => React.ReactNode = + (spinnerType: SpinnerType) => { + const uniqueID: string = useRef(randomGenerator()).current; + const className: string = spinnerType; + return ( + + + + + ); + }; + const renderSpinnerContent: () => React.ReactNode = () => { + const effectiveTemplate: string | null = template || globalTemplate; + if (effectiveTemplate) { + return
    ; + } + const spinnerType: SpinnerType = type || SpinnerType.Material3; + const radius: number = calculateRadius; + switch (spinnerType) { + case 'Bootstrap5': + return renderBootstrapLikeSpinner(spinnerType); + case 'Fluent2': + return renderCommonSpinner(spinnerType); + case 'Material3': + case 'Tailwind3': + default: + return renderMaterialLikeSpinner(spinnerType, radius); + } + }; + + const spinnerContent: React.JSX.Element = ( +
    +
    + {renderSpinnerContent()} + {label &&
    {label}
    } +
    +
    + ); + + if (targetRef.current) { + return ReactDOM.createPortal(spinnerContent, targetRef.current); + } + + return spinnerContent; + }); + +export default Spinner; diff --git a/components/popups/src/tooltip/tooltip.tsx b/components/popups/src/tooltip/tooltip.tsx index 196c35a..8f65428 100644 --- a/components/popups/src/tooltip/tooltip.tsx +++ b/components/popups/src/tooltip/tooltip.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { useRef, useCallback, useEffect, useLayoutEffect, useState, useImperativeHandle, forwardRef, RefObject, HTMLAttributes } from 'react'; -import { TapEventArgs, Touch, ITouch, Browser, Animation as PopupAnimation, animationMode, AnimationOptions, TouchEventArgs, MouseEventArgs } from '@syncfusion/react-base'; +import { TapEventArgs, Touch, ITouch, Browser, Animation as AnimationInstance, animationMode, TouchEventArgs, MouseEventArgs } from '@syncfusion/react-base'; import { isNullOrUndefined, getUniqueID, formatUnit } from '@syncfusion/react-base'; import { attributes, closest, preRender, SvgIcon } from '@syncfusion/react-base'; -import { IPopup, Popup } from '../popup/popup'; +import { IPopup, Popup, PopupAnimationOptions } from '../popup/popup'; import { OffsetPosition, calculatePosition } from '../common/position'; import { isCollide, fit } from '../common/collision'; import { createPortal } from 'react-dom'; @@ -333,7 +333,9 @@ type TooltipComponentProps = TooltipProps & Omit, * It supports various positions, animations, and customization options. * * ```typescript - * This is a Tooltip} position='BottomCenter'>Hover me + * This is a Tooltip}> + * Hover me + * * ``` */ export const Tooltip: React.ForwardRefExoticComponent> = @@ -370,8 +372,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref const [isHidden, setIsHidden] = useState(true); const [isPopupOpen, setIsPopupOpen] = useState(false); - const [openAnimation, setOpenAnimation] = useState(undefined); - const [closeAnimation, setCloseAnimation] = useState(undefined); + const [PopupAnimation, setPopupAnimation] = useState(undefined); const [openTarget, setOpenTarget] = useState(null); const [isTooltipOpen, setIsTooltipOpen] = useState(false); const [tipClass, setTipClassState] = useState(TIP_BOTTOM); @@ -632,8 +633,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref tooltipEle.current.element.style.zoom = (getComputedStyle(parentWithZoomStyle) as CSSStyleDeclaration).zoom; } } - const targetRef: React.RefObject = { current: target }; - const pos: OffsetPosition = calculatePosition(targetRef, tooltipPosition.current.x?.toLowerCase() as string, + const pos: OffsetPosition = calculatePosition(target, tooltipPosition.current.x?.toLowerCase() as string, tooltipPosition.current.y?.toLowerCase() as string, isBodyContainer.current ? undefined : containerElement.current?.getBoundingClientRect()); @@ -680,7 +680,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref clear(); const currentTooltipEle: RefObject = React.createRef() as RefObject; currentTooltipEle.current = tooltipEle.current?.element as HTMLElement; - PopupAnimation.stop(currentTooltipEle.current); + AnimationInstance.stop(currentTooltipEle.current); scrolled.current = false; setIsHidden(true); }; @@ -986,7 +986,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref addDescribedBy(target, TooltipStyle?.id as string); const currentTooltipEle: RefObject = React.createRef() as RefObject; currentTooltipEle.current = tooltipEle.current?.element as HTMLElement; - PopupAnimation.stop(currentTooltipEle.current); + AnimationInstance.stop(currentTooltipEle.current); reposition(target); tooltipAfterRender(target, e, showAnimation); } @@ -1014,7 +1014,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref adjustArrow(target, position, tooltipPosition.current.x as string, tooltipPosition.current.y as string); const currentTooltipEle: RefObject = React.createRef() as RefObject; currentTooltipEle.current = tooltipEle.current?.element as HTMLElement; - PopupAnimation.stop(currentTooltipEle.current); + AnimationInstance.stop(currentTooltipEle.current); reposition(target); } }; @@ -1043,7 +1043,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref } if (tooltipEle.current?.element) { setOpenTarget(target); - setOpenAnimation(openAnimation); + setPopupAnimation((prev: PopupAnimationOptions | undefined) => ({ show: openAnimation, hide: prev?.hide })); setIsPopupOpen(true); if (mouseEventsRef.current.event && followCursor) { onMouseMove(mouseEventsRef.current.event); } } @@ -1052,7 +1052,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref } else { if (tooltipEle.current) { setOpenTarget(target); - setOpenAnimation(openAnimation); + setPopupAnimation((prev: PopupAnimationOptions | undefined) => ({ show: openAnimation, hide: prev?.hide })); setIsPopupOpen(true); } } @@ -1070,11 +1070,9 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref vertical: tooltipPosition.current.y as string }; const collideTarget: RefObject = checkCollideTarget() as RefObject; - const currentTooltipEle: RefObject = React.createRef() as RefObject; - currentTooltipEle.current = tooltipEle.current?.element as HTMLElement; const affectedPos: string[] = isCollide( - currentTooltipEle, - collideTarget as RefObject, sticky && position.indexOf('Right') >= 0 ? (stickyElementRef.current as HTMLElement).offsetWidth + x : x , y ); + tooltipEle.current?.element as HTMLElement, + collideTarget ? collideTarget.current : null, sticky && position.indexOf('Right') >= 0 ? (stickyElementRef.current as HTMLElement).offsetWidth + x : x , y ); if (affectedPos.length > 0) { elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' : tooltipPosition.current.x as string; @@ -1116,7 +1114,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref const elePosVertical: string = elePos.vertical; const elePosHorizontal: string = elePos.horizontal; if (elePos.position !== newPos) { - const pos: OffsetPosition = calculatePosition({ current: target }, elePosHorizontal.toLowerCase(), + const pos: OffsetPosition = calculatePosition(target, elePosHorizontal.toLowerCase(), elePosVertical.toLowerCase(), isBodyContainer.current ? undefined : containerElement.current?.getBoundingClientRect()); adjustArrow(target, newPos, elePosHorizontal, elePosVertical); @@ -1135,10 +1133,8 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref } const eleOffset: OffsetPosition = { left: elePos.left, top: elePos.top }; const collideTarget: RefObject = checkCollideTarget() as RefObject; - const currentTooltipEle: RefObject = React.createRef() as RefObject; - currentTooltipEle.current = tooltipEle.current?.element as HTMLElement; const updatedPosition: OffsetPosition = isBodyContainer.current ? - fit(currentTooltipEle, collideTarget ? collideTarget : null, + fit(tooltipEle.current?.element as HTMLElement, collideTarget ? collideTarget.current : null, { X: true, Y: windowCollision }, eleOffset) as OffsetPosition : eleOffset; if (arrow && arrowElementRef.current != null && (newPos.indexOf('Bottom') === 0 || newPos.indexOf('Top') === 0)) { let arrowLeft: number = parseInt(arrowElementRef.current.style.left, 10) - (updatedPosition.left - elePos.left); @@ -1192,7 +1188,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref if (tooltipEle.current && tooltipEle.current.element?.getAttribute('sf-animate')) { const currentTooltipEle: RefObject = React.createRef() as RefObject; currentTooltipEle.current = tooltipEle.current?.element as HTMLElement; - PopupAnimation.stop(currentTooltipEle.current, { + AnimationInstance.stop(currentTooltipEle.current, { end: () => { handlePopupHide(hideAnimation, target, e); } @@ -1228,7 +1224,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref timingFunction: 'ease-in' }; if (tooltipEle.current) { - setCloseAnimation(closeAnimation); + setPopupAnimation((prev: PopupAnimationOptions | undefined) => ({ hide: closeAnimation, show: prev?.show })); setIsPopupOpen(false); } }; @@ -1309,7 +1305,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref } const currentTooltipEle: RefObject = React.createRef() as RefObject; currentTooltipEle.current = tooltipEle.current?.element as HTMLElement; - PopupAnimation.stop(currentTooltipEle.current); + AnimationInstance.stop(currentTooltipEle.current); adjustArrow(event.target as HTMLElement, position, tooltipPosition.current.x as string, tooltipPosition.current.y as string); const scalingFactors: { [key: string]: number } = getScalingFactor(event.target as HTMLElement); @@ -1524,8 +1520,6 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref const arrowIcon: string = React.useMemo(() => { switch (tipClass) { - case TIP_BOTTOM: - return TIP_BOTTOM_ICON; case TIP_TOP: return TIP_TOP_ICON; case TIP_RIGHT: @@ -1543,8 +1537,7 @@ forwardRef((props: TooltipComponentProps, ref: React.Ref isOpen={isPopupOpen} role='tooltip' aria-hidden={false} - showAnimation={openAnimation} - hideAnimation={closeAnimation} + animation={PopupAnimation} relativeElement={openTarget} targetRef={targetRef as RefObject} position={{ X: elePos.left, Y: elePos.top }} diff --git a/components/popups/styles/material3-dark.scss b/components/popups/styles/material3-dark.scss index b6d3194..b01a41b 100644 --- a/components/popups/styles/material3-dark.scss +++ b/components/popups/styles/material3-dark.scss @@ -1,5 +1,6 @@ -@import 'react-base/styles/definition/material3-dark.scss'; -@import 'react-buttons/styles/button/material3-dark-definition.scss'; +@import 'popup/material3-dark-definition.scss'; @import 'popup/all.scss'; @import 'tooltip/material3-dark-definition.scss'; @import 'tooltip/all.scss'; +@import 'spinner/material3-dark-definition.scss'; +@import 'spinner/all.scss'; diff --git a/components/popups/styles/material3.scss b/components/popups/styles/material3.scss index c2f8f58..ba2a693 100644 --- a/components/popups/styles/material3.scss +++ b/components/popups/styles/material3.scss @@ -1,5 +1,6 @@ -@import 'react-base/styles/definition/material3.scss'; -@import 'react-buttons/styles/button/material3-definition.scss'; +@import 'popup/material3-definition.scss'; @import 'popup/all.scss'; @import 'tooltip/material3-definition.scss'; @import 'tooltip/all.scss'; +@import 'spinner/material3-definition.scss'; +@import 'spinner/all.scss'; diff --git a/components/popups/styles/popup/_material3-dark-definition.scss b/components/popups/styles/popup/_material3-dark-definition.scss new file mode 100644 index 0000000..e69de29 diff --git a/components/popups/styles/popup/_material3-definition.scss b/components/popups/styles/popup/_material3-definition.scss new file mode 100644 index 0000000..e69de29 diff --git a/components/popups/styles/popup/material3-dark.scss b/components/popups/styles/popup/material3-dark.scss index 1bc3d02..c14a867 100644 --- a/components/popups/styles/popup/material3-dark.scss +++ b/components/popups/styles/popup/material3-dark.scss @@ -1,2 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; +@import 'material3-dark-definition.scss'; @import 'all.scss'; diff --git a/components/popups/styles/popup/material3.scss b/components/popups/styles/popup/material3.scss index bdfc1e9..9eeb62e 100644 --- a/components/popups/styles/popup/material3.scss +++ b/components/popups/styles/popup/material3.scss @@ -1,2 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; +@import 'material3-definition.scss'; @import 'all.scss'; diff --git a/components/popups/styles/spinner/_all.scss b/components/popups/styles/spinner/_all.scss new file mode 100644 index 0000000..f4d67e8 --- /dev/null +++ b/components/popups/styles/spinner/_all.scss @@ -0,0 +1 @@ +@import 'layout.scss'; diff --git a/components/popups/styles/spinner/_layout.scss b/components/popups/styles/spinner/_layout.scss new file mode 100644 index 0000000..d1c8d55 --- /dev/null +++ b/components/popups/styles/spinner/_layout.scss @@ -0,0 +1,133 @@ +@include export-module('spinner-layout') { + .sf-spinner-pane { + align-items: center; + display: inline-flex; + height: 100%; + justify-content: center; + left: 0; + position: absolute; + text-align: center; + top: 0; + user-select: none; + vertical-align: middle; + width: 100%; + z-index: 1000; + background-color: transparent; + + &.sf-spin-overlay { + background-color: $spin-overlay-background; + .sf-spinner-inner { + .sf-spin-label { + color: $spin-overlay-font-color; + } + } + } + + &::after { + content: $theme; + display: none; + } + + &.sf-spin-left { + /* stylelint-disable property-no-vendor-prefix */ + .sf-spinner-inner { + -webkit-transform: translateX(0%) translateY(-50%); + left: 0; + padding-left: $spin-padding; + transform: translateX(0%) translateY(-50%); + } + } + + &.sf-spin-right { + .sf-spinner-inner { + -webkit-transform: translateX(-100%) translateY(-50%); + left: 100%; + padding-right: $spin-padding; + transform: translateX(-100%) translateY(-50%); + } + } + + &.sf-spin-center { + .sf-spinner-inner { + -webkit-transform: translateX(-50%) translateY(-50%); + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + } + + &.sf-spin-hide { + display: none; + } + + &.sf-spin-show { + display: inline-flex; + } + + .sf-spinner-inner { + -webkit-transform: translateX(-50%) translateY(-50%); + left: 50%; + margin: 0; + position: absolute; + text-align: center; + top: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: 1000; + + .sf-spin-label { + font-family: $spin-label-font-family; + font-size: $spin-label-font-size; + margin-top: $spin-label-margin-top; + text-align: center; + color: $spin-label-color; + } + + .sf-spin-material3, + .sf-spin-tailwind3 { + @include mat-spinner-rotate; + display: block; + margin: 0 auto; + stroke: $spin-material-stroke-color; + + .sf-path-circle { + fill: none; + stroke-linecap: square; + } + } + + .sf-spin-fluent2 { + @include fb-spinner-rotate; + display: block; + margin: 0 auto; + overflow: visible; + + .sf-path-arc, + .sf-path-circle { + fill: none; + stroke-width: $spin-fabric-stroke-width; + } + + .sf-path-circle { + stroke: $spin-fabric-stroke-color; + } + + .sf-path-arc { + stroke: $spin-fabric-arc-color; + } + } + + .sf-spin-bootstrap5v3 { + @include boot5-spinner-rotate; + border-radius: 50%; + display: block; + margin: 0 auto; + stroke: $spin-boot5-stroke-color; + + .sf-path-circle { + fill: none; + stroke-linecap: square; + stroke-width: $spin-boot5-stroke-width; + } + } + } + } +} diff --git a/components/popups/styles/spinner/_material3-dark-definition.scss b/components/popups/styles/spinner/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/popups/styles/spinner/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/popups/styles/spinner/_material3-definition.scss b/components/popups/styles/spinner/_material3-definition.scss new file mode 100644 index 0000000..05186f1 --- /dev/null +++ b/components/popups/styles/spinner/_material3-definition.scss @@ -0,0 +1,64 @@ +$theme: 'Material3'; +$spin-padding: 10px !default; +$spin-label-margin-top: 10px !default; +$spin-label-font-size: $text-sm !default; +$spin-label-font-family: $font-family !default; +$spin-boot4-stroke-width: 4 !default; +$spin-fabric-stroke-width: 1.5 !default; +$spin-boot5-stroke-width: 4 !default; +$spin-label-color: rgba($primary) !default; +$spin-overlay-background: $overlay-bg-color !default; +$spin-overlay-stroke-color: rgba($white) !default; +$spin-overlay-font-color: rgba($white) !default; +$spin-material-stroke-color: rgba($primary) !default; +$spin-boot4-stroke-color: rgba($primary) !default; +$spin-fabric-stroke-color: rgba($primary-light) !default; +$spin-boot5-stroke-color: rgba($primary) !default; +$spin-fabric-arc-color: rgba($primary) !default; +$spin-bootstrap-stroke-color: rgba($primary) !default; +$spin-tailwind-stroke-width: 4.5 !default; +$spin-tailwind-arc-color: rgba($primary) !default; +$spin-tailwind-stroke-color: rgba($primary-light) !default; +@mixin boot5-spinner-rotate { + animation: material-spinner-rotate .75s linear infinite; +} + +@mixin tw-spinner-rotate { + animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.21, .21, .21, .21); +} + +@mixin mat-spinner-rotate { + animation: material-spinner-rotate 1568.63ms linear infinite; +} + +@mixin fb-spinner-rotate { + animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.53, .21, .29, .67); +} + +@mixin boot4-spinner-rotate { + animation: material-spinner-rotate .75s linear infinite; +} + +/* stylelint-disable property-no-vendor-prefix */ +@keyframes material-spinner-rotate { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes fabric-spinner-rotate { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} diff --git a/components/popups/styles/spinner/material3-dark.scss b/components/popups/styles/spinner/material3-dark.scss new file mode 100644 index 0000000..c14a867 --- /dev/null +++ b/components/popups/styles/spinner/material3-dark.scss @@ -0,0 +1,2 @@ +@import 'material3-dark-definition.scss'; +@import 'all.scss'; diff --git a/components/popups/styles/spinner/material3.scss b/components/popups/styles/spinner/material3.scss new file mode 100644 index 0000000..9eeb62e --- /dev/null +++ b/components/popups/styles/spinner/material3.scss @@ -0,0 +1,2 @@ +@import 'material3-definition.scss'; +@import 'all.scss'; diff --git a/components/popups/styles/tooltip/material3-dark.scss b/components/popups/styles/tooltip/material3-dark.scss index 9ecbb36..c14a867 100644 --- a/components/popups/styles/tooltip/material3-dark.scss +++ b/components/popups/styles/tooltip/material3-dark.scss @@ -1,3 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; @import 'material3-dark-definition.scss'; @import 'all.scss'; diff --git a/components/popups/styles/tooltip/material3.scss b/components/popups/styles/tooltip/material3.scss index d9dcf4b..9eeb62e 100644 --- a/components/popups/styles/tooltip/material3.scss +++ b/components/popups/styles/tooltip/material3.scss @@ -1,3 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; @import 'material3-definition.scss'; @import 'all.scss'; diff --git a/components/splitbuttons/README.md b/components/splitbuttons/README.md index 3f7d467..c79cfa1 100644 --- a/components/splitbuttons/README.md +++ b/components/splitbuttons/README.md @@ -2,7 +2,7 @@ ## What's Included in the React Split Button Package -The React Split Button package includes the following list of components. +The React Split Button package includes the following list of components. ### React Split Button diff --git a/components/splitbuttons/package.json b/components/splitbuttons/package.json index ed262d8..0641d1c 100644 --- a/components/splitbuttons/package.json +++ b/components/splitbuttons/package.json @@ -1,6 +1,6 @@ { "name": "@syncfusion/react-splitbuttons", - "version": "29.2.4", + "version": "30.1.37", "description": "A package of feature-rich Pure React components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", @@ -19,9 +19,9 @@ "module": "./index.js", "readme": "README.md", "dependencies": { - "@syncfusion/react-base": "~29.2.4", - "@syncfusion/react-buttons": "~29.2.4", - "@syncfusion/react-popups": "~29.2.4" + "@syncfusion/react-base": "~30.1.37", + "@syncfusion/react-buttons": "~30.1.37", + "@syncfusion/react-popups": "~30.1.37" }, "devDependencies": { "gulp": "4.0.2", diff --git a/components/splitbuttons/src/dropdown-button/dropdown-button.tsx b/components/splitbuttons/src/dropdown-button/dropdown-button.tsx index a294481..c697333 100644 --- a/components/splitbuttons/src/dropdown-button/dropdown-button.tsx +++ b/components/splitbuttons/src/dropdown-button/dropdown-button.tsx @@ -1,9 +1,20 @@ import { useState, useRef, forwardRef, useImperativeHandle, useEffect, Ref, ButtonHTMLAttributes, JSX } from 'react'; import { IPopup, Popup, CollisionType } from '@syncfusion/react-popups'; import { Button, IconPosition, Color, Size, Variant, IButton } from '@syncfusion/react-buttons'; -import { AnimationOptions, useProviderContext, preRender, SvgIcon, IAnimation, Animation, Effect } from '@syncfusion/react-base'; +import { AnimationOptions, useProviderContext, preRender, IAnimation, Animation, Effect } from '@syncfusion/react-base'; import * as React from 'react'; +export interface AnimationProps { + /** + * Specifies the animation that should happen when toast opens. + */ + show?: AnimationOptions; + /** + * Specifies the animation that should happen when toast closes. + */ + hide?: AnimationOptions; +} + /** * ItemModel interface defines properties for each dropdown item. */ @@ -135,7 +146,7 @@ export interface DropDownButtonProps { * @default { effect: 'SlideDown', duration: 400, easing: 'ease' } * @private */ - animation?: AnimationOptions; + animation?: AnimationProps; /** * Triggers while closing the DropDownButton popup. @@ -228,7 +239,8 @@ export const DropDownButton: React.ForwardRefExoticComponent(false); const [menuItems, setMenuItems] = useState(items); const { dir } = useProviderContext(); - const caretIcon: string = 'M5 8.5L12 15.5L19 8.5'; const isMounted: React.RefObject = useRef(true); @@ -342,20 +353,20 @@ export const DropDownButton: React.ForwardRefExoticComponent void = (event?: React.MouseEvent) => { if (!isPopupOpen) { - if (animationOptions) { - const animationInstance: IAnimation = Animation(animationOptions); + if (animationOption) { + const animationInstance: IAnimation = Animation(animationOption); if (animationInstance.animate) { const popupElement: HTMLElement = popupRef.current?.element?.children[0] as HTMLElement; if (popupElement) { @@ -499,6 +510,7 @@ export const DropDownButton: React.ForwardRefExoticComponent {children} - {(isPopupOpen || !lazyOpen) && ( @@ -522,7 +533,7 @@ export const DropDownButton: React.ForwardRefExoticComponent } relateTo={relateTo || (buttonRef.current?.element as HTMLElement)} position={{ X: 'left', Y: 'bottom' }} - showAnimation={animation} + animation={animation} collision={(dir === 'rtl') ? { X: CollisionType.Fit, Y: CollisionType.Flip } : { X: CollisionType.Flip, Y: CollisionType.Flip }} width={popupWidth} className={`sf-dropdown-popup ${popupWidth !== 'auto' ? 'sfdropdown-popup-width' : ''}`} diff --git a/components/splitbuttons/styles/drop-down-button/material3-dark.scss b/components/splitbuttons/styles/drop-down-button/material3-dark.scss index 3466e4a..c14a867 100644 --- a/components/splitbuttons/styles/drop-down-button/material3-dark.scss +++ b/components/splitbuttons/styles/drop-down-button/material3-dark.scss @@ -1,4 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; -@import 'react-buttons/styles/button/material3-dark-definition.scss'; @import 'material3-dark-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/splitbuttons/styles/drop-down-button/material3.scss b/components/splitbuttons/styles/drop-down-button/material3.scss index 56bb978..9eeb62e 100644 --- a/components/splitbuttons/styles/drop-down-button/material3.scss +++ b/components/splitbuttons/styles/drop-down-button/material3.scss @@ -1,4 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; -@import 'react-buttons/styles/button/material3-definition.scss'; @import 'material3-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/splitbuttons/styles/material3-dark.scss b/components/splitbuttons/styles/material3-dark.scss index 085f240..fc4f5e1 100644 --- a/components/splitbuttons/styles/material3-dark.scss +++ b/components/splitbuttons/styles/material3-dark.scss @@ -1,5 +1,3 @@ -@import 'react-base/styles/definition/material3-dark.scss'; -@import 'react-buttons/styles/button/material3-dark-definition.scss'; @import 'drop-down-button/material3-dark-definition.scss'; @import 'drop-down-button/all.scss'; @import 'split-button/material3-dark-definition.scss'; diff --git a/components/splitbuttons/styles/material3.scss b/components/splitbuttons/styles/material3.scss index b85bc79..9c1f2d9 100644 --- a/components/splitbuttons/styles/material3.scss +++ b/components/splitbuttons/styles/material3.scss @@ -1,5 +1,3 @@ -@import 'react-base/styles/definition/material3.scss'; -@import 'react-buttons/styles/button/material3-definition.scss'; @import 'drop-down-button/material3-definition.scss'; @import 'drop-down-button/all.scss'; @import 'split-button/material3-definition.scss'; diff --git a/components/splitbuttons/styles/split-button/_layout.scss b/components/splitbuttons/styles/split-button/_layout.scss index 266e99c..3d9d7bd 100644 --- a/components/splitbuttons/styles/split-button/_layout.scss +++ b/components/splitbuttons/styles/split-button/_layout.scss @@ -46,6 +46,10 @@ border-width: 0 1px 0 0; } + &:disabled { + border-image: none; + } + &:focus, &:active { box-shadow: $split-btn-active-box-shadow; diff --git a/components/splitbuttons/styles/split-button/material3-dark.scss b/components/splitbuttons/styles/split-button/material3-dark.scss index 26232c2..c14a867 100644 --- a/components/splitbuttons/styles/split-button/material3-dark.scss +++ b/components/splitbuttons/styles/split-button/material3-dark.scss @@ -1,5 +1,2 @@ -@import 'react-base/styles/definition/material3-dark.scss'; -@import 'react-buttons/styles/button/material3-dark-definition.scss'; -@import './../drop-down-button/material3-dark-definition.scss'; @import 'material3-dark-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss'; diff --git a/components/splitbuttons/styles/split-button/material3.scss b/components/splitbuttons/styles/split-button/material3.scss index 4e35323..9eeb62e 100644 --- a/components/splitbuttons/styles/split-button/material3.scss +++ b/components/splitbuttons/styles/split-button/material3.scss @@ -1,5 +1,2 @@ -@import 'react-base/styles/definition/material3.scss'; -@import 'react-buttons/styles/button/material3-definition.scss'; -@import './../drop-down-button/material3-definition.scss'; @import 'material3-definition.scss'; -@import 'all.scss'; \ No newline at end of file +@import 'all.scss';