@elliemae/ds-treeview 3.4.2 → 3.4.3
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/dist/cjs/TreeView.js +9 -5
- package/dist/cjs/TreeView.js.map +2 -2
- package/dist/cjs/TreeViewContext.js +4 -1
- package/dist/cjs/TreeViewContext.js.map +1 -1
- package/dist/cjs/config/cssClassesConstants.js +4 -1
- package/dist/cjs/config/cssClassesConstants.js.map +1 -1
- package/dist/cjs/config/useTreeview.js +62 -52
- package/dist/cjs/config/useTreeview.js.map +2 -2
- package/dist/cjs/hoc/DnDTreeContext.js +4 -1
- package/dist/cjs/hoc/DnDTreeContext.js.map +1 -1
- package/dist/cjs/hoc/SortableItemContext.js +4 -1
- package/dist/cjs/hoc/SortableItemContext.js.map +2 -2
- package/dist/cjs/hoc/WithConditionalDnDContext.js +67 -50
- package/dist/cjs/hoc/WithConditionalDnDContext.js.map +2 -2
- package/dist/cjs/hoc/WithDnDSortableItemContext.js +24 -13
- package/dist/cjs/hoc/WithDnDSortableItemContext.js.map +2 -2
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/CheckboxSelectable.js +20 -11
- package/dist/cjs/parts/CheckboxSelectable.js.map +2 -2
- package/dist/cjs/parts/ChildrenCountDisplayer.js +12 -5
- package/dist/cjs/parts/ChildrenCountDisplayer.js.map +1 -1
- package/dist/cjs/parts/DnDHandle.js +7 -3
- package/dist/cjs/parts/DnDHandle.js.map +1 -1
- package/dist/cjs/parts/DropIndicator.js +27 -16
- package/dist/cjs/parts/DropIndicator.js.map +1 -1
- package/dist/cjs/parts/ExpandCaret.js +11 -8
- package/dist/cjs/parts/ExpandCaret.js.map +2 -2
- package/dist/cjs/parts/Icon.js +4 -1
- package/dist/cjs/parts/Icon.js.map +2 -2
- package/dist/cjs/parts/NestingSpace.js +6 -3
- package/dist/cjs/parts/NestingSpace.js.map +1 -1
- package/dist/cjs/parts/RadioSelectable.js +7 -3
- package/dist/cjs/parts/RadioSelectable.js.map +2 -2
- package/dist/cjs/parts/TreeItem.js +89 -49
- package/dist/cjs/parts/TreeItem.js.map +2 -2
- package/dist/cjs/parts/TreeItemText.js +58 -31
- package/dist/cjs/parts/TreeItemText.js.map +2 -2
- package/dist/cjs/parts/TreeList.js +62 -49
- package/dist/cjs/parts/TreeList.js.map +2 -2
- package/dist/cjs/plugins/dnd/TreeDndPlugin.js +4 -1
- package/dist/cjs/plugins/dnd/TreeDndPlugin.js.map +1 -1
- package/dist/cjs/plugins/dnd/index.js +4 -1
- package/dist/cjs/plugins/dnd/index.js.map +1 -1
- package/dist/cjs/plugins/index.js +4 -1
- package/dist/cjs/plugins/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +16 -9
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/related-components/TreeViewSearchBar.js +6 -3
- package/dist/cjs/related-components/TreeViewSearchBar.js.map +1 -1
- package/dist/cjs/sharedTypes.js +4 -1
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/cjs/utils/array-helpers.js +4 -1
- package/dist/cjs/utils/array-helpers.js.map +1 -1
- package/dist/cjs/utils/group-expands-helpers.js +8 -2
- package/dist/cjs/utils/group-expands-helpers.js.map +1 -1
- package/dist/cjs/utils/keyboard-helpers.js +104 -92
- package/dist/cjs/utils/keyboard-helpers.js.map +2 -2
- package/dist/cjs/utils/object-helpers.js +4 -1
- package/dist/cjs/utils/object-helpers.js.map +1 -1
- package/dist/cjs/utils/refs-helpers.js +4 -1
- package/dist/cjs/utils/refs-helpers.js.map +1 -1
- package/dist/cjs/utils/selectable-helper.js +4 -1
- package/dist/cjs/utils/selectable-helper.js.map +1 -1
- package/dist/cjs/utils/string-helpers.js +4 -1
- package/dist/cjs/utils/string-helpers.js.map +1 -1
- package/dist/cjs/utils/tree-helpers.js +8 -2
- package/dist/cjs/utils/tree-helpers.js.map +1 -1
- package/dist/cjs/utils/useInstanceRefActions.js +50 -35
- package/dist/cjs/utils/useInstanceRefActions.js.map +1 -1
- package/dist/cjs/utils/useTree.js +12 -4
- package/dist/cjs/utils/useTree.js.map +2 -2
- package/dist/esm/TreeView.js +5 -4
- package/dist/esm/TreeView.js.map +1 -1
- package/dist/esm/TreeViewContext.js.map +1 -1
- package/dist/esm/config/cssClassesConstants.js.map +1 -1
- package/dist/esm/config/useTreeview.js +58 -51
- package/dist/esm/config/useTreeview.js.map +1 -1
- package/dist/esm/hoc/DnDTreeContext.js.map +1 -1
- package/dist/esm/hoc/SortableItemContext.js.map +2 -2
- package/dist/esm/hoc/WithConditionalDnDContext.js +63 -49
- package/dist/esm/hoc/WithConditionalDnDContext.js.map +1 -1
- package/dist/esm/hoc/WithDnDSortableItemContext.js +20 -12
- package/dist/esm/hoc/WithDnDSortableItemContext.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/CheckboxSelectable.js +16 -10
- package/dist/esm/parts/CheckboxSelectable.js.map +1 -1
- package/dist/esm/parts/ChildrenCountDisplayer.js +8 -4
- package/dist/esm/parts/ChildrenCountDisplayer.js.map +1 -1
- package/dist/esm/parts/DnDHandle.js +3 -2
- package/dist/esm/parts/DnDHandle.js.map +1 -1
- package/dist/esm/parts/DropIndicator.js +23 -15
- package/dist/esm/parts/DropIndicator.js.map +1 -1
- package/dist/esm/parts/ExpandCaret.js +7 -7
- package/dist/esm/parts/ExpandCaret.js.map +1 -1
- package/dist/esm/parts/Icon.js.map +2 -2
- package/dist/esm/parts/NestingSpace.js +2 -2
- package/dist/esm/parts/NestingSpace.js.map +1 -1
- package/dist/esm/parts/RadioSelectable.js +3 -2
- package/dist/esm/parts/RadioSelectable.js.map +1 -1
- package/dist/esm/parts/TreeItem.js +85 -48
- package/dist/esm/parts/TreeItem.js.map +1 -1
- package/dist/esm/parts/TreeItemText.js +54 -30
- package/dist/esm/parts/TreeItemText.js.map +1 -1
- package/dist/esm/parts/TreeList.js +58 -48
- package/dist/esm/parts/TreeList.js.map +1 -1
- package/dist/esm/plugins/dnd/TreeDndPlugin.js.map +1 -1
- package/dist/esm/plugins/dnd/index.js.map +1 -1
- package/dist/esm/plugins/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +12 -8
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/related-components/TreeViewSearchBar.js +2 -2
- package/dist/esm/related-components/TreeViewSearchBar.js.map +1 -1
- package/dist/esm/sharedTypes.js.map +1 -1
- package/dist/esm/utils/array-helpers.js.map +1 -1
- package/dist/esm/utils/group-expands-helpers.js +4 -1
- package/dist/esm/utils/group-expands-helpers.js.map +1 -1
- package/dist/esm/utils/keyboard-helpers.js +100 -91
- package/dist/esm/utils/keyboard-helpers.js.map +1 -1
- package/dist/esm/utils/object-helpers.js.map +1 -1
- package/dist/esm/utils/refs-helpers.js.map +1 -1
- package/dist/esm/utils/selectable-helper.js.map +1 -1
- package/dist/esm/utils/string-helpers.js.map +1 -1
- package/dist/esm/utils/tree-helpers.js +4 -1
- package/dist/esm/utils/tree-helpers.js.map +1 -1
- package/dist/esm/utils/useInstanceRefActions.js +46 -34
- package/dist/esm/utils/useInstanceRefActions.js.map +1 -1
- package/dist/esm/utils/useTree.js +8 -3
- package/dist/esm/utils/useTree.js.map +1 -1
- package/package.json +10 -10
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
|
|
3
4
|
import { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from "@elliemae/ds-drag-and-drop";
|
|
4
5
|
import TreeViewContext from "../TreeViewContext";
|
|
5
6
|
import { TreeItem } from "../parts/TreeItem";
|
|
@@ -21,32 +22,38 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
21
22
|
visibleItems: flattenedVisibleTree,
|
|
22
23
|
withDragAndDrop
|
|
23
24
|
} = useContext(TreeViewContext);
|
|
24
|
-
const flattenedVisibleTreeForDnD = useMemo(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
nodes
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
25
|
+
const flattenedVisibleTreeForDnD = useMemo(
|
|
26
|
+
() => flattenedVisibleTree.map((item, index) => ({
|
|
27
|
+
uid: item.id.toString(),
|
|
28
|
+
depth: (item.treeDepth ?? 1) - 1,
|
|
29
|
+
realIndex: index,
|
|
30
|
+
childrenCount: item.children?.length ?? 0,
|
|
31
|
+
parentId: item.node.parent?.model?.id?.toString() ?? null,
|
|
32
|
+
original: item
|
|
33
|
+
})),
|
|
34
|
+
[flattenedVisibleTree]
|
|
35
|
+
);
|
|
36
|
+
const onReorder = useCallback(
|
|
37
|
+
(tree, indexes) => {
|
|
38
|
+
const nodes = {};
|
|
39
|
+
tree.forEach((item) => {
|
|
40
|
+
const originalItem = item.original.model;
|
|
41
|
+
originalItem.children = [];
|
|
42
|
+
nodes[item.uid] = originalItem;
|
|
43
|
+
});
|
|
44
|
+
const newUserTree = [];
|
|
45
|
+
tree.forEach((item) => {
|
|
46
|
+
if (item.parentId !== null && item.parentId !== void 0 && item.parentId !== "__ds_tree_root") {
|
|
47
|
+
const parentNode = nodes[item.parentId];
|
|
48
|
+
parentNode.children?.push(item.original.model);
|
|
49
|
+
} else if (item.uid !== "__ds_tree_root") {
|
|
50
|
+
newUserTree.push(item.original.model);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);
|
|
54
|
+
},
|
|
55
|
+
[onOrderChange, data, flattenedItems]
|
|
56
|
+
);
|
|
50
57
|
const {
|
|
51
58
|
dndContextProps,
|
|
52
59
|
sortableContextProps,
|
|
@@ -83,28 +90,35 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
83
90
|
}
|
|
84
91
|
}, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);
|
|
85
92
|
if (withDragAndDrop)
|
|
86
|
-
return /* @__PURE__ */
|
|
87
|
-
...dndContextProps
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
93
|
+
return /* @__PURE__ */ jsxs(DndContext, {
|
|
94
|
+
...dndContextProps,
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ jsx(SortableContext, {
|
|
97
|
+
...sortableContextProps,
|
|
98
|
+
children: /* @__PURE__ */ jsx(DnDTreeContext.Provider, {
|
|
99
|
+
value: {
|
|
100
|
+
activeIndex,
|
|
101
|
+
depth,
|
|
102
|
+
visibleItems: visibleItems.map((item) => item.original),
|
|
103
|
+
dropIndicatorPosition,
|
|
104
|
+
isDropValid
|
|
105
|
+
},
|
|
106
|
+
children: /* @__PURE__ */ jsx(Component, {
|
|
107
|
+
...props
|
|
108
|
+
})
|
|
109
|
+
})
|
|
110
|
+
}),
|
|
111
|
+
/* @__PURE__ */ jsx(DragOverlay, {
|
|
112
|
+
style: { width: "auto" },
|
|
113
|
+
children: activeId ? /* @__PURE__ */ jsx(TreeItem, {
|
|
114
|
+
itemIndex: activeIndex,
|
|
115
|
+
item: ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId)),
|
|
116
|
+
isDragOverlay: true
|
|
117
|
+
}) : null
|
|
118
|
+
})
|
|
119
|
+
]
|
|
120
|
+
});
|
|
121
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
108
122
|
...props
|
|
109
123
|
});
|
|
110
124
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/WithConditionalDnDContext.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport TreeViewContext from '../TreeViewContext';\nimport { TreeItem } from '../parts/TreeItem';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DropIndicatorPosition } from './SortableItemContext';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n if (argument === undefined || argument === null) {\n throw new TypeError(message);\n }\n\n return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const {\n props: { data, onOrderChange, getIsDropValid },\n flattenedItems,\n updateUserExpandedState,\n triggerTreeRerender,\n visibleItems: flattenedVisibleTree,\n withDragAndDrop,\n } = useContext(TreeViewContext);\n\n const flattenedVisibleTreeForDnD = useMemo(\n () =>\n flattenedVisibleTree.map((item, index) => ({\n uid: item.id.toString(),\n depth: (item.treeDepth ?? 1) - 1,\n realIndex: index,\n childrenCount: item.children?.length ?? 0,\n parentId: item.node.parent?.model?.id?.toString() ?? null,\n original: item,\n })),\n [flattenedVisibleTree],\n );\n\n const onReorder = useCallback(\n (tree: DSTreeviewT.DndItem[], indexes: { targetIndex: number; fromIndex: number }) => {\n // Pull the row's original data into an object\n const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n tree.forEach((item) => {\n const originalItem = item.original.model;\n originalItem.children = [];\n nodes[item.uid] = originalItem;\n });\n\n const newUserTree: DSTreeviewT.SimpleItem[] = [];\n tree.forEach((item) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n const parentNode = nodes[item.parentId];\n parentNode.children?.push(item.original.model);\n } else if (item.uid !== '__ds_tree_root') {\n newUserTree.push(item.original.model);\n }\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);\n },\n [onOrderChange, data, flattenedItems],\n );\n\n const {\n dndContextProps,\n sortableContextProps,\n activeId,\n activeIndex,\n depth,\n dropIndicatorPosition,\n visibleItems,\n isDropValid,\n overId,\n } = useTreeDndkitConfig({\n flattenedItems,\n visibleItems: flattenedVisibleTreeForDnD,\n isHorizontalDnD: false,\n isExpandable: true,\n onReorder,\n getIsDropValid,\n maxDragAndDropLevel: Infinity,\n });\n\n const timeoutRef = useRef<NodeJS.Timeout>();\n\n useEffect(() => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n if (dropIndicatorPosition === DropIndicatorPosition.Inside && overId) {\n timeoutRef.current = setTimeout(() => {\n const overItem = visibleItems.find((item) => item.uid === overId);\n if (overItem) {\n const realOverItem = overItem.original;\n if (realOverItem.isGroup && !realOverItem.isExpanded) {\n toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);\n }\n }\n }, 1000);\n }\n }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);\n\n if (withDragAndDrop)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...sortableContextProps}>\n <DnDTreeContext.Provider\n value={{\n activeIndex,\n depth,\n visibleItems: visibleItems.map((item) => item.original),\n dropIndicatorPosition,\n isDropValid,\n }}\n >\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n <DragOverlay style={{ width: 'auto' }}>\n {activeId ? (\n <TreeItem\n itemIndex={activeIndex}\n item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId))}\n isDragOverlay\n />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useContext, useMemo } from "react";
|
|
3
4
|
import { useSortable } from "@elliemae/ds-drag-and-drop";
|
|
4
5
|
import { SortableItemContext } from "./SortableItemContext";
|
|
5
6
|
import TreeViewContext from "../TreeViewContext";
|
|
@@ -8,9 +9,12 @@ const withDnDSortableItemContext = (Component) => (props) => {
|
|
|
8
9
|
const { withDragAndDrop } = useContext(TreeViewContext);
|
|
9
10
|
const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);
|
|
10
11
|
const id = props.item.id.toString();
|
|
11
|
-
const draggableOptions = useMemo(
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
const draggableOptions = useMemo(
|
|
13
|
+
() => ({
|
|
14
|
+
id
|
|
15
|
+
}),
|
|
16
|
+
[id]
|
|
17
|
+
);
|
|
14
18
|
const useSortableHelpers = useSortable(draggableOptions);
|
|
15
19
|
const draggableProps = useMemo(() => {
|
|
16
20
|
if (!withDragAndDrop)
|
|
@@ -23,14 +27,18 @@ const withDnDSortableItemContext = (Component) => (props) => {
|
|
|
23
27
|
isDropValid
|
|
24
28
|
};
|
|
25
29
|
}, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, isDropValid]);
|
|
26
|
-
const ctx = useMemo(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
const ctx = useMemo(
|
|
31
|
+
() => ({
|
|
32
|
+
draggableProps
|
|
33
|
+
}),
|
|
34
|
+
[draggableProps]
|
|
35
|
+
);
|
|
36
|
+
return /* @__PURE__ */ jsx(SortableItemContext.Provider, {
|
|
37
|
+
value: ctx,
|
|
38
|
+
children: /* @__PURE__ */ jsx(Component, {
|
|
39
|
+
...props
|
|
40
|
+
})
|
|
41
|
+
});
|
|
34
42
|
};
|
|
35
43
|
export {
|
|
36
44
|
withDnDSortableItemContext
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/WithDnDSortableItemContext.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { SortableItemContext, SortableItemContextType } from './SortableItemContext';\nimport TreeViewContext from '../TreeViewContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nexport const withDnDSortableItemContext: FunctionalHOC = (Component) => (props: any) => {\n const { withDragAndDrop } = useContext(TreeViewContext);\n const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n const id = (props as { item: DSTreeviewT.Item }).item.id.toString();\n\n // onMount generate unique options, so everyting is only ran once\n const draggableOptions = useMemo(\n () => ({\n id,\n }),\n [id],\n );\n\n const useSortableHelpers = useSortable(draggableOptions);\n\n // calculate all the \"useSortable\" values as per required\n const draggableProps = useMemo(() => {\n if (!withDragAndDrop) return false;\n\n const { index, overIndex } = useSortableHelpers;\n\n return {\n ...useSortableHelpers,\n shouldShowDropIndicatorPosition: overIndex === index,\n dropIndicatorPosition,\n isDropValid,\n };\n }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, isDropValid]);\n\n // we use a context so we can easly access information wherever without bubbling down\n // this context is all Memoized so as long as component is not re-mounted,\n // the context won't trigger un-required renders per-se...\n const ctx: SortableItemContextType = useMemo(\n () => ({\n draggableProps,\n }),\n [draggableProps],\n );\n // we always add the context, if draggableProps===false we don't have the DnD enabled.\n return (\n <SortableItemContext.Provider value={ctx}>\n <Component {...props} />\n </SortableItemContext.Provider>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,2BAAoD;AAC7D,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAKxB,MAAM,6BAA4C,CAAC,cAAc,CAAC,UAAe;AACtF,QAAM,EAAE,gBAAgB,IAAI,WAAW,eAAe;AACtD,QAAM,EAAE,uBAAuB,YAAY,IAAI,WAAW,cAAc;AAExE,QAAM,KAAM,MAAqC,KAAK,GAAG,SAAS;AAGlE,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAGvD,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,uBAAuB,WAAW,CAAC;AAK5E,QAAM,MAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,oBAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IACnC,8BAAC;AAAA,MAAW,GAAG;AAAA,KAAO;AAAA,GACxB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeView';\nexport * from './plugins';\n\nexport { TreeViewSearchBar } from './related-components/TreeViewSearchBar';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AAEd,SAAS,yBAAyB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useContext, useCallback, useMemo } from "react";
|
|
3
4
|
import { DSCheckbox } from "@elliemae/ds-form";
|
|
4
5
|
import { styled } from "@elliemae/ds-system";
|
|
5
6
|
import TreeViewContext from "../TreeViewContext";
|
|
@@ -21,7 +22,10 @@ function CheckboxSelectable(props) {
|
|
|
21
22
|
} = ctx;
|
|
22
23
|
const onCheckboxChange = useCallback(() => {
|
|
23
24
|
const newSelections = toggleCheckboxItem(item);
|
|
24
|
-
const newSelectionHasmap = filterObject(
|
|
25
|
+
const newSelectionHasmap = filterObject(
|
|
26
|
+
{ ...selectedCheckboxes, ...newSelections },
|
|
27
|
+
(value) => value !== false
|
|
28
|
+
);
|
|
25
29
|
setSelectedCheckboxes(newSelectionHasmap);
|
|
26
30
|
triggerTreeRerender();
|
|
27
31
|
const indexAndScrollTo = {
|
|
@@ -52,14 +56,16 @@ function CheckboxSelectable(props) {
|
|
|
52
56
|
return false;
|
|
53
57
|
}, [selectedCheckboxes, id]);
|
|
54
58
|
const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
|
|
55
|
-
return /* @__PURE__ */
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
return /* @__PURE__ */ jsx(StyledCheckboxWrapper, {
|
|
60
|
+
children: /* @__PURE__ */ jsx(DSCheckbox, {
|
|
61
|
+
checked: isChecked,
|
|
62
|
+
disabled: isDisabled,
|
|
63
|
+
className: "em-ds-tree-item-checkbox",
|
|
64
|
+
"data-testid": "tree-item-checkbox",
|
|
65
|
+
onChange: onCheckboxChange,
|
|
66
|
+
tabIndex: "0"
|
|
67
|
+
})
|
|
68
|
+
});
|
|
63
69
|
}
|
|
64
70
|
var CheckboxSelectable_default = CheckboxSelectable;
|
|
65
71
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/CheckboxSelectable.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { styled } from '@elliemae/ds-system';\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"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAE7B,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAOrC,SAAS,mBAAmB,OAAmC;AAC7D,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,gBAAgB,mBAAmB,IAAI;AAC7C,UAAM,qBAAqB;AAAA,MACzB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAAA,MAC1C,CAAC,UAAU,UAAU;AAAA,IACvB;AACA,0BAAsB,kBAAkB;AACxC,wBAAoB;AAEpB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK,YAAY;AAAA,MAC5E;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,mBAAmB,QAAQ,SAAS;AACtC,aAAO;AAAA,IACT;AACA,QAAI,mBAAmB,QAAQ,MAAM;AACnC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,EAAE,CAAC;AAE3B,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE,oBAAC;AAAA,IACC,8BAAC;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAS;AAAA,KACX;AAAA,GACF;AAEJ;AAEA,IAAO,6BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { styled } from "@elliemae/ds-system";
|
|
4
4
|
import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
|
|
5
5
|
const Separator = styled.span`
|
|
@@ -15,10 +15,14 @@ const ChildrenCountDisplayer = (props) => {
|
|
|
15
15
|
const { isGroup, children } = item;
|
|
16
16
|
if (!isGroup)
|
|
17
17
|
return null;
|
|
18
|
-
return /* @__PURE__ */
|
|
18
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
19
19
|
"data-testid": "tree-item-children-count-displayer",
|
|
20
|
-
className
|
|
21
|
-
|
|
20
|
+
className,
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ jsx(Separator, {}),
|
|
23
|
+
`${children.length} Items`
|
|
24
|
+
]
|
|
25
|
+
});
|
|
22
26
|
};
|
|
23
27
|
export {
|
|
24
28
|
ChildrenCountDisplayer
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChildrenCountDisplayer.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst Separator = styled.span`\n width: 1px;\n height: 12px;\n margin: 0 8px;\n border-left: 1px solid ${(props) => props.theme.colors.neutral['600']};\n font-size: 12px;\n`;\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer: React.ComponentType<PropsT> = (props) => {\n const { item } = props;\n const { isGroup, children } = item;\n\n if (!isGroup) return null;\n return (\n <span data-testid=\"tree-item-children-count-displayer\" className={className}>\n <Separator />\n {`${children.length} Items`}\n </span>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,cAAc;AACvB,SAAS,kBAAkB,yBAAyB;AAGpD,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,2BAIE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIjE,MAAM,YAAY,GAAG,oBAAoB;AAMlC,MAAM,yBAAsD,CAAC,UAAU;AAC5E,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,SAAS,IAAI;AAE9B,MAAI,CAAC;AAAS,WAAO;AACrB,SACE,qBAAC;AAAA,IAAK,eAAY;AAAA,IAAqC;AAAA,IACrD;AAAA,0BAAC,aAAU;AAAA,MACV,GAAG,SAAS;AAAA;AAAA,GACf;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { createElement } from "react";
|
|
3
|
+
import { useContext } from "react";
|
|
3
4
|
import { GripperVertical } from "@elliemae/ds-icons";
|
|
4
5
|
import { SortableItemContext } from "../hoc/SortableItemContext";
|
|
5
6
|
const DnDHandle = ({ id, isDragOverlay }) => {
|
|
6
7
|
const { draggableProps } = useContext(SortableItemContext);
|
|
7
8
|
const isDragging = draggableProps && draggableProps.isDragging;
|
|
8
|
-
return /* @__PURE__ */
|
|
9
|
+
return /* @__PURE__ */ createElement(GripperVertical, {
|
|
9
10
|
role: "button",
|
|
10
11
|
...draggableProps && {
|
|
11
12
|
...draggableProps.listeners,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DnDHandle.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { SortableItemContext } from '../hoc/SortableItemContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface DnDHandleProps {\n id: DSTreeviewT.StringOrNum;\n isDragOverlay: boolean;\n}\n\nexport const DnDHandle = ({ id, isDragOverlay }: DnDHandleProps) => {\n const { draggableProps } = useContext(SortableItemContext);\n\n const isDragging = draggableProps && draggableProps.isDragging;\n\n return (\n <GripperVertical\n role=\"button\"\n {...(draggableProps && {\n ...draggableProps.listeners,\n ...draggableProps.attributes,\n })}\n data-testid=\"drag-handle\"\n data-isactive={draggableProps && !!draggableProps.active}\n data-isdragoverlay={isDragOverlay}\n id={`${id}-drag-handle`}\n key={`${id}-drag-handle`}\n className={`drag-handle ${isDragging ? '' : 'focuseable'}`}\n color={isDragging ? ['neutral', '080'] : ['brand-primary', '800']}\n size=\"s\"\n tabIndex={0}\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AAQ7B,MAAM,YAAY,CAAC,EAAE,IAAI,cAAc,MAAsB;AAClE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,8BAAC;AAAA,IACC,MAAK;AAAA,IACJ,GAAI,kBAAkB;AAAA,MACrB,GAAG,eAAe;AAAA,MAClB,GAAG,eAAe;AAAA,IACpB;AAAA,IACA,eAAY;AAAA,IACZ,iBAAe,kBAAkB,CAAC,CAAC,eAAe;AAAA,IAClD,sBAAoB;AAAA,IACpB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR,WAAW,eAAe,aAAa,KAAK;AAAA,IAC5C,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,IAChE,MAAK;AAAA,IACL,UAAU;AAAA,GACZ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { styled } from "@elliemae/ds-system";
|
|
4
4
|
import { DropIndicatorPosition } from "../hoc/SortableItemContext";
|
|
5
5
|
const getPositionStyles = ({ dropIndicatorPosition }) => `
|
|
@@ -24,25 +24,33 @@ const StyledIndicator = styled.div`
|
|
|
24
24
|
background-color: ${({ isDropValid, theme }) => isDropValid ? theme.colors.brand[600] : theme.colors.danger[900]};
|
|
25
25
|
z-index: 20;
|
|
26
26
|
`;
|
|
27
|
-
const CircleIndicator = (style, isDropValid) => /* @__PURE__ */
|
|
27
|
+
const CircleIndicator = (style, isDropValid) => /* @__PURE__ */ jsx("svg", {
|
|
28
28
|
height: "6",
|
|
29
29
|
width: "6",
|
|
30
|
-
style
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
})
|
|
30
|
+
style,
|
|
31
|
+
children: /* @__PURE__ */ jsx("circle", {
|
|
32
|
+
cx: "3",
|
|
33
|
+
cy: "3",
|
|
34
|
+
r: "3",
|
|
35
|
+
strokeWidth: "0",
|
|
36
|
+
fill: isDropValid ? "#1E79C2" : "#C64252"
|
|
37
|
+
})
|
|
38
|
+
});
|
|
38
39
|
const DropIndicator = ({ dropIndicatorPosition, isLast, isDropValid }) => {
|
|
39
|
-
if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(
|
|
40
|
+
if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(
|
|
41
|
+
dropIndicatorPosition
|
|
42
|
+
))
|
|
40
43
|
return null;
|
|
41
44
|
const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;
|
|
42
|
-
return /* @__PURE__ */
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
46
|
+
children: [
|
|
47
|
+
CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid),
|
|
48
|
+
/* @__PURE__ */ jsx(StyledIndicator, {
|
|
49
|
+
dropIndicatorPosition: safeDropIndicatorPosition,
|
|
50
|
+
isDropValid
|
|
51
|
+
})
|
|
52
|
+
]
|
|
53
|
+
});
|
|
46
54
|
};
|
|
47
55
|
var DropIndicator_default = DropIndicator;
|
|
48
56
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropIndicator.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DropIndicatorPosition } from '../hoc/SortableItemContext';\n\ninterface DropIndicatorProps {\n vertical?: boolean;\n dropIndicatorPosition: DropIndicatorPosition | false;\n isLast?: boolean;\n isDropValid?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => `\n top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n left: -2px;\n `;\n\nconst getCircleStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => ({\n position: 'absolute',\n zIndex: 20,\n top: dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n bottom: dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n left: '0px',\n opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n position: absolute;\n ${getPositionStyles}\n box-sizing: border-box;\n width: ${(props) => (props.vertical ? '2px' : '100%')};\n height: ${(props) => (props.vertical ? '100%' : '2px')};\n background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n z-index: 20;\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean | null | undefined) => (\n <svg height=\"6\" width=\"6\" style={style}>\n <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = ({ dropIndicatorPosition, isLast, isDropValid }) => {\n if (\n ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(\n dropIndicatorPosition as DropIndicatorPosition,\n )\n )\n return null;\n\n const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n return (\n <>\n {CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n <StyledIndicator dropIndicatorPosition={safeDropIndicatorPosition} isDropValid={isDropValid} />\n </>\n );\n};\n\nexport default DropIndicator;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAStC,MAAM,oBAAoB,CAAC,EAAE,sBAAsB,MAA0B;AAAA,aAChE,0BAA0B,sBAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,sBAAsB,QAAQ,MAAM;AAAA;AAAA;AAI9E,MAAM,kBAAkB,CAAC,EAAE,sBAAsB,OAA2B;AAAA,EAC1E,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACvE,QAAQ,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EAC3E,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO;AAAA;AAAA;AAI/G,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC;AAAA,EAAI,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI;AAAA,EACxB,8BAAC;AAAA,IAAO,IAAG;AAAA,IAAI,IAAG;AAAA,IAAI,GAAE;AAAA,IAAI,aAAY;AAAA,IAAI,MAAM,cAAc,YAAY;AAAA,GAAW;AAAA,CACzF;AAGF,MAAM,gBAAyD,CAAC,EAAE,uBAAuB,QAAQ,YAAY,MAAM;AACjH,MACE,CAAC,CAAC,sBAAsB,OAAO,sBAAsB,MAAM,EAAE;AAAA,IAC3D;AAAA,EACF;AAEA,WAAO;AAET,QAAM,4BAA4B,SAAS,sBAAsB,SAAS;AAE1E,SACE;AAAA,IACG;AAAA,sBAAgB,gBAAgB,EAAE,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,MACnG,oBAAC;AAAA,QAAgB,uBAAuB;AAAA,QAA2B;AAAA,OAA0B;AAAA;AAAA,GAC/F;AAEJ;AAEA,IAAO,wBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useContext, useCallback } from "react";
|
|
3
4
|
import Button from "@elliemae/ds-button";
|
|
4
5
|
import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
|
|
5
6
|
import { toggleItemExpand } from "../utils/group-expands-helpers";
|
|
@@ -21,16 +22,15 @@ const ExpandCaret = (props) => {
|
|
|
21
22
|
virtualListHelpers: { scrollToIndex }
|
|
22
23
|
} = ctx;
|
|
23
24
|
if (isGroupOrHasChildrens)
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
25
26
|
buttonType: "text",
|
|
26
27
|
className: "expandable-arrow",
|
|
27
28
|
"data-testid": "tree-item-expand-toggle",
|
|
28
|
-
|
|
29
|
-
icon: isExpanded ? /* @__PURE__ */ React2.createElement(ArrowheadDown, {
|
|
29
|
+
icon: isExpanded ? /* @__PURE__ */ jsx(ArrowheadDown, {
|
|
30
30
|
size: "s",
|
|
31
31
|
"data-testid": "ic-arrow-head-down",
|
|
32
32
|
color: ["brand-primary", "800"]
|
|
33
|
-
}) : /* @__PURE__ */
|
|
33
|
+
}) : /* @__PURE__ */ jsx(ArrowheadRight, {
|
|
34
34
|
size: "s",
|
|
35
35
|
"data-testid": "ic-arrow-head-right",
|
|
36
36
|
color: ["brand-primary", "800"]
|
|
@@ -58,8 +58,8 @@ const ExpandCaret = (props) => {
|
|
|
58
58
|
},
|
|
59
59
|
size: "s",
|
|
60
60
|
tabIndex: -1
|
|
61
|
-
});
|
|
62
|
-
return /* @__PURE__ */
|
|
61
|
+
}, `${id}-expand-addon`);
|
|
62
|
+
return /* @__PURE__ */ jsx("div", {
|
|
63
63
|
style: { width: "24px" }
|
|
64
64
|
});
|
|
65
65
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ExpandCaret.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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\" color={['brand-primary', '800']} />\n ) : (\n <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" color={['brand-primary', '800']} />\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"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,mBAAmB;AAC/C,OAAO,YAAY;AACnB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,OAAO,qBAAqB;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,YAAY,kBAAkB,CAAC,CAAC;AACjE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,SAAS,IAAI;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,QAAQ,KAAK,SAAS,SAAS;AACvF,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY;AAAA,IACrB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,cAAc;AAAA,EACtC,IAAI;AAEJ,MAAI;AACF,WACE,oBAAC;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ,MACE,aACE,oBAAC;AAAA,QAAc,MAAK;AAAA,QAAI,eAAY;AAAA,QAAqB,OAAO,CAAC,iBAAiB,KAAK;AAAA,OAAG,IAE1F,oBAAC;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,QAAsB,OAAO,CAAC,iBAAiB,KAAK;AAAA,OAAG;AAAA,MAGhG,aAAa,CAAC,MAAwB;AAEpC,YAAI,GAAG;AACL,YAAE,eAAe;AAAA,QACnB;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,YAAI;AAAG,4BAAkB,MAAM,qBAAqB,yBAAyB,eAAe,CAAC;AAC7F,6BAAqB,IAAI;AACzB,cAAM,kBAAkB,KAAK;AAC7B,YAAI,OAAO,oBAAoB,UAAU;AACvC,sBAAY;AAAA,YACV,WAAW;AAAA,YACX,cAAc,CAAC,OAAO,EAAE,OAAO,QAAQ,MAAM,cAAc,iBAAiB,IAAI;AAAA,YAChF;AAAA,UACF,CAAC;AAAA,QACH;AACA,uBAAe,IAAI;AACnB,kBAAU,IAAI;AAAA,MAChB;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,OA9BL,GAAG,iBA+BV;AAEJ,SAAO,oBAAC;AAAA,IAAI,OAAO,EAAE,OAAO,OAAO;AAAA,GAAG;AACxC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Icon.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,kBAAkB;AAClC,SAAS,UAAU;AAEnB,OAAO,qBAAqB;AAKrB,MAAM,OAAO,CAAC,UAAsC;AACzD,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,wBAAwB,KAAK,WAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS;AACtG,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,SAAS;AAAA,EAC/B,IAAI;AACJ,QAAM,OAAO,wBAAwB,YAAY;AACjD,MAAI,CAAC;AAAM,WAAO;AAElB,SAAOA,OAAM,aAAa,MAAM;AAAA,IAC9B,eAAe,wBAAwB,yBAAyB;AAAA,IAKhE,WAAW,GAAG,KAAK,MAAM,WAAW,gBAAgB;AAAA,EACtD,CAAC;AACH;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
const getItemNestingLeftPadding = (level, opts) => {
|
|
4
4
|
const { spaceForNestingLevel = 1.5 } = opts;
|
|
5
5
|
const groupLeftPadding = spaceForNestingLevel * (level - 1);
|
|
@@ -13,7 +13,7 @@ const NestingSpace = (props) => {
|
|
|
13
13
|
const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
|
|
14
14
|
spaceForNestingLevel
|
|
15
15
|
});
|
|
16
|
-
return /* @__PURE__ */
|
|
16
|
+
return /* @__PURE__ */ jsx("div", {
|
|
17
17
|
"data-testid": "tree-item-nested-space",
|
|
18
18
|
style: { width: itemNestingLeftPadding }
|
|
19
19
|
});
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/NestingSpace.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,MAAM,4BAA4B,CAAC,OAAe,SAA2C;AAC3F,QAAM,EAAE,uBAAuB,IAAI,IAAI;AACvC,QAAM,mBAAmB,wBAAwB,QAAQ;AACzD,QAAM,mBAAmB,mBAAmB,uBAAuB;AAGnE,SAAO,mBAAmB,IAAI,GAAG,uBAAuB;AAC1D;AAOO,MAAM,eAAe,CAAC,UAAqD;AAChF,QAAM,EAAE,MAAM,qBAAqB,IAAI;AACvC,QAAM,EAAE,UAAU,IAAI;AACtB,MAAI,WAAW;AACb,UAAM,yBAAyB,0BAA0B,YAAY,GAAG;AAAA,MACtE;AAAA,IACF,CAAC;AAED,WAAO,oBAAC;AAAA,MAAI,eAAY;AAAA,MAAyB,OAAO,EAAE,OAAO,uBAAuB;AAAA,KAAG;AAAA,EAC7F;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useContext, useCallback, useMemo } from "react";
|
|
3
4
|
import { DSRadio } from "@elliemae/ds-form";
|
|
4
5
|
import TreeViewContext from "../TreeViewContext";
|
|
5
6
|
function RadioSelectable(props) {
|
|
@@ -28,7 +29,7 @@ function RadioSelectable(props) {
|
|
|
28
29
|
}, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
|
|
29
30
|
const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
|
|
30
31
|
const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
|
|
31
|
-
return /* @__PURE__ */
|
|
32
|
+
return /* @__PURE__ */ jsx(DSRadio, {
|
|
32
33
|
checked: selectedCheckboxes[id] === true,
|
|
33
34
|
name: radioName,
|
|
34
35
|
disabled: isDisabled,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/RadioSelectable.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,eAAe;AACxB,OAAO,qBAAqB;AAM5B,SAAS,gBAAgB,OAAe;AACtC,QAAM,EAAE,MAAM,UAAU,IAAI;AAE5B,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,gBAAgB,YAAY,MAAM;AACtC,UAAM,qBAAqB,EAAE,CAAC,KAAK,KAAK;AACxC,0BAAsB,kBAAkB;AACxC,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,KAAK;AAAc,wBAAc,KAAK,YAAY;AAAA,MACxD;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG,CAAC,IAAI,uBAAuB,WAAW,mBAAmB,MAAM,aAAa,CAAC;AAEjF,QAAM,YAAY,QAAQ,MAAM,UAAU,sBAAsB,CAAC,kBAAkB,CAAC;AAEpF,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE,oBAAC;AAAA,IACC,SAAS,mBAAmB,QAAQ;AAAA,IACpC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,GACZ;AAEJ;AAEA,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|