@os-design/drag-sort 1.0.13 → 1.0.15

package/dist/cjs/utils/useTargetList.js

@@ -4,37 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _useThrottle3 = _interopRequireDefault(require("@os-design/use-throttle"));
-
 var _useScrollEventByPoint = _interopRequireDefault(require("./useScrollEventByPoint"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var useTargetList = function useTargetList(position, listStoreRef) {
   var _useState = (0, _react.useState)(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      number = _useState2[0],
-      setNumber = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    number = _useState2[0],
+    setNumber = _useState2[1];
   var targetList = (0, _react.useMemo)(function () {
     if (!position || !listStoreRef.current) return null;
     var x = position.x,
-        y = position.y;
+      y = position.y;
     var list = listStoreRef.current.findByPosition(x, y);
     return list || null;
   }, [listStoreRef, position, number]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -43,16 +31,15 @@ var useTargetList = function useTargetList(position, listStoreRef) {
     setNumber(function (n) {
       return n + 1;
     });
-  }, []); // Update the target list if one of the elements located under the specified point has been scrolled
+  }, []);
 
+  // Update the target list if one of the elements located under the specified point has been scrolled
   var _useThrottle = (0, _useThrottle3["default"])(forceUpdate, 100),
-      _useThrottle2 = _slicedToArray(_useThrottle, 1),
-      throttledForceUpdate = _useThrottle2[0];
-
+    _useThrottle2 = _slicedToArray(_useThrottle, 1),
+    throttledForceUpdate = _useThrottle2[0];
   (0, _useScrollEventByPoint["default"])(position, throttledForceUpdate);
   return targetList;
 };
-
 var _default = useTargetList;
 exports["default"] = _default;
 //# sourceMappingURL=useTargetList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTargetList.js","names":["useTargetList","position","listStoreRef","useState","number","setNumber","targetList","useMemo","current","x","y","list","findByPosition","forceUpdate","useCallback","n","useThrottle","throttledForceUpdate","useScrollEventByPoint"],"sources":["../../../src/utils/useTargetList.ts"],"sourcesContent":["import { RefObject, useCallback, useMemo, useState } from 'react';\nimport useThrottle from '@os-design/use-throttle';\nimport { Position } from '@os-design/use-drag';\nimport ListStore from './ListStore';\nimport useScrollEventByPoint from './useScrollEventByPoint';\n\nconst useTargetList = (\n  position: Position | null,\n  listStoreRef: RefObject<ListStore>\n) => {\n  const [number, setNumber] = useState(0);\n\n  const targetList = useMemo(() => {\n    if (!position || !listStoreRef.current) return null;\n    const { x, y } = position;\n    const list = listStoreRef.current.findByPosition(x, y);\n    return list || null;\n  }, [listStoreRef, position, number]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const forceUpdate = useCallback(() => {\n    setNumber((n) => n + 1);\n  }, []);\n\n  // Update the target list if one of the elements located under the specified point has been scrolled\n  const [throttledForceUpdate] = useThrottle(forceUpdate, 100);\n  useScrollEventByPoint(position, throttledForceUpdate);\n\n  return targetList;\n};\n\nexport default useTargetList;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;;;;;;;;;;;;;;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CACpBC,QADoB,EAEpBC,YAFoB,EAGjB;EACH,gBAA4B,IAAAC,eAAA,EAAS,CAAT,CAA5B;EAAA;EAAA,IAAOC,MAAP;EAAA,IAAeC,SAAf;;EAEA,IAAMC,UAAU,GAAG,IAAAC,cAAA,EAAQ,YAAM;IAC/B,IAAI,CAACN,QAAD,IAAa,CAACC,YAAY,CAACM,OAA/B,EAAwC,OAAO,IAAP;IACxC,IAAQC,CAAR,GAAiBR,QAAjB,CAAQQ,CAAR;IAAA,IAAWC,CAAX,GAAiBT,QAAjB,CAAWS,CAAX;IACA,IAAMC,IAAI,GAAGT,YAAY,CAACM,OAAb,CAAqBI,cAArB,CAAoCH,CAApC,EAAuCC,CAAvC,CAAb;IACA,OAAOC,IAAI,IAAI,IAAf;EACD,CALkB,EAKhB,CAACT,YAAD,EAAeD,QAAf,EAAyBG,MAAzB,CALgB,CAAnB,CAHG,CAQmC;;EAEtC,IAAMS,WAAW,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACpCT,SAAS,CAAC,UAACU,CAAD;MAAA,OAAOA,CAAC,GAAG,CAAX;IAAA,CAAD,CAAT;EACD,CAFmB,EAEjB,EAFiB,CAApB,CAVG,CAcH;;EACA,mBAA+B,IAAAC,wBAAA,EAAYH,WAAZ,EAAyB,GAAzB,CAA/B;EAAA;EAAA,IAAOI,oBAAP;;EACA,IAAAC,iCAAA,EAAsBjB,QAAtB,EAAgCgB,oBAAhC;EAEA,OAAOX,UAAP;AACD,CAtBD;;eAwBeN,a"}
+{"version":3,"file":"useTargetList.js","names":["useTargetList","position","listStoreRef","useState","number","setNumber","targetList","useMemo","current","x","y","list","findByPosition","forceUpdate","useCallback","n","useThrottle","throttledForceUpdate","useScrollEventByPoint"],"sources":["../../../src/utils/useTargetList.ts"],"sourcesContent":["import { RefObject, useCallback, useMemo, useState } from 'react';\nimport useThrottle from '@os-design/use-throttle';\nimport { Position } from '@os-design/use-drag';\nimport ListStore from './ListStore';\nimport useScrollEventByPoint from './useScrollEventByPoint';\n\nconst useTargetList = (\n  position: Position | null,\n  listStoreRef: RefObject<ListStore>\n) => {\n  const [number, setNumber] = useState(0);\n\n  const targetList = useMemo(() => {\n    if (!position || !listStoreRef.current) return null;\n    const { x, y } = position;\n    const list = listStoreRef.current.findByPosition(x, y);\n    return list || null;\n  }, [listStoreRef, position, number]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const forceUpdate = useCallback(() => {\n    setNumber((n) => n + 1);\n  }, []);\n\n  // Update the target list if one of the elements located under the specified point has been scrolled\n  const [throttledForceUpdate] = useThrottle(forceUpdate, 100);\n  useScrollEventByPoint(position, throttledForceUpdate);\n\n  return targetList;\n};\n\nexport default useTargetList;\n"],"mappings":";;;;;;AAAA;AACA;AAGA;AAA4D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE5D,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CACjBC,QAAyB,EACzBC,YAAkC,EAC/B;EACH,gBAA4B,IAAAC,eAAQ,EAAC,CAAC,CAAC;IAAA;IAAhCC,MAAM;IAAEC,SAAS;EAExB,IAAMC,UAAU,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC/B,IAAI,CAACN,QAAQ,IAAI,CAACC,YAAY,CAACM,OAAO,EAAE,OAAO,IAAI;IACnD,IAAQC,CAAC,GAAQR,QAAQ,CAAjBQ,CAAC;MAAEC,CAAC,GAAKT,QAAQ,CAAdS,CAAC;IACZ,IAAMC,IAAI,GAAGT,YAAY,CAACM,OAAO,CAACI,cAAc,CAACH,CAAC,EAAEC,CAAC,CAAC;IACtD,OAAOC,IAAI,IAAI,IAAI;EACrB,CAAC,EAAE,CAACT,YAAY,EAAED,QAAQ,EAAEG,MAAM,CAAC,CAAC,CAAC,CAAC;;EAEtC,IAAMS,WAAW,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACpCT,SAAS,CAAC,UAACU,CAAC;MAAA,OAAKA,CAAC,GAAG,CAAC;IAAA,EAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,mBAA+B,IAAAC,wBAAW,EAACH,WAAW,EAAE,GAAG,CAAC;IAAA;IAArDI,oBAAoB;EAC3B,IAAAC,iCAAqB,EAACjB,QAAQ,EAAEgB,oBAAoB,CAAC;EAErD,OAAOX,UAAU;AACnB,CAAC;AAAC,eAEaN,aAAa;AAAA"}

package/dist/cjs/utils/useTransitionStyle.js

@@ -4,16 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 /**
  * Creates the global style for setting the transition delay.
  */
 var useTransitionStyle = function useTransitionStyle(props) {
   var className = props.className,
-      ms = props.ms,
-      enabled = props.enabled;
+    ms = props.ms,
+    enabled = props.enabled;
   (0, _react.useEffect)(function () {
     if (!enabled) return function () {};
     var style = document.createElement('style');
@@ -24,7 +22,6 @@ var useTransitionStyle = function useTransitionStyle(props) {
     };
   }, [className, enabled, ms]);
 };
-
 var _default = useTransitionStyle;
 exports["default"] = _default;
 //# sourceMappingURL=useTransitionStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTransitionStyle.js","names":["useTransitionStyle","props","className","ms","enabled","useEffect","style","document","createElement","innerHTML","child","head","appendChild","removeChild"],"sources":["../../../src/utils/useTransitionStyle.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ninterface UseTransitionStyleProps {\n  className: string;\n  ms: number;\n  enabled: boolean;\n}\n\n/**\n * Creates the global style for setting the transition delay.\n */\nconst useTransitionStyle = (props: UseTransitionStyleProps) => {\n  const { className, ms, enabled } = props;\n\n  useEffect(() => {\n    if (!enabled) return () => {};\n    const style = document.createElement('style');\n    style.innerHTML = `.${className}{transition:transform ${ms}ms;}`;\n    const child = document.head.appendChild(style);\n    return () => {\n      document.head.removeChild(child);\n    };\n  }, [className, enabled, ms]);\n};\n\nexport default useTransitionStyle;\n"],"mappings":";;;;;;;AAAA;;AAQA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAoC;EAC7D,IAAQC,SAAR,GAAmCD,KAAnC,CAAQC,SAAR;EAAA,IAAmBC,EAAnB,GAAmCF,KAAnC,CAAmBE,EAAnB;EAAA,IAAuBC,OAAvB,GAAmCH,KAAnC,CAAuBG,OAAvB;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACd,IAAI,CAACD,OAAL,EAAc,OAAO,YAAM,CAAE,CAAf;IACd,IAAME,KAAK,GAAGC,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAAd;IACAF,KAAK,CAACG,SAAN,cAAsBP,SAAtB,mCAAwDC,EAAxD;IACA,IAAMO,KAAK,GAAGH,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,KAA1B,CAAd;IACA,OAAO,YAAM;MACXC,QAAQ,CAACI,IAAT,CAAcE,WAAd,CAA0BH,KAA1B;IACD,CAFD;EAGD,CARD,EAQG,CAACR,SAAD,EAAYE,OAAZ,EAAqBD,EAArB,CARH;AASD,CAZD;;eAceH,kB"}
+{"version":3,"file":"useTransitionStyle.js","names":["useTransitionStyle","props","className","ms","enabled","useEffect","style","document","createElement","innerHTML","child","head","appendChild","removeChild"],"sources":["../../../src/utils/useTransitionStyle.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ninterface UseTransitionStyleProps {\n  className: string;\n  ms: number;\n  enabled: boolean;\n}\n\n/**\n * Creates the global style for setting the transition delay.\n */\nconst useTransitionStyle = (props: UseTransitionStyleProps) => {\n  const { className, ms, enabled } = props;\n\n  useEffect(() => {\n    if (!enabled) return () => {};\n    const style = document.createElement('style');\n    style.innerHTML = `.${className}{transition:transform ${ms}ms;}`;\n    const child = document.head.appendChild(style);\n    return () => {\n      document.head.removeChild(child);\n    };\n  }, [className, enabled, ms]);\n};\n\nexport default useTransitionStyle;\n"],"mappings":";;;;;;AAAA;AAQA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAA8B,EAAK;EAC7D,IAAQC,SAAS,GAAkBD,KAAK,CAAhCC,SAAS;IAAEC,EAAE,GAAcF,KAAK,CAArBE,EAAE;IAAEC,OAAO,GAAKH,KAAK,CAAjBG,OAAO;EAE9B,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAI,CAACD,OAAO,EAAE,OAAO,YAAM,CAAC,CAAC;IAC7B,IAAME,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;IAC7CF,KAAK,CAACG,SAAS,cAAOP,SAAS,mCAAyBC,EAAE,SAAM;IAChE,IAAMO,KAAK,GAAGH,QAAQ,CAACI,IAAI,CAACC,WAAW,CAACN,KAAK,CAAC;IAC9C,OAAO,YAAM;MACXC,QAAQ,CAACI,IAAI,CAACE,WAAW,CAACH,KAAK,CAAC;IAClC,CAAC;EACH,CAAC,EAAE,CAACR,SAAS,EAAEE,OAAO,EAAED,EAAE,CAAC,CAAC;AAC9B,CAAC;AAAC,eAEaH,kBAAkB;AAAA"}

package/dist/esm/DragAndDrop.js

@@ -10,7 +10,6 @@ import useDragEffect from './utils/useDragEffect';
 import useGeneratedId from './utils/useGeneratedId';
 import useTransitionStyle from './utils/useTransitionStyle';
 import useInitRect from './utils/useInitRect';
-
 /**
  * The container containing one or more lists with draggable nodes.
  */
@@ -26,26 +25,31 @@ const DragAndDrop = ({
 }) => {
   // The user can drag a node between the lists (the Droppable components).
   // 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 listStoreRef = useRef(new ListStore());
 
+  // The class name for a node used to set the transition style
   const generatedId = useGeneratedId();
-  const nodeClassName = useMemo(() => `n${generatedId}`, [generatedId]); // The node that is currently being dragged
+  const nodeClassName = useMemo(() => `n${generatedId}`, [generatedId]);
 
+  // The node that is currently being dragged
   const [draggedNode, setDraggedNode] = useState(null);
   const startNodeRef = useRef(null);
   const [cursorPosition, setCursorPosition] = useState({
     x: 0,
     y: 0
-  }); // Add a new list to the store
+  });
 
+  // Add a new list to the store
   const registerList = useCallback(list => {
     listStoreRef.current.add(list);
-  }, []); // Remove the existing list from the store
+  }, []);
 
+  // Remove the existing list from the store
   const deregisterList = useCallback(id => {
     listStoreRef.current.remove(id);
-  }, []); // Set the style to delay transitions when the node is dragging
+  }, []);
 
+  // Set the style to delay transitions when the node is dragging
   useTransitionStyle({
     className: nodeClassName,
     ms: transitionDelayMs,
@@ -83,8 +87,9 @@ const DragAndDrop = ({
     onDragEnd: dragEndHandler,
     minMouseDistPx,
     longPressMs
-  }); // Handlers that determine whether a user clicks on the node
+  });
 
+  // Handlers that determine whether a user clicks on the node
   const mouseDownHandler = useCallback((e, list, node) => {
     startNodeRef.current = {
       list,
@@ -98,18 +103,21 @@ const DragAndDrop = ({
       node
     };
     onTouchStart(e);
-  }, [onTouchStart]); // Prevent body scrolling when the node is dragging.
-  // It's important to attach the event to the body (not to the document). Otherwise, it won't work in mobile chrome.
+  }, [onTouchStart]);
 
-  usePreventDefaultEvent(document.body, 'touchmove', !!draggedNode); // Implement the drag animation
+  // Prevent body scrolling when the node is dragging.
+  // It's important to attach the event to the body (not to the document). Otherwise, it won't work in mobile chrome.
+  usePreventDefaultEvent(document.body, 'touchmove', !!draggedNode);
 
+  // Implement the drag animation
   useDragEffect({
     draggedNode,
     cursorPosition,
     listStoreRef,
     onDragEnd
-  }); // Auto scroll if the cursor position is located near the border
+  });
 
+  // Auto scroll if the cursor position is located near the border
   useAutoScroll({
     enabled: !!draggedNode,
     distPercent: autoScrollDistPercent,
@@ -140,6 +148,5 @@ const DragAndDrop = ({
     }
   })));
 };
-
 export default DragAndDrop;
 //# sourceMappingURL=DragAndDrop.js.map

package/dist/esm/DragAndDrop.js.map

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

package/dist/esm/Draggable.js

@@ -3,17 +3,16 @@ import useMemoObject from '@os-design/use-memo-object';
 import useDroppable from './utils/useDroppable';
 import useDragAndDrop from './utils/useDragAndDrop';
 import useAppendClassName from './utils/useAppendClassName';
-
 const Draggable = ({
   index,
   id,
   children
 }) => {
   // The reference to the list item
-  const ref = useRef(null); // The reference to the node containing the refs to the prev and next nodes
-
-  const nodeRef = useRef(null); // Additional styles for moving the list item
-
+  const ref = useRef(null);
+  // The reference to the node containing the refs to the prev and next nodes
+  const nodeRef = useRef(null);
+  // Additional styles for moving the list item
   const [style, setStyle] = useState({});
   const {
     nodeClassName
@@ -23,8 +22,9 @@ const Draggable = ({
     deregisterNode,
     onMouseDown,
     onTouchStart
-  } = useDroppable(); // Register the node in the list
+  } = useDroppable();
 
+  // Register the node in the list
   useEffect(() => {
     nodeRef.current = registerNode({
       ref,
@@ -37,10 +37,12 @@ const Draggable = ({
       deregisterNode(nodeRef.current);
       nodeRef.current = null;
     };
-  }, [deregisterNode, id, index, registerNode]); // Set the class name for the node to apply the transition style (see the DragAndDrop container)
+  }, [deregisterNode, id, index, registerNode]);
 
-  useAppendClassName(ref, nodeClassName); // Handlers that determine whether a user clicks on the node
+  // Set the class name for the node to apply the transition style (see the DragAndDrop container)
+  useAppendClassName(ref, nodeClassName);
 
+  // Handlers that determine whether a user clicks on the node
   const mouseDownHandler = useCallback(e => {
     if (!nodeRef.current) return;
     onMouseDown(e, nodeRef.current);
@@ -59,6 +61,5 @@ const Draggable = ({
     handlers
   }));
 };
-
 export default Draggable;
 //# sourceMappingURL=Draggable.js.map

package/dist/esm/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Draggable.js","names":["React","useCallback","useEffect","useRef","useState","useMemoObject","useDroppable","useDragAndDrop","useAppendClassName","Draggable","index","id","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers"],"sources":["../../src/Draggable.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\nimport { Node } from './utils/NodeList';\nimport useDroppable from './utils/useDroppable';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useAppendClassName from './utils/useAppendClassName';\n\nexport interface DraggableHandlers {\n  /**\n   * The handler that should be called when the mouse down event occurs.\n   */\n  onMouseDown: (e: MouseEvent) => void;\n  /**\n   * The handler that should be called when the touch start event occurs.\n   */\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n  /**\n   * The reference to the draggable list item.\n   */\n  ref: RefObject<any>; // eslint-disable-line @typescript-eslint/no-explicit-any\n  /**\n   * Additional styles for moving the list item.\n   */\n  style: CSSProperties;\n  /**\n   * The handlers to catch events when the user starts dragging the list item.\n   */\n  handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n  /**\n   * The index of the draggable node.\n   */\n  index: number;\n  /**\n   * The ID of the draggable node.\n   */\n  id: string;\n  /**\n   * The function that renders the draggable node.\n   */\n  children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, id, children }) => {\n  // The reference to the list item\n  const ref = useRef<HTMLDivElement | null>(null);\n  // The reference to the node containing the refs to the prev and next nodes\n  const nodeRef = useRef<Node>(null);\n  // Additional styles for moving the list item\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  const { nodeClassName } = useDragAndDrop();\n  const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n    useDroppable();\n\n  // Register the node in the list\n  useEffect(() => {\n    nodeRef.current = registerNode({ ref, setStyle, index, id });\n    return () => {\n      if (!nodeRef.current) return;\n      deregisterNode(nodeRef.current);\n      nodeRef.current = null;\n    };\n  }, [deregisterNode, id, index, registerNode]);\n\n  // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n  useAppendClassName(ref, nodeClassName);\n\n  // Handlers that determine whether a user clicks on the node\n  const mouseDownHandler = useCallback(\n    (e: MouseEvent) => {\n      if (!nodeRef.current) return;\n      onMouseDown(e, nodeRef.current);\n    },\n    [onMouseDown]\n  );\n  const touchStartHandler = useCallback(\n    (e: TouchEvent) => {\n      if (!nodeRef.current) return;\n      onTouchStart(e, nodeRef.current);\n    },\n    [onTouchStart]\n  );\n\n  const handlers = useMemoObject({\n    onMouseDown: mouseDownHandler,\n    onTouchStart: touchStartHandler,\n  });\n\n  return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"mappings":"AAAA,OAAOA,KAAP,IAGEC,WAHF,EAIEC,SAJF,EAKEC,MALF,EAMEC,QANF,QASO,OATP;AAUA,OAAOC,aAAP,MAA0B,4BAA1B;AAEA,OAAOC,YAAP,MAAyB,sBAAzB;AACA,OAAOC,cAAP,MAA2B,wBAA3B;AACA,OAAOC,kBAAP,MAA+B,4BAA/B;;AA2CA,MAAMC,SAAmC,GAAG,CAAC;EAAEC,KAAF;EAASC,EAAT;EAAaC;AAAb,CAAD,KAA6B;EACvE;EACA,MAAMC,GAAG,GAAGV,MAAM,CAAwB,IAAxB,CAAlB,CAFuE,CAGvE;;EACA,MAAMW,OAAO,GAAGX,MAAM,CAAO,IAAP,CAAtB,CAJuE,CAKvE;;EACA,MAAM,CAACY,KAAD,EAAQC,QAAR,IAAoBZ,QAAQ,CAAgB,EAAhB,CAAlC;EAEA,MAAM;IAAEa;EAAF,IAAoBV,cAAc,EAAxC;EACA,MAAM;IAAEW,YAAF;IAAgBC,cAAhB;IAAgCC,WAAhC;IAA6CC;EAA7C,IACJf,YAAY,EADd,CATuE,CAYvE;;EACAJ,SAAS,CAAC,MAAM;IACdY,OAAO,CAACQ,OAAR,GAAkBJ,YAAY,CAAC;MAAEL,GAAF;MAAOG,QAAP;MAAiBN,KAAjB;MAAwBC;IAAxB,CAAD,CAA9B;IACA,OAAO,MAAM;MACX,IAAI,CAACG,OAAO,CAACQ,OAAb,EAAsB;MACtBH,cAAc,CAACL,OAAO,CAACQ,OAAT,CAAd;MACAR,OAAO,CAACQ,OAAR,GAAkB,IAAlB;IACD,CAJD;EAKD,CAPQ,EAON,CAACH,cAAD,EAAiBR,EAAjB,EAAqBD,KAArB,EAA4BQ,YAA5B,CAPM,CAAT,CAbuE,CAsBvE;;EACAV,kBAAkB,CAACK,GAAD,EAAMI,aAAN,CAAlB,CAvBuE,CAyBvE;;EACA,MAAMM,gBAAgB,GAAGtB,WAAW,CACjCuB,CAAD,IAAmB;IACjB,IAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;IACtBF,WAAW,CAACI,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAX;EACD,CAJiC,EAKlC,CAACF,WAAD,CALkC,CAApC;EAOA,MAAMK,iBAAiB,GAAGxB,WAAW,CAClCuB,CAAD,IAAmB;IACjB,IAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;IACtBD,YAAY,CAACG,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAZ;EACD,CAJkC,EAKnC,CAACD,YAAD,CALmC,CAArC;EAQA,MAAMK,QAAQ,GAAGrB,aAAa,CAAC;IAC7Be,WAAW,EAAEG,gBADgB;IAE7BF,YAAY,EAAEI;EAFe,CAAD,CAA9B;EAKA,oBAAO,0CAAGb,QAAQ,CAAC;IAAEC,GAAF;IAAOE,KAAP;IAAcW;EAAd,CAAD,CAAX,CAAP;AACD,CA/CD;;AAiDA,eAAejB,SAAf"}
+{"version":3,"file":"Draggable.js","names":["React","useCallback","useEffect","useRef","useState","useMemoObject","useDroppable","useDragAndDrop","useAppendClassName","Draggable","index","id","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers"],"sources":["../../src/Draggable.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\nimport { Node } from './utils/NodeList';\nimport useDroppable from './utils/useDroppable';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useAppendClassName from './utils/useAppendClassName';\n\nexport interface DraggableHandlers {\n  /**\n   * The handler that should be called when the mouse down event occurs.\n   */\n  onMouseDown: (e: MouseEvent) => void;\n  /**\n   * The handler that should be called when the touch start event occurs.\n   */\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n  /**\n   * The reference to the draggable list item.\n   */\n  ref: RefObject<any>; // eslint-disable-line @typescript-eslint/no-explicit-any\n  /**\n   * Additional styles for moving the list item.\n   */\n  style: CSSProperties;\n  /**\n   * The handlers to catch events when the user starts dragging the list item.\n   */\n  handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n  /**\n   * The index of the draggable node.\n   */\n  index: number;\n  /**\n   * The ID of the draggable node.\n   */\n  id: string;\n  /**\n   * The function that renders the draggable node.\n   */\n  children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, id, children }) => {\n  // The reference to the list item\n  const ref = useRef<HTMLDivElement | null>(null);\n  // The reference to the node containing the refs to the prev and next nodes\n  const nodeRef = useRef<Node>(null);\n  // Additional styles for moving the list item\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  const { nodeClassName } = useDragAndDrop();\n  const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n    useDroppable();\n\n  // Register the node in the list\n  useEffect(() => {\n    nodeRef.current = registerNode({ ref, setStyle, index, id });\n    return () => {\n      if (!nodeRef.current) return;\n      deregisterNode(nodeRef.current);\n      nodeRef.current = null;\n    };\n  }, [deregisterNode, id, index, registerNode]);\n\n  // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n  useAppendClassName(ref, nodeClassName);\n\n  // Handlers that determine whether a user clicks on the node\n  const mouseDownHandler = useCallback(\n    (e: MouseEvent) => {\n      if (!nodeRef.current) return;\n      onMouseDown(e, nodeRef.current);\n    },\n    [onMouseDown]\n  );\n  const touchStartHandler = useCallback(\n    (e: TouchEvent) => {\n      if (!nodeRef.current) return;\n      onTouchStart(e, nodeRef.current);\n    },\n    [onTouchStart]\n  );\n\n  const handlers = useMemoObject({\n    onMouseDown: mouseDownHandler,\n    onTouchStart: touchStartHandler,\n  });\n\n  return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"mappings":"AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QAGH,OAAO;AACd,OAAOC,aAAa,MAAM,4BAA4B;AAEtD,OAAOC,YAAY,MAAM,sBAAsB;AAC/C,OAAOC,cAAc,MAAM,wBAAwB;AACnD,OAAOC,kBAAkB,MAAM,4BAA4B;AA2C3D,MAAMC,SAAmC,GAAG,CAAC;EAAEC,KAAK;EAAEC,EAAE;EAAEC;AAAS,CAAC,KAAK;EACvE;EACA,MAAMC,GAAG,GAAGV,MAAM,CAAwB,IAAI,CAAC;EAC/C;EACA,MAAMW,OAAO,GAAGX,MAAM,CAAO,IAAI,CAAC;EAClC;EACA,MAAM,CAACY,KAAK,EAAEC,QAAQ,CAAC,GAAGZ,QAAQ,CAAgB,CAAC,CAAC,CAAC;EAErD,MAAM;IAAEa;EAAc,CAAC,GAAGV,cAAc,EAAE;EAC1C,MAAM;IAAEW,YAAY;IAAEC,cAAc;IAAEC,WAAW;IAAEC;EAAa,CAAC,GAC/Df,YAAY,EAAE;;EAEhB;EACAJ,SAAS,CAAC,MAAM;IACdY,OAAO,CAACQ,OAAO,GAAGJ,YAAY,CAAC;MAAEL,GAAG;MAAEG,QAAQ;MAAEN,KAAK;MAAEC;IAAG,CAAC,CAAC;IAC5D,OAAO,MAAM;MACX,IAAI,CAACG,OAAO,CAACQ,OAAO,EAAE;MACtBH,cAAc,CAACL,OAAO,CAACQ,OAAO,CAAC;MAC/BR,OAAO,CAACQ,OAAO,GAAG,IAAI;IACxB,CAAC;EACH,CAAC,EAAE,CAACH,cAAc,EAAER,EAAE,EAAED,KAAK,EAAEQ,YAAY,CAAC,CAAC;;EAE7C;EACAV,kBAAkB,CAACK,GAAG,EAAEI,aAAa,CAAC;;EAEtC;EACA,MAAMM,gBAAgB,GAAGtB,WAAW,CACjCuB,CAAa,IAAK;IACjB,IAAI,CAACV,OAAO,CAACQ,OAAO,EAAE;IACtBF,WAAW,CAACI,CAAC,EAAEV,OAAO,CAACQ,OAAO,CAAC;EACjC,CAAC,EACD,CAACF,WAAW,CAAC,CACd;EACD,MAAMK,iBAAiB,GAAGxB,WAAW,CAClCuB,CAAa,IAAK;IACjB,IAAI,CAACV,OAAO,CAACQ,OAAO,EAAE;IACtBD,YAAY,CAACG,CAAC,EAAEV,OAAO,CAACQ,OAAO,CAAC;EAClC,CAAC,EACD,CAACD,YAAY,CAAC,CACf;EAED,MAAMK,QAAQ,GAAGrB,aAAa,CAAC;IAC7Be,WAAW,EAAEG,gBAAgB;IAC7BF,YAAY,EAAEI;EAChB,CAAC,CAAC;EAEF,oBAAO,0CAAGb,QAAQ,CAAC;IAAEC,GAAG;IAAEE,KAAK;IAAEW;EAAS,CAAC,CAAC,CAAI;AAClD,CAAC;AAED,eAAejB,SAAS"}

package/dist/esm/Droppable.js

@@ -4,7 +4,6 @@ import NodeList from './utils/NodeList';
 import useDragAndDrop from './utils/useDragAndDrop';
 import { DroppableContext } from './utils/useDroppable';
 import useGeneratedId from './utils/useGeneratedId';
-
 const Droppable = ({
   renderDraggedNode,
   id,
@@ -12,30 +11,33 @@ const Droppable = ({
   children
 }) => {
   // The reference to the list
-  const ref = useRef(null); // The reference to the container inside the virtual list
-
-  const innerRef = useRef(null); // The unique ID of the list. If no ID was specified, the generated one is used.
-
+  const ref = useRef(null);
+  // The reference to the container inside the virtual list
+  const innerRef = useRef(null);
+  // The unique ID of the list. If no ID was specified, the generated one is used.
   const generatedId = useGeneratedId();
-  const droppableId = useMemo(() => id || generatedId, [generatedId, id]); // The reference to the list of nodes
-
+  const droppableId = useMemo(() => id || generatedId, [generatedId, id]);
+  // The reference to the list of nodes
   const listRef = useRef(new NodeList({
     id: droppableId,
     ref,
     innerRef,
     horizontal,
     renderDraggedNode
-  })); // Update the ID of the list if it changes
+  }));
 
+  // Update the ID of the list if it changes
   useEffect(() => {
     listRef.current.id = droppableId;
-  }, [droppableId]); // Update the list orientation if it changes.
-  // There is no need to check the order of the nodes in the list because it will be the same.
+  }, [droppableId]);
 
+  // Update the list orientation if it changes.
+  // There is no need to check the order of the nodes in the list because it will be the same.
   useEffect(() => {
     listRef.current.horizontal = horizontal;
-  }, [horizontal]); // Update the callback that renders the dragged node if it changes
+  }, [horizontal]);
 
+  // Update the callback that renders the dragged node if it changes
   useEffect(() => {
     listRef.current.renderDraggedNode = renderDraggedNode;
   }, [renderDraggedNode]);
@@ -44,8 +46,9 @@ const Droppable = ({
     deregisterList,
     onMouseDown,
     onTouchStart
-  } = useDragAndDrop(); // Register the list in the store
+  } = useDragAndDrop();
 
+  // Register the list in the store
   useEffect(() => {
     registerList(listRef.current);
     const listId = listRef.current.id;
@@ -54,8 +57,9 @@ const Droppable = ({
   const registerNode = useCallback(props => listRef.current.add(props), []);
   const deregisterNode = useCallback(node => {
     listRef.current.remove(node);
-  }, []); // Handlers that determine whether a user clicks on the node
+  }, []);
 
+  // Handlers that determine whether a user clicks on the node
   const mouseDownHandler = useCallback((e, node) => {
     onMouseDown(e, listRef.current, node);
   }, [onMouseDown]);
@@ -75,6 +79,5 @@ const Droppable = ({
     innerRef
   }));
 };
-
 export default Droppable;
 //# sourceMappingURL=Droppable.js.map

package/dist/esm/Droppable.js.map

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

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","DragAndDrop","Droppable","Draggable"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as DragAndDrop } from './DragAndDrop';\nexport { default as Droppable } from './Droppable';\nexport { default as Draggable } from './Draggable';\n\nexport * from './DragAndDrop';\nexport * from './Droppable';\nexport * from './Draggable';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASD,OAAO,IAAIE,SAApB,QAAqC,aAArC;AACA,SAASF,OAAO,IAAIG,SAApB,QAAqC,aAArC;AAEA,cAAc,eAAd;AACA,cAAc,aAAd;AACA,cAAc,aAAd"}
+{"version":3,"file":"index.js","names":["default","DragAndDrop","Droppable","Draggable"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as DragAndDrop } from './DragAndDrop';\nexport { default as Droppable } from './Droppable';\nexport { default as Draggable } from './Draggable';\n\nexport * from './DragAndDrop';\nexport * from './Droppable';\nexport * from './Draggable';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,eAAe;AACtD,SAASD,OAAO,IAAIE,SAAS,QAAQ,aAAa;AAClD,SAASF,OAAO,IAAIG,SAAS,QAAQ,aAAa;AAElD,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,aAAa"}

package/dist/esm/utils/ListStore.js

@@ -6,29 +6,26 @@ class ListStore {
     this.lists = void 0;
     this.lists = [];
   }
+
   /**
    * Adds a new list to the store.
    */
-
-
   add(list) {
     this.lists.push(list);
   }
+
   /**
    * Removes the list from the store.
    */
-
-
   remove(id) {
     const index = this.lists.findIndex(item => item.id === id);
     if (index === -1) return;
     this.lists.splice(index, 1);
   }
+
   /**
    * Returns the list in which the position is located.
    */
-
-
   findByPosition(x, y) {
     return this.lists.find(list => {
       const {
@@ -39,8 +36,6 @@ class ListStore {
       return x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
     });
   }
-
 }
-
 export default ListStore;
 //# sourceMappingURL=ListStore.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListStore.js","names":["ListStore","constructor","lists","add","list","push","remove","id","index","findIndex","item","splice","findByPosition","x","y","find","current","ref","rect","getBoundingClientRect","width","height"],"sources":["../../../src/utils/ListStore.ts"],"sourcesContent":["import NodeList from './NodeList';\n\n/**\n * Stores all the lists where the draggable items is located.\n */\nclass ListStore {\n  private lists: NodeList[];\n\n  public constructor() {\n    this.lists = [];\n  }\n\n  /**\n   * Adds a new list to the store.\n   */\n  public add(list: NodeList) {\n    this.lists.push(list);\n  }\n\n  /**\n   * Removes the list from the store.\n   */\n  public remove(id: string) {\n    const index = this.lists.findIndex((item) => item.id === id);\n    if (index === -1) return;\n    this.lists.splice(index, 1);\n  }\n\n  /**\n   * Returns the list in which the position is located.\n   */\n  public findByPosition(x: number, y: number) {\n    return this.lists.find((list) => {\n      const { current } = list.ref;\n      if (!current) return false;\n      const rect = current.getBoundingClientRect();\n      return (\n        x >= rect.x &&\n        x <= rect.x + rect.width &&\n        y >= rect.y &&\n        y <= rect.y + rect.height\n      );\n    });\n  }\n}\n\nexport default ListStore;\n"],"mappings":"AAEA;AACA;AACA;AACA,MAAMA,SAAN,CAAgB;EAGPC,WAAW,GAAG;IAAA,KAFbC,KAEa;IACnB,KAAKA,KAAL,GAAa,EAAb;EACD;EAED;AACF;AACA;;;EACSC,GAAG,CAACC,IAAD,EAAiB;IACzB,KAAKF,KAAL,CAAWG,IAAX,CAAgBD,IAAhB;EACD;EAED;AACF;AACA;;;EACSE,MAAM,CAACC,EAAD,EAAa;IACxB,MAAMC,KAAK,GAAG,KAAKN,KAAL,CAAWO,SAAX,CAAsBC,IAAD,IAAUA,IAAI,CAACH,EAAL,KAAYA,EAA3C,CAAd;IACA,IAAIC,KAAK,KAAK,CAAC,CAAf,EAAkB;IAClB,KAAKN,KAAL,CAAWS,MAAX,CAAkBH,KAAlB,EAAyB,CAAzB;EACD;EAED;AACF;AACA;;;EACSI,cAAc,CAACC,CAAD,EAAYC,CAAZ,EAAuB;IAC1C,OAAO,KAAKZ,KAAL,CAAWa,IAAX,CAAiBX,IAAD,IAAU;MAC/B,MAAM;QAAEY;MAAF,IAAcZ,IAAI,CAACa,GAAzB;MACA,IAAI,CAACD,OAAL,EAAc,OAAO,KAAP;MACd,MAAME,IAAI,GAAGF,OAAO,CAACG,qBAAR,EAAb;MACA,OACEN,CAAC,IAAIK,IAAI,CAACL,CAAV,IACAA,CAAC,IAAIK,IAAI,CAACL,CAAL,GAASK,IAAI,CAACE,KADnB,IAEAN,CAAC,IAAII,IAAI,CAACJ,CAFV,IAGAA,CAAC,IAAII,IAAI,CAACJ,CAAL,GAASI,IAAI,CAACG,MAJrB;IAMD,CAVM,CAAP;EAWD;;AAtCa;;AAyChB,eAAerB,SAAf"}
+{"version":3,"file":"ListStore.js","names":["ListStore","constructor","lists","add","list","push","remove","id","index","findIndex","item","splice","findByPosition","x","y","find","current","ref","rect","getBoundingClientRect","width","height"],"sources":["../../../src/utils/ListStore.ts"],"sourcesContent":["import NodeList from './NodeList';\n\n/**\n * Stores all the lists where the draggable items is located.\n */\nclass ListStore {\n  private lists: NodeList[];\n\n  public constructor() {\n    this.lists = [];\n  }\n\n  /**\n   * Adds a new list to the store.\n   */\n  public add(list: NodeList) {\n    this.lists.push(list);\n  }\n\n  /**\n   * Removes the list from the store.\n   */\n  public remove(id: string) {\n    const index = this.lists.findIndex((item) => item.id === id);\n    if (index === -1) return;\n    this.lists.splice(index, 1);\n  }\n\n  /**\n   * Returns the list in which the position is located.\n   */\n  public findByPosition(x: number, y: number) {\n    return this.lists.find((list) => {\n      const { current } = list.ref;\n      if (!current) return false;\n      const rect = current.getBoundingClientRect();\n      return (\n        x >= rect.x &&\n        x <= rect.x + rect.width &&\n        y >= rect.y &&\n        y <= rect.y + rect.height\n      );\n    });\n  }\n}\n\nexport default ListStore;\n"],"mappings":"AAEA;AACA;AACA;AACA,MAAMA,SAAS,CAAC;EAGPC,WAAW,GAAG;IAAA,KAFbC,KAAK;IAGX,IAAI,CAACA,KAAK,GAAG,EAAE;EACjB;;EAEA;AACF;AACA;EACSC,GAAG,CAACC,IAAc,EAAE;IACzB,IAAI,CAACF,KAAK,CAACG,IAAI,CAACD,IAAI,CAAC;EACvB;;EAEA;AACF;AACA;EACSE,MAAM,CAACC,EAAU,EAAE;IACxB,MAAMC,KAAK,GAAG,IAAI,CAACN,KAAK,CAACO,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACH,EAAE,KAAKA,EAAE,CAAC;IAC5D,IAAIC,KAAK,KAAK,CAAC,CAAC,EAAE;IAClB,IAAI,CAACN,KAAK,CAACS,MAAM,CAACH,KAAK,EAAE,CAAC,CAAC;EAC7B;;EAEA;AACF;AACA;EACSI,cAAc,CAACC,CAAS,EAAEC,CAAS,EAAE;IAC1C,OAAO,IAAI,CAACZ,KAAK,CAACa,IAAI,CAAEX,IAAI,IAAK;MAC/B,MAAM;QAAEY;MAAQ,CAAC,GAAGZ,IAAI,CAACa,GAAG;MAC5B,IAAI,CAACD,OAAO,EAAE,OAAO,KAAK;MAC1B,MAAME,IAAI,GAAGF,OAAO,CAACG,qBAAqB,EAAE;MAC5C,OACEN,CAAC,IAAIK,IAAI,CAACL,CAAC,IACXA,CAAC,IAAIK,IAAI,CAACL,CAAC,GAAGK,IAAI,CAACE,KAAK,IACxBN,CAAC,IAAII,IAAI,CAACJ,CAAC,IACXA,CAAC,IAAII,IAAI,CAACJ,CAAC,GAAGI,IAAI,CAACG,MAAM;IAE7B,CAAC,CAAC;EACJ;AACF;AAEA,eAAerB,SAAS"}