@stratakit/structures 0.4.5 → 0.5.1
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 +74 -0
- package/dist/AccordionItem.d.ts +1 -1
- package/dist/AccordionItem.js +69 -124
- package/dist/Banner.js +149 -120
- package/dist/Chip.js +86 -58
- package/dist/DEV/AccordionItem.js +2 -0
- package/dist/DEV/Banner.js +3 -0
- package/dist/DEV/Chip.js +3 -0
- package/dist/DEV/Dialog.js +2 -0
- package/dist/DEV/DropdownMenu.js +2 -0
- package/dist/DEV/ErrorRegion.js +5 -11
- package/dist/DEV/NavigationList.js +130 -0
- package/dist/DEV/NavigationRail.js +6 -4
- package/dist/DEV/Popover.js +90 -0
- package/dist/DEV/Table.js +3 -0
- package/dist/DEV/Tabs.js +3 -1
- package/dist/DEV/Toolbar.js +2 -0
- package/dist/DEV/Tree.js +2 -0
- package/dist/DEV/TreeItem.js +7 -2
- package/dist/DEV/index.js +4 -0
- package/dist/DEV/styles.css.js +1 -1
- package/dist/DEV/~utils.ListItem.js +3 -3
- package/dist/DEV/~utils.useInit.js +16 -0
- package/dist/Dialog.js +142 -132
- package/dist/DropdownMenu.js +217 -234
- package/dist/ErrorRegion.d.ts +18 -8
- package/dist/ErrorRegion.js +129 -154
- package/dist/NavigationList.d.ts +110 -0
- package/dist/NavigationList.js +130 -0
- package/dist/NavigationRail.js +211 -188
- package/dist/Popover.d.ts +36 -0
- package/dist/Popover.js +99 -0
- package/dist/Table.js +119 -108
- package/dist/Tabs.js +100 -63
- package/dist/Toolbar.js +25 -43
- package/dist/Tree.js +15 -12
- package/dist/TreeItem.js +398 -314
- package/dist/index.d.ts +2 -0
- package/dist/index.js +4 -0
- package/dist/styles.css.js +1 -1
- package/dist/~utils.ListItem.d.ts +3 -3
- package/dist/~utils.ListItem.js +21 -34
- package/dist/~utils.icons.js +26 -46
- package/dist/~utils.useInit.d.ts +8 -0
- package/dist/~utils.useInit.js +13 -0
- package/package.json +25 -18
package/dist/TreeItem.js
CHANGED
|
@@ -1,18 +1,13 @@
|
|
|
1
|
+
import { c as _c } from "react-compiler-runtime";
|
|
1
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { CompositeItem } from "@ariakit/react/composite";
|
|
4
5
|
import { Role } from "@ariakit/react/role";
|
|
5
6
|
import { Toolbar, ToolbarItem } from "@ariakit/react/toolbar";
|
|
6
7
|
import { IconButton } from "@stratakit/bricks";
|
|
7
|
-
import {
|
|
8
|
-
GhostAligner,
|
|
9
|
-
IconButtonPresentation
|
|
10
|
-
} from "@stratakit/bricks/secret-internals";
|
|
8
|
+
import { GhostAligner, IconButtonPresentation } from "@stratakit/bricks/secret-internals";
|
|
11
9
|
import { Icon } from "@stratakit/foundations";
|
|
12
|
-
import {
|
|
13
|
-
forwardRef,
|
|
14
|
-
useEventHandlers
|
|
15
|
-
} from "@stratakit/foundations/secret-internals";
|
|
10
|
+
import { forwardRef, useEventHandlers } from "@stratakit/foundations/secret-internals";
|
|
16
11
|
import cx from "classnames";
|
|
17
12
|
import { ChevronDown, MoreHorizontal, StatusIcon } from "./~utils.icons.js";
|
|
18
13
|
import * as ListItem from "./~utils.ListItem.js";
|
|
@@ -22,79 +17,71 @@ const TreeItemInlineActionsContext = React.createContext(void 0);
|
|
|
22
17
|
const TreeItemActionsContext = React.createContext(void 0);
|
|
23
18
|
const TreeItemDecorationsContext = React.createContext(void 0);
|
|
24
19
|
const TreeItemIconContext = React.createContext(void 0);
|
|
25
|
-
const TreeItemDecorationIdContext = React.createContext(
|
|
26
|
-
void 0
|
|
27
|
-
);
|
|
20
|
+
const TreeItemDecorationIdContext = React.createContext(void 0);
|
|
28
21
|
const TreeItemLabelContext = React.createContext(void 0);
|
|
29
|
-
const TreeItemLabelIdContext = React.createContext(
|
|
30
|
-
void 0
|
|
31
|
-
);
|
|
22
|
+
const TreeItemLabelIdContext = React.createContext(void 0);
|
|
32
23
|
const TreeItemDescriptionContext = React.createContext(void 0);
|
|
33
|
-
const TreeItemDescriptionIdContext = React.createContext(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
});
|
|
58
|
-
const handleClick = (event) => {
|
|
59
|
-
if (selected === void 0) return;
|
|
24
|
+
const TreeItemDescriptionIdContext = React.createContext(void 0);
|
|
25
|
+
const TreeItem = React.memo(forwardRef((props, forwardedRef) => {
|
|
26
|
+
const {
|
|
27
|
+
selected,
|
|
28
|
+
onSelectedChange,
|
|
29
|
+
expanded,
|
|
30
|
+
onExpandedChange,
|
|
31
|
+
icon: _icon,
|
|
32
|
+
unstable_decorations: _unstable_decorations,
|
|
33
|
+
label: _label,
|
|
34
|
+
description: _description,
|
|
35
|
+
inlineActions: _inlineActions,
|
|
36
|
+
actions: _actions,
|
|
37
|
+
error: _error,
|
|
38
|
+
onClick: onClickProp,
|
|
39
|
+
onKeyDown: onKeyDownProp,
|
|
40
|
+
...rest
|
|
41
|
+
} = props;
|
|
42
|
+
const onExpanderClick = useEventHandlers(() => {
|
|
43
|
+
if (expanded === void 0) return;
|
|
44
|
+
onExpandedChange?.(!expanded);
|
|
45
|
+
});
|
|
46
|
+
const handleClick = (event) => {
|
|
47
|
+
if (selected !== void 0) {
|
|
60
48
|
event.stopPropagation();
|
|
61
49
|
onSelectedChange?.(!selected);
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
if (expanded === void 0) return;
|
|
53
|
+
event.stopPropagation();
|
|
54
|
+
onExpandedChange?.(!expanded);
|
|
55
|
+
};
|
|
56
|
+
const handleKeyDown = (event_0) => {
|
|
57
|
+
if (event_0.altKey || event_0.ctrlKey || event_0.metaKey || event_0.shiftKey) {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
if (expanded === void 0) return;
|
|
61
|
+
if (event_0.key === "ArrowRight" || event_0.key === "ArrowLeft") {
|
|
62
|
+
event_0.preventDefault();
|
|
63
|
+
onExpandedChange?.(event_0.key === "ArrowRight");
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
return /* @__PURE__ */ jsx(TreeItemRootProvider, {
|
|
67
|
+
...props,
|
|
68
|
+
children: /* @__PURE__ */ jsx(TreeItemRoot, {
|
|
69
|
+
...rest,
|
|
70
|
+
expanded,
|
|
71
|
+
selected,
|
|
72
|
+
onClick: useEventHandlers(onClickProp, handleClick),
|
|
73
|
+
onKeyDown: useEventHandlers(onKeyDownProp, handleKeyDown),
|
|
74
|
+
ref: forwardedRef,
|
|
75
|
+
children: React.useMemo(() => /* @__PURE__ */ jsx(TreeItemNode, {
|
|
76
|
+
onExpanderClick,
|
|
77
77
|
expanded,
|
|
78
|
-
selected
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
() => /* @__PURE__ */ jsx(
|
|
84
|
-
TreeItemNode,
|
|
85
|
-
{
|
|
86
|
-
onExpanderClick,
|
|
87
|
-
expanded,
|
|
88
|
-
selected
|
|
89
|
-
}
|
|
90
|
-
),
|
|
91
|
-
[onExpanderClick, expanded, selected]
|
|
92
|
-
)
|
|
93
|
-
}
|
|
94
|
-
) });
|
|
95
|
-
})
|
|
96
|
-
);
|
|
78
|
+
selected
|
|
79
|
+
}), [onExpanderClick, expanded, selected])
|
|
80
|
+
})
|
|
81
|
+
});
|
|
82
|
+
}));
|
|
97
83
|
function TreeItemRootProvider(props) {
|
|
84
|
+
const $ = _c(12);
|
|
98
85
|
const {
|
|
99
86
|
inlineActions,
|
|
100
87
|
actions,
|
|
@@ -107,296 +94,393 @@ function TreeItemRootProvider(props) {
|
|
|
107
94
|
const labelId = React.useId();
|
|
108
95
|
const descriptionId = React.useId();
|
|
109
96
|
const decorationId = React.useId();
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
97
|
+
let t0;
|
|
98
|
+
if ($[0] !== actions || $[1] !== decorationId || $[2] !== decorations || $[3] !== description || $[4] !== descriptionId || $[5] !== error || $[6] !== iconProp || $[7] !== inlineActions || $[8] !== label || $[9] !== labelId || $[10] !== props.children) {
|
|
99
|
+
const icon = error ? jsx(StatusIcon, {
|
|
100
|
+
tone: "attention"
|
|
101
|
+
}) : iconProp;
|
|
102
|
+
const hasDecoration = icon || decorations;
|
|
103
|
+
t0 = jsx(TreeItemErrorContext.Provider, {
|
|
104
|
+
value: error,
|
|
105
|
+
children: jsx(TreeItemInlineActionsContext.Provider, {
|
|
106
|
+
value: inlineActions,
|
|
107
|
+
children: jsx(TreeItemActionsContext.Provider, {
|
|
108
|
+
value: actions,
|
|
109
|
+
children: jsx(TreeItemDisplayActionsMenuContext.Provider, {
|
|
110
|
+
value: actions ? actions.length > 0 : false,
|
|
111
|
+
children: jsx(TreeItemDecorationIdContext.Provider, {
|
|
112
|
+
value: hasDecoration ? decorationId : void 0,
|
|
113
|
+
children: jsx(TreeItemDecorationsContext.Provider, {
|
|
114
|
+
value: decorations,
|
|
115
|
+
children: jsx(TreeItemIconContext.Provider, {
|
|
116
|
+
value: icon,
|
|
117
|
+
children: jsx(TreeItemLabelIdContext.Provider, {
|
|
118
|
+
value: labelId,
|
|
119
|
+
children: jsx(TreeItemLabelContext.Provider, {
|
|
120
|
+
value: label,
|
|
121
|
+
children: jsx(TreeItemDescriptionContext.Provider, {
|
|
122
|
+
value: description,
|
|
123
|
+
children: jsx(TreeItemDescriptionIdContext.Provider, {
|
|
124
|
+
value: description ? descriptionId : void 0,
|
|
125
|
+
children: props.children
|
|
126
|
+
})
|
|
127
|
+
})
|
|
128
|
+
})
|
|
129
|
+
})
|
|
130
|
+
})
|
|
131
|
+
})
|
|
132
|
+
})
|
|
133
|
+
})
|
|
134
|
+
})
|
|
135
|
+
})
|
|
136
|
+
});
|
|
137
|
+
$[0] = actions;
|
|
138
|
+
$[1] = decorationId;
|
|
139
|
+
$[2] = decorations;
|
|
140
|
+
$[3] = description;
|
|
141
|
+
$[4] = descriptionId;
|
|
142
|
+
$[5] = error;
|
|
143
|
+
$[6] = iconProp;
|
|
144
|
+
$[7] = inlineActions;
|
|
145
|
+
$[8] = label;
|
|
146
|
+
$[9] = labelId;
|
|
147
|
+
$[10] = props.children;
|
|
148
|
+
$[11] = t0;
|
|
149
|
+
} else {
|
|
150
|
+
t0 = $[11];
|
|
151
|
+
}
|
|
152
|
+
return t0;
|
|
131
153
|
}
|
|
132
|
-
const TreeItemRoot = React.memo(
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
154
|
+
const TreeItemRoot = React.memo(forwardRef((props, forwardedRef) => {
|
|
155
|
+
const {
|
|
156
|
+
style: styleProp,
|
|
157
|
+
"aria-level": level,
|
|
158
|
+
selected,
|
|
159
|
+
expanded,
|
|
160
|
+
...rest
|
|
161
|
+
} = props;
|
|
162
|
+
const labelId = React.useContext(TreeItemLabelIdContext);
|
|
163
|
+
const decorationId = React.useContext(TreeItemDecorationIdContext);
|
|
164
|
+
const descriptionId = React.useContext(TreeItemDescriptionIdContext);
|
|
165
|
+
const error = React.useContext(TreeItemErrorContext);
|
|
166
|
+
const errorId = typeof error === "string" ? error : void 0;
|
|
167
|
+
const describedBy = React.useMemo(() => {
|
|
168
|
+
const ids = [];
|
|
169
|
+
if (descriptionId) ids.push(descriptionId);
|
|
170
|
+
if (decorationId) ids.push(decorationId);
|
|
171
|
+
if (errorId) ids.push(errorId);
|
|
172
|
+
return ids.length > 0 ? ids.join(" ") : void 0;
|
|
173
|
+
}, [decorationId, descriptionId, errorId]);
|
|
174
|
+
const style = React.useMemo(() => ({
|
|
175
|
+
...styleProp,
|
|
176
|
+
"--\u{1F95D}TreeItem-level": level
|
|
177
|
+
}), [styleProp, level]);
|
|
178
|
+
return /* @__PURE__ */ jsx(CompositeItem, {
|
|
179
|
+
render: /* @__PURE__ */ jsx(Role, {
|
|
180
|
+
...rest,
|
|
181
|
+
role: "treeitem",
|
|
182
|
+
"aria-expanded": expanded,
|
|
183
|
+
"aria-selected": selected,
|
|
184
|
+
"aria-labelledby": labelId,
|
|
185
|
+
"aria-describedby": describedBy,
|
|
136
186
|
"aria-level": level,
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
const error = React.useContext(TreeItemErrorContext);
|
|
145
|
-
const errorId = typeof error === "string" ? error : void 0;
|
|
146
|
-
const describedBy = React.useMemo(() => {
|
|
147
|
-
const ids = [];
|
|
148
|
-
if (descriptionId) ids.push(descriptionId);
|
|
149
|
-
if (decorationId) ids.push(decorationId);
|
|
150
|
-
if (errorId) ids.push(errorId);
|
|
151
|
-
return ids.length > 0 ? ids.join(" ") : void 0;
|
|
152
|
-
}, [decorationId, descriptionId, errorId]);
|
|
153
|
-
const style = React.useMemo(
|
|
154
|
-
() => ({
|
|
155
|
-
...styleProp,
|
|
156
|
-
"--\u{1F95D}TreeItem-level": level
|
|
157
|
-
}),
|
|
158
|
-
[styleProp, level]
|
|
159
|
-
);
|
|
160
|
-
return /* @__PURE__ */ jsx(
|
|
161
|
-
CompositeItem,
|
|
162
|
-
{
|
|
163
|
-
render: /* @__PURE__ */ jsx(
|
|
164
|
-
Role,
|
|
165
|
-
{
|
|
166
|
-
...rest,
|
|
167
|
-
role: "treeitem",
|
|
168
|
-
"aria-expanded": expanded,
|
|
169
|
-
"aria-selected": selected,
|
|
170
|
-
"aria-labelledby": labelId,
|
|
171
|
-
"aria-describedby": describedBy,
|
|
172
|
-
"aria-level": level,
|
|
173
|
-
className: cx("\u{1F95D}TreeItem", props.className),
|
|
174
|
-
style,
|
|
175
|
-
ref: forwardedRef
|
|
176
|
-
}
|
|
177
|
-
),
|
|
178
|
-
children: props.children
|
|
179
|
-
}
|
|
180
|
-
);
|
|
181
|
-
})
|
|
182
|
-
);
|
|
187
|
+
className: cx("\u{1F95D}TreeItem", props.className),
|
|
188
|
+
style,
|
|
189
|
+
ref: forwardedRef
|
|
190
|
+
}),
|
|
191
|
+
children: props.children
|
|
192
|
+
});
|
|
193
|
+
}));
|
|
183
194
|
function useRenderActions() {
|
|
195
|
+
const $ = _c(5);
|
|
184
196
|
const ref = React.useRef(null);
|
|
185
197
|
const [renderActions, setRenderActions] = React.useState(false);
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
198
|
+
let t0;
|
|
199
|
+
let t1;
|
|
200
|
+
if ($[0] !== renderActions) {
|
|
201
|
+
t0 = () => {
|
|
202
|
+
const el = ref.current;
|
|
203
|
+
if (!el || renderActions) {
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
const observer = new IntersectionObserver((t22) => {
|
|
207
|
+
const [entry] = t22;
|
|
208
|
+
if (!entry.isIntersecting) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
React.startTransition(() => {
|
|
212
|
+
setRenderActions(true);
|
|
213
|
+
});
|
|
193
214
|
});
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
215
|
+
observer.observe(el);
|
|
216
|
+
return () => {
|
|
217
|
+
observer.disconnect();
|
|
218
|
+
};
|
|
198
219
|
};
|
|
199
|
-
|
|
200
|
-
|
|
220
|
+
t1 = [renderActions];
|
|
221
|
+
$[0] = renderActions;
|
|
222
|
+
$[1] = t0;
|
|
223
|
+
$[2] = t1;
|
|
224
|
+
} else {
|
|
225
|
+
t0 = $[1];
|
|
226
|
+
t1 = $[2];
|
|
227
|
+
}
|
|
228
|
+
React.useEffect(t0, t1);
|
|
229
|
+
let t2;
|
|
230
|
+
if ($[3] !== renderActions) {
|
|
231
|
+
t2 = [ref, renderActions];
|
|
232
|
+
$[3] = renderActions;
|
|
233
|
+
$[4] = t2;
|
|
234
|
+
} else {
|
|
235
|
+
t2 = $[4];
|
|
236
|
+
}
|
|
237
|
+
return t2;
|
|
201
238
|
}
|
|
202
239
|
const TreeItemNode = React.memo((props) => {
|
|
203
|
-
const
|
|
240
|
+
const $ = _c(7);
|
|
241
|
+
const {
|
|
242
|
+
expanded,
|
|
243
|
+
selected,
|
|
244
|
+
onExpanderClick
|
|
245
|
+
} = props;
|
|
204
246
|
const error = React.useContext(TreeItemErrorContext);
|
|
205
247
|
const [ref, renderActions] = useRenderActions();
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
248
|
+
const t0 = error ? true : void 0;
|
|
249
|
+
let t1;
|
|
250
|
+
if ($[0] !== expanded || $[1] !== onExpanderClick || $[2] !== ref || $[3] !== renderActions || $[4] !== selected || $[5] !== t0) {
|
|
251
|
+
t1 = jsxs(ListItem.Root, {
|
|
209
252
|
"data-_sk-expanded": expanded,
|
|
210
253
|
"data-_sk-selected": selected,
|
|
211
|
-
"data-_sk-error":
|
|
254
|
+
"data-_sk-error": t0,
|
|
212
255
|
className: "\u{1F95D}TreeItemNode",
|
|
213
256
|
role: void 0,
|
|
214
257
|
ref,
|
|
215
|
-
children: [
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
258
|
+
children: [jsx(TreeItemDecorations, {
|
|
259
|
+
onExpanderClick
|
|
260
|
+
}), jsx(TreeItemContent, {}), jsx(TreeItemDescription, {}), renderActions && jsx(TreeItemActions, {})]
|
|
261
|
+
});
|
|
262
|
+
$[0] = expanded;
|
|
263
|
+
$[1] = onExpanderClick;
|
|
264
|
+
$[2] = ref;
|
|
265
|
+
$[3] = renderActions;
|
|
266
|
+
$[4] = selected;
|
|
267
|
+
$[5] = t0;
|
|
268
|
+
$[6] = t1;
|
|
269
|
+
} else {
|
|
270
|
+
t1 = $[6];
|
|
271
|
+
}
|
|
272
|
+
return t1;
|
|
223
273
|
});
|
|
224
274
|
const TreeItemDecorations = React.memo((props) => {
|
|
225
|
-
return /* @__PURE__ */ jsxs(ListItem.Decoration, {
|
|
226
|
-
/* @__PURE__ */ jsx(TreeItemExpander, {
|
|
227
|
-
|
|
228
|
-
|
|
275
|
+
return /* @__PURE__ */ jsxs(ListItem.Decoration, {
|
|
276
|
+
children: [/* @__PURE__ */ jsx(TreeItemExpander, {
|
|
277
|
+
onClick: props.onExpanderClick
|
|
278
|
+
}), /* @__PURE__ */ jsx(TreeItemDecoration, {})]
|
|
279
|
+
});
|
|
229
280
|
});
|
|
230
281
|
function TreeItemDecoration() {
|
|
282
|
+
const $ = _c(4);
|
|
231
283
|
const decorationId = React.useContext(TreeItemDecorationIdContext);
|
|
232
284
|
const decorations = React.useContext(TreeItemDecorationsContext);
|
|
233
285
|
const icon = React.useContext(TreeItemIconContext);
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
{
|
|
286
|
+
let t0;
|
|
287
|
+
if ($[0] !== decorationId || $[1] !== decorations || $[2] !== icon) {
|
|
288
|
+
t0 = icon || decorations ? jsx(Role, {
|
|
237
289
|
className: "\u{1F95D}TreeItemDecoration",
|
|
238
290
|
id: decorationId,
|
|
239
|
-
render: React.isValidElement(icon) ? icon : typeof icon === "string" ?
|
|
291
|
+
render: React.isValidElement(icon) ? icon : typeof icon === "string" ? jsx(Icon, {
|
|
292
|
+
href: icon
|
|
293
|
+
}) : void 0,
|
|
240
294
|
children: !icon ? decorations : null
|
|
241
|
-
}
|
|
242
|
-
|
|
295
|
+
}) : null;
|
|
296
|
+
$[0] = decorationId;
|
|
297
|
+
$[1] = decorations;
|
|
298
|
+
$[2] = icon;
|
|
299
|
+
$[3] = t0;
|
|
300
|
+
} else {
|
|
301
|
+
t0 = $[3];
|
|
302
|
+
}
|
|
303
|
+
return t0;
|
|
243
304
|
}
|
|
244
305
|
const TreeItemContent = React.memo(() => {
|
|
306
|
+
const $ = _c(3);
|
|
245
307
|
const labelId = React.useContext(TreeItemLabelIdContext);
|
|
246
308
|
const label = React.useContext(TreeItemLabelContext);
|
|
247
|
-
|
|
309
|
+
let t0;
|
|
310
|
+
if ($[0] !== label || $[1] !== labelId) {
|
|
311
|
+
t0 = jsx(ListItem.Content, {
|
|
312
|
+
id: labelId,
|
|
313
|
+
className: "\u{1F95D}TreeItemContent",
|
|
314
|
+
children: label
|
|
315
|
+
});
|
|
316
|
+
$[0] = label;
|
|
317
|
+
$[1] = labelId;
|
|
318
|
+
$[2] = t0;
|
|
319
|
+
} else {
|
|
320
|
+
t0 = $[2];
|
|
321
|
+
}
|
|
322
|
+
return t0;
|
|
248
323
|
});
|
|
249
324
|
const TreeItemDescription = React.memo(() => {
|
|
325
|
+
const $ = _c(3);
|
|
250
326
|
const description = React.useContext(TreeItemDescriptionContext);
|
|
251
327
|
const descriptionId = React.useContext(TreeItemDescriptionIdContext);
|
|
252
|
-
|
|
328
|
+
let t0;
|
|
329
|
+
if ($[0] !== description || $[1] !== descriptionId) {
|
|
330
|
+
t0 = description ? jsx(ListItem.Content, {
|
|
331
|
+
id: descriptionId,
|
|
332
|
+
className: "\u{1F95D}TreeItemDescription",
|
|
333
|
+
children: description
|
|
334
|
+
}) : void 0;
|
|
335
|
+
$[0] = description;
|
|
336
|
+
$[1] = descriptionId;
|
|
337
|
+
$[2] = t0;
|
|
338
|
+
} else {
|
|
339
|
+
t0 = $[2];
|
|
340
|
+
}
|
|
341
|
+
return t0;
|
|
253
342
|
});
|
|
254
|
-
const TreeItemActions = React.memo(
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
render: /* @__PURE__ */ jsx(Toolbar, { focusLoop: false }),
|
|
268
|
-
children: [
|
|
269
|
-
/* @__PURE__ */ jsx(TreeItemInlineActionsRenderer, {}),
|
|
270
|
-
/* @__PURE__ */ jsx(TreeItemActionMenu, {})
|
|
271
|
-
]
|
|
272
|
-
}
|
|
273
|
-
);
|
|
274
|
-
})
|
|
275
|
-
);
|
|
343
|
+
const TreeItemActions = React.memo(forwardRef((props, forwardedRef) => {
|
|
344
|
+
return /* @__PURE__ */ jsxs(ListItem.Decoration, {
|
|
345
|
+
...props,
|
|
346
|
+
onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
|
|
347
|
+
onKeyDown: useEventHandlers(props.onKeyDown, (e_0) => e_0.stopPropagation()),
|
|
348
|
+
className: cx("\u{1F95D}TreeItemActionsContainer", props.className),
|
|
349
|
+
ref: forwardedRef,
|
|
350
|
+
render: /* @__PURE__ */ jsx(Toolbar, {
|
|
351
|
+
focusLoop: false
|
|
352
|
+
}),
|
|
353
|
+
children: [/* @__PURE__ */ jsx(TreeItemInlineActionsRenderer, {}), /* @__PURE__ */ jsx(TreeItemActionMenu, {})]
|
|
354
|
+
});
|
|
355
|
+
}));
|
|
276
356
|
function TreeItemInlineActionsRenderer() {
|
|
357
|
+
const $ = _c(2);
|
|
277
358
|
const actions = React.useContext(TreeItemInlineActionsContext) ?? [];
|
|
278
|
-
|
|
359
|
+
let t0;
|
|
360
|
+
if ($[0] !== actions) {
|
|
361
|
+
t0 = actions.slice(0, 2);
|
|
362
|
+
$[0] = actions;
|
|
363
|
+
$[1] = t0;
|
|
364
|
+
} else {
|
|
365
|
+
t0 = $[1];
|
|
366
|
+
}
|
|
367
|
+
const actionsToDisplay = t0;
|
|
279
368
|
return actionsToDisplay;
|
|
280
369
|
}
|
|
281
370
|
const arrowKeys = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
|
|
282
371
|
const TreeItemActionsMenuContext = React.createContext(false);
|
|
283
372
|
const TreeItemDisplayActionsMenuContext = React.createContext(false);
|
|
284
|
-
const TreeItemActionMenu = React.memo(
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
}
|
|
319
|
-
),
|
|
320
|
-
/* @__PURE__ */ jsx(TreeItemMenuActionsContent, {})
|
|
321
|
-
]
|
|
322
|
-
}
|
|
323
|
-
);
|
|
324
|
-
})
|
|
325
|
-
);
|
|
373
|
+
const TreeItemActionMenu = React.memo(forwardRef((props, forwardedRef) => {
|
|
374
|
+
const [open, _setOpen] = React.useState(false);
|
|
375
|
+
const isArrowKeyPressed = React.useRef(false);
|
|
376
|
+
const displayMenu = React.useContext(TreeItemDisplayActionsMenuContext);
|
|
377
|
+
const setOpen = React.useCallback((value) => {
|
|
378
|
+
if (value && !isArrowKeyPressed.current) {
|
|
379
|
+
_setOpen(true);
|
|
380
|
+
} else {
|
|
381
|
+
_setOpen(false);
|
|
382
|
+
}
|
|
383
|
+
}, []);
|
|
384
|
+
if (!displayMenu) return null;
|
|
385
|
+
return /* @__PURE__ */ jsxs(DropdownMenu.Provider, {
|
|
386
|
+
open,
|
|
387
|
+
setOpen,
|
|
388
|
+
placement: "right-start",
|
|
389
|
+
children: [/* @__PURE__ */ jsx(DropdownMenu.Button, {
|
|
390
|
+
...props,
|
|
391
|
+
onKeyDown: (e) => {
|
|
392
|
+
if (arrowKeys.includes(e.key)) {
|
|
393
|
+
isArrowKeyPressed.current = true;
|
|
394
|
+
}
|
|
395
|
+
queueMicrotask(() => {
|
|
396
|
+
isArrowKeyPressed.current = false;
|
|
397
|
+
});
|
|
398
|
+
},
|
|
399
|
+
render: /* @__PURE__ */ jsx(TreeItemInlineAction, {
|
|
400
|
+
label: "More",
|
|
401
|
+
icon: /* @__PURE__ */ jsx(MoreHorizontal, {})
|
|
402
|
+
}),
|
|
403
|
+
ref: forwardedRef
|
|
404
|
+
}), /* @__PURE__ */ jsx(TreeItemMenuActionsContent, {})]
|
|
405
|
+
});
|
|
406
|
+
}));
|
|
326
407
|
function TreeItemMenuActionsContent() {
|
|
327
|
-
return /* @__PURE__ */ jsx(TreeItemActionsMenuContext.Provider, {
|
|
408
|
+
return /* @__PURE__ */ jsx(TreeItemActionsMenuContext.Provider, {
|
|
409
|
+
value: true,
|
|
410
|
+
children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
|
|
411
|
+
children: /* @__PURE__ */ jsx(TreeItemActionsRenderer, {})
|
|
412
|
+
})
|
|
413
|
+
});
|
|
328
414
|
}
|
|
329
415
|
function TreeItemActionsRenderer() {
|
|
330
416
|
const actions = React.useContext(TreeItemActionsContext) ?? [];
|
|
331
417
|
return actions;
|
|
332
418
|
}
|
|
333
|
-
const TreeItemAction = React.memo(
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
unstable_dot: dot,
|
|
345
|
-
ref: forwardedRef
|
|
346
|
-
}
|
|
347
|
-
);
|
|
348
|
-
}
|
|
349
|
-
return /* @__PURE__ */ jsx(TreeItemInlineAction, { ...props, ref: forwardedRef });
|
|
350
|
-
})
|
|
351
|
-
);
|
|
352
|
-
const TreeItemInlineAction = React.memo(
|
|
353
|
-
forwardRef((props, forwardedRef) => {
|
|
354
|
-
const error = React.useContext(TreeItemErrorContext);
|
|
355
|
-
const generatedId = React.useId();
|
|
356
|
-
const {
|
|
357
|
-
id = generatedId,
|
|
358
|
-
visible = error ? true : void 0,
|
|
359
|
-
// visible by default during error state
|
|
419
|
+
const TreeItemAction = React.memo(forwardRef((props, forwardedRef) => {
|
|
420
|
+
const {
|
|
421
|
+
label,
|
|
422
|
+
icon,
|
|
423
|
+
dot,
|
|
424
|
+
...rest
|
|
425
|
+
} = props;
|
|
426
|
+
const actionsMenuContext = React.useContext(TreeItemActionsMenuContext);
|
|
427
|
+
if (actionsMenuContext) {
|
|
428
|
+
return /* @__PURE__ */ jsx(DropdownMenu.Item, {
|
|
429
|
+
...rest,
|
|
360
430
|
label,
|
|
361
431
|
icon,
|
|
362
|
-
dot,
|
|
363
|
-
|
|
364
|
-
}
|
|
365
|
-
return /* @__PURE__ */ jsx(
|
|
366
|
-
IconButton,
|
|
367
|
-
{
|
|
368
|
-
id,
|
|
369
|
-
label,
|
|
370
|
-
icon,
|
|
371
|
-
inert: visible === false ? "true" : void 0,
|
|
372
|
-
...rest,
|
|
373
|
-
render: /* @__PURE__ */ jsx(ToolbarItem, { render: props.render }),
|
|
374
|
-
dot,
|
|
375
|
-
variant: "ghost",
|
|
376
|
-
className: cx("\u{1F95D}TreeItemAction", props.className),
|
|
377
|
-
"data-_sk-visible": visible,
|
|
378
|
-
ref: forwardedRef
|
|
379
|
-
}
|
|
380
|
-
);
|
|
381
|
-
})
|
|
382
|
-
);
|
|
383
|
-
const TreeItemExpander = forwardRef(
|
|
384
|
-
(props, forwardedRef) => {
|
|
385
|
-
const descriptionId = React.useContext(TreeItemDescriptionIdContext);
|
|
386
|
-
return /* @__PURE__ */ jsx(GhostAligner, { align: descriptionId ? "block" : void 0, children: /* @__PURE__ */ jsx(
|
|
387
|
-
IconButtonPresentation,
|
|
388
|
-
{
|
|
389
|
-
"aria-hidden": "true",
|
|
390
|
-
...props,
|
|
391
|
-
onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
|
|
392
|
-
className: cx("\u{1F95D}TreeItemExpander", props.className),
|
|
393
|
-
variant: "ghost",
|
|
394
|
-
ref: forwardedRef,
|
|
395
|
-
children: /* @__PURE__ */ jsx(ChevronDown, {})
|
|
396
|
-
}
|
|
397
|
-
) });
|
|
432
|
+
unstable_dot: dot,
|
|
433
|
+
ref: forwardedRef
|
|
434
|
+
});
|
|
398
435
|
}
|
|
399
|
-
|
|
436
|
+
return /* @__PURE__ */ jsx(TreeItemInlineAction, {
|
|
437
|
+
...props,
|
|
438
|
+
ref: forwardedRef
|
|
439
|
+
});
|
|
440
|
+
}));
|
|
441
|
+
const TreeItemInlineAction = React.memo(forwardRef((props, forwardedRef) => {
|
|
442
|
+
const error = React.useContext(TreeItemErrorContext);
|
|
443
|
+
const generatedId = React.useId();
|
|
444
|
+
const {
|
|
445
|
+
id = generatedId,
|
|
446
|
+
visible = error ? true : void 0,
|
|
447
|
+
// visible by default during error state
|
|
448
|
+
label,
|
|
449
|
+
icon,
|
|
450
|
+
dot,
|
|
451
|
+
...rest
|
|
452
|
+
} = props;
|
|
453
|
+
return /* @__PURE__ */ jsx(IconButton, {
|
|
454
|
+
id,
|
|
455
|
+
label,
|
|
456
|
+
icon,
|
|
457
|
+
inert: visible === false ? "true" : void 0,
|
|
458
|
+
...rest,
|
|
459
|
+
render: /* @__PURE__ */ jsx(ToolbarItem, {
|
|
460
|
+
render: props.render
|
|
461
|
+
}),
|
|
462
|
+
dot,
|
|
463
|
+
variant: "ghost",
|
|
464
|
+
className: cx("\u{1F95D}TreeItemAction", props.className),
|
|
465
|
+
"data-_sk-visible": visible,
|
|
466
|
+
ref: forwardedRef
|
|
467
|
+
});
|
|
468
|
+
}));
|
|
469
|
+
const TreeItemExpander = forwardRef((props, forwardedRef) => {
|
|
470
|
+
const descriptionId = React.useContext(TreeItemDescriptionIdContext);
|
|
471
|
+
return /* @__PURE__ */ jsx(GhostAligner, {
|
|
472
|
+
align: descriptionId ? "block" : void 0,
|
|
473
|
+
children: /* @__PURE__ */ jsx(IconButtonPresentation, {
|
|
474
|
+
"aria-hidden": "true",
|
|
475
|
+
...props,
|
|
476
|
+
onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
|
|
477
|
+
className: cx("\u{1F95D}TreeItemExpander", props.className),
|
|
478
|
+
variant: "ghost",
|
|
479
|
+
ref: forwardedRef,
|
|
480
|
+
children: /* @__PURE__ */ jsx(ChevronDown, {})
|
|
481
|
+
})
|
|
482
|
+
});
|
|
483
|
+
});
|
|
400
484
|
export {
|
|
401
485
|
TreeItemAction as Action,
|
|
402
486
|
TreeItem as Root
|