@elliemae/ds-treeview 2.2.0-alpha.2 → 2.2.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/TreeView.js +31 -49
- package/cjs/TreeViewContext.js +35 -53
- package/cjs/config/cssClassesConstants.js +13 -41
- package/cjs/config/useTreeview.js +80 -108
- package/cjs/index.js +27 -37
- package/cjs/parts/CheckboxSelectable.js +59 -70
- package/cjs/parts/ChildrenCountDisplayer.js +28 -45
- package/cjs/parts/ExpandCaret.js +83 -85
- package/cjs/parts/Icon.js +31 -46
- package/cjs/parts/NestingSpace.js +35 -43
- package/cjs/parts/RadioSelectable.js +37 -52
- package/cjs/parts/TreeItem.js +147 -128
- package/cjs/parts/TreeItemText.js +95 -88
- package/cjs/parts/TreeList.js +130 -117
- package/cjs/plugins/dnd/TreeDndPlugin.js +36 -51
- package/cjs/plugins/dnd/index.js +10 -28
- package/cjs/plugins/index.js +22 -34
- package/cjs/plugins/roving/TreeRovingPlugin.js +7 -35
- package/cjs/plugins/roving/index.js +9 -28
- package/cjs/plugins/searchable/SearchableTreePlugin.js +7 -35
- package/cjs/plugins/searchable/index.js +9 -28
- package/cjs/plugins/selectable/SelectablePluginTree.js +7 -35
- package/cjs/plugins/selectable/index.js +9 -28
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js +7 -35
- package/cjs/plugins/toolbar/index.js +9 -28
- package/cjs/plugins/tree/TreeDataPlugin.js +7 -35
- package/cjs/plugins/tree/index.js +9 -28
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js +7 -35
- package/cjs/plugins/virtualization/index.js +9 -28
- package/cjs/react-desc-prop-types.js +53 -82
- package/cjs/related-components/TreeViewSearchBar.js +40 -42
- package/cjs/sharedTypes.js +2 -27
- package/cjs/utils/array-helpers.js +11 -35
- package/cjs/utils/dnd-helpers.js +84 -90
- package/cjs/utils/group-expands-helpers.js +59 -86
- package/cjs/utils/keyboard-helpers.js +88 -84
- package/cjs/utils/object-helpers.js +36 -43
- package/cjs/utils/refs-helpers.js +22 -43
- package/cjs/utils/selectable-helper.js +53 -61
- package/cjs/utils/string-helpers.js +7 -35
- package/cjs/utils/tree-helpers.js +135 -105
- package/cjs/utils/useDnDHelpers.js +118 -97
- package/cjs/utils/useInstanceRefActions.js +43 -54
- package/cjs/utils/useTree.js +78 -76
- package/esm/TreeView.js +20 -18
- package/esm/TreeViewContext.js +29 -24
- package/esm/config/cssClassesConstants.js +6 -12
- package/esm/config/useTreeview.js +54 -61
- package/esm/index.js +9 -8
- package/esm/parts/CheckboxSelectable.js +46 -36
- package/esm/parts/ChildrenCountDisplayer.js +20 -16
- package/esm/parts/ExpandCaret.js +72 -54
- package/esm/parts/Icon.js +22 -16
- package/esm/parts/NestingSpace.js +27 -14
- package/esm/parts/RadioSelectable.js +28 -20
- package/esm/parts/TreeItem.js +127 -91
- package/esm/parts/TreeItemText.js +85 -58
- package/esm/parts/TreeList.js +117 -88
- package/esm/plugins/dnd/TreeDndPlugin.js +26 -21
- package/esm/plugins/dnd/index.js +1 -3
- package/esm/plugins/index.js +7 -9
- package/esm/plugins/roving/TreeRovingPlugin.js +3 -6
- package/esm/plugins/roving/index.js +1 -3
- package/esm/plugins/searchable/SearchableTreePlugin.js +3 -6
- package/esm/plugins/searchable/index.js +1 -3
- package/esm/plugins/selectable/SelectablePluginTree.js +3 -6
- package/esm/plugins/selectable/index.js +1 -3
- package/esm/plugins/toolbar/TreeToolbarPlugin.js +3 -6
- package/esm/plugins/toolbar/index.js +1 -3
- package/esm/plugins/tree/TreeDataPlugin.js +3 -6
- package/esm/plugins/tree/index.js +1 -3
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js +3 -6
- package/esm/plugins/virtualization/index.js +1 -3
- package/esm/react-desc-prop-types.js +43 -47
- package/esm/related-components/TreeViewSearchBar.js +32 -13
- package/esm/sharedTypes.js +1 -2
- package/esm/utils/array-helpers.js +6 -6
- package/esm/utils/dnd-helpers.js +73 -58
- package/esm/utils/group-expands-helpers.js +46 -56
- package/esm/utils/keyboard-helpers.js +72 -45
- package/esm/utils/object-helpers.js +31 -14
- package/esm/utils/refs-helpers.js +19 -15
- package/esm/utils/selectable-helper.js +43 -32
- package/esm/utils/string-helpers.js +3 -6
- package/esm/utils/tree-helpers.js +119 -74
- package/esm/utils/useDnDHelpers.js +106 -60
- package/esm/utils/useInstanceRefActions.js +35 -21
- package/esm/utils/useTree.js +57 -35
- package/package.json +10 -10
- package/types/TreeView.d.ts +1 -1
- package/cjs/TreeView.js.map +0 -7
- package/cjs/TreeViewContext.js.map +0 -7
- package/cjs/config/cssClassesConstants.js.map +0 -7
- package/cjs/config/useTreeview.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/parts/CheckboxSelectable.js.map +0 -7
- package/cjs/parts/ChildrenCountDisplayer.js.map +0 -7
- package/cjs/parts/ExpandCaret.js.map +0 -7
- package/cjs/parts/Icon.js.map +0 -7
- package/cjs/parts/NestingSpace.js.map +0 -7
- package/cjs/parts/RadioSelectable.js.map +0 -7
- package/cjs/parts/TreeItem.js.map +0 -7
- package/cjs/parts/TreeItemText.js.map +0 -7
- package/cjs/parts/TreeList.js.map +0 -7
- package/cjs/plugins/dnd/TreeDndPlugin.js.map +0 -7
- package/cjs/plugins/dnd/index.js.map +0 -7
- package/cjs/plugins/index.js.map +0 -7
- package/cjs/plugins/roving/TreeRovingPlugin.js.map +0 -7
- package/cjs/plugins/roving/index.js.map +0 -7
- package/cjs/plugins/searchable/SearchableTreePlugin.js.map +0 -7
- package/cjs/plugins/searchable/index.js.map +0 -7
- package/cjs/plugins/selectable/SelectablePluginTree.js.map +0 -7
- package/cjs/plugins/selectable/index.js.map +0 -7
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js.map +0 -7
- package/cjs/plugins/toolbar/index.js.map +0 -7
- package/cjs/plugins/tree/TreeDataPlugin.js.map +0 -7
- package/cjs/plugins/tree/index.js.map +0 -7
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js.map +0 -7
- package/cjs/plugins/virtualization/index.js.map +0 -7
- package/cjs/react-desc-prop-types.js.map +0 -7
- package/cjs/related-components/TreeViewSearchBar.js.map +0 -7
- package/cjs/sharedTypes.js.map +0 -7
- package/cjs/utils/array-helpers.js.map +0 -7
- package/cjs/utils/dnd-helpers.js.map +0 -7
- package/cjs/utils/group-expands-helpers.js.map +0 -7
- package/cjs/utils/keyboard-helpers.js.map +0 -7
- package/cjs/utils/object-helpers.js.map +0 -7
- package/cjs/utils/refs-helpers.js.map +0 -7
- package/cjs/utils/selectable-helper.js.map +0 -7
- package/cjs/utils/string-helpers.js.map +0 -7
- package/cjs/utils/tree-helpers.js.map +0 -7
- package/cjs/utils/useDnDHelpers.js.map +0 -7
- package/cjs/utils/useInstanceRefActions.js.map +0 -7
- package/cjs/utils/useTree.js.map +0 -7
- package/esm/TreeView.js.map +0 -7
- package/esm/TreeViewContext.js.map +0 -7
- package/esm/config/cssClassesConstants.js.map +0 -7
- package/esm/config/useTreeview.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/parts/CheckboxSelectable.js.map +0 -7
- package/esm/parts/ChildrenCountDisplayer.js.map +0 -7
- package/esm/parts/ExpandCaret.js.map +0 -7
- package/esm/parts/Icon.js.map +0 -7
- package/esm/parts/NestingSpace.js.map +0 -7
- package/esm/parts/RadioSelectable.js.map +0 -7
- package/esm/parts/TreeItem.js.map +0 -7
- package/esm/parts/TreeItemText.js.map +0 -7
- package/esm/parts/TreeList.js.map +0 -7
- package/esm/plugins/dnd/TreeDndPlugin.js.map +0 -7
- package/esm/plugins/dnd/index.js.map +0 -7
- package/esm/plugins/index.js.map +0 -7
- package/esm/plugins/roving/TreeRovingPlugin.js.map +0 -7
- package/esm/plugins/roving/index.js.map +0 -7
- package/esm/plugins/searchable/SearchableTreePlugin.js.map +0 -7
- package/esm/plugins/searchable/index.js.map +0 -7
- package/esm/plugins/selectable/SelectablePluginTree.js.map +0 -7
- package/esm/plugins/selectable/index.js.map +0 -7
- package/esm/plugins/toolbar/TreeToolbarPlugin.js.map +0 -7
- package/esm/plugins/toolbar/index.js.map +0 -7
- package/esm/plugins/tree/TreeDataPlugin.js.map +0 -7
- package/esm/plugins/tree/index.js.map +0 -7
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js.map +0 -7
- package/esm/plugins/virtualization/index.js.map +0 -7
- package/esm/react-desc-prop-types.js.map +0 -7
- package/esm/related-components/TreeViewSearchBar.js.map +0 -7
- package/esm/sharedTypes.js.map +0 -7
- package/esm/utils/array-helpers.js.map +0 -7
- package/esm/utils/dnd-helpers.js.map +0 -7
- package/esm/utils/group-expands-helpers.js.map +0 -7
- package/esm/utils/keyboard-helpers.js.map +0 -7
- package/esm/utils/object-helpers.js.map +0 -7
- package/esm/utils/refs-helpers.js.map +0 -7
- package/esm/utils/selectable-helper.js.map +0 -7
- package/esm/utils/string-helpers.js.map +0 -7
- package/esm/utils/tree-helpers.js.map +0 -7
- package/esm/utils/useDnDHelpers.js.map +0 -7
- package/esm/utils/useInstanceRefActions.js.map +0 -7
- package/esm/utils/useTree.js.map +0 -7
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { focusItem } from
|
|
4
|
-
import { toggleExpandAllHelper } from
|
|
5
|
-
|
|
1
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
|
+
import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
|
|
3
|
+
import { focusItem } from './tree-helpers.js';
|
|
4
|
+
import { toggleExpandAllHelper } from './group-expands-helpers.js';
|
|
5
|
+
|
|
6
|
+
const useInstanceRefActions = (_ref, ctx) => {
|
|
7
|
+
let {
|
|
8
|
+
actions
|
|
9
|
+
} = _ref;
|
|
6
10
|
const {
|
|
7
|
-
props: {
|
|
11
|
+
props: {
|
|
12
|
+
onItemFocus
|
|
13
|
+
},
|
|
8
14
|
virtualListHelpers,
|
|
9
15
|
treeRoot,
|
|
10
16
|
visibleItems,
|
|
@@ -14,8 +20,12 @@ const useInstanceRefActions = ({ actions }, ctx) => {
|
|
|
14
20
|
setFocusedItem,
|
|
15
21
|
setLatestToggledItem
|
|
16
22
|
} = ctx;
|
|
17
|
-
const {
|
|
18
|
-
|
|
23
|
+
const {
|
|
24
|
+
current: promises
|
|
25
|
+
} = useRef({});
|
|
26
|
+
const {
|
|
27
|
+
scrollToIndex
|
|
28
|
+
} = useMemo(() => virtualListHelpers, [virtualListHelpers]);
|
|
19
29
|
const [expandPromise, setPromise] = useState();
|
|
20
30
|
useEffect(() => {
|
|
21
31
|
if (expandPromise && promises.expandResolve) {
|
|
@@ -24,30 +34,36 @@ const useInstanceRefActions = ({ actions }, ctx) => {
|
|
|
24
34
|
setPromise(null);
|
|
25
35
|
}
|
|
26
36
|
}, [visibleItems, expandPromise, promises]);
|
|
27
|
-
actions.toggleExpandAll = useCallback(
|
|
28
|
-
const p = new Promise(
|
|
37
|
+
actions.toggleExpandAll = useCallback(isExpand => {
|
|
38
|
+
const p = new Promise(resolve => {
|
|
29
39
|
promises.expandResolve = resolve;
|
|
30
|
-
if (treeRoot)
|
|
31
|
-
toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
|
|
40
|
+
if (treeRoot) toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
|
|
32
41
|
});
|
|
33
42
|
setPromise(p);
|
|
34
43
|
return p;
|
|
35
44
|
}, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState]);
|
|
36
|
-
actions.scrollTo = useCallback((indx
|
|
37
|
-
|
|
38
|
-
|
|
45
|
+
actions.scrollTo = useCallback(function (indx) {
|
|
46
|
+
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
47
|
+
align: 'start'
|
|
48
|
+
};
|
|
49
|
+
if (scrollToIndex) scrollToIndex(indx, opts);
|
|
39
50
|
}, [scrollToIndex]);
|
|
40
|
-
actions.setSelectedItemByVirtualIndex = useCallback(
|
|
51
|
+
actions.setSelectedItemByVirtualIndex = useCallback(index => {
|
|
41
52
|
const itemByIndex = visibleItems[index];
|
|
42
53
|
setSelectedItem(itemByIndex);
|
|
43
54
|
}, [visibleItems, setSelectedItem]);
|
|
44
|
-
actions.setFocusedItemByVirtualIndex = useCallback((index
|
|
55
|
+
actions.setFocusedItemByVirtualIndex = useCallback(function (index) {
|
|
56
|
+
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
57
|
+
align: 'start',
|
|
58
|
+
withScroll: false
|
|
59
|
+
};
|
|
45
60
|
const itemByIndex = visibleItems[index];
|
|
46
61
|
const onItemFocusParams = {
|
|
47
62
|
itemIndex: itemByIndex.virtualIndex,
|
|
48
63
|
scrollToItem: () => scrollToIndex(index, opts),
|
|
49
64
|
item: itemByIndex
|
|
50
65
|
};
|
|
66
|
+
|
|
51
67
|
if (opts.withScroll && scrollToIndex) {
|
|
52
68
|
scrollToIndex(index, opts);
|
|
53
69
|
setTimeout(() => {
|
|
@@ -63,7 +79,5 @@ const useInstanceRefActions = ({ actions }, ctx) => {
|
|
|
63
79
|
}, [visibleItems, scrollToIndex, setFocusedItem, onItemFocus]);
|
|
64
80
|
return actions;
|
|
65
81
|
};
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
};
|
|
69
|
-
//# sourceMappingURL=useInstanceRefActions.js.map
|
|
82
|
+
|
|
83
|
+
export { useInstanceRefActions };
|
package/esm/utils/useTree.js
CHANGED
|
@@ -1,64 +1,88 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
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 { useMemo, useState, useEffect, useCallback } from 'react';
|
|
9
|
+
import TreeModel from 'tree-model';
|
|
10
|
+
import { cloneDeep } from 'lodash';
|
|
11
|
+
import { enrichNodeModelInPlace, walkVisibles } from './tree-helpers.js';
|
|
12
|
+
import { updateExpandedState } from './group-expands-helpers.js';
|
|
13
|
+
|
|
14
|
+
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; }
|
|
15
|
+
|
|
16
|
+
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; }
|
|
7
17
|
const useTree = (data, props, states) => {
|
|
8
|
-
const {
|
|
9
|
-
|
|
18
|
+
const {
|
|
19
|
+
setExpandedGroups
|
|
20
|
+
} = states;
|
|
21
|
+
const unfrozenData = useMemo(() => cloneDeep(data), [data]); // convert data into a TreeModel with extra isExpanded prop
|
|
22
|
+
// root element type is an exception, children model is based on what the dev passed on
|
|
23
|
+
// since root is an excepcion we must typecast
|
|
24
|
+
|
|
10
25
|
const tree = useMemo(() => new TreeModel(), []);
|
|
11
26
|
const [treeData, setTreeData] = useState({
|
|
12
|
-
id:
|
|
13
|
-
name:
|
|
27
|
+
id: '__ds_tree_root',
|
|
28
|
+
name: '__root',
|
|
14
29
|
isExpanded: true,
|
|
15
30
|
children: unfrozenData
|
|
16
31
|
});
|
|
17
32
|
useEffect(() => {
|
|
18
33
|
setTreeData({
|
|
19
|
-
id:
|
|
20
|
-
name:
|
|
34
|
+
id: '__ds_tree_root',
|
|
35
|
+
name: '__root',
|
|
21
36
|
isExpanded: true,
|
|
22
37
|
children: unfrozenData
|
|
23
38
|
});
|
|
24
|
-
}, [unfrozenData]);
|
|
39
|
+
}, [unfrozenData]); // expose a way to rerender the tree
|
|
40
|
+
// used for expand functionality
|
|
41
|
+
|
|
25
42
|
const [rerenderItems, setRerenderItems] = useState({});
|
|
26
43
|
const triggerTreeRerender = useCallback(() => {
|
|
27
44
|
setRerenderItems({});
|
|
28
|
-
}, []);
|
|
45
|
+
}, []); // when re-rendering we re-parse the list
|
|
46
|
+
|
|
29
47
|
const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));
|
|
30
48
|
useEffect(() => {
|
|
31
49
|
setTreeRoot(tree.parse(treeData));
|
|
32
50
|
}, [treeData, rerenderItems, tree]);
|
|
33
51
|
const [visibleItems, setVisibleItems] = useState([]);
|
|
34
|
-
const {
|
|
52
|
+
const {
|
|
53
|
+
searchQuery,
|
|
54
|
+
highlightOnlyQuery,
|
|
55
|
+
onVisibleItemsChange,
|
|
56
|
+
selection,
|
|
57
|
+
expanded,
|
|
58
|
+
onExpandChange
|
|
59
|
+
} = props;
|
|
35
60
|
const updateUserExpandedState = useCallback(() => {
|
|
36
61
|
updateExpandedState(treeRoot, onExpandChange);
|
|
37
|
-
}, [treeRoot, onExpandChange]);
|
|
62
|
+
}, [treeRoot, onExpandChange]); // we add missing properties to the received Items
|
|
63
|
+
// not the best of the patterns, but it works
|
|
64
|
+
// this is where we convert "SimpleItems" to "Items"
|
|
65
|
+
// this was done to avoid breaking changes back in v1
|
|
66
|
+
|
|
38
67
|
useEffect(() => {
|
|
39
68
|
const parsedVisibleItems = [];
|
|
40
69
|
const newExpandedHashMap = {};
|
|
41
|
-
treeRoot.walk(
|
|
42
|
-
const shouldContinueWalking = true;
|
|
70
|
+
treeRoot.walk(node => {
|
|
71
|
+
const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
|
|
72
|
+
|
|
43
73
|
enrichNodeModelInPlace(node, searchQuery, selection, expanded);
|
|
44
|
-
if (node.model.id && node.model.isGroup && node.model.isExpanded)
|
|
45
|
-
newExpandedHashMap[node.model.id] = true;
|
|
74
|
+
if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
|
|
46
75
|
return shouldContinueWalking;
|
|
47
76
|
});
|
|
48
|
-
walkVisibles(treeRoot,
|
|
49
|
-
parsedVisibleItems.push({
|
|
77
|
+
walkVisibles(treeRoot, node => {
|
|
78
|
+
parsedVisibleItems.push(_objectSpread(_objectSpread({}, node.model), {}, {
|
|
79
|
+
node
|
|
80
|
+
}));
|
|
50
81
|
}, true, highlightOnlyQuery);
|
|
51
82
|
setVisibleItems(parsedVisibleItems);
|
|
52
83
|
onVisibleItemsChange(parsedVisibleItems);
|
|
53
|
-
setExpandedGroups(newExpandedHashMap);
|
|
54
|
-
}, [
|
|
55
|
-
treeRoot,
|
|
56
|
-
rerenderItems,
|
|
57
|
-
searchQuery,
|
|
58
|
-
highlightOnlyQuery,
|
|
59
|
-
selection,
|
|
60
|
-
expanded,
|
|
61
|
-
setExpandedGroups
|
|
84
|
+
setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
85
|
+
}, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
|
|
62
86
|
]);
|
|
63
87
|
return {
|
|
64
88
|
visibleItems,
|
|
@@ -69,7 +93,5 @@ const useTree = (data, props, states) => {
|
|
|
69
93
|
updateUserExpandedState
|
|
70
94
|
};
|
|
71
95
|
};
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
};
|
|
75
|
-
//# sourceMappingURL=useTree.js.map
|
|
96
|
+
|
|
97
|
+
export { useTree };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-treeview",
|
|
3
|
-
"version": "2.2.0-
|
|
3
|
+
"version": "2.2.0-beta.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tree View",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -211,15 +211,15 @@
|
|
|
211
211
|
"generateSubmodules": true
|
|
212
212
|
},
|
|
213
213
|
"dependencies": {
|
|
214
|
-
"@elliemae/ds-button": "2.2.0-
|
|
215
|
-
"@elliemae/ds-circular-progress-indicator": "2.2.0-
|
|
216
|
-
"@elliemae/ds-classnames": "2.2.0-
|
|
217
|
-
"@elliemae/ds-form": "2.2.0-
|
|
218
|
-
"@elliemae/ds-icons": "2.2.0-
|
|
219
|
-
"@elliemae/ds-props-helpers": "2.2.0-
|
|
220
|
-
"@elliemae/ds-shared": "2.2.0-
|
|
221
|
-
"@elliemae/ds-truncated-tooltip-text": "2.2.0-
|
|
222
|
-
"@elliemae/ds-utilities": "2.2.0-
|
|
214
|
+
"@elliemae/ds-button": "2.2.0-beta.0",
|
|
215
|
+
"@elliemae/ds-circular-progress-indicator": "2.2.0-beta.0",
|
|
216
|
+
"@elliemae/ds-classnames": "2.2.0-beta.0",
|
|
217
|
+
"@elliemae/ds-form": "2.2.0-beta.0",
|
|
218
|
+
"@elliemae/ds-icons": "2.2.0-beta.0",
|
|
219
|
+
"@elliemae/ds-props-helpers": "2.2.0-beta.0",
|
|
220
|
+
"@elliemae/ds-shared": "2.2.0-beta.0",
|
|
221
|
+
"@elliemae/ds-truncated-tooltip-text": "2.2.0-beta.0",
|
|
222
|
+
"@elliemae/ds-utilities": "2.2.0-beta.0",
|
|
223
223
|
"@elliemae/react-sortable-hoc": "^1.0.0",
|
|
224
224
|
"react-desc": "~4.1.3",
|
|
225
225
|
"react-highlight-words": "~0.17.0",
|
package/types/TreeView.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export declare namespace TreeView {
|
|
|
6
6
|
var propTypes: React.WeakValidationMap<unknown>;
|
|
7
7
|
}
|
|
8
8
|
declare const TreeViewWithSchema: {
|
|
9
|
-
(props?:
|
|
9
|
+
(props?: unknown): JSX.Element;
|
|
10
10
|
propTypes: unknown;
|
|
11
11
|
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
12
12
|
};
|
package/cjs/TreeView.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/TreeView.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAyC;AAEzC,wBAAyB;AACzB,mCAAkC;AAClC,6BAA4B;AAC5B,iBAAuC;AACvC,yBAA4B;AAC5B,sBAAyB;AAElB,kBAAkB,OAA0B;AACjD,QAAM,EAAE,YAAY;AAEpB,QAAM,EAAE,QAAQ,oCAAY;AAE5B,SACE,mDAAC,+BAAgB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAC9B,SAAS,SAAS,4BAAiB,mDAAC,oBAAD,QAAc,mDAAC,0BAAD;AAAA;AAKxD,SAAS,YAAY;AACrB,MAAM,qBAAqB,gCAAS;AACpC,mBAAmB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/TreeViewContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AAKzC,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,gCAAc;AAEtC,IAAO,0BAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/config/cssClassesConstants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSTreeViewPrefix = 'em-ds';\nexport const treeItemBlockName = 'tree-item';\nexport const treeListBlockName = 'tree-list';\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB,GAAG;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/config/useTreeview.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './TreeView';\nexport * from './plugins';\n\nexport { TreeViewSearchBar } from './related-components/TreeViewSearchBar';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAc;AAEd,+BAAkC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/parts/CheckboxSelectable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport styled from 'styled-components';\nimport TreeViewContext from '../TreeViewContext';\nimport { toggleCheckboxItem } from '../utils/selectable-helper';\nimport { filterObject } from '../utils/object-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nconst StyledCheckboxWrapper = styled.span`\n padding-top: 3px;\n`;\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n}\nfunction CheckboxSelectable(props: PropsT): JSX.Element | null {\n const { item, itemIndex } = props;\n const { id } = item;\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { onSelectionChange, isItemDisabled },\n virtualListHelpers: { scrollToIndex },\n triggerTreeRerender,\n selectedCheckboxes,\n setSelectedCheckboxes,\n } = ctx;\n\n const onCheckboxChange = useCallback(() => {\n const newSelections = toggleCheckboxItem(item);\n const newSelectionHasmap = filterObject<DSTreeviewT.SelectionState>(\n { ...selectedCheckboxes, ...newSelections },\n (value) => value !== false,\n );\n setSelectedCheckboxes(newSelectionHasmap);\n triggerTreeRerender();\n\n const indexAndScrollTo = {\n scrollToItem: () => {\n if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);\n },\n itemIndex,\n };\n if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n }, [\n item,\n triggerTreeRerender,\n onSelectionChange,\n itemIndex,\n scrollToIndex,\n selectedCheckboxes,\n setSelectedCheckboxes,\n ]);\n const isChecked = useMemo(() => {\n if (selectedCheckboxes[id] === 'mixed') {\n return 'mixed' as const;\n }\n if (selectedCheckboxes[id] === true) {\n return true;\n }\n return false;\n }, [selectedCheckboxes, id]);\n\n const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n return (\n <StyledCheckboxWrapper>\n <DSCheckbox\n checked={isChecked}\n disabled={isDisabled}\n className=\"em-ds-tree-item-checkbox\"\n data-testid=\"tree-item-checkbox\"\n onChange={onCheckboxChange}\n tabIndex=\"0\"\n />\n </StyledCheckboxWrapper>\n );\n}\n\nexport default CheckboxSelectable;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,qBAA2B;AAC3B,+BAAmB;AACnB,6BAA4B;AAC5B,+BAAmC;AACnC,4BAA6B;AAE7B,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAOrC,4BAA4B,OAAmC;AAC7D,QAAM,EAAE,MAAM,cAAc;AAC5B,QAAM,EAAE,OAAO;AAEf,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB;AAAA,IAC5B,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,mBAAmB,8BAAY,MAAM;AACzC,UAAM,gBAAgB,iDAAmB;AACzC,UAAM,qBAAqB,wCACzB,KAAK,uBAAuB,iBAC5B,CAAC,UAAU,UAAU;AAEvB,0BAAsB;AACtB;AAEA,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK;AAAA;AAAA,MAEhE;AAAA;AAEF,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM;AAAA,KAClE;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEF,QAAM,YAAY,0BAAQ,MAAM;AAC9B,QAAI,mBAAmB,QAAQ,SAAS;AACtC,aAAO;AAAA;AAET,QAAI,mBAAmB,QAAQ,MAAM;AACnC,aAAO;AAAA;AAET,WAAO;AAAA,KACN,CAAC,oBAAoB;AAExB,QAAM,aAAa,0BAAQ,MAAM,eAAe,OAAO,CAAC,MAAM;AAE9D,SACE,mDAAC,uBAAD,MACE,mDAAC,2BAAD;AAAA,IACE,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAS;AAAA;AAAA;AAMjB,IAAO,6BAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/parts/ChildrenCountDisplayer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer = (props: PropsT): JSX.Element | null => {\n const { item } = props;\n const { isGroup, children } = item;\n\n if (!isGroup) return null;\n // return ` | ${children.length} Items`;\n return (\n <span data-testid=\"tree-item-children-count-displayer\" className={className}>{` | ${children.length} Items`}</span>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,iCAAoD;AAGpD,MAAM,YAAY,GAAG,+CAAoB;AAMlC,MAAM,yBAAyB,CAAC,UAAsC;AAC3E,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,SAAS,aAAa;AAE9B,MAAI,CAAC;AAAS,WAAO;AAErB,SACE,mDAAC,QAAD;AAAA,IAAM,eAAY;AAAA,IAAqC;AAAA,KAAuB,MAAM,SAAS;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/parts/ExpandCaret.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\nimport { focusItem } from '../utils/tree-helpers';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ExpandCaret = (props: PropsT): JSX.Element | null => {\n const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);\n const { item } = props;\n const { id, isExpanded, isGroup, children } = item;\n const isGroupOrHasChildrens = isGroup || (Array.isArray(children) && children.length > 0);\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus },\n handleExpandGroup = defaultHandleExpandGroup,\n triggerTreeRerender,\n updateUserExpandedState,\n setLatestToggledItem,\n setFocusedItem,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n\n if (isGroupOrHasChildrens)\n return (\n <Button\n buttonType=\"text\"\n className=\"expandable-arrow\"\n data-testid=\"tree-item-expand-toggle\"\n key={`${id}-expand-addon`}\n icon={\n isExpanded ? (\n <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" />\n ) : (\n <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" />\n )\n }\n onMouseDown={(e: React.MouseEvent) => {\n // prevent focusing the caret\n if (e) {\n e.preventDefault();\n }\n }}\n onClick={(e) => {\n e.stopPropagation();\n if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);\n setLatestToggledItem(item);\n const itemVitualIndex = item.virtualIndex;\n if (typeof itemVitualIndex === 'number') {\n onItemFocus({\n itemIndex: itemVitualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVitualIndex, opts),\n item,\n });\n }\n setFocusedItem(item);\n focusItem(item);\n }}\n size=\"s\"\n tabIndex={-1}\n />\n );\n return <div style={{ width: '24px' }} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAC/C,uBAAmB;AACnB,sBAA8C;AAC9C,mCAAiC;AACjC,0BAA0B;AAC1B,6BAA4B;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,8BAAY,+CAAkB;AAC/D,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,aAAa;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,aAAa,SAAS,SAAS;AACvF,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE;AAAA,MACpB;AAEJ,MAAI;AACF,WACE,mDAAC,0BAAD;AAAA,MACE,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,KAAK,GAAG;AAAA,MACR,MACE,aACE,mDAAC,+BAAD;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,WAEpC,mDAAC,gCAAD;AAAA,QAAgB,MAAK;AAAA,QAAI,eAAY;AAAA;AAAA,MAGzC,aAAa,CAAC,MAAwB;AAEpC,YAAI,GAAG;AACL,YAAE;AAAA;AAAA;AAAA,MAGN,SAAS,CAAC,MAAM;AACd,UAAE;AACF,YAAI;AAAG,4BAAkB,MAAM,qBAAqB,yBAAyB,eAAe;AAC5F,6BAAqB;AACrB,cAAM,kBAAkB,KAAK;AAC7B,YAAI,OAAO,oBAAoB,UAAU;AACvC,sBAAY;AAAA,YACV,WAAW;AAAA,YACX,cAAc,CAAC,OAAO,EAAE,OAAO,cAAc,cAAc,iBAAiB;AAAA,YAC5E;AAAA;AAAA;AAGJ,uBAAe;AACf,2CAAU;AAAA;AAAA,MAEZ,MAAK;AAAA,MACL,UAAU;AAAA;AAGhB,SAAO,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/parts/Icon.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/parts/Icon.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { cx } from '@elliemae/ds-utilities';\n\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\nexport const Icon = (props: PropsT): JSX.Element | null => {\n const { item } = props;\n const isGroupOrHasChildrens = item.isGroup || (Array.isArray(item.children) && item.children.length > 0);\n const ctx = useContext(TreeViewContext);\n const {\n props: { groupIcon, itemIcon },\n } = ctx;\n const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;\n if (!icon) return null;\n\n return React.cloneElement(icon, {\n 'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',\n // legacy class-name way of handling things,\n // this will eventually be deprecated in favor of styled components\n // untill then, just eslint-ignore and move on\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n className: cx(icon.props.className, 'tree-item-icon'),\n });\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,0BAAmB;AAEnB,6BAA4B;AAKrB,MAAM,OAAO,CAAC,UAAsC;AACzD,QAAM,EAAE,SAAS;AACjB,QAAM,wBAAwB,KAAK,WAAY,MAAM,QAAQ,KAAK,aAAa,KAAK,SAAS,SAAS;AACtG,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW;AAAA,MAClB;AACJ,QAAM,OAAO,wBAAwB,YAAY;AACjD,MAAI,CAAC;AAAM,WAAO;AAElB,SAAO,qBAAM,aAAa,MAAM;AAAA,IAC9B,eAAe,wBAAwB,yBAAyB;AAAA,IAKhE,WAAW,4BAAG,KAAK,MAAM,WAAW;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
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,7 +0,0 @@
|
|
|
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,7 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/parts/TreeItemText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useContext } from 'react';\nimport Highlighter from 'react-highlight-words';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport { ChildrenCountDisplayer } from './ChildrenCountDisplayer';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\n\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst ItemContent = aggregatedClasses('div')(`${treeItemBlockName}-content`) as unknown as React.ComponentType<\n React.ComponentProps<'div'>\n>;\nconst ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value') as unknown as React.ComponentType<\n React.ComponentProps<'span'>\n>;\n\n// const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;\nconst classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;\nconst classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`;\n\n// eslint-disable-next-line react/prop-types\nconst CustomHighlight = ({ children }: { children: React.ReactNode }) => (\n <mark className=\"tree-text-highlight\" data-testid=\"tree-text-highlight\">\n {children}\n </mark>\n);\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\nexport function TreeItemText(props: PropsT): JSX.Element {\n const { item } = props;\n const ctx = useContext(TreeViewContext);\n const {\n props: { searchQuery, showChildrenAmount, labelOverflow, nameKey },\n } = ctx;\n\n const Text = useMemo(() => {\n const itemLabelText = item[nameKey] as DSTreeviewT.Item['name'];\n if (searchQuery) {\n if (labelOverflow === 'truncate') {\n return (\n <SimpleTruncatedTooltipText\n value={\n <>\n <Highlighter\n autoEscape\n highlightTag={CustomHighlight}\n searchWords={[searchQuery]}\n textToHighlight={itemLabelText}\n />\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n }\n />\n );\n }\n return (\n <>\n <Highlighter\n autoEscape\n highlightTag={CustomHighlight}\n searchWords={[searchQuery]}\n textToHighlight={itemLabelText}\n />\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n );\n }\n if (labelOverflow === 'truncate') {\n return (\n <SimpleTruncatedTooltipText\n value={\n <>\n {itemLabelText}\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n }\n />\n );\n }\n return (\n <>\n {itemLabelText}\n {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n </>\n );\n }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);\n\n let className = '';\n if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;\n if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;\n\n return (\n <ItemContent data-testid={`${treeItemBlockName}-content`}>\n <ItemValue className={className}>{Text}</ItemValue>\n </ItemContent>\n );\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA2C;AAC3C,mCAAwB;AACxB,uCAA2C;AAC3C,2BAAkC;AAElC,oCAAuC;AACvC,iCAAoD;AAEpD,6BAA4B;AAG5B,MAAM,cAAc,4CAAkB,OAAO,GAAG;AAGhD,MAAM,YAAY,4CAAkB,QAAQ,8CAAmB;AAK/D,MAAM,2BAA2B,GAAG,+CAAoB;AACxD,MAAM,4BAA4B,GAAG,+CAAoB;AAGzD,MAAM,kBAAkB,CAAC,EAAE,eACzB,mDAAC,QAAD;AAAA,EAAM,WAAU;AAAA,EAAsB,eAAY;AAAA,GAC/C;AAME,sBAAsB,OAA4B;AACvD,QAAM,EAAE,SAAS;AACjB,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,oBAAoB,eAAe;AAAA,MACvD;AAEJ,QAAM,OAAO,0BAAQ,MAAM;AACzB,UAAM,gBAAgB,KAAK;AAC3B,QAAI,aAAa;AACf,UAAI,kBAAkB,YAAY;AAChC,eACE,mDAAC,6DAAD;AAAA,UACE,OACE,wFACE,mDAAC,sCAAD;AAAA,YACE,YAAU;AAAA,YACV,cAAc;AAAA,YACd,aAAa,CAAC;AAAA,YACd,iBAAiB;AAAA,cAElB,qBAAqB,mDAAC,sDAAD;AAAA,YAAwB;AAAA,eAAiB;AAAA;AAAA;AAMzE,aACE,wFACE,mDAAC,sCAAD;AAAA,QACE,YAAU;AAAA,QACV,cAAc;AAAA,QACd,aAAa,CAAC;AAAA,QACd,iBAAiB;AAAA,UAElB,qBAAqB,mDAAC,sDAAD;AAAA,QAAwB;AAAA,WAAiB;AAAA;AAIrE,QAAI,kBAAkB,YAAY;AAChC,aACE,mDAAC,6DAAD;AAAA,QACE,OACE,wFACG,eACA,qBAAqB,mDAAC,sDAAD;AAAA,UAAwB;AAAA,aAAiB;AAAA;AAAA;AAMzE,WACE,wFACG,eACA,qBAAqB,mDAAC,sDAAD;AAAA,MAAwB;AAAA,SAAiB;AAAA,KAGlE,CAAC,MAAM,aAAa,SAAS,oBAAoB;AAEpD,MAAI,YAAY;AAChB,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAClD,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAElD,SACE,mDAAC,aAAD;AAAA,IAAa,eAAa,GAAG;AAAA,KAC3B,mDAAC,WAAD;AAAA,IAAW;AAAA,KAAuB;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/parts/TreeList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { SortableContainer } from '@elliemae/react-sortable-hoc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nimport TreeViewContext from '../TreeViewContext';\nimport { DSTreeViewPrefix, treeListBlockName } from '../config/cssClassesConstants';\nimport { TreeItem, DragAndDropTreeItem } from './TreeItem';\n\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\nexport const TreeListNoItems = aggregatedClasses('div', {\n 'data-testid': treeListNoItemsBn,\n})(treeListNoItemsBn) as unknown as React.ComponentType<React.ComponentProps<'div'>>;\n\n// React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era\n// we omit the LegacyRef typings in favor of hook-era typings\ninterface UlProps extends Omit<React.ComponentProps<'ul'>, 'ref'> {\n ref: React.MutableRefObject<HTMLUListElement | undefined> | undefined;\n}\nexport const TreeListWrapper = aggregatedClasses('ul', {\n 'data-testid': treeListBlockName,\n role: 'tree',\n})(treeListBlockName, null, ({ rowSize }: { rowSize: 'normal' | 'compact' }) => ({\n [`rowsize-${rowSize}`]: rowSize,\n})) as unknown as React.ComponentType<UlProps>;\n\nconst compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;\nconst normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;\n\ninterface PropsT {\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}\n\nexport const TreeList = (props: PropsT) => {\n const { onMouseDragOverItem } = props;\n const ctx = useContext(TreeViewContext);\n const {\n virtualListRef,\n virtualListHelpers,\n visibleItems,\n withDragAndDrop,\n props: { width, height, rowSize, noItemsPlaceholder, isLoading },\n } = ctx;\n const { totalSize, virtualItems } = virtualListHelpers;\n const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;\n\n return (\n <TreeListWrapper\n ref={virtualListRef}\n className={className}\n style={{\n height: `${typeof height === 'number' ? `${height}px` : height}`,\n width: `${typeof width === 'number' ? `${width}px` : width}`,\n overflow: 'auto',\n }}\n >\n {isLoading ? (\n <div\n style={{\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <DSCircularProgressIndicator size=\"xl\" loading={isLoading} showLabel waiting={false} showTooltip={false} />\n </div>\n ) : null}\n {!isLoading && virtualItems.length === 0 ? <TreeListNoItems>{noItemsPlaceholder}</TreeListNoItems> : null}\n {!isLoading && virtualItems.length !== 0 ? (\n <div\n style={{\n height: `${totalSize}px`,\n width: '100%',\n position: 'relative',\n }}\n >\n {virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const item = visibleItems[index];\n item.virtualIndex = index;\n const { id } = item;\n\n const style = {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${start}px)`,\n };\n\n const listItemProps = {\n key: `DS-TreeView-List-Item-${id}`,\n virtualItemRef: measureRef,\n index, // this is consumed by the DnD HOC\n itemIndex: index,\n item,\n itemWrapperStyle: style,\n };\n\n if (withDragAndDrop)\n return <DragAndDropTreeItem {...listItemProps} onMouseDragOverItem={onMouseDragOverItem} />;\n return <TreeItem {...listItemProps} />;\n })}\n </div>\n ) : null}\n </TreeListWrapper>\n );\n};\ntype SortablePropsT = PropsT & {\n disableAnimation?: boolean;\n getContainer: (element: React.ReactElement<unknown>) => HTMLElement | Promise<HTMLElement>;\n};\nexport const DragAndDropTreeList = SortableContainer<SortablePropsT>(TreeList);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,gCAAkC;AAClC,2BAAkC;AAClC,4CAA4C;AAE5C,6BAA4B;AAC5B,iCAAoD;AACpD,sBAA8C;AAIvC,MAAM,oBAAoB,GAAG;AAC7B,MAAM,kBAAkB,4CAAkB,OAAO;AAAA,EACtD,eAAe;AAAA,GACd;AAOI,MAAM,kBAAkB,4CAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AAAA,GACL,8CAAmB,MAAM,CAAC,EAAE,cAAkD;AAAA,GAC9E,WAAW,YAAY;AAAA;AAG1B,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AAYlB,MAAM,WAAW,CAAC,UAAkB;AACzC,QAAM,EAAE,wBAAwB;AAChC,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,QAAQ,SAAS,oBAAoB;AAAA,MACnD;AACJ,QAAM,EAAE,WAAW,iBAAiB;AACpC,QAAM,YAAY,GAAG,YAAY,YAAY,GAAG,oBAAoB,GAAG;AAEvE,SACE,mDAAC,iBAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAQ,GAAG,OAAO,WAAW,WAAW,GAAG,aAAa;AAAA,MACxD,OAAO,GAAG,OAAO,UAAU,WAAW,GAAG,YAAY;AAAA,MACrD,UAAU;AAAA;AAAA,KAGX,YACC,mDAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,KAGlB,mDAAC,mEAAD;AAAA,IAA6B,MAAK;AAAA,IAAK,SAAS;AAAA,IAAW,WAAS;AAAA,IAAC,SAAS;AAAA,IAAO,aAAa;AAAA,QAElG,MACH,CAAC,aAAa,aAAa,WAAW,IAAI,mDAAC,iBAAD,MAAkB,sBAAwC,MACpG,CAAC,aAAa,aAAa,WAAW,IACrC,mDAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,QAAQ,GAAG;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA;AAAA,KAGX,aAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,UAAU;AACrC,UAAM,OAAO,aAAa;AAC1B,SAAK,eAAe;AACpB,UAAM,EAAE,OAAO;AAEf,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW,cAAc;AAAA;AAG3B,UAAM,gBAAgB;AAAA,MACpB,KAAK,yBAAyB;AAAA,MAC9B,gBAAgB;AAAA,MAChB;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,kBAAkB;AAAA;AAGpB,QAAI;AACF,aAAO,mDAAC,qCAAD;AAAA,WAAyB;AAAA,QAAe;AAAA;AACjD,WAAO,mDAAC,0BAAD;AAAA,SAAc;AAAA;AAAA,QAGvB;AAAA;AAQH,MAAM,sBAAsB,iDAAkC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/dnd/TreeDndPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\n\nimport { DragAndDropTreeList } from '../../parts/TreeList';\n\nimport { useDnDHelpers } from '../../utils/useDnDHelpers';\nimport { keyCodes } from '../../utils/dnd-helpers';\n\nimport TreeViewContext from '../../TreeViewContext';\nexport const TreeDnD = () => {\n const { updateBeforeSortStart, onSortStart, onMouseDragOverItem, onSortEnd } = useDnDHelpers();\n const ctx = useContext(TreeViewContext);\n const { virtualListRef } = ctx;\n return (\n <DragAndDropTreeList\n useDragHandle\n transitionDuration={0}\n keyboardSortingTransitionDuration={0}\n hideSortableGhost={false}\n disableAnimation\n updateBeforeSortStart={updateBeforeSortStart}\n onSortStart={onSortStart}\n onMouseDragOverItem={onMouseDragOverItem}\n onSortEnd={onSortEnd}\n getContainer={() => virtualListRef?.current as HTMLUListElement}\n keyCodes={keyCodes}\n />\n );\n};\n\nexport const TreeDndPlugin = 'tree-dnd';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAElC,sBAAoC;AAEpC,2BAA8B;AAC9B,yBAAyB;AAEzB,6BAA4B;AACrB,MAAM,UAAU,MAAM;AAC3B,QAAM,EAAE,uBAAuB,aAAa,qBAAqB,cAAc;AAC/E,QAAM,MAAM,6BAAW;AACvB,QAAM,EAAE,mBAAmB;AAC3B,SACE,mDAAC,qCAAD;AAAA,IACE,eAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,mCAAmC;AAAA,IACnC,mBAAmB;AAAA,IACnB,kBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,MAAM,gBAAgB;AAAA,IACpC,UAAU;AAAA;AAAA;AAKT,MAAM,gBAAgB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/dnd/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './TreeDndPlugin';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,wBAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/plugins/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/plugins/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './dnd';\nexport * from './roving';\nexport * from './selectable';\nexport * from './toolbar';\nexport * from './tree';\nexport * from './virtualization';\nexport * from './searchable';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,4BAAc;AACd,4BAAc;AACd,4BAAc;AACd,4BAAc;AACd,4BAAc;AACd,4BAAc;AACd,4BAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/roving/TreeRovingPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const TreeRovingPlugin = 'tree-roving';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/roving/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './TreeRovingPlugin';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,2BAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/searchable/SearchableTreePlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const SearchableTreePlugin = 'tree-searchable';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,uBAAuB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/searchable/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './SearchableTreePlugin';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,+BAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/selectable/SelectablePluginTree.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const SelectablePluginTree = 'tree-selectable';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,uBAAuB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/selectable/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './SelectablePluginTree';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,+BAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/toolbar/TreeToolbarPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const TreeToolbarPlugin = 'tree-toolbar';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,oBAAoB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/plugins/toolbar/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './TreeToolbarPlugin';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,4BAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|