@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,280 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.for-each.js';
2
- import 'core-js/modules/esnext.iterator.for-each.js';
3
- import _jsx from '@babel/runtime/helpers/esm/jsx';
4
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
5
- import 'core-js/modules/web.dom-collections.iterator.js';
6
- import 'core-js/modules/esnext.async-iterator.reduce.js';
7
- import 'core-js/modules/esnext.iterator.constructor.js';
8
- import 'core-js/modules/esnext.iterator.reduce.js';
9
- import 'core-js/modules/esnext.async-iterator.filter.js';
10
- import 'core-js/modules/esnext.iterator.filter.js';
11
- import { useMemo, useCallback } from 'react';
12
- import { DSCheckbox, DSRadio } from '@elliemae/ds-form';
13
- import { cx, useDerivedStateFromProps, isFunction } from '@elliemae/ds-utilities';
14
- import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
15
- import { walkTreeStrategy } from '../tree/walkTreeStrategy.js';
16
- import { getParentId, getParentChildren } from '../tree/utils.js';
17
- import { checkParentState } from './utils.js';
18
- import 'react/jsx-runtime';
19
-
20
- 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; }
21
-
22
- 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; }
23
-
24
- const updateParentState = _ref => {
25
- let {
26
- node,
27
- checked,
28
- selectionState,
29
- isCurrentParentChildren = true
30
- } = _ref;
31
- const {
32
- parentNode
33
- } = node;
34
-
35
- if (parentNode) {
36
- let nextSelectedChildrenAmount; // increase or decrease the amount
37
-
38
- if (checked === true && isCurrentParentChildren) nextSelectedChildrenAmount = parentNode.selectedChildren.length;
39
- if (checked === true && !isCurrentParentChildren) nextSelectedChildrenAmount = parentNode.selectedChildren.length + 1;
40
- if (checked === false) nextSelectedChildrenAmount = parentNode.selectedChildren.length - 1;
41
- const parentChildren = getParentChildren(node);
42
- const parentChildrenLength = parentChildren && parentChildren.length; // check parent state
43
-
44
- const parentState = checkParentState(nextSelectedChildrenAmount, parentChildrenLength, checked);
45
- selectionState[parentNode.id || 'all'] = parentState;
46
- updateParentState({
47
- node: parentNode,
48
- checked: parentState,
49
- selectionState,
50
- isCurrentParentChildren: false
51
- });
52
- }
53
- };
54
-
55
- const useSelectableTreeState = instance => {
56
- const {
57
- originalData,
58
- idKey = 'id',
59
- props: {
60
- onSelect = () => null,
61
- selection: selectionProp = {},
62
- onSelectionChange = () => null,
63
- isMultiSelect = false,
64
- isSingleSelect = false
65
- }
66
- } = instance;
67
- const [selection, setSelection] = useDerivedStateFromProps(selectionProp);
68
- const isAllSelected = useMemo(() => {
69
- if (!isMultiSelect) return false;
70
- const amountSelected = originalData.reduce((result, item) => selection[item[idKey]] === true ? result + 1 : result, 0);
71
-
72
- if (amountSelected === originalData.length) {
73
- return true;
74
- }
75
-
76
- if (amountSelected === 0) {
77
- return false;
78
- }
79
-
80
- return 'mixed';
81
- }, [selection]);
82
- const select = useCallback(function (record) {
83
- let additionalActions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
84
-
85
- if (isFunction(onSelect)) {
86
- onSelect(record.data, {
87
- scrollToItem: function () {
88
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
89
- args[_key] = arguments[_key];
90
- }
91
-
92
- if (additionalActions.scrollToItem) additionalActions.scrollToItem(args);
93
- },
94
- itemIndex: additionalActions === null || additionalActions === void 0 ? void 0 : additionalActions.itemIndex
95
- });
96
- }
97
-
98
- setSelection(prevSelection => {
99
- const nextSelectionState = isMultiSelect ? _objectSpread({}, prevSelection) : {};
100
- const nextState = isMultiSelect ? !prevSelection[record.id] : {};
101
- nextSelectionState[record.id] = nextState;
102
-
103
- if (isMultiSelect || isSingleSelect) {
104
- // if node group then select all its leafs
105
- if (record.isGroup && isMultiSelect) {
106
- if (record.parentNode && nextState) record.parentNode.selectedChildren.push(record.id);
107
- if (!nextState) record.selectedChildren = []; // get all children
108
-
109
- walkTreeStrategy({
110
- data: record.data.children,
111
- parentNode: record,
112
- cb: node => {
113
- const parentId = getParentId(node); // if direct child and truthy next state
114
-
115
- if (nextState && parentId === record.id) {
116
- record.selectedChildren.push(node.id);
117
- }
118
-
119
- nextSelectionState[node.id] = nextState;
120
- }
121
- });
122
- } // mutates the cloned selection state
123
-
124
-
125
- updateParentState({
126
- node: record,
127
- checked: nextState,
128
- selectionState: nextSelectionState
129
- });
130
- }
131
-
132
- onSelectionChange(nextSelectionState, record.data, {
133
- scrollToItem: function () {
134
- for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
135
- args[_key2] = arguments[_key2];
136
- }
137
-
138
- if (additionalActions.scrollToItem) additionalActions.scrollToItem(args);
139
- },
140
- itemIndex: additionalActions === null || additionalActions === void 0 ? void 0 : additionalActions.itemIndex
141
- });
142
- return nextSelectionState;
143
- });
144
- }, []);
145
- return {
146
- state: {
147
- selection,
148
- isAllSelected
149
- },
150
- actions: {
151
- select
152
- }
153
- };
154
- };
155
-
156
- const updateParentInternalState = (record, checked) => {
157
- const {
158
- parentNode
159
- } = record;
160
- if (!parentNode) return; // if next state is checked
161
-
162
- if (checked === true) {
163
- parentNode.selectedChildren.push(record.id);
164
- } else {
165
- parentNode.selectedChildren = parentNode.selectedChildren.filter(id => id !== record.id);
166
- }
167
- };
168
- const SelectablePluginTree = createInstancePlugin('selectable', {
169
- state: useSelectableTreeState,
170
- // itemRenderer: SelectionFormatter,
171
- record: (record, instance) => {
172
- const {
173
- state: {
174
- selection
175
- },
176
- props: {
177
- isMultiSelect,
178
- isSingleSelect
179
- }
180
- } = instance.getInstance();
181
- record.checked = selection[record.id];
182
-
183
- if (isMultiSelect || isSingleSelect) {
184
- // if it's the root of the tree declare the selectedChildren array
185
- if (!record.parentNode.id && record.parentNode.selectedChildren === undefined) {
186
- record.parentNode.selectedChildren = [];
187
- }
188
-
189
- if (record.isGroup && record.selectedChildren === undefined) {
190
- record.selectedChildren = [];
191
- }
192
-
193
- updateParentInternalState(record, record.checked);
194
- }
195
-
196
- return record;
197
- },
198
-
199
- getItemProps(props, instance, _ref3) {
200
- let {
201
- record
202
- } = _ref3;
203
- const {
204
- actions: {
205
- select
206
- },
207
- props: {
208
- isMultiSelect,
209
- isSingleSelect,
210
- disableLeafs,
211
- disableGroups
212
- }
213
- } = instance.getInstance();
214
-
215
- const handleSelect = () => select(record, {
216
- scrollToItem: function () {
217
- var _props$listRef, _props$listRef$curren;
218
-
219
- for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
220
- args[_key3] = arguments[_key3];
221
- }
222
-
223
- 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);
224
- },
225
- itemIndex: props === null || props === void 0 ? void 0 : props.index
226
- });
227
-
228
- const checkboxAddon = isMultiSelect && /*#__PURE__*/_jsx(DSCheckbox, {
229
- checked: record.checked,
230
- disabled: record.isGroup ? disableGroups : disableLeafs,
231
- className: "tree-item-checkbox",
232
- "data-testid": "tree-item-checkbox",
233
- onChange: handleSelect,
234
- tabIndex: -1
235
- });
236
-
237
- const radioAddon = isSingleSelect && !isMultiSelect && /*#__PURE__*/_jsx(DSRadio, {
238
- checked: !!record.checked,
239
- disabled: record.isGroup ? disableGroups : disableLeafs,
240
- className: "tree-item-radio",
241
- "data-testid": "tree-item-radio",
242
- onChange: handleSelect,
243
- tabIndex: -1
244
- });
245
-
246
- if (isMultiSelect || isSingleSelect) {
247
- return _objectSpread(_objectSpread({}, props), {}, {
248
- leftAddons: [checkboxAddon, radioAddon, ...(props.leftAddons || [])],
249
- 'aria-selected': !!record.checked
250
- });
251
- }
252
-
253
- return _objectSpread(_objectSpread({}, props), {}, {
254
- onClick: handleSelect,
255
- className: cx(props.className, record.checked && 'selected'),
256
- 'aria-selected': !!record.checked
257
- });
258
- },
259
-
260
- hotKeys(grid) {
261
- return {
262
- key: 'space',
263
- handler: _ref4 => {
264
- let {
265
- index
266
- } = _ref4;
267
- const {
268
- records,
269
- actions: {
270
- select
271
- }
272
- } = grid.getInstance();
273
- select(records[index]);
274
- }
275
- };
276
- }
277
-
278
- });
279
-
280
- export { SelectablePluginTree };
@@ -1 +0,0 @@
1
- export { SelectablePluginTree } from './SelectablePluginTree.js';
@@ -1,15 +0,0 @@
1
- const checkParentState = (nextSelectedChildrenAmount, parentChildrenLength, checked) => {
2
- let parentState = false;
3
-
4
- if (nextSelectedChildrenAmount === parentChildrenLength) {
5
- parentState = true;
6
- } else if (nextSelectedChildrenAmount > 0 && nextSelectedChildrenAmount < parentChildrenLength) {
7
- parentState = 'mixed';
8
- } else if (parentChildrenLength && checked === 'mixed') {
9
- parentState = 'mixed';
10
- }
11
-
12
- return parentState;
13
- };
14
-
15
- export { checkParentState };
@@ -1,114 +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 _jsx from '@babel/runtime/helpers/esm/jsx';
8
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
9
- import { useMemo, useContext, useRef } from 'react';
10
- import { MoreOptionsVert } from '@elliemae/ds-icons';
11
- import Button from '@elliemae/ds-button';
12
- import { runAll } from '@elliemae/ds-utilities';
13
- import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
14
- import ToolbarProvider, { ToolbarContext } from '@elliemae/ds-shared/toolbar/ToolbarProvider';
15
- import FocusGroupContext from '@elliemae/ds-shared/FocusGroup/FocusGroupContext';
16
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
17
-
18
- const _excluded = ["onMouseEnter", "onMouseLeave", "extraParams", "renderToolbar", "isItemFocused", "icon", "rowSize"];
19
-
20
- 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; }
21
-
22
- 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; }
23
-
24
- const ToolbarDisclosure = props => {
25
- const {
26
- onMouseEnter,
27
- onMouseLeave,
28
- extraParams,
29
- renderToolbar,
30
- isItemFocused,
31
- icon = /*#__PURE__*/_jsx(MoreOptionsVert, {
32
- color: ['brand-primary', 800]
33
- }),
34
- rowSize
35
- } = props,
36
- rest = _objectWithoutProperties(props, _excluded);
37
-
38
- const toolbarContext = useContext(ToolbarContext);
39
- const ref = useRef(null);
40
-
41
- const show = () => {
42
- if (ref.current) {
43
- const toolbar = renderToolbar(_objectSpread(_objectSpread({
44
- onCloseToolbar: toolbarContext.hide
45
- }, extraParams), {}, {
46
- size: rowSize
47
- }));
48
- toolbarContext.show({
49
- reference: ref.current,
50
- renderer: toolbar
51
- });
52
- }
53
- };
54
-
55
- const hide = e => {
56
- toolbarContext.hide(e);
57
- };
58
-
59
- return /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({}, rest), {}, {
60
- buttonType: "text",
61
- className: "toolbar-trigger",
62
- icon: icon,
63
- innerRef: ref,
64
- onClick: show,
65
- onMouseEnter: runAll(show, onMouseEnter),
66
- onMouseLeave: runAll(hide, onMouseLeave),
67
- tabIndex: isItemFocused ? 0 : -1
68
- }));
69
- };
70
-
71
- const TriggerFormatter = (value, extraParams, instance) => {
72
- const {
73
- props: {
74
- onShowToolbar,
75
- onCloseToolbar,
76
- renderToolbar,
77
- rowSize
78
- }
79
- } = instance.getInstance();
80
- return /*#__PURE__*/jsxs(Fragment, {
81
- children: [value, /*#__PURE__*/_jsx(ToolbarDisclosure, {
82
- isItemFocused: extraParams.isItemFocused,
83
- onClose: onCloseToolbar,
84
- onShow: onShowToolbar,
85
- renderToolbar: renderToolbar,
86
- rowSize: rowSize
87
- })]
88
- });
89
- };
90
-
91
- const TreeToolbarPlugin = createInstancePlugin('tree-toolbar', {
92
- itemRenderer: TriggerFormatter,
93
-
94
- renderers(renderers) {
95
- const List = useMemo(() => {
96
- const Component = renderers.list; // eslint-disable-next-line react/display-name
97
-
98
- return props => {
99
- const focusContext = useContext(FocusGroupContext);
100
- return /*#__PURE__*/_jsx(ToolbarProvider, {
101
- onHide: (state, e) => {
102
- if (e && e.type === 'keydown' && focusContext) focusContext.focus();
103
- }
104
- }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
105
- };
106
- }, []);
107
- return _objectSpread(_objectSpread({}, renderers), {}, {
108
- list: List
109
- });
110
- }
111
-
112
- });
113
-
114
- export { TreeToolbarPlugin };
@@ -1 +0,0 @@
1
- export { TreeToolbarPlugin } from './TreeToolbarPlugin.js';
@@ -1,269 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.filter.js';
3
- import 'core-js/modules/esnext.async-iterator.for-each.js';
4
- import 'core-js/modules/esnext.iterator.for-each.js';
5
- import _jsx from '@babel/runtime/helpers/esm/jsx';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import 'core-js/modules/esnext.async-iterator.some.js';
8
- import 'core-js/modules/esnext.iterator.constructor.js';
9
- import 'core-js/modules/esnext.iterator.some.js';
10
- import 'core-js/modules/web.dom-collections.iterator.js';
11
- import 'core-js/modules/esnext.async-iterator.find.js';
12
- import 'core-js/modules/esnext.iterator.find.js';
13
- import React, { useCallback } from 'react';
14
- import { cx, isFunction } from '@elliemae/ds-utilities';
15
- import Button from '@elliemae/ds-button';
16
- import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
17
- import { aggregatedClasses } from '@elliemae/ds-classnames';
18
- import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
19
- import { walkTreeStrategy } from './walkTreeStrategy.js';
20
- import { getParentId, getItemChildrenLength, findItemOnDocument, getListFromDocument } from './utils.js';
21
- import { treeItemBlockName } from '../../renderers.js';
22
- import { useExpandTreeState } from './useExpandTreeState.js';
23
-
24
- var _ArrowheadDown, _ArrowheadRight;
25
-
26
- 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; }
27
-
28
- 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; }
29
- const ItemContent = aggregatedClasses('div')("".concat(treeItemBlockName, "-content"));
30
- const ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value');
31
-
32
- const noop = () => null;
33
-
34
- const getItemNestingLeftPadding = (level, opts) => {
35
- const {
36
- spaceForNestingLevel,
37
- isChild
38
- } = _objectSpread({
39
- spaceForNestingLevel: 1.5
40
- }, opts);
41
-
42
- const groupLeftPadding = spaceForNestingLevel * (level - 1);
43
- return isChild ? "".concat(groupLeftPadding + spaceForNestingLevel - 0.1, "em") : "".concat(groupLeftPadding, "em");
44
- };
45
-
46
- const itemRenderer = (value, itemProps, instance) => {
47
- const {
48
- record
49
- } = itemProps;
50
- const {
51
- props: {
52
- showChildrenAmount = false,
53
- labelRenderer,
54
- onItemClick = noop
55
- }
56
- } = instance.getInstance(); // eslint-disable-next-line react-hooks/rules-of-hooks
57
-
58
- const handleItemClick = useCallback(e => {
59
- onItemClick(record.data, e);
60
- }, [record.data, onItemClick]);
61
- const amountChildren = Number(getItemChildrenLength(record));
62
- const renderedLabel = isFunction(labelRenderer) && labelRenderer(value, itemProps) || value;
63
- return /*#__PURE__*/_jsx(ItemContent, {
64
- "data-testid": "".concat(treeItemBlockName, "-content"),
65
- onClick: handleItemClick
66
- }, void 0, /*#__PURE__*/_jsx(ItemValue, {}, void 0, renderedLabel, showChildrenAmount && record.isGroup && " (".concat(amountChildren, ")")));
67
- };
68
-
69
- itemRenderer.order = 100;
70
- const TreePluginList = createInstancePlugin('tree-data', {
71
- state: useExpandTreeState,
72
- recordIterator: opts => {
73
- const shouldWalkChildren = record => {
74
- const {
75
- state: {
76
- expandedAll
77
- },
78
- decorators
79
- } = opts.instance.getInstance();
80
- const shouldWalk = decorators.shouldWalkChildren.some(decorator => decorator(record, opts.instance));
81
- if (shouldWalk) return true;
82
- if (expandedAll === true) return true;
83
- return !record.parentNode.id || record.parentNode.expanded;
84
- };
85
-
86
- walkTreeStrategy(_objectSpread(_objectSpread({}, opts), {}, {
87
- shouldWalkChildren
88
- }));
89
- },
90
-
91
- getItemProps(props, instance, _ref) {
92
- let {
93
- record
94
- } = _ref;
95
- const {
96
- nestingLevel
97
- } = record;
98
- const {
99
- actions: {
100
- _toggleExpand
101
- },
102
- props: {
103
- itemIcon,
104
- groupIcon,
105
- spaceForNestingLevel = 1.5
106
- }
107
- } = instance.getInstance(); // eslint-disable-next-line react-hooks/rules-of-hooks
108
-
109
- const handleExpandRow = useCallback(() => _toggleExpand(record.data), [record.data]);
110
- const icon = record.isGroup ? groupIcon : itemIcon;
111
- const itemNestingLeftPadding = getItemNestingLeftPadding(nestingLevel || record.nestingLevel, {
112
- isChild: !record.isGroup,
113
- spaceForNestingLevel
114
- });
115
-
116
- const expandAddon = record.isGroup && /*#__PURE__*/_jsx(Button, {
117
- buttonType: "text",
118
- className: "expandable-arrow",
119
- "data-testid": "tree-item-expand-toggle",
120
- icon: record.expanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {
121
- "data-testid": "ic-arrow-head-down"
122
- })) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx(ArrowheadRight, {
123
- "data-testid": "ic-arrow-head-right"
124
- })),
125
- onClick: e => {
126
- // Avoid item selection on caret click (just expand/hide)
127
- e.stopPropagation();
128
- handleExpandRow(e);
129
- },
130
- size: "s",
131
- tabIndex: -1 // eslint-disable-next-line max-lines
132
-
133
- }, "".concat(record.id, "-expand-addon"));
134
-
135
- const iconAddon = icon && /*#__PURE__*/React.cloneElement(icon, {
136
- 'data-testid': record.isGroup ? 'tree-item-group-icon' : 'tree-item-icon',
137
- className: cx(icon.props.className, 'tree-item-icon')
138
- });
139
-
140
- const spaceAddon = /*#__PURE__*/_jsx("div", {
141
- "data-testid": "tree-item-nested-space",
142
- style: {
143
- width: itemNestingLeftPadding
144
- }
145
- }, "".concat(record.id, "-space-addon"));
146
-
147
- return _objectSpread(_objectSpread({}, props), {}, {
148
- 'data-id': record.id,
149
- 'data-parentid': getParentId(record),
150
- 'aria-expanded': !!record.expanded,
151
- leftAddons: [...(props.leftAddons || []), spaceAddon, expandAddon, iconAddon]
152
- });
153
- },
154
-
155
- record: (record, instance) => {
156
- const {
157
- state: {
158
- expanded,
159
- expandedAll
160
- }
161
- } = instance.getInstance();
162
- const isParentExpanded = !record.parentNode.id || record.parentNode.expanded; // eslint-disable-next-line no-param-reassign
163
-
164
- if (expandedAll === true) record.expanded = true; // eslint-disable-next-line no-param-reassign
165
- else if (expandedAll === false) record.expanded = false; // eslint-disable-next-line no-param-reassign
166
- else record.expanded = isParentExpanded && !!expanded[record.id];
167
- return isParentExpanded && record;
168
- },
169
-
170
- hotKeys(instance) {
171
- function handleExpand(_ref2) {
172
- let {
173
- index
174
- } = _ref2;
175
- const {
176
- records,
177
- actions: {
178
- _toggleExpand
179
- }
180
- } = instance.getInstance();
181
- const record = records[index];
182
- if (record && record.data.children.length > 0) _toggleExpand(record.data);
183
- }
184
-
185
- function handleCollapse(_ref3) {
186
- let {
187
- index
188
- } = _ref3;
189
- const {
190
- records,
191
- actions: {
192
- collapse
193
- }
194
- } = instance.getInstance();
195
- const record = records[index];
196
-
197
- if (record && record.expanded) {
198
- collapse(record);
199
- }
200
- }
201
-
202
- function handleExpandAll() {
203
- const {
204
- actions: {
205
- toggleExpandAll
206
- }
207
- } = instance.getInstance();
208
- const active = document.activeElement;
209
- toggleExpandAll().then(() => {
210
- const {
211
- records
212
- } = instance.getInstance();
213
- const itemToFocus = records.find( // eslint-disable-next-line eqeqeq
214
- record => record.id == active.dataset.id);
215
-
216
- if (itemToFocus) {
217
- // eslint-disable-next-line no-unused-expressions
218
- // eslint-disable-next-line mdx/no-unused-expressions
219
- findItemOnDocument(itemToFocus.id) ? findItemOnDocument(itemToFocus.id).focus() : findItemOnDocument(records[0].id).focus();
220
- } else {
221
- getListFromDocument().scrollTo(0, 0);
222
- setTimeout(() => {
223
- findItemOnDocument(records[0].id).focus();
224
- }, 200);
225
- }
226
- });
227
- }
228
-
229
- return [{
230
- key: 'right',
231
- handler: handleExpand
232
- }, {
233
- key: 'shift+=',
234
- handler: handleExpand
235
- }, {
236
- key: '-',
237
- handler: handleCollapse
238
- }, {
239
- key: 'enter',
240
- handler: _ref4 => {
241
- let {
242
- index
243
- } = _ref4;
244
- const {
245
- records,
246
- actions: {
247
- select
248
- }
249
- } = instance.getInstance();
250
- const record = records[index];
251
- select(record);
252
- }
253
- }, {
254
- key: 'left',
255
- handler: handleCollapse
256
- }, {
257
- key: '/',
258
- handler: handleCollapse
259
- }, {
260
- key: 'shift+8',
261
- allowDocumentHandler: true,
262
- handler: handleExpandAll
263
- }];
264
- },
265
-
266
- itemRenderer
267
- });
268
-
269
- export { TreePluginList };
@@ -1 +0,0 @@
1
- export { TreePluginList } from './TreeDataPlugin.js';