@elliemae/ds-treeview 2.2.0-alpha.1 → 2.2.0-alpha.2

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 (177) hide show
  1. package/cjs/TreeView.js +49 -31
  2. package/cjs/TreeView.js.map +7 -0
  3. package/cjs/TreeViewContext.js +53 -35
  4. package/cjs/TreeViewContext.js.map +7 -0
  5. package/cjs/config/cssClassesConstants.js +41 -13
  6. package/cjs/config/cssClassesConstants.js.map +7 -0
  7. package/cjs/config/useTreeview.js +108 -80
  8. package/cjs/config/useTreeview.js.map +7 -0
  9. package/cjs/index.js +37 -27
  10. package/cjs/index.js.map +7 -0
  11. package/cjs/parts/CheckboxSelectable.js +70 -59
  12. package/cjs/parts/CheckboxSelectable.js.map +7 -0
  13. package/cjs/parts/ChildrenCountDisplayer.js +45 -28
  14. package/cjs/parts/ChildrenCountDisplayer.js.map +7 -0
  15. package/cjs/parts/ExpandCaret.js +85 -83
  16. package/cjs/parts/ExpandCaret.js.map +7 -0
  17. package/cjs/parts/Icon.js +46 -31
  18. package/cjs/parts/Icon.js.map +7 -0
  19. package/cjs/parts/NestingSpace.js +43 -35
  20. package/cjs/parts/NestingSpace.js.map +7 -0
  21. package/cjs/parts/RadioSelectable.js +52 -37
  22. package/cjs/parts/RadioSelectable.js.map +7 -0
  23. package/cjs/parts/TreeItem.js +128 -147
  24. package/cjs/parts/TreeItem.js.map +7 -0
  25. package/cjs/parts/TreeItemText.js +88 -95
  26. package/cjs/parts/TreeItemText.js.map +7 -0
  27. package/cjs/parts/TreeList.js +117 -130
  28. package/cjs/parts/TreeList.js.map +7 -0
  29. package/cjs/plugins/dnd/TreeDndPlugin.js +51 -36
  30. package/cjs/plugins/dnd/TreeDndPlugin.js.map +7 -0
  31. package/cjs/plugins/dnd/index.js +28 -10
  32. package/cjs/plugins/dnd/index.js.map +7 -0
  33. package/cjs/plugins/index.js +34 -22
  34. package/cjs/plugins/index.js.map +7 -0
  35. package/cjs/plugins/roving/TreeRovingPlugin.js +35 -7
  36. package/cjs/plugins/roving/TreeRovingPlugin.js.map +7 -0
  37. package/cjs/plugins/roving/index.js +28 -9
  38. package/cjs/plugins/roving/index.js.map +7 -0
  39. package/cjs/plugins/searchable/SearchableTreePlugin.js +35 -7
  40. package/cjs/plugins/searchable/SearchableTreePlugin.js.map +7 -0
  41. package/cjs/plugins/searchable/index.js +28 -9
  42. package/cjs/plugins/searchable/index.js.map +7 -0
  43. package/cjs/plugins/selectable/SelectablePluginTree.js +35 -7
  44. package/cjs/plugins/selectable/SelectablePluginTree.js.map +7 -0
  45. package/cjs/plugins/selectable/index.js +28 -9
  46. package/cjs/plugins/selectable/index.js.map +7 -0
  47. package/cjs/plugins/toolbar/TreeToolbarPlugin.js +35 -7
  48. package/cjs/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
  49. package/cjs/plugins/toolbar/index.js +28 -9
  50. package/cjs/plugins/toolbar/index.js.map +7 -0
  51. package/cjs/plugins/tree/TreeDataPlugin.js +35 -7
  52. package/cjs/plugins/tree/TreeDataPlugin.js.map +7 -0
  53. package/cjs/plugins/tree/index.js +28 -9
  54. package/cjs/plugins/tree/index.js.map +7 -0
  55. package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js +35 -7
  56. package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
  57. package/cjs/plugins/virtualization/index.js +28 -9
  58. package/cjs/plugins/virtualization/index.js.map +7 -0
  59. package/cjs/react-desc-prop-types.js +82 -53
  60. package/cjs/react-desc-prop-types.js.map +7 -0
  61. package/cjs/related-components/TreeViewSearchBar.js +42 -40
  62. package/cjs/related-components/TreeViewSearchBar.js.map +7 -0
  63. package/cjs/sharedTypes.js +27 -2
  64. package/cjs/sharedTypes.js.map +7 -0
  65. package/cjs/utils/array-helpers.js +35 -11
  66. package/cjs/utils/array-helpers.js.map +7 -0
  67. package/cjs/utils/dnd-helpers.js +90 -84
  68. package/cjs/utils/dnd-helpers.js.map +7 -0
  69. package/cjs/utils/group-expands-helpers.js +86 -59
  70. package/cjs/utils/group-expands-helpers.js.map +7 -0
  71. package/cjs/utils/keyboard-helpers.js +84 -88
  72. package/cjs/utils/keyboard-helpers.js.map +7 -0
  73. package/cjs/utils/object-helpers.js +43 -36
  74. package/cjs/utils/object-helpers.js.map +7 -0
  75. package/cjs/utils/refs-helpers.js +43 -22
  76. package/cjs/utils/refs-helpers.js.map +7 -0
  77. package/cjs/utils/selectable-helper.js +61 -53
  78. package/cjs/utils/selectable-helper.js.map +7 -0
  79. package/cjs/utils/string-helpers.js +35 -7
  80. package/cjs/utils/string-helpers.js.map +7 -0
  81. package/cjs/utils/tree-helpers.js +105 -135
  82. package/cjs/utils/tree-helpers.js.map +7 -0
  83. package/cjs/utils/useDnDHelpers.js +97 -118
  84. package/cjs/utils/useDnDHelpers.js.map +7 -0
  85. package/cjs/utils/useInstanceRefActions.js +54 -43
  86. package/cjs/utils/useInstanceRefActions.js.map +7 -0
  87. package/cjs/utils/useTree.js +76 -78
  88. package/cjs/utils/useTree.js.map +7 -0
  89. package/esm/TreeView.js +18 -20
  90. package/esm/TreeView.js.map +7 -0
  91. package/esm/TreeViewContext.js +24 -29
  92. package/esm/TreeViewContext.js.map +7 -0
  93. package/esm/config/cssClassesConstants.js +12 -6
  94. package/esm/config/cssClassesConstants.js.map +7 -0
  95. package/esm/config/useTreeview.js +61 -54
  96. package/esm/config/useTreeview.js.map +7 -0
  97. package/esm/index.js +8 -9
  98. package/esm/index.js.map +7 -0
  99. package/esm/parts/CheckboxSelectable.js +36 -46
  100. package/esm/parts/CheckboxSelectable.js.map +7 -0
  101. package/esm/parts/ChildrenCountDisplayer.js +16 -20
  102. package/esm/parts/ChildrenCountDisplayer.js.map +7 -0
  103. package/esm/parts/ExpandCaret.js +54 -72
  104. package/esm/parts/ExpandCaret.js.map +7 -0
  105. package/esm/parts/Icon.js +16 -22
  106. package/esm/parts/Icon.js.map +7 -0
  107. package/esm/parts/NestingSpace.js +14 -27
  108. package/esm/parts/NestingSpace.js.map +7 -0
  109. package/esm/parts/RadioSelectable.js +20 -28
  110. package/esm/parts/RadioSelectable.js.map +7 -0
  111. package/esm/parts/TreeItem.js +91 -127
  112. package/esm/parts/TreeItem.js.map +7 -0
  113. package/esm/parts/TreeItemText.js +58 -85
  114. package/esm/parts/TreeItemText.js.map +7 -0
  115. package/esm/parts/TreeList.js +88 -117
  116. package/esm/parts/TreeList.js.map +7 -0
  117. package/esm/plugins/dnd/TreeDndPlugin.js +21 -26
  118. package/esm/plugins/dnd/TreeDndPlugin.js.map +7 -0
  119. package/esm/plugins/dnd/index.js +3 -1
  120. package/esm/plugins/dnd/index.js.map +7 -0
  121. package/esm/plugins/index.js +9 -7
  122. package/esm/plugins/index.js.map +7 -0
  123. package/esm/plugins/roving/TreeRovingPlugin.js +6 -3
  124. package/esm/plugins/roving/TreeRovingPlugin.js.map +7 -0
  125. package/esm/plugins/roving/index.js +3 -1
  126. package/esm/plugins/roving/index.js.map +7 -0
  127. package/esm/plugins/searchable/SearchableTreePlugin.js +6 -3
  128. package/esm/plugins/searchable/SearchableTreePlugin.js.map +7 -0
  129. package/esm/plugins/searchable/index.js +3 -1
  130. package/esm/plugins/searchable/index.js.map +7 -0
  131. package/esm/plugins/selectable/SelectablePluginTree.js +6 -3
  132. package/esm/plugins/selectable/SelectablePluginTree.js.map +7 -0
  133. package/esm/plugins/selectable/index.js +3 -1
  134. package/esm/plugins/selectable/index.js.map +7 -0
  135. package/esm/plugins/toolbar/TreeToolbarPlugin.js +6 -3
  136. package/esm/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
  137. package/esm/plugins/toolbar/index.js +3 -1
  138. package/esm/plugins/toolbar/index.js.map +7 -0
  139. package/esm/plugins/tree/TreeDataPlugin.js +6 -3
  140. package/esm/plugins/tree/TreeDataPlugin.js.map +7 -0
  141. package/esm/plugins/tree/index.js +3 -1
  142. package/esm/plugins/tree/index.js.map +7 -0
  143. package/esm/plugins/virtualization/TreeVirtualizationPlugin.js +6 -3
  144. package/esm/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
  145. package/esm/plugins/virtualization/index.js +3 -1
  146. package/esm/plugins/virtualization/index.js.map +7 -0
  147. package/esm/react-desc-prop-types.js +47 -43
  148. package/esm/react-desc-prop-types.js.map +7 -0
  149. package/esm/related-components/TreeViewSearchBar.js +13 -32
  150. package/esm/related-components/TreeViewSearchBar.js.map +7 -0
  151. package/esm/sharedTypes.js +2 -1
  152. package/esm/sharedTypes.js.map +7 -0
  153. package/esm/utils/array-helpers.js +6 -6
  154. package/esm/utils/array-helpers.js.map +7 -0
  155. package/esm/utils/dnd-helpers.js +58 -73
  156. package/esm/utils/dnd-helpers.js.map +7 -0
  157. package/esm/utils/group-expands-helpers.js +56 -46
  158. package/esm/utils/group-expands-helpers.js.map +7 -0
  159. package/esm/utils/keyboard-helpers.js +45 -72
  160. package/esm/utils/keyboard-helpers.js.map +7 -0
  161. package/esm/utils/object-helpers.js +14 -31
  162. package/esm/utils/object-helpers.js.map +7 -0
  163. package/esm/utils/refs-helpers.js +15 -19
  164. package/esm/utils/refs-helpers.js.map +7 -0
  165. package/esm/utils/selectable-helper.js +32 -43
  166. package/esm/utils/selectable-helper.js.map +7 -0
  167. package/esm/utils/string-helpers.js +6 -3
  168. package/esm/utils/string-helpers.js.map +7 -0
  169. package/esm/utils/tree-helpers.js +74 -119
  170. package/esm/utils/tree-helpers.js.map +7 -0
  171. package/esm/utils/useDnDHelpers.js +60 -106
  172. package/esm/utils/useDnDHelpers.js.map +7 -0
  173. package/esm/utils/useInstanceRefActions.js +21 -35
  174. package/esm/utils/useInstanceRefActions.js.map +7 -0
  175. package/esm/utils/useTree.js +35 -57
  176. package/esm/utils/useTree.js.map +7 -0
  177. package/package.json +10 -10
@@ -1,97 +1,95 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- require('core-js/modules/web.dom-collections.iterator.js');
7
- require('core-js/modules/esnext.async-iterator.filter.js');
8
- require('core-js/modules/esnext.iterator.constructor.js');
9
- require('core-js/modules/esnext.iterator.filter.js');
10
- require('core-js/modules/esnext.async-iterator.for-each.js');
11
- require('core-js/modules/esnext.iterator.for-each.js');
12
- var React = require('react');
13
- var TreeModel = require('tree-model');
14
- var lodash = require('lodash');
15
- var treeHelpers = require('./tree-helpers.js');
16
- var groupExpandsHelpers = require('./group-expands-helpers.js');
17
-
18
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
-
20
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
21
- var TreeModel__default = /*#__PURE__*/_interopDefaultLegacy(TreeModel);
22
-
23
- 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; }
24
-
25
- 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__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var useTree_exports = {};
29
+ __export(useTree_exports, {
30
+ useTree: () => useTree
31
+ });
32
+ var React = __toESM(require("react"));
33
+ var import_react = __toESM(require("react"));
34
+ var import_tree_model = __toESM(require("tree-model"));
35
+ var import_lodash = __toESM(require("lodash"));
36
+ var import_tree_helpers = __toESM(require("./tree-helpers"));
37
+ var import_group_expands_helpers = __toESM(require("./group-expands-helpers"));
26
38
  const useTree = (data, props, states) => {
27
- const {
28
- setExpandedGroups
29
- } = states;
30
- const unfrozenData = React.useMemo(() => lodash.cloneDeep(data), [data]); // convert data into a TreeModel with extra isExpanded prop
31
- // root element type is an exception, children model is based on what the dev passed on
32
- // since root is an excepcion we must typecast
33
-
34
- const tree = React.useMemo(() => new TreeModel__default["default"](), []);
35
- const [treeData, setTreeData] = React.useState({
36
- id: '__ds_tree_root',
37
- name: '__root',
39
+ const { setExpandedGroups } = states;
40
+ const unfrozenData = (0, import_react.useMemo)(() => (0, import_lodash.cloneDeep)(data), [data]);
41
+ const tree = (0, import_react.useMemo)(() => new import_tree_model.default(), []);
42
+ const [treeData, setTreeData] = (0, import_react.useState)({
43
+ id: "__ds_tree_root",
44
+ name: "__root",
38
45
  isExpanded: true,
39
46
  children: unfrozenData
40
47
  });
41
- React.useEffect(() => {
48
+ (0, import_react.useEffect)(() => {
42
49
  setTreeData({
43
- id: '__ds_tree_root',
44
- name: '__root',
50
+ id: "__ds_tree_root",
51
+ name: "__root",
45
52
  isExpanded: true,
46
53
  children: unfrozenData
47
54
  });
48
- }, [unfrozenData]); // expose a way to rerender the tree
49
- // used for expand functionality
50
-
51
- const [rerenderItems, setRerenderItems] = React.useState({});
52
- const triggerTreeRerender = React.useCallback(() => {
55
+ }, [unfrozenData]);
56
+ const [rerenderItems, setRerenderItems] = (0, import_react.useState)({});
57
+ const triggerTreeRerender = (0, import_react.useCallback)(() => {
53
58
  setRerenderItems({});
54
- }, []); // when re-rendering we re-parse the list
55
-
56
- const [treeRoot, setTreeRoot] = React.useState(tree.parse(treeData));
57
- React.useEffect(() => {
59
+ }, []);
60
+ const [treeRoot, setTreeRoot] = (0, import_react.useState)(tree.parse(treeData));
61
+ (0, import_react.useEffect)(() => {
58
62
  setTreeRoot(tree.parse(treeData));
59
63
  }, [treeData, rerenderItems, tree]);
60
- const [visibleItems, setVisibleItems] = React.useState([]);
61
- const {
62
- searchQuery,
63
- highlightOnlyQuery,
64
- onVisibleItemsChange,
65
- selection,
66
- expanded,
67
- onExpandChange
68
- } = props;
69
- const updateUserExpandedState = React.useCallback(() => {
70
- groupExpandsHelpers.updateExpandedState(treeRoot, onExpandChange);
71
- }, [treeRoot, onExpandChange]); // we add missing properties to the received Items
72
- // not the best of the patterns, but it works
73
- // this is where we convert "SimpleItems" to "Items"
74
- // this was done to avoid breaking changes back in v1
75
-
76
- React.useEffect(() => {
64
+ const [visibleItems, setVisibleItems] = (0, import_react.useState)([]);
65
+ const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;
66
+ const updateUserExpandedState = (0, import_react.useCallback)(() => {
67
+ (0, import_group_expands_helpers.updateExpandedState)(treeRoot, onExpandChange);
68
+ }, [treeRoot, onExpandChange]);
69
+ (0, import_react.useEffect)(() => {
77
70
  const parsedVisibleItems = [];
78
71
  const newExpandedHashMap = {};
79
- treeRoot.walk(node => {
80
- const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
81
-
82
- treeHelpers.enrichNodeModelInPlace(node, searchQuery, selection, expanded);
83
- if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
72
+ treeRoot.walk((node) => {
73
+ const shouldContinueWalking = true;
74
+ (0, import_tree_helpers.enrichNodeModelInPlace)(node, searchQuery, selection, expanded);
75
+ if (node.model.id && node.model.isGroup && node.model.isExpanded)
76
+ newExpandedHashMap[node.model.id] = true;
84
77
  return shouldContinueWalking;
85
78
  });
86
- treeHelpers.walkVisibles(treeRoot, node => {
87
- parsedVisibleItems.push(_objectSpread(_objectSpread({}, node.model), {}, {
88
- node
89
- }));
79
+ (0, import_tree_helpers.walkVisibles)(treeRoot, (node) => {
80
+ parsedVisibleItems.push({ ...node.model, node });
90
81
  }, true, highlightOnlyQuery);
91
82
  setVisibleItems(parsedVisibleItems);
92
83
  onVisibleItemsChange(parsedVisibleItems);
93
- setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
94
- }, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
84
+ setExpandedGroups(newExpandedHashMap);
85
+ }, [
86
+ treeRoot,
87
+ rerenderItems,
88
+ searchQuery,
89
+ highlightOnlyQuery,
90
+ selection,
91
+ expanded,
92
+ setExpandedGroups
95
93
  ]);
96
94
  return {
97
95
  visibleItems,
@@ -102,5 +100,5 @@ const useTree = (data, props, states) => {
102
100
  updateUserExpandedState
103
101
  };
104
102
  };
105
-
106
- exports.useTree = useTree;
103
+ module.exports = __toCommonJS(useTree_exports);
104
+ //# sourceMappingURL=useTree.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/utils/useTree.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import { useState, useCallback, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\n\nimport { walkVisibles, enrichNodeModelInPlace } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { updateExpandedState } from './group-expands-helpers';\n\nexport const useTree = (\n data: DSTreeviewT.SimpleItem[],\n props: DSTreeviewT.Props,\n states: {\n setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n },\n) => {\n const { setExpandedGroups } = states;\n const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n // convert data into a TreeModel with extra isExpanded prop\n // root element type is an exception, children model is based on what the dev passed on\n // since root is an excepcion we must typecast\n const tree = useMemo(() => new TreeModel(), []);\n const [treeData, setTreeData] = useState({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n\n useEffect(() => {\n setTreeData({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n }, [unfrozenData]);\n\n // expose a way to rerender the tree\n // used for expand functionality\n const [rerenderItems, setRerenderItems] = useState({});\n const triggerTreeRerender = useCallback(() => {\n setRerenderItems({});\n }, []);\n\n // when re-rendering we re-parse the list\n const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));\n useEffect(() => {\n setTreeRoot(tree.parse(treeData));\n }, [treeData, rerenderItems, tree]);\n\n const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n const updateUserExpandedState = useCallback(() => {\n updateExpandedState(treeRoot, onExpandChange);\n }, [treeRoot, onExpandChange]);\n // we add missing properties to the received Items\n // not the best of the patterns, but it works\n // this is where we convert \"SimpleItems\" to \"Items\"\n // this was done to avoid breaking changes back in v1\n useEffect(() => {\n const parsedVisibleItems: DSTreeviewT.Item[] = [];\n const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n treeRoot.walk((node) => {\n const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n return shouldContinueWalking;\n });\n\n walkVisibles(\n treeRoot,\n (node) => {\n parsedVisibleItems.push({ ...node.model, node });\n },\n true,\n highlightOnlyQuery,\n );\n setVisibleItems(parsedVisibleItems);\n onVisibleItemsChange(parsedVisibleItems);\n\n setExpandedGroups(newExpandedHashMap);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n treeRoot,\n rerenderItems,\n searchQuery,\n highlightOnlyQuery,\n selection,\n expanded,\n setExpandedGroups,\n // onVisibleItemsChange // evaluate potential performance hit?\n ]);\n\n return {\n visibleItems,\n tree,\n treeRoot,\n rerenderItems,\n triggerTreeRerender,\n updateUserExpandedState,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0D;AAC1D,wBAAsB;AACtB,oBAA0B;AAE1B,0BAAqD;AAGrD,mCAAoC;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,sBAAsB;AAC9B,QAAM,eAAe,0BAAQ,MAAM,6BAAU,OAAO,CAAC;AAKrD,QAAM,OAAO,0BAAQ,MAAM,IAAI,6BAAa;AAC5C,QAAM,CAAC,UAAU,eAAe,2BAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA;AAGZ,8BAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA;AAAA,KAEX,CAAC;AAIJ,QAAM,CAAC,eAAe,oBAAoB,2BAAS;AACnD,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,qBAAiB;AAAA,KAChB;AAGH,QAAM,CAAC,UAAU,eAAe,2BAAS,KAAK,MAAM;AACpD,8BAAU,MAAM;AACd,gBAAY,KAAK,MAAM;AAAA,KACtB,CAAC,UAAU,eAAe;AAE7B,QAAM,CAAC,cAAc,mBAAmB,2BAA6B;AAErE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,mBAAmB;AAEvG,QAAM,0BAA0B,8BAAY,MAAM;AAChD,0DAAoB,UAAU;AAAA,KAC7B,CAAC,UAAU;AAKd,8BAAU,MAAM;AACd,UAAM,qBAAyC;AAC/C,UAAM,qBAAgD;AACtD,aAAS,KAAK,CAAC,SAAS;AACtB,YAAM,wBAAwB;AAC9B,sDAAuB,MAAM,aAAa,WAAW;AACrD,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,MAAM;AACtG,aAAO;AAAA;AAGT,0CACE,UACA,CAAC,SAAS;AACR,yBAAmB,KAAK,KAAK,KAAK,OAAO;AAAA,OAE3C,MACA;AAEF,oBAAgB;AAChB,yBAAqB;AAErB,sBAAkB;AAAA,KAEjB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
6
+ "names": []
7
+ }
package/esm/TreeView.js CHANGED
@@ -1,25 +1,23 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { describe } from 'react-desc';
4
- import { TreeViewPropTypes } from './react-desc-prop-types.js';
5
- import TreeViewContext from './TreeViewContext.js';
6
- import { TreeDndPlugin, TreeDnD } from './plugins/dnd/TreeDndPlugin.js';
7
- import { useTreeview } from './config/useTreeview.js';
8
- import { TreeList } from './parts/TreeList.js';
9
-
10
- var _TreeDnD, _TreeList;
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import { describe } from "react-desc";
4
+ import { TreeViewPropTypes } from "./react-desc-prop-types";
5
+ import TreeViewContext from "./TreeViewContext";
6
+ import { TreeDnD, TreeDndPlugin } from "./plugins/dnd";
7
+ import { useTreeview } from "./config/useTreeview";
8
+ import { TreeList } from "./parts/TreeList";
11
9
  function TreeView(props) {
12
- const {
13
- plugins
14
- } = props;
15
- const {
16
- ctx
17
- } = useTreeview(props);
18
- return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
10
+ const { plugins } = props;
11
+ const { ctx } = useTreeview(props);
12
+ return /* @__PURE__ */ React2.createElement(TreeViewContext.Provider, {
19
13
  value: ctx
20
- }, void 0, plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin) ? _TreeDnD || (_TreeDnD = /*#__PURE__*/_jsx(TreeDnD, {})) : _TreeList || (_TreeList = /*#__PURE__*/_jsx(TreeList, {})));
14
+ }, plugins?.includes(TreeDndPlugin) ? /* @__PURE__ */ React2.createElement(TreeDnD, null) : /* @__PURE__ */ React2.createElement(TreeList, null));
21
15
  }
16
+ TreeView.propTypes = TreeViewPropTypes;
22
17
  const TreeViewWithSchema = describe(TreeView);
23
18
  TreeViewWithSchema.propTypes = TreeViewPropTypes;
24
-
25
- export { TreeView, TreeViewWithSchema };
19
+ export {
20
+ TreeView,
21
+ TreeViewWithSchema
22
+ };
23
+ //# sourceMappingURL=TreeView.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeView.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { WeakValidationMap } from 'react';\n\nimport { describe } from 'react-desc';\nimport { TreeViewPropTypes } from './react-desc-prop-types';\nimport TreeViewContext from './TreeViewContext';\nimport { TreeDnD, TreeDndPlugin } from './plugins/dnd';\nimport { useTreeview } from './config/useTreeview';\nimport { TreeList } from './parts/TreeList';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nexport function TreeView(props: DSTreeviewT.Props) {\n const { plugins } = props;\n\n const { ctx } = useTreeview(props);\n\n return (\n <TreeViewContext.Provider value={ctx}>\n {plugins?.includes(TreeDndPlugin) ? <TreeDnD /> : <TreeList />}\n </TreeViewContext.Provider>\n );\n}\n\nTreeView.propTypes = TreeViewPropTypes as WeakValidationMap<unknown>;\nconst TreeViewWithSchema = describe(TreeView);\nTreeViewWithSchema.propTypes = TreeViewPropTypes;\n\nexport { TreeViewWithSchema };\n"],
5
+ "mappings": "AAAA;ACEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,kBAAkB,OAA0B;AACjD,QAAM,EAAE,YAAY;AAEpB,QAAM,EAAE,QAAQ,YAAY;AAE5B,SACE,qCAAC,gBAAgB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAC9B,SAAS,SAAS,iBAAiB,qCAAC,SAAD,QAAc,qCAAC,UAAD;AAAA;AAKxD,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;",
6
+ "names": []
7
+ }
@@ -1,14 +1,11 @@
1
- import { createRef, createContext } from 'react';
2
-
3
- /* eslint-disable no-unused-vars */
4
-
5
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
6
- function noop() {}
7
-
1
+ import * as React from "react";
2
+ import { createContext, createRef } from "react";
3
+ function noop(..._args) {
4
+ }
8
5
  const defaultProps = {
9
6
  plugins: [],
10
7
  selection: {},
11
- instanceRef: /*#__PURE__*/createRef(),
8
+ instanceRef: createRef(),
12
9
  isItemDisabled: () => false,
13
10
  disableIcons: false,
14
11
  fluid: false,
@@ -26,20 +23,15 @@ const defaultProps = {
26
23
  onSelectionChange: noop,
27
24
  onExpandChange: noop,
28
25
  onInstanceRefInitialized: noop,
29
- rowSize: 'normal',
30
- labelOverflow: 'wrap',
31
- noItemsPlaceholder: 'No items found',
32
- nameKey: 'name',
33
- width: '100%',
34
- height: '100%',
26
+ rowSize: "normal",
27
+ labelOverflow: "wrap",
28
+ noItemsPlaceholder: "No items found",
29
+ nameKey: "name",
30
+ width: "100%",
31
+ height: "100%",
35
32
  groupIcon: null,
36
33
  itemIcon: null,
37
- searchQuery: '' // workaround on the typings over the fact that
38
- // when we instantiate the context we can't have all the props
39
- // we only have a part of them but the final typings will include missing props
40
- // this is safe to do because
41
- // we will "mergeWithDefaults" + "validatePropTypes" when we do instantiate the context
42
-
34
+ searchQuery: ""
43
35
  };
44
36
  const defaultRelativeMouseCoord = {
45
37
  isBefore: false,
@@ -60,22 +52,22 @@ const defaultContext = {
60
52
  relativeMouseCord: defaultRelativeMouseCoord,
61
53
  setRelativeMouseCord: noop,
62
54
  triggerTreeRerender: noop,
63
- tree: undefined,
64
- treeRoot: undefined,
55
+ tree: void 0,
56
+ treeRoot: void 0,
65
57
  virtualListHelpers: {
66
58
  virtualItems: [],
67
59
  totalSize: 0,
68
60
  scrollToOffset: noop,
69
61
  scrollToIndex: noop
70
62
  },
71
- virtualListRef: undefined,
63
+ virtualListRef: void 0,
72
64
  isDragging: false,
73
65
  setIsDragging: noop,
74
66
  isKeyboardDragging: false,
75
67
  setIsKeyboardDragging: noop,
76
68
  draggedItem: null,
77
69
  setDraggedItem: noop,
78
- uniqueTreeViewUUID: '',
70
+ uniqueTreeViewUUID: "",
79
71
  selectedItem: null,
80
72
  setSelectedItem: noop,
81
73
  focusedItem: null,
@@ -91,8 +83,11 @@ const defaultContext = {
91
83
  handleExpandGroup: noop,
92
84
  updateUserExpandedState: noop
93
85
  };
94
- /** Context for cross component communication */
95
-
96
- const TreeViewContext = /*#__PURE__*/createContext(defaultContext);
97
-
98
- export { TreeViewContext as default, defaultProps, defaultRelativeMouseCoord };
86
+ const TreeViewContext = createContext(defaultContext);
87
+ var TreeViewContext_default = TreeViewContext;
88
+ export {
89
+ TreeViewContext_default as default,
90
+ defaultProps,
91
+ defaultRelativeMouseCoord
92
+ };
93
+ //# sourceMappingURL=TreeViewContext.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeViewContext.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n plugins: [],\n selection: {},\n instanceRef: createRef(),\n isItemDisabled: () => false,\n disableIcons: false,\n fluid: false,\n isMultiSelect: false,\n isSingleSelect: false,\n restrictDragAndDrop: false,\n showChildrenAmount: false,\n sortable: false,\n isLoading: false,\n highlightOnlyQuery: false,\n onItemClick: noop,\n onItemFocus: noop,\n onVisibleItemsChange: noop,\n onOrderChange: noop,\n onSelectionChange: noop,\n onExpandChange: noop,\n onInstanceRefInitialized: noop,\n rowSize: 'normal',\n labelOverflow: 'wrap',\n noItemsPlaceholder: 'No items found',\n nameKey: 'name',\n width: '100%',\n height: '100%',\n groupIcon: null,\n itemIcon: null,\n searchQuery: '',\n // workaround on the typings over the fact that\n // when we instantiate the context we can't have all the props\n // we only have a part of them but the final typings will include missing props\n // this is safe to do because\n // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n isBefore: false,\n isAfter: false,\n isValid: true,\n item: null,\n x: null,\n y: null,\n relativeElementDOMRect: null,\n relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n props: defaultProps,\n visibleItems: [],\n withRadioChecks: false,\n withCheckboxChecks: false,\n withDragAndDrop: false,\n relativeMouseCord: defaultRelativeMouseCoord,\n setRelativeMouseCord: noop,\n triggerTreeRerender: noop,\n tree: undefined,\n treeRoot: undefined,\n virtualListHelpers: {\n virtualItems: [],\n totalSize: 0,\n scrollToOffset: noop,\n scrollToIndex: noop,\n },\n virtualListRef: undefined,\n isDragging: false,\n setIsDragging: noop,\n isKeyboardDragging: false,\n setIsKeyboardDragging: noop,\n draggedItem: null,\n setDraggedItem: noop,\n uniqueTreeViewUUID: '',\n selectedItem: null,\n setSelectedItem: noop,\n focusedItem: null,\n setFocusedItem: noop,\n selectedCheckboxes: {},\n setSelectedCheckboxes: noop,\n expandedGroups: {},\n setExpandedGroups: noop,\n latestToggledItem: null,\n setLatestToggledItem: noop,\n hoverItem: null,\n setHoverItem: noop,\n handleExpandGroup: noop,\n updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n"],
5
+ "mappings": "AAAA;ACCA;AAKA,iBAAsC,OAAgB;AAAA;AAE/C,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAAA;AAQR,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AAAA;AAGxB,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA;AAAA,EAEjB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAAA;AAI3B,MAAM,kBAAkB,cAAc;AAEtC,IAAO,0BAAQ;",
6
+ "names": []
7
+ }
@@ -1,6 +1,12 @@
1
- const DSTreeViewPrefix = 'em-ds';
2
- const treeItemBlockName = 'tree-item';
3
- const treeListBlockName = 'tree-list';
4
- const treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
5
-
6
- export { DSTreeViewPrefix, treeItemBlockName, treeListBlockName, treeListNoItemsBn };
1
+ import * as React from "react";
2
+ const DSTreeViewPrefix = "em-ds";
3
+ const treeItemBlockName = "tree-item";
4
+ const treeListBlockName = "tree-list";
5
+ const treeListNoItemsBn = `${treeListBlockName}-no-items`;
6
+ export {
7
+ DSTreeViewPrefix,
8
+ treeItemBlockName,
9
+ treeListBlockName,
10
+ treeListNoItemsBn
11
+ };
12
+ //# sourceMappingURL=cssClassesConstants.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/cssClassesConstants.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSTreeViewPrefix = 'em-ds';\nexport const treeItemBlockName = 'tree-item';\nexport const treeListBlockName = 'tree-list';\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\n"],
5
+ "mappings": "AAAA;ACAO,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB,GAAG;",
6
+ "names": []
7
+ }
@@ -1,34 +1,28 @@
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 { useRef, useState, useCallback, useMemo, useEffect } from 'react';
9
- import { useVirtual } from 'react-virtual';
10
- import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
11
- import { v4 } from 'uuid';
12
- import { TreeViewPropTypes } from '../react-desc-prop-types.js';
13
- import { defaultProps, defaultRelativeMouseCoord } from '../TreeViewContext.js';
14
- import { TreeDndPlugin } from '../plugins/dnd/TreeDndPlugin.js';
15
- import { useTree } from '../utils/useTree.js';
16
- import { toggleItemExpand, useNotifyExpandedChange } from '../utils/group-expands-helpers.js';
17
- import { useInstanceRefActions } from '../utils/useInstanceRefActions.js';
18
- import { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers.js';
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
- const useTreeview = props => {
1
+ import * as React from "react";
2
+ import { useState, useRef, useEffect, useMemo, useCallback } from "react";
3
+ import { useVirtual } from "react-virtual";
4
+ import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
5
+ import { v4 as uuidv4 } from "uuid";
6
+ import { TreeViewPropTypes } from "../react-desc-prop-types";
7
+ import { defaultRelativeMouseCoord, defaultProps } from "../TreeViewContext";
8
+ import { TreeDndPlugin } from "../plugins/dnd";
9
+ import { useTree } from "../utils/useTree";
10
+ import { useNotifyExpandedChange, toggleItemExpand } from "../utils/group-expands-helpers";
11
+ import { useInstanceRefActions } from "../utils/useInstanceRefActions";
12
+ import { useGlobalToggleAllExpandShortcut } from "../utils/keyboard-helpers";
13
+ const useTreeview = (props) => {
24
14
  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
25
15
  useValidateTypescriptPropTypes(propsWithDefault, TreeViewPropTypes);
26
16
  const defaultActions = {
27
17
  actions: {
28
- toggleExpandAll: () => {},
29
- scrollTo: () => {},
30
- setSelectedItemByVirtualIndex: () => {},
31
- setFocusedItemByVirtualIndex: () => {}
18
+ toggleExpandAll: () => {
19
+ },
20
+ scrollTo: () => {
21
+ },
22
+ setSelectedItemByVirtualIndex: () => {
23
+ },
24
+ setFocusedItemByVirtualIndex: () => {
25
+ }
32
26
  }
33
27
  };
34
28
  const treeRef = useRef(defaultActions);
@@ -45,32 +39,26 @@ const useTreeview = props => {
45
39
  const [isDragging, setIsDragging] = useState(false);
46
40
  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
47
41
  const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
48
- const [uniqueTreeViewUUID] = useState(v4());
42
+ const [uniqueTreeViewUUID] = useState(uuidv4());
49
43
  const [draggedItem, setDraggedItem] = useState(null);
50
44
  const [hoverItem, setHoverItem] = useState(null);
51
45
  const [latestToggledItem, setLatestToggledItem] = useState(null);
52
46
  const [selectedItem, setSelectedItem] = useState(null);
53
47
  const [focusedItem, setFocusedItem] = useState(null);
54
- const [selectedCheckboxes, setSelectedCheckboxes] = useState(_objectSpread({}, selection));
48
+ const [selectedCheckboxes, setSelectedCheckboxes] = useState({
49
+ ...selection
50
+ });
55
51
  const [expandedGroups, setExpandedGroups] = useState({});
56
- const {
57
- visibleItems,
58
- tree,
59
- treeRoot,
60
- triggerTreeRerender,
61
- updateUserExpandedState
62
- } = useTree(data, propsWithDefault, {
52
+ const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(data, propsWithDefault, {
63
53
  setExpandedGroups
64
54
  });
65
- const virtualListRef = useRef(); // estimateSize should not be really required given what was stated on
66
- // https://github.com/tannerlinsley/react-virtual/issues/23
67
-
55
+ const virtualListRef = useRef();
68
56
  const virtualListHelpers = useVirtual({
69
57
  size: visibleItems.length,
70
58
  parentRef: virtualListRef,
71
59
  overscan: 15
72
60
  });
73
- const withDragAndDrop = !!(plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin) && onOrderChange);
61
+ const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);
74
62
  const withRadioChecks = isSingleSelect && !isMultiSelect;
75
63
  const withCheckboxChecks = !isSingleSelect && isMultiSelect;
76
64
  const handleExpandGroup = useCallback(toggleItemExpand, []);
@@ -108,22 +96,41 @@ const useTreeview = props => {
108
96
  setHoverItem,
109
97
  handleExpandGroup,
110
98
  updateUserExpandedState
111
- }), [draggedItem, expandedGroups, focusedItem, handleExpandGroup, hoverItem, isDragging, isKeyboardDragging, latestToggledItem, propsWithDefault, relativeMouseCord, selectedCheckboxes, selectedItem, tree, treeRoot, triggerTreeRerender, uniqueTreeViewUUID, virtualListHelpers, visibleItems, withCheckboxChecks, withDragAndDrop, withRadioChecks, updateUserExpandedState]); // this hooks can't use the context because the context provider doesn't wrap this
112
- // as such we manually pass the second parameter as fit
113
-
114
- if (instanceRef) instanceRef.current = treeRef.current;
99
+ }), [
100
+ draggedItem,
101
+ expandedGroups,
102
+ focusedItem,
103
+ handleExpandGroup,
104
+ hoverItem,
105
+ isDragging,
106
+ isKeyboardDragging,
107
+ latestToggledItem,
108
+ propsWithDefault,
109
+ relativeMouseCord,
110
+ selectedCheckboxes,
111
+ selectedItem,
112
+ tree,
113
+ treeRoot,
114
+ triggerTreeRerender,
115
+ uniqueTreeViewUUID,
116
+ virtualListHelpers,
117
+ visibleItems,
118
+ withCheckboxChecks,
119
+ withDragAndDrop,
120
+ withRadioChecks,
121
+ updateUserExpandedState
122
+ ]);
123
+ if (instanceRef)
124
+ instanceRef.current = treeRef.current;
115
125
  useInstanceRefActions(treeRef.current, ctx);
116
126
  useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
117
- useNotifyExpandedChange(propsWithDefault, ctx); // this is an horrible hack.
118
- // this is required because there is no "on rendered" react-way to check if every children has finished rendering
119
- // this should be working for now, in the future we may want to review this for a better solution
120
-
127
+ useNotifyExpandedChange(propsWithDefault, ctx);
121
128
  useEffect(() => {
122
- setTimeout(() => onInstanceRefInitialized(treeRef), 100); // eslint-disable-next-line react-hooks/exhaustive-deps
129
+ setTimeout(() => onInstanceRefInitialized(treeRef), 100);
123
130
  }, []);
124
- return useMemo(() => ({
125
- ctx
126
- }), [ctx]);
131
+ return useMemo(() => ({ ctx }), [ctx]);
132
+ };
133
+ export {
134
+ useTreeview
127
135
  };
128
-
129
- export { useTreeview };
136
+ //# sourceMappingURL=useTreeview.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTreeview.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TreeViewPropTypes } from '../react-desc-prop-types';\nimport { defaultRelativeMouseCoord, defaultProps } from '../TreeViewContext';\nimport { TreeDndPlugin } from '../plugins/dnd';\nimport { useTree } from '../utils/useTree';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ntype UseTreeviewT = (props: DSTreeviewT.Props) => { ctx: DSTreeviewInternalsT.CTX };\n\nexport const useTreeview: UseTreeviewT = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSTreeviewT.Props>(props, defaultProps);\n useValidateTypescriptPropTypes<DSTreeviewT.Props>(propsWithDefault, TreeViewPropTypes);\n const defaultActions = {\n actions: {\n toggleExpandAll: () => {},\n scrollTo: () => {},\n setSelectedItemByVirtualIndex: () => {},\n setFocusedItemByVirtualIndex: () => {},\n },\n } as unknown as DSTreeviewT.InstanceRef;\n const treeRef = useRef(defaultActions);\n const {\n data,\n plugins,\n onOrderChange,\n isMultiSelect,\n isSingleSelect,\n instanceRef,\n selection,\n onInstanceRefInitialized,\n } = propsWithDefault;\n const [isDragging, setIsDragging] = useState(false);\n const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);\n const [relativeMouseCord, setRelativeMouseCord] =\n useState<DSTreeviewInternalsT.MouseCoord>(defaultRelativeMouseCoord);\n const [uniqueTreeViewUUID] = useState(uuidv4());\n const [draggedItem, setDraggedItem] = useState<DSTreeviewT.Item | null>(null);\n const [hoverItem, setHoverItem] = useState<DSTreeviewT.Item | null>(null);\n const [latestToggledItem, setLatestToggledItem] = useState<DSTreeviewT.Item | null>(null);\n const [selectedItem, setSelectedItem] = useState<DSTreeviewT.Item | null>(null);\n const [focusedItem, setFocusedItem] = useState<DSTreeviewT.Item | null>(null);\n const [selectedCheckboxes, setSelectedCheckboxes] = useState({\n ...selection,\n });\n const [expandedGroups, setExpandedGroups] = useState<DSTreeviewT.ExpandedItems>({});\n const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(\n data,\n propsWithDefault,\n {\n setExpandedGroups,\n },\n );\n\n const virtualListRef = useRef<HTMLUListElement>();\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n\n const virtualListHelpers = useVirtual({\n size: visibleItems.length,\n parentRef: virtualListRef,\n overscan: 15,\n });\n\n const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);\n const withRadioChecks = isSingleSelect && !isMultiSelect;\n const withCheckboxChecks = !isSingleSelect && isMultiSelect;\n\n const handleExpandGroup = useCallback(toggleItemExpand, []);\n\n const ctx: DSTreeviewInternalsT.CTX = useMemo(\n () => ({\n props: propsWithDefault,\n setRelativeMouseCord,\n relativeMouseCord,\n virtualListHelpers,\n virtualListRef,\n tree,\n treeRoot,\n visibleItems,\n triggerTreeRerender,\n isDragging,\n setIsDragging,\n isKeyboardDragging,\n setIsKeyboardDragging,\n draggedItem,\n setDraggedItem,\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n uniqueTreeViewUUID,\n selectedCheckboxes,\n setSelectedCheckboxes,\n selectedItem,\n setSelectedItem,\n expandedGroups,\n setExpandedGroups,\n latestToggledItem,\n setLatestToggledItem,\n focusedItem,\n setFocusedItem,\n hoverItem,\n setHoverItem,\n handleExpandGroup,\n updateUserExpandedState,\n }),\n [\n draggedItem,\n expandedGroups,\n focusedItem,\n handleExpandGroup,\n hoverItem,\n isDragging,\n isKeyboardDragging,\n latestToggledItem,\n propsWithDefault,\n relativeMouseCord,\n selectedCheckboxes,\n selectedItem,\n tree,\n treeRoot,\n triggerTreeRerender,\n uniqueTreeViewUUID,\n virtualListHelpers,\n visibleItems,\n withCheckboxChecks,\n withDragAndDrop,\n withRadioChecks,\n updateUserExpandedState,\n ],\n );\n // this hooks can't use the context because the context provider doesn't wrap this\n // as such we manually pass the second parameter as fit\n if (instanceRef) instanceRef.current = treeRef.current;\n useInstanceRefActions(treeRef.current, ctx);\n useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n useNotifyExpandedChange(propsWithDefault, ctx);\n\n // this is an horrible hack.\n // this is required because there is no \"on rendered\" react-way to check if every children has finished rendering\n // this should be working for now, in the future we may want to review this for a better solution\n useEffect(() => {\n setTimeout(() => onInstanceRefInitialized(treeRef), 100);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return useMemo(() => ({ ctx }), [ctx]);\n};\n"],
5
+ "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAMO,MAAM,cAA4B,CAAC,UAAU;AAClD,QAAM,mBAAmB,6BAAgD,OAAO;AAChF,iCAAkD,kBAAkB;AACpE,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,iBAAiB,MAAM;AAAA;AAAA,MACvB,UAAU,MAAM;AAAA;AAAA,MAChB,+BAA+B,MAAM;AAAA;AAAA,MACrC,8BAA8B,MAAM;AAAA;AAAA;AAAA;AAGxC,QAAM,UAAU,OAAO;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAC7D,QAAM,CAAC,mBAAmB,wBACxB,SAA0C;AAC5C,QAAM,CAAC,sBAAsB,SAAS;AACtC,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,WAAW,gBAAgB,SAAkC;AACpE,QAAM,CAAC,mBAAmB,wBAAwB,SAAkC;AACpF,QAAM,CAAC,cAAc,mBAAmB,SAAkC;AAC1E,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAAA,OACxD;AAAA;AAEL,QAAM,CAAC,gBAAgB,qBAAqB,SAAoC;AAChF,QAAM,EAAE,cAAc,MAAM,UAAU,qBAAqB,4BAA4B,QACrF,MACA,kBACA;AAAA,IACE;AAAA;AAIJ,QAAM,iBAAiB;AAIvB,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM,aAAa;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA;AAGZ,QAAM,kBAAkB,CAAC,CAAE,UAAS,SAAS,kBAAkB;AAC/D,QAAM,kBAAkB,kBAAkB,CAAC;AAC3C,QAAM,qBAAqB,CAAC,kBAAkB;AAE9C,QAAM,oBAAoB,YAAY,kBAAkB;AAExD,QAAM,MAAgC,QACpC,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKJ,MAAI;AAAa,gBAAY,UAAU,QAAQ;AAC/C,wBAAsB,QAAQ,SAAS;AACvC,mCAAiC,UAAU,qBAAqB,sBAAsB;AACtF,0BAAwB,kBAAkB;AAK1C,YAAU,MAAM;AACd,eAAW,MAAM,yBAAyB,UAAU;AAAA,KAEnD;AAEH,SAAO,QAAQ,MAAO,GAAE,QAAQ,CAAC;AAAA;",
6
+ "names": []
7
+ }
package/esm/index.js CHANGED
@@ -1,9 +1,8 @@
1
- export { TreeView, TreeViewWithSchema } from './TreeView.js';
2
- export { TreeDnD, TreeDndPlugin } from './plugins/dnd/TreeDndPlugin.js';
3
- export { TreeRovingPlugin } from './plugins/roving/TreeRovingPlugin.js';
4
- export { SelectablePluginTree } from './plugins/selectable/SelectablePluginTree.js';
5
- export { TreeToolbarPlugin } from './plugins/toolbar/TreeToolbarPlugin.js';
6
- export { TreePluginList } from './plugins/tree/TreeDataPlugin.js';
7
- export { TreeVirtualizationPlugin } from './plugins/virtualization/TreeVirtualizationPlugin.js';
8
- export { SearchableTreePlugin } from './plugins/searchable/SearchableTreePlugin.js';
9
- export { TreeViewSearchBar } from './related-components/TreeViewSearchBar.js';
1
+ import * as React from "react";
2
+ export * from "./TreeView";
3
+ export * from "./plugins";
4
+ import { TreeViewSearchBar } from "./related-components/TreeViewSearchBar";
5
+ export {
6
+ TreeViewSearchBar
7
+ };
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeView';\nexport * from './plugins';\n\nexport { TreeViewSearchBar } from './related-components/TreeViewSearchBar';\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AAEA;",
6
+ "names": []
7
+ }