@elliemae/ds-data-table 2.0.0-rc.9 → 2.0.0

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 (70) hide show
  1. package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js +16 -0
  2. package/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js +4 -1
  3. package/cjs/addons/Filters/Components/DateSwitcherFilter/index.js +4 -1
  4. package/cjs/addons/Filters/Components/NumberRangeFilter/index.js +4 -1
  5. package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +3 -3
  6. package/cjs/exported-related/EditableCell.js +11 -5
  7. package/cjs/exported-related/FilterPopover.js +1 -1
  8. package/cjs/parts/HoC/withConditionalDnDColumnContext.js +20 -3
  9. package/cjs/parts/HoC/withConditionalDnDRowContext.js +2 -2
  10. package/cjs/styled.js +16 -11
  11. package/esm/addons/Editables/TextEditableCell/TextEditableCell.js +16 -0
  12. package/esm/addons/Filters/Components/CurrencyRangeFilter/index.js +4 -1
  13. package/esm/addons/Filters/Components/DateSwitcherFilter/index.js +4 -1
  14. package/esm/addons/Filters/Components/NumberRangeFilter/index.js +4 -1
  15. package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +3 -3
  16. package/esm/exported-related/EditableCell.js +11 -5
  17. package/esm/exported-related/FilterPopover.js +1 -1
  18. package/esm/parts/HoC/withConditionalDnDColumnContext.js +19 -2
  19. package/esm/parts/HoC/withConditionalDnDRowContext.js +1 -1
  20. package/esm/styled.js +16 -11
  21. package/package.json +18 -81
  22. package/types/styled.d.ts +3 -1
  23. package/cjs/helpers/dndkit/hierarchy/customCollisionDetection.js +0 -89
  24. package/cjs/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js +0 -143
  25. package/cjs/helpers/dndkit/hierarchy/types.js +0 -2
  26. package/cjs/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js +0 -55
  27. package/cjs/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js +0 -36
  28. package/cjs/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js +0 -111
  29. package/cjs/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js +0 -87
  30. package/cjs/helpers/dndkit/tree/customCollisionDetection.js +0 -118
  31. package/cjs/helpers/dndkit/tree/getTreeKeyboardCoordinates.js +0 -134
  32. package/cjs/helpers/dndkit/tree/types.js +0 -2
  33. package/cjs/helpers/dndkit/tree/useTreeActionHandlers.js +0 -75
  34. package/cjs/helpers/dndkit/tree/useTreeAnnouncements.js +0 -55
  35. package/cjs/helpers/dndkit/tree/useTreeDndkitConfig.js +0 -141
  36. package/cjs/helpers/dndkit/tree/useTreePreviewHandlers.js +0 -54
  37. package/cjs/helpers/dndkit/types.js +0 -2
  38. package/cjs/helpers/dndkit/utilities.js +0 -52
  39. package/esm/helpers/dndkit/hierarchy/customCollisionDetection.js +0 -85
  40. package/esm/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js +0 -135
  41. package/esm/helpers/dndkit/hierarchy/types.js +0 -1
  42. package/esm/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js +0 -51
  43. package/esm/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js +0 -32
  44. package/esm/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js +0 -105
  45. package/esm/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js +0 -83
  46. package/esm/helpers/dndkit/tree/customCollisionDetection.js +0 -114
  47. package/esm/helpers/dndkit/tree/getTreeKeyboardCoordinates.js +0 -126
  48. package/esm/helpers/dndkit/tree/types.js +0 -1
  49. package/esm/helpers/dndkit/tree/useTreeActionHandlers.js +0 -71
  50. package/esm/helpers/dndkit/tree/useTreeAnnouncements.js +0 -51
  51. package/esm/helpers/dndkit/tree/useTreeDndkitConfig.js +0 -135
  52. package/esm/helpers/dndkit/tree/useTreePreviewHandlers.js +0 -50
  53. package/esm/helpers/dndkit/types.js +0 -1
  54. package/esm/helpers/dndkit/utilities.js +0 -47
  55. package/types/helpers/dndkit/hierarchy/customCollisionDetection.d.ts +0 -3
  56. package/types/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.d.ts +0 -3
  57. package/types/helpers/dndkit/hierarchy/types.d.ts +0 -66
  58. package/types/helpers/dndkit/hierarchy/useHierarchyActionHandlers.d.ts +0 -2
  59. package/types/helpers/dndkit/hierarchy/useHierarchyAnnouncements.d.ts +0 -3
  60. package/types/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.d.ts +0 -3
  61. package/types/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.d.ts +0 -2
  62. package/types/helpers/dndkit/tree/customCollisionDetection.d.ts +0 -4
  63. package/types/helpers/dndkit/tree/getTreeKeyboardCoordinates.d.ts +0 -3
  64. package/types/helpers/dndkit/tree/types.d.ts +0 -82
  65. package/types/helpers/dndkit/tree/useTreeActionHandlers.d.ts +0 -2
  66. package/types/helpers/dndkit/tree/useTreeAnnouncements.d.ts +0 -4
  67. package/types/helpers/dndkit/tree/useTreeDndkitConfig.d.ts +0 -3
  68. package/types/helpers/dndkit/tree/useTreePreviewHandlers.d.ts +0 -2
  69. package/types/helpers/dndkit/types.d.ts +0 -20
  70. package/types/helpers/dndkit/utilities.d.ts +0 -7
@@ -1,85 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.find.js';
5
- import 'core-js/modules/esnext.iterator.find.js';
6
- import 'core-js/modules/esnext.async-iterator.for-each.js';
7
- import 'core-js/modules/esnext.iterator.for-each.js';
8
- import { DATA_TESTID } from '../../../configs/constants.js';
9
- import 'core-js/modules/web.dom-collections.iterator.js';
10
- import 'core-js/modules/esnext.async-iterator.reduce.js';
11
- import 'core-js/modules/esnext.iterator.reduce.js';
12
- import 'react';
13
- import 'react-virtual';
14
- import '../../../configs/useRowFlattenization.js';
15
- import '@babel/runtime/helpers/esm/defineProperty';
16
- import 'core-js/modules/esnext.async-iterator.map.js';
17
- import 'core-js/modules/esnext.iterator.map.js';
18
- import '@babel/runtime/helpers/esm/jsx';
19
- import '@elliemae/ds-icons';
20
- import 'styled-components';
21
- import '../../../styled.js';
22
- import 'react/jsx-runtime';
23
- import '@elliemae/ds-form';
24
- import '../../../parts/TableContent.js';
25
- import '@elliemae/ds-grid';
26
- import '@elliemae/ds-circular-progress-indicator';
27
- import '@elliemae/ds-system';
28
- import '@elliemae/ds-button';
29
- import '../../../DataTableContext.js';
30
- import '../../../parts/Row.js';
31
- import '../../../parts/Footer.js';
32
- import '../../../parts/HoC/SortableItemContext.js';
33
-
34
- const customCollisionDetection = (activeId, activeParent, dndItems) => _ref => {
35
- var _document$querySelect, _document$querySelect2;
36
-
37
- let {
38
- droppableContainers,
39
- collisionRect
40
- } = _ref;
41
- const entriesWithSameParent = droppableContainers.filter(_ref2 => {
42
- var _dndItems$find;
43
-
44
- let {
45
- id
46
- } = _ref2;
47
- return ((_dndItems$find = dndItems.find(item => item.id === id)) === null || _dndItems$find === void 0 ? void 0 : _dndItems$find.parentId) === activeParent;
48
- });
49
- const dragOverlayRect = (_document$querySelect = (_document$querySelect2 = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY, "\"]"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.getBoundingClientRect()) !== null && _document$querySelect !== void 0 ? _document$querySelect : {
50
- width: 150
51
- };
52
- const originalContainer = entriesWithSameParent.find(_ref3 => {
53
- let {
54
- id
55
- } = _ref3;
56
- return id === activeId;
57
- });
58
- const originalRect = originalContainer.rect.current;
59
-
60
- if (originalRect.offsetLeft <= collisionRect.offsetLeft && collisionRect.offsetLeft <= originalRect.offsetLeft + originalRect.width) {
61
- return originalContainer.id;
62
- }
63
-
64
- const isLeft = collisionRect.offsetLeft <= originalRect.offsetLeft + dragOverlayRect.width / 2 + 5;
65
- let match = null; // If going to the left, search the closest offset left
66
- // Otherwise, get the closest offset right
67
-
68
- const collisionPoint = collisionRect.offsetLeft + dragOverlayRect.width / 2;
69
- entriesWithSameParent.forEach(entry => {
70
- const {
71
- rect: {
72
- current: rect
73
- }
74
- } = entry;
75
- const offsetRight = rect.offsetLeft + rect.width;
76
- if (!match) match = entry;else if (isLeft && Math.abs(collisionPoint - rect.offsetLeft) <= Math.abs(collisionPoint - match.rect.current.offsetLeft)) {
77
- match = entry;
78
- } else if (!isLeft && Math.abs(collisionPoint - offsetRight) <= Math.abs(collisionPoint - match.rect.current.offsetLeft - match.rect.current.width)) {
79
- match = entry;
80
- }
81
- });
82
- return match === null ? null : match.id;
83
- };
84
-
85
- export { customCollisionDetection };
@@ -1,135 +0,0 @@
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
- import { DATA_TESTID } from '../../../configs/constants.js';
11
- import 'core-js/modules/web.dom-collections.iterator.js';
12
- import 'core-js/modules/esnext.async-iterator.reduce.js';
13
- import 'core-js/modules/esnext.iterator.reduce.js';
14
- import 'react';
15
- import 'react-virtual';
16
- import '../../../configs/useRowFlattenization.js';
17
- import 'core-js/modules/esnext.async-iterator.map.js';
18
- import 'core-js/modules/esnext.iterator.map.js';
19
- import '@babel/runtime/helpers/esm/jsx';
20
- import '@elliemae/ds-icons';
21
- import 'styled-components';
22
- import '../../../styled.js';
23
- import 'react/jsx-runtime';
24
- import '@elliemae/ds-form';
25
- import '../../../parts/TableContent.js';
26
- import '@elliemae/ds-grid';
27
- import '@elliemae/ds-circular-progress-indicator';
28
- import '@elliemae/ds-system';
29
- import '@elliemae/ds-button';
30
- import '../../../DataTableContext.js';
31
- import '../../../parts/Row.js';
32
- import '../../../parts/Footer.js';
33
- import '../../../parts/HoC/SortableItemContext.js';
34
-
35
- 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; }
36
-
37
- 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; }
38
- const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
39
- const vertical = [KeyboardCode.Up, KeyboardCode.Down];
40
-
41
- const getHorizontalKeyboardCoordinates = _ref => {
42
- var _document$querySelect, _document$querySelect2;
43
-
44
- let {
45
- items,
46
- active,
47
- over,
48
- event,
49
- currentCoordinates,
50
- droppableContainers,
51
- collisionRect
52
- } = _ref;
53
- if (vertical.includes(event.code)) return undefined;
54
- const activeItem = items.find(item => item.id === active.id);
55
- const overRect = over.rect;
56
- const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
57
-
58
- droppableContainers.forEach(container => {
59
- if (container !== null && container !== void 0 && container.disabled || !overRect) {
60
- return;
61
- }
62
-
63
- const node = container === null || container === void 0 ? void 0 : container.node.current;
64
-
65
- if (!node) {
66
- return;
67
- }
68
-
69
- const itemParent = items.find(item => item.id === container.id).parentId;
70
- if (itemParent !== activeItem.parentId) return;
71
- const rect = getViewRect(node);
72
-
73
- if (event.code === KeyboardCode.Left && collisionRect.left > rect.right - 10) {
74
- layoutRects.push(container);
75
- } else if (event.code === KeyboardCode.Right && collisionRect.left < rect.left) {
76
- layoutRects.push(container);
77
- }
78
- });
79
- const dragOverlayRect = (_document$querySelect = (_document$querySelect2 = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY, "\"]"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.getBoundingClientRect()) !== null && _document$querySelect !== void 0 ? _document$querySelect : {
80
- width: 150,
81
- left: 0
82
- };
83
- const closestId = closestCorners({
84
- droppableContainers: layoutRects,
85
- collisionRect,
86
- active
87
- });
88
- if (!closestId) return undefined;
89
- const closestRect = getViewRect(droppableContainers.get(closestId).node.current);
90
- const activeRect = getViewRect(droppableContainers.get(active.id).node.current);
91
- return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
92
- x: closestRect.left + (closestRect.width - dragOverlayRect.width) / 2 + (closestRect.offsetLeft < activeRect.left ? -1 : 1)
93
- });
94
- };
95
-
96
- const getHierarchyKeyboardCoordinates = (context, isHorizontalDnD) => (event, _ref2) => {
97
- let {
98
- currentCoordinates,
99
- context: {
100
- active,
101
- over,
102
- collisionRect,
103
- droppableContainers
104
- }
105
- } = _ref2;
106
-
107
- if (directions.includes(event.code)) {
108
- event.preventDefault();
109
-
110
- if (!collisionRect) {
111
- return undefined;
112
- }
113
-
114
- const {
115
- current: {
116
- items
117
- }
118
- } = context;
119
- const args = {
120
- items,
121
- active,
122
- over,
123
- event,
124
- currentCoordinates,
125
- droppableContainers,
126
- collisionRect
127
- };
128
- if (isHorizontalDnD) return getHorizontalKeyboardCoordinates(args);
129
- return undefined;
130
- }
131
-
132
- return undefined;
133
- };
134
-
135
- export { getHierarchyKeyboardCoordinates };
@@ -1 +0,0 @@
1
-
@@ -1,51 +0,0 @@
1
- import { useCallback } from 'react';
2
-
3
- const useHierarchyActionHandlers = _ref => {
4
- let {
5
- handlePreviewDragStart,
6
- handlePreviewDragMove,
7
- handlePreviewDragOver,
8
- handlePreviewDragEnd,
9
- handlePreviewDragCancel,
10
- onReorder,
11
- dndItems
12
- } = _ref;
13
- const onDragStart = useCallback(e => {
14
- handlePreviewDragStart(e);
15
- }, [handlePreviewDragStart]);
16
- const onDragMove = useCallback(e => {
17
- handlePreviewDragMove(e);
18
- }, [handlePreviewDragMove]);
19
- const onDragOver = useCallback(e => {
20
- handlePreviewDragOver(e);
21
- }, [handlePreviewDragOver]);
22
- const onDragEnd = useCallback(e => {
23
- handlePreviewDragEnd(e);
24
- const {
25
- active,
26
- over
27
- } = e;
28
- if (!over) return;
29
-
30
- if (active.id !== over.id) {
31
- const activeIndex = dndItems.findIndex(item => item.id === active.id);
32
- const overIndex = dndItems.findIndex(item => item.id === over.id);
33
- onReorder(dndItems[activeIndex], {
34
- targetIndex: overIndex,
35
- fromIndex: activeIndex
36
- });
37
- }
38
- }, [handlePreviewDragEnd, dndItems, onReorder]);
39
- const onDragCancel = useCallback(e => {
40
- handlePreviewDragCancel(e);
41
- }, [handlePreviewDragCancel]);
42
- return {
43
- onDragStart,
44
- onDragMove,
45
- onDragOver,
46
- onDragEnd,
47
- onDragCancel
48
- };
49
- };
50
-
51
- export { useHierarchyActionHandlers };
@@ -1,32 +0,0 @@
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 };
@@ -1,105 +0,0 @@
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.find.js';
8
- import 'core-js/modules/esnext.iterator.constructor.js';
9
- import 'core-js/modules/esnext.iterator.find.js';
10
- import 'core-js/modules/esnext.async-iterator.for-each.js';
11
- import 'core-js/modules/esnext.iterator.for-each.js';
12
- import { useState, useMemo, useRef, useEffect } from 'react';
13
- import { MeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor } from '@dnd-kit/core';
14
- import { useHierarchyActionHandlers } from './useHierarchyActionHandlers.js';
15
- import { useHierarchyPreviewHandlers } from './useHierarchyPreviewHandlers.js';
16
- import { getHierarchyKeyboardCoordinates } from './getHierarchyKeyboardCoordinates.js';
17
- import { customCollisionDetection } from './customCollisionDetection.js';
18
- import { useHierarchyAnnouncements } from './useHierarchyAnnouncements.js';
19
-
20
- 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; }
21
-
22
- 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; }
23
- // if second parameter is true, the space will be done on the horizontal axis
24
-
25
- const adjustTranslate = function (_ref) {
26
- let {
27
- transform
28
- } = _ref;
29
- let isHorizontalDnD = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
30
-
31
- const newTransform = _objectSpread({}, transform);
32
-
33
- if (isHorizontalDnD) {
34
- newTransform.y = transform.y + 15;
35
- } else {
36
- newTransform.y = transform.y - 35;
37
- }
38
-
39
- return newTransform;
40
- };
41
-
42
- const measuring = {
43
- droppable: {
44
- strategy: MeasuringStrategy.Always
45
- }
46
- };
47
-
48
- const useHierarchyDndkitConfig = _ref2 => {
49
- let {
50
- flattenedItems,
51
- isHorizontalDnD = false,
52
- onReorder
53
- } = _ref2;
54
- const [activeId, setActiveId] = useState(null);
55
- const [overId, setOverId] = useState(null);
56
- const dndItems = useMemo(() => flattenedItems.map(_ref3 => {
57
- let [item] = _ref3;
58
- return item;
59
- }), [flattenedItems]);
60
- const activeItem = useMemo(() => dndItems.find(item => item.id === activeId), [activeId, dndItems]);
61
- const itemsDictionary = useMemo(() => {
62
- const dictionary = {};
63
- dndItems.forEach(item => {
64
- dictionary[item.id] = item;
65
- });
66
- return dictionary;
67
- }, [dndItems]);
68
- const modifiers = useMemo(() => [options => adjustTranslate(options, isHorizontalDnD)], [isHorizontalDnD]);
69
- const sensorContext = useRef({
70
- items: dndItems
71
- });
72
- useEffect(() => {
73
- sensorContext.current = {
74
- items: dndItems
75
- };
76
- }, [dndItems]);
77
- const coordinateGetter = useMemo(() => getHierarchyKeyboardCoordinates(sensorContext, isHorizontalDnD), [isHorizontalDnD]);
78
- const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
79
- coordinateGetter
80
- }));
81
- const dragPreviewHandlers = useHierarchyPreviewHandlers({
82
- setActiveId,
83
- setOverId
84
- });
85
- const dragActionHandlers = useHierarchyActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
86
- dndItems,
87
- onReorder
88
- }));
89
- const announcements = useHierarchyAnnouncements(itemsDictionary);
90
- const dndContextProps = useMemo(() => _objectSpread({
91
- announcements,
92
- modifiers,
93
- sensors,
94
- measuring,
95
- collisionDetection: customCollisionDetection(activeId, activeItem === null || activeItem === void 0 ? void 0 : activeItem.parentId, dndItems)
96
- }, dragActionHandlers), [announcements, modifiers, sensors, activeId, activeItem === null || activeItem === void 0 ? void 0 : activeItem.parentId, dndItems, dragActionHandlers]);
97
- return {
98
- dndContextProps,
99
- activeId,
100
- overId,
101
- activeIndex: activeId ? activeItem.index : -1
102
- };
103
- };
104
-
105
- export { useHierarchyDndkitConfig as default };
@@ -1,83 +0,0 @@
1
- import { useCallback } from 'react';
2
- import { DATA_TESTID } from '../../../configs/constants.js';
3
- import 'core-js/modules/esnext.async-iterator.filter.js';
4
- import 'core-js/modules/esnext.iterator.constructor.js';
5
- import 'core-js/modules/esnext.iterator.filter.js';
6
- import 'core-js/modules/web.dom-collections.iterator.js';
7
- import 'core-js/modules/esnext.async-iterator.reduce.js';
8
- import 'core-js/modules/esnext.iterator.reduce.js';
9
- import 'react-virtual';
10
- import 'core-js/modules/esnext.async-iterator.for-each.js';
11
- import 'core-js/modules/esnext.iterator.for-each.js';
12
- import '../../../configs/useRowFlattenization.js';
13
- import '@babel/runtime/helpers/esm/defineProperty';
14
- import 'core-js/modules/esnext.async-iterator.map.js';
15
- import 'core-js/modules/esnext.iterator.map.js';
16
- import '@babel/runtime/helpers/esm/jsx';
17
- import '@elliemae/ds-icons';
18
- import 'styled-components';
19
- import '../../../styled.js';
20
- import 'react/jsx-runtime';
21
- import '@elliemae/ds-form';
22
- import '../../../parts/TableContent.js';
23
- import '@elliemae/ds-grid';
24
- import '@elliemae/ds-circular-progress-indicator';
25
- import '@elliemae/ds-system';
26
- import '@elliemae/ds-button';
27
- import '../../../DataTableContext.js';
28
- import '../../../parts/Row.js';
29
- import '../../../parts/Footer.js';
30
- import '../../../parts/HoC/SortableItemContext.js';
31
-
32
- const useHierarchyPreviewHandlers = _ref => {
33
- let {
34
- setOverId,
35
- setActiveId
36
- } = _ref;
37
- const resetState = useCallback(() => {
38
- setOverId(null);
39
- setActiveId(null);
40
- document.body.style.setProperty('cursor', '');
41
- const el = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
42
-
43
- el.onscroll = () => null;
44
- }, [setOverId, setActiveId]);
45
- const handlePreviewDragStart = useCallback(_ref2 => {
46
- let {
47
- active: {
48
- id
49
- }
50
- } = _ref2;
51
- setActiveId(id);
52
- setOverId(id);
53
- document.body.style.setProperty('cursor', 'grabbing');
54
- const el = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
55
- const y = el.scrollTop;
56
-
57
- el.onscroll = () => el.scrollTo(0, y);
58
- }, [setActiveId, setOverId]);
59
- const handlePreviewDragMove = useCallback(() => null, []);
60
- const handlePreviewDragOver = useCallback(_ref3 => {
61
- var _over$id;
62
-
63
- let {
64
- over
65
- } = _ref3;
66
- setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
67
- }, [setOverId]);
68
- const handlePreviewDragEnd = useCallback(() => {
69
- resetState();
70
- }, [resetState]);
71
- const handlePreviewDragCancel = useCallback(() => {
72
- resetState();
73
- }, [resetState]);
74
- return {
75
- handlePreviewDragStart,
76
- handlePreviewDragMove,
77
- handlePreviewDragOver,
78
- handlePreviewDragEnd,
79
- handlePreviewDragCancel
80
- };
81
- };
82
-
83
- export { useHierarchyPreviewHandlers };
@@ -1,114 +0,0 @@
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 '../../../parts/HoC/SortableItemContext.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((acc, container) => {
61
- const rect = container.rect.current;
62
-
63
- if (rect.offsetTop + threshold > collisionRect.top && rect.offsetTop < acc.rect.current.offsetTop) {
64
- return container;
65
- }
66
-
67
- return acc;
68
- }, {
69
- id: DUMMY_ID,
70
- rect: {
71
- current: RECT_DOWN
72
- }
73
- });
74
- } else {
75
- // Down -- We need to find the first rectangle upwards
76
- collidingContainer = droppableContainers.reduce((acc, container) => {
77
- const rect = container.rect.current;
78
-
79
- if (rect.offsetTop - threshold < collisionRect.top && rect.offsetTop > acc.rect.current.offsetTop) {
80
- return container;
81
- }
82
-
83
- return acc;
84
- }, {
85
- id: DUMMY_ID,
86
- rect: {
87
- current: RECT_UP
88
- }
89
- });
90
- } // If we didn't find a match, return null
91
-
92
-
93
- if (collidingContainer.id === DUMMY_ID) {
94
- return null;
95
- }
96
-
97
- const collidingRect = collidingContainer.rect.current; // Calculate the intersection interval
98
-
99
- const [top, bottom] = [Math.max(collisionRect.top, collidingRect.offsetTop), Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)]; // Calculate the percentage of intersection
100
-
101
- const intersectionPercentage = Math.abs(bottom - top) / collidingRect.height;
102
-
103
- if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== activeId) {
104
- setDropIndicatorPosition(DropIndicatorPosition.Inside);
105
- } else {
106
- setDropIndicatorPosition(isUp ? DropIndicatorPosition.Before : DropIndicatorPosition.After);
107
- }
108
-
109
- if (isUp && lastPosition !== 'up') setLastPosition('up');else if (!isUp && lastPosition !== 'down') setLastPosition('down'); // Return the id of the match rectangle
110
-
111
- return collidingContainer.id;
112
- };
113
-
114
- export { customCollisionDetection };