@os-design/drag-sort 1.0.6 → 1.0.9

package/dist/cjs/DragAndDrop.js

@@ -71,7 +71,7 @@ var DragAndDrop = function DragAndDrop(_ref) {
   // To determine which list a node should be dropped in, we need to store refs to all the lists.
   var listStoreRef = (0, _react.useRef)(new _ListStore["default"]()); // The class name for a node used to set the transition style
 
-  var generatedId = (0, _useGeneratedId["default"])(4);
+  var generatedId = (0, _useGeneratedId["default"])();
   var nodeClassName = (0, _react.useMemo)(function () {
     return "n".concat(generatedId);
   }, [generatedId]); // The node that is currently being dragged
@@ -187,6 +187,7 @@ var DragAndDrop = function DragAndDrop(_ref) {
     container: draggedNodeContainer
   }, draggedNode.list.renderDraggedNode({
     index: draggedNode.node[4],
+    id: draggedNode.node[5],
     style: {
       position: 'fixed',
       left: cursorPosition.x - draggedNode.position.x,

package/dist/cjs/DragAndDrop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DragAndDrop.tsx"],"names":["DragAndDrop","draggedNodeContainer","minMouseDistPx","longPressMs","autoScrollDistPercent","autoScrollMaxSpeedPx","transitionDelayMs","onDragEnd","children","listStoreRef","ListStore","generatedId","nodeClassName","draggedNode","setDraggedNode","startNodeRef","x","y","cursorPosition","setCursorPosition","registerList","list","current","add","deregisterList","id","remove","className","ms","enabled","onDragStart","pos","startPos","startNode","node","nodeRef","rect","getBoundingClientRect","position","onDragMove","dragEndHandler","onMouseDown","onTouchStart","mouseDownHandler","e","touchStartHandler","document","body","distPercent","maxSpeedPx","initRect","undefined","dragAndDropContext","renderDraggedNode","index","style","left","top","width","initWidth","height","initHeight","zIndex"],"mappings":"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","sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport usePreventDefaultEvent from '@os-design/use-prevent-default-event';\nimport useMemoObject from '@os-design/use-memo-object';\nimport useDrag, {\n  Position,\n  OnDragEnd,\n  OnDragMove,\n  OnDragStart,\n} from '@os-design/use-drag';\nimport Portal, { PortalProps } from '@os-design/portal';\nimport useAutoScroll from '@os-design/use-auto-scroll';\nimport { DragAndDropContext } from './utils/useDragAndDrop';\nimport ListStore from './utils/ListStore';\nimport NodeList, { ExistingNode } from './utils/NodeList';\nimport useDragEffect, {\n  DragEndHandler,\n  DraggedNode,\n} from './utils/useDragEffect';\nimport useGeneratedId from './utils/useGeneratedId';\nimport useTransitionStyle from './utils/useTransitionStyle';\nimport useInitRect from './utils/useInitRect';\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(4);\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            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"],"file":"DragAndDrop.js"}
+{"version":3,"file":"DragAndDrop.js","names":["DragAndDrop","draggedNodeContainer","minMouseDistPx","longPressMs","autoScrollDistPercent","autoScrollMaxSpeedPx","transitionDelayMs","onDragEnd","children","listStoreRef","useRef","ListStore","generatedId","useGeneratedId","nodeClassName","useMemo","useState","draggedNode","setDraggedNode","startNodeRef","x","y","cursorPosition","setCursorPosition","registerList","useCallback","list","current","add","deregisterList","id","remove","useTransitionStyle","className","ms","enabled","onDragStart","pos","startPos","startNode","node","nodeRef","rect","getBoundingClientRect","position","onDragMove","dragEndHandler","useDrag","onMouseDown","onTouchStart","mouseDownHandler","e","touchStartHandler","usePreventDefaultEvent","document","body","useDragEffect","useAutoScroll","distPercent","maxSpeedPx","initRect","useInitRect","undefined","dragAndDropContext","useMemoObject","renderDraggedNode","index","style","left","top","width","initWidth","height","initHeight","zIndex"],"sources":["../../src/DragAndDrop.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport usePreventDefaultEvent from '@os-design/use-prevent-default-event';\nimport useMemoObject from '@os-design/use-memo-object';\nimport useDrag, {\n  Position,\n  OnDragEnd,\n  OnDragMove,\n  OnDragStart,\n} from '@os-design/use-drag';\nimport Portal, { PortalProps } from '@os-design/portal';\nimport useAutoScroll from '@os-design/use-auto-scroll';\nimport { DragAndDropContext } from './utils/useDragAndDrop';\nimport ListStore from './utils/ListStore';\nimport NodeList, { ExistingNode } from './utils/NodeList';\nimport useDragEffect, {\n  DragEndHandler,\n  DraggedNode,\n} from './utils/useDragEffect';\nimport useGeneratedId from './utils/useGeneratedId';\nimport useTransitionStyle from './utils/useTransitionStyle';\nimport useInitRect from './utils/useInitRect';\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

@@ -37,6 +37,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var Draggable = function Draggable(_ref) {
   var index = _ref.index,
+      id = _ref.id,
       children = _ref.children;
   // The reference to the list item
   var ref = (0, _react.useRef)(null); // The reference to the node containing the refs to the prev and next nodes
@@ -62,14 +63,15 @@ var Draggable = function Draggable(_ref) {
     nodeRef.current = registerNode({
       ref: ref,
       setStyle: setStyle,
-      index: index
+      index: index,
+      id: id
     });
     return function () {
       if (!nodeRef.current) return;
       deregisterNode(nodeRef.current);
       nodeRef.current = null;
     };
-  }, [deregisterNode, index, registerNode]); // Set the class name for the node to apply the transition style (see the DragAndDrop container)
+  }, [deregisterNode, id, index, registerNode]); // Set the class name for the node to apply the transition style (see the DragAndDrop container)
 
   (0, _useAppendClassName["default"])(ref, nodeClassName); // Handlers that determine whether a user clicks on the node
 

package/dist/cjs/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Draggable.tsx"],"names":["Draggable","index","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers"],"mappings":";;;;;;;;;AAAA;;AAUA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAuCA,IAAMA,SAAmC,GAAG,SAAtCA,SAAsC,OAAyB;AAAA,MAAtBC,KAAsB,QAAtBA,KAAsB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnE;AACA,MAAMC,GAAG,GAAG,mBAA8B,IAA9B,CAAZ,CAFmE,CAGnE;;AACA,MAAMC,OAAO,GAAG,mBAAa,IAAb,CAAhB,CAJmE,CAKnE;;AACA,kBAA0B,qBAAwB,EAAxB,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,wBAA0B,kCAA1B;AAAA,MAAQC,aAAR,mBAAQA,aAAR;;AACA,sBACE,gCADF;AAAA,MAAQC,YAAR,iBAAQA,YAAR;AAAA,MAAsBC,cAAtB,iBAAsBA,cAAtB;AAAA,MAAsCC,WAAtC,iBAAsCA,WAAtC;AAAA,MAAmDC,YAAnD,iBAAmDA,YAAnD,CATmE,CAYnE;;;AACA,wBAAU,YAAM;AACdP,IAAAA,OAAO,CAACQ,OAAR,GAAkBJ,YAAY,CAAC;AAAEL,MAAAA,GAAG,EAAHA,GAAF;AAAOG,MAAAA,QAAQ,EAARA,QAAP;AAAiBL,MAAAA,KAAK,EAALA;AAAjB,KAAD,CAA9B;AACA,WAAO,YAAM;AACX,UAAI,CAACG,OAAO,CAACQ,OAAb,EAAsB;AACtBH,MAAAA,cAAc,CAACL,OAAO,CAACQ,OAAT,CAAd;AACAR,MAAAA,OAAO,CAACQ,OAAR,GAAkB,IAAlB;AACD,KAJD;AAKD,GAPD,EAOG,CAACH,cAAD,EAAiBR,KAAjB,EAAwBO,YAAxB,CAPH,EAbmE,CAsBnE;;AACA,sCAAmBL,GAAnB,EAAwBI,aAAxB,EAvBmE,CAyBnE;;AACA,MAAMM,gBAAgB,GAAG,wBACvB,UAACC,CAAD,EAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBF,IAAAA,WAAW,CAACI,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAX;AACD,GAJsB,EAKvB,CAACF,WAAD,CALuB,CAAzB;AAOA,MAAMK,iBAAiB,GAAG,wBACxB,UAACD,CAAD,EAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBD,IAAAA,YAAY,CAACG,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAZ;AACD,GAJuB,EAKxB,CAACD,YAAD,CALwB,CAA1B;AAQA,MAAMK,QAAQ,GAAG,+BAAc;AAC7BN,IAAAA,WAAW,EAAEG,gBADgB;AAE7BF,IAAAA,YAAY,EAAEI;AAFe,GAAd,CAAjB;AAKA,sBAAO,kEAAGb,QAAQ,CAAC;AAAEC,IAAAA,GAAG,EAAHA,GAAF;AAAOE,IAAAA,KAAK,EAALA,KAAP;AAAcW,IAAAA,QAAQ,EAARA;AAAd,GAAD,CAAX,CAAP;AACD,CA/CD;;eAiDehB,S","sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\nimport { Node } from './utils/NodeList';\nimport useDroppable from './utils/useDroppable';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useAppendClassName from './utils/useAppendClassName';\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 function that renders the draggable node.\n   */\n  children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, 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 });\n    return () => {\n      if (!nodeRef.current) return;\n      deregisterNode(nodeRef.current);\n      nodeRef.current = null;\n    };\n  }, [deregisterNode, 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"],"file":"Draggable.js"}
+{"version":3,"file":"Draggable.js","names":["Draggable","index","id","children","ref","useRef","nodeRef","useState","style","setStyle","useDragAndDrop","nodeClassName","useDroppable","registerNode","deregisterNode","onMouseDown","onTouchStart","useEffect","current","useAppendClassName","mouseDownHandler","useCallback","e","touchStartHandler","handlers","useMemoObject"],"sources":["../../src/Draggable.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\nimport { Node } from './utils/NodeList';\nimport useDroppable from './utils/useDroppable';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useAppendClassName from './utils/useAppendClassName';\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;;AAUA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AA2CA,IAAMA,SAAmC,GAAG,SAAtCA,SAAsC,OAA6B;EAAA,IAA1BC,KAA0B,QAA1BA,KAA0B;EAAA,IAAnBC,EAAmB,QAAnBA,EAAmB;EAAA,IAAfC,QAAe,QAAfA,QAAe;EACvE;EACA,IAAMC,GAAG,GAAG,IAAAC,aAAA,EAA8B,IAA9B,CAAZ,CAFuE,CAGvE;;EACA,IAAMC,OAAO,GAAG,IAAAD,aAAA,EAAa,IAAb,CAAhB,CAJuE,CAKvE;;EACA,gBAA0B,IAAAE,eAAA,EAAwB,EAAxB,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EAEA,sBAA0B,IAAAC,2BAAA,GAA1B;EAAA,IAAQC,aAAR,mBAAQA,aAAR;;EACA,oBACE,IAAAC,yBAAA,GADF;EAAA,IAAQC,YAAR,iBAAQA,YAAR;EAAA,IAAsBC,cAAtB,iBAAsBA,cAAtB;EAAA,IAAsCC,WAAtC,iBAAsCA,WAAtC;EAAA,IAAmDC,YAAnD,iBAAmDA,YAAnD,CATuE,CAYvE;;;EACA,IAAAC,gBAAA,EAAU,YAAM;IACdX,OAAO,CAACY,OAAR,GAAkBL,YAAY,CAAC;MAAET,GAAG,EAAHA,GAAF;MAAOK,QAAQ,EAARA,QAAP;MAAiBR,KAAK,EAALA,KAAjB;MAAwBC,EAAE,EAAFA;IAAxB,CAAD,CAA9B;IACA,OAAO,YAAM;MACX,IAAI,CAACI,OAAO,CAACY,OAAb,EAAsB;MACtBJ,cAAc,CAACR,OAAO,CAACY,OAAT,CAAd;MACAZ,OAAO,CAACY,OAAR,GAAkB,IAAlB;IACD,CAJD;EAKD,CAPD,EAOG,CAACJ,cAAD,EAAiBZ,EAAjB,EAAqBD,KAArB,EAA4BY,YAA5B,CAPH,EAbuE,CAsBvE;;EACA,IAAAM,8BAAA,EAAmBf,GAAnB,EAAwBO,aAAxB,EAvBuE,CAyBvE;;EACA,IAAMS,gBAAgB,GAAG,IAAAC,kBAAA,EACvB,UAACC,CAAD,EAAmB;IACjB,IAAI,CAAChB,OAAO,CAACY,OAAb,EAAsB;IACtBH,WAAW,CAACO,CAAD,EAAIhB,OAAO,CAACY,OAAZ,CAAX;EACD,CAJsB,EAKvB,CAACH,WAAD,CALuB,CAAzB;EAOA,IAAMQ,iBAAiB,GAAG,IAAAF,kBAAA,EACxB,UAACC,CAAD,EAAmB;IACjB,IAAI,CAAChB,OAAO,CAACY,OAAb,EAAsB;IACtBF,YAAY,CAACM,CAAD,EAAIhB,OAAO,CAACY,OAAZ,CAAZ;EACD,CAJuB,EAKxB,CAACF,YAAD,CALwB,CAA1B;EAQA,IAAMQ,QAAQ,GAAG,IAAAC,yBAAA,EAAc;IAC7BV,WAAW,EAAEK,gBADgB;IAE7BJ,YAAY,EAAEO;EAFe,CAAd,CAAjB;EAKA,oBAAO,kEAAGpB,QAAQ,CAAC;IAAEC,GAAG,EAAHA,GAAF;IAAOI,KAAK,EAALA,KAAP;IAAcgB,QAAQ,EAARA;EAAd,CAAD,CAAX,CAAP;AACD,CA/CD;;eAiDexB,S"}

package/dist/cjs/Droppable.js

@@ -36,7 +36,7 @@ var Droppable = function Droppable(_ref) {
 
   var innerRef = (0, _react.useRef)(null); // The unique ID of the list. If no ID was specified, the generated one is used.
 
-  var generatedId = (0, _useGeneratedId["default"])(10);
+  var generatedId = (0, _useGeneratedId["default"])();
   var droppableId = (0, _react.useMemo)(function () {
     return id || generatedId;
   }, [generatedId, id]); // The reference to the list of nodes

package/dist/cjs/Droppable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Droppable.tsx"],"names":["Droppable","renderDraggedNode","id","horizontal","children","ref","innerRef","generatedId","droppableId","listRef","NodeList","current","registerList","deregisterList","onMouseDown","onTouchStart","listId","registerNode","props","add","deregisterNode","node","remove","mouseDownHandler","e","touchStartHandler","droppableContext"],"mappings":"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","sourcesContent":["import React, {\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\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(10);\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"],"file":"Droppable.js"}
+{"version":3,"file":"Droppable.js","names":["Droppable","renderDraggedNode","id","horizontal","children","ref","useRef","innerRef","generatedId","useGeneratedId","droppableId","useMemo","listRef","NodeList","useEffect","current","useDragAndDrop","registerList","deregisterList","onMouseDown","onTouchStart","listId","registerNode","useCallback","props","add","deregisterNode","node","remove","mouseDownHandler","e","touchStartHandler","droppableContext","useMemoObject"],"sources":["../../src/Droppable.tsx"],"sourcesContent":["import React, {\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\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;;AASA;;AACA;;AAKA;;AACA;;AACA;;;;;;;;AAqCA,IAAMA,SAAmC,GAAG,SAAtCA,SAAsC,OAKtC;EAAA,IAJJC,iBAII,QAJJA,iBAII;EAAA,IAHJC,EAGI,QAHJA,EAGI;EAAA,2BAFJC,UAEI;EAAA,IAFJA,UAEI,gCAFS,KAET;EAAA,IADJC,QACI,QADJA,QACI;EACJ;EACA,IAAMC,GAAG,GAAG,IAAAC,aAAA,EAAuB,IAAvB,CAAZ,CAFI,CAGJ;;EACA,IAAMC,QAAQ,GAAG,IAAAD,aAAA,EAAuB,IAAvB,CAAjB,CAJI,CAKJ;;EACA,IAAME,WAAW,GAAG,IAAAC,0BAAA,GAApB;EACA,IAAMC,WAAW,GAAG,IAAAC,cAAA,EAAQ;IAAA,OAAMT,EAAE,IAAIM,WAAZ;EAAA,CAAR,EAAiC,CAACA,WAAD,EAAcN,EAAd,CAAjC,CAApB,CAPI,CAQJ;;EACA,IAAMU,OAAO,GAAG,IAAAN,aAAA,EACd,IAAIO,oBAAJ,CAAa;IACXX,EAAE,EAAEQ,WADO;IAEXL,GAAG,EAAHA,GAFW;IAGXE,QAAQ,EAARA,QAHW;IAIXJ,UAAU,EAAVA,UAJW;IAKXF,iBAAiB,EAAjBA;EALW,CAAb,CADc,CAAhB,CATI,CAmBJ;;EACA,IAAAa,gBAAA,EAAU,YAAM;IACdF,OAAO,CAACG,OAAR,CAAgBb,EAAhB,GAAqBQ,WAArB;EACD,CAFD,EAEG,CAACA,WAAD,CAFH,EApBI,CAwBJ;EACA;;EACA,IAAAI,gBAAA,EAAU,YAAM;IACdF,OAAO,CAACG,OAAR,CAAgBZ,UAAhB,GAA6BA,UAA7B;EACD,CAFD,EAEG,CAACA,UAAD,CAFH,EA1BI,CA8BJ;;EACA,IAAAW,gBAAA,EAAU,YAAM;IACdF,OAAO,CAACG,OAAR,CAAgBd,iBAAhB,GAAoCA,iBAApC;EACD,CAFD,EAEG,CAACA,iBAAD,CAFH;;EAIA,sBACE,IAAAe,2BAAA,GADF;EAAA,IAAQC,YAAR,mBAAQA,YAAR;EAAA,IAAsBC,cAAtB,mBAAsBA,cAAtB;EAAA,IAAsCC,WAAtC,mBAAsCA,WAAtC;EAAA,IAAmDC,YAAnD,mBAAmDA,YAAnD,CAnCI,CAsCJ;;;EACA,IAAAN,gBAAA,EAAU,YAAM;IACdG,YAAY,CAACL,OAAO,CAACG,OAAT,CAAZ;IACA,IAAMM,MAAM,GAAGT,OAAO,CAACG,OAAR,CAAgBb,EAA/B;IACA,OAAO;MAAA,OAAMgB,cAAc,CAACG,MAAD,CAApB;IAAA,CAAP;EACD,CAJD,EAIG,CAACH,cAAD,EAAiBD,YAAjB,CAJH;EAMA,IAAMK,YAAY,GAAG,IAAAC,kBAAA,EACnB,UAACC,KAAD;IAAA,OAAsBZ,OAAO,CAACG,OAAR,CAAgBU,GAAhB,CAAoBD,KAApB,CAAtB;EAAA,CADmB,EAEnB,EAFmB,CAArB;EAIA,IAAME,cAAc,GAAG,IAAAH,kBAAA,EAAY,UAACI,IAAD,EAAwB;IACzDf,OAAO,CAACG,OAAR,CAAgBa,MAAhB,CAAuBD,IAAvB;EACD,CAFsB,EAEpB,EAFoB,CAAvB,CAjDI,CAqDJ;;EACA,IAAME,gBAAgB,GAAG,IAAAN,kBAAA,EACvB,UAACO,CAAD,EAAgBH,IAAhB,EAAuC;IACrCR,WAAW,CAACW,CAAD,EAAIlB,OAAO,CAACG,OAAZ,EAAqBY,IAArB,CAAX;EACD,CAHsB,EAIvB,CAACR,WAAD,CAJuB,CAAzB;EAMA,IAAMY,iBAAiB,GAAG,IAAAR,kBAAA,EACxB,UAACO,CAAD,EAAgBH,IAAhB,EAAuC;IACrCP,YAAY,CAACU,CAAD,EAAIlB,OAAO,CAACG,OAAZ,EAAqBY,IAArB,CAAZ;EACD,CAHuB,EAIxB,CAACP,YAAD,CAJwB,CAA1B;EAOA,IAAMY,gBAAgB,GAAG,IAAAC,yBAAA,EAAc;IACrCX,YAAY,EAAZA,YADqC;IAErCI,cAAc,EAAdA,cAFqC;IAGrCP,WAAW,EAAEU,gBAHwB;IAIrCT,YAAY,EAAEW;EAJuB,CAAd,CAAzB;EAOA,oBACE,gCAAC,8BAAD,CAAkB,QAAlB;IAA2B,KAAK,EAAEC;EAAlC,GACI5B,QAAD,CAAuB;IAAEC,GAAG,EAAHA,GAAF;IAAOE,QAAQ,EAARA;EAAP,CAAvB,CADH,CADF;AAKD,CApFD;;eAsFeP,S"}

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAHA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAHA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as DragAndDrop } from './DragAndDrop';\nexport { default as Droppable } from './Droppable';\nexport { default as Draggable } from './Draggable';\n\nexport * from './DragAndDrop';\nexport * from './Droppable';\nexport * from './Draggable';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export { default as DragAndDrop } from './DragAndDrop';\nexport { default as Droppable } from './Droppable';\nexport { default as Draggable } from './Draggable';\n\nexport * from './DragAndDrop';\nexport * from './Droppable';\nexport * from './Draggable';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAIA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAHA;;AAIA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAHA;;AAIA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/cjs/utils/ListStore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/ListStore.ts"],"names":["ListStore","lists","list","push","id","index","findIndex","item","splice","x","y","find","current","ref","rect","getBoundingClientRect","width","height"],"mappings":";;;;;;;;;;;;;AAEA;AACA;AACA;IACMA,S;AAGJ,uBAAqB;AAAA;;AAAA,SAFbC,KAEa;AACnB,SAAKA,KAAL,GAAa,EAAb;AACD;AAED;AACF;AACA;;;;;WACE,aAAWC,IAAX,EAA2B;AACzB,WAAKD,KAAL,CAAWE,IAAX,CAAgBD,IAAhB;AACD;AAED;AACF;AACA;;;;WACE,gBAAcE,EAAd,EAA0B;AACxB,UAAMC,KAAK,GAAG,KAAKJ,KAAL,CAAWK,SAAX,CAAqB,UAACC,IAAD;AAAA,eAAUA,IAAI,CAACH,EAAL,KAAYA,EAAtB;AAAA,OAArB,CAAd;AACA,UAAIC,KAAK,KAAK,CAAC,CAAf,EAAkB;AAClB,WAAKJ,KAAL,CAAWO,MAAX,CAAkBH,KAAlB,EAAyB,CAAzB;AACD;AAED;AACF;AACA;;;;WACE,wBAAsBI,CAAtB,EAAiCC,CAAjC,EAA4C;AAC1C,aAAO,KAAKT,KAAL,CAAWU,IAAX,CAAgB,UAACT,IAAD,EAAU;AAC/B,YAAQU,OAAR,GAAoBV,IAAI,CAACW,GAAzB,CAAQD,OAAR;AACA,YAAI,CAACA,OAAL,EAAc,OAAO,KAAP;AACd,YAAME,IAAI,GAAGF,OAAO,CAACG,qBAAR,EAAb;AACA,eACEN,CAAC,IAAIK,IAAI,CAACL,CAAV,IACAA,CAAC,IAAIK,IAAI,CAACL,CAAL,GAASK,IAAI,CAACE,KADnB,IAEAN,CAAC,IAAII,IAAI,CAACJ,CAFV,IAGAA,CAAC,IAAII,IAAI,CAACJ,CAAL,GAASI,IAAI,CAACG,MAJrB;AAMD,OAVM,CAAP;AAWD;;;;;;eAGYjB,S","sourcesContent":["import NodeList from './NodeList';\n\n/**\n * Stores all the lists where the draggable items is located.\n */\nclass ListStore {\n  private lists: NodeList[];\n\n  public constructor() {\n    this.lists = [];\n  }\n\n  /**\n   * Adds a new list to the store.\n   */\n  public add(list: NodeList) {\n    this.lists.push(list);\n  }\n\n  /**\n   * Removes the list from the store.\n   */\n  public remove(id: string) {\n    const index = this.lists.findIndex((item) => item.id === id);\n    if (index === -1) return;\n    this.lists.splice(index, 1);\n  }\n\n  /**\n   * Returns the list in which the position is located.\n   */\n  public findByPosition(x: number, y: number) {\n    return this.lists.find((list) => {\n      const { current } = list.ref;\n      if (!current) return false;\n      const rect = current.getBoundingClientRect();\n      return (\n        x >= rect.x &&\n        x <= rect.x + rect.width &&\n        y >= rect.y &&\n        y <= rect.y + rect.height\n      );\n    });\n  }\n}\n\nexport default ListStore;\n"],"file":"ListStore.js"}
+{"version":3,"file":"ListStore.js","names":["ListStore","lists","list","push","id","index","findIndex","item","splice","x","y","find","current","ref","rect","getBoundingClientRect","width","height"],"sources":["../../../src/utils/ListStore.ts"],"sourcesContent":["import NodeList from './NodeList';\n\n/**\n * Stores all the lists where the draggable items is located.\n */\nclass ListStore {\n  private lists: NodeList[];\n\n  public constructor() {\n    this.lists = [];\n  }\n\n  /**\n   * Adds a new list to the store.\n   */\n  public add(list: NodeList) {\n    this.lists.push(list);\n  }\n\n  /**\n   * Removes the list from the store.\n   */\n  public remove(id: string) {\n    const index = this.lists.findIndex((item) => item.id === id);\n    if (index === -1) return;\n    this.lists.splice(index, 1);\n  }\n\n  /**\n   * Returns the list in which the position is located.\n   */\n  public findByPosition(x: number, y: number) {\n    return this.lists.find((list) => {\n      const { current } = list.ref;\n      if (!current) return false;\n      const rect = current.getBoundingClientRect();\n      return (\n        x >= rect.x &&\n        x <= rect.x + rect.width &&\n        y >= rect.y &&\n        y <= rect.y + rect.height\n      );\n    });\n  }\n}\n\nexport default ListStore;\n"],"mappings":";;;;;;;;;;;;;AAEA;AACA;AACA;IACMA,S;EAGJ,qBAAqB;IAAA;;IAAA,KAFbC,KAEa;IACnB,KAAKA,KAAL,GAAa,EAAb;EACD;EAED;AACF;AACA;;;;;WACE,aAAWC,IAAX,EAA2B;MACzB,KAAKD,KAAL,CAAWE,IAAX,CAAgBD,IAAhB;IACD;IAED;AACF;AACA;;;;WACE,gBAAcE,EAAd,EAA0B;MACxB,IAAMC,KAAK,GAAG,KAAKJ,KAAL,CAAWK,SAAX,CAAqB,UAACC,IAAD;QAAA,OAAUA,IAAI,CAACH,EAAL,KAAYA,EAAtB;MAAA,CAArB,CAAd;MACA,IAAIC,KAAK,KAAK,CAAC,CAAf,EAAkB;MAClB,KAAKJ,KAAL,CAAWO,MAAX,CAAkBH,KAAlB,EAAyB,CAAzB;IACD;IAED;AACF;AACA;;;;WACE,wBAAsBI,CAAtB,EAAiCC,CAAjC,EAA4C;MAC1C,OAAO,KAAKT,KAAL,CAAWU,IAAX,CAAgB,UAACT,IAAD,EAAU;QAC/B,IAAQU,OAAR,GAAoBV,IAAI,CAACW,GAAzB,CAAQD,OAAR;QACA,IAAI,CAACA,OAAL,EAAc,OAAO,KAAP;QACd,IAAME,IAAI,GAAGF,OAAO,CAACG,qBAAR,EAAb;QACA,OACEN,CAAC,IAAIK,IAAI,CAACL,CAAV,IACAA,CAAC,IAAIK,IAAI,CAACL,CAAL,GAASK,IAAI,CAACE,KADnB,IAEAN,CAAC,IAAII,IAAI,CAACJ,CAFV,IAGAA,CAAC,IAAII,IAAI,CAACJ,CAAL,GAASI,IAAI,CAACG,MAJrB;MAMD,CAVM,CAAP;IAWD;;;;;;eAGYjB,S"}

package/dist/cjs/utils/NodeList.js

@@ -24,7 +24,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 /* eslint-disable @typescript-eslint/no-explicit-any,no-param-reassign,prefer-destructuring,no-constant-condition */
-// [prev, next, ref, setStyle, index]
+// [prev, next, ref, setStyle, index, id]
 
 /**
  * Stores all the draggable items in the list.
@@ -102,7 +102,7 @@ var NodeList = /*#__PURE__*/function () {
   }, {
     key: "addToTheBeginning",
     value: function addToTheBeginning(props) {
-      this.head = [null, this.head, props.ref, props.setStyle, props.index];
+      this.head = [null, this.head, props.ref, props.setStyle, props.index, props.id];
 
       var _this$head = _slicedToArray(this.head, 2),
           next = _this$head[1];
@@ -120,7 +120,7 @@ var NodeList = /*#__PURE__*/function () {
   }, {
     key: "addToTheEnd",
     value: function addToTheEnd(props) {
-      this.tail = [this.tail, null, props.ref, props.setStyle, props.index];
+      this.tail = [this.tail, null, props.ref, props.setStyle, props.index, props.id];
 
       var _this$tail = _slicedToArray(this.tail, 1),
           prev = _this$tail[0];
@@ -252,7 +252,7 @@ var NodeList = /*#__PURE__*/function () {
   }], [{
     key: "addAfter",
     value: function addAfter(node, props) {
-      node[1] = [node, node[1], props.ref, props.setStyle, props.index];
+      node[1] = [node, node[1], props.ref, props.setStyle, props.index, props.id];
       if (node[1][1]) node[1][1][0] = node[1];
       return node[1];
     }

package/dist/cjs/utils/NodeList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/NodeList.ts"],"names":["NodeList","props","id","ref","innerRef","horizontal","renderDraggedNode","head","tail","listeners","setStyle","index","next","prev","forEach","listener","addToTheBeginning","headIndex","tailIndex","addAfter","addToTheEnd","node","nextIndex","callback","push","findIndex","splice"],"mappings":"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","sourcesContent":["import React, { CSSProperties, RefObject } from 'react';\n\n/* eslint-disable @typescript-eslint/no-explicit-any,no-param-reassign,prefer-destructuring,no-constant-condition */\n\n// [prev, next, ref, setStyle, index]\nexport type Node =\n  | [Node, Node, RefObject<any>, (style: CSSProperties) => void, number]\n  | null;\n\nexport type ExistingNode = Exclude<Node, null>;\n\nexport interface NodeProps {\n  ref: React.MutableRefObject<any>;\n  setStyle: (style: CSSProperties) => void;\n  index: number;\n}\n\ninterface RenderDraggedNodeProps {\n  /**\n   * The index of the dragged node.\n   */\n  index: number;\n  /**\n   * The style of the dragged node with position.\n   */\n  style: CSSProperties;\n}\n\nexport type RenderDraggedNode = (\n  props: RenderDraggedNodeProps\n) => React.ReactNode;\n\ninterface InitProps {\n  id: string;\n  ref: RefObject<HTMLDivElement>;\n  innerRef: RefObject<HTMLDivElement>;\n  horizontal: boolean;\n  renderDraggedNode: RenderDraggedNode;\n}\n\n/**\n * Stores all the draggable items in the list.\n * The structure of the doubly linked list is used.\n */\nclass NodeList {\n  /**\n   * The ID of the list.\n   */\n  public id: string;\n\n  /**\n   * The ref to the list.\n   */\n  public ref: RefObject<HTMLDivElement>;\n\n  /**\n   * The inner ref to the list.\n   * Used by the virtual list.\n   */\n  public innerRef: RefObject<HTMLDivElement>;\n\n  /**\n   * Whether the list is horizontal.\n   */\n  public horizontal: boolean;\n\n  /**\n   * The callback that renders the dragged node.\n   */\n  public renderDraggedNode: RenderDraggedNode;\n\n  /**\n   * The head of draggable nodes.\n   */\n  private head: Node;\n\n  /**\n   * The tail of draggable nodes.\n   */\n  private tail: Node;\n\n  /**\n   * Listeners of node addition events.\n   */\n  private listeners: Array<(props: NodeProps) => void>;\n\n  public constructor(props: InitProps) {\n    this.id = props.id;\n    this.ref = props.ref;\n    this.innerRef = props.innerRef;\n    this.horizontal = props.horizontal;\n    this.renderDraggedNode = props.renderDraggedNode;\n    this.head = null;\n    this.tail = null;\n    this.listeners = [];\n  }\n\n  public getHead() {\n    return this.head;\n  }\n\n  public getTail() {\n    return this.tail;\n  }\n\n  /**\n   * Adds the node to the beginning.\n   * TL: O(1).\n   */\n  private addToTheBeginning(props: NodeProps): ExistingNode {\n    this.head = [null, this.head, props.ref, props.setStyle, props.index];\n    const [, next] = this.head;\n    if (next) next[0] = this.head; // Set the prev cursor of the next element\n    if (!this.tail) this.tail = this.head;\n    return this.head;\n  }\n\n  /**\n   * Adds the node to the end.\n   * TL: O(1).\n   */\n  private addToTheEnd(props: NodeProps): ExistingNode {\n    this.tail = [this.tail, null, props.ref, props.setStyle, props.index];\n    const [prev] = this.tail;\n    if (prev) prev[1] = this.tail; // Set the next cursor of the prev element\n    if (!this.head) this.head = this.tail;\n    return this.tail;\n  }\n\n  /**\n   * Adds the node after the specified one.\n   * TL: O(1).\n   */\n  private static addAfter(node: ExistingNode, props: NodeProps): ExistingNode {\n    node[1] = [node, node[1], props.ref, props.setStyle, props.index];\n    if (node[1][1]) node[1][1][0] = node[1];\n    return node[1];\n  }\n\n  /**\n   * Adds a new node depends on its position.\n   * Called when a new node is mounted.\n   * TL: O(1) – add to the beginning or to the end, O(n) – add to the middle.\n   */\n  public add(props: NodeProps): ExistingNode {\n    const { index } = props;\n\n    // Run listeners\n    this.listeners.forEach((listener) => listener(props));\n\n    // Add the first node to the beginning\n    if (!this.head || !this.tail) {\n      return this.addToTheBeginning(props);\n    }\n\n    // Add the node to the beginning if it is located above the first one\n    const [, , , , headIndex] = this.head;\n    if (index < headIndex) {\n      return this.addToTheBeginning(props);\n    }\n\n    // Add the node to the end if it is located below the last one\n    const [, , , , tailIndex] = this.tail;\n    if (index === tailIndex) {\n      // The tail is the blank node\n      const [prev] = this.tail;\n      if (prev) {\n        this.tail[4] += 1;\n        return NodeList.addAfter(prev, props);\n      }\n    }\n    if (index > tailIndex) {\n      return this.addToTheEnd(props);\n    }\n\n    // Add the node after the one that is located above the current one\n    let node = this.head;\n    while (true) {\n      const [, next] = node;\n      if (!next) break;\n      const [, , , , nextIndex] = next;\n      if (index < nextIndex) break;\n      node = next;\n    }\n    return NodeList.addAfter(node, props);\n  }\n\n  /**\n   * Removes the existing node.\n   * Called when the node is unmounted.\n   * TL: O(1).\n   */\n  public remove(node: ExistingNode) {\n    const [prev, next] = node;\n    if (!prev && !next) {\n      this.head = null;\n      this.tail = null;\n      return;\n    }\n    if (!prev && next) {\n      next[0] = null;\n      this.head = next;\n      return;\n    }\n    if (prev && !next) {\n      prev[1] = null;\n      this.tail = prev;\n      return;\n    }\n    if (prev && next) {\n      prev[1] = next;\n      next[0] = prev;\n    }\n  }\n\n  public addListener(callback: (props: NodeProps) => void) {\n    this.listeners.push(callback);\n  }\n\n  public removeListener(callback: (props: NodeProps) => void) {\n    const index = this.listeners.findIndex((listener) => listener === callback);\n    this.listeners.splice(index, 1);\n  }\n}\n\nexport default NodeList;\n"],"file":"NodeList.js"}
+{"version":3,"file":"NodeList.js","names":["NodeList","props","id","ref","innerRef","horizontal","renderDraggedNode","head","tail","listeners","setStyle","index","next","prev","forEach","listener","addToTheBeginning","headIndex","tailIndex","addAfter","addToTheEnd","node","nextIndex","callback","push","findIndex","splice"],"sources":["../../../src/utils/NodeList.ts"],"sourcesContent":["import React, { CSSProperties, RefObject } from 'react';\n\n/* eslint-disable @typescript-eslint/no-explicit-any,no-param-reassign,prefer-destructuring,no-constant-condition */\n\n// [prev, next, ref, setStyle, index, id]\nexport type Node =\n  | [Node, Node, RefObject<any>, (style: CSSProperties) => void, number, string]\n  | null;\n\nexport type ExistingNode = Exclude<Node, null>;\n\nexport interface NodeProps {\n  ref: React.MutableRefObject<any>;\n  setStyle: (style: CSSProperties) => void;\n  index: number;\n  id: string;\n}\n\ninterface RenderDraggedNodeProps {\n  /**\n   * The index of the dragged node.\n   */\n  index: number;\n  /**\n   * The ID of the dragged node.\n   */\n  id: string;\n  /**\n   * The style of the dragged node with position.\n   */\n  style: CSSProperties;\n}\n\nexport type RenderDraggedNode = (\n  props: RenderDraggedNodeProps\n) => React.ReactNode;\n\ninterface InitProps {\n  id: string;\n  ref: RefObject<HTMLDivElement>;\n  innerRef: RefObject<HTMLDivElement>;\n  horizontal: boolean;\n  renderDraggedNode: RenderDraggedNode;\n}\n\n/**\n * Stores all the draggable items in the list.\n * The structure of the doubly linked list is used.\n */\nclass NodeList {\n  /**\n   * The ID of the list.\n   */\n  public id: string;\n\n  /**\n   * The ref to the list.\n   */\n  public ref: RefObject<HTMLDivElement>;\n\n  /**\n   * The inner ref to the list.\n   * Used by the virtual list.\n   */\n  public innerRef: RefObject<HTMLDivElement>;\n\n  /**\n   * Whether the list is horizontal.\n   */\n  public horizontal: boolean;\n\n  /**\n   * The callback that renders the dragged node.\n   */\n  public renderDraggedNode: RenderDraggedNode;\n\n  /**\n   * The head of draggable nodes.\n   */\n  private head: Node;\n\n  /**\n   * The tail of draggable nodes.\n   */\n  private tail: Node;\n\n  /**\n   * Listeners of node addition events.\n   */\n  private listeners: Array<(props: NodeProps) => void>;\n\n  public constructor(props: InitProps) {\n    this.id = props.id;\n    this.ref = props.ref;\n    this.innerRef = props.innerRef;\n    this.horizontal = props.horizontal;\n    this.renderDraggedNode = props.renderDraggedNode;\n    this.head = null;\n    this.tail = null;\n    this.listeners = [];\n  }\n\n  public getHead() {\n    return this.head;\n  }\n\n  public getTail() {\n    return this.tail;\n  }\n\n  /**\n   * Adds the node to the beginning.\n   * TL: O(1).\n   */\n  private addToTheBeginning(props: NodeProps): ExistingNode {\n    this.head = [\n      null,\n      this.head,\n      props.ref,\n      props.setStyle,\n      props.index,\n      props.id,\n    ];\n    const [, next] = this.head;\n    if (next) next[0] = this.head; // Set the prev cursor of the next element\n    if (!this.tail) this.tail = this.head;\n    return this.head;\n  }\n\n  /**\n   * Adds the node to the end.\n   * TL: O(1).\n   */\n  private addToTheEnd(props: NodeProps): ExistingNode {\n    this.tail = [\n      this.tail,\n      null,\n      props.ref,\n      props.setStyle,\n      props.index,\n      props.id,\n    ];\n    const [prev] = this.tail;\n    if (prev) prev[1] = this.tail; // Set the next cursor of the prev element\n    if (!this.head) this.head = this.tail;\n    return this.tail;\n  }\n\n  /**\n   * Adds the node after the specified one.\n   * TL: O(1).\n   */\n  private static addAfter(node: ExistingNode, props: NodeProps): ExistingNode {\n    node[1] = [node, node[1], props.ref, props.setStyle, props.index, props.id];\n    if (node[1][1]) node[1][1][0] = node[1];\n    return node[1];\n  }\n\n  /**\n   * Adds a new node depends on its position.\n   * Called when a new node is mounted.\n   * TL: O(1) – add to the beginning or to the end, O(n) – add to the middle.\n   */\n  public add(props: NodeProps): ExistingNode {\n    const { index } = props;\n\n    // Run listeners\n    this.listeners.forEach((listener) => listener(props));\n\n    // Add the first node to the beginning\n    if (!this.head || !this.tail) {\n      return this.addToTheBeginning(props);\n    }\n\n    // Add the node to the beginning if it is located above the first one\n    const [, , , , headIndex] = this.head;\n    if (index < headIndex) {\n      return this.addToTheBeginning(props);\n    }\n\n    // Add the node to the end if it is located below the last one\n    const [, , , , tailIndex] = this.tail;\n    if (index === tailIndex) {\n      // The tail is the blank node\n      const [prev] = this.tail;\n      if (prev) {\n        this.tail[4] += 1;\n        return NodeList.addAfter(prev, props);\n      }\n    }\n    if (index > tailIndex) {\n      return this.addToTheEnd(props);\n    }\n\n    // Add the node after the one that is located above the current one\n    let node = this.head;\n    while (true) {\n      const [, next] = node;\n      if (!next) break;\n      const [, , , , nextIndex] = next;\n      if (index < nextIndex) break;\n      node = next;\n    }\n    return NodeList.addAfter(node, props);\n  }\n\n  /**\n   * Removes the existing node.\n   * Called when the node is unmounted.\n   * TL: O(1).\n   */\n  public remove(node: ExistingNode) {\n    const [prev, next] = node;\n    if (!prev && !next) {\n      this.head = null;\n      this.tail = null;\n      return;\n    }\n    if (!prev && next) {\n      next[0] = null;\n      this.head = next;\n      return;\n    }\n    if (prev && !next) {\n      prev[1] = null;\n      this.tail = prev;\n      return;\n    }\n    if (prev && next) {\n      prev[1] = next;\n      next[0] = prev;\n    }\n  }\n\n  public addListener(callback: (props: NodeProps) => void) {\n    this.listeners.push(callback);\n  }\n\n  public removeListener(callback: (props: NodeProps) => void) {\n    const index = this.listeners.findIndex((listener) => listener === callback);\n    this.listeners.splice(index, 1);\n  }\n}\n\nexport default NodeList;\n"],"mappings":"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"}

package/dist/cjs/utils/getElementOffset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/getElementOffset.ts"],"names":["getElementOffset","element","offsetLeft","offsetTop","el","offsetParent"],"mappings":";;;;;;;AAAA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAA0B;AACjD,MAAIC,UAAU,GAAG,CAAjB;AACA,MAAIC,SAAS,GAAG,CAAhB;AACA,MAAIC,EAAsB,GAAGH,OAA7B;;AACA,SAAOG,EAAP,EAAW;AACTF,IAAAA,UAAU,IAAIE,EAAE,CAACF,UAAjB;AACAC,IAAAA,SAAS,IAAIC,EAAE,CAACD,SAAhB;AACAC,IAAAA,EAAE,GAAGA,EAAE,CAACC,YAAR;AACD;;AACD,SAAO;AAAEH,IAAAA,UAAU,EAAVA,UAAF;AAAcC,IAAAA,SAAS,EAATA;AAAd,GAAP;AACD,CAVD;;eAYeH,gB","sourcesContent":["const getElementOffset = (element: HTMLElement) => {\n  let offsetLeft = 0;\n  let offsetTop = 0;\n  let el: HTMLElement | null = element;\n  while (el) {\n    offsetLeft += el.offsetLeft;\n    offsetTop += el.offsetTop;\n    el = el.offsetParent as HTMLElement;\n  }\n  return { offsetLeft, offsetTop };\n};\n\nexport default getElementOffset;\n"],"file":"getElementOffset.js"}
+{"version":3,"file":"getElementOffset.js","names":["getElementOffset","element","offsetLeft","offsetTop","el","offsetParent"],"sources":["../../../src/utils/getElementOffset.ts"],"sourcesContent":["const getElementOffset = (element: HTMLElement) => {\n  let offsetLeft = 0;\n  let offsetTop = 0;\n  let el: HTMLElement | null = element;\n  while (el) {\n    offsetLeft += el.offsetLeft;\n    offsetTop += el.offsetTop;\n    el = el.offsetParent as HTMLElement;\n  }\n  return { offsetLeft, offsetTop };\n};\n\nexport default getElementOffset;\n"],"mappings":";;;;;;;AAAA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAA0B;EACjD,IAAIC,UAAU,GAAG,CAAjB;EACA,IAAIC,SAAS,GAAG,CAAhB;EACA,IAAIC,EAAsB,GAAGH,OAA7B;;EACA,OAAOG,EAAP,EAAW;IACTF,UAAU,IAAIE,EAAE,CAACF,UAAjB;IACAC,SAAS,IAAIC,EAAE,CAACD,SAAhB;IACAC,EAAE,GAAGA,EAAE,CAACC,YAAR;EACD;;EACD,OAAO;IAAEH,UAAU,EAAVA,UAAF;IAAcC,SAAS,EAATA;EAAd,CAAP;AACD,CAVD;;eAYeH,gB"}

package/dist/cjs/utils/getElementScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/getElementScroll.ts"],"names":["getElementScroll","element","scrollLeft","scrollTop","el","parentElement"],"mappings":";;;;;;;AAAA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAA0B;AACjD,MAAIC,UAAU,GAAG,CAAjB;AACA,MAAIC,SAAS,GAAG,CAAhB;AACA,MAAIC,EAAsB,GAAGH,OAA7B;;AACA,SAAOG,EAAP,EAAW;AACTF,IAAAA,UAAU,IAAIE,EAAE,CAACF,UAAjB;AACAC,IAAAA,SAAS,IAAIC,EAAE,CAACD,SAAhB;AACAC,IAAAA,EAAE,GAAGA,EAAE,CAACC,aAAR;AACD;;AACD,SAAO;AAAEH,IAAAA,UAAU,EAAVA,UAAF;AAAcC,IAAAA,SAAS,EAATA;AAAd,GAAP;AACD,CAVD;;eAYeH,gB","sourcesContent":["const getElementScroll = (element: HTMLElement) => {\n  let scrollLeft = 0;\n  let scrollTop = 0;\n  let el: HTMLElement | null = element;\n  while (el) {\n    scrollLeft += el.scrollLeft;\n    scrollTop += el.scrollTop;\n    el = el.parentElement;\n  }\n  return { scrollLeft, scrollTop };\n};\n\nexport default getElementScroll;\n"],"file":"getElementScroll.js"}
+{"version":3,"file":"getElementScroll.js","names":["getElementScroll","element","scrollLeft","scrollTop","el","parentElement"],"sources":["../../../src/utils/getElementScroll.ts"],"sourcesContent":["const getElementScroll = (element: HTMLElement) => {\n  let scrollLeft = 0;\n  let scrollTop = 0;\n  let el: HTMLElement | null = element;\n  while (el) {\n    scrollLeft += el.scrollLeft;\n    scrollTop += el.scrollTop;\n    el = el.parentElement;\n  }\n  return { scrollLeft, scrollTop };\n};\n\nexport default getElementScroll;\n"],"mappings":";;;;;;;AAAA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAA0B;EACjD,IAAIC,UAAU,GAAG,CAAjB;EACA,IAAIC,SAAS,GAAG,CAAhB;EACA,IAAIC,EAAsB,GAAGH,OAA7B;;EACA,OAAOG,EAAP,EAAW;IACTF,UAAU,IAAIE,EAAE,CAACF,UAAjB;IACAC,SAAS,IAAIC,EAAE,CAACD,SAAhB;IACAC,EAAE,GAAGA,EAAE,CAACC,aAAR;EACD;;EACD,OAAO;IAAEH,UAAU,EAAVA,UAAF;IAAcC,SAAS,EAATA;EAAd,CAAP;AACD,CAVD;;eAYeH,gB"}

package/dist/cjs/utils/getNodeRect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/getNodeRect.ts"],"names":["getNodeRect","ref","current","parent","parentElement","getBoundingClientRect","width","height","offsetLeft","offsetTop","scrollLeft","scrollTop","left","top","right","bottom"],"mappings":";;;;;;;AACA;;AACA;;;;AAEA;AACA;AACA;AACA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,GAAD,EAAiC;AACnD,MAAI,CAACA,GAAG,CAACC,OAAT,EAAkB,OAAO,IAAP;AAElB,MAAMC,MAAM,GAAGF,GAAG,CAACC,OAAJ,CAAYE,aAA3B;;AACA,8BAA0BH,GAAG,CAACC,OAAJ,CAAYG,qBAAZ,EAA1B;AAAA,MAAQC,KAAR,yBAAQA,KAAR;AAAA,MAAeC,MAAf,yBAAeA,MAAf;;AACA,0BAAkC,mCAAiBN,GAAG,CAACC,OAArB,CAAlC;AAAA,MAAQM,UAAR,qBAAQA,UAAR;AAAA,MAAoBC,SAApB,qBAAoBA,SAApB;;AACA,aAAkCN,MAAM,GACpC,kCAAiBA,MAAjB,CADoC,GAEpC;AAAEO,IAAAA,UAAU,EAAE,CAAd;AAAiBC,IAAAA,SAAS,EAAE;AAA5B,GAFJ;AAAA,MAAQD,UAAR,QAAQA,UAAR;AAAA,MAAoBC,SAApB,QAAoBA,SAApB;;AAIA,MAAMC,IAAI,GAAGJ,UAAU,GAAGE,UAA1B;AACA,MAAMG,GAAG,GAAGJ,SAAS,GAAGE,SAAxB;AAEA,SAAO;AACLC,IAAAA,IAAI,EAAJA,IADK;AAELC,IAAAA,GAAG,EAAHA,GAFK;AAGLC,IAAAA,KAAK,EAAEF,IAAI,GAAGN,KAHT;AAILS,IAAAA,MAAM,EAAEF,GAAG,GAAGN;AAJT,GAAP;AAMD,CAnBD;;eAqBeP,W","sourcesContent":["import { RefObject } from 'react';\nimport getElementScroll from './getElementScroll';\nimport getElementOffset from './getElementOffset';\n\n/**\n * Computes the bounds of the existing node without considering transforms.\n */\nconst getNodeRect = (ref: RefObject<HTMLElement>) => {\n  if (!ref.current) return null;\n\n  const parent = ref.current.parentElement;\n  const { width, height } = ref.current.getBoundingClientRect();\n  const { offsetLeft, offsetTop } = getElementOffset(ref.current);\n  const { scrollLeft, scrollTop } = parent\n    ? getElementScroll(parent)\n    : { scrollLeft: 0, scrollTop: 0 };\n\n  const left = offsetLeft - scrollLeft;\n  const top = offsetTop - scrollTop;\n\n  return {\n    left,\n    top,\n    right: left + width,\n    bottom: top + height,\n  };\n};\n\nexport default getNodeRect;\n"],"file":"getNodeRect.js"}
+{"version":3,"file":"getNodeRect.js","names":["getNodeRect","ref","current","parent","parentElement","getBoundingClientRect","width","height","getElementOffset","offsetLeft","offsetTop","getElementScroll","scrollLeft","scrollTop","left","top","right","bottom"],"sources":["../../../src/utils/getNodeRect.ts"],"sourcesContent":["import { RefObject } from 'react';\nimport getElementScroll from './getElementScroll';\nimport getElementOffset from './getElementOffset';\n\n/**\n * Computes the bounds of the existing node without considering transforms.\n */\nconst getNodeRect = (ref: RefObject<HTMLElement>) => {\n  if (!ref.current) return null;\n\n  const parent = ref.current.parentElement;\n  const { width, height } = ref.current.getBoundingClientRect();\n  const { offsetLeft, offsetTop } = getElementOffset(ref.current);\n  const { scrollLeft, scrollTop } = parent\n    ? getElementScroll(parent)\n    : { scrollLeft: 0, scrollTop: 0 };\n\n  const left = offsetLeft - scrollLeft;\n  const top = offsetTop - scrollTop;\n\n  return {\n    left,\n    top,\n    right: left + width,\n    bottom: top + height,\n  };\n};\n\nexport default getNodeRect;\n"],"mappings":";;;;;;;AACA;;AACA;;;;AAEA;AACA;AACA;AACA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,GAAD,EAAiC;EACnD,IAAI,CAACA,GAAG,CAACC,OAAT,EAAkB,OAAO,IAAP;EAElB,IAAMC,MAAM,GAAGF,GAAG,CAACC,OAAJ,CAAYE,aAA3B;;EACA,4BAA0BH,GAAG,CAACC,OAAJ,CAAYG,qBAAZ,EAA1B;EAAA,IAAQC,KAAR,yBAAQA,KAAR;EAAA,IAAeC,MAAf,yBAAeA,MAAf;;EACA,wBAAkC,IAAAC,6BAAA,EAAiBP,GAAG,CAACC,OAArB,CAAlC;EAAA,IAAQO,UAAR,qBAAQA,UAAR;EAAA,IAAoBC,SAApB,qBAAoBA,SAApB;;EACA,WAAkCP,MAAM,GACpC,IAAAQ,4BAAA,EAAiBR,MAAjB,CADoC,GAEpC;IAAES,UAAU,EAAE,CAAd;IAAiBC,SAAS,EAAE;EAA5B,CAFJ;EAAA,IAAQD,UAAR,QAAQA,UAAR;EAAA,IAAoBC,SAApB,QAAoBA,SAApB;;EAIA,IAAMC,IAAI,GAAGL,UAAU,GAAGG,UAA1B;EACA,IAAMG,GAAG,GAAGL,SAAS,GAAGG,SAAxB;EAEA,OAAO;IACLC,IAAI,EAAJA,IADK;IAELC,GAAG,EAAHA,GAFK;IAGLC,KAAK,EAAEF,IAAI,GAAGR,KAHT;IAILW,MAAM,EAAEF,GAAG,GAAGR;EAJT,CAAP;AAMD,CAnBD;;eAqBeP,W"}

package/dist/cjs/utils/useAppendClassName.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/useAppendClassName.ts"],"names":["useAppendClassName","ref","className","element","current","initClassName","trim"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,GAAD,EAA8BC,SAA9B,EAAoD;AAC7E,wBAAU,YAAM;AACd,QAAMC,OAAO,GAAGF,GAAG,CAACG,OAApB;AACA,QAAI,CAACD,OAAL,EAAc,OAAO,YAAM,CAAE,CAAf;AAEd,QAAME,aAAa,GAAGF,OAAO,CAACD,SAA9B;AACAC,IAAAA,OAAO,CAACD,SAAR,GAAoB,UAAGG,aAAH,cAAoBH,SAApB,EAAgCI,IAAhC,EAApB;AAEA,WAAO,YAAM;AACXH,MAAAA,OAAO,CAACD,SAAR,GAAoBG,aAApB;AACD,KAFD;AAGD,GAVD,EAUG,CAACH,SAAD,EAAYD,GAAZ,CAVH;AAWD,CAZD;;eAceD,kB","sourcesContent":["import { RefObject, useEffect } from 'react';\n\n/**\n * Adds a new class name to the element.\n */\nconst useAppendClassName = (ref: RefObject<HTMLElement>, className: string) => {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return () => {};\n\n    const initClassName = element.className;\n    element.className = `${initClassName} ${className}`.trim();\n\n    return () => {\n      element.className = initClassName;\n    };\n  }, [className, ref]);\n};\n\nexport default useAppendClassName;\n"],"file":"useAppendClassName.js"}
+{"version":3,"file":"useAppendClassName.js","names":["useAppendClassName","ref","className","useEffect","element","current","initClassName","trim"],"sources":["../../../src/utils/useAppendClassName.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\n/**\n * Adds a new class name to the element.\n */\nconst useAppendClassName = (ref: RefObject<HTMLElement>, className: string) => {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return () => {};\n\n    const initClassName = element.className;\n    element.className = `${initClassName} ${className}`.trim();\n\n    return () => {\n      element.className = initClassName;\n    };\n  }, [className, ref]);\n};\n\nexport default useAppendClassName;\n"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,GAAD,EAA8BC,SAA9B,EAAoD;EAC7E,IAAAC,gBAAA,EAAU,YAAM;IACd,IAAMC,OAAO,GAAGH,GAAG,CAACI,OAApB;IACA,IAAI,CAACD,OAAL,EAAc,OAAO,YAAM,CAAE,CAAf;IAEd,IAAME,aAAa,GAAGF,OAAO,CAACF,SAA9B;IACAE,OAAO,CAACF,SAAR,GAAoB,UAAGI,aAAH,cAAoBJ,SAApB,EAAgCK,IAAhC,EAApB;IAEA,OAAO,YAAM;MACXH,OAAO,CAACF,SAAR,GAAoBI,aAApB;IACD,CAFD;EAGD,CAVD,EAUG,CAACJ,SAAD,EAAYD,GAAZ,CAVH;AAWD,CAZD;;eAceD,kB"}

package/dist/cjs/utils/useBlankNode.js

@@ -71,7 +71,8 @@ var useBlankNode = function useBlankNode(props) {
           current: div
         },
         setStyle: function setStyle() {},
-        index: tail ? tail[4] + 1 : 0
+        index: tail ? tail[4] + 1 : 0,
+        id: 'blank'
       })
     };
   }, [draggedNode, targetList]);

package/dist/cjs/utils/useBlankNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/useBlankNode.ts"],"names":["useBlankNode","props","draggedNode","targetList","initDraggedNodeRect","initDraggedNodeRectRef","blankNode","current","ref","list","initWidth","initHeight","div","document","createElement","style","width","height","minWidth","minHeight","parent","innerList","innerRef","getBoundingClientRect","position","left","horizontal","top","appendChild","tail","getTail","node","add","setStyle","index","removeBlankNode","blank","remove","blankNodeRef","parentElement","removeChild"],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport NodeList, { ExistingNode } from './NodeList';\n\ninterface InitSize {\n  initWidth: number;\n  initHeight: number;\n}\n\ninterface DraggedNode {\n  list: NodeList;\n}\n\ninterface UseBlankNodeProps {\n  draggedNode: DraggedNode | null;\n  targetList: NodeList | null;\n  initDraggedNodeRect: InitSize | null;\n}\n\ninterface BlankNode {\n  list: NodeList;\n  node: ExistingNode;\n}\n\n/**\n * Appends the blank node to the list to increase the height of it.\n * Used when the dragged node is located inside another list.\n */\nconst useBlankNode = (props: UseBlankNodeProps) => {\n  const { draggedNode, targetList, initDraggedNodeRect } = props;\n  const initDraggedNodeRectRef = useRef(initDraggedNodeRect);\n  const blankNode = useRef<BlankNode | null>(null);\n\n  useEffect(() => {\n    initDraggedNodeRectRef.current = initDraggedNodeRect;\n  }, [initDraggedNodeRect]);\n\n  useEffect(() => {\n    if (\n      !draggedNode ||\n      !targetList ||\n      !targetList.ref.current ||\n      draggedNode.list === targetList ||\n      !initDraggedNodeRectRef.current\n    ) {\n      return;\n    }\n\n    // Create a new blank div\n    const { initWidth, initHeight } = initDraggedNodeRectRef.current;\n    const div = document.createElement('div');\n    div.style.width = `${initWidth}px`;\n    div.style.height = `${initHeight}px`;\n    div.style.minWidth = `${initWidth}px`;\n    div.style.minHeight = `${initHeight}px`;\n\n    let parent = targetList.ref.current;\n    const innerList = targetList.innerRef.current;\n\n    // The inner ref used only in the virtual list\n    if (innerList) {\n      const { width, height } = innerList.getBoundingClientRect();\n      div.style.position = 'absolute';\n      div.style.left = targetList.horizontal ? `${width}px` : '0px';\n      div.style.top = targetList.horizontal ? '0px' : `${height}px`;\n      parent = innerList;\n    }\n\n    // Append the blank div to increase the height of the list\n    parent.appendChild(div);\n\n    // Add the blank node to the node list\n    const tail = targetList.getTail();\n    blankNode.current = {\n      list: targetList,\n      node: targetList.add({\n        ref: { current: div },\n        setStyle: () => {},\n        index: tail ? tail[4] + 1 : 0,\n      }),\n    };\n  }, [draggedNode, targetList]);\n\n  const removeBlankNode = useCallback(() => {\n    const blank = blankNode.current;\n    if (!blank) return;\n    blankNode.current = null;\n    blank.list.remove(blank.node);\n    const [, , blankNodeRef] = blank.node;\n    if (!blank.list.ref.current || !blankNodeRef.current) return;\n    const parent = blankNodeRef.current.parentElement;\n    if (parent) parent.removeChild(blankNodeRef.current);\n  }, []);\n\n  // Remove the blank node if the dragged node has been dropped\n  useEffect(() => {\n    if (!draggedNode) return () => {};\n    return () => removeBlankNode();\n  }, [draggedNode, removeBlankNode]);\n\n  return removeBlankNode;\n};\n\nexport default useBlankNode;\n"],"file":"useBlankNode.js"}
+{"version":3,"file":"useBlankNode.js","names":["useBlankNode","props","draggedNode","targetList","initDraggedNodeRect","initDraggedNodeRectRef","useRef","blankNode","useEffect","current","ref","list","initWidth","initHeight","div","document","createElement","style","width","height","minWidth","minHeight","parent","innerList","innerRef","getBoundingClientRect","position","left","horizontal","top","appendChild","tail","getTail","node","add","setStyle","index","id","removeBlankNode","useCallback","blank","remove","blankNodeRef","parentElement","removeChild"],"sources":["../../../src/utils/useBlankNode.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport NodeList, { ExistingNode } from './NodeList';\n\ninterface InitSize {\n  initWidth: number;\n  initHeight: number;\n}\n\ninterface DraggedNode {\n  list: NodeList;\n}\n\ninterface UseBlankNodeProps {\n  draggedNode: DraggedNode | null;\n  targetList: NodeList | null;\n  initDraggedNodeRect: InitSize | null;\n}\n\ninterface BlankNode {\n  list: NodeList;\n  node: ExistingNode;\n}\n\n/**\n * Appends the blank node to the list to increase the height of it.\n * Used when the dragged node is located inside another list.\n */\nconst useBlankNode = (props: UseBlankNodeProps) => {\n  const { draggedNode, targetList, initDraggedNodeRect } = props;\n  const initDraggedNodeRectRef = useRef(initDraggedNodeRect);\n  const blankNode = useRef<BlankNode | null>(null);\n\n  useEffect(() => {\n    initDraggedNodeRectRef.current = initDraggedNodeRect;\n  }, [initDraggedNodeRect]);\n\n  useEffect(() => {\n    if (\n      !draggedNode ||\n      !targetList ||\n      !targetList.ref.current ||\n      draggedNode.list === targetList ||\n      !initDraggedNodeRectRef.current\n    ) {\n      return;\n    }\n\n    // Create a new blank div\n    const { initWidth, initHeight } = initDraggedNodeRectRef.current;\n    const div = document.createElement('div');\n    div.style.width = `${initWidth}px`;\n    div.style.height = `${initHeight}px`;\n    div.style.minWidth = `${initWidth}px`;\n    div.style.minHeight = `${initHeight}px`;\n\n    let parent = targetList.ref.current;\n    const innerList = targetList.innerRef.current;\n\n    // The inner ref used only in the virtual list\n    if (innerList) {\n      const { width, height } = innerList.getBoundingClientRect();\n      div.style.position = 'absolute';\n      div.style.left = targetList.horizontal ? `${width}px` : '0px';\n      div.style.top = targetList.horizontal ? '0px' : `${height}px`;\n      parent = innerList;\n    }\n\n    // Append the blank div to increase the height of the list\n    parent.appendChild(div);\n\n    // Add the blank node to the node list\n    const tail = targetList.getTail();\n    blankNode.current = {\n      list: targetList,\n      node: targetList.add({\n        ref: { current: div },\n        setStyle: () => {},\n        index: tail ? tail[4] + 1 : 0,\n        id: 'blank',\n      }),\n    };\n  }, [draggedNode, targetList]);\n\n  const removeBlankNode = useCallback(() => {\n    const blank = blankNode.current;\n    if (!blank) return;\n    blankNode.current = null;\n    blank.list.remove(blank.node);\n    const [, , blankNodeRef] = blank.node;\n    if (!blank.list.ref.current || !blankNodeRef.current) return;\n    const parent = blankNodeRef.current.parentElement;\n    if (parent) parent.removeChild(blankNodeRef.current);\n  }, []);\n\n  // Remove the blank node if the dragged node has been dropped\n  useEffect(() => {\n    if (!draggedNode) return () => {};\n    return () => removeBlankNode();\n  }, [draggedNode, removeBlankNode]);\n\n  return removeBlankNode;\n};\n\nexport default useBlankNode;\n"],"mappings":"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"}

package/dist/cjs/utils/useDragAndDrop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/useDragAndDrop.ts"],"names":["DragAndDropContext","React","createContext","registerList","deregisterList","onMouseDown","onTouchStart","nodeClassName","useDragAndDrop"],"mappings":";;;;;;;;;AAAA;;;;;;AAoBO,IAAMA,kBAAkB,gBAAGC,kBAAMC,aAAN,CAA6C;AAC7EC,EAAAA,YAAY,EAAE,wBAAM,CAAE,CADuD;AAE7EC,EAAAA,cAAc,EAAE,0BAAM,CAAE,CAFqD;AAG7EC,EAAAA,WAAW,EAAE,uBAAM,CAAE,CAHwD;AAI7EC,EAAAA,YAAY,EAAE,wBAAM,CAAE,CAJuD;AAK7EC,EAAAA,aAAa,EAAE;AAL8D,CAA7C,CAA3B;;;;AAQP,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;AAAA,SACrB,uBAAWR,kBAAX,CADqB;AAAA,CAAvB;;eAGeQ,c","sourcesContent":["import React, { useContext, MouseEvent, TouchEvent } from 'react';\nimport { Position } from '@os-design/use-drag';\nimport NodeList, { ExistingNode } from './NodeList';\n\nexport interface SetDraggedNodeProps {\n  list: NodeList;\n  node: ExistingNode;\n  position: Position;\n}\n\ntype NodeEventHandler<T> = (e: T, list: NodeList, node: ExistingNode) => void;\n\ninterface DragAndDropContextProps {\n  registerList: (list: NodeList) => void;\n  deregisterList: (id: string) => void;\n  onMouseDown: NodeEventHandler<MouseEvent>;\n  onTouchStart: NodeEventHandler<TouchEvent>;\n  nodeClassName: string;\n}\n\nexport const DragAndDropContext = React.createContext<DragAndDropContextProps>({\n  registerList: () => {},\n  deregisterList: () => {},\n  onMouseDown: () => {},\n  onTouchStart: () => {},\n  nodeClassName: '',\n});\n\nconst useDragAndDrop = (): DragAndDropContextProps =>\n  useContext(DragAndDropContext);\n\nexport default useDragAndDrop;\n"],"file":"useDragAndDrop.js"}
+{"version":3,"file":"useDragAndDrop.js","names":["DragAndDropContext","React","createContext","registerList","deregisterList","onMouseDown","onTouchStart","nodeClassName","useDragAndDrop","useContext"],"sources":["../../../src/utils/useDragAndDrop.ts"],"sourcesContent":["import React, { useContext, MouseEvent, TouchEvent } from 'react';\nimport { Position } from '@os-design/use-drag';\nimport NodeList, { ExistingNode } from './NodeList';\n\nexport interface SetDraggedNodeProps {\n  list: NodeList;\n  node: ExistingNode;\n  position: Position;\n}\n\ntype NodeEventHandler<T> = (e: T, list: NodeList, node: ExistingNode) => void;\n\ninterface DragAndDropContextProps {\n  registerList: (list: NodeList) => void;\n  deregisterList: (id: string) => void;\n  onMouseDown: NodeEventHandler<MouseEvent>;\n  onTouchStart: NodeEventHandler<TouchEvent>;\n  nodeClassName: string;\n}\n\nexport const DragAndDropContext = React.createContext<DragAndDropContextProps>({\n  registerList: () => {},\n  deregisterList: () => {},\n  onMouseDown: () => {},\n  onTouchStart: () => {},\n  nodeClassName: '',\n});\n\nconst useDragAndDrop = (): DragAndDropContextProps =>\n  useContext(DragAndDropContext);\n\nexport default useDragAndDrop;\n"],"mappings":";;;;;;;;;AAAA;;;;;;AAoBO,IAAMA,kBAAkB,gBAAGC,iBAAA,CAAMC,aAAN,CAA6C;EAC7EC,YAAY,EAAE,wBAAM,CAAE,CADuD;EAE7EC,cAAc,EAAE,0BAAM,CAAE,CAFqD;EAG7EC,WAAW,EAAE,uBAAM,CAAE,CAHwD;EAI7EC,YAAY,EAAE,wBAAM,CAAE,CAJuD;EAK7EC,aAAa,EAAE;AAL8D,CAA7C,CAA3B;;;;AAQP,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;EAAA,OACrB,IAAAC,iBAAA,EAAWT,kBAAX,CADqB;AAAA,CAAvB;;eAGeQ,c"}

package/dist/cjs/utils/useDragEffect.js

@@ -53,7 +53,7 @@ var createEmptyNode = function createEmptyNode(_ref) {
       next = _ref$next === void 0 ? null : _ref$next;
   return [prev, next, {
     current: null
-  }, function () {}, -1];
+  }, function () {}, -1, 'id'];
 };
 /* eslint-disable no-constant-condition */
 
@@ -101,16 +101,18 @@ var useDragEffect = function useDragEffect(props) {
     getNodeStyle: getNodeStyle
   });
   var setTargetNode = (0, _react.useCallback)(function (list, node) {
-    var _node = _slicedToArray(node, 5),
-        nodeIndex = _node[4];
+    var _node = _slicedToArray(node, 6),
+        nodeIndex = _node[4],
+        nodeId = _node[5];
 
     targetNodeRef.current = {
       list: list,
       node: node
     };
     targetRef.current = {
-      id: list.id,
-      index: nodeIndex
+      listId: list.id,
+      index: nodeIndex,
+      id: nodeId
     };
   }, []);
   var clearTargetNode = (0, _react.useCallback)(function () {
@@ -506,12 +508,14 @@ var useDragEffect = function useDragEffect(props) {
       var target = targetRef.current;
       if (!target) return;
 
-      var _draggedNode$node4 = _slicedToArray(draggedNode.node, 5),
-          draggedNodeIndex = _draggedNode$node4[4];
+      var _draggedNode$node4 = _slicedToArray(draggedNode.node, 6),
+          draggedNodeIndex = _draggedNode$node4[4],
+          draggedNodeId = _draggedNode$node4[5];
 
       var dragged = {
-        id: draggedNode.list.id,
-        index: draggedNodeIndex
+        listId: draggedNode.list.id,
+        index: draggedNodeIndex,
+        id: draggedNodeId
       };
       if (dragged.id === target.id && dragged.index === target.index) return;
       onDragEndRef.current(dragged, target);