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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/cjs/hierarchy/customCollisionDetection.js +44 -50
  2. package/cjs/hierarchy/customCollisionDetection.js.map +7 -0
  3. package/cjs/hierarchy/getHierarchyKeyboardCoordinates.js +78 -91
  4. package/cjs/hierarchy/getHierarchyKeyboardCoordinates.js.map +7 -0
  5. package/cjs/hierarchy/index.js +28 -9
  6. package/cjs/hierarchy/index.js.map +7 -0
  7. package/cjs/hierarchy/types.js +27 -2
  8. package/cjs/hierarchy/types.js.map +7 -0
  9. package/cjs/hierarchy/useHierarchyActionHandlers.js +53 -35
  10. package/cjs/hierarchy/useHierarchyActionHandlers.js.map +7 -0
  11. package/cjs/hierarchy/useHierarchyAnnouncements.js +45 -26
  12. package/cjs/hierarchy/useHierarchyAnnouncements.js.map +7 -0
  13. package/cjs/hierarchy/useHierarchyDndkitConfig.js +77 -83
  14. package/cjs/hierarchy/useHierarchyDndkitConfig.js.map +7 -0
  15. package/cjs/hierarchy/useHierarchyPreviewHandlers.js +48 -27
  16. package/cjs/hierarchy/useHierarchyPreviewHandlers.js.map +7 -0
  17. package/cjs/index.js +29 -11
  18. package/cjs/index.js.map +7 -0
  19. package/cjs/tree/constants.js +41 -12
  20. package/cjs/tree/constants.js.map +7 -0
  21. package/cjs/tree/customCollisionDetection.js +64 -95
  22. package/cjs/tree/customCollisionDetection.js.map +7 -0
  23. package/cjs/tree/getTreeKeyboardCoordinates.js +87 -101
  24. package/cjs/tree/getTreeKeyboardCoordinates.js.map +7 -0
  25. package/cjs/tree/index.js +28 -9
  26. package/cjs/tree/index.js.map +7 -0
  27. package/cjs/tree/types.js +27 -2
  28. package/cjs/tree/types.js.map +7 -0
  29. package/cjs/tree/useTreeActionHandlers.js +66 -56
  30. package/cjs/tree/useTreeActionHandlers.js.map +7 -0
  31. package/cjs/tree/useTreeAnnouncements.js +53 -40
  32. package/cjs/tree/useTreeAnnouncements.js.map +7 -0
  33. package/cjs/tree/useTreeDndkitConfig.js +95 -91
  34. package/cjs/tree/useTreeDndkitConfig.js.map +7 -0
  35. package/cjs/tree/useTreePreviewHandlers.js +53 -37
  36. package/cjs/tree/useTreePreviewHandlers.js.map +7 -0
  37. package/cjs/tree/utilities.js +44 -30
  38. package/cjs/tree/utilities.js.map +7 -0
  39. package/esm/hierarchy/customCollisionDetection.js +15 -46
  40. package/esm/hierarchy/customCollisionDetection.js.map +7 -0
  41. package/esm/hierarchy/getHierarchyKeyboardCoordinates.js +42 -76
  42. package/esm/hierarchy/getHierarchyKeyboardCoordinates.js.map +7 -0
  43. package/esm/hierarchy/index.js +3 -1
  44. package/esm/hierarchy/index.js.map +7 -0
  45. package/esm/hierarchy/types.js +2 -1
  46. package/esm/hierarchy/types.js.map +7 -0
  47. package/esm/hierarchy/useHierarchyActionHandlers.js +24 -31
  48. package/esm/hierarchy/useHierarchyActionHandlers.js.map +7 -0
  49. package/esm/hierarchy/useHierarchyAnnouncements.js +14 -20
  50. package/esm/hierarchy/useHierarchyAnnouncements.js.map +7 -0
  51. package/esm/hierarchy/useHierarchyDndkitConfig.js +45 -66
  52. package/esm/hierarchy/useHierarchyDndkitConfig.js.map +7 -0
  53. package/esm/hierarchy/useHierarchyPreviewHandlers.js +15 -19
  54. package/esm/hierarchy/useHierarchyPreviewHandlers.js.map +7 -0
  55. package/esm/index.js +4 -2
  56. package/esm/index.js.map +7 -0
  57. package/esm/tree/constants.js +12 -10
  58. package/esm/tree/constants.js.map +7 -0
  59. package/esm/tree/customCollisionDetection.js +33 -89
  60. package/esm/tree/customCollisionDetection.js.map +7 -0
  61. package/esm/tree/getTreeKeyboardCoordinates.js +49 -84
  62. package/esm/tree/getTreeKeyboardCoordinates.js.map +7 -0
  63. package/esm/tree/index.js +3 -1
  64. package/esm/tree/index.js.map +7 -0
  65. package/esm/tree/types.js +2 -1
  66. package/esm/tree/types.js.map +7 -0
  67. package/esm/tree/useTreeActionHandlers.js +35 -50
  68. package/esm/tree/useTreeActionHandlers.js.map +7 -0
  69. package/esm/tree/useTreeAnnouncements.js +18 -30
  70. package/esm/tree/useTreeAnnouncements.js.map +7 -0
  71. package/esm/tree/useTreeDndkitConfig.js +59 -70
  72. package/esm/tree/useTreeDndkitConfig.js.map +7 -0
  73. package/esm/tree/useTreePreviewHandlers.js +19 -28
  74. package/esm/tree/useTreePreviewHandlers.js.map +7 -0
  75. package/esm/tree/utilities.js +13 -23
  76. package/esm/tree/utilities.js.map +7 -0
  77. package/package.json +1 -1
@@ -1,46 +1,29 @@
1
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
- import 'core-js/modules/esnext.async-iterator.for-each.js';
3
- import 'core-js/modules/esnext.iterator.constructor.js';
4
- import 'core-js/modules/esnext.iterator.for-each.js';
5
- import 'core-js/modules/esnext.async-iterator.find.js';
6
- import 'core-js/modules/esnext.iterator.find.js';
7
- import 'core-js/modules/esnext.async-iterator.filter.js';
8
- import 'core-js/modules/esnext.iterator.filter.js';
9
- import { KeyboardCode, closestCorners, getViewRect } from '@dnd-kit/core';
10
- import { DropIndicatorPosition } from './constants.js';
11
-
12
- 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; }
13
-
14
- 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(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; }
1
+ import * as React from "react";
2
+ import { closestCorners, getViewRect, KeyboardCode } from "@dnd-kit/core";
3
+ import { DropIndicatorPosition } from "./constants";
15
4
  const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
16
5
  const horizontal = [KeyboardCode.Left, KeyboardCode.Right];
17
- [KeyboardCode.Up, KeyboardCode.Down];
18
-
19
- const getVerticalKeyboardCoordinates = _ref => {
20
- var _droppableContainers$, _droppableContainers$2;
21
-
22
- let {
23
- items,
24
- active,
25
- over,
26
- event,
27
- currentCoordinates,
28
- droppableContainers,
29
- collisionRect,
30
- dropIndicatorPosition,
31
- maxDragAndDropLevel
32
- } = _ref;
33
- if (horizontal.includes(event.code)) return undefined;
6
+ const vertical = [KeyboardCode.Up, KeyboardCode.Down];
7
+ const getVerticalKeyboardCoordinates = ({
8
+ items,
9
+ active,
10
+ over,
11
+ event,
12
+ currentCoordinates,
13
+ droppableContainers,
14
+ collisionRect,
15
+ dropIndicatorPosition,
16
+ maxDragAndDropLevel
17
+ }) => {
18
+ if (horizontal.includes(event.code))
19
+ return void 0;
34
20
  const overRect = over.rect;
35
- const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
36
-
37
- droppableContainers.forEach(container => {
38
- if (container !== null && container !== void 0 && container.disabled || !overRect) {
21
+ const layoutRects = [];
22
+ droppableContainers.forEach((container) => {
23
+ if (container?.disabled || !overRect) {
39
24
  return;
40
25
  }
41
-
42
26
  const rect = container.rect.current;
43
-
44
27
  if (rect && event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {
45
28
  layoutRects.push(container);
46
29
  } else if (rect && event.code === KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {
@@ -52,64 +35,44 @@ const getVerticalKeyboardCoordinates = _ref => {
52
35
  droppableContainers: layoutRects,
53
36
  active
54
37
  });
55
- const closestItem = items.find(item => item.uid === closestId);
56
- 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;
57
- if (!closestId || !closestItem || !closestElement) return undefined;
38
+ const closestItem = items.find((item) => item.uid === closestId);
39
+ const closestElement = droppableContainers.get(closestId)?.node?.current;
40
+ if (!closestId || !closestItem || !closestElement)
41
+ return void 0;
58
42
  const closestRect = getViewRect(closestElement);
59
-
60
43
  if (event.code === KeyboardCode.Up) {
61
- // If the drop indicator is inside (or over ourselves)
62
- // We are gonna go to the before position
63
- // Else we are gonna go inside the over rect
64
44
  if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
65
- return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
45
+ return {
46
+ ...currentCoordinates,
66
47
  y: closestRect.top - collisionRect.height / 2
67
- });
48
+ };
68
49
  }
69
-
70
- return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
50
+ return {
51
+ ...currentCoordinates,
71
52
  y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
72
- });
73
- } // If the drop indicator is inside (or over ourselves)
74
- // We are gonna go to the after position
75
- // Else we are gonna go inside the over rect
76
-
77
-
53
+ };
54
+ }
78
55
  if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
79
- return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
56
+ return {
57
+ ...currentCoordinates,
80
58
  y: closestRect.top + collisionRect.height / 2
81
- });
59
+ };
82
60
  }
83
-
84
- return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
61
+ return {
62
+ ...currentCoordinates,
85
63
  y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
86
- });
64
+ };
87
65
  };
88
-
89
- const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, _ref2) => {
90
- let {
91
- currentCoordinates,
92
- context: {
93
- over,
94
- translatedRect,
95
- droppableContainers,
96
- active,
97
- collisionRect
98
- }
99
- } = _ref2;
100
-
66
+ const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {
101
67
  if (directions.includes(event.code)) {
102
68
  if (!translatedRect) {
103
- return undefined;
69
+ return void 0;
104
70
  }
105
-
106
71
  const {
107
- current: {
108
- items,
109
- dropIndicatorPosition
110
- }
72
+ current: { items, dropIndicatorPosition }
111
73
  } = context;
112
- if (!over || !active || !collisionRect) return undefined;
74
+ if (!over || !active || !collisionRect)
75
+ return void 0;
113
76
  const args = {
114
77
  items,
115
78
  active,
@@ -121,11 +84,13 @@ const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLeve
121
84
  dropIndicatorPosition,
122
85
  maxDragAndDropLevel
123
86
  };
124
- if (isHorizontalDnD) return undefined;
87
+ if (isHorizontalDnD)
88
+ return void 0;
125
89
  return getVerticalKeyboardCoordinates(args);
126
90
  }
127
-
128
- return undefined;
91
+ return void 0;
92
+ };
93
+ export {
94
+ getTreeKeyboardCoordinates
129
95
  };
130
-
131
- export { getTreeKeyboardCoordinates };
96
+ //# sourceMappingURL=getTreeKeyboardCoordinates.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/getTreeKeyboardCoordinates.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
+ "mappings": "AAAA;ACAA;AAGA;AAEA,MAAM,aAAuB,CAAC,aAAa,MAAM,aAAa,OAAO,aAAa,IAAI,aAAa;AAEnG,MAAM,aAAuB,CAAC,aAAa,MAAM,aAAa;AAC9D,MAAM,WAAqB,CAAC,aAAa,IAAI,aAAa;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,aAAa,QAAQ,cAAc,MAAM,KAAK,KAAK,WAAW;AACvF,kBAAY,KAAK;AAAA,eACR,QAAQ,MAAM,SAAS,aAAa,MAAM,cAAc,OAAO,KAAK,WAAW;AACxF,kBAAY,KAAK;AAAA;AAAA;AAIrB,QAAM,YAAY,eAAe;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,YAAY;AAEhC,MAAI,MAAM,SAAS,aAAa,IAAI;AAIlC,QACE,0BAA0B,sBAAsB,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,sBAAsB,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;",
6
+ "names": []
7
+ }
package/esm/tree/index.js CHANGED
@@ -1 +1,3 @@
1
- export { useTreeDndkitConfig } from './useTreeDndkitConfig.js';
1
+ import * as React from "react";
2
+ export * from "./useTreeDndkitConfig";
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/index.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './useTreeDndkitConfig';\n"],
5
+ "mappings": "AAAA;ACAA;",
6
+ "names": []
7
+ }
package/esm/tree/types.js CHANGED
@@ -1 +1,2 @@
1
-
1
+ import * as React from "react";
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "AAAA;",
6
+ "names": []
7
+ }
@@ -1,71 +1,56 @@
1
- import { arrayMove } from '@dnd-kit/sortable';
2
- import { cloneDeep } from 'lodash';
3
- import { useCallback } from 'react';
4
- import { DropIndicatorPosition } from './constants.js';
5
-
6
- const useTreeActionHandlers = _ref => {
7
- let {
8
- handlePreviewDragStart,
9
- handlePreviewDragMove,
10
- handlePreviewDragOver,
11
- handlePreviewDragEnd,
12
- handlePreviewDragCancel,
13
- onReorder,
14
- flattenedItems,
15
- projected,
16
- dropIndicatorPosition
17
- } = _ref;
18
- const onDragStart = useCallback(e => {
1
+ import * as React from "react";
2
+ import { arrayMove } from "@dnd-kit/sortable";
3
+ import { cloneDeep } from "lodash";
4
+ import { useCallback } from "react";
5
+ import { DropIndicatorPosition } from "./constants";
6
+ const useTreeActionHandlers = ({
7
+ handlePreviewDragStart,
8
+ handlePreviewDragMove,
9
+ handlePreviewDragOver,
10
+ handlePreviewDragEnd,
11
+ handlePreviewDragCancel,
12
+ onReorder,
13
+ flattenedItems,
14
+ projected,
15
+ dropIndicatorPosition
16
+ }) => {
17
+ const onDragStart = useCallback((e) => {
19
18
  handlePreviewDragStart(e);
20
19
  }, [handlePreviewDragStart]);
21
- const onDragMove = useCallback(e => {
20
+ const onDragMove = useCallback((e) => {
22
21
  handlePreviewDragMove(e);
23
22
  }, [handlePreviewDragMove]);
24
- const onDragOver = useCallback(e => {
23
+ const onDragOver = useCallback((e) => {
25
24
  handlePreviewDragOver(e);
26
25
  }, [handlePreviewDragOver]);
27
- const onDragEnd = useCallback(e => {
26
+ const onDragEnd = useCallback((e) => {
28
27
  handlePreviewDragEnd(e);
29
- const {
30
- active,
31
- over
32
- } = e;
33
- if (over === null) return;
34
- const activeIndex = flattenedItems.findIndex(item => item.uid === active.id);
28
+ const { active, over } = e;
29
+ if (over === null)
30
+ return;
31
+ const activeIndex = flattenedItems.findIndex((item) => item.uid === active.id);
35
32
  let considerExpanding = null;
36
- let overIndex = flattenedItems.findIndex(item => item.uid === over.id); // If drop indicator is inside, then put it last,
37
- // It will be reconstructed well later
38
-
33
+ let overIndex = flattenedItems.findIndex((item) => item.uid === over.id);
39
34
  if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
40
- var _flattenedItems$overI, _flattenedItems$overI2;
41
-
42
35
  considerExpanding = over.id;
43
- overIndex = flattenedItems[overIndex].realIndex + ((_flattenedItems$overI = (_flattenedItems$overI2 = flattenedItems[overIndex].original.subRows) === null || _flattenedItems$overI2 === void 0 ? void 0 : _flattenedItems$overI2.length) !== null && _flattenedItems$overI !== void 0 ? _flattenedItems$overI : 0) + 1;
44
- } // If we are dropping the item in a new position, or new depth
45
-
46
-
36
+ overIndex = flattenedItems[overIndex].realIndex + (flattenedItems[overIndex].original.subRows?.length ?? 0) + 1;
37
+ }
47
38
  if (projected && (activeIndex !== overIndex || flattenedItems[activeIndex].depth !== projected.depth)) {
48
- // Change parent and depth from projected data
49
39
  flattenedItems[activeIndex].parentId = projected.parentId;
50
- flattenedItems[activeIndex].depth = projected.depth; // If same index, don't move the array, just copy it
51
-
40
+ flattenedItems[activeIndex].depth = projected.depth;
52
41
  const newFlattenedData = activeIndex !== overIndex ? arrayMove(flattenedItems, activeIndex, overIndex) : cloneDeep(flattenedItems);
53
42
  onReorder(newFlattenedData, {
54
43
  targetIndex: overIndex,
55
44
  fromIndex: activeIndex
56
- }, considerExpanding || '');
45
+ }, considerExpanding || "");
57
46
  }
58
47
  }, [handlePreviewDragEnd, flattenedItems, projected, onReorder, dropIndicatorPosition]);
59
- const onDragCancel = useCallback(e => {
48
+ const onDragCancel = useCallback((e) => {
60
49
  handlePreviewDragCancel(e);
61
50
  }, [handlePreviewDragCancel]);
62
- return {
63
- onDragStart,
64
- onDragMove,
65
- onDragOver,
66
- onDragEnd,
67
- onDragCancel
68
- };
51
+ return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };
52
+ };
53
+ export {
54
+ useTreeActionHandlers
69
55
  };
70
-
71
- export { useTreeActionHandlers };
56
+ //# sourceMappingURL=useTreeActionHandlers.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/useTreeActionHandlers.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { arrayMove } from '@dnd-kit/sortable';\nimport { cloneDeep } from 'lodash';\nimport { useCallback } from 'react';\nimport type { DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, DragCancelEvent } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants';\nimport type { useTreeActionHandlersReturn, useTreeActionHandlersArgs } from './types';\n\nexport const useTreeActionHandlers = ({\n handlePreviewDragStart,\n handlePreviewDragMove,\n handlePreviewDragOver,\n handlePreviewDragEnd,\n handlePreviewDragCancel,\n onReorder,\n flattenedItems,\n projected,\n dropIndicatorPosition,\n}: useTreeActionHandlersArgs): useTreeActionHandlersReturn => {\n const onDragStart = useCallback(\n (e: DragStartEvent) => {\n handlePreviewDragStart(e);\n },\n [handlePreviewDragStart],\n );\n\n const onDragMove = useCallback(\n (e: DragMoveEvent) => {\n handlePreviewDragMove(e);\n },\n [handlePreviewDragMove],\n );\n\n const onDragOver = useCallback(\n (e: DragOverEvent) => {\n handlePreviewDragOver(e);\n },\n [handlePreviewDragOver],\n );\n\n const onDragEnd = useCallback(\n (e: DragEndEvent) => {\n handlePreviewDragEnd(e);\n const { active, over } = e;\n\n if (over === null) return;\n\n const activeIndex = flattenedItems.findIndex((item) => item.uid === active.id);\n\n let considerExpanding = null;\n\n let overIndex = flattenedItems.findIndex((item) => item.uid === over.id);\n // If drop indicator is inside, then put it last,\n // It will be reconstructed well later\n if (dropIndicatorPosition === DropIndicatorPosition.Inside) {\n considerExpanding = over.id;\n overIndex = flattenedItems[overIndex].realIndex + (flattenedItems[overIndex].original.subRows?.length ?? 0) + 1;\n }\n\n // If we are dropping the item in a new position, or new depth\n if (projected && (activeIndex !== overIndex || flattenedItems[activeIndex].depth !== projected.depth)) {\n // Change parent and depth from projected data\n flattenedItems[activeIndex].parentId = projected.parentId;\n flattenedItems[activeIndex].depth = projected.depth;\n\n // If same index, don't move the array, just copy it\n const newFlattenedData =\n activeIndex !== overIndex ? arrayMove(flattenedItems, activeIndex, overIndex) : cloneDeep(flattenedItems);\n\n onReorder(\n newFlattenedData,\n {\n targetIndex: overIndex,\n fromIndex: activeIndex,\n },\n considerExpanding || '',\n );\n }\n },\n [handlePreviewDragEnd, flattenedItems, projected, onReorder, dropIndicatorPosition],\n );\n\n const onDragCancel = useCallback(\n (e: DragCancelEvent) => {\n handlePreviewDragCancel(e);\n },\n [handlePreviewDragCancel],\n );\n\n return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };\n};\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAGO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC4D;AAC5D,QAAM,cAAc,YAClB,CAAC,MAAsB;AACrB,2BAAuB;AAAA,KAEzB,CAAC;AAGH,QAAM,aAAa,YACjB,CAAC,MAAqB;AACpB,0BAAsB;AAAA,KAExB,CAAC;AAGH,QAAM,aAAa,YACjB,CAAC,MAAqB;AACpB,0BAAsB;AAAA,KAExB,CAAC;AAGH,QAAM,YAAY,YAChB,CAAC,MAAoB;AACnB,yBAAqB;AACrB,UAAM,EAAE,QAAQ,SAAS;AAEzB,QAAI,SAAS;AAAM;AAEnB,UAAM,cAAc,eAAe,UAAU,CAAC,SAAS,KAAK,QAAQ,OAAO;AAE3E,QAAI,oBAAoB;AAExB,QAAI,YAAY,eAAe,UAAU,CAAC,SAAS,KAAK,QAAQ,KAAK;AAGrE,QAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,0BAAoB,KAAK;AACzB,kBAAY,eAAe,WAAW,YAAa,gBAAe,WAAW,SAAS,SAAS,UAAU,KAAK;AAAA;AAIhH,QAAI,aAAc,iBAAgB,aAAa,eAAe,aAAa,UAAU,UAAU,QAAQ;AAErG,qBAAe,aAAa,WAAW,UAAU;AACjD,qBAAe,aAAa,QAAQ,UAAU;AAG9C,YAAM,mBACJ,gBAAgB,YAAY,UAAU,gBAAgB,aAAa,aAAa,UAAU;AAE5F,gBACE,kBACA;AAAA,QACE,aAAa;AAAA,QACb,WAAW;AAAA,SAEb,qBAAqB;AAAA;AAAA,KAI3B,CAAC,sBAAsB,gBAAgB,WAAW,WAAW;AAG/D,QAAM,eAAe,YACnB,CAAC,MAAuB;AACtB,4BAAwB;AAAA,KAE1B,CAAC;AAGH,SAAO,EAAE,aAAa,YAAY,YAAY,WAAW;AAAA;",
6
+ "names": []
7
+ }
@@ -1,51 +1,39 @@
1
- import { useCallback } from 'react';
2
- import { DropIndicatorPosition } from './constants.js';
3
-
1
+ import * as React from "react";
2
+ import { useCallback } from "react";
3
+ import { DropIndicatorPosition } from "./constants";
4
4
  const useTreeAnnouncements = (visibleItemsDictionary, dropIndicatorPosition) => {
5
- const onDragStart = useCallback(id => "Picked up draggable item from position ".concat(visibleItemsDictionary[id].realIndex + 1, "."), [visibleItemsDictionary]);
5
+ const onDragStart = useCallback((id) => `Picked up draggable item from position ${visibleItemsDictionary[id].realIndex + 1}.`, [visibleItemsDictionary]);
6
6
  const onDragMove = useCallback((id, overId) => {
7
7
  if (overId) {
8
8
  const overIndex = visibleItemsDictionary[overId].realIndex + 1;
9
-
10
9
  if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
11
- return "Draggable item was moved inside the item at position ".concat(overIndex, ".");
10
+ return `Draggable item was moved inside the item at position ${overIndex}.`;
12
11
  }
13
-
14
12
  if (dropIndicatorPosition === DropIndicatorPosition.Before) {
15
- return "Draggable item was moved to position ".concat(overIndex - 1, ".");
13
+ return `Draggable item was moved to position ${overIndex - 1}.`;
16
14
  }
17
-
18
- return "Draggable item was moved to position ".concat(overIndex, ".");
15
+ return `Draggable item was moved to position ${overIndex}.`;
19
16
  }
20
-
21
- return "Draggable item is no longer over a droppable area.";
17
+ return `Draggable item is no longer over a droppable area.`;
22
18
  }, [visibleItemsDictionary, dropIndicatorPosition]);
23
19
  const onDragOver = onDragMove;
24
20
  const onDragEnd = useCallback((id, overId) => {
25
21
  if (overId) {
26
22
  const overIndex = visibleItemsDictionary[overId].realIndex + 1;
27
-
28
23
  if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
29
- return "Draggable item was dropped inside the item at position ".concat(overIndex, ".");
24
+ return `Draggable item was dropped inside the item at position ${overIndex}.`;
30
25
  }
31
-
32
26
  if (dropIndicatorPosition === DropIndicatorPosition.Before) {
33
- return "Draggable item was dropped over position ".concat(overIndex - 1, ".");
27
+ return `Draggable item was dropped over position ${overIndex - 1}.`;
34
28
  }
35
-
36
- return "Draggable item was dropped over position ".concat(overIndex, ".");
29
+ return `Draggable item was dropped over position ${overIndex}.`;
37
30
  }
38
-
39
- return "Draggable item was dropped at it's original position.";
31
+ return `Draggable item was dropped at it's original position.`;
40
32
  }, [dropIndicatorPosition, visibleItemsDictionary]);
41
- const onDragCancel = useCallback(id => "Dragging was cancelled. Draggable item from position ".concat(visibleItemsDictionary[id].realIndex + 1, " was dropped at it's initial position."), [visibleItemsDictionary]);
42
- return {
43
- onDragStart,
44
- onDragOver,
45
- onDragMove,
46
- onDragEnd,
47
- onDragCancel
48
- };
33
+ const onDragCancel = useCallback((id) => `Dragging was cancelled. Draggable item from position ${visibleItemsDictionary[id].realIndex + 1} was dropped at it's initial position.`, [visibleItemsDictionary]);
34
+ return { onDragStart, onDragOver, onDragMove, onDragEnd, onDragCancel };
49
35
  };
50
-
51
- export { useTreeAnnouncements };
36
+ export {
37
+ useTreeAnnouncements
38
+ };
39
+ //# sourceMappingURL=useTreeAnnouncements.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/useTreeAnnouncements.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Announcements } from '@dnd-kit/core';\nimport { useCallback } from 'react';\nimport { DropIndicatorPosition } from './constants';\nimport { Item } from './types';\n\nexport const useTreeAnnouncements = (\n visibleItemsDictionary: Record<string, Item>,\n dropIndicatorPosition: DropIndicatorPosition,\n): Announcements => {\n const onDragStart = useCallback(\n (id: string) => `Picked up draggable item from position ${visibleItemsDictionary[id].realIndex + 1}.`,\n [visibleItemsDictionary],\n );\n\n const onDragMove = useCallback(\n (id: string, overId: string) => {\n if (overId) {\n const overIndex = visibleItemsDictionary[overId].realIndex + 1;\n if (dropIndicatorPosition === DropIndicatorPosition.Inside) {\n return `Draggable item was moved inside the item at position ${overIndex}.`;\n }\n if (dropIndicatorPosition === DropIndicatorPosition.Before) {\n return `Draggable item was moved to position ${overIndex - 1}.`;\n }\n return `Draggable item was moved to position ${overIndex}.`;\n }\n\n return `Draggable item is no longer over a droppable area.`;\n },\n [visibleItemsDictionary, dropIndicatorPosition],\n );\n\n const onDragOver = onDragMove;\n\n const onDragEnd = useCallback(\n (id: string, overId: string) => {\n if (overId) {\n const overIndex = visibleItemsDictionary[overId].realIndex + 1;\n if (dropIndicatorPosition === DropIndicatorPosition.Inside) {\n return `Draggable item was dropped inside the item at position ${overIndex}.`;\n }\n if (dropIndicatorPosition === DropIndicatorPosition.Before) {\n return `Draggable item was dropped over position ${overIndex - 1}.`;\n }\n return `Draggable item was dropped over position ${overIndex}.`;\n }\n\n return `Draggable item was dropped at it's original position.`;\n },\n [dropIndicatorPosition, visibleItemsDictionary],\n );\n\n const onDragCancel = useCallback(\n (id: string) =>\n `Dragging was cancelled. Draggable item from position ${\n visibleItemsDictionary[id].realIndex + 1\n } was dropped at it's initial position.`,\n [visibleItemsDictionary],\n );\n\n return { onDragStart, onDragOver, onDragMove, onDragEnd, onDragCancel };\n};\n"],
5
+ "mappings": "AAAA;ACCA;AACA;AAGO,MAAM,uBAAuB,CAClC,wBACA,0BACkB;AAClB,QAAM,cAAc,YAClB,CAAC,OAAe,0CAA0C,uBAAuB,IAAI,YAAY,MACjG,CAAC;AAGH,QAAM,aAAa,YACjB,CAAC,IAAY,WAAmB;AAC9B,QAAI,QAAQ;AACV,YAAM,YAAY,uBAAuB,QAAQ,YAAY;AAC7D,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,wDAAwD;AAAA;AAEjE,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,wCAAwC,YAAY;AAAA;AAE7D,aAAO,wCAAwC;AAAA;AAGjD,WAAO;AAAA,KAET,CAAC,wBAAwB;AAG3B,QAAM,aAAa;AAEnB,QAAM,YAAY,YAChB,CAAC,IAAY,WAAmB;AAC9B,QAAI,QAAQ;AACV,YAAM,YAAY,uBAAuB,QAAQ,YAAY;AAC7D,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,0DAA0D;AAAA;AAEnE,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,4CAA4C,YAAY;AAAA;AAEjE,aAAO,4CAA4C;AAAA;AAGrD,WAAO;AAAA,KAET,CAAC,uBAAuB;AAG1B,QAAM,eAAe,YACnB,CAAC,OACC,wDACE,uBAAuB,IAAI,YAAY,2CAE3C,CAAC;AAGH,SAAO,EAAE,aAAa,YAAY,YAAY,WAAW;AAAA;",
6
+ "names": []
7
+ }
@@ -1,78 +1,53 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.filter.js';
3
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
4
- import 'core-js/modules/web.dom-collections.iterator.js';
5
- import 'core-js/modules/esnext.async-iterator.map.js';
6
- import 'core-js/modules/esnext.iterator.map.js';
7
- import 'core-js/modules/esnext.async-iterator.for-each.js';
8
- import 'core-js/modules/esnext.iterator.constructor.js';
9
- import 'core-js/modules/esnext.iterator.for-each.js';
10
- import { useState, useMemo, useRef, useEffect } from 'react';
11
- import { MeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor } from '@dnd-kit/core';
12
- import { horizontalListSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
13
- import { useTreePreviewHandlers } from './useTreePreviewHandlers.js';
14
- import { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates.js';
15
- import { removeChildrenOf, getProjection } from './utilities.js';
16
- import { useTreeActionHandlers } from './useTreeActionHandlers.js';
17
- import { DropIndicatorPosition } from './constants.js';
18
- import { customCollisionDetection } from './customCollisionDetection.js';
19
- import { useTreeAnnouncements } from './useTreeAnnouncements.js';
20
-
21
- 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; }
22
-
23
- 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(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; }
24
- // if second parameter is true, the space will be done on the horizontal axis
25
-
26
- const adjustTranslate = isHorizontalDnD => _ref => {
27
- let {
28
- transform
29
- } = _ref;
30
-
31
- const newTransform = _objectSpread({}, transform);
32
-
1
+ import * as React from "react";
2
+ import { useState, useEffect, useMemo, useRef } from "react";
3
+ import {
4
+ useSensor,
5
+ useSensors,
6
+ KeyboardSensor,
7
+ PointerSensor,
8
+ MeasuringStrategy
9
+ } from "@dnd-kit/core";
10
+ import { horizontalListSortingStrategy, verticalListSortingStrategy } from "@dnd-kit/sortable";
11
+ import { useTreePreviewHandlers } from "./useTreePreviewHandlers";
12
+ import { getTreeKeyboardCoordinates } from "./getTreeKeyboardCoordinates";
13
+ import { getProjection, removeChildrenOf } from "./utilities";
14
+ import { useTreeActionHandlers } from "./useTreeActionHandlers";
15
+ import { DropIndicatorPosition } from "./constants";
16
+ import { customCollisionDetection } from "./customCollisionDetection";
17
+ import { useTreeAnnouncements } from "./useTreeAnnouncements";
18
+ const adjustTranslate = (isHorizontalDnD) => ({ transform }) => {
19
+ const newTransform = {
20
+ ...transform
21
+ };
33
22
  if (isHorizontalDnD) {
34
23
  newTransform.x = transform.x + 25;
35
24
  } else {
36
25
  newTransform.x = transform.x + 15;
37
26
  }
38
-
39
27
  return newTransform;
40
28
  };
41
-
42
29
  const measuring = {
43
30
  droppable: {
44
31
  strategy: MeasuringStrategy.BeforeDragging
45
32
  }
46
33
  };
47
- const useTreeDndkitConfig = _ref2 => {
48
- var _visibleItemsDictiona, _visibleItemsDictiona2;
49
-
50
- let {
51
- flattenedItems,
52
- visibleItems: preVisibleItems,
53
- isHorizontalDnD = false,
54
- isExpandable = false,
55
- onReorder,
56
- maxDragAndDropLevel
57
- } = _ref2;
58
- const [activeId, setActiveId] = useState('');
59
- const [overId, setOverId] = useState('');
34
+ const useTreeDndkitConfig = ({
35
+ flattenedItems,
36
+ visibleItems: preVisibleItems,
37
+ isHorizontalDnD = false,
38
+ isExpandable = false,
39
+ onReorder,
40
+ maxDragAndDropLevel
41
+ }) => {
42
+ const [activeId, setActiveId] = useState("");
43
+ const [overId, setOverId] = useState("");
60
44
  const [dropIndicatorPosition, setDropIndicatorPosition] = useState(DropIndicatorPosition.None);
61
- const [lastPosition, setLastPosition] = useState(''); // Remove activeId's children
62
-
63
- const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]); // Sorted ids for the library
64
-
65
- const sortedIds = useMemo(() => visibleItems.map(item => item.uid), [visibleItems]);
66
- /**
67
- * Dictionary from UID to ITEM
68
- * This dictionary is computed since on every DnD move, I need to know the
69
- * depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)
70
- */
71
-
45
+ const [lastPosition, setLastPosition] = useState("");
46
+ const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]);
47
+ const sortedIds = useMemo(() => visibleItems.map((item) => item.uid), [visibleItems]);
72
48
  const visibleItemsDictionary = useMemo(() => {
73
- // Using plain for to achieve O(#ITEMS) performance
74
49
  const dictionary = {};
75
- visibleItems.forEach(item => {
50
+ visibleItems.forEach((item) => {
76
51
  dictionary[item.uid] = item;
77
52
  });
78
53
  return dictionary;
@@ -93,28 +68,40 @@ const useTreeDndkitConfig = _ref2 => {
93
68
  const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
94
69
  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
95
70
  coordinateGetter
96
- })); // where is the activeItem being positioned (depth and parent)
97
-
71
+ }));
98
72
  const projected = useMemo(() => overId ? getProjection(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null, [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable]);
99
73
  const dragPreviewHandlers = useTreePreviewHandlers({
100
74
  setActiveId,
101
75
  setOverId,
102
76
  setDropIndicatorPosition
103
77
  });
104
- const dragActionHandlers = useTreeActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
78
+ const dragActionHandlers = useTreeActionHandlers({
79
+ ...dragPreviewHandlers,
105
80
  onReorder,
106
81
  projected,
107
82
  flattenedItems,
108
83
  dropIndicatorPosition
109
- }));
84
+ });
110
85
  const announcements = useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);
111
- const dndContextProps = useMemo(() => _objectSpread({
86
+ const dndContextProps = useMemo(() => ({
112
87
  announcements,
113
88
  modifiers,
114
89
  sensors,
115
90
  measuring,
116
- collisionDetection: customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition)
117
- }, dragActionHandlers), [announcements, modifiers, sensors, dragActionHandlers, visibleItemsDictionary, setDropIndicatorPosition, activeId, maxDragAndDropLevel, lastPosition, setLastPosition]);
91
+ collisionDetection: customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition),
92
+ ...dragActionHandlers
93
+ }), [
94
+ announcements,
95
+ modifiers,
96
+ sensors,
97
+ dragActionHandlers,
98
+ visibleItemsDictionary,
99
+ setDropIndicatorPosition,
100
+ activeId,
101
+ maxDragAndDropLevel,
102
+ lastPosition,
103
+ setLastPosition
104
+ ]);
118
105
  const sortableContextProps = useMemo(() => ({
119
106
  items: sortedIds,
120
107
  strategy: isHorizontalDnD ? horizontalListSortingStrategy : verticalListSortingStrategy
@@ -123,12 +110,14 @@ const useTreeDndkitConfig = _ref2 => {
123
110
  dndContextProps,
124
111
  sortableContextProps,
125
112
  activeId,
126
- activeIndex: (_visibleItemsDictiona = (_visibleItemsDictiona2 = visibleItemsDictionary[activeId]) === null || _visibleItemsDictiona2 === void 0 ? void 0 : _visibleItemsDictiona2.realIndex) !== null && _visibleItemsDictiona !== void 0 ? _visibleItemsDictiona : -1,
113
+ activeIndex: visibleItemsDictionary[activeId]?.realIndex ?? -1,
127
114
  overId,
128
115
  depth: projected ? projected.depth : 0,
129
116
  dropIndicatorPosition,
130
117
  visibleItems
131
118
  };
132
119
  };
133
-
134
- export { useTreeDndkitConfig };
120
+ export {
121
+ useTreeDndkitConfig
122
+ };
123
+ //# sourceMappingURL=useTreeDndkitConfig.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/useTreeDndkitConfig.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef } from 'react';\nimport {\n useSensor,\n useSensors,\n KeyboardSensor,\n PointerSensor,\n MeasuringConfiguration,\n MeasuringStrategy,\n Modifier,\n} from '@dnd-kit/core';\nimport { horizontalListSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates';\nimport { getProjection, removeChildrenOf } from './utilities';\nimport { useTreeActionHandlers } from './useTreeActionHandlers';\nimport type { useTreeDndkitConfigType, SensorContext, Item } from './types';\nimport { DropIndicatorPosition } from './constants';\nimport { customCollisionDetection } from './customCollisionDetection';\nimport { useTreeAnnouncements } from './useTreeAnnouncements';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nconst adjustTranslate =\n (isHorizontalDnD: boolean): Modifier =>\n ({ transform }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n }\n return newTransform;\n };\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.BeforeDragging,\n },\n};\n\nexport const useTreeDndkitConfig: useTreeDndkitConfigType = ({\n flattenedItems,\n visibleItems: preVisibleItems,\n isHorizontalDnD = false,\n isExpandable = false,\n onReorder,\n maxDragAndDropLevel,\n}) => {\n const [activeId, setActiveId] = useState<string>('');\n const [overId, setOverId] = useState<string>('');\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DropIndicatorPosition>(DropIndicatorPosition.None);\n const [lastPosition, setLastPosition] = useState<string>('');\n\n // Remove activeId's children\n const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]);\n\n // Sorted ids for the library\n const sortedIds = useMemo(() => visibleItems.map((item) => item.uid), [visibleItems]);\n\n /**\n * Dictionary from UID to ITEM\n * This dictionary is computed since on every DnD move, I need to know the\n * depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)\n */\n const visibleItemsDictionary = useMemo(() => {\n // Using plain for to achieve O(#ITEMS) performance\n const dictionary: Record<string, Item> = {};\n visibleItems.forEach((item) => {\n dictionary[item.uid] = item;\n });\n return dictionary;\n }, [visibleItems]);\n\n const modifiers: Modifier[] = useMemo(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);\n\n const sensorContext: SensorContext = useRef({\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n });\n\n useEffect(() => {\n sensorContext.current = {\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n };\n }, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);\n\n const coordinateGetter = useMemo(\n () => getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel),\n [sensorContext, isHorizontalDnD, maxDragAndDropLevel],\n );\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter,\n }),\n );\n\n // where is the activeItem being positioned (depth and parent)\n const projected = useMemo(\n () =>\n overId ? getProjection(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null,\n [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable],\n );\n\n const dragPreviewHandlers = useTreePreviewHandlers({\n setActiveId,\n setOverId,\n setDropIndicatorPosition,\n });\n\n const dragActionHandlers = useTreeActionHandlers({\n ...dragPreviewHandlers,\n onReorder,\n projected,\n flattenedItems,\n dropIndicatorPosition,\n });\n\n const announcements = useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);\n\n const dndContextProps = useMemo(\n () => ({\n announcements,\n modifiers,\n sensors,\n measuring,\n collisionDetection: customCollisionDetection(\n activeId,\n visibleItemsDictionary,\n setDropIndicatorPosition,\n maxDragAndDropLevel,\n lastPosition,\n setLastPosition,\n ),\n ...dragActionHandlers,\n }),\n [\n announcements,\n modifiers,\n sensors,\n dragActionHandlers,\n visibleItemsDictionary,\n setDropIndicatorPosition,\n activeId,\n maxDragAndDropLevel,\n lastPosition,\n setLastPosition,\n ],\n );\n\n const sortableContextProps = useMemo(\n () => ({\n items: sortedIds,\n strategy: isHorizontalDnD ? horizontalListSortingStrategy : verticalListSortingStrategy,\n }),\n [sortedIds, isHorizontalDnD],\n );\n\n return {\n dndContextProps,\n sortableContextProps,\n activeId,\n activeIndex: visibleItemsDictionary[activeId]?.realIndex ?? -1,\n overId,\n depth: projected ? projected.depth : 0,\n dropIndicatorPosition,\n visibleItems,\n };\n};\n"],
5
+ "mappings": "AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAIA,MAAM,kBACJ,CAAC,oBACD,CAAC,EAAE,gBAAgB;AACjB,QAAM,eAAe;AAAA,OAChB;AAAA;AAEL,MAAI,iBAAiB;AACnB,iBAAa,IAAI,UAAU,IAAI;AAAA,SAC1B;AACL,iBAAa,IAAI,UAAU,IAAI;AAAA;AAEjC,SAAO;AAAA;AAGX,MAAM,YAA6C;AAAA,EACjD,WAAW;AAAA,IACT,UAAU,kBAAkB;AAAA;AAAA;AAIzB,MAAM,sBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,MACI;AACJ,QAAM,CAAC,UAAU,eAAe,SAAiB;AACjD,QAAM,CAAC,QAAQ,aAAa,SAAiB;AAC7C,QAAM,CAAC,uBAAuB,4BAA4B,SAAgC,sBAAsB;AAChH,QAAM,CAAC,cAAc,mBAAmB,SAAiB;AAGzD,QAAM,eAAe,QAAQ,MAAM,iBAAiB,iBAAiB,WAAW,CAAC,iBAAiB;AAGlG,QAAM,YAAY,QAAQ,MAAM,aAAa,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC;AAOvE,QAAM,yBAAyB,QAAQ,MAAM;AAE3C,UAAM,aAAmC;AACzC,iBAAa,QAAQ,CAAC,SAAS;AAC7B,iBAAW,KAAK,OAAO;AAAA;AAEzB,WAAO;AAAA,KACN,CAAC;AAEJ,QAAM,YAAwB,QAAQ,MAAM,CAAC,gBAAgB,mBAAmB,CAAC;AAEjF,QAAM,gBAA+B,OAAO;AAAA,IAC1C,OAAO;AAAA,IACP;AAAA,IACA;AAAA;AAGF,YAAU,MAAM;AACd,kBAAc,UAAU;AAAA,MACtB,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,KAED,CAAC,cAAc,uBAAuB;AAEzC,QAAM,mBAAmB,QACvB,MAAM,2BAA2B,eAAe,iBAAiB,sBACjE,CAAC,eAAe,iBAAiB;AAGnC,QAAM,UAAU,WACd,UAAU,gBACV,UAAU,gBAAgB;AAAA,IACxB;AAAA;AAKJ,QAAM,YAAY,QAChB,MACE,SAAS,cAAc,cAAc,wBAAwB,QAAQ,uBAAuB,gBAAgB,MAC9G,CAAC,QAAQ,cAAc,wBAAwB,uBAAuB;AAGxE,QAAM,sBAAsB,uBAAuB;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,qBAAqB,sBAAsB;AAAA,OAC5C;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,gBAAgB,qBAAqB,wBAAwB;AAEnE,QAAM,kBAAkB,QACtB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,yBAClB,UACA,wBACA,0BACA,qBACA,cACA;AAAA,OAEC;AAAA,MAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIJ,QAAM,uBAAuB,QAC3B,MAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU,kBAAkB,gCAAgC;AAAA,MAE9D,CAAC,WAAW;AAGd,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,uBAAuB,WAAW,aAAa;AAAA,IAC5D;AAAA,IACA,OAAO,YAAY,UAAU,QAAQ;AAAA,IACrC;AAAA,IACA;AAAA;AAAA;",
6
+ "names": []
7
+ }