npm - @os-design/drag-sort - Versions diffs - 1.0.23 → 1.0.24 - Mend

@os-design/drag-sort 1.0.23 → 1.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/cjs/DragAndDrop.js.map +1 -1
package/dist/cjs/Draggable.js.map +1 -1
package/dist/cjs/Droppable.js.map +1 -1
package/dist/esm/DragAndDrop.js.map +1 -1
package/dist/esm/Draggable.js.map +1 -1
package/dist/esm/Droppable.js.map +1 -1
package/dist/types/DragAndDrop.d.ts.map +1 -1
package/dist/types/Draggable.d.ts.map +1 -1
package/dist/types/Droppable.d.ts.map +1 -1
package/package.json +6 -6
package/src/DragAndDrop.tsx +0 -3
package/src/Draggable.tsx +0 -2
package/src/Droppable.tsx +0 -1

package/dist/cjs/DragAndDrop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragAndDrop.js","names":["_portal","_interopRequireDefault","require","_useAutoScroll","_useDrag2","_useMemoObject","_usePreventDefaultEvent","_react","_interopRequireWildcard","_ListStore","_useDragAndDrop","_useDragEffect","_useGeneratedId","_useInitRect","_useTransitionStyle","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","isArray","DragAndDrop","_ref","draggedNodeContainer","_ref$minMouseDistPx","minMouseDistPx","_ref$longPressMs","longPressMs","_ref$autoScrollDistPe","autoScrollDistPercent","_ref$autoScrollMaxSpe","autoScrollMaxSpeedPx","_ref$transitionDelayM","transitionDelayMs","_ref$onDragEnd","onDragEnd","children","listStoreRef","useRef","ListStore","generatedId","useGeneratedId","nodeClassName","useMemo","concat","_useState","useState","_useState2","draggedNode","setDraggedNode","startNodeRef","_useState3","x","y","_useState4","cursorPosition","setCursorPosition","registerList","useCallback","list","current","add","deregisterList","id","remove","useTransitionStyle","className","ms","enabled","onDragStart","pos","startPos","startNode","_startNode$node","node","nodeRef","rect","getBoundingClientRect","position","onDragMove","dragEndHandler","_useDrag","useDrag","onMouseDown","onTouchStart","mouseDownHandler","e","touchStartHandler","usePreventDefaultEvent","document","body","useDragEffect","useAutoScroll","distPercent","maxSpeedPx","initRect","useInitRect","undefined","dragAndDropContext","useMemoObject","createElement","DragAndDropContext","Provider","container","renderDraggedNode","index","style","left","top","width","initWidth","height","initHeight","zIndex","_default","exports"],"sources":["../../src/DragAndDrop.tsx"],"sourcesContent":["import Portal, { PortalProps } from '@os-design/portal';\nimport useAutoScroll from '@os-design/use-auto-scroll';\nimport useDrag, {\n OnDragEnd,\n OnDragMove,\n OnDragStart,\n Position,\n} from '@os-design/use-drag';\nimport useMemoObject from '@os-design/use-memo-object';\nimport usePreventDefaultEvent from '@os-design/use-prevent-default-event';\n\nimport React, {\n MouseEvent,\n TouchEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ListStore from './utils/ListStore';\nimport NodeList, { ExistingNode } from './utils/NodeList';\nimport { DragAndDropContext } from './utils/useDragAndDrop';\n\nimport useDragEffect, {\n DragEndHandler,\n DraggedNode,\n} from './utils/useDragEffect';\nimport useGeneratedId from './utils/useGeneratedId';\nimport useInitRect from './utils/useInitRect';\n\nimport useTransitionStyle from './utils/useTransitionStyle';\n\nexport interface DragAndDropProps {\n /*\n The container in which the dragged node will be rendered.\n * @default document.body\n /\n draggedNodeContainer?: PortalProps['container'];\n /\n The min distance required to start dragging a node (in px).\n * @default 10\n /\n minMouseDistPx?: number;\n /\n The delay of the long press event required to start dragging a node on the touch device (in ms).\n * @default 500\n /\n longPressMs?: number;\n /\n The distance to the bound at which the list starts to scroll automatically (in percent).\n * @default 20\n /\n autoScrollDistPercent?: number;\n /\n The max auto scroll speed (in px).\n * @default 100\n /\n autoScrollMaxSpeedPx?: number;\n /\n The animation duration (in ms).\n * @default 250\n /\n transitionDelayMs?: number;\n /\n The callback that is called when the drag is completed.\n * @default undefined\n /\n onDragEnd?: DragEndHandler;\n /\n The children.\n * @default undefined\n /\n children?: React.ReactNode;\n}\n\ninterface StartNode {\n list: NodeList;\n node: ExistingNode;\n}\n\n/\n The container containing one or more lists with draggable nodes.\n */\nconst DragAndDrop: React.FC<DragAndDropProps> = ({\n draggedNodeContainer,\n minMouseDistPx = 10,\n longPressMs = 500,\n autoScrollDistPercent = 20,\n autoScrollMaxSpeedPx = 100,\n transitionDelayMs = 250,\n onDragEnd = () => {},\n children,\n}) => {\n // The user can drag a node between the lists (the Droppable components).\n // To determine which list a node should be dropped in, we need to store refs to all the lists.\n const listStoreRef = useRef<ListStore>(new ListStore());\n\n // The class name for a node used to set the transition style\n const generatedId = useGeneratedId();\n const nodeClassName = useMemo(() => `n${generatedId}`, [generatedId]);\n\n // The node that is currently being dragged\n const [draggedNode, setDraggedNode] = useState<DraggedNode \| null>(null);\n const startNodeRef = useRef<StartNode \| null>(null);\n const [cursorPosition, setCursorPosition] = useState<Position>({\n x: 0,\n y: 0,\n });\n\n // Add a new list to the store\n const registerList = useCallback((list: NodeList) => {\n listStoreRef.current.add(list);\n }, []);\n\n // Remove the existing list from the store\n const deregisterList = useCallback((id: string) => {\n listStoreRef.current.remove(id);\n }, []);\n\n // Set the style to delay transitions when the node is dragging\n useTransitionStyle({\n className: nodeClassName,\n ms: transitionDelayMs,\n enabled: !!draggedNode,\n });\n\n const onDragStart = useCallback<OnDragStart>(\n (pos: Position, startPos: Position) => {\n const startNode = startNodeRef.current;\n if (!startNode) return;\n const [, , nodeRef] = startNode.node;\n if (!nodeRef.current) return;\n const rect = nodeRef.current.getBoundingClientRect();\n setCursorPosition(pos);\n setDraggedNode({\n list: startNode.list,\n node: startNode.node,\n position: {\n x: startPos.x - rect.x,\n y: startPos.y - rect.y,\n },\n });\n startNodeRef.current = null;\n },\n []\n );\n\n const onDragMove = useCallback<OnDragMove>((pos: Position) => {\n setCursorPosition(pos);\n }, []);\n\n const dragEndHandler = useCallback<OnDragEnd>(() => {\n setDraggedNode(null);\n }, []);\n\n const { onMouseDown, onTouchStart } = useDrag({\n onDragStart,\n onDragMove,\n onDragEnd: dragEndHandler,\n minMouseDistPx,\n longPressMs,\n });\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent, list: NodeList, node: ExistingNode) => {\n startNodeRef.current = { list, node };\n onMouseDown(e);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent, list: NodeList, node: ExistingNode) => {\n startNodeRef.current = { list, node };\n onTouchStart(e);\n },\n [onTouchStart]\n );\n\n // Prevent body scrolling when the node is dragging.\n // It's important to attach the event to the body (not to the document). Otherwise, it won't work in mobile chrome.\n usePreventDefaultEvent(document.body, 'touchmove', !!draggedNode);\n\n // Implement the drag animation\n useDragEffect({\n draggedNode,\n cursorPosition,\n listStoreRef,\n onDragEnd,\n });\n\n // Auto scroll if the cursor position is located near the border\n useAutoScroll({\n enabled: !!draggedNode,\n distPercent: autoScrollDistPercent,\n maxSpeedPx: autoScrollMaxSpeedPx,\n });\n\n const initRect = useInitRect(draggedNode ? draggedNode.node[2] : undefined);\n\n const dragAndDropContext = useMemoObject({\n registerList,\n deregisterList,\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n nodeClassName,\n });\n\n return (\n <DragAndDropContext.Provider value={dragAndDropContext}>\n {children}\n\n {draggedNode && (\n <Portal container={draggedNodeContainer}>\n {draggedNode.list.renderDraggedNode({\n index: draggedNode.node[4],\n id: draggedNode.node[5],\n style: {\n position: 'fixed',\n left: cursorPosition.x - draggedNode.position.x,\n top: cursorPosition.y - draggedNode.position.y,\n width: initRect ? initRect.initWidth : undefined,\n height: initRect ? initRect.initHeight : undefined,\n zIndex: 1001,\n },\n })}\n </Portal>\n )}\n </DragAndDropContext.Provider>\n );\n};\n\nexport type { DragEndHandler } from './utils/useDragEffect';\n\nexport default DragAndDrop;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DragAndDrop.js","names":["_portal","_interopRequireDefault","require","_useAutoScroll","_useDrag2","_useMemoObject","_usePreventDefaultEvent","_react","_interopRequireWildcard","_ListStore","_useDragAndDrop","_useDragEffect","_useGeneratedId","_useInitRect","_useTransitionStyle","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","isArray","DragAndDrop","_ref","draggedNodeContainer","_ref$minMouseDistPx","minMouseDistPx","_ref$longPressMs","longPressMs","_ref$autoScrollDistPe","autoScrollDistPercent","_ref$autoScrollMaxSpe","autoScrollMaxSpeedPx","_ref$transitionDelayM","transitionDelayMs","_ref$onDragEnd","onDragEnd","children","listStoreRef","useRef","ListStore","generatedId","useGeneratedId","nodeClassName","useMemo","concat","_useState","useState","_useState2","draggedNode","setDraggedNode","startNodeRef","_useState3","x","y","_useState4","cursorPosition","setCursorPosition","registerList","useCallback","list","current","add","deregisterList","id","remove","useTransitionStyle","className","ms","enabled","onDragStart","pos","startPos","startNode","_startNode$node","node","nodeRef","rect","getBoundingClientRect","position","onDragMove","dragEndHandler","_useDrag","useDrag","onMouseDown","onTouchStart","mouseDownHandler","e","touchStartHandler","usePreventDefaultEvent","document","body","useDragEffect","useAutoScroll","distPercent","maxSpeedPx","initRect","useInitRect","undefined","dragAndDropContext","useMemoObject","createElement","DragAndDropContext","Provider","container","renderDraggedNode","index","style","left","top","width","initWidth","height","initHeight","zIndex","_default","exports"],"sources":["../../src/DragAndDrop.tsx"],"sourcesContent":["import Portal, { PortalProps } from '@os-design/portal';\nimport useAutoScroll from '@os-design/use-auto-scroll';\nimport useDrag, {\n OnDragEnd,\n OnDragMove,\n OnDragStart,\n Position,\n} from '@os-design/use-drag';\nimport useMemoObject from '@os-design/use-memo-object';\nimport usePreventDefaultEvent from '@os-design/use-prevent-default-event';\nimport React, {\n MouseEvent,\n TouchEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ListStore from './utils/ListStore';\nimport NodeList, { ExistingNode } from './utils/NodeList';\nimport { DragAndDropContext } from './utils/useDragAndDrop';\nimport useDragEffect, {\n DragEndHandler,\n DraggedNode,\n} from './utils/useDragEffect';\nimport useGeneratedId from './utils/useGeneratedId';\nimport useInitRect from './utils/useInitRect';\nimport useTransitionStyle from './utils/useTransitionStyle';\n\nexport interface DragAndDropProps {\n /*\n The container in which the dragged node will be rendered.\n * @default document.body\n /\n draggedNodeContainer?: PortalProps['container'];\n /\n The min distance required to start dragging a node (in px).\n * @default 10\n /\n minMouseDistPx?: number;\n /\n The delay of the long press event required to start dragging a node on the touch device (in ms).\n * @default 500\n /\n longPressMs?: number;\n /\n The distance to the bound at which the list starts to scroll automatically (in percent).\n * @default 20\n /\n autoScrollDistPercent?: number;\n /\n The max auto scroll speed (in px).\n * @default 100\n /\n autoScrollMaxSpeedPx?: number;\n /\n The animation duration (in ms).\n * @default 250\n /\n transitionDelayMs?: number;\n /\n The callback that is called when the drag is completed.\n * @default undefined\n /\n onDragEnd?: DragEndHandler;\n /\n The children.\n * @default undefined\n /\n children?: React.ReactNode;\n}\n\ninterface StartNode {\n list: NodeList;\n node: ExistingNode;\n}\n\n/\n The container containing one or more lists with draggable nodes.\n */\nconst DragAndDrop: React.FC<DragAndDropProps> = ({\n draggedNodeContainer,\n minMouseDistPx = 10,\n longPressMs = 500,\n autoScrollDistPercent = 20,\n autoScrollMaxSpeedPx = 100,\n transitionDelayMs = 250,\n onDragEnd = () => {},\n children,\n}) => {\n // The user can drag a node between the lists (the Droppable components).\n // To determine which list a node should be dropped in, we need to store refs to all the lists.\n const listStoreRef = useRef<ListStore>(new ListStore());\n\n // The class name for a node used to set the transition style\n const generatedId = useGeneratedId();\n const nodeClassName = useMemo(() => `n${generatedId}`, [generatedId]);\n\n // The node that is currently being dragged\n const [draggedNode, setDraggedNode] = useState<DraggedNode \| null>(null);\n const startNodeRef = useRef<StartNode \| null>(null);\n const [cursorPosition, setCursorPosition] = useState<Position>({\n x: 0,\n y: 0,\n });\n\n // Add a new list to the store\n const registerList = useCallback((list: NodeList) => {\n listStoreRef.current.add(list);\n }, []);\n\n // Remove the existing list from the store\n const deregisterList = useCallback((id: string) => {\n listStoreRef.current.remove(id);\n }, []);\n\n // Set the style to delay transitions when the node is dragging\n useTransitionStyle({\n className: nodeClassName,\n ms: transitionDelayMs,\n enabled: !!draggedNode,\n });\n\n const onDragStart = useCallback<OnDragStart>(\n (pos: Position, startPos: Position) => {\n const startNode = startNodeRef.current;\n if (!startNode) return;\n const [, , nodeRef] = startNode.node;\n if (!nodeRef.current) return;\n const rect = nodeRef.current.getBoundingClientRect();\n setCursorPosition(pos);\n setDraggedNode({\n list: startNode.list,\n node: startNode.node,\n position: {\n x: startPos.x - rect.x,\n y: startPos.y - rect.y,\n },\n });\n startNodeRef.current = null;\n },\n []\n );\n\n const onDragMove = useCallback<OnDragMove>((pos: Position) => {\n setCursorPosition(pos);\n }, []);\n\n const dragEndHandler = useCallback<OnDragEnd>(() => {\n setDraggedNode(null);\n }, []);\n\n const { onMouseDown, onTouchStart } = useDrag({\n onDragStart,\n onDragMove,\n onDragEnd: dragEndHandler,\n minMouseDistPx,\n longPressMs,\n });\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent, list: NodeList, node: ExistingNode) => {\n startNodeRef.current = { list, node };\n onMouseDown(e);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent, list: NodeList, node: ExistingNode) => {\n startNodeRef.current = { list, node };\n onTouchStart(e);\n },\n [onTouchStart]\n );\n\n // Prevent body scrolling when the node is dragging.\n // It's important to attach the event to the body (not to the document). Otherwise, it won't work in mobile chrome.\n usePreventDefaultEvent(document.body, 'touchmove', !!draggedNode);\n\n // Implement the drag animation\n useDragEffect({\n draggedNode,\n cursorPosition,\n listStoreRef,\n onDragEnd,\n });\n\n // Auto scroll if the cursor position is located near the border\n useAutoScroll({\n enabled: !!draggedNode,\n distPercent: autoScrollDistPercent,\n maxSpeedPx: autoScrollMaxSpeedPx,\n });\n\n const initRect = useInitRect(draggedNode ? draggedNode.node[2] : undefined);\n\n const dragAndDropContext = useMemoObject({\n registerList,\n deregisterList,\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n nodeClassName,\n });\n\n return (\n <DragAndDropContext.Provider value={dragAndDropContext}>\n {children}\n\n {draggedNode && (\n <Portal container={draggedNodeContainer}>\n {draggedNode.list.renderDraggedNode({\n index: draggedNode.node[4],\n id: draggedNode.node[5],\n style: {\n position: 'fixed',\n left: cursorPosition.x - draggedNode.position.x,\n top: cursorPosition.y - draggedNode.position.y,\n width: initRect ? initRect.initWidth : undefined,\n height: initRect ? initRect.initHeight : undefined,\n zIndex: 1001,\n },\n })}\n </Portal>\n )}\n </DragAndDropContext.Provider>\n );\n};\n\nexport type { DragEndHandler } from './utils/useDragEffect';\n\nexport default DragAndDrop;\n"],"mappings":"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"}

package/dist/cjs/Draggable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Draggable.js","names":["_useMemoObject","_interopRequireDefault","require","_react","_interopRequireWildcard","_useAppendClassName","_useDragAndDrop2","_useDroppable2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","isArray","Draggable","_ref","index","id","children","ref","useRef","nodeRef","_useState","useState","_useState2","style","setStyle","_useDragAndDrop","useDragAndDrop","nodeClassName","_useDroppable","useDroppable","registerNode","deregisterNode","onMouseDown","onTouchStart","useEffect","current","useAppendClassName","mouseDownHandler","useCallback","e","touchStartHandler","handlers","useMemoObject","createElement","Fragment","_default","exports"],"sources":["../../src/Draggable.tsx"],"sourcesContent":["import useMemoObject from '@os-design/use-memo-object';\n\nimport React, {\n CSSProperties,\n MouseEvent,\n RefObject,\n TouchEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Node } from './utils/NodeList';\n\nimport useAppendClassName from './utils/useAppendClassName';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useDroppable from './utils/useDroppable';\n\nexport interface DraggableHandlers {\n /*\n The handler that should be called when the mouse down event occurs.\n /\n onMouseDown: (e: MouseEvent) => void;\n /\n The handler that should be called when the touch start event occurs.\n /\n onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n /\n The reference to the draggable list item.\n /\n ref: RefObject<any>; // eslint-disable-line @typescript-eslint/no-explicit-any\n /\n Additional styles for moving the list item.\n /\n style: CSSProperties;\n /\n The handlers to catch events when the user starts dragging the list item.\n /\n handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n /\n The index of the draggable node.\n /\n index: number;\n /\n The ID of the draggable node.\n /\n id: string;\n /\n The function that renders the draggable node.\n */\n children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, id, children }) => {\n // The reference to the list item\n const ref = useRef<HTMLDivElement \| null>(null);\n // The reference to the node containing the refs to the prev and next nodes\n const nodeRef = useRef<Node>(null);\n // Additional styles for moving the list item\n const [style, setStyle] = useState<CSSProperties>({});\n\n const { nodeClassName } = useDragAndDrop();\n const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n useDroppable();\n\n // Register the node in the list\n useEffect(() => {\n nodeRef.current = registerNode({ ref, setStyle, index, id });\n return () => {\n if (!nodeRef.current) return;\n deregisterNode(nodeRef.current);\n nodeRef.current = null;\n };\n }, [deregisterNode, id, index, registerNode]);\n\n // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n useAppendClassName(ref, nodeClassName);\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent) => {\n if (!nodeRef.current) return;\n onMouseDown(e, nodeRef.current);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent) => {\n if (!nodeRef.current) return;\n onTouchStart(e, nodeRef.current);\n },\n [onTouchStart]\n );\n\n const handlers = useMemoObject({\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n });\n\n return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"mappings":";;;;;;;AAAA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA;~~AAEA~~,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;~~AAYA~~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"}
1	+ {"version":3,"file":"Draggable.js","names":["_useMemoObject","_interopRequireDefault","require","_react","_interopRequireWildcard","_useAppendClassName","_useDragAndDrop2","_useDroppable2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","isArray","Draggable","_ref","index","id","children","ref","useRef","nodeRef","_useState","useState","_useState2","style","setStyle","_useDragAndDrop","useDragAndDrop","nodeClassName","_useDroppable","useDroppable","registerNode","deregisterNode","onMouseDown","onTouchStart","useEffect","current","useAppendClassName","mouseDownHandler","useCallback","e","touchStartHandler","handlers","useMemoObject","createElement","Fragment","_default","exports"],"sources":["../../src/Draggable.tsx"],"sourcesContent":["import useMemoObject from '@os-design/use-memo-object';\nimport React, {\n CSSProperties,\n MouseEvent,\n RefObject,\n TouchEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Node } from './utils/NodeList';\nimport useAppendClassName from './utils/useAppendClassName';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useDroppable from './utils/useDroppable';\n\nexport interface DraggableHandlers {\n /*\n The handler that should be called when the mouse down event occurs.\n /\n onMouseDown: (e: MouseEvent) => void;\n /\n The handler that should be called when the touch start event occurs.\n /\n onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n /\n The reference to the draggable list item.\n /\n ref: RefObject<any>; // eslint-disable-line @typescript-eslint/no-explicit-any\n /\n Additional styles for moving the list item.\n /\n style: CSSProperties;\n /\n The handlers to catch events when the user starts dragging the list item.\n /\n handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n /\n The index of the draggable node.\n /\n index: number;\n /\n The ID of the draggable node.\n /\n id: string;\n /\n The function that renders the draggable node.\n */\n children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, id, children }) => {\n // The reference to the list item\n const ref = useRef<HTMLDivElement \| null>(null);\n // The reference to the node containing the refs to the prev and next nodes\n const nodeRef = useRef<Node>(null);\n // Additional styles for moving the list item\n const [style, setStyle] = useState<CSSProperties>({});\n\n const { nodeClassName } = useDragAndDrop();\n const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n useDroppable();\n\n // Register the node in the list\n useEffect(() => {\n nodeRef.current = registerNode({ ref, setStyle, index, id });\n return () => {\n if (!nodeRef.current) return;\n deregisterNode(nodeRef.current);\n nodeRef.current = null;\n };\n }, [deregisterNode, id, index, registerNode]);\n\n // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n useAppendClassName(ref, nodeClassName);\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent) => {\n if (!nodeRef.current) return;\n onMouseDown(e, nodeRef.current);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent) => {\n if (!nodeRef.current) return;\n onTouchStart(e, nodeRef.current);\n },\n [onTouchStart]\n );\n\n const handlers = useMemoObject({\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n });\n\n return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"mappings":"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"}

package/dist/cjs/Droppable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Droppable.js","names":["_useMemoObject","_interopRequireDefault","require","_react","_interopRequireWildcard","_NodeList","_useDragAndDrop2","_useDroppable","_useGeneratedId","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Droppable","_ref","renderDraggedNode","id","_ref$horizontal","horizontal","children","ref","useRef","innerRef","generatedId","useGeneratedId","droppableId","useMemo","listRef","NodeList","useEffect","current","_useDragAndDrop","useDragAndDrop","registerList","deregisterList","onMouseDown","onTouchStart","listId","registerNode","useCallback","props","add","deregisterNode","node","remove","mouseDownHandler","e","touchStartHandler","droppableContext","useMemoObject","createElement","DroppableContext","Provider","value","_default","exports"],"sources":["../../src/Droppable.tsx"],"sourcesContent":["import useMemoObject from '@os-design/use-memo-object';\n\nimport React, {\n MouseEvent,\n RefObject,\n TouchEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport NodeList, {\n ExistingNode,\n NodeProps,\n RenderDraggedNode,\n} from './utils/NodeList';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport { DroppableContext } from './utils/useDroppable';\nimport useGeneratedId from './utils/useGeneratedId';\n\nexport interface DroppableChildrenProps {\n /*\n The reference to the list.\n * If a virtual list is used, pass it to the outerRef prop.\n /\n ref: RefObject<HTMLDivElement>;\n /\n The reference to the container inside the virtual list.\n * Pass it to the innerRef prop.\n /\n innerRef: RefObject<HTMLDivElement>;\n}\n\nexport interface DroppableProps {\n /\n The function that renders the dragged node.\n /\n renderDraggedNode: RenderDraggedNode;\n /\n The ID of the list with draggable nodes.\n * Used to determine in which list the dragged node was dropped.\n * @default undefined\n /\n id?: string;\n /\n Whether the list is horizontal.\n * @default false\n /\n horizontal?: boolean;\n /\n The function that renders the list with draggable nodes.\n */\n children: (props: DroppableChildrenProps) => React.ReactNode;\n}\n\nconst Droppable: React.FC<DroppableProps> = ({\n renderDraggedNode,\n id,\n horizontal = false,\n children,\n}) => {\n // The reference to the list\n const ref = useRef<HTMLDivElement>(null);\n // The reference to the container inside the virtual list\n const innerRef = useRef<HTMLDivElement>(null);\n // The unique ID of the list. If no ID was specified, the generated one is used.\n const generatedId = useGeneratedId();\n const droppableId = useMemo(() => id \|\| generatedId, [generatedId, id]);\n // The reference to the list of nodes\n const listRef = useRef(\n new NodeList({\n id: droppableId,\n ref,\n innerRef,\n horizontal,\n renderDraggedNode,\n })\n );\n\n // Update the ID of the list if it changes\n useEffect(() => {\n listRef.current.id = droppableId;\n }, [droppableId]);\n\n // Update the list orientation if it changes.\n // There is no need to check the order of the nodes in the list because it will be the same.\n useEffect(() => {\n listRef.current.horizontal = horizontal;\n }, [horizontal]);\n\n // Update the callback that renders the dragged node if it changes\n useEffect(() => {\n listRef.current.renderDraggedNode = renderDraggedNode;\n }, [renderDraggedNode]);\n\n const { registerList, deregisterList, onMouseDown, onTouchStart } =\n useDragAndDrop();\n\n // Register the list in the store\n useEffect(() => {\n registerList(listRef.current);\n const listId = listRef.current.id;\n return () => deregisterList(listId);\n }, [deregisterList, registerList]);\n\n const registerNode = useCallback(\n (props: NodeProps) => listRef.current.add(props),\n []\n );\n const deregisterNode = useCallback((node: ExistingNode) => {\n listRef.current.remove(node);\n }, []);\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent, node: ExistingNode) => {\n onMouseDown(e, listRef.current, node);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent, node: ExistingNode) => {\n onTouchStart(e, listRef.current, node);\n },\n [onTouchStart]\n );\n\n const droppableContext = useMemoObject({\n registerNode,\n deregisterNode,\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n });\n\n return (\n <DroppableContext.Provider value={droppableContext}>\n {(children as Function)({ ref, innerRef })}\n </DroppableContext.Provider>\n );\n};\n\nexport default Droppable;\n"],"mappings":";;;;;;;AAAA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA;~~AAEA~~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"}
1	+ {"version":3,"file":"Droppable.js","names":["_useMemoObject","_interopRequireDefault","require","_react","_interopRequireWildcard","_NodeList","_useDragAndDrop2","_useDroppable","_useGeneratedId","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Droppable","_ref","renderDraggedNode","id","_ref$horizontal","horizontal","children","ref","useRef","innerRef","generatedId","useGeneratedId","droppableId","useMemo","listRef","NodeList","useEffect","current","_useDragAndDrop","useDragAndDrop","registerList","deregisterList","onMouseDown","onTouchStart","listId","registerNode","useCallback","props","add","deregisterNode","node","remove","mouseDownHandler","e","touchStartHandler","droppableContext","useMemoObject","createElement","DroppableContext","Provider","value","_default","exports"],"sources":["../../src/Droppable.tsx"],"sourcesContent":["import useMemoObject from '@os-design/use-memo-object';\nimport React, {\n MouseEvent,\n RefObject,\n TouchEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport NodeList, {\n ExistingNode,\n NodeProps,\n RenderDraggedNode,\n} from './utils/NodeList';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport { DroppableContext } from './utils/useDroppable';\nimport useGeneratedId from './utils/useGeneratedId';\n\nexport interface DroppableChildrenProps {\n /*\n The reference to the list.\n * If a virtual list is used, pass it to the outerRef prop.\n /\n ref: RefObject<HTMLDivElement>;\n /\n The reference to the container inside the virtual list.\n * Pass it to the innerRef prop.\n /\n innerRef: RefObject<HTMLDivElement>;\n}\n\nexport interface DroppableProps {\n /\n The function that renders the dragged node.\n /\n renderDraggedNode: RenderDraggedNode;\n /\n The ID of the list with draggable nodes.\n * Used to determine in which list the dragged node was dropped.\n * @default undefined\n /\n id?: string;\n /\n Whether the list is horizontal.\n * @default false\n /\n horizontal?: boolean;\n /\n The function that renders the list with draggable nodes.\n */\n children: (props: DroppableChildrenProps) => React.ReactNode;\n}\n\nconst Droppable: React.FC<DroppableProps> = ({\n renderDraggedNode,\n id,\n horizontal = false,\n children,\n}) => {\n // The reference to the list\n const ref = useRef<HTMLDivElement>(null);\n // The reference to the container inside the virtual list\n const innerRef = useRef<HTMLDivElement>(null);\n // The unique ID of the list. If no ID was specified, the generated one is used.\n const generatedId = useGeneratedId();\n const droppableId = useMemo(() => id \|\| generatedId, [generatedId, id]);\n // The reference to the list of nodes\n const listRef = useRef(\n new NodeList({\n id: droppableId,\n ref,\n innerRef,\n horizontal,\n renderDraggedNode,\n })\n );\n\n // Update the ID of the list if it changes\n useEffect(() => {\n listRef.current.id = droppableId;\n }, [droppableId]);\n\n // Update the list orientation if it changes.\n // There is no need to check the order of the nodes in the list because it will be the same.\n useEffect(() => {\n listRef.current.horizontal = horizontal;\n }, [horizontal]);\n\n // Update the callback that renders the dragged node if it changes\n useEffect(() => {\n listRef.current.renderDraggedNode = renderDraggedNode;\n }, [renderDraggedNode]);\n\n const { registerList, deregisterList, onMouseDown, onTouchStart } =\n useDragAndDrop();\n\n // Register the list in the store\n useEffect(() => {\n registerList(listRef.current);\n const listId = listRef.current.id;\n return () => deregisterList(listId);\n }, [deregisterList, registerList]);\n\n const registerNode = useCallback(\n (props: NodeProps) => listRef.current.add(props),\n []\n );\n const deregisterNode = useCallback((node: ExistingNode) => {\n listRef.current.remove(node);\n }, []);\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent, node: ExistingNode) => {\n onMouseDown(e, listRef.current, node);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent, node: ExistingNode) => {\n onTouchStart(e, listRef.current, node);\n },\n [onTouchStart]\n );\n\n const droppableContext = useMemoObject({\n registerNode,\n deregisterNode,\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n });\n\n return (\n <DroppableContext.Provider value={droppableContext}>\n {(children as Function)({ ref, innerRef })}\n </DroppableContext.Provider>\n );\n};\n\nexport default Droppable;\n"],"mappings":";;;;;;;AAAA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AASA,IAAAG,SAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAKA,IAAAI,gBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAP,sBAAA,CAAAC,OAAA;AAAoD,SAAAO,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAN,wBAAAU,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,uCAAAA,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,cAAAN,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAAnB,uBAAAa,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAqCpD,IAAMiB,SAAmC,GAAG,SAAtCA,SAAmCA,CAAAC,IAAA,EAKnC;EAAA,IAJJC,iBAAiB,GAAAD,IAAA,CAAjBC,iBAAiB;IACjBC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IAAAC,eAAA,GAAAH,IAAA,CACFI,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;IAClBE,QAAQ,GAAAL,IAAA,CAARK,QAAQ;EAER;EACA,IAAMC,GAAG,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACxC;EACA,IAAMC,QAAQ,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EAC7C;EACA,IAAME,WAAW,GAAG,IAAAC,0BAAc,EAAC,CAAC;EACpC,IAAMC,WAAW,GAAG,IAAAC,cAAO,EAAC;IAAA,OAAMV,EAAE,IAAIO,WAAW;EAAA,GAAE,CAACA,WAAW,EAAEP,EAAE,CAAC,CAAC;EACvE;EACA,IAAMW,OAAO,GAAG,IAAAN,aAAM,EACpB,IAAIO,oBAAQ,CAAC;IACXZ,EAAE,EAAES,WAAW;IACfL,GAAG,EAAHA,GAAG;IACHE,QAAQ,EAARA,QAAQ;IACRJ,UAAU,EAAVA,UAAU;IACVH,iBAAiB,EAAjBA;EACF,CAAC,CACH,CAAC;;EAED;EACA,IAAAc,gBAAS,EAAC,YAAM;IACdF,OAAO,CAACG,OAAO,CAACd,EAAE,GAAGS,WAAW;EAClC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;;EAEjB;EACA;EACA,IAAAI,gBAAS,EAAC,YAAM;IACdF,OAAO,CAACG,OAAO,CAACZ,UAAU,GAAGA,UAAU;EACzC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;;EAEhB;EACA,IAAAW,gBAAS,EAAC,YAAM;IACdF,OAAO,CAACG,OAAO,CAACf,iBAAiB,GAAGA,iBAAiB;EACvD,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,IAAAgB,eAAA,GACE,IAAAC,2BAAc,EAAC,CAAC;IADVC,YAAY,GAAAF,eAAA,CAAZE,YAAY;IAAEC,cAAc,GAAAH,eAAA,CAAdG,cAAc;IAAEC,WAAW,GAAAJ,eAAA,CAAXI,WAAW;IAAEC,YAAY,GAAAL,eAAA,CAAZK,YAAY;;EAG/D;EACA,IAAAP,gBAAS,EAAC,YAAM;IACdI,YAAY,CAACN,OAAO,CAACG,OAAO,CAAC;IAC7B,IAAMO,MAAM,GAAGV,OAAO,CAACG,OAAO,CAACd,EAAE;IACjC,OAAO;MAAA,OAAMkB,cAAc,CAACG,MAAM,CAAC;IAAA;EACrC,CAAC,EAAE,CAACH,cAAc,EAAED,YAAY,CAAC,CAAC;EAElC,IAAMK,YAAY,GAAG,IAAAC,kBAAW,EAC9B,UAACC,KAAgB;IAAA,OAAKb,OAAO,CAACG,OAAO,CAACW,GAAG,CAACD,KAAK,CAAC;EAAA,GAChD,EACF,CAAC;EACD,IAAME,cAAc,GAAG,IAAAH,kBAAW,EAAC,UAACI,IAAkB,EAAK;IACzDhB,OAAO,CAACG,OAAO,CAACc,MAAM,CAACD,IAAI,CAAC;EAC9B,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,IAAME,gBAAgB,GAAG,IAAAN,kBAAW,EAClC,UAACO,CAAa,EAAEH,IAAkB,EAAK;IACrCR,WAAW,CAACW,CAAC,EAAEnB,OAAO,CAACG,OAAO,EAAEa,IAAI,CAAC;EACvC,CAAC,EACD,CAACR,WAAW,CACd,CAAC;EACD,IAAMY,iBAAiB,GAAG,IAAAR,kBAAW,EACnC,UAACO,CAAa,EAAEH,IAAkB,EAAK;IACrCP,YAAY,CAACU,CAAC,EAAEnB,OAAO,CAACG,OAAO,EAAEa,IAAI,CAAC;EACxC,CAAC,EACD,CAACP,YAAY,CACf,CAAC;EAED,IAAMY,gBAAgB,GAAG,IAAAC,yBAAa,EAAC;IACrCX,YAAY,EAAZA,YAAY;IACZI,cAAc,EAAdA,cAAc;IACdP,WAAW,EAAEU,gBAAgB;IAC7BT,YAAY,EAAEW;EAChB,CAAC,CAAC;EAEF,oBACE9D,MAAA,YAAAiE,aAAA,CAAC7D,aAAA,CAAA8D,gBAAgB,CAACC,QAAQ;IAACC,KAAK,EAAEL;EAAiB,GAC/C7B,QAAQ,CAAc;IAAEC,GAAG,EAAHA,GAAG;IAAEE,QAAQ,EAARA;EAAS,CAAC,CAChB,CAAC;AAEhC,CAAC;AAAC,IAAAgC,QAAA,GAEazC,SAAS;AAAA0C,OAAA,cAAAD,QAAA"}

package/dist/esm/DragAndDrop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragAndDrop.js","names":["Portal","useAutoScroll","useDrag","useMemoObject","usePreventDefaultEvent","React","useCallback","useMemo","useRef","useState","ListStore","DragAndDropContext","useDragEffect","useGeneratedId","useInitRect","useTransitionStyle","DragAndDrop","draggedNodeContainer","minMouseDistPx","longPressMs","autoScrollDistPercent","autoScrollMaxSpeedPx","transitionDelayMs","onDragEnd","children","listStoreRef","generatedId","nodeClassName","draggedNode","setDraggedNode","startNodeRef","cursorPosition","setCursorPosition","x","y","registerList","list","current","add","deregisterList","id","remove","className","ms","enabled","onDragStart","pos","startPos","startNode","nodeRef","node","rect","getBoundingClientRect","position","onDragMove","dragEndHandler","onMouseDown","onTouchStart","mouseDownHandler","e","touchStartHandler","document","body","distPercent","maxSpeedPx","initRect","undefined","dragAndDropContext","createElement","Provider","value","container","renderDraggedNode","index","style","left","top","width","initWidth","height","initHeight","zIndex"],"sources":["../../src/DragAndDrop.tsx"],"sourcesContent":["import Portal, { PortalProps } from '@os-design/portal';\nimport useAutoScroll from '@os-design/use-auto-scroll';\nimport useDrag, {\n OnDragEnd,\n OnDragMove,\n OnDragStart,\n Position,\n} from '@os-design/use-drag';\nimport useMemoObject from '@os-design/use-memo-object';\nimport usePreventDefaultEvent from '@os-design/use-prevent-default-event';\n\nimport React, {\n MouseEvent,\n TouchEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ListStore from './utils/ListStore';\nimport NodeList, { ExistingNode } from './utils/NodeList';\nimport { DragAndDropContext } from './utils/useDragAndDrop';\n\nimport useDragEffect, {\n DragEndHandler,\n DraggedNode,\n} from './utils/useDragEffect';\nimport useGeneratedId from './utils/useGeneratedId';\nimport useInitRect from './utils/useInitRect';\n\nimport useTransitionStyle from './utils/useTransitionStyle';\n\nexport interface DragAndDropProps {\n /*\n The container in which the dragged node will be rendered.\n * @default document.body\n /\n draggedNodeContainer?: PortalProps['container'];\n /\n The min distance required to start dragging a node (in px).\n * @default 10\n /\n minMouseDistPx?: number;\n /\n The delay of the long press event required to start dragging a node on the touch device (in ms).\n * @default 500\n /\n longPressMs?: number;\n /\n The distance to the bound at which the list starts to scroll automatically (in percent).\n * @default 20\n /\n autoScrollDistPercent?: number;\n /\n The max auto scroll speed (in px).\n * @default 100\n /\n autoScrollMaxSpeedPx?: number;\n /\n The animation duration (in ms).\n * @default 250\n /\n transitionDelayMs?: number;\n /\n The callback that is called when the drag is completed.\n * @default undefined\n /\n onDragEnd?: DragEndHandler;\n /\n The children.\n * @default undefined\n /\n children?: React.ReactNode;\n}\n\ninterface StartNode {\n list: NodeList;\n node: ExistingNode;\n}\n\n/\n The container containing one or more lists with draggable nodes.\n */\nconst DragAndDrop: React.FC<DragAndDropProps> = ({\n draggedNodeContainer,\n minMouseDistPx = 10,\n longPressMs = 500,\n autoScrollDistPercent = 20,\n autoScrollMaxSpeedPx = 100,\n transitionDelayMs = 250,\n onDragEnd = () => {},\n children,\n}) => {\n // The user can drag a node between the lists (the Droppable components).\n // To determine which list a node should be dropped in, we need to store refs to all the lists.\n const listStoreRef = useRef<ListStore>(new ListStore());\n\n // The class name for a node used to set the transition style\n const generatedId = useGeneratedId();\n const nodeClassName = useMemo(() => `n${generatedId}`, [generatedId]);\n\n // The node that is currently being dragged\n const [draggedNode, setDraggedNode] = useState<DraggedNode \| null>(null);\n const startNodeRef = useRef<StartNode \| null>(null);\n const [cursorPosition, setCursorPosition] = useState<Position>({\n x: 0,\n y: 0,\n });\n\n // Add a new list to the store\n const registerList = useCallback((list: NodeList) => {\n listStoreRef.current.add(list);\n }, []);\n\n // Remove the existing list from the store\n const deregisterList = useCallback((id: string) => {\n listStoreRef.current.remove(id);\n }, []);\n\n // Set the style to delay transitions when the node is dragging\n useTransitionStyle({\n className: nodeClassName,\n ms: transitionDelayMs,\n enabled: !!draggedNode,\n });\n\n const onDragStart = useCallback<OnDragStart>(\n (pos: Position, startPos: Position) => {\n const startNode = startNodeRef.current;\n if (!startNode) return;\n const [, , nodeRef] = startNode.node;\n if (!nodeRef.current) return;\n const rect = nodeRef.current.getBoundingClientRect();\n setCursorPosition(pos);\n setDraggedNode({\n list: startNode.list,\n node: startNode.node,\n position: {\n x: startPos.x - rect.x,\n y: startPos.y - rect.y,\n },\n });\n startNodeRef.current = null;\n },\n []\n );\n\n const onDragMove = useCallback<OnDragMove>((pos: Position) => {\n setCursorPosition(pos);\n }, []);\n\n const dragEndHandler = useCallback<OnDragEnd>(() => {\n setDraggedNode(null);\n }, []);\n\n const { onMouseDown, onTouchStart } = useDrag({\n onDragStart,\n onDragMove,\n onDragEnd: dragEndHandler,\n minMouseDistPx,\n longPressMs,\n });\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent, list: NodeList, node: ExistingNode) => {\n startNodeRef.current = { list, node };\n onMouseDown(e);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent, list: NodeList, node: ExistingNode) => {\n startNodeRef.current = { list, node };\n onTouchStart(e);\n },\n [onTouchStart]\n );\n\n // Prevent body scrolling when the node is dragging.\n // It's important to attach the event to the body (not to the document). Otherwise, it won't work in mobile chrome.\n usePreventDefaultEvent(document.body, 'touchmove', !!draggedNode);\n\n // Implement the drag animation\n useDragEffect({\n draggedNode,\n cursorPosition,\n listStoreRef,\n onDragEnd,\n });\n\n // Auto scroll if the cursor position is located near the border\n useAutoScroll({\n enabled: !!draggedNode,\n distPercent: autoScrollDistPercent,\n maxSpeedPx: autoScrollMaxSpeedPx,\n });\n\n const initRect = useInitRect(draggedNode ? draggedNode.node[2] : undefined);\n\n const dragAndDropContext = useMemoObject({\n registerList,\n deregisterList,\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n nodeClassName,\n });\n\n return (\n <DragAndDropContext.Provider value={dragAndDropContext}>\n {children}\n\n {draggedNode && (\n <Portal container={draggedNodeContainer}>\n {draggedNode.list.renderDraggedNode({\n index: draggedNode.node[4],\n id: draggedNode.node[5],\n style: {\n position: 'fixed',\n left: cursorPosition.x - draggedNode.position.x,\n top: cursorPosition.y - draggedNode.position.y,\n width: initRect ? initRect.initWidth : undefined,\n height: initRect ? initRect.initHeight : undefined,\n zIndex: 1001,\n },\n })}\n </Portal>\n )}\n </DragAndDropContext.Provider>\n );\n};\n\nexport type { DragEndHandler } from './utils/useDragEffect';\n\nexport default DragAndDrop;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DragAndDrop.js","names":["Portal","useAutoScroll","useDrag","useMemoObject","usePreventDefaultEvent","React","useCallback","useMemo","useRef","useState","ListStore","DragAndDropContext","useDragEffect","useGeneratedId","useInitRect","useTransitionStyle","DragAndDrop","draggedNodeContainer","minMouseDistPx","longPressMs","autoScrollDistPercent","autoScrollMaxSpeedPx","transitionDelayMs","onDragEnd","children","listStoreRef","generatedId","nodeClassName","draggedNode","setDraggedNode","startNodeRef","cursorPosition","setCursorPosition","x","y","registerList","list","current","add","deregisterList","id","remove","className","ms","enabled","onDragStart","pos","startPos","startNode","nodeRef","node","rect","getBoundingClientRect","position","onDragMove","dragEndHandler","onMouseDown","onTouchStart","mouseDownHandler","e","touchStartHandler","document","body","distPercent","maxSpeedPx","initRect","undefined","dragAndDropContext","createElement","Provider","value","container","renderDraggedNode","index","style","left","top","width","initWidth","height","initHeight","zIndex"],"sources":["../../src/DragAndDrop.tsx"],"sourcesContent":["import Portal, { PortalProps } from '@os-design/portal';\nimport useAutoScroll from '@os-design/use-auto-scroll';\nimport useDrag, {\n OnDragEnd,\n OnDragMove,\n OnDragStart,\n Position,\n} from '@os-design/use-drag';\nimport useMemoObject from '@os-design/use-memo-object';\nimport usePreventDefaultEvent from '@os-design/use-prevent-default-event';\nimport React, {\n MouseEvent,\n TouchEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ListStore from './utils/ListStore';\nimport NodeList, { ExistingNode } from './utils/NodeList';\nimport { DragAndDropContext } from './utils/useDragAndDrop';\nimport useDragEffect, {\n DragEndHandler,\n DraggedNode,\n} from './utils/useDragEffect';\nimport useGeneratedId from './utils/useGeneratedId';\nimport useInitRect from './utils/useInitRect';\nimport useTransitionStyle from './utils/useTransitionStyle';\n\nexport interface DragAndDropProps {\n /*\n The container in which the dragged node will be rendered.\n * @default document.body\n /\n draggedNodeContainer?: PortalProps['container'];\n /\n The min distance required to start dragging a node (in px).\n * @default 10\n /\n minMouseDistPx?: number;\n /\n The delay of the long press event required to start dragging a node on the touch device (in ms).\n * @default 500\n /\n longPressMs?: number;\n /\n The distance to the bound at which the list starts to scroll automatically (in percent).\n * @default 20\n /\n autoScrollDistPercent?: number;\n /\n The max auto scroll speed (in px).\n * @default 100\n /\n autoScrollMaxSpeedPx?: number;\n /\n The animation duration (in ms).\n * @default 250\n /\n transitionDelayMs?: number;\n /\n The callback that is called when the drag is completed.\n * @default undefined\n /\n onDragEnd?: DragEndHandler;\n /\n The children.\n * @default undefined\n /\n children?: React.ReactNode;\n}\n\ninterface StartNode {\n list: NodeList;\n node: ExistingNode;\n}\n\n/\n The container containing one or more lists with draggable nodes.\n */\nconst DragAndDrop: React.FC<DragAndDropProps> = ({\n draggedNodeContainer,\n minMouseDistPx = 10,\n longPressMs = 500,\n autoScrollDistPercent = 20,\n autoScrollMaxSpeedPx = 100,\n transitionDelayMs = 250,\n onDragEnd = () => {},\n children,\n}) => {\n // The user can drag a node between the lists (the Droppable components).\n // To determine which list a node should be dropped in, we need to store refs to all the lists.\n const listStoreRef = useRef<ListStore>(new ListStore());\n\n // The class name for a node used to set the transition style\n const generatedId = useGeneratedId();\n const nodeClassName = useMemo(() => `n${generatedId}`, [generatedId]);\n\n // The node that is currently being dragged\n const [draggedNode, setDraggedNode] = useState<DraggedNode \| null>(null);\n const startNodeRef = useRef<StartNode \| null>(null);\n const [cursorPosition, setCursorPosition] = useState<Position>({\n x: 0,\n y: 0,\n });\n\n // Add a new list to the store\n const registerList = useCallback((list: NodeList) => {\n listStoreRef.current.add(list);\n }, []);\n\n // Remove the existing list from the store\n const deregisterList = useCallback((id: string) => {\n listStoreRef.current.remove(id);\n }, []);\n\n // Set the style to delay transitions when the node is dragging\n useTransitionStyle({\n className: nodeClassName,\n ms: transitionDelayMs,\n enabled: !!draggedNode,\n });\n\n const onDragStart = useCallback<OnDragStart>(\n (pos: Position, startPos: Position) => {\n const startNode = startNodeRef.current;\n if (!startNode) return;\n const [, , nodeRef] = startNode.node;\n if (!nodeRef.current) return;\n const rect = nodeRef.current.getBoundingClientRect();\n setCursorPosition(pos);\n setDraggedNode({\n list: startNode.list,\n node: startNode.node,\n position: {\n x: startPos.x - rect.x,\n y: startPos.y - rect.y,\n },\n });\n startNodeRef.current = null;\n },\n []\n );\n\n const onDragMove = useCallback<OnDragMove>((pos: Position) => {\n setCursorPosition(pos);\n }, []);\n\n const dragEndHandler = useCallback<OnDragEnd>(() => {\n setDraggedNode(null);\n }, []);\n\n const { onMouseDown, onTouchStart } = useDrag({\n onDragStart,\n onDragMove,\n onDragEnd: dragEndHandler,\n minMouseDistPx,\n longPressMs,\n });\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent, list: NodeList, node: ExistingNode) => {\n startNodeRef.current = { list, node };\n onMouseDown(e);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent, list: NodeList, node: ExistingNode) => {\n startNodeRef.current = { list, node };\n onTouchStart(e);\n },\n [onTouchStart]\n );\n\n // Prevent body scrolling when the node is dragging.\n // It's important to attach the event to the body (not to the document). Otherwise, it won't work in mobile chrome.\n usePreventDefaultEvent(document.body, 'touchmove', !!draggedNode);\n\n // Implement the drag animation\n useDragEffect({\n draggedNode,\n cursorPosition,\n listStoreRef,\n onDragEnd,\n });\n\n // Auto scroll if the cursor position is located near the border\n useAutoScroll({\n enabled: !!draggedNode,\n distPercent: autoScrollDistPercent,\n maxSpeedPx: autoScrollMaxSpeedPx,\n });\n\n const initRect = useInitRect(draggedNode ? draggedNode.node[2] : undefined);\n\n const dragAndDropContext = useMemoObject({\n registerList,\n deregisterList,\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n nodeClassName,\n });\n\n return (\n <DragAndDropContext.Provider value={dragAndDropContext}>\n {children}\n\n {draggedNode && (\n <Portal container={draggedNodeContainer}>\n {draggedNode.list.renderDraggedNode({\n index: draggedNode.node[4],\n id: draggedNode.node[5],\n style: {\n position: 'fixed',\n left: cursorPosition.x - draggedNode.position.x,\n top: cursorPosition.y - draggedNode.position.y,\n width: initRect ? initRect.initWidth : undefined,\n height: initRect ? initRect.initHeight : undefined,\n zIndex: 1001,\n },\n })}\n </Portal>\n )}\n </DragAndDropContext.Provider>\n );\n};\n\nexport type { DragEndHandler } from './utils/useDragEffect';\n\nexport default DragAndDrop;\n"],"mappings":"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"}

package/dist/esm/Draggable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Draggable.js","names":["useMemoObject","React","useCallback","useEffect","useRef","useState","useAppendClassName","useDragAndDrop","useDroppable","Draggable","index","id","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers","createElement","Fragment"],"sources":["../../src/Draggable.tsx"],"sourcesContent":["import useMemoObject from '@os-design/use-memo-object';\n\nimport React, {\n CSSProperties,\n MouseEvent,\n RefObject,\n TouchEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Node } from './utils/NodeList';\n\nimport useAppendClassName from './utils/useAppendClassName';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useDroppable from './utils/useDroppable';\n\nexport interface DraggableHandlers {\n /*\n The handler that should be called when the mouse down event occurs.\n /\n onMouseDown: (e: MouseEvent) => void;\n /\n The handler that should be called when the touch start event occurs.\n /\n onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n /\n The reference to the draggable list item.\n /\n ref: RefObject<any>; // eslint-disable-line @typescript-eslint/no-explicit-any\n /\n Additional styles for moving the list item.\n /\n style: CSSProperties;\n /\n The handlers to catch events when the user starts dragging the list item.\n /\n handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n /\n The index of the draggable node.\n /\n index: number;\n /\n The ID of the draggable node.\n /\n id: string;\n /\n The function that renders the draggable node.\n */\n children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, id, children }) => {\n // The reference to the list item\n const ref = useRef<HTMLDivElement \| null>(null);\n // The reference to the node containing the refs to the prev and next nodes\n const nodeRef = useRef<Node>(null);\n // Additional styles for moving the list item\n const [style, setStyle] = useState<CSSProperties>({});\n\n const { nodeClassName } = useDragAndDrop();\n const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n useDroppable();\n\n // Register the node in the list\n useEffect(() => {\n nodeRef.current = registerNode({ ref, setStyle, index, id });\n return () => {\n if (!nodeRef.current) return;\n deregisterNode(nodeRef.current);\n nodeRef.current = null;\n };\n }, [deregisterNode, id, index, registerNode]);\n\n // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n useAppendClassName(ref, nodeClassName);\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent) => {\n if (!nodeRef.current) return;\n onMouseDown(e, nodeRef.current);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent) => {\n if (!nodeRef.current) return;\n onTouchStart(e, nodeRef.current);\n },\n [onTouchStart]\n );\n\n const handlers = useMemoObject({\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n });\n\n return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"mappings":"AAAA,OAAOA,aAAa,MAAM,4BAA4B;~~AAEtD~~,OAAOC,KAAK,IAKVC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,OAAO;~~AAGd~~,OAAOC,kBAAkB,MAAM,4BAA4B;AAC3D,OAAOC,cAAc,MAAM,wBAAwB;AACnD,OAAOC,YAAY,MAAM,sBAAsB;AA2C/C,MAAMC,SAAmC,GAAGA,CAAC;EAAEC,KAAK;EAAEC,EAAE;EAAEC;AAAS,CAAC,KAAK;EACvE;EACA,MAAMC,GAAG,GAAGT,MAAM,CAAwB,IAAI,CAAC;EAC/C;EACA,MAAMU,OAAO,GAAGV,MAAM,CAAO,IAAI,CAAC;EAClC;EACA,MAAM,CAACW,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAAgB,CAAC,CAAC,CAAC;EAErD,MAAM;IAAEY;EAAc,CAAC,GAAGV,cAAc,CAAC,CAAC;EAC1C,MAAM;IAAEW,YAAY;IAAEC,cAAc;IAAEC,WAAW;IAAEC;EAAa,CAAC,GAC/Db,YAAY,CAAC,CAAC;;EAEhB;EACAL,SAAS,CAAC,MAAM;IACdW,OAAO,CAACQ,OAAO,GAAGJ,YAAY,CAAC;MAAEL,GAAG;MAAEG,QAAQ;MAAEN,KAAK;MAAEC;IAAG,CAAC,CAAC;IAC5D,OAAO,MAAM;MACX,IAAI,CAACG,OAAO,CAACQ,OAAO,EAAE;MACtBH,cAAc,CAACL,OAAO,CAACQ,OAAO,CAAC;MAC/BR,OAAO,CAACQ,OAAO,GAAG,IAAI;IACxB,CAAC;EACH,CAAC,EAAE,CAACH,cAAc,EAAER,EAAE,EAAED,KAAK,EAAEQ,YAAY,CAAC,CAAC;;EAE7C;EACAZ,kBAAkB,CAACO,GAAG,EAAEI,aAAa,CAAC;;EAEtC;EACA,MAAMM,gBAAgB,GAAGrB,WAAW,CACjCsB,CAAa,IAAK;IACjB,IAAI,CAACV,OAAO,CAACQ,OAAO,EAAE;IACtBF,WAAW,CAACI,CAAC,EAAEV,OAAO,CAACQ,OAAO,CAAC;EACjC,CAAC,EACD,CAACF,WAAW,CACd,CAAC;EACD,MAAMK,iBAAiB,GAAGvB,WAAW,CAClCsB,CAAa,IAAK;IACjB,IAAI,CAACV,OAAO,CAACQ,OAAO,EAAE;IACtBD,YAAY,CAACG,CAAC,EAAEV,OAAO,CAACQ,OAAO,CAAC;EAClC,CAAC,EACD,CAACD,YAAY,CACf,CAAC;EAED,MAAMK,QAAQ,GAAG1B,aAAa,CAAC;IAC7BoB,WAAW,EAAEG,gBAAgB;IAC7BF,YAAY,EAAEI;EAChB,CAAC,CAAC;EAEF,oBAAOxB,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAA2B,QAAA,QAAGhB,QAAQ,CAAC;IAAEC,GAAG;IAAEE,KAAK;IAAEW;EAAS,CAAC,CAAI,CAAC;AAClD,CAAC;AAED,eAAejB,SAAS"}
1	+ {"version":3,"file":"Draggable.js","names":["useMemoObject","React","useCallback","useEffect","useRef","useState","useAppendClassName","useDragAndDrop","useDroppable","Draggable","index","id","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers","createElement","Fragment"],"sources":["../../src/Draggable.tsx"],"sourcesContent":["import useMemoObject from '@os-design/use-memo-object';\nimport React, {\n CSSProperties,\n MouseEvent,\n RefObject,\n TouchEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Node } from './utils/NodeList';\nimport useAppendClassName from './utils/useAppendClassName';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useDroppable from './utils/useDroppable';\n\nexport interface DraggableHandlers {\n /*\n The handler that should be called when the mouse down event occurs.\n /\n onMouseDown: (e: MouseEvent) => void;\n /\n The handler that should be called when the touch start event occurs.\n /\n onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n /\n The reference to the draggable list item.\n /\n ref: RefObject<any>; // eslint-disable-line @typescript-eslint/no-explicit-any\n /\n Additional styles for moving the list item.\n /\n style: CSSProperties;\n /\n The handlers to catch events when the user starts dragging the list item.\n /\n handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n /\n The index of the draggable node.\n /\n index: number;\n /\n The ID of the draggable node.\n /\n id: string;\n /\n The function that renders the draggable node.\n */\n children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, id, children }) => {\n // The reference to the list item\n const ref = useRef<HTMLDivElement \| null>(null);\n // The reference to the node containing the refs to the prev and next nodes\n const nodeRef = useRef<Node>(null);\n // Additional styles for moving the list item\n const [style, setStyle] = useState<CSSProperties>({});\n\n const { nodeClassName } = useDragAndDrop();\n const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n useDroppable();\n\n // Register the node in the list\n useEffect(() => {\n nodeRef.current = registerNode({ ref, setStyle, index, id });\n return () => {\n if (!nodeRef.current) return;\n deregisterNode(nodeRef.current);\n nodeRef.current = null;\n };\n }, [deregisterNode, id, index, registerNode]);\n\n // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n useAppendClassName(ref, nodeClassName);\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent) => {\n if (!nodeRef.current) return;\n onMouseDown(e, nodeRef.current);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent) => {\n if (!nodeRef.current) return;\n onTouchStart(e, nodeRef.current);\n },\n [onTouchStart]\n );\n\n const handlers = useMemoObject({\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n });\n\n return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"mappings":"AAAA,OAAOA,aAAa,MAAM,4BAA4B;AACtD,OAAOC,KAAK,IAKVC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,OAAOC,kBAAkB,MAAM,4BAA4B;AAC3D,OAAOC,cAAc,MAAM,wBAAwB;AACnD,OAAOC,YAAY,MAAM,sBAAsB;AA2C/C,MAAMC,SAAmC,GAAGA,CAAC;EAAEC,KAAK;EAAEC,EAAE;EAAEC;AAAS,CAAC,KAAK;EACvE;EACA,MAAMC,GAAG,GAAGT,MAAM,CAAwB,IAAI,CAAC;EAC/C;EACA,MAAMU,OAAO,GAAGV,MAAM,CAAO,IAAI,CAAC;EAClC;EACA,MAAM,CAACW,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAAgB,CAAC,CAAC,CAAC;EAErD,MAAM;IAAEY;EAAc,CAAC,GAAGV,cAAc,CAAC,CAAC;EAC1C,MAAM;IAAEW,YAAY;IAAEC,cAAc;IAAEC,WAAW;IAAEC;EAAa,CAAC,GAC/Db,YAAY,CAAC,CAAC;;EAEhB;EACAL,SAAS,CAAC,MAAM;IACdW,OAAO,CAACQ,OAAO,GAAGJ,YAAY,CAAC;MAAEL,GAAG;MAAEG,QAAQ;MAAEN,KAAK;MAAEC;IAAG,CAAC,CAAC;IAC5D,OAAO,MAAM;MACX,IAAI,CAACG,OAAO,CAACQ,OAAO,EAAE;MACtBH,cAAc,CAACL,OAAO,CAACQ,OAAO,CAAC;MAC/BR,OAAO,CAACQ,OAAO,GAAG,IAAI;IACxB,CAAC;EACH,CAAC,EAAE,CAACH,cAAc,EAAER,EAAE,EAAED,KAAK,EAAEQ,YAAY,CAAC,CAAC;;EAE7C;EACAZ,kBAAkB,CAACO,GAAG,EAAEI,aAAa,CAAC;;EAEtC;EACA,MAAMM,gBAAgB,GAAGrB,WAAW,CACjCsB,CAAa,IAAK;IACjB,IAAI,CAACV,OAAO,CAACQ,OAAO,EAAE;IACtBF,WAAW,CAACI,CAAC,EAAEV,OAAO,CAACQ,OAAO,CAAC;EACjC,CAAC,EACD,CAACF,WAAW,CACd,CAAC;EACD,MAAMK,iBAAiB,GAAGvB,WAAW,CAClCsB,CAAa,IAAK;IACjB,IAAI,CAACV,OAAO,CAACQ,OAAO,EAAE;IACtBD,YAAY,CAACG,CAAC,EAAEV,OAAO,CAACQ,OAAO,CAAC;EAClC,CAAC,EACD,CAACD,YAAY,CACf,CAAC;EAED,MAAMK,QAAQ,GAAG1B,aAAa,CAAC;IAC7BoB,WAAW,EAAEG,gBAAgB;IAC7BF,YAAY,EAAEI;EAChB,CAAC,CAAC;EAEF,oBAAOxB,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAA2B,QAAA,QAAGhB,QAAQ,CAAC;IAAEC,GAAG;IAAEE,KAAK;IAAEW;EAAS,CAAC,CAAI,CAAC;AAClD,CAAC;AAED,eAAejB,SAAS"}

package/dist/esm/Droppable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Droppable.js","names":["useMemoObject","React","useCallback","useEffect","useMemo","useRef","NodeList","useDragAndDrop","DroppableContext","useGeneratedId","Droppable","renderDraggedNode","id","horizontal","children","ref","innerRef","generatedId","droppableId","listRef","current","registerList","deregisterList","onMouseDown","onTouchStart","listId","registerNode","props","add","deregisterNode","node","remove","mouseDownHandler","e","touchStartHandler","droppableContext","createElement","Provider","value"],"sources":["../../src/Droppable.tsx"],"sourcesContent":["import useMemoObject from '@os-design/use-memo-object';\n\nimport React, {\n MouseEvent,\n RefObject,\n TouchEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport NodeList, {\n ExistingNode,\n NodeProps,\n RenderDraggedNode,\n} from './utils/NodeList';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport { DroppableContext } from './utils/useDroppable';\nimport useGeneratedId from './utils/useGeneratedId';\n\nexport interface DroppableChildrenProps {\n /*\n The reference to the list.\n * If a virtual list is used, pass it to the outerRef prop.\n /\n ref: RefObject<HTMLDivElement>;\n /\n The reference to the container inside the virtual list.\n * Pass it to the innerRef prop.\n /\n innerRef: RefObject<HTMLDivElement>;\n}\n\nexport interface DroppableProps {\n /\n The function that renders the dragged node.\n /\n renderDraggedNode: RenderDraggedNode;\n /\n The ID of the list with draggable nodes.\n * Used to determine in which list the dragged node was dropped.\n * @default undefined\n /\n id?: string;\n /\n Whether the list is horizontal.\n * @default false\n /\n horizontal?: boolean;\n /\n The function that renders the list with draggable nodes.\n */\n children: (props: DroppableChildrenProps) => React.ReactNode;\n}\n\nconst Droppable: React.FC<DroppableProps> = ({\n renderDraggedNode,\n id,\n horizontal = false,\n children,\n}) => {\n // The reference to the list\n const ref = useRef<HTMLDivElement>(null);\n // The reference to the container inside the virtual list\n const innerRef = useRef<HTMLDivElement>(null);\n // The unique ID of the list. If no ID was specified, the generated one is used.\n const generatedId = useGeneratedId();\n const droppableId = useMemo(() => id \|\| generatedId, [generatedId, id]);\n // The reference to the list of nodes\n const listRef = useRef(\n new NodeList({\n id: droppableId,\n ref,\n innerRef,\n horizontal,\n renderDraggedNode,\n })\n );\n\n // Update the ID of the list if it changes\n useEffect(() => {\n listRef.current.id = droppableId;\n }, [droppableId]);\n\n // Update the list orientation if it changes.\n // There is no need to check the order of the nodes in the list because it will be the same.\n useEffect(() => {\n listRef.current.horizontal = horizontal;\n }, [horizontal]);\n\n // Update the callback that renders the dragged node if it changes\n useEffect(() => {\n listRef.current.renderDraggedNode = renderDraggedNode;\n }, [renderDraggedNode]);\n\n const { registerList, deregisterList, onMouseDown, onTouchStart } =\n useDragAndDrop();\n\n // Register the list in the store\n useEffect(() => {\n registerList(listRef.current);\n const listId = listRef.current.id;\n return () => deregisterList(listId);\n }, [deregisterList, registerList]);\n\n const registerNode = useCallback(\n (props: NodeProps) => listRef.current.add(props),\n []\n );\n const deregisterNode = useCallback((node: ExistingNode) => {\n listRef.current.remove(node);\n }, []);\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent, node: ExistingNode) => {\n onMouseDown(e, listRef.current, node);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent, node: ExistingNode) => {\n onTouchStart(e, listRef.current, node);\n },\n [onTouchStart]\n );\n\n const droppableContext = useMemoObject({\n registerNode,\n deregisterNode,\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n });\n\n return (\n <DroppableContext.Provider value={droppableContext}>\n {(children as Function)({ ref, innerRef })}\n </DroppableContext.Provider>\n );\n};\n\nexport default Droppable;\n"],"mappings":"AAAA,OAAOA,aAAa,MAAM,4BAA4B;~~AAEtD~~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"}
1	+ {"version":3,"file":"Droppable.js","names":["useMemoObject","React","useCallback","useEffect","useMemo","useRef","NodeList","useDragAndDrop","DroppableContext","useGeneratedId","Droppable","renderDraggedNode","id","horizontal","children","ref","innerRef","generatedId","droppableId","listRef","current","registerList","deregisterList","onMouseDown","onTouchStart","listId","registerNode","props","add","deregisterNode","node","remove","mouseDownHandler","e","touchStartHandler","droppableContext","createElement","Provider","value"],"sources":["../../src/Droppable.tsx"],"sourcesContent":["import useMemoObject from '@os-design/use-memo-object';\nimport React, {\n MouseEvent,\n RefObject,\n TouchEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport NodeList, {\n ExistingNode,\n NodeProps,\n RenderDraggedNode,\n} from './utils/NodeList';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport { DroppableContext } from './utils/useDroppable';\nimport useGeneratedId from './utils/useGeneratedId';\n\nexport interface DroppableChildrenProps {\n /*\n The reference to the list.\n * If a virtual list is used, pass it to the outerRef prop.\n /\n ref: RefObject<HTMLDivElement>;\n /\n The reference to the container inside the virtual list.\n * Pass it to the innerRef prop.\n /\n innerRef: RefObject<HTMLDivElement>;\n}\n\nexport interface DroppableProps {\n /\n The function that renders the dragged node.\n /\n renderDraggedNode: RenderDraggedNode;\n /\n The ID of the list with draggable nodes.\n * Used to determine in which list the dragged node was dropped.\n * @default undefined\n /\n id?: string;\n /\n Whether the list is horizontal.\n * @default false\n /\n horizontal?: boolean;\n /\n The function that renders the list with draggable nodes.\n */\n children: (props: DroppableChildrenProps) => React.ReactNode;\n}\n\nconst Droppable: React.FC<DroppableProps> = ({\n renderDraggedNode,\n id,\n horizontal = false,\n children,\n}) => {\n // The reference to the list\n const ref = useRef<HTMLDivElement>(null);\n // The reference to the container inside the virtual list\n const innerRef = useRef<HTMLDivElement>(null);\n // The unique ID of the list. If no ID was specified, the generated one is used.\n const generatedId = useGeneratedId();\n const droppableId = useMemo(() => id \|\| generatedId, [generatedId, id]);\n // The reference to the list of nodes\n const listRef = useRef(\n new NodeList({\n id: droppableId,\n ref,\n innerRef,\n horizontal,\n renderDraggedNode,\n })\n );\n\n // Update the ID of the list if it changes\n useEffect(() => {\n listRef.current.id = droppableId;\n }, [droppableId]);\n\n // Update the list orientation if it changes.\n // There is no need to check the order of the nodes in the list because it will be the same.\n useEffect(() => {\n listRef.current.horizontal = horizontal;\n }, [horizontal]);\n\n // Update the callback that renders the dragged node if it changes\n useEffect(() => {\n listRef.current.renderDraggedNode = renderDraggedNode;\n }, [renderDraggedNode]);\n\n const { registerList, deregisterList, onMouseDown, onTouchStart } =\n useDragAndDrop();\n\n // Register the list in the store\n useEffect(() => {\n registerList(listRef.current);\n const listId = listRef.current.id;\n return () => deregisterList(listId);\n }, [deregisterList, registerList]);\n\n const registerNode = useCallback(\n (props: NodeProps) => listRef.current.add(props),\n []\n );\n const deregisterNode = useCallback((node: ExistingNode) => {\n listRef.current.remove(node);\n }, []);\n\n // Handlers that determine whether a user clicks on the node\n const mouseDownHandler = useCallback(\n (e: MouseEvent, node: ExistingNode) => {\n onMouseDown(e, listRef.current, node);\n },\n [onMouseDown]\n );\n const touchStartHandler = useCallback(\n (e: TouchEvent, node: ExistingNode) => {\n onTouchStart(e, listRef.current, node);\n },\n [onTouchStart]\n );\n\n const droppableContext = useMemoObject({\n registerNode,\n deregisterNode,\n onMouseDown: mouseDownHandler,\n onTouchStart: touchStartHandler,\n });\n\n return (\n <DroppableContext.Provider value={droppableContext}>\n {(children as Function)({ ref, innerRef })}\n </DroppableContext.Provider>\n );\n};\n\nexport default Droppable;\n"],"mappings":"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"}

package/dist/types/DragAndDrop.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragAndDrop.d.ts","sourceRoot":"","sources":["../../src/DragAndDrop.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;~~AAWxD~~,OAAO,KAON,MAAM,OAAO,CAAC;~~AAKf~~,OAAsB,EACpB,cAAc,EAEf,MAAM,uBAAuB,CAAC;~~AAM~~/B,MAAM,WAAW,gBAAgB;IAK/B,oBAAoB,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAKhD,cAAc,CAAC,EAAE,MAAM,CAAC;IAKxB,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAK/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAK9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAK3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAK3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAUD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmJ3C,CAAC;AAEF,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"DragAndDrop.d.ts","sourceRoot":"","sources":["../../src/DragAndDrop.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAUxD,OAAO,KAON,MAAM,OAAO,CAAC;AAIf,OAAsB,EACpB,cAAc,EAEf,MAAM,uBAAuB,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAK/B,oBAAoB,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAKhD,cAAc,CAAC,EAAE,MAAM,CAAC;IAKxB,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAK/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAK9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAK3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAK3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAUD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmJ3C,CAAC;AAEF,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAe,WAAW,CAAC"}

package/dist/types/Draggable.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../src/Draggable.tsx"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EACV,SAAS,EACT,UAAU,EAKX,MAAM,OAAO,CAAC;~~AAOf~~,MAAM,WAAW,iBAAiB;IAIhC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAIrC,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IAIrC,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAIpB,KAAK,EAAE,aAAa,CAAC;IAIrB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAI7B,KAAK,EAAE,MAAM,CAAC;IAId,EAAE,EAAE,MAAM,CAAC;IAIX,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+CvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../src/Draggable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EACV,SAAS,EACT,UAAU,EAKX,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,iBAAiB;IAIhC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAIrC,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IAIrC,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAIpB,KAAK,EAAE,aAAa,CAAC;IAIrB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAI7B,KAAK,EAAE,MAAM,CAAC;IAId,EAAE,EAAE,MAAM,CAAC;IAIX,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+CvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/Droppable.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../../src/Droppable.tsx"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,EAAE,EAEZ,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAiB,EAGf,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAK1B,MAAM,WAAW,sBAAsB;IAKrC,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAK/B,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,cAAc;IAI7B,iBAAiB,EAAE,iBAAiB,CAAC;IAMrC,EAAE,CAAC,EAAE,MAAM,CAAC;IAKZ,UAAU,CAAC,EAAE,OAAO,CAAC;IAIrB,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoFvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../../src/Droppable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAiB,EAGf,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAK1B,MAAM,WAAW,sBAAsB;IAKrC,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAK/B,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,cAAc;IAI7B,iBAAiB,EAAE,iBAAiB,CAAC;IAMrC,EAAE,CAAC,EAAE,MAAM,CAAC;IAKZ,UAAU,CAAC,EAAE,OAAO,CAAC;IAIrB,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoFvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/drag-sort",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -31,15 +31,15 @@
   },
   "dependencies": {
     "@os-design/portal": "^1.0.14",
-    "@os-design/use-auto-scroll": "^1.0.15",
-    "@os-design/use-drag": "^1.0.13",
+    "@os-design/use-auto-scroll": "^1.0.16",
+    "@os-design/use-drag": "^1.0.14",
     "@os-design/use-event": "^1.0.17",
     "@os-design/use-memo-object": "^1.0.12",
-    "@os-design/use-prevent-default-event": "^1.0.13",
+    "@os-design/use-prevent-default-event": "^1.0.14",
     "@os-design/use-throttle": "^1.0.18"
   },
   "devDependencies": {
-    "@os-design/omit-emotion-props": "^1.0.15",
+    "@os-design/omit-emotion-props": "^1.0.16",
     "@os-design/use-size": "^1.0.18",
     "react-window": "^1.8.9"
   },
@@ -47,5 +47,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "04dd6ac7bd5e972ad98a6d8b14868332d6a808d3"
+  "gitHead": "b17670408f318b1060ffafdbe47234446a076d04"
 }

package/src/DragAndDrop.tsx CHANGED Viewed

@@ -8,7 +8,6 @@ import useDrag, {
 } from '@os-design/use-drag';
 import useMemoObject from '@os-design/use-memo-object';
 import usePreventDefaultEvent from '@os-design/use-prevent-default-event';
 import React, {
   MouseEvent,
   TouchEvent,
@@ -20,14 +19,12 @@ import React, {
 import ListStore from './utils/ListStore';
 import NodeList, { ExistingNode } from './utils/NodeList';
 import { DragAndDropContext } from './utils/useDragAndDrop';
 import useDragEffect, {
   DragEndHandler,
   DraggedNode,
 } from './utils/useDragEffect';
 import useGeneratedId from './utils/useGeneratedId';
 import useInitRect from './utils/useInitRect';
 import useTransitionStyle from './utils/useTransitionStyle';
 export interface DragAndDropProps {

package/src/Draggable.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import useMemoObject from '@os-design/use-memo-object';
 import React, {
   CSSProperties,
   MouseEvent,
@@ -11,7 +10,6 @@ import React, {
   useState,
 } from 'react';
 import { Node } from './utils/NodeList';
 import useAppendClassName from './utils/useAppendClassName';
 import useDragAndDrop from './utils/useDragAndDrop';
 import useDroppable from './utils/useDroppable';

package/src/Droppable.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import useMemoObject from '@os-design/use-memo-object';
 import React, {
   MouseEvent,
   RefObject,