@salt-ds/lab 1.0.0-alpha.92 → 1.0.0-alpha.94
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/CHANGELOG.md +116 -0
- package/css/salt-lab.css +166 -249
- package/dist-cjs/index.js +6 -24
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/toolbar-next/ToolbarContentNext.css.js +6 -0
- package/dist-cjs/toolbar-next/ToolbarContentNext.css.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarContentNext.js +32 -0
- package/dist-cjs/toolbar-next/ToolbarContentNext.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNext.css.js +6 -0
- package/dist-cjs/toolbar-next/ToolbarNext.css.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNext.js +394 -0
- package/dist-cjs/toolbar-next/ToolbarNext.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js +6 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.css.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.js +705 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflow.js.map +1 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +165 -0
- package/dist-cjs/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +1 -0
- package/dist-cjs/toolbar-next/TooltrayNext.css.js +6 -0
- package/dist-cjs/toolbar-next/TooltrayNext.css.js.map +1 -0
- package/dist-cjs/toolbar-next/TooltrayNext.js +55 -0
- package/dist-cjs/toolbar-next/TooltrayNext.js.map +1 -0
- package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js +391 -0
- package/dist-cjs/toolbar-next/toolbarNextKeyboardUtils.js.map +1 -0
- package/dist-cjs/toolbar-next/toolbarNextUtils.js +215 -0
- package/dist-cjs/toolbar-next/toolbarNextUtils.js.map +1 -0
- package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js +334 -0
- package/dist-cjs/toolbar-next/useToolbarNextKeyboardNavigation.js.map +1 -0
- package/dist-cjs/toolbar-next/useToolbarNextOverflow.js +743 -0
- package/dist-cjs/toolbar-next/useToolbarNextOverflow.js.map +1 -0
- package/dist-es/index.js +3 -12
- package/dist-es/index.js.map +1 -1
- package/dist-es/toolbar-next/ToolbarContentNext.css.js +4 -0
- package/dist-es/toolbar-next/ToolbarContentNext.css.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarContentNext.js +30 -0
- package/dist-es/toolbar-next/ToolbarContentNext.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNext.css.js +4 -0
- package/dist-es/toolbar-next/ToolbarNext.css.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNext.js +392 -0
- package/dist-es/toolbar-next/ToolbarNext.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.css.js +4 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.css.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.js +700 -0
- package/dist-es/toolbar-next/ToolbarNextOverflow.js.map +1 -0
- package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js +159 -0
- package/dist-es/toolbar-next/ToolbarNextOverflowFloatingBoundary.js.map +1 -0
- package/dist-es/toolbar-next/TooltrayNext.css.js +4 -0
- package/dist-es/toolbar-next/TooltrayNext.css.js.map +1 -0
- package/dist-es/toolbar-next/TooltrayNext.js +53 -0
- package/dist-es/toolbar-next/TooltrayNext.js.map +1 -0
- package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js +372 -0
- package/dist-es/toolbar-next/toolbarNextKeyboardUtils.js.map +1 -0
- package/dist-es/toolbar-next/toolbarNextUtils.js +211 -0
- package/dist-es/toolbar-next/toolbarNextUtils.js.map +1 -0
- package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js +332 -0
- package/dist-es/toolbar-next/useToolbarNextKeyboardNavigation.js.map +1 -0
- package/dist-es/toolbar-next/useToolbarNextOverflow.js +741 -0
- package/dist-es/toolbar-next/useToolbarNextOverflow.js.map +1 -0
- package/dist-types/index.d.ts +1 -2
- package/dist-types/toolbar-next/ToolbarContentNext.d.ts +11 -0
- package/dist-types/toolbar-next/ToolbarNext.d.ts +12 -0
- package/dist-types/toolbar-next/ToolbarNextOverflow.d.ts +34 -0
- package/dist-types/toolbar-next/ToolbarNextOverflowFloatingBoundary.d.ts +16 -0
- package/dist-types/toolbar-next/TooltrayNext.d.ts +37 -0
- package/dist-types/toolbar-next/index.d.ts +3 -0
- package/dist-types/toolbar-next/toolbarNextKeyboardUtils.d.ts +39 -0
- package/dist-types/toolbar-next/toolbarNextUtils.d.ts +42 -0
- package/dist-types/toolbar-next/useToolbarNextKeyboardNavigation.d.ts +41 -0
- package/dist-types/toolbar-next/useToolbarNextOverflow.d.ts +37 -0
- package/package.json +2 -2
- package/dist-cjs/side-panel/SidePanel.css.js +0 -6
- package/dist-cjs/side-panel/SidePanel.css.js.map +0 -1
- package/dist-cjs/side-panel/SidePanel.js +0 -197
- package/dist-cjs/side-panel/SidePanel.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelCloseButton.js +0 -38
- package/dist-cjs/side-panel/SidePanelCloseButton.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelContent.css.js +0 -6
- package/dist-cjs/side-panel/SidePanelContent.css.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelContent.js +0 -66
- package/dist-cjs/side-panel/SidePanelContent.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelHeader.css.js +0 -6
- package/dist-cjs/side-panel/SidePanelHeader.css.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelHeader.js +0 -26
- package/dist-cjs/side-panel/SidePanelHeader.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelProvider.js +0 -78
- package/dist-cjs/side-panel/SidePanelProvider.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelTitle.css.js +0 -6
- package/dist-cjs/side-panel/SidePanelTitle.css.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelTitle.js +0 -48
- package/dist-cjs/side-panel/SidePanelTitle.js.map +0 -1
- package/dist-cjs/side-panel/SidePanelTrigger.js +0 -37
- package/dist-cjs/side-panel/SidePanelTrigger.js.map +0 -1
- package/dist-cjs/side-panel/internal/SidePanelContext.js +0 -32
- package/dist-cjs/side-panel/internal/SidePanelContext.js.map +0 -1
- package/dist-cjs/side-panel/internal/useIsScrollable.js +0 -50
- package/dist-cjs/side-panel/internal/useIsScrollable.js.map +0 -1
- package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js +0 -214
- package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js.map +0 -1
- package/dist-cjs/side-panel/useSidePanel.js +0 -43
- package/dist-cjs/side-panel/useSidePanel.js.map +0 -1
- package/dist-cjs/tree/Tree.css.js +0 -6
- package/dist-cjs/tree/Tree.css.js.map +0 -1
- package/dist-cjs/tree/Tree.js +0 -300
- package/dist-cjs/tree/Tree.js.map +0 -1
- package/dist-cjs/tree/TreeContext.js +0 -31
- package/dist-cjs/tree/TreeContext.js.map +0 -1
- package/dist-cjs/tree/TreeNode.css.js +0 -6
- package/dist-cjs/tree/TreeNode.css.js.map +0 -1
- package/dist-cjs/tree/TreeNode.js +0 -103
- package/dist-cjs/tree/TreeNode.js.map +0 -1
- package/dist-cjs/tree/TreeNodeExpansionIcon.css.js +0 -6
- package/dist-cjs/tree/TreeNodeExpansionIcon.css.js.map +0 -1
- package/dist-cjs/tree/TreeNodeExpansionIcon.js +0 -62
- package/dist-cjs/tree/TreeNodeExpansionIcon.js.map +0 -1
- package/dist-cjs/tree/TreeNodeLabel.css.js +0 -6
- package/dist-cjs/tree/TreeNodeLabel.css.js.map +0 -1
- package/dist-cjs/tree/TreeNodeLabel.js +0 -26
- package/dist-cjs/tree/TreeNodeLabel.js.map +0 -1
- package/dist-cjs/tree/TreeNodeTrigger.css.js +0 -6
- package/dist-cjs/tree/TreeNodeTrigger.css.js.map +0 -1
- package/dist-cjs/tree/TreeNodeTrigger.js +0 -153
- package/dist-cjs/tree/TreeNodeTrigger.js.map +0 -1
- package/dist-cjs/tree/treeModel.js +0 -61
- package/dist-cjs/tree/treeModel.js.map +0 -1
- package/dist-cjs/tree/useTree.js +0 -337
- package/dist-cjs/tree/useTree.js.map +0 -1
- package/dist-es/side-panel/SidePanel.css.js +0 -4
- package/dist-es/side-panel/SidePanel.css.js.map +0 -1
- package/dist-es/side-panel/SidePanel.js +0 -195
- package/dist-es/side-panel/SidePanel.js.map +0 -1
- package/dist-es/side-panel/SidePanelCloseButton.js +0 -36
- package/dist-es/side-panel/SidePanelCloseButton.js.map +0 -1
- package/dist-es/side-panel/SidePanelContent.css.js +0 -4
- package/dist-es/side-panel/SidePanelContent.css.js.map +0 -1
- package/dist-es/side-panel/SidePanelContent.js +0 -64
- package/dist-es/side-panel/SidePanelContent.js.map +0 -1
- package/dist-es/side-panel/SidePanelHeader.css.js +0 -4
- package/dist-es/side-panel/SidePanelHeader.css.js.map +0 -1
- package/dist-es/side-panel/SidePanelHeader.js +0 -24
- package/dist-es/side-panel/SidePanelHeader.js.map +0 -1
- package/dist-es/side-panel/SidePanelProvider.js +0 -76
- package/dist-es/side-panel/SidePanelProvider.js.map +0 -1
- package/dist-es/side-panel/SidePanelTitle.css.js +0 -4
- package/dist-es/side-panel/SidePanelTitle.css.js.map +0 -1
- package/dist-es/side-panel/SidePanelTitle.js +0 -46
- package/dist-es/side-panel/SidePanelTitle.js.map +0 -1
- package/dist-es/side-panel/SidePanelTrigger.js +0 -35
- package/dist-es/side-panel/SidePanelTrigger.js.map +0 -1
- package/dist-es/side-panel/internal/SidePanelContext.js +0 -29
- package/dist-es/side-panel/internal/SidePanelContext.js.map +0 -1
- package/dist-es/side-panel/internal/useIsScrollable.js +0 -48
- package/dist-es/side-panel/internal/useIsScrollable.js.map +0 -1
- package/dist-es/side-panel/internal/useSidePanelTabOrder.js +0 -212
- package/dist-es/side-panel/internal/useSidePanelTabOrder.js.map +0 -1
- package/dist-es/side-panel/useSidePanel.js +0 -41
- package/dist-es/side-panel/useSidePanel.js.map +0 -1
- package/dist-es/tree/Tree.css.js +0 -4
- package/dist-es/tree/Tree.css.js.map +0 -1
- package/dist-es/tree/Tree.js +0 -298
- package/dist-es/tree/Tree.js.map +0 -1
- package/dist-es/tree/TreeContext.js +0 -26
- package/dist-es/tree/TreeContext.js.map +0 -1
- package/dist-es/tree/TreeNode.css.js +0 -4
- package/dist-es/tree/TreeNode.css.js.map +0 -1
- package/dist-es/tree/TreeNode.js +0 -101
- package/dist-es/tree/TreeNode.js.map +0 -1
- package/dist-es/tree/TreeNodeExpansionIcon.css.js +0 -4
- package/dist-es/tree/TreeNodeExpansionIcon.css.js.map +0 -1
- package/dist-es/tree/TreeNodeExpansionIcon.js +0 -60
- package/dist-es/tree/TreeNodeExpansionIcon.js.map +0 -1
- package/dist-es/tree/TreeNodeLabel.css.js +0 -4
- package/dist-es/tree/TreeNodeLabel.css.js.map +0 -1
- package/dist-es/tree/TreeNodeLabel.js +0 -24
- package/dist-es/tree/TreeNodeLabel.js.map +0 -1
- package/dist-es/tree/TreeNodeTrigger.css.js +0 -4
- package/dist-es/tree/TreeNodeTrigger.css.js.map +0 -1
- package/dist-es/tree/TreeNodeTrigger.js +0 -151
- package/dist-es/tree/TreeNodeTrigger.js.map +0 -1
- package/dist-es/tree/treeModel.js +0 -57
- package/dist-es/tree/treeModel.js.map +0 -1
- package/dist-es/tree/useTree.js +0 -335
- package/dist-es/tree/useTree.js.map +0 -1
- package/dist-types/side-panel/SidePanel.d.ts +0 -26
- package/dist-types/side-panel/SidePanelCloseButton.d.ts +0 -2
- package/dist-types/side-panel/SidePanelContent.d.ts +0 -5
- package/dist-types/side-panel/SidePanelHeader.d.ts +0 -5
- package/dist-types/side-panel/SidePanelProvider.d.ts +0 -20
- package/dist-types/side-panel/SidePanelTitle.d.ts +0 -3
- package/dist-types/side-panel/SidePanelTrigger.d.ts +0 -3
- package/dist-types/side-panel/index.d.ts +0 -8
- package/dist-types/side-panel/internal/SidePanelContext.d.ts +0 -52
- package/dist-types/side-panel/internal/index.d.ts +0 -3
- package/dist-types/side-panel/internal/useIsScrollable.d.ts +0 -2
- package/dist-types/side-panel/internal/useSidePanelTabOrder.d.ts +0 -7
- package/dist-types/side-panel/useSidePanel.d.ts +0 -58
- package/dist-types/tree/Tree.d.ts +0 -36
- package/dist-types/tree/TreeContext.d.ts +0 -77
- package/dist-types/tree/TreeNode.d.ts +0 -25
- package/dist-types/tree/TreeNodeExpansionIcon.d.ts +0 -4
- package/dist-types/tree/TreeNodeLabel.d.ts +0 -4
- package/dist-types/tree/TreeNodeTrigger.d.ts +0 -8
- package/dist-types/tree/index.d.ts +0 -4
- package/dist-types/tree/treeModel.d.ts +0 -24
- package/dist-types/tree/useTree.d.ts +0 -68
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltTreeNodeTrigger {\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n gap: var(--salt-spacing-100);\n width: 100%;\n min-height: var(--salt-size-base);\n\n padding-top: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);\n padding-right: var(--salt-spacing-100);\n /* Keep a fixed spacing-100 outer left padding for all nodes, then add one\n indent step per additional level. Each indent step = (selectable element\n width + inter-item gap).\n Level-1 nodes get no extra indent; level-2 gets 1 step, level-3 gets 2, etc.\n */\n --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-100));\n /* Icons clamp to 12px minimum in Icon, so align against the rendered size. */\n --saltTreeNodeTrigger-iconOffsetY: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n --saltTreeNodeTrigger-directIconInsetX: max(0px, calc((var(--salt-size-selectable) - max(var(--salt-size-icon), 12px)) / 2));\n padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));\n background: var(--salt-selectable-background);\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-selected > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n box-shadow:\n 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n position: relative;\n z-index: var(--salt-zIndex-default);\n}\n\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n background: var(--salt-selectable-background-selected);\n}\n\n.saltTreeNode-disabled > .saltTreeNodeTrigger,\n.saltTreeNode-disabled:hover > .saltTreeNodeTrigger {\n opacity: 0.4;\n cursor: var(--salt-cursor-disabled);\n\n background: var(--salt-selectable-background);\n color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltTreeNode-checkbox {\n margin-block: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n.saltTreeNodeTrigger > .saltTreeNodeExpansionIcon > .saltTreeNodeExpansionIcon-icon,\n.saltTreeNodeTrigger > .saltTreeNode-icon > .saltIcon {\n --saltIcon-margin: var(--saltTreeNodeTrigger-iconOffsetY) 0 0 0;\n}\n\n.saltTreeNodeTrigger > .saltIcon {\n --saltIcon-margin: var(--saltTreeNodeTrigger-iconOffsetY) 0 0 0;\n box-sizing: content-box;\n padding-inline: var(--saltTreeNodeTrigger-directIconInsetX);\n flex-shrink: 0;\n color: var(--salt-content-primary-foreground);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=TreeNodeTrigger.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TreeNodeTrigger.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var TreeContext = require('./TreeContext.js');
|
|
10
|
-
var TreeNodeExpansionIcon = require('./TreeNodeExpansionIcon.js');
|
|
11
|
-
var TreeNodeTrigger$1 = require('./TreeNodeTrigger.css.js');
|
|
12
|
-
|
|
13
|
-
const withBaseName = core.makePrefixer("saltTreeNodeTrigger");
|
|
14
|
-
const withNodeBaseName = core.makePrefixer("saltTreeNode");
|
|
15
|
-
const TreeNodeTrigger = react.forwardRef(function TreeNodeTrigger2(props, ref) {
|
|
16
|
-
const {
|
|
17
|
-
className,
|
|
18
|
-
children,
|
|
19
|
-
style,
|
|
20
|
-
onClick,
|
|
21
|
-
onFocus,
|
|
22
|
-
onBlur,
|
|
23
|
-
onMouseDown,
|
|
24
|
-
onKeyDown,
|
|
25
|
-
...rest
|
|
26
|
-
} = props;
|
|
27
|
-
const targetWindow = window.useWindow();
|
|
28
|
-
styles.useComponentCssInjection({
|
|
29
|
-
testId: "salt-tree-node-trigger",
|
|
30
|
-
css: TreeNodeTrigger$1,
|
|
31
|
-
window: targetWindow
|
|
32
|
-
});
|
|
33
|
-
const nodeContext = TreeContext.useTreeNodeContext();
|
|
34
|
-
if (!nodeContext) {
|
|
35
|
-
throw new Error("TreeNodeTrigger must be used within a TreeNode");
|
|
36
|
-
}
|
|
37
|
-
const {
|
|
38
|
-
value,
|
|
39
|
-
level,
|
|
40
|
-
hasChildren,
|
|
41
|
-
expanded,
|
|
42
|
-
disabled,
|
|
43
|
-
id,
|
|
44
|
-
nodeRef,
|
|
45
|
-
setNodeRef,
|
|
46
|
-
selected,
|
|
47
|
-
indeterminate,
|
|
48
|
-
nodeChildren
|
|
49
|
-
} = nodeContext;
|
|
50
|
-
const {
|
|
51
|
-
multiselect,
|
|
52
|
-
activeNode,
|
|
53
|
-
setActiveNode,
|
|
54
|
-
select,
|
|
55
|
-
tabbableNodeId,
|
|
56
|
-
registerElement
|
|
57
|
-
} = TreeContext.useTreeContext();
|
|
58
|
-
const triggerContentRef = core.useForkRef(react.useRef(null), ref);
|
|
59
|
-
const wasMouseDownRef = react.useRef(false);
|
|
60
|
-
const [focusVisible, setFocusVisible] = react.useState(false);
|
|
61
|
-
const isActive = activeNode === value;
|
|
62
|
-
const isTabbable = tabbableNodeId === value;
|
|
63
|
-
react.useEffect(() => {
|
|
64
|
-
if (nodeRef.current) {
|
|
65
|
-
return registerElement(value, nodeRef.current);
|
|
66
|
-
}
|
|
67
|
-
}, [value, registerElement, nodeRef]);
|
|
68
|
-
const handleClick = (event) => {
|
|
69
|
-
onClick == null ? void 0 : onClick(event);
|
|
70
|
-
if (disabled) return;
|
|
71
|
-
const target = event.target;
|
|
72
|
-
if (target.closest(".saltTreeNodeExpansionIcon")) return;
|
|
73
|
-
const nestedTreeItem = target.closest('[role="treeitem"]');
|
|
74
|
-
if (nestedTreeItem && nestedTreeItem !== nodeRef.current) {
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
setActiveNode(value);
|
|
78
|
-
select(event, value);
|
|
79
|
-
};
|
|
80
|
-
const handleFocus = (event) => {
|
|
81
|
-
if (event.target !== event.currentTarget) return;
|
|
82
|
-
onFocus == null ? void 0 : onFocus(event);
|
|
83
|
-
if (!wasMouseDownRef.current) {
|
|
84
|
-
setFocusVisible(true);
|
|
85
|
-
}
|
|
86
|
-
wasMouseDownRef.current = false;
|
|
87
|
-
setActiveNode(value);
|
|
88
|
-
};
|
|
89
|
-
const handleBlur = (event) => {
|
|
90
|
-
if (event.target !== event.currentTarget) return;
|
|
91
|
-
onBlur == null ? void 0 : onBlur(event);
|
|
92
|
-
setFocusVisible(false);
|
|
93
|
-
};
|
|
94
|
-
const handleMouseDown = (event) => {
|
|
95
|
-
wasMouseDownRef.current = true;
|
|
96
|
-
onMouseDown == null ? void 0 : onMouseDown(event);
|
|
97
|
-
};
|
|
98
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
99
|
-
"li",
|
|
100
|
-
{
|
|
101
|
-
ref: setNodeRef,
|
|
102
|
-
id,
|
|
103
|
-
role: "treeitem",
|
|
104
|
-
"aria-expanded": hasChildren ? expanded : void 0,
|
|
105
|
-
"aria-selected": multiselect ? void 0 : selected,
|
|
106
|
-
"aria-checked": multiselect ? indeterminate ? "mixed" : selected : void 0,
|
|
107
|
-
"aria-level": level,
|
|
108
|
-
"aria-disabled": disabled || void 0,
|
|
109
|
-
tabIndex: isTabbable ? 0 : -1,
|
|
110
|
-
className: clsx.clsx(
|
|
111
|
-
withNodeBaseName(),
|
|
112
|
-
{
|
|
113
|
-
[withNodeBaseName("expanded")]: expanded,
|
|
114
|
-
[withNodeBaseName("selected")]: selected && !multiselect,
|
|
115
|
-
[withNodeBaseName("active")]: isActive,
|
|
116
|
-
[withNodeBaseName("disabled")]: disabled,
|
|
117
|
-
[withNodeBaseName("hasChildren")]: hasChildren,
|
|
118
|
-
[withNodeBaseName("focusVisible")]: focusVisible
|
|
119
|
-
},
|
|
120
|
-
className
|
|
121
|
-
),
|
|
122
|
-
style: {
|
|
123
|
-
"--saltTreeNode-level": level,
|
|
124
|
-
...style
|
|
125
|
-
},
|
|
126
|
-
onClick: handleClick,
|
|
127
|
-
onFocus: handleFocus,
|
|
128
|
-
onBlur: handleBlur,
|
|
129
|
-
onMouseDown: handleMouseDown,
|
|
130
|
-
onKeyDown,
|
|
131
|
-
...rest,
|
|
132
|
-
children: [
|
|
133
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { ref: triggerContentRef, className: withBaseName(), children: [
|
|
134
|
-
/* @__PURE__ */ jsxRuntime.jsx(TreeNodeExpansionIcon.TreeNodeExpansionIcon, {}),
|
|
135
|
-
multiselect && /* @__PURE__ */ jsxRuntime.jsx(
|
|
136
|
-
core.CheckboxIcon,
|
|
137
|
-
{
|
|
138
|
-
checked: selected,
|
|
139
|
-
indeterminate,
|
|
140
|
-
disabled,
|
|
141
|
-
className: withNodeBaseName("checkbox")
|
|
142
|
-
}
|
|
143
|
-
),
|
|
144
|
-
children
|
|
145
|
-
] }),
|
|
146
|
-
hasChildren && expanded && /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", className: withNodeBaseName("group"), children: nodeChildren })
|
|
147
|
-
]
|
|
148
|
-
}
|
|
149
|
-
);
|
|
150
|
-
});
|
|
151
|
-
|
|
152
|
-
exports.TreeNodeTrigger = TreeNodeTrigger;
|
|
153
|
-
//# sourceMappingURL=TreeNodeTrigger.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TreeNodeTrigger.js","sources":["../src/tree/TreeNodeTrigger.tsx"],"sourcesContent":["import { CheckboxIcon, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FocusEvent,\n forwardRef,\n type MouseEvent,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useTreeContext, useTreeNodeContext } from \"./TreeContext\";\nimport { TreeNodeExpansionIcon } from \"./TreeNodeExpansionIcon\";\nimport treeNodeTriggerCss from \"./TreeNodeTrigger.css\";\n\nexport interface TreeNodeTriggerProps extends ComponentPropsWithoutRef<\"li\"> {}\n\nconst withBaseName = makePrefixer(\"saltTreeNodeTrigger\");\nconst withNodeBaseName = makePrefixer(\"saltTreeNode\");\n\n/**\n * The forwarded ref points to the inner trigger content span (for tooltip positioning),\n * while the <li> handles focus, ARIA, and event handling.\n */\nexport const TreeNodeTrigger = forwardRef<\n HTMLSpanElement,\n TreeNodeTriggerProps\n>(function TreeNodeTrigger(props, ref) {\n const {\n className,\n children,\n style,\n onClick,\n onFocus,\n onBlur,\n onMouseDown,\n onKeyDown,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tree-node-trigger\",\n css: treeNodeTriggerCss,\n window: targetWindow,\n });\n\n const nodeContext = useTreeNodeContext();\n if (!nodeContext) {\n throw new Error(\"TreeNodeTrigger must be used within a TreeNode\");\n }\n\n const {\n value,\n level,\n hasChildren,\n expanded,\n disabled,\n id,\n nodeRef,\n setNodeRef,\n selected,\n indeterminate,\n nodeChildren,\n } = nodeContext;\n\n const {\n multiselect,\n activeNode,\n setActiveNode,\n select,\n tabbableNodeId,\n registerElement,\n } = useTreeContext();\n\n const triggerContentRef = useForkRef(useRef<HTMLSpanElement>(null), ref);\n const wasMouseDownRef = useRef(false);\n const [focusVisible, setFocusVisible] = useState(false);\n\n const isActive = activeNode === value;\n\n const isTabbable = tabbableNodeId === value;\n\n useEffect(() => {\n if (nodeRef.current) {\n return registerElement(value, nodeRef.current);\n }\n }, [value, registerElement, nodeRef]);\n\n const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n onClick?.(event);\n if (disabled) return;\n const target = event.target as HTMLElement;\n if (target.closest(\".saltTreeNodeExpansionIcon\")) return;\n const nestedTreeItem = target.closest('[role=\"treeitem\"]');\n if (nestedTreeItem && nestedTreeItem !== nodeRef.current) {\n return;\n }\n setActiveNode(value);\n select(event, value);\n };\n\n const handleFocus = (event: FocusEvent<HTMLLIElement>) => {\n if (event.target !== event.currentTarget) return;\n onFocus?.(event);\n if (!wasMouseDownRef.current) {\n setFocusVisible(true);\n }\n wasMouseDownRef.current = false;\n setActiveNode(value);\n };\n\n const handleBlur = (event: FocusEvent<HTMLLIElement>) => {\n if (event.target !== event.currentTarget) return;\n onBlur?.(event);\n setFocusVisible(false);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLLIElement>) => {\n wasMouseDownRef.current = true;\n onMouseDown?.(event);\n };\n\n return (\n <li\n ref={setNodeRef}\n id={id}\n role=\"treeitem\"\n aria-expanded={hasChildren ? expanded : undefined}\n aria-selected={multiselect ? undefined : selected}\n aria-checked={\n multiselect ? (indeterminate ? \"mixed\" : selected) : undefined\n }\n aria-level={level}\n aria-disabled={disabled || undefined}\n tabIndex={isTabbable ? 0 : -1}\n className={clsx(\n withNodeBaseName(),\n {\n [withNodeBaseName(\"expanded\")]: expanded,\n [withNodeBaseName(\"selected\")]: selected && !multiselect,\n [withNodeBaseName(\"active\")]: isActive,\n [withNodeBaseName(\"disabled\")]: disabled,\n [withNodeBaseName(\"hasChildren\")]: hasChildren,\n [withNodeBaseName(\"focusVisible\")]: focusVisible,\n },\n className,\n )}\n style={\n {\n \"--saltTreeNode-level\": level,\n ...style,\n } as CSSProperties\n }\n onClick={handleClick}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onMouseDown={handleMouseDown}\n onKeyDown={onKeyDown}\n {...rest}\n >\n <span ref={triggerContentRef} className={withBaseName()}>\n <TreeNodeExpansionIcon />\n {multiselect && (\n <CheckboxIcon\n checked={selected}\n indeterminate={indeterminate}\n disabled={disabled}\n className={withNodeBaseName(\"checkbox\")}\n />\n )}\n {children}\n </span>\n\n {hasChildren && expanded && (\n <ul role=\"group\" className={withNodeBaseName(\"group\")}>\n {nodeChildren}\n </ul>\n )}\n </li>\n );\n});\n"],"names":["makePrefixer","forwardRef","TreeNodeTrigger","useWindow","useComponentCssInjection","treeNodeTriggerCss","useTreeNodeContext","useTreeContext","useForkRef","useRef","useState","useEffect","jsxs","clsx","jsx","TreeNodeExpansionIcon","CheckboxIcon"],"mappings":"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"}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
|
|
5
|
-
function isFragmentElement(child) {
|
|
6
|
-
return react.isValidElement(child) && child.type === react.Fragment;
|
|
7
|
-
}
|
|
8
|
-
function isTreeNodeElement(child) {
|
|
9
|
-
return react.isValidElement(child) && typeof child.props.value === "string";
|
|
10
|
-
}
|
|
11
|
-
function flattenTreeNodeChildren(children) {
|
|
12
|
-
const flattenedChildren = [];
|
|
13
|
-
react.Children.forEach(children, (child) => {
|
|
14
|
-
if (isFragmentElement(child)) {
|
|
15
|
-
flattenedChildren.push(...flattenTreeNodeChildren(child.props.children));
|
|
16
|
-
} else if (child !== null && child !== void 0 && typeof child !== "boolean") {
|
|
17
|
-
flattenedChildren.push(child);
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
return flattenedChildren;
|
|
21
|
-
}
|
|
22
|
-
function getTreeNodeElements(children) {
|
|
23
|
-
return flattenTreeNodeChildren(children).filter(isTreeNodeElement);
|
|
24
|
-
}
|
|
25
|
-
function buildTreeModel(children) {
|
|
26
|
-
const nodes = /* @__PURE__ */ new Map();
|
|
27
|
-
const rootValues = [];
|
|
28
|
-
const childrenOf = /* @__PURE__ */ new Map();
|
|
29
|
-
function traverse(reactChildren, parentValue, parentDisabled = false) {
|
|
30
|
-
const treeNodeChildren = getTreeNodeElements(reactChildren);
|
|
31
|
-
const siblingValues = [];
|
|
32
|
-
for (const child of treeNodeChildren) {
|
|
33
|
-
const value = child.props.value;
|
|
34
|
-
const childTreeNodes = getTreeNodeElements(child.props.children);
|
|
35
|
-
const hasChildren = childTreeNodes.length > 0;
|
|
36
|
-
const disabled = parentDisabled || Boolean(child.props.disabled);
|
|
37
|
-
nodes.set(value, {
|
|
38
|
-
value,
|
|
39
|
-
parentValue,
|
|
40
|
-
hasChildren,
|
|
41
|
-
disabled
|
|
42
|
-
});
|
|
43
|
-
siblingValues.push(value);
|
|
44
|
-
if (hasChildren) {
|
|
45
|
-
traverse(child.props.children, value, disabled);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
if (parentValue !== void 0) {
|
|
49
|
-
childrenOf.set(parentValue, siblingValues);
|
|
50
|
-
} else {
|
|
51
|
-
rootValues.push(...siblingValues);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
traverse(children);
|
|
55
|
-
return { nodes, rootValues, childrenOf };
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
exports.buildTreeModel = buildTreeModel;
|
|
59
|
-
exports.flattenTreeNodeChildren = flattenTreeNodeChildren;
|
|
60
|
-
exports.isTreeNodeElement = isTreeNodeElement;
|
|
61
|
-
//# sourceMappingURL=treeModel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"treeModel.js","sources":["../src/tree/treeModel.ts"],"sourcesContent":["import {\n Children,\n Fragment,\n isValidElement,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\nexport interface TreeNodeMeta {\n value: string;\n parentValue: string | undefined;\n hasChildren: boolean;\n disabled: boolean;\n}\n\nexport interface TreeModel {\n /** All nodes indexed by value */\n nodes: Map<string, TreeNodeMeta>;\n /** Ordered list of root node values */\n rootValues: string[];\n /** Maps parent value to ordered list of child values */\n childrenOf: Map<string, string[]>;\n}\n\ninterface TreeNodeElementProps {\n value: string;\n disabled?: boolean;\n children?: ReactNode;\n}\n\nfunction isFragmentElement(\n child: ReactNode,\n): child is ReactElement<{ children?: ReactNode }> {\n return (\n isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n );\n}\n\nexport function isTreeNodeElement(\n child: ReactNode,\n): child is ReactElement<TreeNodeElementProps> {\n return (\n isValidElement<TreeNodeElementProps>(child) &&\n typeof child.props.value === \"string\"\n );\n}\n\nexport function flattenTreeNodeChildren(children: ReactNode): ReactNode[] {\n const flattenedChildren: ReactNode[] = [];\n\n Children.forEach(children, (child) => {\n if (isFragmentElement(child)) {\n flattenedChildren.push(...flattenTreeNodeChildren(child.props.children));\n } else if (\n child !== null &&\n child !== undefined &&\n typeof child !== \"boolean\"\n ) {\n flattenedChildren.push(child);\n }\n });\n\n return flattenedChildren;\n}\n\nfunction getTreeNodeElements(\n children: ReactNode,\n): ReactElement<TreeNodeElementProps>[] {\n return flattenTreeNodeChildren(children).filter(isTreeNodeElement);\n}\n\nexport function buildTreeModel(children: ReactNode): TreeModel {\n const nodes = new Map<string, TreeNodeMeta>();\n const rootValues: string[] = [];\n const childrenOf = new Map<string, string[]>();\n\n function traverse(\n reactChildren: ReactNode,\n parentValue?: string,\n parentDisabled = false,\n ): void {\n const treeNodeChildren = getTreeNodeElements(reactChildren);\n const siblingValues: string[] = [];\n\n for (const child of treeNodeChildren) {\n const value = child.props.value;\n const childTreeNodes = getTreeNodeElements(child.props.children);\n const hasChildren = childTreeNodes.length > 0;\n const disabled = parentDisabled || Boolean(child.props.disabled);\n\n nodes.set(value, {\n value,\n parentValue,\n hasChildren,\n disabled,\n });\n\n siblingValues.push(value);\n\n if (hasChildren) {\n traverse(child.props.children, value, disabled);\n }\n }\n\n if (parentValue !== undefined) {\n childrenOf.set(parentValue, siblingValues);\n } else {\n rootValues.push(...siblingValues);\n }\n }\n\n traverse(children);\n\n return { nodes, rootValues, childrenOf };\n}\n"],"names":["isValidElement","Fragment","Children"],"mappings":";;;;AA8BA,SAAS,kBACP,KAAA,EACiD;AACjD,EAAA,OACEA,oBAAA,CAAyC,KAAK,CAAA,IAAK,KAAA,CAAM,IAAA,KAASC,cAAA;AAEtE;AAEO,SAAS,kBACd,KAAA,EAC6C;AAC7C,EAAA,OACED,qBAAqC,KAAK,CAAA,IAC1C,OAAO,KAAA,CAAM,MAAM,KAAA,KAAU,QAAA;AAEjC;AAEO,SAAS,wBAAwB,QAAA,EAAkC;AACxE,EAAA,MAAM,oBAAiC,EAAC;AAExC,EAAAE,cAAA,CAAS,OAAA,CAAQ,QAAA,EAAU,CAAC,KAAA,KAAU;AACpC,IAAA,IAAI,iBAAA,CAAkB,KAAK,CAAA,EAAG;AAC5B,MAAA,iBAAA,CAAkB,KAAK,GAAG,uBAAA,CAAwB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,IACzE,WACE,KAAA,KAAU,IAAA,IACV,UAAU,MAAA,IACV,OAAO,UAAU,SAAA,EACjB;AACA,MAAA,iBAAA,CAAkB,KAAK,KAAK,CAAA;AAAA,IAC9B;AAAA,EACF,CAAC,CAAA;AAED,EAAA,OAAO,iBAAA;AACT;AAEA,SAAS,oBACP,QAAA,EACsC;AACtC,EAAA,OAAO,uBAAA,CAAwB,QAAQ,CAAA,CAAE,MAAA,CAAO,iBAAiB,CAAA;AACnE;AAEO,SAAS,eAAe,QAAA,EAAgC;AAC7D,EAAA,MAAM,KAAA,uBAAY,GAAA,EAA0B;AAC5C,EAAA,MAAM,aAAuB,EAAC;AAC9B,EAAA,MAAM,UAAA,uBAAiB,GAAA,EAAsB;AAE7C,EAAA,SAAS,QAAA,CACP,aAAA,EACA,WAAA,EACA,cAAA,GAAiB,KAAA,EACX;AACN,IAAA,MAAM,gBAAA,GAAmB,oBAAoB,aAAa,CAAA;AAC1D,IAAA,MAAM,gBAA0B,EAAC;AAEjC,IAAA,KAAA,MAAW,SAAS,gBAAA,EAAkB;AACpC,MAAA,MAAM,KAAA,GAAQ,MAAM,KAAA,CAAM,KAAA;AAC1B,MAAA,MAAM,cAAA,GAAiB,mBAAA,CAAoB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAC/D,MAAA,MAAM,WAAA,GAAc,eAAe,MAAA,GAAS,CAAA;AAC5C,MAAA,MAAM,QAAA,GAAW,cAAA,IAAkB,OAAA,CAAQ,KAAA,CAAM,MAAM,QAAQ,CAAA;AAE/D,MAAA,KAAA,CAAM,IAAI,KAAA,EAAO;AAAA,QACf,KAAA;AAAA,QACA,WAAA;AAAA,QACA,WAAA;AAAA,QACA;AAAA,OACD,CAAA;AAED,MAAA,aAAA,CAAc,KAAK,KAAK,CAAA;AAExB,MAAA,IAAI,WAAA,EAAa;AACf,QAAA,QAAA,CAAS,KAAA,CAAM,KAAA,CAAM,QAAA,EAAU,KAAA,EAAO,QAAQ,CAAA;AAAA,MAChD;AAAA,IACF;AAEA,IAAA,IAAI,gBAAgB,MAAA,EAAW;AAC7B,MAAA,UAAA,CAAW,GAAA,CAAI,aAAa,aAAa,CAAA;AAAA,IAC3C,CAAA,MAAO;AACL,MAAA,UAAA,CAAW,IAAA,CAAK,GAAG,aAAa,CAAA;AAAA,IAClC;AAAA,EACF;AAEA,EAAA,QAAA,CAAS,QAAQ,CAAA;AAEjB,EAAA,OAAO,EAAE,KAAA,EAAO,UAAA,EAAY,UAAA,EAAW;AACzC;;;;;;"}
|
package/dist-cjs/tree/useTree.js
DELETED
|
@@ -1,337 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var core = require('@salt-ds/core');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var treeModel = require('./treeModel.js');
|
|
6
|
-
|
|
7
|
-
function arraysEqual(a, b) {
|
|
8
|
-
if (a.length !== b.length) {
|
|
9
|
-
return false;
|
|
10
|
-
}
|
|
11
|
-
return a.every((value, index) => value === b[index]);
|
|
12
|
-
}
|
|
13
|
-
function expandSelectionWithDescendants(selection, model, disabledIds) {
|
|
14
|
-
const expanded = new Set(selection);
|
|
15
|
-
function addDescendants(parentValue) {
|
|
16
|
-
const children = model.childrenOf.get(parentValue) ?? [];
|
|
17
|
-
for (const child of children) {
|
|
18
|
-
if (!disabledIds.has(child)) {
|
|
19
|
-
expanded.add(child);
|
|
20
|
-
addDescendants(child);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
for (const value of selection) {
|
|
25
|
-
addDescendants(value);
|
|
26
|
-
}
|
|
27
|
-
return Array.from(expanded);
|
|
28
|
-
}
|
|
29
|
-
function expandSelectionUpwards(selection, model, disabledIds) {
|
|
30
|
-
const selectedSet = new Set(selection);
|
|
31
|
-
for (const [value, meta] of model.nodes) {
|
|
32
|
-
if (meta.hasChildren && !selectedSet.has(value) && !disabledIds.has(value)) {
|
|
33
|
-
const children = model.childrenOf.get(value) ?? [];
|
|
34
|
-
const enabledChildren = children.filter((c) => !disabledIds.has(c));
|
|
35
|
-
if (enabledChildren.length > 0 && enabledChildren.every((c) => selectedSet.has(c))) {
|
|
36
|
-
selectedSet.add(value);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
return Array.from(selectedSet);
|
|
41
|
-
}
|
|
42
|
-
function useTree(props) {
|
|
43
|
-
const {
|
|
44
|
-
defaultExpanded = [],
|
|
45
|
-
expanded: expandedProp,
|
|
46
|
-
onExpandedChange,
|
|
47
|
-
defaultSelected = [],
|
|
48
|
-
selected: selectedProp,
|
|
49
|
-
onSelectionChange,
|
|
50
|
-
multiselect = false,
|
|
51
|
-
disabled = false,
|
|
52
|
-
children
|
|
53
|
-
} = props;
|
|
54
|
-
const clampedDefaultSelected = multiselect ? defaultSelected : defaultSelected.slice(0, 1);
|
|
55
|
-
const clampedSelectedProp = selectedProp && !multiselect ? selectedProp.slice(0, 1) : selectedProp;
|
|
56
|
-
const treeModel$1 = react.useMemo(() => treeModel.buildTreeModel(children), [children]);
|
|
57
|
-
const elementsRef = react.useRef(/* @__PURE__ */ new Map());
|
|
58
|
-
const suppressUncontrolledSelectionExpansionRef = react.useRef(false);
|
|
59
|
-
const disabledIdsSet = react.useMemo(() => {
|
|
60
|
-
const set = /* @__PURE__ */ new Set();
|
|
61
|
-
for (const [value, meta] of treeModel$1.nodes) {
|
|
62
|
-
if (meta.disabled) set.add(value);
|
|
63
|
-
}
|
|
64
|
-
return set;
|
|
65
|
-
}, [treeModel$1]);
|
|
66
|
-
const [expandedArray, setExpandedArray] = core.useControlled({
|
|
67
|
-
controlled: expandedProp,
|
|
68
|
-
default: defaultExpanded,
|
|
69
|
-
name: "Tree",
|
|
70
|
-
state: "expanded"
|
|
71
|
-
});
|
|
72
|
-
const expandedState = react.useMemo(() => new Set(expandedArray), [expandedArray]);
|
|
73
|
-
const expandedDefaultSelected = react.useMemo(() => {
|
|
74
|
-
if (!multiselect || clampedDefaultSelected.length === 0) {
|
|
75
|
-
return clampedDefaultSelected;
|
|
76
|
-
}
|
|
77
|
-
let expanded = expandSelectionWithDescendants(
|
|
78
|
-
clampedDefaultSelected,
|
|
79
|
-
treeModel$1,
|
|
80
|
-
disabledIdsSet
|
|
81
|
-
);
|
|
82
|
-
expanded = expandSelectionUpwards(expanded, treeModel$1, disabledIdsSet);
|
|
83
|
-
return expanded;
|
|
84
|
-
}, [clampedDefaultSelected, treeModel$1, disabledIdsSet, multiselect]);
|
|
85
|
-
const [selectedState, setSelectedState, selectedControlled] = core.useControlled({
|
|
86
|
-
controlled: clampedSelectedProp,
|
|
87
|
-
default: expandedDefaultSelected,
|
|
88
|
-
name: "Tree",
|
|
89
|
-
state: "selected"
|
|
90
|
-
});
|
|
91
|
-
const setVisibleSelectionState = react.useCallback((selection) => {
|
|
92
|
-
suppressUncontrolledSelectionExpansionRef.current = true;
|
|
93
|
-
setSelectedState(selection);
|
|
94
|
-
}, []);
|
|
95
|
-
const selectedSet = react.useMemo(() => new Set(selectedState), [selectedState]);
|
|
96
|
-
const [activeNode, setActiveNode] = react.useState(void 0);
|
|
97
|
-
const registerElement = react.useCallback((value, element) => {
|
|
98
|
-
elementsRef.current.set(value, element);
|
|
99
|
-
return () => {
|
|
100
|
-
if (elementsRef.current.get(value) === element) {
|
|
101
|
-
elementsRef.current.delete(value);
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
}, []);
|
|
105
|
-
const getElement = react.useCallback((value) => {
|
|
106
|
-
return elementsRef.current.get(value);
|
|
107
|
-
}, []);
|
|
108
|
-
const getNodeMeta = react.useCallback(
|
|
109
|
-
(value) => {
|
|
110
|
-
return treeModel$1.nodes.get(value);
|
|
111
|
-
},
|
|
112
|
-
[treeModel$1]
|
|
113
|
-
);
|
|
114
|
-
const getParent = react.useCallback(
|
|
115
|
-
(value) => {
|
|
116
|
-
var _a;
|
|
117
|
-
return (_a = treeModel$1.nodes.get(value)) == null ? void 0 : _a.parentValue;
|
|
118
|
-
},
|
|
119
|
-
[treeModel$1]
|
|
120
|
-
);
|
|
121
|
-
const getChildren = react.useCallback(
|
|
122
|
-
(parentValue) => {
|
|
123
|
-
return treeModel$1.childrenOf.get(parentValue) ?? [];
|
|
124
|
-
},
|
|
125
|
-
[treeModel$1]
|
|
126
|
-
);
|
|
127
|
-
const getDescendants = react.useCallback(
|
|
128
|
-
(value) => {
|
|
129
|
-
const descendants = [];
|
|
130
|
-
function traverse(parentValue) {
|
|
131
|
-
const children2 = treeModel$1.childrenOf.get(parentValue) ?? [];
|
|
132
|
-
for (const child of children2) {
|
|
133
|
-
if (!disabledIdsSet.has(child)) {
|
|
134
|
-
descendants.push(child);
|
|
135
|
-
traverse(child);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
traverse(value);
|
|
140
|
-
return descendants;
|
|
141
|
-
},
|
|
142
|
-
[treeModel$1, disabledIdsSet]
|
|
143
|
-
);
|
|
144
|
-
const getAncestors = react.useCallback(
|
|
145
|
-
(value) => {
|
|
146
|
-
var _a, _b;
|
|
147
|
-
const ancestors = [];
|
|
148
|
-
let current = (_a = treeModel$1.nodes.get(value)) == null ? void 0 : _a.parentValue;
|
|
149
|
-
while (current) {
|
|
150
|
-
ancestors.push(current);
|
|
151
|
-
current = (_b = treeModel$1.nodes.get(current)) == null ? void 0 : _b.parentValue;
|
|
152
|
-
}
|
|
153
|
-
return ancestors;
|
|
154
|
-
},
|
|
155
|
-
[treeModel$1]
|
|
156
|
-
);
|
|
157
|
-
const toggleExpanded = react.useCallback(
|
|
158
|
-
(event, value) => {
|
|
159
|
-
const isExpanding = !expandedState.has(value);
|
|
160
|
-
const newExpanded = isExpanding ? [...expandedArray, value] : expandedArray.filter((v) => v !== value);
|
|
161
|
-
setExpandedArray(newExpanded);
|
|
162
|
-
onExpandedChange == null ? void 0 : onExpandedChange(event, newExpanded);
|
|
163
|
-
},
|
|
164
|
-
[expandedArray, expandedState, onExpandedChange]
|
|
165
|
-
);
|
|
166
|
-
const calculateIndeterminateState = react.useCallback(
|
|
167
|
-
(selected) => {
|
|
168
|
-
const indeterminate = /* @__PURE__ */ new Set();
|
|
169
|
-
const selectedSet2 = new Set(selected);
|
|
170
|
-
for (const selectedValue of selected) {
|
|
171
|
-
let current = getParent(selectedValue);
|
|
172
|
-
while (current) {
|
|
173
|
-
const children2 = getChildren(current);
|
|
174
|
-
const enabledChildren = children2.filter(
|
|
175
|
-
(child) => !disabledIdsSet.has(child)
|
|
176
|
-
);
|
|
177
|
-
if (enabledChildren.length === 0) {
|
|
178
|
-
current = getParent(current);
|
|
179
|
-
continue;
|
|
180
|
-
}
|
|
181
|
-
const selectedChildren = enabledChildren.filter(
|
|
182
|
-
(child) => selectedSet2.has(child)
|
|
183
|
-
);
|
|
184
|
-
const allChildrenSelected = selectedChildren.length === enabledChildren.length;
|
|
185
|
-
const someChildrenSelected = selectedChildren.length > 0;
|
|
186
|
-
const someChildrenIndeterminate = enabledChildren.some(
|
|
187
|
-
(child) => indeterminate.has(child)
|
|
188
|
-
);
|
|
189
|
-
if (someChildrenIndeterminate || someChildrenSelected && !allChildrenSelected) {
|
|
190
|
-
indeterminate.add(current);
|
|
191
|
-
}
|
|
192
|
-
current = getParent(current);
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
return indeterminate;
|
|
196
|
-
},
|
|
197
|
-
[getParent, getChildren, disabledIdsSet]
|
|
198
|
-
);
|
|
199
|
-
const indeterminateState = react.useMemo(() => {
|
|
200
|
-
const state = multiselect ? calculateIndeterminateState(selectedState) : /* @__PURE__ */ new Set();
|
|
201
|
-
return state;
|
|
202
|
-
}, [multiselect, selectedState, calculateIndeterminateState]);
|
|
203
|
-
react.useEffect(() => {
|
|
204
|
-
if (suppressUncontrolledSelectionExpansionRef.current) {
|
|
205
|
-
suppressUncontrolledSelectionExpansionRef.current = false;
|
|
206
|
-
return;
|
|
207
|
-
}
|
|
208
|
-
if (selectedControlled || !multiselect || selectedState.length === 0) {
|
|
209
|
-
return;
|
|
210
|
-
}
|
|
211
|
-
let expanded = expandSelectionWithDescendants(
|
|
212
|
-
selectedState,
|
|
213
|
-
treeModel$1,
|
|
214
|
-
disabledIdsSet
|
|
215
|
-
);
|
|
216
|
-
expanded = expandSelectionUpwards(expanded, treeModel$1, disabledIdsSet);
|
|
217
|
-
if (!arraysEqual(selectedState, expanded)) {
|
|
218
|
-
setSelectedState(expanded);
|
|
219
|
-
}
|
|
220
|
-
}, [
|
|
221
|
-
selectedControlled,
|
|
222
|
-
multiselect,
|
|
223
|
-
selectedState,
|
|
224
|
-
treeModel$1,
|
|
225
|
-
disabledIdsSet
|
|
226
|
-
]);
|
|
227
|
-
const updateAncestors = (currentSet, value) => {
|
|
228
|
-
const ancestors = getAncestors(value);
|
|
229
|
-
for (const ancestor of ancestors) {
|
|
230
|
-
const children2 = treeModel$1.childrenOf.get(ancestor) ?? [];
|
|
231
|
-
const enabledChildren = children2.filter(
|
|
232
|
-
(child) => !disabledIdsSet.has(child)
|
|
233
|
-
);
|
|
234
|
-
if (enabledChildren.length === 0) continue;
|
|
235
|
-
const allSelected = enabledChildren.every(
|
|
236
|
-
(child) => currentSet.has(child)
|
|
237
|
-
);
|
|
238
|
-
if (allSelected) {
|
|
239
|
-
currentSet.add(ancestor);
|
|
240
|
-
} else {
|
|
241
|
-
currentSet.delete(ancestor);
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
return Array.from(currentSet);
|
|
245
|
-
};
|
|
246
|
-
const getMultiSelectState = (value) => {
|
|
247
|
-
const currentSet = new Set(selectedState);
|
|
248
|
-
const descendants = getDescendants(value);
|
|
249
|
-
if (currentSet.has(value)) {
|
|
250
|
-
currentSet.delete(value);
|
|
251
|
-
const descendantSet = new Set(descendants);
|
|
252
|
-
for (const d of descendantSet) {
|
|
253
|
-
currentSet.delete(d);
|
|
254
|
-
}
|
|
255
|
-
} else {
|
|
256
|
-
currentSet.add(value);
|
|
257
|
-
for (const d of descendants) {
|
|
258
|
-
if (!currentSet.has(d)) {
|
|
259
|
-
currentSet.add(d);
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
return updateAncestors(currentSet, value);
|
|
264
|
-
};
|
|
265
|
-
const select = react.useCallback(
|
|
266
|
-
(event, value) => {
|
|
267
|
-
if (disabled || disabledIdsSet.has(value)) return;
|
|
268
|
-
let newSelected;
|
|
269
|
-
if (multiselect) {
|
|
270
|
-
newSelected = getMultiSelectState(value);
|
|
271
|
-
} else {
|
|
272
|
-
const isCurrentlySelected = selectedSet.has(value);
|
|
273
|
-
newSelected = isCurrentlySelected ? [] : [value];
|
|
274
|
-
}
|
|
275
|
-
setSelectedState(newSelected);
|
|
276
|
-
onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
|
|
277
|
-
},
|
|
278
|
-
[disabled, disabledIdsSet, multiselect, selectedState, onSelectionChange]
|
|
279
|
-
);
|
|
280
|
-
const visibleNodes = react.useMemo(() => {
|
|
281
|
-
const visible = [];
|
|
282
|
-
function traverse(values) {
|
|
283
|
-
for (const value of values) {
|
|
284
|
-
visible.push(value);
|
|
285
|
-
const nodeMeta = treeModel$1.nodes.get(value);
|
|
286
|
-
if ((nodeMeta == null ? void 0 : nodeMeta.hasChildren) && expandedState.has(value)) {
|
|
287
|
-
const children2 = treeModel$1.childrenOf.get(value) ?? [];
|
|
288
|
-
traverse(children2);
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
traverse(treeModel$1.rootValues);
|
|
293
|
-
return visible;
|
|
294
|
-
}, [treeModel$1, expandedState]);
|
|
295
|
-
const tabbableNodeId = react.useMemo(() => {
|
|
296
|
-
if (activeNode) {
|
|
297
|
-
return activeNode;
|
|
298
|
-
}
|
|
299
|
-
const firstSelectedVisible = visibleNodes.find(
|
|
300
|
-
(node) => selectedSet.has(node)
|
|
301
|
-
);
|
|
302
|
-
if (firstSelectedVisible !== void 0) {
|
|
303
|
-
return firstSelectedVisible;
|
|
304
|
-
}
|
|
305
|
-
return visibleNodes[0];
|
|
306
|
-
}, [activeNode, selectedSet, visibleNodes]);
|
|
307
|
-
return {
|
|
308
|
-
expandedArray,
|
|
309
|
-
setExpandedArray,
|
|
310
|
-
expandedState,
|
|
311
|
-
toggleExpanded,
|
|
312
|
-
selectedState,
|
|
313
|
-
selectedSet,
|
|
314
|
-
setSelectedState,
|
|
315
|
-
setVisibleSelectionState,
|
|
316
|
-
select,
|
|
317
|
-
multiselect,
|
|
318
|
-
disabled,
|
|
319
|
-
disabledIdsSet,
|
|
320
|
-
treeModel: treeModel$1,
|
|
321
|
-
getNodeMeta,
|
|
322
|
-
getParent,
|
|
323
|
-
getChildren,
|
|
324
|
-
getDescendants,
|
|
325
|
-
getAncestors,
|
|
326
|
-
visibleNodes,
|
|
327
|
-
tabbableNodeId,
|
|
328
|
-
registerElement,
|
|
329
|
-
getElement,
|
|
330
|
-
activeNode,
|
|
331
|
-
setActiveNode,
|
|
332
|
-
indeterminateState
|
|
333
|
-
};
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
exports.useTree = useTree;
|
|
337
|
-
//# sourceMappingURL=useTree.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTree.js","sources":["../src/tree/useTree.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type ReactNode,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { buildTreeModel, type TreeModel, type TreeNodeMeta } from \"./treeModel\";\n\nexport type { TreeModel, TreeNodeMeta } from \"./treeModel\";\n\nexport interface UseTreeProps {\n /**\n * Default expanded nodes (uncontrolled)\n */\n defaultExpanded?: string[];\n /**\n * Expanded nodes (controlled)\n */\n expanded?: string[];\n /**\n * Callback on expanded nodes change\n */\n onExpandedChange?: (event: SyntheticEvent, expanded: string[]) => void;\n /**\n * Default selected nodes (uncontrolled)\n */\n defaultSelected?: string[];\n /**\n * Selected nodes\n */\n selected?: string[];\n /**\n * Callback on selected nodes change\n */\n onSelectionChange?: (event: SyntheticEvent, selected: string[]) => void;\n /**\n * Sets multiselect mode with checkboxes and allows for multiple node selection\n */\n multiselect?: boolean;\n /**\n * Sets tree to disabled state, preventing all interaction\n */\n disabled?: boolean;\n /**\n * Tree children used to build the tree model for traversal an state management\n */\n children?: ReactNode;\n}\n\nfunction arraysEqual(a: string[], b: string[]): boolean {\n if (a.length !== b.length) {\n return false;\n }\n\n return a.every((value, index) => value === b[index]);\n}\n\nfunction expandSelectionWithDescendants(\n selection: string[],\n model: TreeModel,\n disabledIds: Set<string>,\n): string[] {\n const expanded = new Set(selection);\n\n function addDescendants(parentValue: string): void {\n const children = model.childrenOf.get(parentValue) ?? [];\n for (const child of children) {\n if (!disabledIds.has(child)) {\n expanded.add(child);\n addDescendants(child);\n }\n }\n }\n\n for (const value of selection) {\n addDescendants(value);\n }\n\n return Array.from(expanded);\n}\n\nfunction expandSelectionUpwards(\n selection: string[],\n model: TreeModel,\n disabledIds: Set<string>,\n): string[] {\n const selectedSet = new Set(selection);\n\n for (const [value, meta] of model.nodes) {\n if (\n meta.hasChildren &&\n !selectedSet.has(value) &&\n !disabledIds.has(value)\n ) {\n const children = model.childrenOf.get(value) ?? [];\n const enabledChildren = children.filter((c) => !disabledIds.has(c));\n\n if (\n enabledChildren.length > 0 &&\n enabledChildren.every((c) => selectedSet.has(c))\n ) {\n selectedSet.add(value);\n }\n }\n }\n\n return Array.from(selectedSet);\n}\n\nexport function useTree(props: UseTreeProps) {\n const {\n defaultExpanded = [],\n expanded: expandedProp,\n onExpandedChange,\n defaultSelected = [],\n selected: selectedProp,\n onSelectionChange,\n multiselect = false,\n disabled = false,\n children,\n } = props;\n\n const clampedDefaultSelected = multiselect\n ? defaultSelected\n : defaultSelected.slice(0, 1);\n\n const clampedSelectedProp =\n selectedProp && !multiselect ? selectedProp.slice(0, 1) : selectedProp;\n\n const treeModel = useMemo(() => buildTreeModel(children), [children]);\n const elementsRef = useRef<Map<string, HTMLElement>>(new Map());\n const suppressUncontrolledSelectionExpansionRef = useRef(false);\n\n const disabledIdsSet = useMemo(() => {\n const set = new Set<string>();\n for (const [value, meta] of treeModel.nodes) {\n if (meta.disabled) set.add(value);\n }\n return set;\n }, [treeModel]);\n\n const [expandedArray, setExpandedArray] = useControlled({\n controlled: expandedProp,\n default: defaultExpanded,\n name: \"Tree\",\n state: \"expanded\",\n });\n\n // Convert array to Set for more efficient lookups during rendering and nav\n const expandedState = useMemo(() => new Set(expandedArray), [expandedArray]);\n\n const expandedDefaultSelected = useMemo(() => {\n if (!multiselect || clampedDefaultSelected.length === 0) {\n return clampedDefaultSelected;\n }\n\n let expanded = expandSelectionWithDescendants(\n clampedDefaultSelected,\n treeModel,\n disabledIdsSet,\n );\n\n expanded = expandSelectionUpwards(expanded, treeModel, disabledIdsSet);\n\n return expanded;\n }, [clampedDefaultSelected, treeModel, disabledIdsSet, multiselect]);\n\n const [selectedState, setSelectedState, selectedControlled] = useControlled({\n controlled: clampedSelectedProp,\n default: expandedDefaultSelected,\n name: \"Tree\",\n state: \"selected\",\n });\n\n const setVisibleSelectionState = useCallback((selection: string[]) => {\n suppressUncontrolledSelectionExpansionRef.current = true;\n setSelectedState(selection);\n }, []);\n\n const selectedSet = useMemo(() => new Set(selectedState), [selectedState]);\n\n const [activeNode, setActiveNode] = useState<string | undefined>(undefined);\n\n const registerElement = useCallback((value: string, element: HTMLElement) => {\n elementsRef.current.set(value, element);\n\n return () => {\n if (elementsRef.current.get(value) === element) {\n elementsRef.current.delete(value);\n }\n };\n }, []);\n\n const getElement = useCallback((value: string): HTMLElement | undefined => {\n return elementsRef.current.get(value);\n }, []);\n\n const getNodeMeta = useCallback(\n (value: string): TreeNodeMeta | undefined => {\n return treeModel.nodes.get(value);\n },\n [treeModel],\n );\n\n const getParent = useCallback(\n (value: string): string | undefined => {\n return treeModel.nodes.get(value)?.parentValue;\n },\n [treeModel],\n );\n\n const getChildren = useCallback(\n (parentValue: string): string[] => {\n return treeModel.childrenOf.get(parentValue) ?? [];\n },\n [treeModel],\n );\n\n // Depth-first search (with pre-order traversal)\n const getDescendants = useCallback(\n (value: string): string[] => {\n const descendants: string[] = [];\n\n function traverse(parentValue: string): void {\n const children = treeModel.childrenOf.get(parentValue) ?? [];\n for (const child of children) {\n if (!disabledIdsSet.has(child)) {\n descendants.push(child);\n traverse(child);\n }\n }\n }\n\n traverse(value);\n return descendants;\n },\n [treeModel, disabledIdsSet],\n );\n\n const getAncestors = useCallback(\n (value: string): string[] => {\n const ancestors: string[] = [];\n let current = treeModel.nodes.get(value)?.parentValue;\n\n while (current) {\n ancestors.push(current);\n current = treeModel.nodes.get(current)?.parentValue;\n }\n\n return ancestors;\n },\n [treeModel],\n );\n\n const toggleExpanded = useCallback(\n (event: SyntheticEvent, value: string) => {\n const isExpanding = !expandedState.has(value);\n const newExpanded = isExpanding\n ? [...expandedArray, value]\n : expandedArray.filter((v) => v !== value);\n\n setExpandedArray(newExpanded);\n onExpandedChange?.(event, newExpanded);\n },\n [expandedArray, expandedState, onExpandedChange],\n );\n\n const calculateIndeterminateState = useCallback(\n (selected: string[]): Set<string> => {\n const indeterminate = new Set<string>();\n const selectedSet = new Set(selected);\n\n for (const selectedValue of selected) {\n let current = getParent(selectedValue);\n\n while (current) {\n const children = getChildren(current);\n const enabledChildren = children.filter(\n (child) => !disabledIdsSet.has(child),\n );\n\n if (enabledChildren.length === 0) {\n current = getParent(current);\n continue;\n }\n\n const selectedChildren = enabledChildren.filter((child) =>\n selectedSet.has(child),\n );\n const allChildrenSelected =\n selectedChildren.length === enabledChildren.length;\n const someChildrenSelected = selectedChildren.length > 0;\n\n const someChildrenIndeterminate = enabledChildren.some((child) =>\n indeterminate.has(child),\n );\n\n if (\n someChildrenIndeterminate ||\n (someChildrenSelected && !allChildrenSelected)\n ) {\n indeterminate.add(current);\n }\n\n current = getParent(current);\n }\n }\n\n return indeterminate;\n },\n [getParent, getChildren, disabledIdsSet],\n );\n\n const indeterminateState = useMemo(() => {\n const state = multiselect\n ? calculateIndeterminateState(selectedState)\n : new Set<string>();\n return state;\n }, [multiselect, selectedState, calculateIndeterminateState]);\n\n useEffect(() => {\n if (suppressUncontrolledSelectionExpansionRef.current) {\n suppressUncontrolledSelectionExpansionRef.current = false;\n return;\n }\n\n if (selectedControlled || !multiselect || selectedState.length === 0) {\n return;\n }\n\n let expanded = expandSelectionWithDescendants(\n selectedState,\n treeModel,\n disabledIdsSet,\n );\n expanded = expandSelectionUpwards(expanded, treeModel, disabledIdsSet);\n\n if (!arraysEqual(selectedState, expanded)) {\n setSelectedState(expanded);\n }\n }, [\n selectedControlled,\n multiselect,\n selectedState,\n treeModel,\n disabledIdsSet,\n ]);\n\n const updateAncestors = (\n currentSet: Set<string>,\n value: string,\n ): string[] => {\n const ancestors = getAncestors(value);\n\n for (const ancestor of ancestors) {\n const children = treeModel.childrenOf.get(ancestor) ?? [];\n const enabledChildren = children.filter(\n (child) => !disabledIdsSet.has(child),\n );\n\n if (enabledChildren.length === 0) continue;\n\n const allSelected = enabledChildren.every((child) =>\n currentSet.has(child),\n );\n\n if (allSelected) {\n currentSet.add(ancestor);\n } else {\n currentSet.delete(ancestor);\n }\n }\n\n return Array.from(currentSet);\n };\n\n const getMultiSelectState = (value: string) => {\n const currentSet = new Set(selectedState);\n const descendants = getDescendants(value);\n\n if (currentSet.has(value)) {\n currentSet.delete(value);\n const descendantSet = new Set(descendants);\n for (const d of descendantSet) {\n currentSet.delete(d);\n }\n } else {\n currentSet.add(value);\n for (const d of descendants) {\n if (!currentSet.has(d)) {\n currentSet.add(d);\n }\n }\n }\n\n return updateAncestors(currentSet, value);\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: getMultiSelectState/updateAncestors are intentionally not memoized - their captured values (selectedState, treeModel, etc.) are already in deps\n const select = useCallback(\n (event: SyntheticEvent, value: string) => {\n if (disabled || disabledIdsSet.has(value)) return;\n\n let newSelected: string[];\n\n if (multiselect) {\n newSelected = getMultiSelectState(value);\n } else {\n const isCurrentlySelected = selectedSet.has(value);\n newSelected = isCurrentlySelected ? [] : [value];\n }\n\n setSelectedState(newSelected);\n onSelectionChange?.(event, newSelected);\n },\n [disabled, disabledIdsSet, multiselect, selectedState, onSelectionChange],\n );\n\n // Visible nodes in depth-first order matching visual tree order\n const visibleNodes = useMemo((): string[] => {\n const visible: string[] = [];\n\n function traverse(values: string[]): void {\n for (const value of values) {\n visible.push(value);\n\n const nodeMeta = treeModel.nodes.get(value);\n if (nodeMeta?.hasChildren && expandedState.has(value)) {\n const children = treeModel.childrenOf.get(value) ?? [];\n traverse(children);\n }\n }\n }\n\n traverse(treeModel.rootValues);\n return visible;\n }, [treeModel, expandedState]);\n\n const tabbableNodeId = useMemo((): string | undefined => {\n if (activeNode) {\n return activeNode;\n }\n\n const firstSelectedVisible = visibleNodes.find((node) =>\n selectedSet.has(node),\n );\n\n if (firstSelectedVisible !== undefined) {\n return firstSelectedVisible;\n }\n\n return visibleNodes[0];\n }, [activeNode, selectedSet, visibleNodes]);\n\n return {\n expandedArray,\n setExpandedArray,\n expandedState,\n toggleExpanded,\n selectedState,\n selectedSet,\n setSelectedState,\n setVisibleSelectionState,\n select,\n multiselect,\n disabled,\n disabledIdsSet,\n treeModel,\n getNodeMeta,\n getParent,\n getChildren,\n getDescendants,\n getAncestors,\n visibleNodes,\n tabbableNodeId,\n registerElement,\n getElement,\n activeNode,\n setActiveNode,\n indeterminateState,\n };\n}\n"],"names":["treeModel","useMemo","buildTreeModel","useRef","useControlled","useCallback","useState","children","selectedSet","useEffect"],"mappings":"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"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltSidePanel {\n --saltSidePanel-width: 300px;\n --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));\n --saltSidePanel-padding: var(--salt-spacing-300);\n /* Outer wrapper. Idle: a normal flex column whose width comes from\n --saltSidePanel-width (supports any CSS length, including %).\n During enter/exit animation: animates `width` between 0 and the\n panel width and clips the absolutely-positioned inner via\n `contain: paint`. The inner uses a JS-resolved px width during\n animation (--saltSidePanel-animation-width) so percentage widths\n don't compound against the animating outer. */\n position: relative;\n display: flex;\n flex-direction: column;\n flex: none;\n width: var(--saltSidePanel-width);\n height: 100%;\n min-height: 0;\n align-self: stretch;\n}\n\n.saltSidePanel-primary {\n --sidePanel-background: var(--salt-container-primary-background);\n --sidePanel-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltSidePanel-secondary {\n --sidePanel-background: var(--salt-container-secondary-background);\n --sidePanel-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltSidePanel-tertiary {\n --sidePanel-background: var(--salt-container-tertiary-background);\n --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltSidePanel-none {\n --sidePanel-background: none;\n --saltSidePanel-padding: var(--salt-spacing-200);\n}\n\n.saltSidePanel-inner {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n padding: var(--saltSidePanel-padding);\n width: 100%;\n background-color: var(--sidePanel-background, var(--salt-container-primary-background));\n}\n\n.saltSidePanel-left .saltSidePanel-inner {\n border-right: var(--sidePanel-border);\n}\n\n.saltSidePanel-right .saltSidePanel-inner {\n border-left: var(--sidePanel-border);\n}\n\n.saltSidePanel-none .saltSidePanel-inner {\n border: none;\n}\n\n/* Animation: outer becomes the gap + clip; inner is absolutely positioned\n and anchored to the gap's GROWING edge so the leading edge tracks the\n gap's expansion — content visibly pushes the sibling rather than being\n revealed in place. Left grows rightward → anchor inner right; right\n grows leftward → anchor inner left.\n\n During animation the outer's width is interpolating, so the inner can't\n rely on --saltSidePanel-width (which may be a percentage that would\n resolve against the animating outer). Instead the JS layer measures the\n resolved width once and exposes it as --saltSidePanel-animation-width\n (a px value) for the inner to use. */\n.saltSidePanel-enterAnimation,\n.saltSidePanel-exitAnimation {\n contain: paint;\n}\n\n.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n position: absolute;\n top: 0;\n bottom: 0;\n flex: none;\n width: var(--saltSidePanel-animation-width, var(--saltSidePanel-width));\n}\n\n.saltSidePanel-left.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-left.saltSidePanel-exitAnimation .saltSidePanel-inner {\n right: 0;\n}\n\n.saltSidePanel-right.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-right.saltSidePanel-exitAnimation .saltSidePanel-inner {\n left: 0;\n}\n\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n pointer-events: none;\n}\n\n.saltSidePanel-enterAnimation {\n animation: saltSidePanel-open var(--salt-duration-perceptible) var(--salt-animation-timing-function);\n}\n\n.saltSidePanel-exitAnimation {\n animation: saltSidePanel-close var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;\n}\n\n@keyframes saltSidePanel-open {\n from {\n width: 0;\n }\n}\n\n@keyframes saltSidePanel-close {\n to {\n width: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .saltSidePanel-enterAnimation,\n .saltSidePanel-exitAnimation {\n animation: none;\n }\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=SidePanel.css.js.map
|