@os-design/drag-sort 1.0.0

package/LICENCE.md

@@ -0,0 +1 @@
+Copyright (c) 2019-present, Ilya Ordin, all rights reserved

package/README.md

@@ -0,0 +1,15 @@
+# @os-design/drag-sort [![NPM version](https://img.shields.io/npm/v/@os-design/drag-sort)](https://yarnpkg.com/package/@os-design/drag-sort) [![BundlePhobia](https://img.shields.io/bundlephobia/minzip/@os-design/drag-sort)](https://bundlephobia.com/result?p=@os-design/drag-sort)
+
+Drag and drop for lists. Support dragging items between different lists.
+
+## Installation
+
+Install the package using the following command:
+
+```
+yarn add @os-design/drag-sort
+```
+
+---
+
+See all the features in the [Storybook](https://os-team.gitlab.io/libs/os-design/).

package/dist/cjs/DragAndDrop.js

@@ -0,0 +1,197 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _usePreventDefaultEvent = _interopRequireDefault(require("@os-design/use-prevent-default-event"));
+
+var _useMemoObject = _interopRequireDefault(require("@os-design/use-memo-object"));
+
+var _useDrag2 = _interopRequireDefault(require("@os-design/use-drag"));
+
+var _portal = _interopRequireDefault(require("@os-design/portal"));
+
+var _useAutoScroll = _interopRequireDefault(require("@os-design/use-auto-scroll"));
+
+var _useDragAndDrop = require("./utils/useDragAndDrop");
+
+var _ListStore = _interopRequireDefault(require("./utils/ListStore"));
+
+var _useDragEffect = _interopRequireDefault(require("./utils/useDragEffect"));
+
+var _useGeneratedId = _interopRequireDefault(require("./utils/useGeneratedId"));
+
+var _useTransitionStyle = _interopRequireDefault(require("./utils/useTransitionStyle"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+/**
+ * The container containing one or more lists with draggable nodes.
+ */
+var DragAndDrop = function DragAndDrop(_ref) {
+  var draggedNodeContainer = _ref.draggedNodeContainer,
+      _ref$minMouseDistPx = _ref.minMouseDistPx,
+      minMouseDistPx = _ref$minMouseDistPx === void 0 ? 10 : _ref$minMouseDistPx,
+      _ref$longPressMs = _ref.longPressMs,
+      longPressMs = _ref$longPressMs === void 0 ? 500 : _ref$longPressMs,
+      _ref$autoScrollDistPe = _ref.autoScrollDistPercent,
+      autoScrollDistPercent = _ref$autoScrollDistPe === void 0 ? 20 : _ref$autoScrollDistPe,
+      _ref$autoScrollMaxSpe = _ref.autoScrollMaxSpeedPx,
+      autoScrollMaxSpeedPx = _ref$autoScrollMaxSpe === void 0 ? 100 : _ref$autoScrollMaxSpe,
+      _ref$transitionDelayM = _ref.transitionDelayMs,
+      transitionDelayMs = _ref$transitionDelayM === void 0 ? 250 : _ref$transitionDelayM,
+      _ref$onDragEnd = _ref.onDragEnd,
+      onDragEnd = _ref$onDragEnd === void 0 ? function () {} : _ref$onDragEnd,
+      children = _ref.children;
+  // 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.
+  var listStoreRef = (0, _react.useRef)(new _ListStore["default"]()); // The class name for a node used to set the transition style
+
+  var generatedId = (0, _useGeneratedId["default"])(4);
+  var nodeClassName = (0, _react.useMemo)(function () {
+    return "n".concat(generatedId);
+  }, [generatedId]); // The node that is currently being dragged
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      draggedNode = _useState2[0],
+      setDraggedNode = _useState2[1];
+
+  var startNodeRef = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)({
+    x: 0,
+    y: 0
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      cursorPosition = _useState4[0],
+      setCursorPosition = _useState4[1]; // Add a new list to the store
+
+
+  var registerList = (0, _react.useCallback)(function (list) {
+    listStoreRef.current.add(list);
+  }, []); // Remove the existing list from the store
+
+  var deregisterList = (0, _react.useCallback)(function (id) {
+    listStoreRef.current.remove(id);
+  }, []); // Set the style to delay transitions when the node is dragging
+
+  (0, _useTransitionStyle["default"])({
+    className: nodeClassName,
+    ms: transitionDelayMs,
+    enabled: !!draggedNode
+  });
+  var onDragStart = (0, _react.useCallback)(function (pos, startPos) {
+    var startNode = startNodeRef.current;
+    if (!startNode) return;
+
+    var _startNode$node = _slicedToArray(startNode.node, 3),
+        nodeRef = _startNode$node[2];
+
+    if (!nodeRef.current) return;
+    var rect = nodeRef.current.getBoundingClientRect();
+    setCursorPosition(pos);
+    setDraggedNode({
+      list: startNode.list,
+      node: startNode.node,
+      position: {
+        x: startPos.x - rect.x,
+        y: startPos.y - rect.y
+      }
+    });
+    startNodeRef.current = null;
+  }, []);
+  var onDragMove = (0, _react.useCallback)(function (pos) {
+    setCursorPosition(pos);
+  }, []);
+  var dragEndHandler = (0, _react.useCallback)(function () {
+    setDraggedNode(null);
+  }, []);
+
+  var _useDrag = (0, _useDrag2["default"])({
+    onDragStart: onDragStart,
+    onDragMove: onDragMove,
+    onDragEnd: dragEndHandler,
+    minMouseDistPx: minMouseDistPx,
+    longPressMs: longPressMs
+  }),
+      onMouseDown = _useDrag.onMouseDown,
+      onTouchStart = _useDrag.onTouchStart; // Handlers that determine whether a user clicks on the node
+
+
+  var mouseDownHandler = (0, _react.useCallback)(function (e, list, node) {
+    startNodeRef.current = {
+      list: list,
+      node: node
+    };
+    onMouseDown(e);
+  }, [onMouseDown]);
+  var touchStartHandler = (0, _react.useCallback)(function (e, list, node) {
+    startNodeRef.current = {
+      list: list,
+      node: 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.
+
+  (0, _usePreventDefaultEvent["default"])(document.body, 'touchmove', !!draggedNode); // Implement the drag animation
+
+  (0, _useDragEffect["default"])({
+    draggedNode: draggedNode,
+    cursorPosition: cursorPosition,
+    listStoreRef: listStoreRef,
+    onDragEnd: onDragEnd
+  }); // Auto scroll if the cursor position is located near the border
+
+  (0, _useAutoScroll["default"])({
+    enabled: !!draggedNode,
+    distPercent: autoScrollDistPercent,
+    maxSpeedPx: autoScrollMaxSpeedPx
+  });
+  var dragAndDropContext = (0, _useMemoObject["default"])({
+    registerList: registerList,
+    deregisterList: deregisterList,
+    onMouseDown: mouseDownHandler,
+    onTouchStart: touchStartHandler,
+    nodeClassName: nodeClassName
+  });
+  return /*#__PURE__*/_react["default"].createElement(_useDragAndDrop.DragAndDropContext.Provider, {
+    value: dragAndDropContext
+  }, children, draggedNode && /*#__PURE__*/_react["default"].createElement(_portal["default"], {
+    container: draggedNodeContainer
+  }, draggedNode.list.renderDraggedNode({
+    index: draggedNode.node[4],
+    style: {
+      position: 'fixed',
+      left: cursorPosition.x - draggedNode.position.x,
+      top: cursorPosition.y - draggedNode.position.y
+    }
+  })));
+};
+
+var _default = DragAndDrop;
+exports["default"] = _default;
+//# sourceMappingURL=DragAndDrop.js.map

package/dist/cjs/DragAndDrop.js.map

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

package/dist/cjs/Draggable.js

@@ -0,0 +1,97 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMemoObject = _interopRequireDefault(require("@os-design/use-memo-object"));
+
+var _useDroppable2 = _interopRequireDefault(require("./utils/useDroppable"));
+
+var _useDragAndDrop2 = _interopRequireDefault(require("./utils/useDragAndDrop"));
+
+var _useAppendClassName = _interopRequireDefault(require("./utils/useAppendClassName"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 Draggable = function Draggable(_ref) {
+  var index = _ref.index,
+      children = _ref.children;
+  // The reference to the list item
+  var ref = (0, _react.useRef)(null); // The reference to the node containing the refs to the prev and next nodes
+
+  var nodeRef = (0, _react.useRef)(null); // Additional styles for moving the list item
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      style = _useState2[0],
+      setStyle = _useState2[1];
+
+  var _useDragAndDrop = (0, _useDragAndDrop2["default"])(),
+      nodeClassName = _useDragAndDrop.nodeClassName;
+
+  var _useDroppable = (0, _useDroppable2["default"])(),
+      registerNode = _useDroppable.registerNode,
+      deregisterNode = _useDroppable.deregisterNode,
+      onMouseDown = _useDroppable.onMouseDown,
+      onTouchStart = _useDroppable.onTouchStart; // Register the node in the list
+
+
+  (0, _react.useEffect)(function () {
+    nodeRef.current = registerNode({
+      ref: ref,
+      setStyle: setStyle,
+      index: index
+    });
+    return function () {
+      if (!nodeRef.current) return;
+      deregisterNode(nodeRef.current);
+      nodeRef.current = null;
+    };
+  }, [deregisterNode, index, registerNode]); // Set the class name for the node to apply the transition style (see the DragAndDrop container)
+
+  (0, _useAppendClassName["default"])(ref, nodeClassName); // Handlers that determine whether a user clicks on the node
+
+  var mouseDownHandler = (0, _react.useCallback)(function (e) {
+    if (!nodeRef.current) return;
+    onMouseDown(e, nodeRef.current);
+  }, [onMouseDown]);
+  var touchStartHandler = (0, _react.useCallback)(function (e) {
+    if (!nodeRef.current) return;
+    onTouchStart(e, nodeRef.current);
+  }, [onTouchStart]);
+  var handlers = (0, _useMemoObject["default"])({
+    onMouseDown: mouseDownHandler,
+    onTouchStart: touchStartHandler
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children({
+    ref: ref,
+    style: style,
+    handlers: handlers
+  }));
+};
+
+var _default = Draggable;
+exports["default"] = _default;
+//# sourceMappingURL=Draggable.js.map

package/dist/cjs/Draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Draggable.tsx"],"names":["Draggable","index","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers"],"mappings":";;;;;;;;;AAAA;;AAUA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAuCA,IAAMA,SAAmC,GAAG,SAAtCA,SAAsC,OAAyB;AAAA,MAAtBC,KAAsB,QAAtBA,KAAsB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnE;AACA,MAAMC,GAAG,GAAG,mBAA8B,IAA9B,CAAZ,CAFmE,CAGnE;;AACA,MAAMC,OAAO,GAAG,mBAAa,IAAb,CAAhB,CAJmE,CAKnE;;AACA,kBAA0B,qBAAwB,EAAxB,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,wBAA0B,kCAA1B;AAAA,MAAQC,aAAR,mBAAQA,aAAR;;AACA,sBACE,gCADF;AAAA,MAAQC,YAAR,iBAAQA,YAAR;AAAA,MAAsBC,cAAtB,iBAAsBA,cAAtB;AAAA,MAAsCC,WAAtC,iBAAsCA,WAAtC;AAAA,MAAmDC,YAAnD,iBAAmDA,YAAnD,CATmE,CAYnE;;;AACA,wBAAU,YAAM;AACdP,IAAAA,OAAO,CAACQ,OAAR,GAAkBJ,YAAY,CAAC;AAAEL,MAAAA,GAAG,EAAHA,GAAF;AAAOG,MAAAA,QAAQ,EAARA,QAAP;AAAiBL,MAAAA,KAAK,EAALA;AAAjB,KAAD,CAA9B;AACA,WAAO,YAAM;AACX,UAAI,CAACG,OAAO,CAACQ,OAAb,EAAsB;AACtBH,MAAAA,cAAc,CAACL,OAAO,CAACQ,OAAT,CAAd;AACAR,MAAAA,OAAO,CAACQ,OAAR,GAAkB,IAAlB;AACD,KAJD;AAKD,GAPD,EAOG,CAACH,cAAD,EAAiBR,KAAjB,EAAwBO,YAAxB,CAPH,EAbmE,CAsBnE;;AACA,sCAAmBL,GAAnB,EAAwBI,aAAxB,EAvBmE,CAyBnE;;AACA,MAAMM,gBAAgB,GAAG,wBACvB,UAACC,CAAD,EAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBF,IAAAA,WAAW,CAACI,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAX;AACD,GAJsB,EAKvB,CAACF,WAAD,CALuB,CAAzB;AAOA,MAAMK,iBAAiB,GAAG,wBACxB,UAACD,CAAD,EAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBD,IAAAA,YAAY,CAACG,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAZ;AACD,GAJuB,EAKxB,CAACD,YAAD,CALwB,CAA1B;AAQA,MAAMK,QAAQ,GAAG,+BAAc;AAC7BN,IAAAA,WAAW,EAAEG,gBADgB;AAE7BF,IAAAA,YAAY,EAAEI;AAFe,GAAd,CAAjB;AAKA,sBAAO,kEAAGb,QAAQ,CAAC;AAAEC,IAAAA,GAAG,EAAHA,GAAF;AAAOE,IAAAA,KAAK,EAALA,KAAP;AAAcW,IAAAA,QAAQ,EAARA;AAAd,GAAD,CAAX,CAAP;AACD,CA/CD;;eAiDehB,S","sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\nimport { Node } from './utils/NodeList';\nimport useDroppable from './utils/useDroppable';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useAppendClassName from './utils/useAppendClassName';\n\nexport interface DraggableHandlers {\n  /**\n   * The handler that should be called when the mouse down event occurs.\n   */\n  onMouseDown: (e: MouseEvent) => void;\n  /**\n   * The handler that should be called when the touch start event occurs.\n   */\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n  /**\n   * The reference to the draggable list item.\n   */\n  ref: RefObject<HTMLDivElement>;\n  /**\n   * Additional styles for moving the list item.\n   */\n  style: CSSProperties;\n  /**\n   * The handlers to catch events when the user starts dragging the list item.\n   */\n  handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n  /**\n   * The index of the draggable node.\n   */\n  index: number;\n  /**\n   * The function that renders the draggable node.\n   */\n  children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, children }) => {\n  // The reference to the list item\n  const ref = useRef<HTMLDivElement | null>(null);\n  // The reference to the node containing the refs to the prev and next nodes\n  const nodeRef = useRef<Node>(null);\n  // Additional styles for moving the list item\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  const { nodeClassName } = useDragAndDrop();\n  const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n    useDroppable();\n\n  // Register the node in the list\n  useEffect(() => {\n    nodeRef.current = registerNode({ ref, setStyle, index });\n    return () => {\n      if (!nodeRef.current) return;\n      deregisterNode(nodeRef.current);\n      nodeRef.current = null;\n    };\n  }, [deregisterNode, index, registerNode]);\n\n  // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n  useAppendClassName(ref, nodeClassName);\n\n  // Handlers that determine whether a user clicks on the node\n  const mouseDownHandler = useCallback(\n    (e: MouseEvent) => {\n      if (!nodeRef.current) return;\n      onMouseDown(e, nodeRef.current);\n    },\n    [onMouseDown]\n  );\n  const touchStartHandler = useCallback(\n    (e: TouchEvent) => {\n      if (!nodeRef.current) return;\n      onTouchStart(e, nodeRef.current);\n    },\n    [onTouchStart]\n  );\n\n  const handlers = useMemoObject({\n    onMouseDown: mouseDownHandler,\n    onTouchStart: touchStartHandler,\n  });\n\n  return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"file":"Draggable.js"}

package/dist/cjs/Droppable.js

@@ -0,0 +1,112 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMemoObject = _interopRequireDefault(require("@os-design/use-memo-object"));
+
+var _NodeList = _interopRequireDefault(require("./utils/NodeList"));
+
+var _useDragAndDrop2 = _interopRequireDefault(require("./utils/useDragAndDrop"));
+
+var _useDroppable = require("./utils/useDroppable");
+
+var _useGeneratedId = _interopRequireDefault(require("./utils/useGeneratedId"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Droppable = function Droppable(_ref) {
+  var renderDraggedNode = _ref.renderDraggedNode,
+      id = _ref.id,
+      _ref$horizontal = _ref.horizontal,
+      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
+      children = _ref.children;
+  // The reference to the list
+  var ref = (0, _react.useRef)(null); // The reference to the container inside the virtual list
+
+  var innerRef = (0, _react.useRef)(null); // The unique ID of the list. If no ID was specified, the generated one is used.
+
+  var generatedId = (0, _useGeneratedId["default"])(10);
+  var droppableId = (0, _react.useMemo)(function () {
+    return id || generatedId;
+  }, [generatedId, id]); // The reference to the list of nodes
+
+  var listRef = (0, _react.useRef)(new _NodeList["default"]({
+    id: droppableId,
+    ref: ref,
+    innerRef: innerRef,
+    horizontal: horizontal,
+    renderDraggedNode: renderDraggedNode
+  })); // Update the ID of the list if it changes
+
+  (0, _react.useEffect)(function () {
+    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.
+
+  (0, _react.useEffect)(function () {
+    listRef.current.horizontal = horizontal;
+  }, [horizontal]); // Update the callback that renders the dragged node if it changes
+
+  (0, _react.useEffect)(function () {
+    listRef.current.renderDraggedNode = renderDraggedNode;
+  }, [renderDraggedNode]);
+
+  var _useDragAndDrop = (0, _useDragAndDrop2["default"])(),
+      registerList = _useDragAndDrop.registerList,
+      deregisterList = _useDragAndDrop.deregisterList,
+      onMouseDown = _useDragAndDrop.onMouseDown,
+      onTouchStart = _useDragAndDrop.onTouchStart; // Register the list in the store
+
+
+  (0, _react.useEffect)(function () {
+    registerList(listRef.current);
+    var listId = listRef.current.id;
+    return function () {
+      return deregisterList(listId);
+    };
+  }, [deregisterList, registerList]);
+  var registerNode = (0, _react.useCallback)(function (props) {
+    return listRef.current.add(props);
+  }, []);
+  var deregisterNode = (0, _react.useCallback)(function (node) {
+    listRef.current.remove(node);
+  }, []); // Handlers that determine whether a user clicks on the node
+
+  var mouseDownHandler = (0, _react.useCallback)(function (e, node) {
+    onMouseDown(e, listRef.current, node);
+  }, [onMouseDown]);
+  var touchStartHandler = (0, _react.useCallback)(function (e, node) {
+    onTouchStart(e, listRef.current, node);
+  }, [onTouchStart]);
+  var droppableContext = (0, _useMemoObject["default"])({
+    registerNode: registerNode,
+    deregisterNode: deregisterNode,
+    onMouseDown: mouseDownHandler,
+    onTouchStart: touchStartHandler
+  });
+  var renderChildren = (0, _react.useCallback)(function () {
+    if (typeof children !== 'function') return children;
+    return children({
+      ref: ref,
+      innerRef: innerRef
+    });
+  }, [children]);
+  return /*#__PURE__*/_react["default"].createElement(_useDroppable.DroppableContext.Provider, {
+    value: droppableContext
+  }, renderChildren());
+};
+
+var _default = Droppable;
+exports["default"] = _default;
+//# sourceMappingURL=Droppable.js.map

package/dist/cjs/Droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Droppable.tsx"],"names":["Droppable","renderDraggedNode","id","horizontal","children","ref","innerRef","generatedId","droppableId","listRef","NodeList","current","registerList","deregisterList","onMouseDown","onTouchStart","listId","registerNode","props","add","deregisterNode","node","remove","mouseDownHandler","e","touchStartHandler","droppableContext","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/cjs/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  DragAndDrop: true,
+  Droppable: true,
+  Draggable: true
+};
+Object.defineProperty(exports, "DragAndDrop", {
+  enumerable: true,
+  get: function get() {
+    return _DragAndDrop["default"];
+  }
+});
+Object.defineProperty(exports, "Draggable", {
+  enumerable: true,
+  get: function get() {
+    return _Draggable["default"];
+  }
+});
+Object.defineProperty(exports, "Droppable", {
+  enumerable: true,
+  get: function get() {
+    return _Droppable["default"];
+  }
+});
+
+var _DragAndDrop = _interopRequireWildcard(require("./DragAndDrop"));
+
+Object.keys(_DragAndDrop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DragAndDrop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DragAndDrop[key];
+    }
+  });
+});
+
+var _Droppable = _interopRequireWildcard(require("./Droppable"));
+
+Object.keys(_Droppable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Droppable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Droppable[key];
+    }
+  });
+});
+
+var _Draggable = _interopRequireWildcard(require("./Draggable"));
+
+Object.keys(_Draggable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Draggable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Draggable[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

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

package/dist/cjs/utils/ListStore.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+/**
+ * Stores all the lists where the draggable items is located.
+ */
+var ListStore = /*#__PURE__*/function () {
+  function ListStore() {
+    _classCallCheck(this, ListStore);
+
+    this.lists = void 0;
+    this.lists = [];
+  }
+  /**
+   * Adds a new list to the store.
+   */
+
+
+  _createClass(ListStore, [{
+    key: "add",
+    value: function add(list) {
+      this.lists.push(list);
+    }
+    /**
+     * Removes the list from the store.
+     */
+
+  }, {
+    key: "remove",
+    value: function remove(id) {
+      var index = this.lists.findIndex(function (item) {
+        return item.id === id;
+      });
+      if (index === -1) return;
+      this.lists.splice(index, 1);
+    }
+    /**
+     * Returns the list in which the position is located.
+     */
+
+  }, {
+    key: "findByPosition",
+    value: function findByPosition(x, y) {
+      return this.lists.find(function (list) {
+        var current = list.ref.current;
+        if (!current) return true;
+        var rect = current.getBoundingClientRect();
+        return x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
+      });
+    }
+  }]);
+
+  return ListStore;
+}();
+
+var _default = ListStore;
+exports["default"] = _default;
+//# sourceMappingURL=ListStore.js.map

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

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