@os-design/drag-sort 1.0.6 → 1.0.7

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

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,"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();\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/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,"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();\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"}

package/dist/cjs/utils/useGeneratedId.js

@@ -7,14 +7,10 @@ exports["default"] = void 0;
 
 var _react = require("react");
 
-var _crypto = _interopRequireDefault(require("crypto"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var useGeneratedId = function useGeneratedId(size) {
+var useGeneratedId = function useGeneratedId() {
   return (0, _react.useMemo)(function () {
-    return _crypto["default"].randomBytes(size).toString('hex');
-  }, [size]);
+    return Math.random().toString(16).slice(2);
+  }, []);
 };
 
 var _default = useGeneratedId;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/useGeneratedId.ts"],"names":["useGeneratedId","size","crypto","randomBytes","toString"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD;AAAA,SACrB,oBAAQ;AAAA,WAAMC,mBAAOC,WAAP,CAAmBF,IAAnB,EAAyBG,QAAzB,CAAkC,KAAlC,CAAN;AAAA,GAAR,EAAwD,CAACH,IAAD,CAAxD,CADqB;AAAA,CAAvB;;eAGeD,c","sourcesContent":["import { useMemo } from 'react';\nimport crypto from 'crypto';\n\nconst useGeneratedId = (size: number) =>\n  useMemo(() => crypto.randomBytes(size).toString('hex'), [size]);\n\nexport default useGeneratedId;\n"],"file":"useGeneratedId.js"}
+{"version":3,"sources":["../../../src/utils/useGeneratedId.ts"],"names":["useGeneratedId","Math","random","toString","slice"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB;AAAA,SACrB,oBAAQ;AAAA,WAAMC,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,CAAN;AAAA,GAAR,EAAmD,EAAnD,CADqB;AAAA,CAAvB;;eAGeJ,c","sourcesContent":["import { useMemo } from 'react';\n\nconst useGeneratedId = () =>\n  useMemo(() => Math.random().toString(16).slice(2), []);\n\nexport default useGeneratedId;\n"],"file":"useGeneratedId.js"}

package/dist/esm/DragAndDrop.js

@@ -28,7 +28,7 @@ const DragAndDrop = ({
   // To determine which list a node should be dropped in, we need to store refs to all the lists.
   const listStoreRef = useRef(new ListStore()); // The class name for a node used to set the transition style
 
-  const generatedId = useGeneratedId(4);
+  const generatedId = useGeneratedId();
   const nodeClassName = useMemo(() => `n${generatedId}`, [generatedId]); // The node that is currently being dragged
 
   const [draggedNode, setDraggedNode] = useState(null);

package/dist/esm/DragAndDrop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DragAndDrop.tsx"],"names":["React","useCallback","useMemo","useRef","useState","usePreventDefaultEvent","useMemoObject","useDrag","Portal","useAutoScroll","DragAndDropContext","ListStore","useDragEffect","useGeneratedId","useTransitionStyle","useInitRect","DragAndDrop","draggedNodeContainer","minMouseDistPx","longPressMs","autoScrollDistPercent","autoScrollMaxSpeedPx","transitionDelayMs","onDragEnd","children","listStoreRef","generatedId","nodeClassName","draggedNode","setDraggedNode","startNodeRef","cursorPosition","setCursorPosition","x","y","registerList","list","current","add","deregisterList","id","remove","className","ms","enabled","onDragStart","pos","startPos","startNode","nodeRef","node","rect","getBoundingClientRect","position","onDragMove","dragEndHandler","onMouseDown","onTouchStart","mouseDownHandler","e","touchStartHandler","document","body","distPercent","maxSpeedPx","initRect","undefined","dragAndDropContext","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,"sources":["../../src/DragAndDrop.tsx"],"names":["React","useCallback","useMemo","useRef","useState","usePreventDefaultEvent","useMemoObject","useDrag","Portal","useAutoScroll","DragAndDropContext","ListStore","useDragEffect","useGeneratedId","useTransitionStyle","useInitRect","DragAndDrop","draggedNodeContainer","minMouseDistPx","longPressMs","autoScrollDistPercent","autoScrollMaxSpeedPx","transitionDelayMs","onDragEnd","children","listStoreRef","generatedId","nodeClassName","draggedNode","setDraggedNode","startNodeRef","cursorPosition","setCursorPosition","x","y","registerList","list","current","add","deregisterList","id","remove","className","ms","enabled","onDragStart","pos","startPos","startNode","nodeRef","node","rect","getBoundingClientRect","position","onDragMove","dragEndHandler","onMouseDown","onTouchStart","mouseDownHandler","e","touchStartHandler","document","body","distPercent","maxSpeedPx","initRect","undefined","dragAndDropContext","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();\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/esm/Droppable.js

@@ -16,7 +16,7 @@ const Droppable = ({
 
   const innerRef = useRef(null); // The unique ID of the list. If no ID was specified, the generated one is used.
 
-  const generatedId = useGeneratedId(10);
+  const generatedId = useGeneratedId();
   const droppableId = useMemo(() => id || generatedId, [generatedId, id]); // The reference to the list of nodes
 
   const listRef = useRef(new NodeList({

package/dist/esm/Droppable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Droppable.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useMemoObject","NodeList","useDragAndDrop","DroppableContext","useGeneratedId","Droppable","renderDraggedNode","id","horizontal","children","ref","innerRef","generatedId","droppableId","listRef","current","registerList","deregisterList","onMouseDown","onTouchStart","listId","registerNode","props","add","deregisterNode","node","remove","mouseDownHandler","e","touchStartHandler","droppableContext"],"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,"sources":["../../src/Droppable.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useMemoObject","NodeList","useDragAndDrop","DroppableContext","useGeneratedId","Droppable","renderDraggedNode","id","horizontal","children","ref","innerRef","generatedId","droppableId","listRef","current","registerList","deregisterList","onMouseDown","onTouchStart","listId","registerNode","props","add","deregisterNode","node","remove","mouseDownHandler","e","touchStartHandler","droppableContext"],"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();\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"}

package/dist/esm/utils/useGeneratedId.js

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
-import crypto from 'crypto';
 
-const useGeneratedId = size => useMemo(() => crypto.randomBytes(size).toString('hex'), [size]);
+const useGeneratedId = () => useMemo(() => Math.random().toString(16).slice(2), []);
 
 export default useGeneratedId;
 //# sourceMappingURL=useGeneratedId.js.map

package/dist/esm/utils/useGeneratedId.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/useGeneratedId.ts"],"names":["useMemo","crypto","useGeneratedId","size","randomBytes","toString"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,OAAOC,MAAP,MAAmB,QAAnB;;AAEA,MAAMC,cAAc,GAAIC,IAAD,IACrBH,OAAO,CAAC,MAAMC,MAAM,CAACG,WAAP,CAAmBD,IAAnB,EAAyBE,QAAzB,CAAkC,KAAlC,CAAP,EAAiD,CAACF,IAAD,CAAjD,CADT;;AAGA,eAAeD,cAAf","sourcesContent":["import { useMemo } from 'react';\nimport crypto from 'crypto';\n\nconst useGeneratedId = (size: number) =>\n  useMemo(() => crypto.randomBytes(size).toString('hex'), [size]);\n\nexport default useGeneratedId;\n"],"file":"useGeneratedId.js"}
+{"version":3,"sources":["../../../src/utils/useGeneratedId.ts"],"names":["useMemo","useGeneratedId","Math","random","toString","slice"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;;AAEA,MAAMC,cAAc,GAAG,MACrBD,OAAO,CAAC,MAAME,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,CAAP,EAA4C,EAA5C,CADT;;AAGA,eAAeJ,cAAf","sourcesContent":["import { useMemo } from 'react';\n\nconst useGeneratedId = () =>\n  useMemo(() => Math.random().toString(16).slice(2), []);\n\nexport default useGeneratedId;\n"],"file":"useGeneratedId.js"}

package/dist/types/utils/useGeneratedId.d.ts

@@ -1,3 +1,3 @@
-declare const useGeneratedId: (size: number) => string;
+declare const useGeneratedId: () => string;
 export default useGeneratedId;
 //# sourceMappingURL=useGeneratedId.d.ts.map

package/dist/types/utils/useGeneratedId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGeneratedId.d.ts","sourceRoot":"","sources":["../../../src/utils/useGeneratedId.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc,SAAU,MAAM,WAC6B,CAAC;AAElE,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useGeneratedId.d.ts","sourceRoot":"","sources":["../../../src/utils/useGeneratedId.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc,cACoC,CAAC;AAEzD,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/drag-sort",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -45,5 +45,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "990fa0eb8e38bbb94ebea1ba0c825574ff11fe5e"
+  "gitHead": "6b4ff5f8f5080c52fd07c10a8903a93595899f09"
 }