@salt-ds/lab 1.0.0-alpha.86 → 1.0.0-alpha.88
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 +126 -0
- package/css/salt-lab.css +145 -212
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/common-hooks/useSelection.js +0 -2
- package/dist-cjs/common-hooks/useSelection.js.map +1 -1
- package/dist-cjs/contact-details/ContactDetails.css.js +1 -1
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-input/DateInputRange.js +2 -8
- package/dist-cjs/date-input/DateInputRange.js.map +1 -1
- package/dist-cjs/date-input/DateInputSingle.js +1 -1
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
- package/dist-cjs/index.js +6 -2
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list-deprecated/ListItem.js.map +1 -1
- package/dist-cjs/rating/Rating.css.js +1 -1
- package/dist-cjs/rating/Rating.js +8 -7
- package/dist-cjs/rating/Rating.js.map +1 -1
- package/dist-cjs/tabs-next/TabListNext.js +1 -1
- package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +2 -2
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-cjs/tree/Tree.css.js +1 -1
- package/dist-cjs/tree/Tree.js +274 -207
- package/dist-cjs/tree/Tree.js.map +1 -1
- package/dist-cjs/tree/TreeContext.js +31 -0
- package/dist-cjs/tree/TreeContext.js.map +1 -0
- package/dist-cjs/tree/TreeNode.css.js +1 -1
- package/dist-cjs/tree/TreeNode.js +86 -42
- package/dist-cjs/tree/TreeNode.js.map +1 -1
- package/dist-cjs/tree/TreeNodeExpansionIcon.css.js +6 -0
- package/dist-cjs/tree/TreeNodeExpansionIcon.css.js.map +1 -0
- package/dist-cjs/tree/TreeNodeExpansionIcon.js +62 -0
- package/dist-cjs/tree/TreeNodeExpansionIcon.js.map +1 -0
- package/dist-cjs/tree/TreeNodeLabel.css.js +6 -0
- package/dist-cjs/tree/TreeNodeLabel.css.js.map +1 -0
- package/dist-cjs/tree/TreeNodeLabel.js +26 -0
- package/dist-cjs/tree/TreeNodeLabel.js.map +1 -0
- package/dist-cjs/tree/TreeNodeTrigger.css.js +6 -0
- package/dist-cjs/tree/TreeNodeTrigger.css.js.map +1 -0
- package/dist-cjs/tree/TreeNodeTrigger.js +152 -0
- package/dist-cjs/tree/TreeNodeTrigger.js.map +1 -0
- package/dist-cjs/tree/useTree.js +305 -133
- package/dist-cjs/tree/useTree.js.map +1 -1
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js +1 -1
- package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js +1 -1
- package/dist-es/combo-box-deprecated/internal/useComboBox.js +1 -1
- package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js +1 -1
- package/dist-es/common-hooks/useCollectionItems.js +1 -1
- package/dist-es/common-hooks/useSelection.js +1 -2
- package/dist-es/common-hooks/useSelection.js.map +1 -1
- package/dist-es/contact-details/ContactDetails.css.js +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-input/DateInputRange.js +2 -8
- package/dist-es/date-input/DateInputRange.js.map +1 -1
- package/dist-es/date-input/DateInputSingle.js +1 -1
- package/dist-es/date-input/DateInputSingle.js.map +1 -1
- package/dist-es/dropdown/DropdownBase.js +1 -1
- package/dist-es/index.js +3 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/list-deprecated/ListItem.js.map +1 -1
- package/dist-es/rating/Rating.css.js +1 -1
- package/dist-es/rating/Rating.js +8 -7
- package/dist-es/rating/Rating.js.map +1 -1
- package/dist-es/tabs/drag-drop/useDragDropNaturalMovement.js +1 -1
- package/dist-es/tabs-next/TabListNext.js +1 -1
- package/dist-es/tabs-next/TabListNext.js.map +1 -1
- package/dist-es/tokenized-input/TokenizedInputBase.js +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.js +2 -2
- package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-es/tree/Tree.css.js +1 -1
- package/dist-es/tree/Tree.js +275 -208
- package/dist-es/tree/Tree.js.map +1 -1
- package/dist-es/tree/TreeContext.js +26 -0
- package/dist-es/tree/TreeContext.js.map +1 -0
- package/dist-es/tree/TreeNode.css.js +1 -1
- package/dist-es/tree/TreeNode.js +87 -43
- package/dist-es/tree/TreeNode.js.map +1 -1
- package/dist-es/tree/TreeNodeExpansionIcon.css.js +4 -0
- package/dist-es/tree/TreeNodeExpansionIcon.css.js.map +1 -0
- package/dist-es/tree/TreeNodeExpansionIcon.js +60 -0
- package/dist-es/tree/TreeNodeExpansionIcon.js.map +1 -0
- package/dist-es/tree/TreeNodeLabel.css.js +4 -0
- package/dist-es/tree/TreeNodeLabel.css.js.map +1 -0
- package/dist-es/tree/TreeNodeLabel.js +24 -0
- package/dist-es/tree/TreeNodeLabel.js.map +1 -0
- package/dist-es/tree/TreeNodeTrigger.css.js +4 -0
- package/dist-es/tree/TreeNodeTrigger.css.js.map +1 -0
- package/dist-es/tree/TreeNodeTrigger.js +150 -0
- package/dist-es/tree/TreeNodeTrigger.js.map +1 -0
- package/dist-es/tree/useTree.js +306 -134
- package/dist-es/tree/useTree.js.map +1 -1
- package/dist-types/date-input/DateInputRange.d.ts +1 -1
- package/dist-types/date-input/DateInputSingle.d.ts +1 -1
- package/dist-types/index.d.ts +0 -1
- package/dist-types/list-deprecated/ListItem.d.ts +1 -0
- package/dist-types/rating/Rating.d.ts +5 -6
- package/dist-types/tokenized-input/internal/InputPill.d.ts +1 -1
- package/dist-types/tokenized-input-next/internal/InputPill.d.ts +1 -1
- package/dist-types/tree/Tree.d.ts +36 -3
- package/dist-types/tree/TreeContext.d.ts +71 -0
- package/dist-types/tree/TreeNode.d.ts +23 -10
- package/dist-types/tree/TreeNodeExpansionIcon.d.ts +4 -0
- package/dist-types/tree/TreeNodeLabel.d.ts +4 -0
- package/dist-types/tree/TreeNodeTrigger.d.ts +8 -0
- package/dist-types/tree/index.d.ts +3 -0
- package/dist-types/tree/useTree.d.ts +79 -3
- package/package.json +3 -3
- package/dist-cjs/common-hooks/calcPreferredHeight.js +0 -27
- package/dist-cjs/common-hooks/calcPreferredHeight.js.map +0 -1
- package/dist-cjs/common-hooks/useAutoSizer.js +0 -33
- package/dist-cjs/common-hooks/useAutoSizer.js.map +0 -1
- package/dist-cjs/kbd/Kbd.css.js +0 -6
- package/dist-cjs/kbd/Kbd.css.js.map +0 -1
- package/dist-cjs/kbd/Kbd.js +0 -34
- package/dist-cjs/kbd/Kbd.js.map +0 -1
- package/dist-cjs/tree/use-tree-keyboard-navigation.js +0 -51
- package/dist-cjs/tree/use-tree-keyboard-navigation.js.map +0 -1
- package/dist-es/common-hooks/calcPreferredHeight.js +0 -25
- package/dist-es/common-hooks/calcPreferredHeight.js.map +0 -1
- package/dist-es/common-hooks/useAutoSizer.js +0 -31
- package/dist-es/common-hooks/useAutoSizer.js.map +0 -1
- package/dist-es/kbd/Kbd.css.js +0 -4
- package/dist-es/kbd/Kbd.css.js.map +0 -1
- package/dist-es/kbd/Kbd.js +0 -32
- package/dist-es/kbd/Kbd.js.map +0 -1
- package/dist-es/tree/use-tree-keyboard-navigation.js +0 -48
- package/dist-es/tree/use-tree-keyboard-navigation.js.map +0 -1
- package/dist-types/kbd/Kbd.d.ts +0 -8
- package/dist-types/kbd/index.d.ts +0 -1
- package/dist-types/tree/treeTypes.d.ts +0 -42
- package/dist-types/tree/use-tree-keyboard-navigation.d.ts +0 -15
package/dist-cjs/tree/useTree.js
CHANGED
|
@@ -1,159 +1,331 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var core = require('@salt-ds/core');
|
|
3
4
|
var react = require('react');
|
|
4
|
-
require('../common-hooks/collectionProvider.js');
|
|
5
|
-
require('../common-hooks/keyUtils.js');
|
|
6
|
-
var listDomUtils = require('../common-hooks/list-dom-utils.js');
|
|
7
|
-
require('@salt-ds/core');
|
|
8
|
-
var useCollapsibleGroups = require('../common-hooks/useCollapsibleGroups.js');
|
|
9
|
-
var useKeyboardNavigation = require('../common-hooks/useKeyboardNavigation.js');
|
|
10
|
-
var useSelection = require('../common-hooks/useSelection.js');
|
|
11
|
-
var useViewportTracking = require('../common-hooks/useViewportTracking.js');
|
|
12
|
-
var useTreeKeyboardNavigation = require('./use-tree-keyboard-navigation.js');
|
|
13
5
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
6
|
+
function buildTreeModel(children) {
|
|
7
|
+
const nodes = /* @__PURE__ */ new Map();
|
|
8
|
+
const rootValues = [];
|
|
9
|
+
const childrenOf = /* @__PURE__ */ new Map();
|
|
10
|
+
function traverse(reactChildren, parentValue, parentDisabled = false) {
|
|
11
|
+
const siblingValues = [];
|
|
12
|
+
react.Children.forEach(reactChildren, (child) => {
|
|
13
|
+
if (react.isValidElement(child) && typeof child.props.value === "string") {
|
|
14
|
+
const value = child.props.value;
|
|
15
|
+
const nodeChildren = child.props.children;
|
|
16
|
+
const hasChildren = react.Children.count(nodeChildren) > 0;
|
|
17
|
+
const disabled = parentDisabled || Boolean(child.props.disabled);
|
|
18
|
+
nodes.set(value, {
|
|
19
|
+
value,
|
|
20
|
+
parentValue,
|
|
21
|
+
hasChildren,
|
|
22
|
+
disabled
|
|
23
|
+
});
|
|
24
|
+
siblingValues.push(value);
|
|
25
|
+
if (hasChildren) {
|
|
26
|
+
traverse(nodeChildren, value, disabled);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
if (parentValue !== void 0) {
|
|
31
|
+
childrenOf.set(parentValue, siblingValues);
|
|
32
|
+
} else {
|
|
33
|
+
rootValues.push(...siblingValues);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
traverse(children);
|
|
37
|
+
return { nodes, rootValues, childrenOf };
|
|
38
|
+
}
|
|
39
|
+
function expandSelectionWithDescendants(selection, model, disabledIds) {
|
|
40
|
+
const expanded = new Set(selection);
|
|
41
|
+
function addDescendants(parentValue) {
|
|
42
|
+
const children = model.childrenOf.get(parentValue) ?? [];
|
|
43
|
+
for (const child of children) {
|
|
44
|
+
if (!disabledIds.has(child)) {
|
|
45
|
+
expanded.add(child);
|
|
46
|
+
addDescendants(child);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
for (const value of selection) {
|
|
51
|
+
addDescendants(value);
|
|
52
|
+
}
|
|
53
|
+
return Array.from(expanded);
|
|
54
|
+
}
|
|
55
|
+
function expandSelectionUpwards(selection, model, disabledIds) {
|
|
56
|
+
const selectedSet = new Set(selection);
|
|
57
|
+
for (const [value, meta] of model.nodes) {
|
|
58
|
+
if (meta.hasChildren && !selectedSet.has(value) && !disabledIds.has(value)) {
|
|
59
|
+
const children = model.childrenOf.get(value) ?? [];
|
|
60
|
+
const enabledChildren = children.filter((c) => !disabledIds.has(c));
|
|
61
|
+
if (enabledChildren.length > 0 && enabledChildren.every((c) => selectedSet.has(c))) {
|
|
62
|
+
selectedSet.add(value);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return Array.from(selectedSet);
|
|
67
|
+
}
|
|
68
|
+
function useTree(props) {
|
|
69
|
+
const {
|
|
70
|
+
defaultExpanded = [],
|
|
71
|
+
expanded: expandedProp,
|
|
72
|
+
onExpandedChange,
|
|
73
|
+
defaultSelected = [],
|
|
52
74
|
selected: selectedProp,
|
|
53
|
-
|
|
75
|
+
onSelectionChange,
|
|
76
|
+
multiselect = false,
|
|
77
|
+
disabled = false,
|
|
78
|
+
children
|
|
79
|
+
} = props;
|
|
80
|
+
const clampedDefaultSelected = multiselect ? defaultSelected : defaultSelected.slice(0, 1);
|
|
81
|
+
const clampedSelectedProp = selectedProp && !multiselect ? selectedProp.slice(0, 1) : selectedProp;
|
|
82
|
+
const treeModel = react.useMemo(() => buildTreeModel(children), [children]);
|
|
83
|
+
const disabledIdsSet = react.useMemo(() => {
|
|
84
|
+
const set = /* @__PURE__ */ new Set();
|
|
85
|
+
for (const [value, meta] of treeModel.nodes) {
|
|
86
|
+
if (meta.disabled) set.add(value);
|
|
87
|
+
}
|
|
88
|
+
return set;
|
|
89
|
+
}, [treeModel]);
|
|
90
|
+
const [expandedArray, setExpandedArray] = core.useControlled({
|
|
91
|
+
controlled: expandedProp,
|
|
92
|
+
default: defaultExpanded,
|
|
93
|
+
name: "Tree",
|
|
94
|
+
state: "expanded"
|
|
54
95
|
});
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
96
|
+
const expandedState = react.useMemo(() => new Set(expandedArray), [expandedArray]);
|
|
97
|
+
const expandedDefaultSelected = react.useMemo(() => {
|
|
98
|
+
if (!multiselect || clampedDefaultSelected.length === 0) {
|
|
99
|
+
return clampedDefaultSelected;
|
|
100
|
+
}
|
|
101
|
+
let expanded = expandSelectionWithDescendants(
|
|
102
|
+
clampedDefaultSelected,
|
|
103
|
+
treeModel,
|
|
104
|
+
disabledIdsSet
|
|
105
|
+
);
|
|
106
|
+
expanded = expandSelectionUpwards(expanded, treeModel, disabledIdsSet);
|
|
107
|
+
return expanded;
|
|
108
|
+
}, [clampedDefaultSelected, treeModel, disabledIdsSet, multiselect]);
|
|
109
|
+
const [selectedState, setSelectedState] = core.useControlled({
|
|
110
|
+
controlled: clampedSelectedProp,
|
|
111
|
+
default: expandedDefaultSelected,
|
|
112
|
+
name: "Tree",
|
|
113
|
+
state: "selected"
|
|
59
114
|
});
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
115
|
+
const selectedSet = react.useMemo(() => new Set(selectedState), [selectedState]);
|
|
116
|
+
const [activeNode, setActiveNode] = react.useState(void 0);
|
|
117
|
+
const elementsRef = react.useRef(/* @__PURE__ */ new Map());
|
|
118
|
+
const registerElement = (value, element) => {
|
|
119
|
+
elementsRef.current.set(value, element);
|
|
120
|
+
return () => {
|
|
121
|
+
elementsRef.current.delete(value);
|
|
122
|
+
};
|
|
123
|
+
};
|
|
124
|
+
const getElement = (value) => {
|
|
125
|
+
return elementsRef.current.get(value);
|
|
126
|
+
};
|
|
127
|
+
const getNodeMeta = react.useCallback(
|
|
128
|
+
(value) => {
|
|
129
|
+
return treeModel.nodes.get(value);
|
|
67
130
|
},
|
|
68
|
-
[
|
|
131
|
+
[treeModel]
|
|
69
132
|
);
|
|
70
|
-
const
|
|
71
|
-
(
|
|
72
|
-
var _a
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
133
|
+
const getParent = react.useCallback(
|
|
134
|
+
(value) => {
|
|
135
|
+
var _a;
|
|
136
|
+
return (_a = treeModel.nodes.get(value)) == null ? void 0 : _a.parentValue;
|
|
137
|
+
},
|
|
138
|
+
[treeModel]
|
|
139
|
+
);
|
|
140
|
+
const getChildren = react.useCallback(
|
|
141
|
+
(parentValue) => {
|
|
142
|
+
return treeModel.childrenOf.get(parentValue) ?? [];
|
|
143
|
+
},
|
|
144
|
+
[treeModel]
|
|
145
|
+
);
|
|
146
|
+
const getDescendants = react.useCallback(
|
|
147
|
+
(value) => {
|
|
148
|
+
const descendants = [];
|
|
149
|
+
function traverse(parentValue) {
|
|
150
|
+
const children2 = treeModel.childrenOf.get(parentValue) ?? [];
|
|
151
|
+
for (const child of children2) {
|
|
152
|
+
if (!disabledIdsSet.has(child)) {
|
|
153
|
+
descendants.push(child);
|
|
154
|
+
traverse(child);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
79
157
|
}
|
|
80
|
-
|
|
81
|
-
|
|
158
|
+
traverse(value);
|
|
159
|
+
return descendants;
|
|
160
|
+
},
|
|
161
|
+
[treeModel, disabledIdsSet]
|
|
162
|
+
);
|
|
163
|
+
const getAncestors = react.useCallback(
|
|
164
|
+
(value) => {
|
|
165
|
+
var _a, _b;
|
|
166
|
+
const ancestors = [];
|
|
167
|
+
let current = (_a = treeModel.nodes.get(value)) == null ? void 0 : _a.parentValue;
|
|
168
|
+
while (current) {
|
|
169
|
+
ancestors.push(current);
|
|
170
|
+
current = (_b = treeModel.nodes.get(current)) == null ? void 0 : _b.parentValue;
|
|
82
171
|
}
|
|
172
|
+
return ancestors;
|
|
83
173
|
},
|
|
84
|
-
[
|
|
85
|
-
collapsibleHook.onKeyDown,
|
|
86
|
-
keyboardHook.listProps,
|
|
87
|
-
selectionHook.listHandlers,
|
|
88
|
-
treeNavigationHook.listHandlers
|
|
89
|
-
]
|
|
174
|
+
[treeModel]
|
|
90
175
|
);
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
176
|
+
const toggleExpanded = react.useCallback(
|
|
177
|
+
(event, value) => {
|
|
178
|
+
const isExpanding = !expandedState.has(value);
|
|
179
|
+
const newExpanded = isExpanding ? [...expandedArray, value] : expandedArray.filter((v) => v !== value);
|
|
180
|
+
setExpandedArray(newExpanded);
|
|
181
|
+
onExpandedChange == null ? void 0 : onExpandedChange(event, newExpanded);
|
|
182
|
+
},
|
|
183
|
+
[expandedArray, expandedState, onExpandedChange]
|
|
184
|
+
);
|
|
185
|
+
const calculateIndeterminateState = react.useCallback(
|
|
186
|
+
(selected) => {
|
|
187
|
+
const indeterminate = /* @__PURE__ */ new Set();
|
|
188
|
+
const selectedSet2 = new Set(selected);
|
|
189
|
+
for (const selectedValue of selected) {
|
|
190
|
+
let current = getParent(selectedValue);
|
|
191
|
+
while (current) {
|
|
192
|
+
const children2 = getChildren(current);
|
|
193
|
+
const enabledChildren = children2.filter(
|
|
194
|
+
(child) => !disabledIdsSet.has(child)
|
|
195
|
+
);
|
|
196
|
+
if (enabledChildren.length === 0) {
|
|
197
|
+
current = getParent(current);
|
|
198
|
+
continue;
|
|
108
199
|
}
|
|
200
|
+
const selectedChildren = enabledChildren.filter(
|
|
201
|
+
(child) => selectedSet2.has(child)
|
|
202
|
+
);
|
|
203
|
+
const allChildrenSelected = selectedChildren.length === enabledChildren.length;
|
|
204
|
+
const someChildrenSelected = selectedChildren.length > 0;
|
|
205
|
+
const someChildrenIndeterminate = enabledChildren.some(
|
|
206
|
+
(child) => indeterminate.has(child)
|
|
207
|
+
);
|
|
208
|
+
if (someChildrenIndeterminate || someChildrenSelected && !allChildrenSelected) {
|
|
209
|
+
indeterminate.add(current);
|
|
210
|
+
}
|
|
211
|
+
current = getParent(current);
|
|
109
212
|
}
|
|
110
213
|
}
|
|
214
|
+
return indeterminate;
|
|
111
215
|
},
|
|
112
|
-
[
|
|
113
|
-
collectionHook.data,
|
|
114
|
-
disabled,
|
|
115
|
-
keyboardHook.setHighlightedIndex,
|
|
116
|
-
highlightedIdx,
|
|
117
|
-
isScrolling
|
|
118
|
-
]
|
|
216
|
+
[getParent, getChildren, disabledIdsSet]
|
|
119
217
|
);
|
|
120
|
-
const
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
218
|
+
const indeterminateState = react.useMemo(
|
|
219
|
+
() => multiselect ? calculateIndeterminateState(selectedState) : /* @__PURE__ */ new Set(),
|
|
220
|
+
[multiselect, selectedState, calculateIndeterminateState]
|
|
221
|
+
);
|
|
222
|
+
const updateAncestors = (currentSet, value) => {
|
|
223
|
+
const ancestors = getAncestors(value);
|
|
224
|
+
for (const ancestor of ancestors) {
|
|
225
|
+
const children2 = treeModel.childrenOf.get(ancestor) ?? [];
|
|
226
|
+
const enabledChildren = children2.filter(
|
|
227
|
+
(child) => !disabledIdsSet.has(child)
|
|
228
|
+
);
|
|
229
|
+
if (enabledChildren.length === 0) continue;
|
|
230
|
+
const allSelected = enabledChildren.every(
|
|
231
|
+
(child) => currentSet.has(child)
|
|
232
|
+
);
|
|
233
|
+
if (allSelected) {
|
|
234
|
+
currentSet.add(ancestor);
|
|
235
|
+
} else {
|
|
236
|
+
currentSet.delete(ancestor);
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
return Array.from(currentSet);
|
|
132
240
|
};
|
|
133
|
-
const
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
241
|
+
const getMultiSelectState = (value) => {
|
|
242
|
+
const currentSet = new Set(selectedState);
|
|
243
|
+
const descendants = getDescendants(value);
|
|
244
|
+
if (currentSet.has(value)) {
|
|
245
|
+
currentSet.delete(value);
|
|
246
|
+
const descendantSet = new Set(descendants);
|
|
247
|
+
for (const d of descendantSet) {
|
|
248
|
+
currentSet.delete(d);
|
|
249
|
+
}
|
|
250
|
+
} else {
|
|
251
|
+
currentSet.add(value);
|
|
252
|
+
for (const d of descendants) {
|
|
253
|
+
if (!currentSet.has(d)) {
|
|
254
|
+
currentSet.add(d);
|
|
255
|
+
}
|
|
256
|
+
}
|
|
141
257
|
}
|
|
142
|
-
|
|
143
|
-
const listItemHandlers = {
|
|
144
|
-
onClick: handleClick
|
|
258
|
+
return updateAncestors(currentSet, value);
|
|
145
259
|
};
|
|
260
|
+
const select = react.useCallback(
|
|
261
|
+
(event, value) => {
|
|
262
|
+
if (disabled || disabledIdsSet.has(value)) return;
|
|
263
|
+
let newSelected;
|
|
264
|
+
if (multiselect) {
|
|
265
|
+
newSelected = getMultiSelectState(value);
|
|
266
|
+
} else {
|
|
267
|
+
const isCurrentlySelected = selectedSet.has(value);
|
|
268
|
+
newSelected = isCurrentlySelected ? [] : [value];
|
|
269
|
+
}
|
|
270
|
+
setSelectedState(newSelected);
|
|
271
|
+
onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
|
|
272
|
+
},
|
|
273
|
+
[disabled, disabledIdsSet, multiselect, selectedState, onSelectionChange]
|
|
274
|
+
);
|
|
275
|
+
const visibleNodes = react.useMemo(() => {
|
|
276
|
+
const visible = [];
|
|
277
|
+
function traverse(values) {
|
|
278
|
+
for (const value of values) {
|
|
279
|
+
visible.push(value);
|
|
280
|
+
const nodeMeta = treeModel.nodes.get(value);
|
|
281
|
+
if ((nodeMeta == null ? void 0 : nodeMeta.hasChildren) && expandedState.has(value)) {
|
|
282
|
+
const children2 = treeModel.childrenOf.get(value) ?? [];
|
|
283
|
+
traverse(children2);
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
traverse(treeModel.rootValues);
|
|
288
|
+
return visible;
|
|
289
|
+
}, [treeModel, expandedState]);
|
|
290
|
+
const tabbableNodeId = react.useMemo(() => {
|
|
291
|
+
if (activeNode) {
|
|
292
|
+
return activeNode;
|
|
293
|
+
}
|
|
294
|
+
const firstSelectedVisible = visibleNodes.find(
|
|
295
|
+
(node) => selectedSet.has(node)
|
|
296
|
+
);
|
|
297
|
+
if (firstSelectedVisible !== void 0) {
|
|
298
|
+
return firstSelectedVisible;
|
|
299
|
+
}
|
|
300
|
+
return visibleNodes[0];
|
|
301
|
+
}, [activeNode, selectedSet, visibleNodes]);
|
|
146
302
|
return {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
303
|
+
expandedArray,
|
|
304
|
+
setExpandedArray,
|
|
305
|
+
expandedState,
|
|
306
|
+
toggleExpanded,
|
|
307
|
+
selectedState,
|
|
308
|
+
selectedSet,
|
|
309
|
+
setSelectedState,
|
|
310
|
+
select,
|
|
311
|
+
multiselect,
|
|
312
|
+
disabled,
|
|
313
|
+
disabledIdsSet,
|
|
314
|
+
treeModel,
|
|
315
|
+
getNodeMeta,
|
|
316
|
+
getParent,
|
|
317
|
+
getChildren,
|
|
318
|
+
getDescendants,
|
|
319
|
+
getAncestors,
|
|
320
|
+
visibleNodes,
|
|
321
|
+
tabbableNodeId,
|
|
322
|
+
registerElement,
|
|
323
|
+
getElement,
|
|
324
|
+
activeNode,
|
|
325
|
+
setActiveNode,
|
|
326
|
+
indeterminateState
|
|
155
327
|
};
|
|
156
|
-
}
|
|
328
|
+
}
|
|
157
329
|
|
|
158
330
|
exports.useTree = useTree;
|
|
159
331
|
//# sourceMappingURL=useTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTree.js","sources":["../src/tree/useTree.ts"],"sourcesContent":["import {\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useRef,\n} from \"react\";\nimport {\n closestListItemIndex,\n type ListHandlers,\n type SelectionStrategy,\n useCollapsibleGroups,\n useKeyboardNavigation,\n useSelection,\n useViewportTracking,\n} from \"../common-hooks\";\nimport type { ListControlProps } from \"../list/listTypes\";\nimport type { TreeHookProps, TreeHookResult } from \"./treeTypes\";\nimport { useKeyboardNavigation as useTreeNavigation } from \"./use-tree-keyboard-navigation\";\n\nexport const useTree = <Item, Selection extends SelectionStrategy = \"default\">({\n collectionHook,\n containerRef,\n contentRef = containerRef,\n defaultSelected,\n disabled,\n onSelect,\n onSelectionChange,\n onToggle,\n onHighlight: onHighlightProp,\n selected: selectedProp,\n selectionStrategy,\n}: // totalItemCount,\nTreeHookProps<Item, Selection>): TreeHookResult<Item, Selection> => {\n const lastSelection = useRef(selectedProp || defaultSelected);\n\n const handleKeyboardNavigation = (\n evt: KeyboardEvent<HTMLElement>,\n nextIdx: number,\n ) => {\n selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIdx);\n };\n\n const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n useKeyboardNavigation<Item, Selection>({\n containerRef,\n indexPositions: collectionHook.data,\n onHighlight: onHighlightProp,\n onKeyboardNavigation: handleKeyboardNavigation,\n selected: lastSelection.current,\n });\n\n const collapsibleHook = useCollapsibleGroups<Item>({\n collapsibleHeaders: true,\n collectionHook,\n highlightedIdx,\n onToggle,\n });\n\n const selectionHook = useSelection({\n defaultSelected,\n // groupSelection,\n highlightedIdx,\n indexPositions: collectionHook.data,\n onSelect,\n onSelectionChange,\n selected: selectedProp,\n selectionStrategy: selectionStrategy,\n });\n\n const treeNavigationHook = useTreeNavigation<Item>({\n collectionHook,\n highlightedIdx,\n highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n });\n\n const handleClick = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n collapsibleHook?.onClick?.(evt);\n if (!evt.defaultPrevented) {\n selectionHook.listHandlers.onClick?.(evt);\n }\n },\n [collapsibleHook, selectionHook],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n keyboardHook.listProps.onKeyDown?.(evt);\n if (!evt.defaultPrevented) {\n selectionHook.listHandlers.onKeyDown?.(evt);\n }\n if (!evt.defaultPrevented) {\n collapsibleHook?.onKeyDown?.(evt);\n }\n if (!evt.defaultPrevented) {\n treeNavigationHook.listHandlers.onKeyDown?.(evt);\n }\n },\n [\n collapsibleHook.onKeyDown,\n keyboardHook.listProps,\n selectionHook.listHandlers,\n treeNavigationHook.listHandlers,\n ],\n );\n\n // This is only appropriate when we are directly controlling a List,\n // not when a control is manipulating the list\n const { isScrolling } = useViewportTracking({\n containerRef,\n contentRef,\n highlightedIdx,\n indexPositions: collectionHook.data,\n });\n\n const handleMouseMove = useCallback(\n (evt: MouseEvent) => {\n if (!isScrolling.current && !disabled) {\n keyboardHook.listProps.onMouseMove();\n const idx = closestListItemIndex(evt.target as HTMLElement);\n if (idx !== undefined && idx !== highlightedIdx) {\n const item = collectionHook.data[idx];\n if (item.disabled) {\n keyboardHook.setHighlightedIndex(-1);\n } else {\n keyboardHook.setHighlightedIndex(idx);\n }\n }\n }\n },\n [\n collectionHook.data,\n disabled,\n keyboardHook.setHighlightedIndex,\n highlightedIdx,\n isScrolling,\n ],\n );\n\n const getActiveDescendant = () =>\n highlightedIdx === undefined || highlightedIdx === -1\n ? undefined\n : collectionHook.data[highlightedIdx]?.id;\n\n // We need this on reEntry for navigation hook to handle focus\n lastSelection.current = selectionHook.selected;\n\n const listProps: ListControlProps = {\n \"aria-activedescendant\": getActiveDescendant(),\n onBlur: keyboardHook.listProps.onBlur,\n onFocus: keyboardHook.listProps.onFocus,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: keyboardHook.listProps.onMouseDownCapture,\n onMouseLeave: keyboardHook.listProps.onMouseLeave,\n };\n\n const listHandlers: ListHandlers = /*listHandlersProp || */ {\n onClick: handleClick,\n // MouseEnter would be much better for this. There is a bug in Cypress\n // wheby it emits spurious MouseEnter (and MouseOver) events around\n // keypress events, which break many tests.\n onMouseMove: handleMouseMove,\n };\n\n const listItemHandlers = {\n onClick: handleClick,\n };\n\n return {\n focusVisible: keyboardHook.focusVisible,\n highlightedIdx,\n highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n listHandlers,\n listProps,\n listItemHandlers,\n selected: selectionHook.selected,\n setSelected: selectionHook.setSelected,\n };\n};\n"],"names":["useRef","useKeyboardNavigation","useCollapsibleGroups","useSelection","useTreeNavigation","useCallback","useViewportTracking","closestListItemIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useTree.js","sources":["../src/tree/useTree.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n Children,\n isValidElement,\n type ReactNode,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\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\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\nfunction 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 siblingValues: string[] = [];\n\n Children.forEach(reactChildren, (child) => {\n if (isValidElement(child) && typeof child.props.value === \"string\") {\n const value = child.props.value;\n const nodeChildren = child.props.children;\n const hasChildren = Children.count(nodeChildren) > 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 // Process children recursively and pass down disabled state\n if (hasChildren) {\n traverse(nodeChildren, value, disabled);\n }\n }\n });\n\n // Ordered children of parent\n if (parentValue !== undefined) {\n childrenOf.set(parentValue, siblingValues);\n } else {\n // ...and the root nodes\n rootValues.push(...siblingValues);\n }\n }\n\n traverse(children);\n\n return { nodes, rootValues, childrenOf };\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\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] = useControlled({\n controlled: clampedSelectedProp,\n default: expandedDefaultSelected,\n name: \"Tree\",\n state: \"selected\",\n });\n\n const selectedSet = useMemo(() => new Set(selectedState), [selectedState]);\n\n const [activeNode, setActiveNode] = useState<string | undefined>(undefined);\n\n const elementsRef = useRef<Map<string, HTMLElement>>(new Map());\n\n const registerElement = (value: string, element: HTMLElement) => {\n elementsRef.current.set(value, element);\n return () => {\n elementsRef.current.delete(value);\n };\n };\n\n const getElement = (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 () =>\n multiselect\n ? calculateIndeterminateState(selectedState)\n : new Set<string>(),\n [multiselect, selectedState, calculateIndeterminateState],\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 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":["Children","isValidElement","useMemo","useControlled","useState","useRef","useCallback","children","selectedSet"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".salt-density-touch {\n --calendar-day-highlight-size: 14px;\n}\n.salt-density-low {\n --calendar-day-highlight-size: 12px;\n}\n.salt-density-medium {\n --calendar-day-highlight-size: 10px;\n}\n.salt-density-high {\n --calendar-day-highlight-size: 8px;\n}\n\n.saltCalendarDay {\n --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);\n --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n border-radius: 0;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay:focus,\n.saltCalendarDay:focus-visible {\n outline: none;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay-focused:focus-visible::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected .saltCalendarDay-content,\n.saltCalendarDay-selected:hover .saltCalendarDay-content,\n.saltCalendarDay-selectedStart .saltCalendarDay-content,\n.saltCalendarDay-hoveredStart .saltCalendarDay-content,\n.saltCalendarDay-selectedSpan .saltCalendarDay-content,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-content,\n.saltCalendarDay-selectedEnd .saltCalendarDay-content,\n.saltCalendarDay-hoveredEnd .saltCalendarDay-content {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: calc(var(--calendar-gap) * -1);\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-selectedEnd::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,\n.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-selectedSameDay::before {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Single selection styles */\n\n.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-single .saltCalendarDay-selected::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Range selection styles */\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {\n outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-radius: 0;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n/** Offset range styles */\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,\n.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {\n background: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted {\n position: absolute;\n left: 0;\n right: 0;\n height: 100%;\n overflow: hidden;\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {\n right: 1px;\n}\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n right: -1px;\n}\n\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n border-radius: 0;\n}\n\n.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-highlighted::after {\n content: \"\";\n top: 0;\n right: 0;\n box-sizing: border-box;\n height: var(--calendar-day-highlight-size); /* TODO: change for size-modifier when available */\n width: var(--calendar-day-highlight-size);\n background: var(--salt-accent-background);\n position: absolute;\n clip-path: polygon(100% 0, 100% 100%, 0 0);\n z-index: var(--calendar-day-zIndex-highlight);\n}\n.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {\n border: var(--salt-focused-outline);\n}\n\n.saltCalendarDay-unselectable::after {\n content: \"\";\n height: var(--salt-size-fixed-100);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type::after {\n content: \"\";\n display: block;\n width: calc(100% - calc(var(--salt-spacing-50) * 2));\n height: var(--salt-size-indicator);\n background: var(--salt-accent-borderColor);\n border-radius: var(--salt-palette-corner-weak);\n position: absolute;\n bottom: var(--salt-spacing-50);\n left: var(--salt-spacing-50);\n right: var(--salt-spacing-50);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
|
|
1
|
+
var css_248z = ".salt-density-touch {\n --calendar-day-highlight-size: 14px;\n}\n.salt-density-low {\n --calendar-day-highlight-size: 12px;\n}\n.salt-density-medium {\n --calendar-day-highlight-size: 10px;\n}\n.salt-density-high {\n --calendar-day-highlight-size: 8px;\n}\n\n.saltCalendarDay {\n --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);\n --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n border-radius: 0;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay:focus,\n.saltCalendarDay:focus-visible {\n outline: none;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay-focused:focus-visible::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected .saltCalendarDay-content,\n.saltCalendarDay-selected:hover .saltCalendarDay-content,\n.saltCalendarDay-selectedStart .saltCalendarDay-content,\n.saltCalendarDay-hoveredStart .saltCalendarDay-content,\n.saltCalendarDay-selectedSpan .saltCalendarDay-content,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-content,\n.saltCalendarDay-selectedEnd .saltCalendarDay-content,\n.saltCalendarDay-hoveredEnd .saltCalendarDay-content {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: calc(var(--calendar-gap) * -1);\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-selectedEnd::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,\n.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-selectedSameDay::before {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Single selection styles */\n\n.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-single .saltCalendarDay-selected::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Range selection styles */\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {\n outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-radius: 0;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n/** Offset range styles */\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,\n.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {\n background: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted {\n position: absolute;\n left: 0;\n right: 0;\n height: 100%;\n overflow: hidden;\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {\n right: 1px;\n}\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n right: -1px;\n}\n\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n border-radius: 0;\n}\n\n.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-highlighted::after {\n content: \"\";\n top: 0;\n right: 0;\n box-sizing: border-box;\n height: var(--calendar-day-highlight-size); /* TODO: change for size-modifier when available */\n width: var(--calendar-day-highlight-size);\n background: var(--salt-sentiment-accent-background);\n position: absolute;\n clip-path: polygon(100% 0, 100% 100%, 0 0);\n z-index: var(--calendar-day-zIndex-highlight);\n}\n.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {\n border: var(--salt-focused-outline);\n}\n\n.saltCalendarDay-unselectable::after {\n content: \"\";\n height: var(--salt-size-fixed-100);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type::after {\n content: \"\";\n display: block;\n width: calc(100% - calc(var(--salt-spacing-50) * 2));\n height: var(--salt-size-indicator);\n background: var(--salt-sentiment-accent-borderColor);\n border-radius: var(--salt-palette-corner-weak);\n position: absolute;\n bottom: var(--salt-spacing-50);\n left: var(--salt-spacing-50);\n right: var(--salt-spacing-50);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CalendarDay.css.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { flip, shift,
|
|
2
|
+
import { flip, shift, limitShift, size } from '@floating-ui/react';
|
|
3
3
|
import { useForkRef, useAriaAnnouncer, useFloatingUI } from '@salt-ds/core';
|
|
4
4
|
import { useRef, useEffect, useState } from 'react';
|
|
5
5
|
import { InputLegacy } from '../../input-legacy/InputLegacy.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { flip, shift,
|
|
2
|
+
import { flip, shift, limitShift, size } from '@floating-ui/react';
|
|
3
3
|
import { useForkRef, useFloatingUI } from '@salt-ds/core';
|
|
4
4
|
import { useRef, useEffect, useState } from 'react';
|
|
5
5
|
import '../../list-deprecated/List.js';
|
|
@@ -8,7 +8,7 @@ import '../../list-deprecated/ListItemContext.js';
|
|
|
8
8
|
import '../../list-deprecated/ListStateContext.js';
|
|
9
9
|
import { useList } from '../../list-deprecated/useList.js';
|
|
10
10
|
import { defaultItemToString } from '../../tokenized-input/internal/defaultItemToString.js';
|
|
11
|
-
import {
|
|
11
|
+
import { getDefaultFilterRegex, getDefaultFilter } from '../filterHelpers.js';
|
|
12
12
|
import { usePopperStatus, isToggleList } from './usePopperStatus.js';
|
|
13
13
|
|
|
14
14
|
const useComboBox = (props) => {
|
|
@@ -11,7 +11,7 @@ import '../../tokenized-input/TokenizedInput.js';
|
|
|
11
11
|
import '../../tokenized-input/TokenizedInputBase.js';
|
|
12
12
|
import { useTokenizedInput } from '../../tokenized-input/useTokenizedInput.js';
|
|
13
13
|
import { defaultItemToString } from '../../tokenized-input/internal/defaultItemToString.js';
|
|
14
|
-
import {
|
|
14
|
+
import { getDefaultFilterRegex, getDefaultFilter } from '../filterHelpers.js';
|
|
15
15
|
import { usePopperStatus, isToggleList } from './usePopperStatus.js';
|
|
16
16
|
|
|
17
17
|
const REQUIRE_PREV_HIGHLIGHT = ["ArrowUp", "ArrowDown", "PageUp", "PageDown"];
|