@elliemae/ds-drag-and-drop 2.1.0 → 2.2.0-alpha.3

package/cjs/tree/customCollisionDetection.js

@@ -1,137 +1,106 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.find.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.find.js');
-require('core-js/modules/esnext.async-iterator.reduce.js');
-require('core-js/modules/esnext.iterator.reduce.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-var constants = require('./constants.js');
-
-const DUMMY_ID = 'DUMMY_ID_INTERNAL_USE_ONLY';
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var customCollisionDetection_exports = {};
+__export(customCollisionDetection_exports, {
+  customCollisionDetection: () => customCollisionDetection
+});
+var React = __toESM(require("react"));
+var import_constants = __toESM(require("./constants"));
+const DUMMY_ID = "DUMMY_ID_INTERNAL_USE_ONLY";
 const RECT_UP = {
   offsetTop: -Infinity,
   offsetLeft: 0,
-  // Doesn't matter,
   width: 0,
-  // Doesn't matter
-  height: 0 // Doesn't matter
-
+  height: 0
 };
 const RECT_DOWN = {
   offsetTop: Infinity,
   offsetLeft: 0,
-  // Doesn't matter,
   width: 0,
-  // Doesn't matter
-  height: 0 // Doesn't matter
-
-}; // Percentage of height to take into consideration when looking for colliding rects
-
-const thresholdRatio = 0.2; // Percentage to be inside
-
+  height: 0
+};
+const thresholdRatio = 0.2;
 const insideThreshold = 0.7;
-const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => _ref => {
-  var _originalContainer$re;
-
-  let {
-    droppableContainers,
-    collisionRect
-  } = _ref;
-  const originalContainer = droppableContainers.find(_ref2 => {
-    let {
-      id
-    } = _ref2;
-    return id === activeId;
-  });
-  const originalRect = originalContainer === null || originalContainer === void 0 ? void 0 : (_originalContainer$re = originalContainer.rect) === null || _originalContainer$re === void 0 ? void 0 : _originalContainer$re.current; // We first check if the item was moved up or down
-  // This modifies how to search the matching colliding rect
-
-  let isUp = lastPosition === 'up';
-
+const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => ({ droppableContainers, collisionRect }) => {
+  const originalContainer = droppableContainers.find(({ id }) => id === activeId);
+  const originalRect = originalContainer?.rect?.current;
+  let isUp = lastPosition === "up";
   if (originalRect) {
     isUp = originalRect.offsetTop > collisionRect.top;
-  } // Threshold
-
-
+  }
   const threshold = collisionRect.height * thresholdRatio;
   let collidingContainer = null;
-
   if (isUp) {
-    // Up -- We need to find the first rectangle downwards
     collidingContainer = droppableContainers.reduce((firstRectDown, container) => {
       const rect = container.rect.current;
-
       if (rect && firstRectDown.rect.current) {
-        const {
-          offsetTop: rectOffsetTop
-        } = rect;
-        const {
-          offsetTop: firstRectDownOffsetTop
-        } = firstRectDown.rect.current;
-
+        const { offsetTop: rectOffsetTop } = rect;
+        const { offsetTop: firstRectDownOffsetTop } = firstRectDown.rect.current;
         if (rectOffsetTop + threshold > collisionRect.top && rectOffsetTop < firstRectDownOffsetTop) {
           return container;
         }
       }
-
       return firstRectDown;
-    }, {
-      id: DUMMY_ID,
-      rect: {
-        current: RECT_DOWN
-      }
-    });
+    }, { id: DUMMY_ID, rect: { current: RECT_DOWN } });
   } else {
-    // Down -- We need to find the first rectangle upwards
     collidingContainer = droppableContainers.reduce((firstRectUp, container) => {
       const rect = container.rect.current;
-
       if (rect && firstRectUp.rect.current) {
-        const {
-          offsetTop: rectOffsetTop
-        } = rect;
-        const {
-          offsetTop: firstRectUpOffsetTop
-        } = firstRectUp.rect.current;
-
+        const { offsetTop: rectOffsetTop } = rect;
+        const { offsetTop: firstRectUpOffsetTop } = firstRectUp.rect.current;
         if (rectOffsetTop - threshold < collisionRect.top && rectOffsetTop > firstRectUpOffsetTop) {
           return container;
         }
       }
-
       return firstRectUp;
-    }, {
-      id: DUMMY_ID,
-      rect: {
-        current: RECT_UP
-      }
-    });
-  } // If we didn't find a match, return null
-
-
+    }, { id: DUMMY_ID, rect: { current: RECT_UP } });
+  }
   if (collidingContainer.id === DUMMY_ID) {
     return null;
   }
-
   const collidingRect = collidingContainer.rect.current;
-  if (!collidingRect) return null; // Calculate the intersection interval
-
-  const [top, bottom] = [Math.max(collisionRect.top, collidingRect.offsetTop), Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)]; // Calculate the percentage of intersection
-
+  if (!collidingRect)
+    return null;
+  const [top, bottom] = [
+    Math.max(collisionRect.top, collidingRect.offsetTop),
+    Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)
+  ];
   const intersectionPercentage = Math.abs(bottom - top) / collidingRect.height;
-
   if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== activeId) {
-    setDropIndicatorPosition(constants.DropIndicatorPosition.Inside);
+    setDropIndicatorPosition(import_constants.DropIndicatorPosition.Inside);
   } else {
-    setDropIndicatorPosition(isUp ? constants.DropIndicatorPosition.Before : constants.DropIndicatorPosition.After);
+    setDropIndicatorPosition(isUp ? import_constants.DropIndicatorPosition.Before : import_constants.DropIndicatorPosition.After);
   }
-
-  if (isUp && lastPosition !== 'up') setLastPosition('up');else if (!isUp && lastPosition !== 'down') setLastPosition('down'); // Return the id of the match rectangle
-
+  if (isUp && lastPosition !== "up")
+    setLastPosition("up");
+  else if (!isUp && lastPosition !== "down")
+    setLastPosition("down");
   return collidingContainer.id;
 };
-
-exports.customCollisionDetection = customCollisionDetection;
+module.exports = __toCommonJS(customCollisionDetection_exports);
+//# sourceMappingURL=customCollisionDetection.js.map

package/cjs/tree/customCollisionDetection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/tree/customCollisionDetection.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable max-params */\nimport { CollisionDetection, DroppableContainer, LayoutRect } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants';\nimport { Item } from './types';\n\nconst DUMMY_ID = 'DUMMY_ID_INTERNAL_USE_ONLY';\nconst RECT_UP: LayoutRect = {\n  offsetTop: -Infinity,\n  offsetLeft: 0, // Doesn't matter,\n  width: 0, // Doesn't matter\n  height: 0, // Doesn't matter\n};\nconst RECT_DOWN: LayoutRect = {\n  offsetTop: Infinity,\n  offsetLeft: 0, // Doesn't matter,\n  width: 0, // Doesn't matter\n  height: 0, // Doesn't matter\n};\n\n// Percentage of height to take into consideration when looking for colliding rects\nconst thresholdRatio = 0.2;\n// Percentage to be inside\nconst insideThreshold = 0.7;\n\nexport const customCollisionDetection =\n  (\n    activeId: string,\n    visibleItemsDictionary: Record<string, Item>,\n    setDropIndicatorPosition: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>,\n    maxDragAndDropLevel: number,\n    lastPosition: string,\n    setLastPosition: React.Dispatch<React.SetStateAction<string>>,\n  ): CollisionDetection =>\n  ({ droppableContainers, collisionRect }) => {\n    const originalContainer = droppableContainers.find(({ id }) => id === activeId);\n    const originalRect = originalContainer?.rect?.current;\n\n    // We first check if the item was moved up or down\n    // This modifies how to search the matching colliding rect\n    let isUp = lastPosition === 'up';\n    if (originalRect) {\n      isUp = originalRect.offsetTop > collisionRect.top;\n    }\n\n    // Threshold\n    const threshold = collisionRect.height * thresholdRatio;\n\n    let collidingContainer: DroppableContainer | null = null;\n\n    if (isUp) {\n      // Up -- We need to find the first rectangle downwards\n      collidingContainer = droppableContainers.reduce(\n        (firstRectDown, container) => {\n          const rect = container.rect.current;\n          if (rect && firstRectDown.rect.current) {\n            const { offsetTop: rectOffsetTop } = rect;\n            const { offsetTop: firstRectDownOffsetTop } = firstRectDown.rect.current;\n            if (rectOffsetTop + threshold > collisionRect.top && rectOffsetTop < firstRectDownOffsetTop) {\n              return container;\n            }\n          }\n          return firstRectDown;\n        },\n        { id: DUMMY_ID, rect: { current: RECT_DOWN } } as DroppableContainer,\n      );\n    } else {\n      // Down -- We need to find the first rectangle upwards\n      collidingContainer = droppableContainers.reduce(\n        (firstRectUp, container) => {\n          const rect = container.rect.current;\n          if (rect && firstRectUp.rect.current) {\n            const { offsetTop: rectOffsetTop } = rect;\n            const { offsetTop: firstRectUpOffsetTop } = firstRectUp.rect.current;\n            if (rectOffsetTop - threshold < collisionRect.top && rectOffsetTop > firstRectUpOffsetTop) {\n              return container;\n            }\n          }\n          return firstRectUp;\n        },\n        { id: DUMMY_ID, rect: { current: RECT_UP } } as DroppableContainer,\n      );\n    }\n\n    // If we didn't find a match, return null\n    if (collidingContainer.id === DUMMY_ID) {\n      return null;\n    }\n\n    const collidingRect = collidingContainer.rect.current;\n\n    if (!collidingRect) return null;\n\n    // Calculate the intersection interval\n    const [top, bottom] = [\n      Math.max(collisionRect.top, collidingRect.offsetTop),\n      Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height),\n    ];\n\n    // Calculate the percentage of intersection\n    const intersectionPercentage = Math.abs(bottom - top) / collidingRect.height;\n\n    if (\n      intersectionPercentage > insideThreshold &&\n      visibleItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel &&\n      collidingContainer.id !== activeId\n    ) {\n      setDropIndicatorPosition(DropIndicatorPosition.Inside);\n    } else {\n      setDropIndicatorPosition(isUp ? DropIndicatorPosition.Before : DropIndicatorPosition.After);\n    }\n\n    if (isUp && lastPosition !== 'up') setLastPosition('up');\n    else if (!isUp && lastPosition !== 'down') setLastPosition('down');\n\n    // Return the id of the match rectangle\n    return collidingContainer.id;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,uBAAsC;AAGtC,MAAM,WAAW;AACjB,MAAM,UAAsB;AAAA,EAC1B,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA;AAEV,MAAM,YAAwB;AAAA,EAC5B,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA;AAIV,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAEjB,MAAM,2BACX,CACE,UACA,wBACA,0BACA,qBACA,cACA,oBAEF,CAAC,EAAE,qBAAqB,oBAAoB;AAC1C,QAAM,oBAAoB,oBAAoB,KAAK,CAAC,EAAE,SAAS,OAAO;AACtE,QAAM,eAAe,mBAAmB,MAAM;AAI9C,MAAI,OAAO,iBAAiB;AAC5B,MAAI,cAAc;AAChB,WAAO,aAAa,YAAY,cAAc;AAAA;AAIhD,QAAM,YAAY,cAAc,SAAS;AAEzC,MAAI,qBAAgD;AAEpD,MAAI,MAAM;AAER,yBAAqB,oBAAoB,OACvC,CAAC,eAAe,cAAc;AAC5B,YAAM,OAAO,UAAU,KAAK;AAC5B,UAAI,QAAQ,cAAc,KAAK,SAAS;AACtC,cAAM,EAAE,WAAW,kBAAkB;AACrC,cAAM,EAAE,WAAW,2BAA2B,cAAc,KAAK;AACjE,YAAI,gBAAgB,YAAY,cAAc,OAAO,gBAAgB,wBAAwB;AAC3F,iBAAO;AAAA;AAAA;AAGX,aAAO;AAAA,OAET,EAAE,IAAI,UAAU,MAAM,EAAE,SAAS;AAAA,SAE9B;AAEL,yBAAqB,oBAAoB,OACvC,CAAC,aAAa,cAAc;AAC1B,YAAM,OAAO,UAAU,KAAK;AAC5B,UAAI,QAAQ,YAAY,KAAK,SAAS;AACpC,cAAM,EAAE,WAAW,kBAAkB;AACrC,cAAM,EAAE,WAAW,yBAAyB,YAAY,KAAK;AAC7D,YAAI,gBAAgB,YAAY,cAAc,OAAO,gBAAgB,sBAAsB;AACzF,iBAAO;AAAA;AAAA;AAGX,aAAO;AAAA,OAET,EAAE,IAAI,UAAU,MAAM,EAAE,SAAS;AAAA;AAKrC,MAAI,mBAAmB,OAAO,UAAU;AACtC,WAAO;AAAA;AAGT,QAAM,gBAAgB,mBAAmB,KAAK;AAE9C,MAAI,CAAC;AAAe,WAAO;AAG3B,QAAM,CAAC,KAAK,UAAU;AAAA,IACpB,KAAK,IAAI,cAAc,KAAK,cAAc;AAAA,IAC1C,KAAK,IAAI,cAAc,QAAQ,cAAc,YAAY,cAAc;AAAA;AAIzE,QAAM,yBAAyB,KAAK,IAAI,SAAS,OAAO,cAAc;AAEtE,MACE,yBAAyB,mBACzB,uBAAuB,mBAAmB,IAAI,QAAQ,KAAK,uBAC3D,mBAAmB,OAAO,UAC1B;AACA,6BAAyB,uCAAsB;AAAA,SAC1C;AACL,6BAAyB,OAAO,uCAAsB,SAAS,uCAAsB;AAAA;AAGvF,MAAI,QAAQ,iBAAiB;AAAM,oBAAgB;AAAA,WAC1C,CAAC,QAAQ,iBAAiB;AAAQ,oBAAgB;AAG3D,SAAO,mBAAmB;AAAA;",
+  "names": []
+}

package/cjs/tree/getTreeKeyboardCoordinates.js

@@ -1,123 +1,109 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-require('core-js/modules/esnext.async-iterator.find.js');
-require('core-js/modules/esnext.iterator.find.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.filter.js');
-var core = require('@dnd-kit/core');
-var constants = require('./constants.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const directions = [core.KeyboardCode.Down, core.KeyboardCode.Right, core.KeyboardCode.Up, core.KeyboardCode.Left];
-const horizontal = [core.KeyboardCode.Left, core.KeyboardCode.Right];
-[core.KeyboardCode.Up, core.KeyboardCode.Down];
-
-const getVerticalKeyboardCoordinates = _ref => {
-  var _droppableContainers$, _droppableContainers$2;
-
-  let {
-    items,
-    active,
-    over,
-    event,
-    currentCoordinates,
-    droppableContainers,
-    collisionRect,
-    dropIndicatorPosition,
-    maxDragAndDropLevel
-  } = _ref;
-  if (horizontal.includes(event.code)) return undefined;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var getTreeKeyboardCoordinates_exports = {};
+__export(getTreeKeyboardCoordinates_exports, {
+  getTreeKeyboardCoordinates: () => getTreeKeyboardCoordinates
+});
+var React = __toESM(require("react"));
+var import_core = __toESM(require("@dnd-kit/core"));
+var import_constants = __toESM(require("./constants"));
+const directions = [import_core.KeyboardCode.Down, import_core.KeyboardCode.Right, import_core.KeyboardCode.Up, import_core.KeyboardCode.Left];
+const horizontal = [import_core.KeyboardCode.Left, import_core.KeyboardCode.Right];
+const vertical = [import_core.KeyboardCode.Up, import_core.KeyboardCode.Down];
+const getVerticalKeyboardCoordinates = ({
+  items,
+  active,
+  over,
+  event,
+  currentCoordinates,
+  droppableContainers,
+  collisionRect,
+  dropIndicatorPosition,
+  maxDragAndDropLevel
+}) => {
+  if (horizontal.includes(event.code))
+    return void 0;
   const overRect = over.rect;
-  const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
-
-  droppableContainers.forEach(container => {
-    if (container !== null && container !== void 0 && container.disabled || !overRect) {
+  const layoutRects = [];
+  droppableContainers.forEach((container) => {
+    if (container?.disabled || !overRect) {
       return;
     }
-
     const rect = container.rect.current;
-
-    if (rect && event.code === core.KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {
+    if (rect && event.code === import_core.KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {
       layoutRects.push(container);
-    } else if (rect && event.code === core.KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {
+    } else if (rect && event.code === import_core.KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {
       layoutRects.push(container);
     }
   });
-  const closestId = core.closestCorners({
+  const closestId = (0, import_core.closestCorners)({
     collisionRect,
     droppableContainers: layoutRects,
     active
   });
-  const closestItem = items.find(item => item.uid === closestId);
-  const closestElement = (_droppableContainers$ = droppableContainers.get(closestId)) === null || _droppableContainers$ === void 0 ? void 0 : (_droppableContainers$2 = _droppableContainers$.node) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.current;
-  if (!closestId || !closestItem || !closestElement) return undefined;
-  const closestRect = core.getViewRect(closestElement);
-
-  if (event.code === core.KeyboardCode.Up) {
-    // If the drop indicator is inside (or over ourselves)
-    // We are gonna go to the before position
-    // Else we are gonna go inside the over rect
-    if (dropIndicatorPosition === constants.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
-      return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+  const closestItem = items.find((item) => item.uid === closestId);
+  const closestElement = droppableContainers.get(closestId)?.node?.current;
+  if (!closestId || !closestItem || !closestElement)
+    return void 0;
+  const closestRect = (0, import_core.getViewRect)(closestElement);
+  if (event.code === import_core.KeyboardCode.Up) {
+    if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
+      return {
+        ...currentCoordinates,
         y: closestRect.top - collisionRect.height / 2
-      });
+      };
     }
-
-    return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+    return {
+      ...currentCoordinates,
       y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
-    });
-  } // If the drop indicator is inside (or over ourselves)
-  // We are gonna go to the after position
-  // Else we are gonna go inside the over rect
-
-
-  if (dropIndicatorPosition === constants.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
-    return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+    };
+  }
+  if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
+    return {
+      ...currentCoordinates,
       y: closestRect.top + collisionRect.height / 2
-    });
+    };
   }
-
-  return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+  return {
+    ...currentCoordinates,
     y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
-  });
+  };
 };
-
-const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, _ref2) => {
-  let {
-    currentCoordinates,
-    context: {
-      over,
-      translatedRect,
-      droppableContainers,
-      active,
-      collisionRect
-    }
-  } = _ref2;
-
+const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {
   if (directions.includes(event.code)) {
     if (!translatedRect) {
-      return undefined;
+      return void 0;
     }
-
     const {
-      current: {
-        items,
-        dropIndicatorPosition
-      }
+      current: { items, dropIndicatorPosition }
     } = context;
-    if (!over || !active || !collisionRect) return undefined;
+    if (!over || !active || !collisionRect)
+      return void 0;
     const args = {
       items,
       active,
@@ -129,11 +115,11 @@ const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLeve
       dropIndicatorPosition,
       maxDragAndDropLevel
     };
-    if (isHorizontalDnD) return undefined;
+    if (isHorizontalDnD)
+      return void 0;
     return getVerticalKeyboardCoordinates(args);
   }
-
-  return undefined;
+  return void 0;
 };
-
-exports.getTreeKeyboardCoordinates = getTreeKeyboardCoordinates;
+module.exports = __toCommonJS(getTreeKeyboardCoordinates_exports);
+//# sourceMappingURL=getTreeKeyboardCoordinates.js.map

package/cjs/tree/getTreeKeyboardCoordinates.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/tree/getTreeKeyboardCoordinates.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { closestCorners, getViewRect, KeyboardCode, KeyboardCoordinateGetter, DroppableContainer } from '@dnd-kit/core';\nimport { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { getKeyboardCoordinatesArgs, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\n\nconst directions: string[] = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];\n\nconst horizontal: string[] = [KeyboardCode.Left, KeyboardCode.Right];\nconst vertical: string[] = [KeyboardCode.Up, KeyboardCode.Down];\n\nconst getVerticalKeyboardCoordinates = ({\n  items,\n  active,\n  over,\n  event,\n  currentCoordinates,\n  droppableContainers,\n  collisionRect,\n  dropIndicatorPosition,\n  maxDragAndDropLevel,\n}: getKeyboardCoordinatesArgs): Coordinates | undefined => {\n  if (horizontal.includes(event.code)) return undefined;\n\n  const overRect = over.rect;\n\n  const layoutRects: DroppableContainer[] = [];\n\n  // Get the reacheable rects depending on the arrow key pressed\n  droppableContainers.forEach((container) => {\n    if (container?.disabled || !overRect) {\n      return;\n    }\n    const rect = container.rect.current;\n    if (rect && event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {\n      layoutRects.push(container);\n    } else if (rect && event.code === KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {\n      layoutRects.push(container);\n    }\n  });\n\n  const closestId = closestCorners({\n    collisionRect,\n    droppableContainers: layoutRects,\n    active,\n  });\n\n  const closestItem = items.find((item) => item.uid === closestId);\n\n  const closestElement = droppableContainers.get(closestId)?.node?.current;\n\n  if (!closestId || !closestItem || !closestElement) return undefined;\n\n  const closestRect = getViewRect(closestElement);\n\n  if (event.code === KeyboardCode.Up) {\n    // If the drop indicator is inside (or over ourselves)\n    // We are gonna go to the before position\n    // Else we are gonna go inside the over rect\n    if (\n      dropIndicatorPosition === DropIndicatorPosition.Inside ||\n      closestId === active.id ||\n      closestItem.depth + 1 > maxDragAndDropLevel\n    ) {\n      return {\n        ...currentCoordinates,\n        y: closestRect.top - collisionRect.height / 2,\n      };\n    }\n    return {\n      ...currentCoordinates,\n      y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n    };\n  }\n  // If the drop indicator is inside (or over ourselves)\n  // We are gonna go to the after position\n  // Else we are gonna go inside the over rect\n  if (\n    dropIndicatorPosition === DropIndicatorPosition.Inside ||\n    closestId === active.id ||\n    closestItem.depth + 1 > maxDragAndDropLevel\n  ) {\n    return {\n      ...currentCoordinates,\n      y: closestRect.top + collisionRect.height / 2,\n    };\n  }\n  return {\n    ...currentCoordinates,\n    y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n  };\n};\n\nexport const getTreeKeyboardCoordinates: (\n  context: SensorContext,\n  isHorizontalDnD: boolean,\n  maxDragAndDropLevel: number,\n) => KeyboardCoordinateGetter =\n  (context, isHorizontalDnD, maxDragAndDropLevel) =>\n  (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {\n    if (directions.includes(event.code)) {\n      if (!translatedRect) {\n        return undefined;\n      }\n\n      const {\n        current: { items, dropIndicatorPosition },\n      } = context;\n\n      if (!over || !active || !collisionRect) return undefined;\n\n      const args = {\n        items,\n        active,\n        over,\n        event,\n        currentCoordinates,\n        droppableContainers,\n        collisionRect,\n        dropIndicatorPosition,\n        maxDragAndDropLevel,\n      };\n\n      if (isHorizontalDnD) return undefined;\n      return getVerticalKeyboardCoordinates(args);\n    }\n    return undefined;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,kBAAwG;AAGxG,uBAAsC;AAEtC,MAAM,aAAuB,CAAC,yBAAa,MAAM,yBAAa,OAAO,yBAAa,IAAI,yBAAa;AAEnG,MAAM,aAAuB,CAAC,yBAAa,MAAM,yBAAa;AAC9D,MAAM,WAAqB,CAAC,yBAAa,IAAI,yBAAa;AAE1D,MAAM,iCAAiC,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACyD;AACzD,MAAI,WAAW,SAAS,MAAM;AAAO,WAAO;AAE5C,QAAM,WAAW,KAAK;AAEtB,QAAM,cAAoC;AAG1C,sBAAoB,QAAQ,CAAC,cAAc;AACzC,QAAI,WAAW,YAAY,CAAC,UAAU;AACpC;AAAA;AAEF,UAAM,OAAO,UAAU,KAAK;AAC5B,QAAI,QAAQ,MAAM,SAAS,yBAAa,QAAQ,cAAc,MAAM,KAAK,KAAK,WAAW;AACvF,kBAAY,KAAK;AAAA,eACR,QAAQ,MAAM,SAAS,yBAAa,MAAM,cAAc,OAAO,KAAK,WAAW;AACxF,kBAAY,KAAK;AAAA;AAAA;AAIrB,QAAM,YAAY,gCAAe;AAAA,IAC/B;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA;AAGF,QAAM,cAAc,MAAM,KAAK,CAAC,SAAS,KAAK,QAAQ;AAEtD,QAAM,iBAAiB,oBAAoB,IAAI,YAAY,MAAM;AAEjE,MAAI,CAAC,aAAa,CAAC,eAAe,CAAC;AAAgB,WAAO;AAE1D,QAAM,cAAc,6BAAY;AAEhC,MAAI,MAAM,SAAS,yBAAa,IAAI;AAIlC,QACE,0BAA0B,uCAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,aAAO;AAAA,WACF;AAAA,QACH,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA;AAAA;AAGhD,WAAO;AAAA,SACF;AAAA,MACH,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,UAAU;AAAA;AAAA;AAM/E,MACE,0BAA0B,uCAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,WAAO;AAAA,SACF;AAAA,MACH,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA;AAAA;AAGhD,SAAO;AAAA,OACF;AAAA,IACH,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,UAAU;AAAA;AAAA;AAIxE,MAAM,6BAKX,CAAC,SAAS,iBAAiB,wBAC3B,CAAC,OAAO,EAAE,oBAAoB,SAAS,EAAE,MAAM,gBAAgB,qBAAqB,QAAQ,sBAAsB;AAChH,MAAI,WAAW,SAAS,MAAM,OAAO;AACnC,QAAI,CAAC,gBAAgB;AACnB,aAAO;AAAA;AAGT,UAAM;AAAA,MACJ,SAAS,EAAE,OAAO;AAAA,QAChB;AAEJ,QAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;AAAe,aAAO;AAE/C,UAAM,OAAO;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAGF,QAAI;AAAiB,aAAO;AAC5B,WAAO,+BAA+B;AAAA;AAExC,SAAO;AAAA;",
+  "names": []
+}

package/cjs/tree/index.js

@@ -1,9 +1,28 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var useTreeDndkitConfig = require('./useTreeDndkitConfig.js');
-
-
-
-exports.useTreeDndkitConfig = useTreeDndkitConfig.useTreeDndkitConfig;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var tree_exports = {};
+var React = __toESM(require("react"));
+__reExport(tree_exports, __toESM(require("./useTreeDndkitConfig")));
+module.exports = __toCommonJS(tree_exports);
+//# sourceMappingURL=index.js.map

package/cjs/tree/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/tree/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './useTreeDndkitConfig';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,yBAAc;",
+  "names": []
+}

package/cjs/tree/types.js

@@ -1,2 +1,27 @@
-'use strict';
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var types_exports = {};
+var React = __toESM(require("react"));
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/cjs/tree/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/tree/types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import {\n  Active,\n  Announcements,\n  CollisionDetection,\n  DragCancelEvent,\n  DragEndEvent,\n  DragMoveEvent,\n  DragOverEvent,\n  DragStartEvent,\n  DroppableContainers,\n  MeasuringConfiguration,\n  Modifier,\n  Over,\n  ViewRect,\n} from '@dnd-kit/core';\nimport type { SensorDescriptor, SensorOptions } from '@dnd-kit/core/dist/sensors';\nimport type { SortingStrategy } from '@dnd-kit/sortable';\nimport { Coordinates } from '@dnd-kit/core/dist/types';\nimport React, { MutableRefObject } from 'react';\nimport { DropIndicatorPosition } from './constants';\n\nexport type Item = {\n  uid: string;\n  depth: number;\n  parentId: string;\n  realIndex: number;\n  original: Record<string, Record<string, any>>;\n};\n\nexport type DndContextPropsType = {\n  announcements: Announcements;\n  modifiers: Modifier[];\n  sensors: SensorDescriptor<SensorOptions>[];\n  measuring: Partial<MeasuringConfiguration>;\n  collisionDetection: CollisionDetection;\n  onDragStart: (e: DragStartEvent) => void;\n  onDragMove: (e: DragMoveEvent) => void;\n  onDragOver: (e: DragOverEvent) => void;\n  onDragEnd: (e: DragEndEvent) => void;\n  onDragCancel: (e: DragCancelEvent) => void;\n};\n\nexport type SortableContextPropsType = {\n  items: string[];\n  strategy: SortingStrategy;\n};\n\nexport type useTreePreviewHandlersReturn = {\n  handlePreviewDragStart: (e: DragStartEvent) => void;\n  handlePreviewDragMove: (e: DragMoveEvent) => void;\n  handlePreviewDragOver: (e: DragOverEvent) => void;\n  handlePreviewDragEnd: (e: DragEndEvent) => void;\n  handlePreviewDragCancel: (e: DragCancelEvent) => void;\n};\nexport type useTreePreviewHandlersArgs = {\n  setOverId: React.Dispatch<React.SetStateAction<string>>;\n  setActiveId: React.Dispatch<React.SetStateAction<string>>;\n  setDropIndicatorPosition: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>;\n};\n\nexport type useTreeActionHandlersArgs = useTreePreviewHandlersReturn & {\n  dropIndicatorPosition: DropIndicatorPosition;\n  flattenedItems: Item[];\n  projected: {\n    depth: number;\n    parentId: string;\n  } | null;\n  onReorder: (newData: Item[], indexes: { targetIndex: number; fromIndex: number }, considerExpanding: string) => void;\n};\n\nexport type useTreeActionHandlersReturn = {\n  onDragStart: (e: DragStartEvent) => void;\n  onDragMove: (e: DragMoveEvent) => void;\n  onDragOver: (e: DragOverEvent) => void;\n  onDragEnd: (e: DragEndEvent) => void;\n  onDragCancel: (e: DragCancelEvent) => void;\n};\n\nexport type useTreeDndkitConfigArgs = {\n  flattenedItems: Item[];\n  visibleItems: Item[];\n  isHorizontalDnD?: boolean;\n  isExpandable: boolean;\n  onReorder: (newData: Item[], indexes: { targetIndex: number; fromIndex: number }, considerExpanding: string) => void;\n  maxDragAndDropLevel: number;\n};\n\nexport type useTreeDndkitConfigReturn = {\n  dndContextProps: DndContextPropsType;\n  sortableContextProps: SortableContextPropsType;\n  activeId: string;\n  activeIndex: number;\n  overId: string;\n  depth: number;\n  dropIndicatorPosition: DropIndicatorPosition;\n  visibleItems: Item[];\n};\n\nexport type useTreeDndkitConfigType = (args: useTreeDndkitConfigArgs) => useTreeDndkitConfigReturn;\n\nexport type getKeyboardCoordinatesArgs = {\n  items: Item[];\n  active: Active;\n  over: Over;\n  event: KeyboardEvent;\n  currentCoordinates: Coordinates;\n  droppableContainers: DroppableContainers;\n  collisionRect: ViewRect;\n  dropIndicatorPosition: DropIndicatorPosition;\n  maxDragAndDropLevel: number;\n};\n\nexport type SensorContext = MutableRefObject<{\n  items: Item[];\n  dropIndicatorPosition: DropIndicatorPosition;\n  setDropIndicatorPosition: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>;\n}>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
+  "names": []
+}