@elliemae/ds-drag-and-drop 2.0.0-alpha.12

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 (58) hide show
  1. package/cjs/hierarchy/customCollisionDetection.js +70 -0
  2. package/cjs/hierarchy/getHierarchyKeyboardCoordinates.js +121 -0
  3. package/cjs/hierarchy/index.js +9 -0
  4. package/cjs/hierarchy/types.js +2 -0
  5. package/cjs/hierarchy/useHierarchyActionHandlers.js +50 -0
  6. package/cjs/hierarchy/useHierarchyAnnouncements.js +36 -0
  7. package/cjs/hierarchy/useHierarchyDndkitConfig.js +119 -0
  8. package/cjs/hierarchy/useHierarchyPreviewHandlers.js +43 -0
  9. package/cjs/index.js +11 -0
  10. package/cjs/tree/constants.js +12 -0
  11. package/cjs/tree/customCollisionDetection.js +137 -0
  12. package/cjs/tree/getTreeKeyboardCoordinates.js +139 -0
  13. package/cjs/tree/index.js +9 -0
  14. package/cjs/tree/types.js +2 -0
  15. package/cjs/tree/useTreeActionHandlers.js +75 -0
  16. package/cjs/tree/useTreeAnnouncements.js +55 -0
  17. package/cjs/tree/useTreeDndkitConfig.js +142 -0
  18. package/cjs/tree/useTreePreviewHandlers.js +54 -0
  19. package/cjs/tree/utilities.js +52 -0
  20. package/esm/hierarchy/customCollisionDetection.js +66 -0
  21. package/esm/hierarchy/getHierarchyKeyboardCoordinates.js +113 -0
  22. package/esm/hierarchy/index.js +1 -0
  23. package/esm/hierarchy/types.js +1 -0
  24. package/esm/hierarchy/useHierarchyActionHandlers.js +46 -0
  25. package/esm/hierarchy/useHierarchyAnnouncements.js +32 -0
  26. package/esm/hierarchy/useHierarchyDndkitConfig.js +111 -0
  27. package/esm/hierarchy/useHierarchyPreviewHandlers.js +39 -0
  28. package/esm/index.js +2 -0
  29. package/esm/tree/constants.js +10 -0
  30. package/esm/tree/customCollisionDetection.js +133 -0
  31. package/esm/tree/getTreeKeyboardCoordinates.js +131 -0
  32. package/esm/tree/index.js +1 -0
  33. package/esm/tree/types.js +1 -0
  34. package/esm/tree/useTreeActionHandlers.js +71 -0
  35. package/esm/tree/useTreeAnnouncements.js +51 -0
  36. package/esm/tree/useTreeDndkitConfig.js +134 -0
  37. package/esm/tree/useTreePreviewHandlers.js +50 -0
  38. package/esm/tree/utilities.js +47 -0
  39. package/package.json +125 -0
  40. package/types/hierarchy/customCollisionDetection.d.ts +3 -0
  41. package/types/hierarchy/getHierarchyKeyboardCoordinates.d.ts +3 -0
  42. package/types/hierarchy/index.d.ts +1 -0
  43. package/types/hierarchy/types.d.ts +80 -0
  44. package/types/hierarchy/useHierarchyActionHandlers.d.ts +1 -0
  45. package/types/hierarchy/useHierarchyAnnouncements.d.ts +3 -0
  46. package/types/hierarchy/useHierarchyDndkitConfig.d.ts +2 -0
  47. package/types/hierarchy/useHierarchyPreviewHandlers.d.ts +2 -0
  48. package/types/index.d.ts +2 -0
  49. package/types/tree/constants.d.ts +6 -0
  50. package/types/tree/customCollisionDetection.d.ts +4 -0
  51. package/types/tree/getTreeKeyboardCoordinates.d.ts +3 -0
  52. package/types/tree/index.d.ts +1 -0
  53. package/types/tree/types.d.ts +98 -0
  54. package/types/tree/useTreeActionHandlers.d.ts +2 -0
  55. package/types/tree/useTreeAnnouncements.d.ts +4 -0
  56. package/types/tree/useTreeDndkitConfig.d.ts +2 -0
  57. package/types/tree/useTreePreviewHandlers.d.ts +2 -0
  58. package/types/tree/utilities.d.ts +7 -0
@@ -0,0 +1,113 @@
1
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
+ import 'core-js/modules/esnext.async-iterator.find.js';
3
+ import 'core-js/modules/esnext.iterator.constructor.js';
4
+ import 'core-js/modules/esnext.iterator.find.js';
5
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
6
+ import 'core-js/modules/esnext.iterator.for-each.js';
7
+ import 'core-js/modules/esnext.async-iterator.filter.js';
8
+ import 'core-js/modules/esnext.iterator.filter.js';
9
+ import { KeyboardCode, getViewRect, closestCorners } from '@dnd-kit/core';
10
+
11
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
12
+
13
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
14
+ const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
15
+ const vertical = [KeyboardCode.Up, KeyboardCode.Down];
16
+
17
+ const getHorizontalKeyboardCoordinates = _ref => {
18
+ var _droppableContainers$, _droppableContainers$2, _droppableContainers$3, _droppableContainers$4;
19
+
20
+ let {
21
+ items,
22
+ active,
23
+ over,
24
+ event,
25
+ currentCoordinates,
26
+ droppableContainers,
27
+ collisionRect
28
+ } = _ref;
29
+ if (vertical.includes(event.code) || !active || !over) return undefined;
30
+ const activeItem = items.find(item => item.id === active.id);
31
+ const overRect = over.rect;
32
+ const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
33
+
34
+ droppableContainers.forEach(container => {
35
+ var _items$find;
36
+
37
+ if (container !== null && container !== void 0 && container.disabled || !overRect) {
38
+ return;
39
+ }
40
+
41
+ const node = container === null || container === void 0 ? void 0 : container.node.current;
42
+
43
+ if (!node) {
44
+ return;
45
+ }
46
+
47
+ const itemParent = (_items$find = items.find(item => item.id === container.id)) === null || _items$find === void 0 ? void 0 : _items$find.parentId;
48
+ if (itemParent !== (activeItem === null || activeItem === void 0 ? void 0 : activeItem.parentId)) return;
49
+ const rect = getViewRect(node);
50
+
51
+ if (event.code === KeyboardCode.Left && collisionRect.left > rect.right - 10) {
52
+ layoutRects.push(container);
53
+ } else if (event.code === KeyboardCode.Right && collisionRect.left < rect.left) {
54
+ layoutRects.push(container);
55
+ }
56
+ });
57
+ const closestId = closestCorners({
58
+ droppableContainers: layoutRects,
59
+ collisionRect,
60
+ active
61
+ });
62
+ if (!closestId) return undefined;
63
+ const closestDroppableContainer = (_droppableContainers$ = droppableContainers.get(closestId)) === null || _droppableContainers$ === void 0 ? void 0 : (_droppableContainers$2 = _droppableContainers$.node) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.current;
64
+ const activeDroppableContainer = (_droppableContainers$3 = droppableContainers.get(active === null || active === void 0 ? void 0 : active.id)) === null || _droppableContainers$3 === void 0 ? void 0 : (_droppableContainers$4 = _droppableContainers$3.node) === null || _droppableContainers$4 === void 0 ? void 0 : _droppableContainers$4.current;
65
+ if (!closestDroppableContainer || !activeDroppableContainer) return undefined;
66
+ const closestRect = getViewRect(closestDroppableContainer);
67
+ const activeRect = getViewRect(activeDroppableContainer);
68
+ return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
69
+ x: closestRect.left + (closestRect.width - collisionRect.width) / 2 + (closestRect.offsetLeft < activeRect.left ? -1 : 1)
70
+ });
71
+ };
72
+
73
+ const getHierarchyKeyboardCoordinates = (context, dragOverlayDataTestid, isHorizontalDnD) => (event, _ref2) => {
74
+ let {
75
+ currentCoordinates,
76
+ context: {
77
+ active,
78
+ over,
79
+ collisionRect,
80
+ droppableContainers
81
+ }
82
+ } = _ref2;
83
+
84
+ if (directions.includes(event.code)) {
85
+ event.preventDefault();
86
+
87
+ if (!collisionRect) {
88
+ return undefined;
89
+ }
90
+
91
+ const {
92
+ current: {
93
+ items
94
+ }
95
+ } = context;
96
+ const args = {
97
+ dragOverlayDataTestid,
98
+ items,
99
+ active,
100
+ over,
101
+ event,
102
+ currentCoordinates,
103
+ droppableContainers,
104
+ collisionRect
105
+ };
106
+ if (isHorizontalDnD) return getHorizontalKeyboardCoordinates(args);
107
+ return undefined;
108
+ }
109
+
110
+ return undefined;
111
+ };
112
+
113
+ export { getHierarchyKeyboardCoordinates };
@@ -0,0 +1 @@
1
+ export { useHierarchyDndkitConfig } from './useHierarchyDndkitConfig.js';
@@ -0,0 +1 @@
1
+
@@ -0,0 +1,46 @@
1
+ import { useCallback } from 'react';
2
+
3
+ const useHierarchyActionHandlers = _ref => {
4
+ let {
5
+ handlePreviewDragStart,
6
+ handlePreviewDragMove,
7
+ handlePreviewDragEnd,
8
+ handlePreviewDragCancel,
9
+ onReorder,
10
+ dndItems
11
+ } = _ref;
12
+ const onDragStart = useCallback(e => {
13
+ handlePreviewDragStart(e);
14
+ }, [handlePreviewDragStart]);
15
+ const onDragMove = useCallback(e => {
16
+ handlePreviewDragMove(e);
17
+ }, [handlePreviewDragMove]);
18
+ const onDragEnd = useCallback(e => {
19
+ handlePreviewDragEnd(e);
20
+ const {
21
+ active,
22
+ over
23
+ } = e;
24
+ if (!over) return;
25
+
26
+ if (active.id !== over.id) {
27
+ const activeIndex = dndItems.findIndex(item => item.id === active.id);
28
+ const overIndex = dndItems.findIndex(item => item.id === over.id);
29
+ onReorder(dndItems[activeIndex], {
30
+ targetIndex: overIndex,
31
+ fromIndex: activeIndex
32
+ });
33
+ }
34
+ }, [handlePreviewDragEnd, dndItems, onReorder]);
35
+ const onDragCancel = useCallback(e => {
36
+ handlePreviewDragCancel(e);
37
+ }, [handlePreviewDragCancel]);
38
+ return {
39
+ onDragStart,
40
+ onDragMove,
41
+ onDragEnd,
42
+ onDragCancel
43
+ };
44
+ };
45
+
46
+ export { useHierarchyActionHandlers };
@@ -0,0 +1,32 @@
1
+ import { useCallback } from 'react';
2
+
3
+ const useHierarchyAnnouncements = visibleItemsDictionary => {
4
+ const onDragStart = useCallback(id => "Picked up draggable item from position ".concat(visibleItemsDictionary[id].index + 1, "."), [visibleItemsDictionary]);
5
+ const onDragMove = useCallback((id, overId) => {
6
+ if (overId) {
7
+ const overIndex = visibleItemsDictionary[overId].index + 1;
8
+ return "Draggable item was moved to position ".concat(overIndex, ".");
9
+ }
10
+
11
+ return "Draggable item is no longer over a droppable area.";
12
+ }, [visibleItemsDictionary]);
13
+ const onDragOver = onDragMove;
14
+ const onDragEnd = useCallback((id, overId) => {
15
+ if (overId) {
16
+ const overIndex = visibleItemsDictionary[overId].index + 1;
17
+ return "Draggable item was dropped over position ".concat(overIndex, ".");
18
+ }
19
+
20
+ return "Draggable item was dropped at it's original position.";
21
+ }, [visibleItemsDictionary]);
22
+ const onDragCancel = useCallback(id => "Dragging was cancelled. Draggable item from position ".concat(visibleItemsDictionary[id].index + 1, " was dropped at it's initial position."), [visibleItemsDictionary]);
23
+ return {
24
+ onDragStart,
25
+ onDragOver,
26
+ onDragMove,
27
+ onDragEnd,
28
+ onDragCancel
29
+ };
30
+ };
31
+
32
+ export { useHierarchyAnnouncements };
@@ -0,0 +1,111 @@
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 { useHierarchyActionHandlers } from './useHierarchyActionHandlers.js';
13
+ import { useHierarchyPreviewHandlers } from './useHierarchyPreviewHandlers.js';
14
+ import { getHierarchyKeyboardCoordinates } from './getHierarchyKeyboardCoordinates.js';
15
+ import { customCollisionDetection } from './customCollisionDetection.js';
16
+ import { useHierarchyAnnouncements } from './useHierarchyAnnouncements.js';
17
+
18
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
19
+
20
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
21
+ // if second parameter is true, the space will be done on the horizontal axis
22
+
23
+ const adjustTranslate = isHorizontalDnD => _ref => {
24
+ let {
25
+ transform
26
+ } = _ref;
27
+
28
+ const newTransform = _objectSpread({}, transform);
29
+
30
+ if (isHorizontalDnD) {
31
+ newTransform.y = transform.y + 15;
32
+ } else {
33
+ newTransform.y = transform.y - 35;
34
+ }
35
+
36
+ return newTransform;
37
+ };
38
+
39
+ const measuring = {
40
+ droppable: {
41
+ strategy: MeasuringStrategy.Always
42
+ }
43
+ };
44
+
45
+ const noop = () => null;
46
+
47
+ const useHierarchyDndkitConfig = _ref2 => {
48
+ var _itemsDictionary$acti;
49
+
50
+ let {
51
+ flattenedItems,
52
+ dragOverlayDataTestid,
53
+ isHorizontalDnD = false,
54
+ onReorder,
55
+ onPreviewResetState = noop,
56
+ onPreviewDragStart = noop
57
+ } = _ref2;
58
+ const [activeId, setActiveId] = useState('');
59
+ const dndItems = useMemo(() => flattenedItems.map(_ref3 => {
60
+ let [item] = _ref3;
61
+ return item;
62
+ }), [flattenedItems]);
63
+ const itemsDictionary = useMemo(() => {
64
+ const dictionary = {};
65
+ dndItems.forEach(item => {
66
+ dictionary[item.id] = item;
67
+ });
68
+ return dictionary;
69
+ }, [dndItems]);
70
+ const modifiers = useMemo(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
71
+ const sensorContext = useRef({
72
+ items: dndItems
73
+ });
74
+ useEffect(() => {
75
+ sensorContext.current = {
76
+ items: dndItems
77
+ };
78
+ }, [dndItems]);
79
+ const coordinateGetter = useMemo(() => getHierarchyKeyboardCoordinates(sensorContext, dragOverlayDataTestid, isHorizontalDnD), [isHorizontalDnD]);
80
+ const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
81
+ coordinateGetter
82
+ }));
83
+ const dragPreviewHandlers = useHierarchyPreviewHandlers({
84
+ setActiveId,
85
+ onPreviewResetState,
86
+ onPreviewDragStart
87
+ });
88
+ const dragActionHandlers = useHierarchyActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
89
+ dndItems,
90
+ onReorder
91
+ }));
92
+ const announcements = useHierarchyAnnouncements(itemsDictionary);
93
+ const dndContextProps = useMemo(() => {
94
+ var _itemsDictionary;
95
+
96
+ return _objectSpread({
97
+ announcements,
98
+ modifiers,
99
+ sensors,
100
+ measuring,
101
+ collisionDetection: customCollisionDetection(activeId, (_itemsDictionary = itemsDictionary[activeId !== null && activeId !== void 0 ? activeId : '']) === null || _itemsDictionary === void 0 ? void 0 : _itemsDictionary.parentId, dndItems)
102
+ }, dragActionHandlers);
103
+ }, [announcements, modifiers, sensors, activeId, itemsDictionary, dndItems, dragActionHandlers]);
104
+ return {
105
+ dndContextProps,
106
+ activeId,
107
+ activeIndex: activeId ? (_itemsDictionary$acti = itemsDictionary[activeId]) === null || _itemsDictionary$acti === void 0 ? void 0 : _itemsDictionary$acti.index : -1
108
+ };
109
+ };
110
+
111
+ export { useHierarchyDndkitConfig };
@@ -0,0 +1,39 @@
1
+ import { useCallback } from 'react';
2
+
3
+ const useHierarchyPreviewHandlers = _ref => {
4
+ let {
5
+ setActiveId,
6
+ onPreviewResetState,
7
+ onPreviewDragStart
8
+ } = _ref;
9
+ const resetState = useCallback(() => {
10
+ setActiveId('');
11
+ onPreviewResetState();
12
+ document.body.style.setProperty('cursor', '');
13
+ }, [setActiveId, onPreviewResetState]);
14
+ const handlePreviewDragStart = useCallback(_ref2 => {
15
+ let {
16
+ active: {
17
+ id
18
+ }
19
+ } = _ref2;
20
+ setActiveId(id);
21
+ document.body.style.setProperty('cursor', 'grabbing');
22
+ onPreviewDragStart();
23
+ }, [setActiveId, onPreviewDragStart]);
24
+ const handlePreviewDragMove = useCallback(() => null, []);
25
+ const handlePreviewDragEnd = useCallback(() => {
26
+ resetState();
27
+ }, [resetState]);
28
+ const handlePreviewDragCancel = useCallback(() => {
29
+ resetState();
30
+ }, [resetState]);
31
+ return {
32
+ handlePreviewDragStart,
33
+ handlePreviewDragMove,
34
+ handlePreviewDragEnd,
35
+ handlePreviewDragCancel
36
+ };
37
+ };
38
+
39
+ export { useHierarchyPreviewHandlers };
package/esm/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { useHierarchyDndkitConfig } from './hierarchy/useHierarchyDndkitConfig.js';
2
+ export { useTreeDndkitConfig } from './tree/useTreeDndkitConfig.js';
@@ -0,0 +1,10 @@
1
+ let DropIndicatorPosition;
2
+
3
+ (function (DropIndicatorPosition) {
4
+ DropIndicatorPosition[DropIndicatorPosition["None"] = 0] = "None";
5
+ DropIndicatorPosition[DropIndicatorPosition["Before"] = 1] = "Before";
6
+ DropIndicatorPosition[DropIndicatorPosition["After"] = 2] = "After";
7
+ DropIndicatorPosition[DropIndicatorPosition["Inside"] = 3] = "Inside";
8
+ })(DropIndicatorPosition || (DropIndicatorPosition = {}));
9
+
10
+ export { DropIndicatorPosition };
@@ -0,0 +1,133 @@
1
+ import 'core-js/modules/esnext.async-iterator.find.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.find.js';
4
+ import 'core-js/modules/esnext.async-iterator.reduce.js';
5
+ import 'core-js/modules/esnext.iterator.reduce.js';
6
+ import 'core-js/modules/web.dom-collections.iterator.js';
7
+ import { DropIndicatorPosition } from './constants.js';
8
+
9
+ const DUMMY_ID = 'DUMMY_ID_INTERNAL_USE_ONLY';
10
+ const RECT_UP = {
11
+ offsetTop: -Infinity,
12
+ offsetLeft: 0,
13
+ // Doesn't matter,
14
+ width: 0,
15
+ // Doesn't matter
16
+ height: 0 // Doesn't matter
17
+
18
+ };
19
+ const RECT_DOWN = {
20
+ offsetTop: Infinity,
21
+ offsetLeft: 0,
22
+ // Doesn't matter,
23
+ width: 0,
24
+ // Doesn't matter
25
+ height: 0 // Doesn't matter
26
+
27
+ }; // Percentage of height to take into consideration when looking for colliding rects
28
+
29
+ const thresholdRatio = 0.2; // Percentage to be inside
30
+
31
+ const insideThreshold = 0.7;
32
+ const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => _ref => {
33
+ var _originalContainer$re;
34
+
35
+ let {
36
+ droppableContainers,
37
+ collisionRect
38
+ } = _ref;
39
+ const originalContainer = droppableContainers.find(_ref2 => {
40
+ let {
41
+ id
42
+ } = _ref2;
43
+ return id === activeId;
44
+ });
45
+ 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
46
+ // This modifies how to search the matching colliding rect
47
+
48
+ let isUp = lastPosition === 'up';
49
+
50
+ if (originalRect) {
51
+ isUp = originalRect.offsetTop > collisionRect.top;
52
+ } // Threshold
53
+
54
+
55
+ const threshold = collisionRect.height * thresholdRatio;
56
+ let collidingContainer = null;
57
+
58
+ if (isUp) {
59
+ // Up -- We need to find the first rectangle downwards
60
+ collidingContainer = droppableContainers.reduce((firstRectDown, container) => {
61
+ const rect = container.rect.current;
62
+
63
+ if (rect && firstRectDown.rect.current) {
64
+ const {
65
+ offsetTop: rectOffsetTop
66
+ } = rect;
67
+ const {
68
+ offsetTop: firstRectDownOffsetTop
69
+ } = firstRectDown.rect.current;
70
+
71
+ if (rectOffsetTop + threshold > collisionRect.top && rectOffsetTop < firstRectDownOffsetTop) {
72
+ return container;
73
+ }
74
+ }
75
+
76
+ return firstRectDown;
77
+ }, {
78
+ id: DUMMY_ID,
79
+ rect: {
80
+ current: RECT_DOWN
81
+ }
82
+ });
83
+ } else {
84
+ // Down -- We need to find the first rectangle upwards
85
+ collidingContainer = droppableContainers.reduce((firstRectUp, container) => {
86
+ const rect = container.rect.current;
87
+
88
+ if (rect && firstRectUp.rect.current) {
89
+ const {
90
+ offsetTop: rectOffsetTop
91
+ } = rect;
92
+ const {
93
+ offsetTop: firstRectUpOffsetTop
94
+ } = firstRectUp.rect.current;
95
+
96
+ if (rectOffsetTop - threshold < collisionRect.top && rectOffsetTop > firstRectUpOffsetTop) {
97
+ return container;
98
+ }
99
+ }
100
+
101
+ return firstRectUp;
102
+ }, {
103
+ id: DUMMY_ID,
104
+ rect: {
105
+ current: RECT_UP
106
+ }
107
+ });
108
+ } // If we didn't find a match, return null
109
+
110
+
111
+ if (collidingContainer.id === DUMMY_ID) {
112
+ return null;
113
+ }
114
+
115
+ const collidingRect = collidingContainer.rect.current;
116
+ if (!collidingRect) return null; // Calculate the intersection interval
117
+
118
+ const [top, bottom] = [Math.max(collisionRect.top, collidingRect.offsetTop), Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)]; // Calculate the percentage of intersection
119
+
120
+ const intersectionPercentage = Math.abs(bottom - top) / collidingRect.height;
121
+
122
+ if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== activeId) {
123
+ setDropIndicatorPosition(DropIndicatorPosition.Inside);
124
+ } else {
125
+ setDropIndicatorPosition(isUp ? DropIndicatorPosition.Before : DropIndicatorPosition.After);
126
+ }
127
+
128
+ if (isUp && lastPosition !== 'up') setLastPosition('up');else if (!isUp && lastPosition !== 'down') setLastPosition('down'); // Return the id of the match rectangle
129
+
130
+ return collidingContainer.id;
131
+ };
132
+
133
+ export { customCollisionDetection };
@@ -0,0 +1,131 @@
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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
15
+ const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
16
+ 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;
34
+ 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) {
39
+ return;
40
+ }
41
+
42
+ const rect = container.rect.current;
43
+
44
+ if (rect && event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {
45
+ layoutRects.push(container);
46
+ } else if (rect && event.code === KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {
47
+ layoutRects.push(container);
48
+ }
49
+ });
50
+ const closestId = closestCorners({
51
+ collisionRect,
52
+ droppableContainers: layoutRects,
53
+ active
54
+ });
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;
58
+ const closestRect = getViewRect(closestElement);
59
+
60
+ 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
+ if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
65
+ return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
66
+ y: closestRect.top - collisionRect.height / 2
67
+ });
68
+ }
69
+
70
+ return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
71
+ 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
+
78
+ if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
79
+ return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
80
+ y: closestRect.top + collisionRect.height / 2
81
+ });
82
+ }
83
+
84
+ return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
85
+ y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
86
+ });
87
+ };
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
+
101
+ if (directions.includes(event.code)) {
102
+ if (!translatedRect) {
103
+ return undefined;
104
+ }
105
+
106
+ const {
107
+ current: {
108
+ items,
109
+ dropIndicatorPosition
110
+ }
111
+ } = context;
112
+ if (!over || !active || !collisionRect) return undefined;
113
+ const args = {
114
+ items,
115
+ active,
116
+ over,
117
+ event,
118
+ currentCoordinates,
119
+ droppableContainers,
120
+ collisionRect,
121
+ dropIndicatorPosition,
122
+ maxDragAndDropLevel
123
+ };
124
+ if (isHorizontalDnD) return undefined;
125
+ return getVerticalKeyboardCoordinates(args);
126
+ }
127
+
128
+ return undefined;
129
+ };
130
+
131
+ export { getTreeKeyboardCoordinates };
@@ -0,0 +1 @@
1
+ export { useTreeDndkitConfig } from './useTreeDndkitConfig.js';
@@ -0,0 +1 @@
1
+