@elliemae/ds-treeview 2.0.2 → 2.1.0-rc.4

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 (165) hide show
  1. package/cjs/TreeView.js +5 -103
  2. package/cjs/TreeViewContext.js +44 -47
  3. package/cjs/config/useTreeview.js +137 -0
  4. package/cjs/index.js +1 -7
  5. package/cjs/parts/CheckboxSelectable.js +5 -7
  6. package/cjs/parts/ExpandCaret.js +17 -11
  7. package/cjs/parts/Icon.js +4 -0
  8. package/cjs/parts/NestingSpace.js +15 -22
  9. package/cjs/parts/RadioSelectable.js +7 -9
  10. package/cjs/parts/TreeItem.js +14 -11
  11. package/cjs/parts/TreeList.js +4 -2
  12. package/cjs/plugins/dnd/TreeDndPlugin.js +1 -1
  13. package/cjs/react-desc-prop-types.js +28 -27
  14. package/cjs/related-components/TreeViewSearchBar.js +9 -1
  15. package/cjs/{deprecated/plugins/selectable/helper.js → sharedTypes.js} +0 -0
  16. package/cjs/utils/dnd-helpers.js +2 -4
  17. package/cjs/utils/group-expands-helpers.js +34 -8
  18. package/cjs/utils/keyboard-helpers.js +64 -60
  19. package/cjs/utils/object-helpers.js +25 -7
  20. package/cjs/utils/refs-helpers.js +2 -2
  21. package/cjs/utils/tree-helpers.js +42 -27
  22. package/cjs/utils/useDnDHelpers.js +107 -100
  23. package/cjs/utils/useInstanceRefActions.js +3 -2
  24. package/cjs/utils/useTree.js +25 -6
  25. package/esm/TreeView.js +6 -103
  26. package/esm/TreeViewContext.js +44 -47
  27. package/esm/config/useTreeview.js +129 -0
  28. package/esm/index.js +0 -8
  29. package/esm/parts/CheckboxSelectable.js +5 -7
  30. package/esm/parts/ExpandCaret.js +17 -11
  31. package/esm/parts/Icon.js +4 -0
  32. package/esm/parts/NestingSpace.js +15 -21
  33. package/esm/parts/RadioSelectable.js +7 -9
  34. package/esm/parts/TreeItem.js +14 -11
  35. package/esm/parts/TreeList.js +4 -2
  36. package/esm/plugins/dnd/TreeDndPlugin.js +1 -1
  37. package/esm/react-desc-prop-types.js +28 -27
  38. package/esm/related-components/TreeViewSearchBar.js +9 -1
  39. package/esm/{deprecated/plugins/selectable/helper.js → sharedTypes.js} +0 -0
  40. package/esm/utils/dnd-helpers.js +2 -4
  41. package/esm/utils/group-expands-helpers.js +34 -9
  42. package/esm/utils/keyboard-helpers.js +62 -58
  43. package/esm/utils/object-helpers.js +25 -7
  44. package/esm/utils/refs-helpers.js +2 -2
  45. package/esm/utils/tree-helpers.js +42 -27
  46. package/esm/utils/useDnDHelpers.js +107 -100
  47. package/esm/utils/useInstanceRefActions.js +3 -2
  48. package/esm/utils/useTree.js +25 -6
  49. package/package.json +17 -128
  50. package/types/TreeView.d.ts +4 -148
  51. package/types/TreeViewContext.d.ts +4 -106
  52. package/types/config/useTreeview.d.ts +7 -0
  53. package/types/index.d.ts +0 -1
  54. package/types/parts/CheckboxSelectable.d.ts +5 -6
  55. package/types/parts/ChildrenCountDisplayer.d.ts +6 -6
  56. package/types/parts/ExpandCaret.d.ts +6 -6
  57. package/types/parts/Icon.d.ts +7 -5
  58. package/types/parts/NestingSpace.d.ts +3 -8
  59. package/types/parts/RadioSelectable.d.ts +5 -6
  60. package/types/parts/TreeItem.d.ts +22 -14
  61. package/types/parts/TreeItemText.d.ts +5 -5
  62. package/types/parts/TreeList.d.ts +22 -9
  63. package/types/react-desc-prop-types.d.ts +124 -43
  64. package/types/related-components/TreeViewSearchBar.d.ts +14 -11
  65. package/types/sharedTypes.d.ts +54 -0
  66. package/types/utils/array-helpers.d.ts +2 -2
  67. package/types/utils/dnd-helpers.d.ts +26 -25
  68. package/types/utils/group-expands-helpers.d.ts +13 -10
  69. package/types/utils/keyboard-helpers.d.ts +5 -3
  70. package/types/utils/object-helpers.d.ts +6 -2
  71. package/types/utils/refs-helpers.d.ts +4 -1
  72. package/types/utils/selectable-helper.d.ts +7 -3
  73. package/types/utils/string-helpers.d.ts +1 -1
  74. package/types/utils/tree-helpers.d.ts +25 -11
  75. package/types/utils/useDnDHelpers.d.ts +23 -3
  76. package/types/utils/useInstanceRefActions.d.ts +3 -3
  77. package/types/utils/useTree.d.ts +8 -7
  78. package/cjs/deprecated/TreeView.js +0 -72
  79. package/cjs/deprecated/__testUtils__/utils.js +0 -89
  80. package/cjs/deprecated/index.js +0 -27
  81. package/cjs/deprecated/plugins/dnd/TreeDndPlugin.js +0 -119
  82. package/cjs/deprecated/plugins/dnd/index.js +0 -9
  83. package/cjs/deprecated/plugins/dnd/renderers/DraggableItem.js +0 -67
  84. package/cjs/deprecated/plugins/dnd/renderers/DroppableList.js +0 -181
  85. package/cjs/deprecated/plugins/dnd/utils.js +0 -157
  86. package/cjs/deprecated/plugins/index.js +0 -21
  87. package/cjs/deprecated/plugins/roving/TreeRovingPlugin.js +0 -109
  88. package/cjs/deprecated/plugins/roving/index.js +0 -9
  89. package/cjs/deprecated/plugins/searchable/SearchableTreePlugin.js +0 -109
  90. package/cjs/deprecated/plugins/searchable/index.js +0 -9
  91. package/cjs/deprecated/plugins/searchable/utils.js +0 -7
  92. package/cjs/deprecated/plugins/selectable/SelectablePluginTree.js +0 -290
  93. package/cjs/deprecated/plugins/selectable/index.js +0 -9
  94. package/cjs/deprecated/plugins/selectable/utils.js +0 -19
  95. package/cjs/deprecated/plugins/toolbar/TreeToolbarPlugin.js +0 -128
  96. package/cjs/deprecated/plugins/toolbar/index.js +0 -9
  97. package/cjs/deprecated/plugins/tree/TreeDataPlugin.js +0 -281
  98. package/cjs/deprecated/plugins/tree/index.js +0 -9
  99. package/cjs/deprecated/plugins/tree/useExpandTreeState.js +0 -143
  100. package/cjs/deprecated/plugins/tree/utils.js +0 -43
  101. package/cjs/deprecated/plugins/tree/walkTreeStrategy.js +0 -60
  102. package/cjs/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js +0 -209
  103. package/cjs/deprecated/plugins/virtualization/index.js +0 -9
  104. package/cjs/deprecated/renderers.js +0 -76
  105. package/cjs/prop-types.js +0 -61
  106. package/esm/deprecated/TreeView.js +0 -61
  107. package/esm/deprecated/__testUtils__/utils.js +0 -79
  108. package/esm/deprecated/index.js +0 -14
  109. package/esm/deprecated/plugins/dnd/TreeDndPlugin.js +0 -110
  110. package/esm/deprecated/plugins/dnd/index.js +0 -1
  111. package/esm/deprecated/plugins/dnd/renderers/DraggableItem.js +0 -59
  112. package/esm/deprecated/plugins/dnd/renderers/DroppableList.js +0 -172
  113. package/esm/deprecated/plugins/dnd/utils.js +0 -139
  114. package/esm/deprecated/plugins/index.js +0 -7
  115. package/esm/deprecated/plugins/roving/TreeRovingPlugin.js +0 -96
  116. package/esm/deprecated/plugins/roving/index.js +0 -1
  117. package/esm/deprecated/plugins/searchable/SearchableTreePlugin.js +0 -99
  118. package/esm/deprecated/plugins/searchable/index.js +0 -1
  119. package/esm/deprecated/plugins/searchable/utils.js +0 -3
  120. package/esm/deprecated/plugins/selectable/SelectablePluginTree.js +0 -280
  121. package/esm/deprecated/plugins/selectable/index.js +0 -1
  122. package/esm/deprecated/plugins/selectable/utils.js +0 -15
  123. package/esm/deprecated/plugins/toolbar/TreeToolbarPlugin.js +0 -114
  124. package/esm/deprecated/plugins/toolbar/index.js +0 -1
  125. package/esm/deprecated/plugins/tree/TreeDataPlugin.js +0 -269
  126. package/esm/deprecated/plugins/tree/index.js +0 -1
  127. package/esm/deprecated/plugins/tree/useExpandTreeState.js +0 -135
  128. package/esm/deprecated/plugins/tree/utils.js +0 -28
  129. package/esm/deprecated/plugins/tree/walkTreeStrategy.js +0 -56
  130. package/esm/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js +0 -197
  131. package/esm/deprecated/plugins/virtualization/index.js +0 -1
  132. package/esm/deprecated/renderers.js +0 -59
  133. package/esm/prop-types.js +0 -46
  134. package/types/deprecated/TreeView.d.ts +0 -8
  135. package/types/deprecated/__testUtils__/utils.d.ts +0 -72
  136. package/types/deprecated/index.d.ts +0 -2
  137. package/types/deprecated/plugins/dnd/TreeDndPlugin.d.ts +0 -1
  138. package/types/deprecated/plugins/dnd/index.d.ts +0 -1
  139. package/types/deprecated/plugins/dnd/renderers/DraggableItem.d.ts +0 -3
  140. package/types/deprecated/plugins/dnd/renderers/DroppableList.d.ts +0 -6
  141. package/types/deprecated/plugins/dnd/tests/TreeDndPlugin.test.d.ts +0 -0
  142. package/types/deprecated/plugins/dnd/utils.d.ts +0 -28
  143. package/types/deprecated/plugins/index.d.ts +0 -7
  144. package/types/deprecated/plugins/roving/TreeRovingPlugin.d.ts +0 -1
  145. package/types/deprecated/plugins/roving/index.d.ts +0 -1
  146. package/types/deprecated/plugins/searchable/SearchableTreePlugin.d.ts +0 -1
  147. package/types/deprecated/plugins/searchable/index.d.ts +0 -1
  148. package/types/deprecated/plugins/searchable/utils.d.ts +0 -1
  149. package/types/deprecated/plugins/selectable/SelectablePluginTree.d.ts +0 -1
  150. package/types/deprecated/plugins/selectable/helper.d.ts +0 -0
  151. package/types/deprecated/plugins/selectable/index.d.ts +0 -1
  152. package/types/deprecated/plugins/selectable/tests/SelectablePluginTree.test.d.ts +0 -1
  153. package/types/deprecated/plugins/selectable/utils.d.ts +0 -1
  154. package/types/deprecated/plugins/toolbar/TreeToolbarPlugin.d.ts +0 -1
  155. package/types/deprecated/plugins/toolbar/index.d.ts +0 -1
  156. package/types/deprecated/plugins/tree/TreeDataPlugin.d.ts +0 -1
  157. package/types/deprecated/plugins/tree/index.d.ts +0 -1
  158. package/types/deprecated/plugins/tree/tests/TreeDataPlugin.test.d.ts +0 -1
  159. package/types/deprecated/plugins/tree/useExpandTreeState.d.ts +0 -14
  160. package/types/deprecated/plugins/tree/utils.d.ts +0 -8
  161. package/types/deprecated/plugins/tree/walkTreeStrategy.d.ts +0 -9
  162. package/types/deprecated/plugins/virtualization/TreeVirtualizationPlugin.d.ts +0 -1
  163. package/types/deprecated/plugins/virtualization/index.d.ts +0 -1
  164. package/types/deprecated/renderers.d.ts +0 -19
  165. package/types/prop-types.d.ts +0 -26
@@ -1,59 +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.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _jsx from '@babel/runtime/helpers/esm/jsx';
7
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
8
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
9
- import 'core-js/modules/web.dom-collections.iterator.js';
10
- import 'react';
11
- import { Draggable } from 'react-beautiful-dnd';
12
- import { GripperVertical } from '@elliemae/ds-icons';
13
- import { getDraggableProps } from '../utils.js';
14
- import { jsx } from 'react/jsx-runtime';
15
-
16
- const _excluded = ["key"];
17
-
18
- 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; }
19
-
20
- 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; }
21
-
22
- const DraggableItem = (renderers // , instance
23
- ) => props => {
24
- var _record$parentNode, _record$parentNode$da, _record$data;
25
-
26
- const {
27
- record,
28
- index,
29
- isItemFocused
30
- } = props;
31
- const ItemComponent = renderers.item;
32
- const isDragDisabled = (record === null || record === void 0 ? void 0 : (_record$parentNode = record.parentNode) === null || _record$parentNode === void 0 ? void 0 : (_record$parentNode$da = _record$parentNode.data) === null || _record$parentNode$da === void 0 ? void 0 : _record$parentNode$da.disableDragChildren) || (record === null || record === void 0 ? void 0 : (_record$data = record.data) === null || _record$data === void 0 ? void 0 : _record$data.disableDrag) || false; // const { draggedRecord } = instance.getInstance().state;
33
- // const isDragging = record.id === draggedRecord?.id;
34
-
35
- return /*#__PURE__*/_jsx(Draggable, {
36
- isDragDisabled: isDragDisabled,
37
- draggableId: String(record.id),
38
- index: index
39
- }, "".concat(record.id, "-draggable"), (provided, snapshot) => {
40
- const _getDraggableProps = getDraggableProps(props, provided, snapshot),
41
- {
42
- key
43
- } = _getDraggableProps,
44
- draggableProps = _objectWithoutProperties(_getDraggableProps, _excluded);
45
-
46
- return /*#__PURE__*/jsx(ItemComponent, _objectSpread(_objectSpread({}, draggableProps), {}, {
47
- // isDragging={isDragging}
48
- leftAddons: [/*#__PURE__*/jsx(GripperVertical, _objectSpread(_objectSpread({
49
- "data-testid": "drag-handle"
50
- }, provided.dragHandleProps), {}, {
51
- className: "drag-handle",
52
- tabIndex: isItemFocused ? 0 : -1
53
- }), "".concat(record.id, "-drag-handle")), ...(props.leftAddons || [])],
54
- children: props.children
55
- }), key);
56
- });
57
- };
58
-
59
- export { DraggableItem as default };
@@ -1,172 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
- import 'core-js/modules/web.dom-collections.iterator.js';
5
- import 'core-js/modules/esnext.async-iterator.filter.js';
6
- import 'core-js/modules/esnext.iterator.constructor.js';
7
- import 'core-js/modules/esnext.iterator.filter.js';
8
- import 'core-js/modules/esnext.async-iterator.for-each.js';
9
- import 'core-js/modules/esnext.iterator.for-each.js';
10
- import { useContext, useState, useRef, useCallback, createElement } from 'react';
11
- import { DragDropContext, Droppable } from 'react-beautiful-dnd';
12
- import { cx, mergeRefs } from '@elliemae/ds-utilities';
13
- import { GripperVertical } from '@elliemae/ds-icons';
14
- import FocusGroupContext from '@elliemae/ds-shared/FocusGroup/FocusGroupContext';
15
- import { findItemById, findItemOnDocument } from '../../tree/utils.js';
16
- import { getDraggableProps } from '../utils.js';
17
- import { jsx } from 'react/jsx-runtime';
18
-
19
- const _excluded = ["records"];
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
-
25
- const DroppableList = (renderers, instance) => _ref => {
26
- let {
27
- records
28
- } = _ref,
29
- rest = _objectWithoutProperties(_ref, _excluded);
30
-
31
- const {
32
- props: {
33
- expandTimerDelay = 1000,
34
- restrictDragAndDrop
35
- },
36
- actions: {
37
- setDraggedRecord,
38
- changeRecordsPosition,
39
- toggleExpand
40
- },
41
- state: {
42
- draggedRecord
43
- },
44
- itemRenderer
45
- } = instance.getInstance();
46
- const focusContext = useContext(FocusGroupContext);
47
- const [focusedItemWasDragged, setFocusedItemWasDragged] = useState(false);
48
- const preDragFocusedNode = useRef();
49
- const expandTimerRef = useRef();
50
- const draggedRecordShouldExpand = useRef(false);
51
- const currTargetRef = useRef({});
52
- const onDragUpdate = useCallback(data => {
53
- const {
54
- destination,
55
- combine
56
- } = data;
57
- clearTimeout(expandTimerRef.current);
58
-
59
- if (combine) {
60
- const {
61
- draggableId
62
- } = combine;
63
- const targetRecord = findItemById(records, draggableId);
64
-
65
- if (targetRecord && targetRecord.isGroup && !targetRecord.expanded) {
66
- expandTimerRef.current = setTimeout(() => toggleExpand(targetRecord), expandTimerDelay);
67
- }
68
- }
69
-
70
- currTargetRef.current = destination || currTargetRef.current;
71
- }, [records]);
72
- const onDragStart = useCallback(_ref2 => {
73
- let {
74
- source
75
- } = _ref2;
76
- preDragFocusedNode.current = document.activeElement; // when we move the currently focused item, preDragFocusedNode is the body of the doc
77
-
78
- setFocusedItemWasDragged(preDragFocusedNode.current.tagName === 'BODY');
79
- const draggingRecord = records[source.index];
80
-
81
- if (draggingRecord.expanded) {
82
- draggedRecordShouldExpand.current = true;
83
- toggleExpand(draggingRecord);
84
- }
85
-
86
- setDraggedRecord(draggingRecord);
87
- }, [records]);
88
- const onDragEnd = useCallback( // eslint-disable-next-line complexity
89
- // eslint-disable-next-line max-statements
90
- _ref3 => {
91
- var _sourceRecord$parentN, _targetRecord$parentN;
92
-
93
- let {
94
- destination,
95
- source,
96
- combine
97
- } = _ref3;
98
- clearTimeout(expandTimerRef.current);
99
- const sourceIndex = source.index;
100
- const destinationIndex = destination && destination.index;
101
- if (sourceIndex === destinationIndex) return;
102
- const sourceRecord = records[sourceIndex];
103
- const targetRecord = destination && records[destinationIndex];
104
- const combineWith = combine && findItemById(records, combine.draggableId);
105
- const down = sourceIndex < destinationIndex;
106
- if (restrictDragAndDrop && (sourceRecord === null || sourceRecord === void 0 ? void 0 : (_sourceRecord$parentN = sourceRecord.parentNode) === null || _sourceRecord$parentN === void 0 ? void 0 : _sourceRecord$parentN.id) !== (targetRecord === null || targetRecord === void 0 ? void 0 : (_targetRecord$parentN = targetRecord.parentNode) === null || _targetRecord$parentN === void 0 ? void 0 : _targetRecord$parentN.id)) return; // TODO check if we can change the records Immutable, this makes the DOM inconsistent on first renderers
107
-
108
- changeRecordsPosition({
109
- sourceRecord,
110
- targetRecord,
111
- combineWith,
112
- down
113
- });
114
-
115
- if (draggedRecordShouldExpand.current) {
116
- draggedRecordShouldExpand.current = false;
117
- toggleExpand(sourceRecord);
118
- }
119
-
120
- if (focusContext) {
121
- // TODO if we fix the mutable/immutable records handling this work-around should not be required anymore
122
- setTimeout(() => {
123
- const postDragFocusedNode = focusedItemWasDragged ? findItemOnDocument(sourceRecord.id) : findItemOnDocument(preDragFocusedNode.current.dataset.id);
124
- focusContext.focusItemByNode(postDragFocusedNode);
125
- }, 0);
126
- }
127
-
128
- currTargetRef.current = null;
129
- setDraggedRecord(null);
130
- }, [records, focusedItemWasDragged]);
131
- const {
132
- item: ItemComponent,
133
- list: ListComponent
134
- } = renderers;
135
- const renderClone = useCallback((provided, snapshot, rubric) => {
136
- const targetRecord = currTargetRef.current && records[currTargetRef.current.index] || {};
137
- const record = records[rubric.source.index];
138
- return /*#__PURE__*/createElement(ItemComponent, _objectSpread(_objectSpread({}, provided.draggableProps), {}, {
139
- key: rubric.source.index,
140
- record: record
141
- }, getDraggableProps({
142
- className: 'item-cloned'
143
- }, provided, snapshot)), /*#__PURE__*/jsx(GripperVertical, _objectSpread(_objectSpread({}, provided.dragHandleProps), {}, {
144
- className: "drag-handle"
145
- })), itemRenderer({
146
- record,
147
- nestingLevel: targetRecord.nestingLevel
148
- }));
149
- }, [currTargetRef, records, itemRenderer]);
150
- return /*#__PURE__*/_jsx(DragDropContext, {
151
- onDragEnd: onDragEnd,
152
- onDragStart: onDragStart,
153
- onDragUpdate: onDragUpdate
154
- }, void 0, /*#__PURE__*/_jsx(Droppable, {
155
- droppableId: "droppableId",
156
- isCombineEnabled: true,
157
- mode: "virtual",
158
- renderClone: renderClone
159
- }, void 0, (droppableProvided, snapshot) => {
160
- // Add an extra item to our list to make space for a dragging item
161
- // work in a virtual list
162
- const itemCount = snapshot.isUsingPlaceholder ? records.length + 1 : records.length;
163
- return /*#__PURE__*/jsx(ListComponent, _objectSpread(_objectSpread({}, rest), {}, {
164
- className: cx(rest.className, draggedRecord && 'dragging'),
165
- innerRef: mergeRefs(droppableProvided.innerRef, rest.innerRef, rest.ref),
166
- itemCount: itemCount,
167
- records: records
168
- }));
169
- }));
170
- };
171
-
172
- export { DroppableList as default };
@@ -1,139 +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.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import 'core-js/modules/web.dom-collections.iterator.js';
8
- import { cx, mergeRefs, set, get, cloneDeep, arrayMove } from '@elliemae/ds-utilities';
9
-
10
- 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; }
11
-
12
- 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; }
13
- function getStyle(provided, style) {
14
- if (!style) {
15
- return provided.draggableProps.style;
16
- }
17
-
18
- return _objectSpread(_objectSpread({}, provided.draggableProps.style), style);
19
- }
20
- function getDraggableProps(props, provided, snapshot) {
21
- const isGroupedOver = Boolean(snapshot.combineTargetFor);
22
- return _objectSpread(_objectSpread(_objectSpread({}, props), provided.draggableProps), {}, {
23
- className: cx(props.className, isGroupedOver && 'can-group-over'),
24
- // provided,
25
- innerRef: mergeRefs(provided.innerRef, props.innerRef, props.ref),
26
- 'data-index': props.index,
27
- style: getStyle(provided, _objectSpread(_objectSpread({}, props.style), {}, {
28
- display: 'flex'
29
- }))
30
- });
31
- }
32
- const setTreeArrayInPath = (treeData, path, data) => {
33
- const nextTreeData = [...treeData];
34
-
35
- if (path.length) {
36
- set(nextTreeData, path, data);
37
- return nextTreeData;
38
- }
39
-
40
- return data;
41
- }; // check if at the earliest possible different nest level the source is before the target or not
42
-
43
- const isSourceBeforeTarget = (sourcePath, targetPath) => {
44
- let sourceIsBeforeTarget = false;
45
-
46
- if (sourcePath.length <= targetPath.length) {
47
- // we increase by 2 beacuse every other position is 'children'
48
- for (let i = 0; i < sourcePath.length; i += 2) {
49
- const source = sourcePath[i];
50
- const target = targetPath[i]; // since we skip by 2 source/target can be out of bounds
51
- // if source/target are the same we are at same nest level
52
-
53
- if (!Number.isInteger(source) || // check to see if it's a number because 0 == false in javascript
54
- !Number.isInteger(target) || source === target) continue; // the nest level differs, as such we check if source if before or after
55
-
56
- sourceIsBeforeTarget = source < target;
57
- break;
58
- }
59
- }
60
-
61
- return sourceIsBeforeTarget;
62
- };
63
- const updateTargetPath = function (sourcePath, targetPath) {
64
- let incr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
65
- const nextTargetPath = [...targetPath];
66
- const posToUpdate = sourcePath.length ? sourcePath.length - 1 : 0;
67
- nextTargetPath.splice(posToUpdate, 1, targetPath[posToUpdate] + incr);
68
- return nextTargetPath;
69
- };
70
- const getParentPath = path => path.slice(0, -1);
71
- const getParentChildrenByPath = (treeData, path) => path && path.length ? get(treeData, path) : treeData;
72
- const getTreePosition = recordPath => ({
73
- parentPath: getParentPath(recordPath),
74
- index: recordPath.slice(-1)[0]
75
- });
76
- const changePositionBetweenDifferentArrays = _ref => {
77
- let {
78
- sourceTreePosition,
79
- // already extracted sourceRecord.path
80
- targetTreePosition,
81
- // already extracted targetRecord.path
82
- // combineWith the element we want to append to the children of (this is null when the drag doesn't result in adding children)
83
- combineWith,
84
- sourceRecord,
85
- // what we are dragging
86
- targetRecord,
87
- // what we are dropping on top of
88
- down,
89
- // ???
90
- data,
91
- // tree before dragEnd changes
92
- childrenKey = 'children' // constant -> 'children'
93
-
94
- } = _ref;
95
- let nextTreeData = cloneDeep(data);
96
- if (!sourceRecord || !sourceRecord.data) throw new Error('error while dragging, no dragged item received');
97
- const sourceTreeChildren = getParentChildrenByPath(nextTreeData, sourceTreePosition.parentPath); // When moving an item we remove the item from it's former parent children array
98
-
99
- sourceTreeChildren.splice(sourceTreePosition.index, 1);
100
- nextTreeData = setTreeArrayInPath(nextTreeData, sourceTreePosition.parentPath, sourceTreeChildren); // if source is at previous position than the target children
101
- // then the index should decrease
102
-
103
- const shouldUpdateTarget = isSourceBeforeTarget(sourceRecord.path, targetRecord.path);
104
- const nextTargetPosition = shouldUpdateTarget ? combineWith ? {
105
- parentPath: updateTargetPath(sourceRecord.path, combineWith.path)
106
- } : getTreePosition(updateTargetPath(sourceRecord.path, targetRecord.path)) : targetTreePosition; // add to target
107
-
108
- const {
109
- parentPath
110
- } = nextTargetPosition;
111
- const targetTreeChildren = getParentChildrenByPath(nextTreeData, parentPath) || (combineWith === null || combineWith === void 0 ? void 0 : combineWith.data) || (targetRecord === null || targetRecord === void 0 ? void 0 : targetRecord.data);
112
-
113
- if (combineWith && targetTreeChildren) {
114
- const targetChildrensArray = targetTreeChildren[childrenKey];
115
- targetChildrensArray.push(sourceRecord.data);
116
- } else if (targetTreeChildren) {
117
- targetTreeChildren.splice(targetTreePosition.index + (down ? 1 : 0), 0, sourceRecord.data);
118
- }
119
-
120
- nextTreeData = setTreeArrayInPath(nextTreeData, parentPath, targetTreeChildren);
121
- return nextTreeData;
122
- };
123
- const combineWithTarget = () => {};
124
- const changePositionSameArray = _ref2 => {
125
- let {
126
- targetTreePosition,
127
- sourceRecord,
128
- targetRecord,
129
- data
130
- } = _ref2;
131
- let nextTreeData = cloneDeep(data);
132
- const targetTreeChildren = getParentChildrenByPath(nextTreeData, targetTreePosition.parentPath);
133
- const nextChildren = arrayMove(targetTreeChildren, sourceRecord.index, targetRecord.index); // mutates the tree. That's the reason of the clone above
134
-
135
- nextTreeData = setTreeArrayInPath(nextTreeData, targetTreePosition.parentPath, nextChildren);
136
- return nextTreeData;
137
- };
138
-
139
- export { changePositionBetweenDifferentArrays, changePositionSameArray, combineWithTarget, getDraggableProps, getParentChildrenByPath, getParentPath, getStyle, getTreePosition, isSourceBeforeTarget, setTreeArrayInPath, updateTargetPath };
@@ -1,7 +0,0 @@
1
- export { TreeDndPlugin } from './dnd/TreeDndPlugin.js';
2
- export { TreeRovingPlugin } from './roving/TreeRovingPlugin.js';
3
- export { SelectablePluginTree } from './selectable/SelectablePluginTree.js';
4
- export { TreeToolbarPlugin } from './toolbar/TreeToolbarPlugin.js';
5
- export { TreePluginList } from './tree/TreeDataPlugin.js';
6
- export { TreeVirtualizationPlugin } from './virtualization/TreeVirtualizationPlugin.js';
7
- export { SearchableTreePlugin } from './searchable/SearchableTreePlugin.js';
@@ -1,96 +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.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
8
- import _jsx from '@babel/runtime/helpers/esm/jsx';
9
- import 'core-js/modules/web.dom-collections.iterator.js';
10
- import { useState, useMemo, useRef } from 'react';
11
- import FocusGroupProvider from '@elliemae/ds-shared/FocusGroup/FocusGroupManager';
12
- import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
13
- import { mergeRefs } from '@elliemae/ds-utilities';
14
- import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
15
- import { jsx } from 'react/jsx-runtime';
16
-
17
- const _excluded = ["innerRef", "onFocus", "onBlur"];
18
-
19
- 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; }
20
-
21
- 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; }
22
-
23
- const TreeListRovingHoc = instance => props => {
24
- const {
25
- hotKeys
26
- } = instance.getInstance();
27
- return /*#__PURE__*/_jsx(FocusGroupProvider, {
28
- hotKeys: hotKeys
29
- }, void 0, props.children);
30
- }; // eslint-disable-next-line react/display-name
31
-
32
-
33
- const TreeItemRovingHoc = Component => _ref => {
34
- let {
35
- innerRef,
36
- onFocus,
37
- onBlur
38
- } = _ref,
39
- props = _objectWithoutProperties(_ref, _excluded);
40
-
41
- // eslint-disable-next-line react-hooks/rules-of-hooks
42
- const ref = useRef(null); // eslint-disable-next-line react-hooks/rules-of-hooks
43
-
44
- useFocusGroupItem(ref, {
45
- onFocus,
46
- onBlur
47
- });
48
- return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
49
- innerRef: mergeRefs(ref, innerRef)
50
- }));
51
- };
52
-
53
- const TreeRovingPlugin = createInstancePlugin('tree-data', {
54
- getItemProps(props, instance) {
55
- const [isItemFocused, setIsItemFocused] = useState(false);
56
- return _objectSpread(_objectSpread({}, props), {}, {
57
- onBlur: () => setIsItemFocused(false),
58
- // eslint-disable-next-line no-unused-vars
59
- onFocus: e => {
60
- var _instance$props;
61
-
62
- setIsItemFocused(true);
63
-
64
- if (instance !== null && instance !== void 0 && (_instance$props = instance.props) !== null && _instance$props !== void 0 && _instance$props.onItemFocus) {
65
- instance.props.onItemFocus({
66
- scrollToItem: function () {
67
- var _props$listRef, _props$listRef$curren;
68
-
69
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
70
- args[_key] = arguments[_key];
71
- }
72
-
73
- return props === null || props === void 0 ? void 0 : (_props$listRef = props.listRef) === null || _props$listRef === void 0 ? void 0 : (_props$listRef$curren = _props$listRef.current) === null || _props$listRef$curren === void 0 ? void 0 : _props$listRef$curren.scrollToItem(args);
74
- },
75
- itemIndex: props === null || props === void 0 ? void 0 : props.index
76
- });
77
- }
78
- },
79
- isItemFocused,
80
- 'data-index': props.index
81
- });
82
- },
83
-
84
- renderers(renderers, instance) {
85
- const ListWrapper = useMemo(() => TreeListRovingHoc(instance), []);
86
- const Item = useMemo(() => TreeItemRovingHoc(renderers.item), []);
87
- return _objectSpread(_objectSpread({}, renderers), {}, {
88
- listWrapper: ListWrapper,
89
- item: Item
90
- });
91
- }
92
-
93
- });
94
- TreeRovingPlugin.order = 0;
95
-
96
- export { TreeRovingPlugin };
@@ -1 +0,0 @@
1
- export { TreeRovingPlugin } from './TreeRovingPlugin.js';
@@ -1,99 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/esnext.async-iterator.filter.js';
3
- import 'core-js/modules/esnext.iterator.constructor.js';
4
- import 'core-js/modules/esnext.iterator.filter.js';
5
- import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
6
- import Highlighter from 'react-highlight-words';
7
- import 'react';
8
- import { usePrevious } from '@elliemae/ds-utilities';
9
-
10
- const markParentsAsChildMatch = record => {
11
- let currRecord = record;
12
-
13
- while (currRecord.parentNode) {
14
- currRecord.parentNode.childMatch = true;
15
- currRecord = currRecord.parentNode;
16
- }
17
- };
18
-
19
- function transformRecords(records, instance) {
20
- var _instance$getListRef, _instance$getListRef$;
21
-
22
- // gets the ul with overflow: auto
23
- const list = (_instance$getListRef = instance.getListRef()) === null || _instance$getListRef === void 0 ? void 0 : (_instance$getListRef$ = _instance$getListRef.current) === null || _instance$getListRef$ === void 0 ? void 0 : _instance$getListRef$.parentElement;
24
- const {
25
- props: {
26
- searchQuery
27
- }
28
- } = instance.getInstance();
29
- if (!searchQuery) return records; // Scroll the list to the top once the search is triggered
30
-
31
- list === null || list === void 0 ? void 0 : list.scrollTo(0, 0);
32
- return records.filter(record => record.selfMatch || record.childMatch);
33
- }
34
-
35
- transformRecords.order = 0;
36
-
37
- function transformRecord(record, instance) {
38
- const {
39
- props: {
40
- searchQuery
41
- },
42
- getItemLabel
43
- } = instance.getInstance();
44
-
45
- if (searchQuery && getItemLabel(record).toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1) {
46
- markParentsAsChildMatch(record); // eslint-disable-next-line no-param-reassign
47
-
48
- record.selfMatch = true;
49
- }
50
-
51
- return record;
52
- }
53
-
54
- transformRecord.order = 0;
55
-
56
- const itemRenderer = (value, itemProps, instance) => {
57
- const {
58
- props: {
59
- searchQuery,
60
- showHighlight = true
61
- }
62
- } = instance.getInstance();
63
- if (!showHighlight || !searchQuery) return value;
64
- return /*#__PURE__*/_jsx(Highlighter, {
65
- autoEscape: true,
66
- highlightClassName: "tree-text-highlight",
67
- searchWords: [searchQuery],
68
- textToHighlight: value
69
- });
70
- };
71
-
72
- itemRenderer.order = 0;
73
- const SearchableTreePlugin = createInstancePlugin('searchable-tree', {
74
- instance: instance => {
75
- const {
76
- props: {
77
- searchQuery
78
- }
79
- } = instance; // eslint-disable-next-line react-hooks/rules-of-hooks
80
-
81
- const prevSearchQuery = usePrevious(searchQuery);
82
- return {
83
- prevSearchQuery
84
- };
85
- },
86
- shouldWalkChildren: (record, instance) => {
87
- const {
88
- props: {
89
- searchQuery
90
- }
91
- } = instance.getInstance();
92
- return !!searchQuery;
93
- },
94
- record: transformRecord,
95
- records: transformRecords,
96
- itemRenderer
97
- });
98
-
99
- export { SearchableTreePlugin };
@@ -1 +0,0 @@
1
- export { SearchableTreePlugin } from './SearchableTreePlugin.js';
@@ -1,3 +0,0 @@
1
- const getListFromDocument = document.querySelector("[data-testid=\"tree-list\"]");
2
-
3
- export { getListFromDocument };