@os-design/drag-sort 1.0.0 → 1.0.4

package/dist/cjs/DragAndDrop.js

@@ -29,6 +29,8 @@ var _useGeneratedId = _interopRequireDefault(require("./utils/useGeneratedId"));
 
 var _useTransitionStyle = _interopRequireDefault(require("./utils/useTransitionStyle"));
 
+var _useInitRect = _interopRequireDefault(require("./utils/useInitRect"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -171,6 +173,7 @@ var DragAndDrop = function DragAndDrop(_ref) {
     distPercent: autoScrollDistPercent,
     maxSpeedPx: autoScrollMaxSpeedPx
   });
+  var initRect = (0, _useInitRect["default"])(draggedNode ? draggedNode.node[2] : undefined);
   var dragAndDropContext = (0, _useMemoObject["default"])({
     registerList: registerList,
     deregisterList: deregisterList,
@@ -187,7 +190,10 @@ var DragAndDrop = function DragAndDrop(_ref) {
     style: {
       position: 'fixed',
       left: cursorPosition.x - draggedNode.position.x,
-      top: cursorPosition.y - draggedNode.position.y
+      top: cursorPosition.y - draggedNode.position.y,
+      width: initRect ? initRect.initWidth : undefined,
+      height: initRect ? initRect.initHeight : undefined,
+      zIndex: 1001
     }
   })));
 };

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","dragAndDropContext","renderDraggedNode","index","style","left","top"],"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';\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\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 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            },\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,"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\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"}

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<HTMLDivElement>;\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,"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"}

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// eslint-disable-next-line import/no-cycle\nimport { DraggedNode } from './useDragEffect';\n\ninterface InitSize {\n  initWidth: number;\n  initHeight: number;\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,"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"}

package/dist/cjs/utils/useDragEffect.js

@@ -55,7 +55,7 @@ var createEmptyNode = function createEmptyNode(_ref) {
     current: null
   }, function () {}, -1];
 };
-/* eslint-disable @typescript-eslint/no-explicit-any,no-constant-condition */
+/* eslint-disable no-constant-condition */
 
 
 var useDragEffect = function useDragEffect(props) {
@@ -74,11 +74,10 @@ var useDragEffect = function useDragEffect(props) {
   }, [onDragEnd]); // The initial bounds of the dragged node.
   // We can't read the bounds of the dragged node on the fly because the node can be unmounted in the virtual list.
 
-  var initDraggedNodeRect = (0, _useInitRect["default"])(draggedNode === null || draggedNode === void 0 ? void 0 : draggedNode.node[2]); // The initial scroll position of the list where the dragged node is located.
-  // Used to detect the actual position of the dragged node.
-  // The purpose is the same as with initDraggedNodeRect.
+  var initDraggedNodeRect = (0, _useInitRect["default"])(draggedNode ? draggedNode.node[2] : undefined); // The initial scroll position of the list where the dragged node is located.
+  // Used to detect the actual position of the dragged node. The purpose is the same as with initDraggedNodeRect.
 
-  var initDraggedNodeListScrollOffset = (0, _useInitScrollOffset["default"])(draggedNode === null || draggedNode === void 0 ? void 0 : draggedNode.list.ref); // The central position of the dragged node
+  var initDraggedNodeListScrollOffset = (0, _useInitScrollOffset["default"])(draggedNode ? draggedNode.list.ref : undefined); // The central position of the dragged node
 
   var position = (0, _react.useMemo)(function () {
     if (!draggedNode || !initDraggedNodeRect) return null;
@@ -90,12 +89,17 @@ var useDragEffect = function useDragEffect(props) {
       x: x - draggedNode.position.x + initWidth / 2,
       y: y - draggedNode.position.y + initHeight / 2
     };
-  }, [cursorPosition, draggedNode, initDraggedNodeRect]); // Returns the style for moving the node in the specified direction
+  }, [cursorPosition, draggedNode, initDraggedNodeRect]); // The list in which the cursor is located
 
-  var getNodeStyle = (0, _useGetNodeStyle["default"])(initDraggedNodeRect); // The list in which the cursor is located
+  var targetList = (0, _useTargetList["default"])(position, listStoreRef); // Returns the style for moving the node in the specified direction
 
-  var targetList = (0, _useTargetList["default"])(position, listStoreRef);
-  var moveNode = (0, _useMoveNode["default"])(position, draggedNode, getNodeStyle);
+  var getNodeStyle = (0, _useGetNodeStyle["default"])(initDraggedNodeRect); // Moves the node up or down
+
+  var moveNode = (0, _useMoveNode["default"])({
+    position: position,
+    draggedNode: draggedNode,
+    getNodeStyle: getNodeStyle
+  });
   var setTargetNode = (0, _react.useCallback)(function (list, node) {
     var _node = _slicedToArray(node, 5),
         nodeIndex = _node[4];
@@ -161,14 +165,14 @@ var useDragEffect = function useDragEffect(props) {
   var updateTargetNode = (0, _react.useCallback)(function () {
     if (!draggedNode) return;
     var prevTargetNode = targetNodeRef.current; // The last updated node
-    // Dragging outside the list
+    // Dragging outside the origin list
 
     if (prevTargetNode && prevTargetNode.list === draggedNode.list && targetList !== draggedNode.list) {
       moveNode({
         list: prevTargetNode.list,
         startNode: prevTargetNode.node,
-        type: 'down',
-        untilTheEnd: true
+        direction: 'down',
+        destination: 'end'
       });
       clearTargetNode();
     } // Dragging outside another list
@@ -178,13 +182,13 @@ var useDragEffect = function useDragEffect(props) {
       moveNode({
         list: prevTargetNode.list,
         startNode: prevTargetNode.node,
-        type: 'down',
-        untilTheEnd: true,
-        insideAnotherList: true
+        direction: 'down',
+        destination: 'end',
+        isAnotherList: true
       });
       removeBlankNode();
       clearTargetNode();
-    } // Dragging inside the list
+    } // Dragging inside the origin list
 
 
     if (!prevTargetNode && targetList === draggedNode.list) {
@@ -193,14 +197,15 @@ var useDragEffect = function useDragEffect(props) {
       var node = moveNode({
         list: targetList,
         startNode: tail,
-        type: 'up'
+        direction: 'up',
+        destination: 'cursor'
       });
       setTargetNode(targetList, node);
       return;
     } // Dragging inside another list
 
 
-    if (targetList && targetList !== draggedNode.list && (prevTargetNode === null || prevTargetNode === void 0 ? void 0 : prevTargetNode.list) !== targetList) {
+    if (targetList && targetList !== draggedNode.list && (!prevTargetNode || prevTargetNode.list !== targetList)) {
       var _tail = targetList.getTail();
 
       if (!_tail) return;
@@ -208,13 +213,14 @@ var useDragEffect = function useDragEffect(props) {
       var _node2 = moveNode({
         list: targetList,
         startNode: _tail,
-        type: 'up',
-        insideAnotherList: true
+        direction: 'up',
+        destination: 'cursor',
+        isAnotherList: true
       });
 
       setTargetNode(targetList, _node2);
       return;
-    } // Dragging in the same list
+    } // Dragging in the origin list
 
 
     if (prevTargetNode && prevTargetNode.list === draggedNode.list && targetList === draggedNode.list) {
@@ -242,7 +248,8 @@ var useDragEffect = function useDragEffect(props) {
             startNode: createEmptyNode({
               prev: _tail2
             }),
-            type: 'up'
+            direction: 'up',
+            destination: 'cursor'
           });
 
           setTargetNode(targetList, _node4);
@@ -255,7 +262,8 @@ var useDragEffect = function useDragEffect(props) {
             startNode: createEmptyNode({
               next: head
             }),
-            type: 'down'
+            direction: 'down',
+            destination: 'cursor'
           });
 
           setTargetNode(targetList, _node5);
@@ -265,18 +273,20 @@ var useDragEffect = function useDragEffect(props) {
       }
 
       var prevTargetNodeRect = (0, _getNodeRect["default"])(prevTargetNode.node[2]);
-      var rectProp = targetList.horizontal ? 'left' : 'top';
+      var startRectProp = targetList.horizontal ? 'left' : 'top';
       if (!position || !prevTargetNodeRect) return;
-      var isMoveUp = position[axis] < prevTargetNodeRect[rectProp];
+      var isMoveUp = position[axis] < prevTargetNodeRect[startRectProp];
 
       var _node3 = isMoveUp ? moveNode({
         list: targetList,
         startNode: prevTargetNode.node,
-        type: 'up'
+        direction: 'up',
+        destination: 'cursor'
       }) : moveNode({
         list: targetList,
         startNode: prevTargetNode.node,
-        type: 'down'
+        direction: 'down',
+        destination: 'cursor'
       });
 
       setTargetNode(targetList, _node3);
@@ -284,27 +294,29 @@ var useDragEffect = function useDragEffect(props) {
     } // Dragging in another list
 
 
-    if (targetList && targetList !== draggedNode.list && (prevTargetNode === null || prevTargetNode === void 0 ? void 0 : prevTargetNode.list) === targetList) {
+    if (targetList && targetList !== draggedNode.list && prevTargetNode && prevTargetNode.list === targetList) {
       var _axis = targetList.horizontal ? 'x' : 'y';
 
       var _prevTargetNodeRect = (0, _getNodeRect["default"])(prevTargetNode.node[2]);
 
-      var _rectProp = targetList.horizontal ? 'left' : 'top';
+      var _startRectProp = targetList.horizontal ? 'left' : 'top';
 
       if (!position || !_prevTargetNodeRect) return;
 
-      var _isMoveUp = position[_axis] < _prevTargetNodeRect[_rectProp];
+      var _isMoveUp = position[_axis] < _prevTargetNodeRect[_startRectProp];
 
       var _node6 = _isMoveUp ? moveNode({
         list: targetList,
         startNode: prevTargetNode.node,
-        type: 'up',
-        insideAnotherList: true
+        direction: 'up',
+        destination: 'cursor',
+        isAnotherList: true
       }) : moveNode({
         list: targetList,
         startNode: prevTargetNode.node,
-        type: 'down',
-        insideAnotherList: true
+        direction: 'down',
+        destination: 'cursor',
+        isAnotherList: true
       });
 
       setTargetNode(targetList, _node6);
@@ -319,8 +331,8 @@ var useDragEffect = function useDragEffect(props) {
       _useThrottle2 = _slicedToArray(_useThrottle, 1),
       throttledUpdateTargetNode = _useThrottle2[0];
 
-  (0, _useEvent["default"])(targetList === null || targetList === void 0 ? void 0 : targetList.ref, 'scroll', throttledUpdateTargetNode);
-  (0, _useEvent["default"])(window, 'scroll', throttledUpdateTargetNode); // Reset styles of the nodes when the dragged node was dropped
+  (0, _useEvent["default"])(targetList ? targetList.ref : undefined, 'scroll', throttledUpdateTargetNode);
+  (0, _useEvent["default"])(window, 'scroll', throttledUpdateTargetNode); // Reset styles of the affected nodes when the dragged node was dropped
 
   (0, _react.useEffect)(function () {
     if (!draggedNode) return function () {};
@@ -329,94 +341,98 @@ var useDragEffect = function useDragEffect(props) {
         draggedNodeIndex = _draggedNode$node2[4];
 
     return function () {
-      var targetNode = targetNodeRef.current; // If the dragged node was inside another list, reset the styles for the nodes,
-      // starting at the tail and ending with the dragged node.
+      var targetNode = targetNodeRef.current; // If the dragged node was outside the origin list, reset the styles for the nodes,
+      // starting at the tail and ending with the dragged node in the origin list.
+
+      if (!targetNode || targetNode.list !== draggedNode.list) {
+        var tail = draggedNode.list.getTail();
+
+        if (tail) {
+          var node = tail;
+
+          while (true) {
+            var _node7 = node,
+                _node8 = _slicedToArray(_node7, 5),
+                prev = _node8[0],
+                nodeSetStyle = _node8[3],
+                nodeIndex = _node8[4];
+
+            nodeSetStyle({});
+            if (!prev || nodeIndex <= draggedNodeIndex) break;
+            node = prev;
+          }
+        }
+      } // If the dragged node was inside another list, reset the styles for the nodes,
+      // starting at the tail and ending with the dragged node in the target list.
+
 
       if (targetNode && targetNode.list !== draggedNode.list) {
         var _tail3 = targetNode.list.getTail();
 
-        if (!_tail3) return;
-        var node = _tail3;
-
-        while (true) {
-          var _node7 = node,
-              _node8 = _slicedToArray(_node7, 5),
-              prev = _node8[0],
-              nodeSetStyle = _node8[3],
-              nodeIndex = _node8[4];
-
-          nodeSetStyle({});
-          if (!prev || nodeIndex <= draggedNodeIndex) break;
-          node = prev;
-        }
-      } // If the dragged node was outside the origin list, reset the styles for the nodes,
-      // starting at the tail and ending with the dragged node.
-
-
-      var tail = draggedNode.list.getTail();
+        var _targetNode$node = _slicedToArray(targetNode.node, 5),
+            targetNodeIndex = _targetNode$node[4];
 
-      if ((targetNode === null || targetNode === void 0 ? void 0 : targetNode.list) !== draggedNode.list && tail) {
-        var _node9 = tail;
+        if (_tail3) {
+          var _node9 = _tail3;
 
-        while (true) {
-          var _node10 = _node9,
-              _node11 = _slicedToArray(_node10, 5),
-              _prev = _node11[0],
-              _nodeSetStyle = _node11[3],
-              _nodeIndex = _node11[4];
+          while (true) {
+            var _node10 = _node9,
+                _node11 = _slicedToArray(_node10, 5),
+                _prev = _node11[0],
+                _nodeSetStyle = _node11[3],
+                _nodeIndex = _node11[4];
 
-          _nodeSetStyle({});
+            _nodeSetStyle({});
 
-          if (!_prev || _nodeIndex <= draggedNodeIndex) break;
-          _node9 = _prev;
+            if (!_prev || _nodeIndex <= targetNodeIndex) break;
+            _node9 = _prev;
+          }
         }
-      }
-
-      if (!targetNode) return;
-
-      var _targetNode$node = _slicedToArray(targetNode.node, 5),
-          targetNodeSetStyle = _targetNode$node[3],
-          targetNodeIndex = _targetNode$node[4];
-
-      if (targetNodeIndex > draggedNodeIndex) {
-        var _node12 = targetNode.node;
-
-        while (true) {
-          var _node13 = _node12,
-              _node14 = _slicedToArray(_node13, 5),
-              _prev2 = _node14[0],
-              _nodeSetStyle2 = _node14[3],
-              _nodeIndex2 = _node14[4];
-
-          _nodeSetStyle2({});
-
-          if (!_prev2 || _nodeIndex2 < draggedNodeIndex) return;
-          _node12 = _prev2;
+      } // If the dragged node was moved inside the origin list, reset the styles for the nodes,
+      // starting with target node and ending with the dragged node.
+
+
+      if (targetNode && targetNode.list === draggedNode.list) {
+        var _targetNode$node2 = _slicedToArray(targetNode.node, 5),
+            targetNodeSetStyle = _targetNode$node2[3],
+            _targetNodeIndex = _targetNode$node2[4];
+
+        if (_targetNodeIndex > draggedNodeIndex) {
+          var _node12 = targetNode.node;
+
+          while (true) {
+            var _node13 = _node12,
+                _node14 = _slicedToArray(_node13, 5),
+                _prev2 = _node14[0],
+                _nodeSetStyle2 = _node14[3],
+                _nodeIndex2 = _node14[4];
+
+            _nodeSetStyle2({});
+
+            if (!_prev2 || _nodeIndex2 <= draggedNodeIndex) break;
+            _node12 = _prev2;
+          }
+        } else if (_targetNodeIndex < draggedNodeIndex) {
+          var _node15 = targetNode.node;
+
+          while (true) {
+            var _node16 = _node15,
+                _node17 = _slicedToArray(_node16, 5),
+                next = _node17[1],
+                _nodeSetStyle3 = _node17[3],
+                _nodeIndex3 = _node17[4];
+
+            _nodeSetStyle3({});
+
+            if (!next || _nodeIndex3 >= draggedNodeIndex) break;
+            _node15 = next;
+          }
+        } else if (_targetNodeIndex === draggedNodeIndex) {
+          targetNodeSetStyle({});
         }
       }
-
-      if (targetNodeIndex < draggedNodeIndex) {
-        var _node15 = targetNode.node;
-
-        while (true) {
-          var _node16 = _node15,
-              _node17 = _slicedToArray(_node16, 5),
-              next = _node17[1],
-              _nodeSetStyle3 = _node17[3],
-              _nodeIndex3 = _node17[4];
-
-          _nodeSetStyle3({});
-
-          if (!next || _nodeIndex3 > draggedNodeIndex) return;
-          _node15 = next;
-        }
-      }
-
-      if (targetNodeIndex === draggedNodeIndex) {
-        targetNodeSetStyle({});
-      }
     };
-  }, [draggedNode]); // Update the position of the mounted nodes between the dragged and target nodes (used in virtual list)
+  }, [draggedNode]); // Update the position of the newly mounted nodes in the origin list (used in the virtual list)
 
   (0, _react.useEffect)(function () {
     if (!draggedNode) return function () {};
@@ -425,33 +441,29 @@ var useDragEffect = function useDragEffect(props) {
         draggedNodeIndex = _draggedNode$node3[4];
 
     var update = function update(nodeProps) {
-      var _targetNodeRef$curren;
-
       var setStyle = nodeProps.setStyle,
           index = nodeProps.index;
-      var targetNode = targetNodeRef.current; // If the dragged node outside the origin list
-
-      if (((_targetNodeRef$curren = targetNodeRef.current) === null || _targetNodeRef$curren === void 0 ? void 0 : _targetNodeRef$curren.list) !== draggedNode.list && index > draggedNodeIndex) {
-        setStyle(getNodeStyle('up', draggedNode.list.horizontal));
-        return;
-      }
-
-      if (!targetNode || !targetNode.node) return;
-
-      var _targetNode$node2 = _slicedToArray(targetNode.node, 5),
-          targetNodeIndex = _targetNode$node2[4]; // If the dragged node was mounted
-
+      var targetNode = targetNodeRef.current; // Set the hidden style, if the mounted node is the dragged node
 
       if (index === draggedNodeIndex) {
         setStyle(HIDDEN_NODE_STYLE);
         return;
-      } // If the node between the dragged and target nodes was mounted
+      } // If the dragged node is inside the origin list
+
 
+      if (targetNode && targetNode.list === draggedNode.list) {
+        // Move the mounted node up/down, if it is located between the dragged and target node
+        var _targetNode$node3 = _slicedToArray(targetNode.node, 5),
+            targetNodeIndex = _targetNode$node3[4];
 
-      if (index > draggedNodeIndex && index < targetNodeIndex) {
-        setStyle(getNodeStyle('up', targetNode.list.horizontal));
-      } else if (index < draggedNodeIndex && index > targetNodeIndex) {
-        setStyle(getNodeStyle('down', targetNode.list.horizontal));
+        if (index > draggedNodeIndex && index < targetNodeIndex) {
+          setStyle(getNodeStyle('up', targetNode.list.horizontal));
+        } else if (index < draggedNodeIndex && index > targetNodeIndex) {
+          setStyle(getNodeStyle('down', targetNode.list.horizontal));
+        }
+      } else if (index > draggedNodeIndex) {
+        // Otherwise, move the mounted node up, if it is located below the dragged node
+        setStyle(getNodeStyle('up', draggedNode.list.horizontal));
       }
     };
 
@@ -459,7 +471,8 @@ var useDragEffect = function useDragEffect(props) {
     return function () {
       return draggedNode.list.removeListener(update);
     };
-  }, [draggedNode, getNodeStyle]);
+  }, [draggedNode, getNodeStyle]); // Update the position of the newly mounted nodes in the target list (used in the virtual list)
+
   (0, _react.useEffect)(function () {
     if (!draggedNode || !targetList || targetList === draggedNode.list) {
       return function () {};
@@ -471,11 +484,13 @@ var useDragEffect = function useDragEffect(props) {
       var targetNode = targetNodeRef.current;
       if (!targetNode) return;
 
-      var _targetNode$node3 = _slicedToArray(targetNode.node, 5),
-          targetNodeIndex = _targetNode$node3[4];
+      var _targetNode$node4 = _slicedToArray(targetNode.node, 5),
+          targetNodeIndex = _targetNode$node4[4];
 
-      if (index < targetNodeIndex) return;
-      setStyle(getNodeStyle('down', targetList.horizontal));
+      if (index >= targetNodeIndex) {
+        // Move the mounted node down, if it is located below the target node or if it is the target node
+        setStyle(getNodeStyle('down', targetList.horizontal));
+      }
     };
 
     targetList.addListener(update);