@os-design/drag-sort 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useGetNodeStyle.ts"],"names":["useGetNodeStyle","size","sizeRef","current","type","horizontal","translateFn","sizeProp","sign","style","transform"],"mappings":";;;;;;;AAAA;;AAYA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,IAAD,EAA4C;AAClE,MAAMC,OAAO,GAAG,mBAAOD,IAAP,CAAhB;AAEA,wBAAU,YAAM;AACdC,IAAAA,OAAO,CAACC,OAAR,GAAkBF,IAAlB;AACD,GAFD,EAEG,CAACA,IAAD,CAFH;AAIA,SAAO,wBAA6B,UAACG,IAAD,EAAOC,UAAP,EAAsB;AACxD,QAAID,IAAI,KAAK,MAAT,IAAmB,CAACF,OAAO,CAACC,OAAhC,EAAyC,OAAO,EAAP;AAEzC,QAAMG,WAAW,GAAGD,UAAU,GAAG,YAAH,GAAkB,YAAhD;AACA,QAAME,QAAQ,GAAGF,UAAU,GAAG,WAAH,GAAiB,YAA5C;AACA,QAAMG,IAAI,GAAGJ,IAAI,KAAK,MAAT,GAAkB,CAAlB,GAAsB,CAAC,CAApC;AAEA,QAAMK,KAAoB,GAAG,EAA7B;AACAA,IAAAA,KAAK,CAACC,SAAN,aAAqBJ,WAArB,cAAoCE,IAAI,GAAGN,OAAO,CAACC,OAAR,CAAgBI,QAAhB,CAA3C;AAEA,WAAOE,KAAP;AACD,GAXM,EAWJ,EAXI,CAAP;AAYD,CAnBD;;eAqBeT,e","sourcesContent":["import { CSSProperties, useCallback, useEffect, useRef } from 'react';\n\ninterface InitSize {\n  initWidth: number;\n  initHeight: number;\n}\n\nexport type NodeStyleGetter = (\n  type: 'up' | 'down' | 'init',\n  horizontal: boolean\n) => CSSProperties;\n\nconst useGetNodeStyle = (size: InitSize | null): NodeStyleGetter => {\n  const sizeRef = useRef(size);\n\n  useEffect(() => {\n    sizeRef.current = size;\n  }, [size]);\n\n  return useCallback<NodeStyleGetter>((type, horizontal) => {\n    if (type === 'init' || !sizeRef.current) return {};\n\n    const translateFn = horizontal ? 'translateX' : 'translateY';\n    const sizeProp = horizontal ? 'initWidth' : 'initHeight';\n    const sign = type === 'down' ? 1 : -1;\n\n    const style: CSSProperties = {};\n    style.transform = `${translateFn}(${sign * sizeRef.current[sizeProp]}px)`;\n\n    return style;\n  }, []);\n};\n\nexport default useGetNodeStyle;\n"],"file":"useGetNodeStyle.js"}

package/dist/cjs/utils/useInitRect.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var useInitRect = function useInitRect(ref) {
+  return (0, _react.useMemo)(function () {
+    if (!ref || !ref.current) return null;
+    var rect = ref.current.getBoundingClientRect();
+    return {
+      initX: rect.x,
+      initY: rect.y,
+      initWidth: rect.width,
+      initHeight: rect.height
+    };
+  }, [ref]);
+};
+
+var _default = useInitRect;
+exports["default"] = _default;
+//# sourceMappingURL=useInitRect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useInitRect.ts"],"names":["useInitRect","ref","current","rect","getBoundingClientRect","initX","x","initY","y","initWidth","width","initHeight","height"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,GAAD;AAAA,SAClB,oBAAQ,YAAM;AACZ,QAAI,CAACA,GAAD,IAAQ,CAACA,GAAG,CAACC,OAAjB,EAA0B,OAAO,IAAP;AAC1B,QAAMC,IAAI,GAAGF,GAAG,CAACC,OAAJ,CAAYE,qBAAZ,EAAb;AACA,WAAO;AACLC,MAAAA,KAAK,EAAEF,IAAI,CAACG,CADP;AAELC,MAAAA,KAAK,EAAEJ,IAAI,CAACK,CAFP;AAGLC,MAAAA,SAAS,EAAEN,IAAI,CAACO,KAHX;AAILC,MAAAA,UAAU,EAAER,IAAI,CAACS;AAJZ,KAAP;AAMD,GATD,EASG,CAACX,GAAD,CATH,CADkB;AAAA,CAApB;;eAYeD,W","sourcesContent":["import { RefObject, useMemo } from 'react';\n\nconst useInitRect = (ref?: RefObject<HTMLElement>) =>\n  useMemo(() => {\n    if (!ref || !ref.current) return null;\n    const rect = ref.current.getBoundingClientRect();\n    return {\n      initX: rect.x,\n      initY: rect.y,\n      initWidth: rect.width,\n      initHeight: rect.height,\n    };\n  }, [ref]);\n\nexport default useInitRect;\n"],"file":"useInitRect.js"}

package/dist/cjs/utils/useInitScrollOffset.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _getElementScroll = _interopRequireDefault(require("./getElementScroll"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var useInitScrollOffset = function useInitScrollOffset(ref) {
+  return (0, _react.useMemo)(function () {
+    if (!ref || !ref.current) return null;
+    var scrollOffset = (0, _getElementScroll["default"])(ref.current);
+    return {
+      initScrollLeft: scrollOffset.scrollLeft,
+      initScrollTop: scrollOffset.scrollTop
+    };
+  }, [ref]);
+};
+
+var _default = useInitScrollOffset;
+exports["default"] = _default;
+//# sourceMappingURL=useInitScrollOffset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useInitScrollOffset.ts"],"names":["useInitScrollOffset","ref","current","scrollOffset","initScrollLeft","scrollLeft","initScrollTop","scrollTop"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,GAAD;AAAA,SAC1B,oBAAQ,YAAM;AACZ,QAAI,CAACA,GAAD,IAAQ,CAACA,GAAG,CAACC,OAAjB,EAA0B,OAAO,IAAP;AAC1B,QAAMC,YAAY,GAAG,kCAAiBF,GAAG,CAACC,OAArB,CAArB;AACA,WAAO;AACLE,MAAAA,cAAc,EAAED,YAAY,CAACE,UADxB;AAELC,MAAAA,aAAa,EAAEH,YAAY,CAACI;AAFvB,KAAP;AAID,GAPD,EAOG,CAACN,GAAD,CAPH,CAD0B;AAAA,CAA5B;;eAUeD,mB","sourcesContent":["import { RefObject, useMemo } from 'react';\nimport getElementScroll from './getElementScroll';\n\nconst useInitScrollOffset = (ref?: RefObject<HTMLElement>) =>\n  useMemo(() => {\n    if (!ref || !ref.current) return null;\n    const scrollOffset = getElementScroll(ref.current);\n    return {\n      initScrollLeft: scrollOffset.scrollLeft,\n      initScrollTop: scrollOffset.scrollTop,\n    };\n  }, [ref]);\n\nexport default useInitScrollOffset;\n"],"file":"useInitScrollOffset.js"}

package/dist/cjs/utils/useMoveNode.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _getNodeRect = _interopRequireDefault(require("./getNodeRect"));
+
+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; }
+
+/* eslint-disable no-constant-condition */
+var useMoveNode = function useMoveNode(position, draggedNode, getNodeStyle) {
+  return (0, _react.useCallback)(function (props) {
+    var list = props.list,
+        startNode = props.startNode,
+        type = props.type,
+        _props$untilTheEnd = props.untilTheEnd,
+        untilTheEnd = _props$untilTheEnd === void 0 ? false : _props$untilTheEnd,
+        _props$insideAnotherL = props.insideAnotherList,
+        insideAnotherList = _props$insideAnotherL === void 0 ? false : _props$insideAnotherL;
+    if (!draggedNode || !position) return startNode;
+
+    var _draggedNode$node = _slicedToArray(draggedNode.node, 5),
+        draggedNodeIndex = _draggedNode$node[4];
+
+    var axis = list.horizontal ? 'x' : 'y';
+    var node = startNode;
+
+    if (type === 'up') {
+      while (true) {
+        var _node = node,
+            _node2 = _slicedToArray(_node, 5),
+            prev = _node2[0],
+            nodeSetStyle = _node2[3],
+            nodeIndex = _node2[4];
+
+        if (!prev) return node;
+
+        var _prev = _slicedToArray(prev, 5),
+            prevNodeRef = _prev[2],
+            prevNodeSetStyle = _prev[3],
+            prevNodeIndex = _prev[4];
+
+        if (!untilTheEnd) {
+          var prevNodeRect = (0, _getNodeRect["default"])(prevNodeRef);
+          var rectProp = list.horizontal ? 'right' : 'bottom';
+          if (prevNodeRect && position[axis] > prevNodeRect[rectProp]) return node;
+        }
+
+        if (insideAnotherList || prevNodeIndex < draggedNodeIndex) {
+          prevNodeSetStyle(getNodeStyle('down', list.horizontal));
+        } else if (nodeIndex > draggedNodeIndex) {
+          nodeSetStyle(getNodeStyle('init', list.horizontal));
+        }
+
+        node = prev;
+      }
+    } else {
+      while (true) {
+        var _node3 = node,
+            _node4 = _slicedToArray(_node3, 5),
+            next = _node4[1],
+            _nodeSetStyle = _node4[3],
+            _nodeIndex = _node4[4];
+
+        if (!next) return node;
+
+        var _next = _slicedToArray(next, 5),
+            nextNodeRef = _next[2],
+            nextNodeSetStyle = _next[3],
+            nextNodeIndex = _next[4];
+
+        if (!untilTheEnd) {
+          var nextNodeRect = (0, _getNodeRect["default"])(nextNodeRef);
+
+          var _rectProp = list.horizontal ? 'left' : 'top';
+
+          if (nextNodeRect && position[axis] < nextNodeRect[_rectProp]) return node;
+        }
+
+        if (insideAnotherList || _nodeIndex < draggedNodeIndex) {
+          _nodeSetStyle(getNodeStyle('init', list.horizontal));
+        } else if (nextNodeIndex > draggedNodeIndex) {
+          nextNodeSetStyle(getNodeStyle('up', list.horizontal));
+        }
+
+        node = next;
+      }
+    }
+  }, [draggedNode, getNodeStyle, position]);
+};
+
+var _default = useMoveNode;
+exports["default"] = _default;
+//# sourceMappingURL=useMoveNode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useMoveNode.ts"],"names":["useMoveNode","position","draggedNode","getNodeStyle","props","list","startNode","type","untilTheEnd","insideAnotherList","node","draggedNodeIndex","axis","horizontal","prev","nodeSetStyle","nodeIndex","prevNodeRef","prevNodeSetStyle","prevNodeIndex","prevNodeRect","rectProp","next","nextNodeRef","nextNodeSetStyle","nextNodeIndex","nextNodeRect"],"mappings":"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","sourcesContent":["import { useCallback } from 'react';\nimport { Position } from '@os-design/use-drag';\nimport NodeList, { ExistingNode } from './NodeList';\n// eslint-disable-next-line import/no-cycle\nimport { DraggedNode } from './useDragEffect';\nimport getNodeRect from './getNodeRect';\nimport { NodeStyleGetter } from './useGetNodeStyle';\n\ninterface MoveProps {\n  list: NodeList;\n  startNode: ExistingNode;\n  type: 'up' | 'down';\n  untilTheEnd?: boolean;\n  insideAnotherList?: boolean;\n}\n\n/* eslint-disable no-constant-condition */\n\nconst useMoveNode = (\n  position: Position | null,\n  draggedNode: DraggedNode | null,\n  getNodeStyle: NodeStyleGetter\n) =>\n  useCallback(\n    (props: MoveProps) => {\n      const {\n        list,\n        startNode,\n        type,\n        untilTheEnd = false,\n        insideAnotherList = false,\n      } = props;\n\n      if (!draggedNode || !position) return startNode;\n      const [, , , , draggedNodeIndex] = draggedNode.node;\n      const axis = list.horizontal ? 'x' : 'y';\n      let node = startNode;\n\n      if (type === 'up') {\n        while (true) {\n          const [prev, , , nodeSetStyle, nodeIndex] = node;\n          if (!prev) return node;\n          const [, , prevNodeRef, prevNodeSetStyle, prevNodeIndex] = prev;\n          if (!untilTheEnd) {\n            const prevNodeRect = getNodeRect(prevNodeRef);\n            const rectProp = list.horizontal ? 'right' : 'bottom';\n            if (prevNodeRect && position[axis] > prevNodeRect[rectProp])\n              return node;\n          }\n          if (insideAnotherList || prevNodeIndex < draggedNodeIndex) {\n            prevNodeSetStyle(getNodeStyle('down', list.horizontal));\n          } else if (nodeIndex > draggedNodeIndex) {\n            nodeSetStyle(getNodeStyle('init', list.horizontal));\n          }\n          node = prev;\n        }\n      } else {\n        while (true) {\n          const [, next, , nodeSetStyle, nodeIndex] = node;\n          if (!next) return node;\n          const [, , nextNodeRef, nextNodeSetStyle, nextNodeIndex] = next;\n          if (!untilTheEnd) {\n            const nextNodeRect = getNodeRect(nextNodeRef);\n            const rectProp = list.horizontal ? 'left' : 'top';\n            if (nextNodeRect && position[axis] < nextNodeRect[rectProp])\n              return node;\n          }\n          if (insideAnotherList || nodeIndex < draggedNodeIndex) {\n            nodeSetStyle(getNodeStyle('init', list.horizontal));\n          } else if (nextNodeIndex > draggedNodeIndex) {\n            nextNodeSetStyle(getNodeStyle('up', list.horizontal));\n          }\n          node = next;\n        }\n      }\n    },\n    [draggedNode, getNodeStyle, position]\n  );\n\nexport default useMoveNode;\n"],"file":"useMoveNode.js"}

package/dist/cjs/utils/useScrollEventByPoint.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _useAutoScroll = require("@os-design/use-auto-scroll");
+
+var compare = function compare(prevArr, nextArr) {
+  var remove = [];
+  var add = [];
+  prevArr.forEach(function (item) {
+    if (!nextArr.includes(item)) remove.push(item);
+  });
+  nextArr.forEach(function (item) {
+    if (!prevArr.includes(item)) add.push(item);
+  });
+  return {
+    remove: remove,
+    add: add
+  };
+};
+
+/**
+ * Sets the listener that will be called whenever the scroll event occurs
+ * in one of the elements located under the specified point.
+ */
+var useScrollEventByPoint = function useScrollEventByPoint(point, listener) {
+  var listenerRef = (0, _react.useRef)(listener);
+  (0, _react.useEffect)(function () {
+    listenerRef.current = listener;
+  }, [listener]);
+  var eventListener = (0, _react.useCallback)(function (e) {
+    return listenerRef.current(e);
+  }, []);
+  var elementsRef = (0, _react.useRef)([]);
+  (0, _react.useEffect)(function () {
+    if (!point) return;
+    var scrollableElements = (0, _useAutoScroll.getScrollableElements)(point.x, point.y);
+
+    var _compare = compare(elementsRef.current, scrollableElements),
+        remove = _compare.remove,
+        add = _compare.add;
+
+    var getTarget = function getTarget(item) {
+      return item === document.body ? window : item;
+    };
+
+    remove.forEach(function (item) {
+      var index = elementsRef.current.indexOf(item);
+      if (index >= 0) elementsRef.current.splice(index, 1);
+      getTarget(item).removeEventListener('scroll', eventListener);
+    });
+    add.forEach(function (item) {
+      elementsRef.current.push(item);
+      getTarget(item).addEventListener('scroll', eventListener);
+    });
+  }, [eventListener, point]);
+};
+
+var _default = useScrollEventByPoint;
+exports["default"] = _default;
+//# sourceMappingURL=useScrollEventByPoint.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useScrollEventByPoint.ts"],"names":["compare","prevArr","nextArr","remove","add","forEach","item","includes","push","useScrollEventByPoint","point","listener","listenerRef","current","eventListener","e","elementsRef","scrollableElements","x","y","getTarget","document","body","window","index","indexOf","splice","removeEventListener","addEventListener"],"mappings":";;;;;;;AAAA;;AACA;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAAIC,OAAJ,EAAkBC,OAAlB,EAAmC;AACjD,MAAMC,MAAW,GAAG,EAApB;AACA,MAAMC,GAAQ,GAAG,EAAjB;AACAH,EAAAA,OAAO,CAACI,OAAR,CAAgB,UAACC,IAAD,EAAU;AACxB,QAAI,CAACJ,OAAO,CAACK,QAAR,CAAiBD,IAAjB,CAAL,EAA6BH,MAAM,CAACK,IAAP,CAAYF,IAAZ;AAC9B,GAFD;AAGAJ,EAAAA,OAAO,CAACG,OAAR,CAAgB,UAACC,IAAD,EAAU;AACxB,QAAI,CAACL,OAAO,CAACM,QAAR,CAAiBD,IAAjB,CAAL,EAA6BF,GAAG,CAACI,IAAJ,CAASF,IAAT;AAC9B,GAFD;AAGA,SAAO;AAAEH,IAAAA,MAAM,EAANA,MAAF;AAAUC,IAAAA,GAAG,EAAHA;AAAV,GAAP;AACD,CAVD;;AAiBA;AACA;AACA;AACA;AACA,IAAMK,qBAAqB,GAAG,SAAxBA,qBAAwB,CAC5BC,KAD4B,EAE5BC,QAF4B,EAGzB;AACH,MAAMC,WAAW,GAAG,mBAAOD,QAAP,CAApB;AACA,wBAAU,YAAM;AACdC,IAAAA,WAAW,CAACC,OAAZ,GAAsBF,QAAtB;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA,MAAMG,aAAa,GAAG,wBAAY,UAACC,CAAD;AAAA,WAAcH,WAAW,CAACC,OAAZ,CAAoBE,CAApB,CAAd;AAAA,GAAZ,EAAkD,EAAlD,CAAtB;AACA,MAAMC,WAAW,GAAG,mBAAkB,EAAlB,CAApB;AAEA,wBAAU,YAAM;AACd,QAAI,CAACN,KAAL,EAAY;AACZ,QAAMO,kBAAkB,GAAG,0CAAsBP,KAAK,CAACQ,CAA5B,EAA+BR,KAAK,CAACS,CAArC,CAA3B;;AACA,mBAAwBnB,OAAO,CAACgB,WAAW,CAACH,OAAb,EAAsBI,kBAAtB,CAA/B;AAAA,QAAQd,MAAR,YAAQA,MAAR;AAAA,QAAgBC,GAAhB,YAAgBA,GAAhB;;AACA,QAAMgB,SAAS,GAAG,SAAZA,SAAY,CAACd,IAAD;AAAA,aAChBA,IAAI,KAAKe,QAAQ,CAACC,IAAlB,GAAyBC,MAAzB,GAAkCjB,IADlB;AAAA,KAAlB;;AAGAH,IAAAA,MAAM,CAACE,OAAP,CAAe,UAACC,IAAD,EAAU;AACvB,UAAMkB,KAAK,GAAGR,WAAW,CAACH,OAAZ,CAAoBY,OAApB,CAA4BnB,IAA5B,CAAd;AACA,UAAIkB,KAAK,IAAI,CAAb,EAAgBR,WAAW,CAACH,OAAZ,CAAoBa,MAApB,CAA2BF,KAA3B,EAAkC,CAAlC;AAChBJ,MAAAA,SAAS,CAACd,IAAD,CAAT,CAAgBqB,mBAAhB,CAAoC,QAApC,EAA8Cb,aAA9C;AACD,KAJD;AAKAV,IAAAA,GAAG,CAACC,OAAJ,CAAY,UAACC,IAAD,EAAU;AACpBU,MAAAA,WAAW,CAACH,OAAZ,CAAoBL,IAApB,CAAyBF,IAAzB;AACAc,MAAAA,SAAS,CAACd,IAAD,CAAT,CAAgBsB,gBAAhB,CAAiC,QAAjC,EAA2Cd,aAA3C;AACD,KAHD;AAID,GAhBD,EAgBG,CAACA,aAAD,EAAgBJ,KAAhB,CAhBH;AAiBD,CA7BD;;eA+BeD,qB","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { getScrollableElements } from '@os-design/use-auto-scroll';\n\nconst compare = <T>(prevArr: T[], nextArr: T[]) => {\n  const remove: T[] = [];\n  const add: T[] = [];\n  prevArr.forEach((item) => {\n    if (!nextArr.includes(item)) remove.push(item);\n  });\n  nextArr.forEach((item) => {\n    if (!prevArr.includes(item)) add.push(item);\n  });\n  return { remove, add };\n};\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * Sets the listener that will be called whenever the scroll event occurs\n * in one of the elements located under the specified point.\n */\nconst useScrollEventByPoint = (\n  point: Point | null,\n  listener: (e: Event) => void\n) => {\n  const listenerRef = useRef(listener);\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  const eventListener = useCallback((e: Event) => listenerRef.current(e), []);\n  const elementsRef = useRef<Element[]>([]);\n\n  useEffect(() => {\n    if (!point) return;\n    const scrollableElements = getScrollableElements(point.x, point.y);\n    const { remove, add } = compare(elementsRef.current, scrollableElements);\n    const getTarget = (item: Element) =>\n      item === document.body ? window : item;\n\n    remove.forEach((item) => {\n      const index = elementsRef.current.indexOf(item);\n      if (index >= 0) elementsRef.current.splice(index, 1);\n      getTarget(item).removeEventListener('scroll', eventListener);\n    });\n    add.forEach((item) => {\n      elementsRef.current.push(item);\n      getTarget(item).addEventListener('scroll', eventListener);\n    });\n  }, [eventListener, point]);\n};\n\nexport default useScrollEventByPoint;\n"],"file":"useScrollEventByPoint.js"}

package/dist/cjs/utils/useTargetList.js

@@ -0,0 +1,58 @@
+"use strict";
+
+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];
+
+  var targetList = (0, _react.useMemo)(function () {
+    if (!position || !listStoreRef.current) return null;
+    var x = position.x,
+        y = position.y;
+    var list = listStoreRef.current.findByPosition(x, y);
+    return list || null;
+  }, [listStoreRef, position, number]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  var forceUpdate = (0, _react.useCallback)(function () {
+    setNumber(function (n) {
+      return n + 1;
+    });
+  }, []); // 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];
+
+  (0, _useScrollEventByPoint["default"])(position, throttledForceUpdate);
+  return targetList;
+};
+
+var _default = useTargetList;
+exports["default"] = _default;
+//# sourceMappingURL=useTargetList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useTargetList.ts"],"names":["useTargetList","position","listStoreRef","number","setNumber","targetList","current","x","y","list","findByPosition","forceUpdate","n","throttledForceUpdate"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;;;;;;;;;;;;;;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CACpBC,QADoB,EAEpBC,YAFoB,EAGjB;AACH,kBAA4B,qBAAS,CAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,MAAMC,UAAU,GAAG,oBAAQ,YAAM;AAC/B,QAAI,CAACJ,QAAD,IAAa,CAACC,YAAY,CAACI,OAA/B,EAAwC,OAAO,IAAP;AACxC,QAAQC,CAAR,GAAiBN,QAAjB,CAAQM,CAAR;AAAA,QAAWC,CAAX,GAAiBP,QAAjB,CAAWO,CAAX;AACA,QAAMC,IAAI,GAAGP,YAAY,CAACI,OAAb,CAAqBI,cAArB,CAAoCH,CAApC,EAAuCC,CAAvC,CAAb;AACA,WAAOC,IAAI,IAAI,IAAf;AACD,GALkB,EAKhB,CAACP,YAAD,EAAeD,QAAf,EAAyBE,MAAzB,CALgB,CAAnB,CAHG,CAQmC;;AAEtC,MAAMQ,WAAW,GAAG,wBAAY,YAAM;AACpCP,IAAAA,SAAS,CAAC,UAACQ,CAAD;AAAA,aAAOA,CAAC,GAAG,CAAX;AAAA,KAAD,CAAT;AACD,GAFmB,EAEjB,EAFiB,CAApB,CAVG,CAcH;;AACA,qBAA+B,8BAAYD,WAAZ,EAAyB,GAAzB,CAA/B;AAAA;AAAA,MAAOE,oBAAP;;AACA,yCAAsBZ,QAAtB,EAAgCY,oBAAhC;AAEA,SAAOR,UAAP;AACD,CAtBD;;eAwBeL,a","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"],"file":"useTargetList.js"}

package/dist/cjs/utils/useTransitionStyle.js

@@ -0,0 +1,30 @@
+"use strict";
+
+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;
+  (0, _react.useEffect)(function () {
+    if (!enabled) return function () {};
+    var style = document.createElement('style');
+    style.innerHTML = ".".concat(className, "{transition:transform ").concat(ms, "ms;}");
+    var child = document.head.appendChild(style);
+    return function () {
+      document.head.removeChild(child);
+    };
+  }, [className, enabled, ms]);
+};
+
+var _default = useTransitionStyle;
+exports["default"] = _default;
+//# sourceMappingURL=useTransitionStyle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useTransitionStyle.ts"],"names":["useTransitionStyle","props","className","ms","enabled","style","document","createElement","innerHTML","child","head","appendChild","removeChild"],"mappings":";;;;;;;AAAA;;AAQA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAoC;AAC7D,MAAQC,SAAR,GAAmCD,KAAnC,CAAQC,SAAR;AAAA,MAAmBC,EAAnB,GAAmCF,KAAnC,CAAmBE,EAAnB;AAAA,MAAuBC,OAAvB,GAAmCH,KAAnC,CAAuBG,OAAvB;AAEA,wBAAU,YAAM;AACd,QAAI,CAACA,OAAL,EAAc,OAAO,YAAM,CAAE,CAAf;AACd,QAAMC,KAAK,GAAGC,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAAd;AACAF,IAAAA,KAAK,CAACG,SAAN,cAAsBN,SAAtB,mCAAwDC,EAAxD;AACA,QAAMM,KAAK,GAAGH,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,KAA1B,CAAd;AACA,WAAO,YAAM;AACXC,MAAAA,QAAQ,CAACI,IAAT,CAAcE,WAAd,CAA0BH,KAA1B;AACD,KAFD;AAGD,GARD,EAQG,CAACP,SAAD,EAAYE,OAAZ,EAAqBD,EAArB,CARH;AASD,CAZD;;eAceH,kB","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"],"file":"useTransitionStyle.js"}

package/dist/esm/DragAndDrop.js

@@ -0,0 +1,139 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import usePreventDefaultEvent from '@os-design/use-prevent-default-event';
+import useMemoObject from '@os-design/use-memo-object';
+import useDrag from '@os-design/use-drag';
+import Portal from '@os-design/portal';
+import useAutoScroll from '@os-design/use-auto-scroll';
+import { DragAndDropContext } from './utils/useDragAndDrop';
+import ListStore from './utils/ListStore';
+import useDragEffect from './utils/useDragEffect';
+import useGeneratedId from './utils/useGeneratedId';
+import useTransitionStyle from './utils/useTransitionStyle';
+
+/**
+ * The container containing one or more lists with draggable nodes.
+ */
+const DragAndDrop = ({
+  draggedNodeContainer,
+  minMouseDistPx = 10,
+  longPressMs = 500,
+  autoScrollDistPercent = 20,
+  autoScrollMaxSpeedPx = 100,
+  transitionDelayMs = 250,
+  onDragEnd = () => {},
+  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.
+  const listStoreRef = useRef(new ListStore()); // The class name for a node used to set the transition style
+
+  const generatedId = useGeneratedId(4);
+  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
+
+  const registerList = useCallback(list => {
+    listStoreRef.current.add(list);
+  }, []); // 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
+
+  useTransitionStyle({
+    className: nodeClassName,
+    ms: transitionDelayMs,
+    enabled: !!draggedNode
+  });
+  const onDragStart = useCallback((pos, startPos) => {
+    const startNode = startNodeRef.current;
+    if (!startNode) return;
+    const [,, nodeRef] = startNode.node;
+    if (!nodeRef.current) return;
+    const 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;
+  }, []);
+  const onDragMove = useCallback(pos => {
+    setCursorPosition(pos);
+  }, []);
+  const dragEndHandler = useCallback(() => {
+    setDraggedNode(null);
+  }, []);
+  const {
+    onMouseDown,
+    onTouchStart
+  } = useDrag({
+    onDragStart,
+    onDragMove,
+    onDragEnd: dragEndHandler,
+    minMouseDistPx,
+    longPressMs
+  }); // Handlers that determine whether a user clicks on the node
+
+  const mouseDownHandler = useCallback((e, list, node) => {
+    startNodeRef.current = {
+      list,
+      node
+    };
+    onMouseDown(e);
+  }, [onMouseDown]);
+  const touchStartHandler = useCallback((e, list, node) => {
+    startNodeRef.current = {
+      list,
+      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.
+
+  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
+
+  useAutoScroll({
+    enabled: !!draggedNode,
+    distPercent: autoScrollDistPercent,
+    maxSpeedPx: autoScrollMaxSpeedPx
+  });
+  const dragAndDropContext = useMemoObject({
+    registerList,
+    deregisterList,
+    onMouseDown: mouseDownHandler,
+    onTouchStart: touchStartHandler,
+    nodeClassName
+  });
+  return /*#__PURE__*/React.createElement(DragAndDropContext.Provider, {
+    value: dragAndDropContext
+  }, children, draggedNode && /*#__PURE__*/React.createElement(Portal, {
+    container: draggedNodeContainer
+  }, draggedNode.list.renderDraggedNode({
+    index: draggedNode.node[4],
+    style: {
+      position: 'fixed',
+      left: cursorPosition.x - draggedNode.position.x,
+      top: cursorPosition.y - draggedNode.position.y
+    }
+  })));
+};
+
+export default DragAndDrop;
+//# sourceMappingURL=DragAndDrop.js.map

package/dist/esm/DragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/DragAndDrop.tsx"],"names":["React","useCallback","useMemo","useRef","useState","usePreventDefaultEvent","useMemoObject","useDrag","Portal","useAutoScroll","DragAndDropContext","ListStore","useDragEffect","useGeneratedId","useTransitionStyle","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","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/esm/Draggable.js

@@ -0,0 +1,62 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+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,
+  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 [style, setStyle] = useState({});
+  const {
+    nodeClassName
+  } = useDragAndDrop();
+  const {
+    registerNode,
+    deregisterNode,
+    onMouseDown,
+    onTouchStart
+  } = useDroppable(); // Register the node in the list
+
+  useEffect(() => {
+    nodeRef.current = registerNode({
+      ref,
+      setStyle,
+      index
+    });
+    return () => {
+      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)
+
+  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);
+  }, [onMouseDown]);
+  const touchStartHandler = useCallback(e => {
+    if (!nodeRef.current) return;
+    onTouchStart(e, nodeRef.current);
+  }, [onTouchStart]);
+  const handlers = useMemoObject({
+    onMouseDown: mouseDownHandler,
+    onTouchStart: touchStartHandler
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children({
+    ref,
+    style,
+    handlers
+  }));
+};
+
+export default Draggable;
+//# sourceMappingURL=Draggable.js.map

package/dist/esm/Draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Draggable.tsx"],"names":["React","useCallback","useEffect","useRef","useState","useMemoObject","useDroppable","useDragAndDrop","useAppendClassName","Draggable","index","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers"],"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;;AAuCA,MAAMC,SAAmC,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KAAyB;AACnE;AACA,QAAMC,GAAG,GAAGT,MAAM,CAAwB,IAAxB,CAAlB,CAFmE,CAGnE;;AACA,QAAMU,OAAO,GAAGV,MAAM,CAAO,IAAP,CAAtB,CAJmE,CAKnE;;AACA,QAAM,CAACW,KAAD,EAAQC,QAAR,IAAoBX,QAAQ,CAAgB,EAAhB,CAAlC;AAEA,QAAM;AAAEY,IAAAA;AAAF,MAAoBT,cAAc,EAAxC;AACA,QAAM;AAAEU,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgCC,IAAAA,WAAhC;AAA6CC,IAAAA;AAA7C,MACJd,YAAY,EADd,CATmE,CAYnE;;AACAJ,EAAAA,SAAS,CAAC,MAAM;AACdW,IAAAA,OAAO,CAACQ,OAAR,GAAkBJ,YAAY,CAAC;AAAEL,MAAAA,GAAF;AAAOG,MAAAA,QAAP;AAAiBL,MAAAA;AAAjB,KAAD,CAA9B;AACA,WAAO,MAAM;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,GAPQ,EAON,CAACH,cAAD,EAAiBR,KAAjB,EAAwBO,YAAxB,CAPM,CAAT,CAbmE,CAsBnE;;AACAT,EAAAA,kBAAkB,CAACI,GAAD,EAAMI,aAAN,CAAlB,CAvBmE,CAyBnE;;AACA,QAAMM,gBAAgB,GAAGrB,WAAW,CACjCsB,CAAD,IAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBF,IAAAA,WAAW,CAACI,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAX;AACD,GAJiC,EAKlC,CAACF,WAAD,CALkC,CAApC;AAOA,QAAMK,iBAAiB,GAAGvB,WAAW,CAClCsB,CAAD,IAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBD,IAAAA,YAAY,CAACG,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAZ;AACD,GAJkC,EAKnC,CAACD,YAAD,CALmC,CAArC;AAQA,QAAMK,QAAQ,GAAGpB,aAAa,CAAC;AAC7Bc,IAAAA,WAAW,EAAEG,gBADgB;AAE7BF,IAAAA,YAAY,EAAEI;AAFe,GAAD,CAA9B;AAKA,sBAAO,0CAAGb,QAAQ,CAAC;AAAEC,IAAAA,GAAF;AAAOE,IAAAA,KAAP;AAAcW,IAAAA;AAAd,GAAD,CAAX,CAAP;AACD,CA/CD;;AAiDA,eAAehB,SAAf","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"}