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

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,47 +1,55 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('react');
7
-
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
11
-
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 NestingSpace_exports = {};
29
+ __export(NestingSpace_exports, {
30
+ NestingSpace: () => NestingSpace
31
+ });
32
+ var React = __toESM(require("react"));
33
+ var import_react = __toESM(require("react"));
12
34
  const getItemNestingLeftPadding = (level, opts) => {
13
- const {
14
- spaceForNestingLevel = 1.5
15
- } = opts;
35
+ const { spaceForNestingLevel = 1.5 } = opts;
16
36
  const groupLeftPadding = spaceForNestingLevel * (level - 1);
17
- const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1; // root level left-padding would be negative and would not be applied
18
- // if "root-level" nesting, then defaults to 0 left-padding.
19
-
20
- return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
37
+ const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;
38
+ return finalLeftPadding > 0 ? `${finalLeftPadding}em` : "0";
21
39
  };
22
-
23
- const NestingSpace = props => {
24
- const {
25
- item,
26
- spaceForNestingLevel
27
- } = props;
28
- const {
29
- treeDepth
30
- } = item;
31
-
40
+ const NestingSpace = (props) => {
41
+ const { item, spaceForNestingLevel } = props;
42
+ const { treeDepth } = item;
32
43
  if (treeDepth) {
33
44
  const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
34
45
  spaceForNestingLevel
35
46
  });
36
- return /*#__PURE__*/_jsx__default["default"]("div", {
47
+ return /* @__PURE__ */ import_react.default.createElement("div", {
37
48
  "data-testid": "tree-item-nested-space",
38
- style: {
39
- width: itemNestingLeftPadding
40
- }
49
+ style: { width: itemNestingLeftPadding }
41
50
  });
42
51
  }
43
-
44
52
  return null;
45
53
  };
46
-
47
- exports.NestingSpace = NestingSpace;
54
+ module.exports = __toCommonJS(NestingSpace_exports);
55
+ //# sourceMappingURL=NestingSpace.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/parts/NestingSpace.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import React from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst getItemNestingLeftPadding = (level: number, opts: { spaceForNestingLevel: number }) => {\n const { spaceForNestingLevel = 1.5 } = opts;\n const groupLeftPadding = spaceForNestingLevel * (level - 1);\n const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;\n // root level left-padding would be negative and would not be applied\n // if \"root-level\" nesting, then defaults to 0 left-padding.\n return finalLeftPadding > 0 ? `${finalLeftPadding}em` : '0';\n};\n\ntype NestingSpacePropsType = {\n item: DSTreeviewT.Item;\n spaceForNestingLevel: number;\n};\n\nexport const NestingSpace = (props: NestingSpacePropsType): JSX.Element | null => {\n const { item, spaceForNestingLevel } = props;\n const { treeDepth } = item;\n if (treeDepth) {\n const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {\n spaceForNestingLevel,\n });\n\n return <div data-testid=\"tree-item-nested-space\" style={{ width: itemNestingLeftPadding }} />;\n }\n return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,4BAA4B,CAAC,OAAe,SAA2C;AAC3F,QAAM,EAAE,uBAAuB,QAAQ;AACvC,QAAM,mBAAmB,uBAAwB,SAAQ;AACzD,QAAM,mBAAmB,mBAAmB,uBAAuB;AAGnE,SAAO,mBAAmB,IAAI,GAAG,uBAAuB;AAAA;AAQnD,MAAM,eAAe,CAAC,UAAqD;AAChF,QAAM,EAAE,MAAM,yBAAyB;AACvC,QAAM,EAAE,cAAc;AACtB,MAAI,WAAW;AACb,UAAM,yBAAyB,0BAA0B,YAAY,GAAG;AAAA,MACtE;AAAA;AAGF,WAAO,mDAAC,OAAD;AAAA,MAAK,eAAY;AAAA,MAAyB,OAAO,EAAE,OAAO;AAAA;AAAA;AAEnE,SAAO;AAAA;",
6
+ "names": []
7
+ }
@@ -1,51 +1,65 @@
1
- 'use strict';
2
-
3
- var _jsx = require('@babel/runtime/helpers/jsx');
4
- var React = require('react');
5
- var dsForm = require('@elliemae/ds-form');
6
- var TreeViewContext = require('../TreeViewContext.js');
7
-
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
11
-
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 RadioSelectable_exports = {};
29
+ __export(RadioSelectable_exports, {
30
+ default: () => RadioSelectable_default
31
+ });
32
+ var React = __toESM(require("react"));
33
+ var import_react = __toESM(require("react"));
34
+ var import_ds_form = require("@elliemae/ds-form");
35
+ var import_TreeViewContext = __toESM(require("../TreeViewContext"));
12
36
  function RadioSelectable(props) {
37
+ const { item, itemIndex } = props;
38
+ const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
13
39
  const {
14
- item,
15
- itemIndex
16
- } = props;
17
- const ctx = React.useContext(TreeViewContext["default"]);
18
- const {
19
- props: {
20
- onSelectionChange,
21
- isItemDisabled
22
- },
23
- virtualListHelpers: {
24
- scrollToIndex
25
- },
40
+ props: { onSelectionChange, isItemDisabled },
41
+ virtualListHelpers: { scrollToIndex },
26
42
  uniqueTreeViewUUID,
27
43
  selectedCheckboxes,
28
44
  setSelectedCheckboxes
29
45
  } = ctx;
30
- const {
31
- id
32
- } = item;
33
- const onRadioChange = React.useCallback(() => {
34
- const newSelectionHasmap = {
35
- [id]: true
36
- };
46
+ const { id } = item;
47
+ const onRadioChange = (0, import_react.useCallback)(() => {
48
+ const newSelectionHasmap = { [id]: true };
37
49
  setSelectedCheckboxes(newSelectionHasmap);
38
50
  const indexAndScrollTo = {
39
51
  scrollToItem: () => {
40
- if (item.virtualIndex) scrollToIndex(item.virtualIndex);
52
+ if (item.virtualIndex)
53
+ scrollToIndex(item.virtualIndex);
41
54
  },
42
55
  itemIndex
43
56
  };
44
- if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
57
+ if (onSelectionChange)
58
+ onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
45
59
  }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
46
- const radioName = React.useMemo(() => "radios-".concat(uniqueTreeViewUUID), [uniqueTreeViewUUID]);
47
- const isDisabled = React.useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
48
- return /*#__PURE__*/_jsx__default["default"](dsForm.DSRadio, {
60
+ const radioName = (0, import_react.useMemo)(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
61
+ const isDisabled = (0, import_react.useMemo)(() => isItemDisabled(item), [item, isItemDisabled]);
62
+ return /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSRadio, {
49
63
  checked: selectedCheckboxes[id] === true,
50
64
  name: radioName,
51
65
  disabled: isDisabled,
@@ -55,5 +69,6 @@ function RadioSelectable(props) {
55
69
  tabIndex: 0
56
70
  });
57
71
  }
58
-
59
- module.exports = RadioSelectable;
72
+ var RadioSelectable_default = RadioSelectable;
73
+ module.exports = __toCommonJS(RadioSelectable_exports);
74
+ //# sourceMappingURL=RadioSelectable.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/parts/RadioSelectable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n}\nfunction RadioSelectable(props: PropsT) {\n const { item, itemIndex } = props;\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { onSelectionChange, isItemDisabled },\n virtualListHelpers: { scrollToIndex },\n uniqueTreeViewUUID,\n selectedCheckboxes,\n setSelectedCheckboxes,\n } = ctx;\n\n const { id } = item;\n\n const onRadioChange = useCallback(() => {\n const newSelectionHasmap = { [id]: true };\n setSelectedCheckboxes(newSelectionHasmap);\n const indexAndScrollTo = {\n scrollToItem: () => {\n if (item.virtualIndex) scrollToIndex(item.virtualIndex);\n },\n itemIndex,\n };\n if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);\n\n const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);\n\n const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n return (\n <DSRadio\n checked={selectedCheckboxes[id] === true}\n name={radioName}\n disabled={isDisabled}\n className=\"em-ds-tree-item-radio\"\n data-testid=\"tree-item-radio\"\n onChange={onRadioChange}\n tabIndex={0}\n />\n );\n}\n\nexport default RadioSelectable;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,qBAAwB;AACxB,6BAA4B;AAM5B,yBAAyB,OAAe;AACtC,QAAM,EAAE,MAAM,cAAc;AAE5B,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB;AAAA,IAC5B,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,EAAE,OAAO;AAEf,QAAM,gBAAgB,8BAAY,MAAM;AACtC,UAAM,qBAAqB,GAAG,KAAK;AACnC,0BAAsB;AACtB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,KAAK;AAAc,wBAAc,KAAK;AAAA;AAAA,MAE5C;AAAA;AAEF,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM;AAAA,KAClE,CAAC,IAAI,uBAAuB,WAAW,mBAAmB,MAAM;AAEnE,QAAM,YAAY,0BAAQ,MAAM,UAAU,sBAAsB,CAAC;AAEjE,QAAM,aAAa,0BAAQ,MAAM,eAAe,OAAO,CAAC,MAAM;AAE9D,SACE,mDAAC,wBAAD;AAAA,IACE,SAAS,mBAAmB,QAAQ;AAAA,IACpC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA;AAAA;AAKhB,IAAO,0BAAQ;",
6
+ "names": []
7
+ }
@@ -1,64 +1,70 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- var _jsx = require('@babel/runtime/helpers/jsx');
7
- require('core-js/modules/web.dom-collections.iterator.js');
8
- require('core-js/modules/esnext.async-iterator.filter.js');
9
- require('core-js/modules/esnext.iterator.constructor.js');
10
- require('core-js/modules/esnext.iterator.filter.js');
11
- require('core-js/modules/esnext.async-iterator.for-each.js');
12
- require('core-js/modules/esnext.iterator.for-each.js');
13
- var React = require('react');
14
- var reactSortableHoc = require('@elliemae/react-sortable-hoc');
15
- var dsClassnames = require('@elliemae/ds-classnames');
16
- var dsIcons = require('@elliemae/ds-icons');
17
- var RadioSelectable = require('./RadioSelectable.js');
18
- var CheckboxSelectable = require('./CheckboxSelectable.js');
19
- var TreeViewContext = require('../TreeViewContext.js');
20
- var refsHelpers = require('../utils/refs-helpers.js');
21
- var keyboardHelpers = require('../utils/keyboard-helpers.js');
22
- var NestingSpace = require('./NestingSpace.js');
23
- var Icon = require('./Icon.js');
24
- var ExpandCaret = require('./ExpandCaret.js');
25
- var TreeItemText = require('./TreeItemText.js');
26
- var cssClassesConstants = require('../config/cssClassesConstants.js');
27
- var jsxRuntime = require('react/jsx-runtime');
28
-
29
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
30
-
31
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
32
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
33
-
34
- 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; }
35
-
36
- 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; }
37
- const TreeListItem = dsClassnames.aggregatedClasses('li', {
38
- 'data-testid': cssClassesConstants.treeItemBlockName,
39
- role: 'treeitem' // temp fix untill we move to styled components
40
-
41
- })(cssClassesConstants.treeItemBlockName);
42
- const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(cssClassesConstants.treeItemBlockName, 'addons' // temp fix untill we move to styled components
43
- );
44
- const DnDHandle = reactSortableHoc.SortableHandle(_ref => {
45
- let {
46
- id
47
- } = _ref;
48
- return /*#__PURE__*/_jsx__default["default"](dsIcons.GripperVertical, {
49
- "data-testid": "drag-handle",
50
- className: "drag-handle",
51
- size: "s",
52
- onMouseDown: e => {
53
- // prevent focusing the drag-handle to avoid borders
54
- if (e) {
55
- e.preventDefault();
56
- }
57
- },
58
- tabIndex: "0"
59
- }, "".concat(id, "-drag-handle"));
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 TreeItem_exports = {};
29
+ __export(TreeItem_exports, {
30
+ DragAndDropTreeItem: () => DragAndDropTreeItem,
31
+ TreeItem: () => TreeItem,
32
+ TreeListItem: () => TreeListItem,
33
+ TreeListItemAddonsWrapper: () => TreeListItemAddonsWrapper
60
34
  });
61
- const TreeItem = props => {
35
+ var React = __toESM(require("react"));
36
+ var import_react = __toESM(require("react"));
37
+ var import_react_sortable_hoc = require("@elliemae/react-sortable-hoc");
38
+ var import_ds_classnames = require("@elliemae/ds-classnames");
39
+ var import_ds_icons = require("@elliemae/ds-icons");
40
+ var import_RadioSelectable = __toESM(require("./RadioSelectable"));
41
+ var import_CheckboxSelectable = __toESM(require("./CheckboxSelectable"));
42
+ var import_TreeViewContext = __toESM(require("../TreeViewContext"));
43
+ var import_refs_helpers = require("../utils/refs-helpers");
44
+ var import_keyboard_helpers = require("../utils/keyboard-helpers");
45
+ var import_NestingSpace = require("./NestingSpace");
46
+ var import_Icon = require("./Icon");
47
+ var import_ExpandCaret = require("./ExpandCaret");
48
+ var import_TreeItemText = require("./TreeItemText");
49
+ var import_cssClassesConstants = require("../config/cssClassesConstants");
50
+ const TreeListItem = (0, import_ds_classnames.aggregatedClasses)("li", {
51
+ "data-testid": import_cssClassesConstants.treeItemBlockName,
52
+ role: "treeitem"
53
+ })(import_cssClassesConstants.treeItemBlockName);
54
+ const TreeListItemAddonsWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(import_cssClassesConstants.treeItemBlockName, "addons");
55
+ const DnDHandle = (0, import_react_sortable_hoc.SortableHandle)(({ id }) => /* @__PURE__ */ import_react.default.createElement(import_ds_icons.GripperVertical, {
56
+ "data-testid": "drag-handle",
57
+ key: `${id}-drag-handle`,
58
+ className: "drag-handle",
59
+ size: "s",
60
+ onMouseDown: (e) => {
61
+ if (e) {
62
+ e.preventDefault();
63
+ }
64
+ },
65
+ tabIndex: "0"
66
+ }));
67
+ const TreeItem = (props) => {
62
68
  const {
63
69
  item,
64
70
  itemIndex,
@@ -67,26 +73,14 @@ const TreeItem = props => {
67
73
  spaceForNestingLevel = 1.5,
68
74
  onMouseDragOverItem
69
75
  } = props;
76
+ const { id, node } = item;
77
+ const { nodeItemRef } = node.model;
78
+ const openFolderOnHoverTimeout = (0, import_react.useRef)(null);
79
+ const [isDraggingOverThis, setIsDraggingOverThis] = (0, import_react.useState)(false);
80
+ const onItemKeyDown = (0, import_keyboard_helpers.useOnItemKeyDown)(item);
81
+ const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
70
82
  const {
71
- id,
72
- node
73
- } = item;
74
- const {
75
- nodeItemRef
76
- } = node.model;
77
- const openFolderOnHoverTimeout = React.useRef(null);
78
- const [isDraggingOverThis, setIsDraggingOverThis] = React.useState(false);
79
- const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item);
80
- const ctx = React.useContext(TreeViewContext["default"]);
81
- const {
82
- props: {
83
- disableIcons,
84
- rightAddons,
85
- onItemClick,
86
- onItemFocus,
87
- rowSize,
88
- labelOverflow
89
- },
83
+ props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },
90
84
  relativeMouseCord,
91
85
  withRadioChecks,
92
86
  withCheckboxChecks,
@@ -95,61 +89,52 @@ const TreeItem = props => {
95
89
  selectedCheckboxes,
96
90
  hoverItem,
97
91
  isDragging,
98
- virtualListHelpers: {
99
- scrollToIndex
100
- },
92
+ virtualListHelpers: { scrollToIndex },
101
93
  setHoverItem,
102
94
  setSelectedItem,
103
95
  setFocusedItem
104
- } = ctx; // Sortable Items needs to update
105
- // - the virtual list ref (for react-virtual requirement)
106
- // - nodeItemRef which is a prop avaiable in the TreeModel nodes
107
-
108
- const setItemRefs = ref => {
109
- refsHelpers.setMultipleRefs(virtualItemRef, nodeItemRef)(ref);
96
+ } = ctx;
97
+ const setItemRefs = (ref) => {
98
+ (0, import_refs_helpers.setMultipleRefs)(virtualItemRef, nodeItemRef)(ref);
110
99
  };
111
-
112
- const dropPreviewClassName = React.useMemo(() => {
113
- if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis) return '';
114
- const {
115
- isBefore,
116
- isAfter,
117
- isValid
118
- } = relativeMouseCord;
119
- let className = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName).concat(isValid ? '--valid' : '--invalid');
120
- if (isBefore) className += '-drop-before';else if (isAfter) className += '-drop-after';else className += '-drop-in';
100
+ const dropPreviewClassName = (0, import_react.useMemo)(() => {
101
+ if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis)
102
+ return "";
103
+ const { isBefore, isAfter, isValid } = relativeMouseCord;
104
+ let className = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}${isValid ? "--valid" : "--invalid"}`;
105
+ if (isBefore)
106
+ className += "-drop-before";
107
+ else if (isAfter)
108
+ className += "-drop-after";
109
+ else
110
+ className += "-drop-in";
121
111
  return className;
122
112
  }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);
123
- const selectedClassName = React.useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? 'selected' : '', [item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
124
- const hoverClassName = React.useMemo(() => (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover', [hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, withDragAndDrop, isDragging]);
125
- const fixedHeightClassname = React.useMemo(() => {
126
- if (labelOverflow === 'truncate') {
127
- if (rowSize === 'compact') return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height-compact");
128
- return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height");
113
+ const selectedClassName = (0, import_react.useMemo)(() => selectedItem?.id === item.id ? "selected" : "", [item.id, selectedItem?.id]);
114
+ const hoverClassName = (0, import_react.useMemo)(() => hoverItem?.id !== item.id || withDragAndDrop && isDragging ? "" : "hover", [hoverItem?.id, item.id, withDragAndDrop, isDragging]);
115
+ const fixedHeightClassname = (0, import_react.useMemo)(() => {
116
+ if (labelOverflow === "truncate") {
117
+ if (rowSize === "compact")
118
+ return `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}--fixed-height-compact`;
119
+ return `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}--fixed-height`;
129
120
  }
130
-
131
- return '';
121
+ return "";
132
122
  }, [labelOverflow, rowSize]);
133
- const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
134
- const handleItemClick = React.useCallback(e => {
123
+ const finalClassName = (0, import_react.useMemo)(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
124
+ const handleItemClick = (0, import_react.useCallback)((e) => {
135
125
  onItemClick(item, e);
136
126
  setFocusedItem(item);
137
127
  setSelectedItem(item);
138
- const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;
128
+ const itemVirtualIndex = typeof item.virtualIndex === "number" ? item.virtualIndex : -1;
139
129
  onItemFocus({
140
130
  itemIndex: itemVirtualIndex,
141
- scrollToItem: function () {
142
- let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
143
- align: 'start'
144
- };
145
- return scrollToIndex(itemVirtualIndex, opts);
146
- },
131
+ scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVirtualIndex, opts),
147
132
  item
148
133
  });
149
134
  }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
150
- return /*#__PURE__*/jsxRuntime.jsxs(TreeListItem, {
135
+ return /* @__PURE__ */ import_react.default.createElement(TreeListItem, {
151
136
  tabIndex: 0,
152
- onMouseMove: event => {
137
+ onMouseMove: (event) => {
153
138
  if (withDragAndDrop && onMouseDragOverItem) {
154
139
  onMouseDragOverItem({
155
140
  event,
@@ -163,10 +148,10 @@ const TreeItem = props => {
163
148
  onMouseLeave: () => {
164
149
  if (withDragAndDrop) {
165
150
  setIsDraggingOverThis(false);
166
- if (openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) clearTimeout(openFolderOnHoverTimeout.current);
151
+ if (openFolderOnHoverTimeout?.current)
152
+ clearTimeout(openFolderOnHoverTimeout.current);
167
153
  }
168
-
169
- if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
154
+ if (hoverItem?.id === item.id) {
170
155
  setHoverItem(null);
171
156
  }
172
157
  },
@@ -175,36 +160,32 @@ const TreeItem = props => {
175
160
  },
176
161
  onClick: handleItemClick,
177
162
  ref: setItemRefs,
178
- style: _objectSpread({}, itemWrapperStyle),
163
+ style: { ...itemWrapperStyle },
179
164
  className: finalClassName,
180
165
  "aria-expanded": !!item.isExpanded,
181
166
  "aria-selected": !!selectedCheckboxes[item.id],
182
167
  "data-id": item.id,
183
168
  "data-index": item.virtualIndex,
184
- onKeyDown: onItemKeyDown,
185
- children: [/*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx__default["default"](DnDHandle, {
186
- id: id
187
- }) : null, withRadioChecks ? /*#__PURE__*/_jsx__default["default"](RadioSelectable, {
188
- item: item,
189
- itemIndex: itemIndex
190
- }) : null, withCheckboxChecks ? /*#__PURE__*/_jsx__default["default"](CheckboxSelectable, {
191
- item: item,
192
- itemIndex: itemIndex
193
- }) : null, /*#__PURE__*/_jsx__default["default"](NestingSpace.NestingSpace, {
194
- item: item,
195
- spaceForNestingLevel: spaceForNestingLevel
196
- }), /*#__PURE__*/_jsx__default["default"](ExpandCaret.ExpandCaret, {
197
- item: item
198
- }), !disableIcons ? /*#__PURE__*/_jsx__default["default"](Icon.Icon, {
199
- item: item
200
- }) : null), /*#__PURE__*/_jsx__default["default"](TreeItemText.TreeItemText, {
201
- item: item
202
- }), rightAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons)]
203
- });
169
+ onKeyDown: onItemKeyDown
170
+ }, /* @__PURE__ */ import_react.default.createElement(TreeListItemAddonsWrapper, null, withDragAndDrop ? /* @__PURE__ */ import_react.default.createElement(DnDHandle, {
171
+ id
172
+ }) : null, withRadioChecks ? /* @__PURE__ */ import_react.default.createElement(import_RadioSelectable.default, {
173
+ item,
174
+ itemIndex
175
+ }) : null, withCheckboxChecks ? /* @__PURE__ */ import_react.default.createElement(import_CheckboxSelectable.default, {
176
+ item,
177
+ itemIndex
178
+ }) : null, /* @__PURE__ */ import_react.default.createElement(import_NestingSpace.NestingSpace, {
179
+ item,
180
+ spaceForNestingLevel
181
+ }), /* @__PURE__ */ import_react.default.createElement(import_ExpandCaret.ExpandCaret, {
182
+ item
183
+ }), !disableIcons ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, {
184
+ item
185
+ }) : null), /* @__PURE__ */ import_react.default.createElement(import_TreeItemText.TreeItemText, {
186
+ item
187
+ }), rightAddons && /* @__PURE__ */ import_react.default.createElement(TreeListItemAddonsWrapper, null, typeof rightAddons === "function" ? rightAddons(item) : rightAddons));
204
188
  };
205
- const DragAndDropTreeItem = reactSortableHoc.SortableElement(TreeItem);
206
-
207
- exports.DragAndDropTreeItem = DragAndDropTreeItem;
208
- exports.TreeItem = TreeItem;
209
- exports.TreeListItem = TreeListItem;
210
- exports.TreeListItemAddonsWrapper = TreeListItemAddonsWrapper;
189
+ const DragAndDropTreeItem = (0, import_react_sortable_hoc.SortableElement)(TreeItem);
190
+ module.exports = __toCommonJS(TreeItem_exports);
191
+ //# sourceMappingURL=TreeItem.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/parts/TreeItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useState, useMemo, useRef, useCallback } from 'react';\nimport { SortableElement, SortableHandle } from '@elliemae/react-sortable-hoc';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { GripperVertical } from '@elliemae/ds-icons';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const TreeListItem = aggregatedClasses('li', {\n 'data-testid': treeItemBlockName,\n role: 'treeitem',\n // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n treeItemBlockName,\n 'addons',\n // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\nconst DnDHandle = SortableHandle(({ id }: { id: DSTreeviewT.StringOrNum }) => (\n <GripperVertical\n data-testid=\"drag-handle\"\n key={`${id}-drag-handle`}\n className=\"drag-handle\"\n size=\"s\"\n onMouseDown={(e: React.MouseEvent) => {\n // prevent focusing the drag-handle to avoid borders\n if (e) {\n e.preventDefault();\n }\n }}\n tabIndex=\"0\"\n />\n));\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n virtualItemRef: React.RefObject<HTMLLIElement>;\n itemWrapperStyle?: { [key: string]: unknown };\n spaceForNestingLevel?: number;\n onMouseDragOverItem?: (opts: {\n event: React.MouseEvent<HTMLLIElement>;\n item: DSTreeviewT.Item;\n itemIndex: number;\n setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;\n openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n }) => void;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n const {\n item,\n itemIndex,\n itemWrapperStyle = {},\n virtualItemRef,\n spaceForNestingLevel = 1.5,\n onMouseDragOverItem,\n } = props;\n const { id, node } = item;\n const { nodeItemRef } = node.model;\n const openFolderOnHoverTimeout = useRef<NodeJS.Timeout | null>(null);\n\n const [isDraggingOverThis, setIsDraggingOverThis] = useState(false);\n const onItemKeyDown = useOnItemKeyDown(item);\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n relativeMouseCord,\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n selectedItem,\n selectedCheckboxes,\n hoverItem,\n isDragging,\n virtualListHelpers: { scrollToIndex },\n setHoverItem,\n setSelectedItem,\n setFocusedItem,\n } = ctx;\n\n // Sortable Items needs to update\n // - the virtual list ref (for react-virtual requirement)\n // - nodeItemRef which is a prop avaiable in the TreeModel nodes\n const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n setMultipleRefs(virtualItemRef, nodeItemRef)(ref);\n };\n\n const dropPreviewClassName = useMemo(() => {\n if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis) return '';\n const { isBefore, isAfter, isValid } = relativeMouseCord;\n let className = `${DSTreeViewPrefix}-${treeItemBlockName}${isValid ? '--valid' : '--invalid'}`;\n\n if (isBefore) className += '-drop-before';\n else if (isAfter) className += '-drop-after';\n else className += '-drop-in';\n return className;\n }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);\n\n const selectedClassName = useMemo(\n () => (selectedItem?.id === item.id ? 'selected' : ''),\n [item.id, selectedItem?.id],\n );\n const hoverClassName = useMemo(\n () => (hoverItem?.id !== item.id || (withDragAndDrop && isDragging) ? '' : 'hover'),\n [hoverItem?.id, item.id, withDragAndDrop, isDragging],\n );\n const fixedHeightClassname = useMemo(() => {\n if (labelOverflow === 'truncate') {\n if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n }\n return '';\n }, [labelOverflow, rowSize]);\n\n const finalClassName = useMemo(\n () => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`,\n [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname],\n );\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onItemClick(item, e);\n setFocusedItem(item);\n setSelectedItem(item);\n const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n onItemFocus({\n itemIndex: itemVirtualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n item,\n });\n },\n [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n );\n\n return (\n <TreeListItem\n tabIndex={0}\n onMouseMove={(event) => {\n if (withDragAndDrop && onMouseDragOverItem) {\n onMouseDragOverItem({\n event,\n item,\n itemIndex,\n setIsDraggingOverThis,\n openFolderOnHoverTimeout,\n });\n }\n }}\n onMouseLeave={() => {\n if (withDragAndDrop) {\n setIsDraggingOverThis(false);\n if (openFolderOnHoverTimeout?.current) clearTimeout(openFolderOnHoverTimeout.current);\n }\n if (hoverItem?.id === item.id) {\n setHoverItem(null);\n }\n }}\n onMouseEnter={() => {\n setHoverItem(item);\n }}\n onClick={handleItemClick}\n ref={setItemRefs}\n style={{ ...itemWrapperStyle }}\n className={finalClassName}\n aria-expanded={!!item.isExpanded}\n aria-selected={!!selectedCheckboxes[item.id]}\n data-id={item.id}\n data-index={item.virtualIndex}\n onKeyDown={onItemKeyDown}\n >\n <TreeListItemAddonsWrapper>\n {withDragAndDrop ? <DnDHandle id={id} /> : null}\n {withRadioChecks ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n {withCheckboxChecks ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />\n <ExpandCaret item={item} />\n {!disableIcons ? <Icon item={item} /> : null}\n </TreeListItemAddonsWrapper>\n <TreeItemText item={item} />\n {rightAddons && (\n <TreeListItemAddonsWrapper>\n {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n </TreeListItemAddonsWrapper>\n )}\n </TreeListItem>\n );\n};\n\nexport const DragAndDropTreeItem = SortableElement(TreeItem);\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }