@os-design/drag-sort 1.0.0

package/dist/esm/Droppable.js

@@ -0,0 +1,84 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import useMemoObject from '@os-design/use-memo-object';
+import NodeList from './utils/NodeList';
+import useDragAndDrop from './utils/useDragAndDrop';
+import { DroppableContext } from './utils/useDroppable';
+import useGeneratedId from './utils/useGeneratedId';
+
+const Droppable = ({
+  renderDraggedNode,
+  id,
+  horizontal = false,
+  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 generatedId = useGeneratedId(10);
+  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
+
+  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.
+
+  useEffect(() => {
+    listRef.current.horizontal = horizontal;
+  }, [horizontal]); // Update the callback that renders the dragged node if it changes
+
+  useEffect(() => {
+    listRef.current.renderDraggedNode = renderDraggedNode;
+  }, [renderDraggedNode]);
+  const {
+    registerList,
+    deregisterList,
+    onMouseDown,
+    onTouchStart
+  } = useDragAndDrop(); // Register the list in the store
+
+  useEffect(() => {
+    registerList(listRef.current);
+    const listId = listRef.current.id;
+    return () => deregisterList(listId);
+  }, [deregisterList, registerList]);
+  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
+
+  const mouseDownHandler = useCallback((e, node) => {
+    onMouseDown(e, listRef.current, node);
+  }, [onMouseDown]);
+  const touchStartHandler = useCallback((e, node) => {
+    onTouchStart(e, listRef.current, node);
+  }, [onTouchStart]);
+  const droppableContext = useMemoObject({
+    registerNode,
+    deregisterNode,
+    onMouseDown: mouseDownHandler,
+    onTouchStart: touchStartHandler
+  });
+  const renderChildren = useCallback(() => {
+    if (typeof children !== 'function') return children;
+    return children({
+      ref,
+      innerRef
+    });
+  }, [children]);
+  return /*#__PURE__*/React.createElement(DroppableContext.Provider, {
+    value: droppableContext
+  }, renderChildren());
+};
+
+export default Droppable;
+//# sourceMappingURL=Droppable.js.map

package/dist/esm/Droppable.js.map

@@ -0,0 +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","renderChildren"],"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:\n    | React.ReactNode\n    | ((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  const renderChildren = useCallback<() => React.ReactNode>(() => {\n    if (typeof children !== 'function') return children;\n    return (children as Function)({ ref, innerRef });\n  }, [children]);\n\n  return (\n    <DroppableContext.Provider value={droppableContext}>\n      {renderChildren()}\n    </DroppableContext.Provider>\n  );\n};\n\nexport default Droppable;\n"],"file":"Droppable.js"}

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+export { default as DragAndDrop } from './DragAndDrop';
+export { default as Droppable } from './Droppable';
+export { default as Draggable } from './Draggable';
+export * from './DragAndDrop';
+export * from './Droppable';
+export * from './Draggable';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"names":["default","DragAndDrop","Droppable","Draggable"],"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","sourcesContent":["export { default as DragAndDrop } from './DragAndDrop';\nexport { default as Droppable } from './Droppable';\nexport { default as Draggable } from './Draggable';\n\nexport * from './DragAndDrop';\nexport * from './Droppable';\nexport * from './Draggable';\n"],"file":"index.js"}

package/dist/esm/utils/ListStore.js

@@ -0,0 +1,46 @@
+/**
+ * Stores all the lists where the draggable items is located.
+ */
+class ListStore {
+  constructor() {
+    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 {
+        current
+      } = list.ref;
+      if (!current) return true;
+      const rect = current.getBoundingClientRect();
+      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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/ListStore.ts"],"names":["ListStore","constructor","lists","add","list","push","remove","id","index","findIndex","item","splice","findByPosition","x","y","find","current","ref","rect","getBoundingClientRect","width","height"],"mappings":"AAEA;AACA;AACA;AACA,MAAMA,SAAN,CAAgB;AAGPC,EAAAA,WAAW,GAAG;AAAA,SAFbC,KAEa;AACnB,SAAKA,KAAL,GAAa,EAAb;AACD;AAED;AACF;AACA;;;AACSC,EAAAA,GAAG,CAACC,IAAD,EAAiB;AACzB,SAAKF,KAAL,CAAWG,IAAX,CAAgBD,IAAhB;AACD;AAED;AACF;AACA;;;AACSE,EAAAA,MAAM,CAACC,EAAD,EAAa;AACxB,UAAMC,KAAK,GAAG,KAAKN,KAAL,CAAWO,SAAX,CAAsBC,IAAD,IAAUA,IAAI,CAACH,EAAL,KAAYA,EAA3C,CAAd;AACA,QAAIC,KAAK,KAAK,CAAC,CAAf,EAAkB;AAClB,SAAKN,KAAL,CAAWS,MAAX,CAAkBH,KAAlB,EAAyB,CAAzB;AACD;AAED;AACF;AACA;;;AACSI,EAAAA,cAAc,CAACC,CAAD,EAAYC,CAAZ,EAAuB;AAC1C,WAAO,KAAKZ,KAAL,CAAWa,IAAX,CAAiBX,IAAD,IAAU;AAC/B,YAAM;AAAEY,QAAAA;AAAF,UAAcZ,IAAI,CAACa,GAAzB;AACA,UAAI,CAACD,OAAL,EAAc,OAAO,IAAP;AACd,YAAME,IAAI,GAAGF,OAAO,CAACG,qBAAR,EAAb;AACA,aACEN,CAAC,IAAIK,IAAI,CAACL,CAAV,IACAA,CAAC,IAAIK,IAAI,CAACL,CAAL,GAASK,IAAI,CAACE,KADnB,IAEAN,CAAC,IAAII,IAAI,CAACJ,CAFV,IAGAA,CAAC,IAAII,IAAI,CAACJ,CAAL,GAASI,IAAI,CAACG,MAJrB;AAMD,KAVM,CAAP;AAWD;;AAtCa;;AAyChB,eAAerB,SAAf","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 true;\n      const rect = current.getBoundingClientRect();\n      return (\n        x >= rect.x &&\n        x <= rect.x + rect.width &&\n        y >= rect.y &&\n        y <= rect.y + rect.height\n      );\n    });\n  }\n}\n\nexport default ListStore;\n"],"file":"ListStore.js"}

package/dist/esm/utils/NodeList.js

@@ -0,0 +1,207 @@
+/* eslint-disable @typescript-eslint/no-explicit-any,no-param-reassign,prefer-destructuring,no-constant-condition */
+// [prev, next, ref, setStyle, index]
+
+/**
+ * Stores all the draggable items in the list.
+ * The structure of the doubly linked list is used.
+ */
+class NodeList {
+  /**
+   * The ID of the list.
+   */
+
+  /**
+   * The ref to the list.
+   */
+
+  /**
+   * The inner ref to the list.
+   * Used by the virtual list.
+   */
+
+  /**
+   * Whether the list is horizontal.
+   */
+
+  /**
+   * The callback that renders the dragged node.
+   */
+
+  /**
+   * The head of draggable nodes.
+   */
+
+  /**
+   * The tail of draggable nodes.
+   */
+
+  /**
+   * Listeners of node addition events.
+   */
+  constructor(props) {
+    this.id = void 0;
+    this.ref = void 0;
+    this.innerRef = void 0;
+    this.horizontal = void 0;
+    this.renderDraggedNode = void 0;
+    this.head = void 0;
+    this.tail = void 0;
+    this.listeners = void 0;
+    this.id = props.id;
+    this.ref = props.ref;
+    this.innerRef = props.innerRef;
+    this.horizontal = props.horizontal;
+    this.renderDraggedNode = props.renderDraggedNode;
+    this.head = null;
+    this.tail = null;
+    this.listeners = [];
+  }
+
+  getHead() {
+    return this.head;
+  }
+
+  getTail() {
+    return this.tail;
+  }
+  /**
+   * Adds the node to the beginning.
+   * TL: O(1).
+   */
+
+
+  addToTheBeginning(props) {
+    this.head = [null, this.head, props.ref, props.setStyle, props.index];
+    const [, next] = this.head;
+    if (next) next[0] = this.head; // Set the prev cursor of the next element
+
+    if (!this.tail) this.tail = this.head;
+    return this.head;
+  }
+  /**
+   * Adds the node to the end.
+   * TL: O(1).
+   */
+
+
+  addToTheEnd(props) {
+    this.tail = [this.tail, null, props.ref, props.setStyle, props.index];
+    const [prev] = this.tail;
+    if (prev) prev[1] = this.tail; // Set the next cursor of the prev element
+
+    if (!this.head) this.head = this.tail;
+    return this.tail;
+  }
+  /**
+   * Adds the node after the specified one.
+   * TL: O(1).
+   */
+
+
+  static addAfter(node, props) {
+    node[1] = [node, node[1], props.ref, props.setStyle, props.index];
+    if (node[1][1]) node[1][1][0] = node[1];
+    return node[1];
+  }
+  /**
+   * Adds a new node depends on its position.
+   * Called when a new node is mounted.
+   * TL: O(1) – add to the beginning or to the end, O(n) – add to the middle.
+   */
+
+
+  add(props) {
+    const {
+      index
+    } = props; // Run listeners
+
+    this.listeners.forEach(listener => listener(props)); // Add the first node to the beginning
+
+    if (!this.head || !this.tail) {
+      return this.addToTheBeginning(props);
+    } // Add the node to the beginning if it is located above the first one
+
+
+    const [,,,, headIndex] = this.head;
+
+    if (index < headIndex) {
+      return this.addToTheBeginning(props);
+    } // Add the node to the end if it is located below the last one
+
+
+    const [,,,, tailIndex] = this.tail;
+
+    if (index === tailIndex) {
+      // The tail is the blank node
+      const [prev] = this.tail;
+
+      if (prev) {
+        this.tail[4] += 1;
+        return NodeList.addAfter(prev, props);
+      }
+    }
+
+    if (index > tailIndex) {
+      return this.addToTheEnd(props);
+    } // Add the node after the one that is located above the current one
+
+
+    let node = this.head;
+
+    while (true) {
+      const [, next] = node;
+      if (!next) break;
+      const [,,,, nextIndex] = next;
+      if (index < nextIndex) break;
+      node = next;
+    }
+
+    return NodeList.addAfter(node, props);
+  }
+  /**
+   * Removes the existing node.
+   * Called when the node is unmounted.
+   * TL: O(1).
+   */
+
+
+  remove(node) {
+    const [prev, next] = node;
+
+    if (!prev && !next) {
+      this.head = null;
+      this.tail = null;
+      return;
+    }
+
+    if (!prev && next) {
+      next[0] = null;
+      this.head = next;
+      return;
+    }
+
+    if (prev && !next) {
+      prev[1] = null;
+      this.tail = prev;
+      return;
+    }
+
+    if (prev && next) {
+      prev[1] = next;
+      next[0] = prev;
+    }
+  }
+
+  addListener(callback) {
+    this.listeners.push(callback);
+  }
+
+  removeListener(callback) {
+    const index = this.listeners.findIndex(listener => listener === callback);
+    this.listeners.splice(index, 1);
+  }
+
+}
+
+export default NodeList;
+//# sourceMappingURL=NodeList.js.map

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

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

package/dist/esm/utils/getElementOffset.js

@@ -0,0 +1,19 @@
+const getElementOffset = element => {
+  let offsetLeft = 0;
+  let offsetTop = 0;
+  let el = element;
+
+  while (el) {
+    offsetLeft += el.offsetLeft;
+    offsetTop += el.offsetTop;
+    el = el.offsetParent;
+  }
+
+  return {
+    offsetLeft,
+    offsetTop
+  };
+};
+
+export default getElementOffset;
+//# sourceMappingURL=getElementOffset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getElementOffset.ts"],"names":["getElementOffset","element","offsetLeft","offsetTop","el","offsetParent"],"mappings":"AAAA,MAAMA,gBAAgB,GAAIC,OAAD,IAA0B;AACjD,MAAIC,UAAU,GAAG,CAAjB;AACA,MAAIC,SAAS,GAAG,CAAhB;AACA,MAAIC,EAAsB,GAAGH,OAA7B;;AACA,SAAOG,EAAP,EAAW;AACTF,IAAAA,UAAU,IAAIE,EAAE,CAACF,UAAjB;AACAC,IAAAA,SAAS,IAAIC,EAAE,CAACD,SAAhB;AACAC,IAAAA,EAAE,GAAGA,EAAE,CAACC,YAAR;AACD;;AACD,SAAO;AAAEH,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAAP;AACD,CAVD;;AAYA,eAAeH,gBAAf","sourcesContent":["const getElementOffset = (element: HTMLElement) => {\n  let offsetLeft = 0;\n  let offsetTop = 0;\n  let el: HTMLElement | null = element;\n  while (el) {\n    offsetLeft += el.offsetLeft;\n    offsetTop += el.offsetTop;\n    el = el.offsetParent as HTMLElement;\n  }\n  return { offsetLeft, offsetTop };\n};\n\nexport default getElementOffset;\n"],"file":"getElementOffset.js"}

package/dist/esm/utils/getElementScroll.js

@@ -0,0 +1,19 @@
+const getElementScroll = element => {
+  let scrollLeft = 0;
+  let scrollTop = 0;
+  let el = element;
+
+  while (el) {
+    scrollLeft += el.scrollLeft;
+    scrollTop += el.scrollTop;
+    el = el.parentElement;
+  }
+
+  return {
+    scrollLeft,
+    scrollTop
+  };
+};
+
+export default getElementScroll;
+//# sourceMappingURL=getElementScroll.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getElementScroll.ts"],"names":["getElementScroll","element","scrollLeft","scrollTop","el","parentElement"],"mappings":"AAAA,MAAMA,gBAAgB,GAAIC,OAAD,IAA0B;AACjD,MAAIC,UAAU,GAAG,CAAjB;AACA,MAAIC,SAAS,GAAG,CAAhB;AACA,MAAIC,EAAsB,GAAGH,OAA7B;;AACA,SAAOG,EAAP,EAAW;AACTF,IAAAA,UAAU,IAAIE,EAAE,CAACF,UAAjB;AACAC,IAAAA,SAAS,IAAIC,EAAE,CAACD,SAAhB;AACAC,IAAAA,EAAE,GAAGA,EAAE,CAACC,aAAR;AACD;;AACD,SAAO;AAAEH,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAAP;AACD,CAVD;;AAYA,eAAeH,gBAAf","sourcesContent":["const getElementScroll = (element: HTMLElement) => {\n  let scrollLeft = 0;\n  let scrollTop = 0;\n  let el: HTMLElement | null = element;\n  while (el) {\n    scrollLeft += el.scrollLeft;\n    scrollTop += el.scrollTop;\n    el = el.parentElement;\n  }\n  return { scrollLeft, scrollTop };\n};\n\nexport default getElementScroll;\n"],"file":"getElementScroll.js"}

package/dist/esm/utils/getNodeRect.js

@@ -0,0 +1,36 @@
+import getElementScroll from './getElementScroll';
+import getElementOffset from './getElementOffset';
+/**
+ * Computes the bounds of the existing node without considering transforms.
+ */
+
+const getNodeRect = ref => {
+  if (!ref.current) return null;
+  const parent = ref.current.parentElement;
+  const {
+    width,
+    height
+  } = ref.current.getBoundingClientRect();
+  const {
+    offsetLeft,
+    offsetTop
+  } = getElementOffset(ref.current);
+  const {
+    scrollLeft,
+    scrollTop
+  } = parent ? getElementScroll(parent) : {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const left = offsetLeft - scrollLeft;
+  const top = offsetTop - scrollTop;
+  return {
+    left,
+    top,
+    right: left + width,
+    bottom: top + height
+  };
+};
+
+export default getNodeRect;
+//# sourceMappingURL=getNodeRect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getNodeRect.ts"],"names":["getElementScroll","getElementOffset","getNodeRect","ref","current","parent","parentElement","width","height","getBoundingClientRect","offsetLeft","offsetTop","scrollLeft","scrollTop","left","top","right","bottom"],"mappings":"AACA,OAAOA,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AAEA;AACA;AACA;;AACA,MAAMC,WAAW,GAAIC,GAAD,IAAiC;AACnD,MAAI,CAACA,GAAG,CAACC,OAAT,EAAkB,OAAO,IAAP;AAElB,QAAMC,MAAM,GAAGF,GAAG,CAACC,OAAJ,CAAYE,aAA3B;AACA,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBL,GAAG,CAACC,OAAJ,CAAYK,qBAAZ,EAA1B;AACA,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA4BV,gBAAgB,CAACE,GAAG,CAACC,OAAL,CAAlD;AACA,QAAM;AAAEQ,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA4BR,MAAM,GACpCL,gBAAgB,CAACK,MAAD,CADoB,GAEpC;AAAEO,IAAAA,UAAU,EAAE,CAAd;AAAiBC,IAAAA,SAAS,EAAE;AAA5B,GAFJ;AAIA,QAAMC,IAAI,GAAGJ,UAAU,GAAGE,UAA1B;AACA,QAAMG,GAAG,GAAGJ,SAAS,GAAGE,SAAxB;AAEA,SAAO;AACLC,IAAAA,IADK;AAELC,IAAAA,GAFK;AAGLC,IAAAA,KAAK,EAAEF,IAAI,GAAGP,KAHT;AAILU,IAAAA,MAAM,EAAEF,GAAG,GAAGP;AAJT,GAAP;AAMD,CAnBD;;AAqBA,eAAeN,WAAf","sourcesContent":["import { RefObject } from 'react';\nimport getElementScroll from './getElementScroll';\nimport getElementOffset from './getElementOffset';\n\n/**\n * Computes the bounds of the existing node without considering transforms.\n */\nconst getNodeRect = (ref: RefObject<HTMLElement>) => {\n  if (!ref.current) return null;\n\n  const parent = ref.current.parentElement;\n  const { width, height } = ref.current.getBoundingClientRect();\n  const { offsetLeft, offsetTop } = getElementOffset(ref.current);\n  const { scrollLeft, scrollTop } = parent\n    ? getElementScroll(parent)\n    : { scrollLeft: 0, scrollTop: 0 };\n\n  const left = offsetLeft - scrollLeft;\n  const top = offsetTop - scrollTop;\n\n  return {\n    left,\n    top,\n    right: left + width,\n    bottom: top + height,\n  };\n};\n\nexport default getNodeRect;\n"],"file":"getNodeRect.js"}

package/dist/esm/utils/useAppendClassName.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+/**
+ * Adds a new class name to the element.
+ */
+
+const useAppendClassName = (ref, className) => {
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return () => {};
+    const initClassName = element.className;
+    element.className = `${initClassName} ${className}`.trim();
+    return () => {
+      element.className = initClassName;
+    };
+  }, [className, ref]);
+};
+
+export default useAppendClassName;
+//# sourceMappingURL=useAppendClassName.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useAppendClassName.ts"],"names":["useEffect","useAppendClassName","ref","className","element","current","initClassName","trim"],"mappings":"AAAA,SAAoBA,SAApB,QAAqC,OAArC;AAEA;AACA;AACA;;AACA,MAAMC,kBAAkB,GAAG,CAACC,GAAD,EAA8BC,SAA9B,KAAoD;AAC7EH,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMI,OAAO,GAAGF,GAAG,CAACG,OAApB;AACA,QAAI,CAACD,OAAL,EAAc,OAAO,MAAM,CAAE,CAAf;AAEd,UAAME,aAAa,GAAGF,OAAO,CAACD,SAA9B;AACAC,IAAAA,OAAO,CAACD,SAAR,GAAqB,GAAEG,aAAc,IAAGH,SAAU,EAA9B,CAAgCI,IAAhC,EAApB;AAEA,WAAO,MAAM;AACXH,MAAAA,OAAO,CAACD,SAAR,GAAoBG,aAApB;AACD,KAFD;AAGD,GAVQ,EAUN,CAACH,SAAD,EAAYD,GAAZ,CAVM,CAAT;AAWD,CAZD;;AAcA,eAAeD,kBAAf","sourcesContent":["import { RefObject, useEffect } from 'react';\n\n/**\n * Adds a new class name to the element.\n */\nconst useAppendClassName = (ref: RefObject<HTMLElement>, className: string) => {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return () => {};\n\n    const initClassName = element.className;\n    element.className = `${initClassName} ${className}`.trim();\n\n    return () => {\n      element.className = initClassName;\n    };\n  }, [className, ref]);\n};\n\nexport default useAppendClassName;\n"],"file":"useAppendClassName.js"}

package/dist/esm/utils/useBlankNode.js

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Appends the blank node to the list to increase the height of it.
+ * Used when the dragged node is located inside another list.
+ */
+const useBlankNode = props => {
+  const {
+    draggedNode,
+    targetList,
+    initDraggedNodeRect
+  } = props;
+  const initDraggedNodeRectRef = useRef(initDraggedNodeRect);
+  const blankNode = useRef(null);
+  useEffect(() => {
+    initDraggedNodeRectRef.current = initDraggedNodeRect;
+  }, [initDraggedNodeRect]);
+  useEffect(() => {
+    if (!draggedNode || !targetList || !targetList.ref.current || draggedNode.list === targetList || !initDraggedNodeRectRef.current) {
+      return;
+    } // Create a new blank div
+
+
+    const {
+      initWidth,
+      initHeight
+    } = initDraggedNodeRectRef.current;
+    const div = document.createElement('div');
+    div.style.width = `${initWidth}px`;
+    div.style.height = `${initHeight}px`;
+    div.style.minWidth = `${initWidth}px`;
+    div.style.minHeight = `${initHeight}px`;
+    let parent = targetList.ref.current;
+    const innerList = targetList.innerRef.current; // The inner ref used only in the virtual list
+
+    if (innerList) {
+      const {
+        width,
+        height
+      } = innerList.getBoundingClientRect();
+      div.style.position = 'absolute';
+      div.style.left = targetList.horizontal ? `${width}px` : '0px';
+      div.style.top = targetList.horizontal ? '0px' : `${height}px`;
+      parent = innerList;
+    } // Append the blank div to increase the height of the list
+
+
+    parent.appendChild(div); // Add the blank node to the node list
+
+    const tail = targetList.getTail();
+    blankNode.current = {
+      list: targetList,
+      node: targetList.add({
+        ref: {
+          current: div
+        },
+        setStyle: () => {},
+        index: tail ? tail[4] + 1 : 0
+      })
+    };
+  }, [draggedNode, targetList]);
+  const removeBlankNode = useCallback(() => {
+    const blank = blankNode.current;
+    if (!blank) return;
+    blankNode.current = null;
+    blank.list.remove(blank.node);
+    const [,, blankNodeRef] = blank.node;
+    if (!blank.list.ref.current || !blankNodeRef.current) return;
+    const parent = blankNodeRef.current.parentElement;
+    if (parent) parent.removeChild(blankNodeRef.current);
+  }, []); // Remove the blank node if the dragged node has been dropped
+
+  useEffect(() => {
+    if (!draggedNode) return () => {};
+    return () => removeBlankNode();
+  }, [draggedNode, removeBlankNode]);
+  return removeBlankNode;
+};
+
+export default useBlankNode;
+//# sourceMappingURL=useBlankNode.js.map

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

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

package/dist/esm/utils/useDragAndDrop.js

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+export const DragAndDropContext = /*#__PURE__*/React.createContext({
+  registerList: () => {},
+  deregisterList: () => {},
+  onMouseDown: () => {},
+  onTouchStart: () => {},
+  nodeClassName: ''
+});
+
+const useDragAndDrop = () => useContext(DragAndDropContext);
+
+export default useDragAndDrop;
+//# sourceMappingURL=useDragAndDrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useDragAndDrop.ts"],"names":["React","useContext","DragAndDropContext","createContext","registerList","deregisterList","onMouseDown","onTouchStart","nodeClassName","useDragAndDrop"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAA0D,OAA1D;AAoBA,OAAO,MAAMC,kBAAkB,gBAAGF,KAAK,CAACG,aAAN,CAA6C;AAC7EC,EAAAA,YAAY,EAAE,MAAM,CAAE,CADuD;AAE7EC,EAAAA,cAAc,EAAE,MAAM,CAAE,CAFqD;AAG7EC,EAAAA,WAAW,EAAE,MAAM,CAAE,CAHwD;AAI7EC,EAAAA,YAAY,EAAE,MAAM,CAAE,CAJuD;AAK7EC,EAAAA,aAAa,EAAE;AAL8D,CAA7C,CAA3B;;AAQP,MAAMC,cAAc,GAAG,MACrBR,UAAU,CAACC,kBAAD,CADZ;;AAGA,eAAeO,cAAf","sourcesContent":["import React, { useContext, MouseEvent, TouchEvent } from 'react';\nimport { Position } from '@os-design/use-drag';\nimport NodeList, { ExistingNode } from './NodeList';\n\nexport interface SetDraggedNodeProps {\n  list: NodeList;\n  node: ExistingNode;\n  position: Position;\n}\n\ntype NodeEventHandler<T> = (e: T, list: NodeList, node: ExistingNode) => void;\n\ninterface DragAndDropContextProps {\n  registerList: (list: NodeList) => void;\n  deregisterList: (id: string) => void;\n  onMouseDown: NodeEventHandler<MouseEvent>;\n  onTouchStart: NodeEventHandler<TouchEvent>;\n  nodeClassName: string;\n}\n\nexport const DragAndDropContext = React.createContext<DragAndDropContextProps>({\n  registerList: () => {},\n  deregisterList: () => {},\n  onMouseDown: () => {},\n  onTouchStart: () => {},\n  nodeClassName: '',\n});\n\nconst useDragAndDrop = (): DragAndDropContextProps =>\n  useContext(DragAndDropContext);\n\nexport default useDragAndDrop;\n"],"file":"useDragAndDrop.js"}