@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.
Files changed (46) hide show
  1. package/CHANGELOG.md +74 -0
  2. package/dist/AccordionItem.d.ts +1 -1
  3. package/dist/AccordionItem.js +69 -124
  4. package/dist/Banner.js +149 -120
  5. package/dist/Chip.js +86 -58
  6. package/dist/DEV/AccordionItem.js +2 -0
  7. package/dist/DEV/Banner.js +3 -0
  8. package/dist/DEV/Chip.js +3 -0
  9. package/dist/DEV/Dialog.js +2 -0
  10. package/dist/DEV/DropdownMenu.js +2 -0
  11. package/dist/DEV/ErrorRegion.js +5 -11
  12. package/dist/DEV/NavigationList.js +130 -0
  13. package/dist/DEV/NavigationRail.js +6 -4
  14. package/dist/DEV/Popover.js +90 -0
  15. package/dist/DEV/Table.js +3 -0
  16. package/dist/DEV/Tabs.js +3 -1
  17. package/dist/DEV/Toolbar.js +2 -0
  18. package/dist/DEV/Tree.js +2 -0
  19. package/dist/DEV/TreeItem.js +7 -2
  20. package/dist/DEV/index.js +4 -0
  21. package/dist/DEV/styles.css.js +1 -1
  22. package/dist/DEV/~utils.ListItem.js +3 -3
  23. package/dist/DEV/~utils.useInit.js +16 -0
  24. package/dist/Dialog.js +142 -132
  25. package/dist/DropdownMenu.js +217 -234
  26. package/dist/ErrorRegion.d.ts +18 -8
  27. package/dist/ErrorRegion.js +129 -154
  28. package/dist/NavigationList.d.ts +110 -0
  29. package/dist/NavigationList.js +130 -0
  30. package/dist/NavigationRail.js +211 -188
  31. package/dist/Popover.d.ts +36 -0
  32. package/dist/Popover.js +99 -0
  33. package/dist/Table.js +119 -108
  34. package/dist/Tabs.js +100 -63
  35. package/dist/Toolbar.js +25 -43
  36. package/dist/Tree.js +15 -12
  37. package/dist/TreeItem.js +398 -314
  38. package/dist/index.d.ts +2 -0
  39. package/dist/index.js +4 -0
  40. package/dist/styles.css.js +1 -1
  41. package/dist/~utils.ListItem.d.ts +3 -3
  42. package/dist/~utils.ListItem.js +21 -34
  43. package/dist/~utils.icons.js +26 -46
  44. package/dist/~utils.useInit.d.ts +8 -0
  45. package/dist/~utils.useInit.js +13 -0
  46. 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
- void 0
35
- );
36
- const TreeItem = React.memo(
37
- forwardRef((props, forwardedRef) => {
38
- const {
39
- selected,
40
- onSelectedChange,
41
- expanded,
42
- onExpandedChange,
43
- icon: _icon,
44
- unstable_decorations: _unstable_decorations,
45
- label: _label,
46
- description: _description,
47
- inlineActions: _inlineActions,
48
- actions: _actions,
49
- error: _error,
50
- onClick: onClickProp,
51
- onKeyDown: onKeyDownProp,
52
- ...rest
53
- } = props;
54
- const onExpanderClick = useEventHandlers(() => {
55
- if (expanded === void 0) return;
56
- onExpandedChange?.(!expanded);
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
- const handleKeyDown = (event) => {
64
- if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
65
- return;
66
- }
67
- if (expanded === void 0) return;
68
- if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
69
- event.preventDefault();
70
- onExpandedChange?.(event.key === "ArrowRight");
71
- }
72
- };
73
- return /* @__PURE__ */ jsx(TreeItemRootProvider, { ...props, children: /* @__PURE__ */ jsx(
74
- TreeItemRoot,
75
- {
76
- ...rest,
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
- onClick: useEventHandlers(onClickProp, handleClick),
80
- onKeyDown: useEventHandlers(onKeyDownProp, handleKeyDown),
81
- ref: forwardedRef,
82
- children: React.useMemo(
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
- const icon = error ? /* @__PURE__ */ jsx(StatusIcon, { tone: "attention" }) : iconProp;
111
- const hasDecoration = icon || decorations;
112
- return /* @__PURE__ */ jsx(TreeItemErrorContext.Provider, { value: error, children: /* @__PURE__ */ jsx(TreeItemInlineActionsContext.Provider, { value: inlineActions, children: /* @__PURE__ */ jsx(TreeItemActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx(
113
- TreeItemDisplayActionsMenuContext.Provider,
114
- {
115
- value: actions ? actions.length > 0 : false,
116
- children: /* @__PURE__ */ jsx(
117
- TreeItemDecorationIdContext.Provider,
118
- {
119
- value: hasDecoration ? decorationId : void 0,
120
- children: /* @__PURE__ */ jsx(TreeItemDecorationsContext.Provider, { value: decorations, children: /* @__PURE__ */ jsx(TreeItemIconContext.Provider, { value: icon, children: /* @__PURE__ */ jsx(TreeItemLabelIdContext.Provider, { value: labelId, children: /* @__PURE__ */ jsx(TreeItemLabelContext.Provider, { value: label, children: /* @__PURE__ */ jsx(TreeItemDescriptionContext.Provider, { value: description, children: /* @__PURE__ */ jsx(
121
- TreeItemDescriptionIdContext.Provider,
122
- {
123
- value: description ? descriptionId : void 0,
124
- children: props.children
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
- forwardRef((props, forwardedRef) => {
134
- const {
135
- style: styleProp,
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
- selected,
138
- expanded,
139
- ...rest
140
- } = props;
141
- const labelId = React.useContext(TreeItemLabelIdContext);
142
- const decorationId = React.useContext(TreeItemDecorationIdContext);
143
- const descriptionId = React.useContext(TreeItemDescriptionIdContext);
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
- React.useEffect(() => {
187
- const el = ref.current;
188
- if (!el || renderActions) return;
189
- const observer = new IntersectionObserver(([entry]) => {
190
- if (!entry.isIntersecting) return;
191
- React.startTransition(() => {
192
- setRenderActions(true);
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
- observer.observe(el);
196
- return () => {
197
- observer.disconnect();
215
+ observer.observe(el);
216
+ return () => {
217
+ observer.disconnect();
218
+ };
198
219
  };
199
- }, [renderActions]);
200
- return [ref, renderActions];
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 { expanded, selected, onExpanderClick } = props;
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
- return /* @__PURE__ */ jsxs(
207
- ListItem.Root,
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": error ? true : void 0,
254
+ "data-_sk-error": t0,
212
255
  className: "\u{1F95D}TreeItemNode",
213
256
  role: void 0,
214
257
  ref,
215
- children: [
216
- /* @__PURE__ */ jsx(TreeItemDecorations, { onExpanderClick }),
217
- /* @__PURE__ */ jsx(TreeItemContent, {}),
218
- /* @__PURE__ */ jsx(TreeItemDescription, {}),
219
- renderActions && /* @__PURE__ */ jsx(TreeItemActions, {})
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, { children: [
226
- /* @__PURE__ */ jsx(TreeItemExpander, { onClick: props.onExpanderClick }),
227
- /* @__PURE__ */ jsx(TreeItemDecoration, {})
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
- return icon || decorations ? /* @__PURE__ */ jsx(
235
- Role,
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" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : void 0,
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
- ) : null;
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
- return /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}TreeItemContent", children: label });
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
- return description ? /* @__PURE__ */ jsx(ListItem.Content, { id: descriptionId, className: "\u{1F95D}TreeItemDescription", children: description }) : void 0;
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
- forwardRef((props, forwardedRef) => {
256
- return /* @__PURE__ */ jsxs(
257
- ListItem.Decoration,
258
- {
259
- ...props,
260
- onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
261
- onKeyDown: useEventHandlers(
262
- props.onKeyDown,
263
- (e) => e.stopPropagation()
264
- ),
265
- className: cx("\u{1F95D}TreeItemActionsContainer", props.className),
266
- ref: forwardedRef,
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
- const actionsToDisplay = actions.slice(0, 2);
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
- forwardRef((props, forwardedRef) => {
286
- const [open, _setOpen] = React.useState(false);
287
- const isArrowKeyPressed = React.useRef(false);
288
- const displayMenu = React.useContext(TreeItemDisplayActionsMenuContext);
289
- const setOpen = React.useCallback((value) => {
290
- if (value && !isArrowKeyPressed.current) {
291
- _setOpen(true);
292
- } else {
293
- _setOpen(false);
294
- }
295
- }, []);
296
- if (!displayMenu) return null;
297
- return /* @__PURE__ */ jsxs(
298
- DropdownMenu.Provider,
299
- {
300
- open,
301
- setOpen,
302
- placement: "right-start",
303
- children: [
304
- /* @__PURE__ */ jsx(
305
- DropdownMenu.Button,
306
- {
307
- ...props,
308
- onKeyDown: (e) => {
309
- if (arrowKeys.includes(e.key)) {
310
- isArrowKeyPressed.current = true;
311
- }
312
- queueMicrotask(() => {
313
- isArrowKeyPressed.current = false;
314
- });
315
- },
316
- render: /* @__PURE__ */ jsx(TreeItemInlineAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) }),
317
- ref: forwardedRef
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, { value: true, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { children: /* @__PURE__ */ jsx(TreeItemActionsRenderer, {}) }) });
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
- forwardRef((props, forwardedRef) => {
335
- const { label, icon, dot, ...rest } = props;
336
- const actionsMenuContext = React.useContext(TreeItemActionsMenuContext);
337
- if (actionsMenuContext) {
338
- return /* @__PURE__ */ jsx(
339
- DropdownMenu.Item,
340
- {
341
- ...rest,
342
- label,
343
- icon,
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
- ...rest
364
- } = props;
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