@acronis-platform/ui-react 0.33.1 → 0.34.0
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.
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
import { jsx as a, jsxs as m, Fragment as T } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
2
|
+
import * as o from "react";
|
|
3
3
|
import { mergeProps as h } from "@base-ui/react/merge-props";
|
|
4
4
|
import { useRender as N } from "@base-ui/react/use-render";
|
|
5
5
|
import { Collapsible as x } from "@base-ui/react/collapsible";
|
|
6
6
|
import { ChevronRightIcon as k, ChevronDownIcon as R, SquareArrowUpRightIcon as I } from "@acronis-platform/icons-react/stroke-mono";
|
|
7
7
|
import { cva as E } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
8
|
-
import { cn as
|
|
9
|
-
const M =
|
|
8
|
+
import { cn as t } from "../../../lib/utils.js";
|
|
9
|
+
const M = o.createContext(null);
|
|
10
10
|
function g() {
|
|
11
|
-
return
|
|
11
|
+
return o.useContext(M) ?? {
|
|
12
12
|
expanded: !0,
|
|
13
13
|
toggleExpanded: () => {
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
17
|
function z(n, e, r) {
|
|
18
|
-
const [s, i] =
|
|
18
|
+
const [s, i] = o.useState(e), d = n !== void 0, c = d ? n : s, l = o.useCallback(
|
|
19
19
|
(u) => {
|
|
20
|
-
|
|
20
|
+
d || i(u), r == null || r(u);
|
|
21
21
|
},
|
|
22
|
-
[
|
|
22
|
+
[d, r]
|
|
23
23
|
);
|
|
24
24
|
return [c, l];
|
|
25
25
|
}
|
|
26
|
-
const P =
|
|
26
|
+
const P = o.forwardRef(
|
|
27
27
|
({
|
|
28
28
|
className: n,
|
|
29
29
|
expanded: e,
|
|
30
30
|
defaultExpanded: r = !0,
|
|
31
31
|
onExpandedChange: s,
|
|
32
32
|
"aria-label": i = "Section navigation",
|
|
33
|
-
render:
|
|
33
|
+
render: d,
|
|
34
34
|
children: c,
|
|
35
35
|
...l
|
|
36
36
|
}, u) => {
|
|
@@ -38,18 +38,18 @@ const P = t.forwardRef(
|
|
|
38
38
|
e,
|
|
39
39
|
r,
|
|
40
40
|
s
|
|
41
|
-
), S =
|
|
41
|
+
), S = o.useMemo(
|
|
42
42
|
() => ({ expanded: b, toggleExpanded: () => p(!b) }),
|
|
43
43
|
[b, p]
|
|
44
44
|
), y = N({
|
|
45
|
-
render:
|
|
45
|
+
render: d,
|
|
46
46
|
ref: u,
|
|
47
47
|
defaultTagName: "nav",
|
|
48
48
|
props: h(
|
|
49
49
|
{
|
|
50
50
|
"aria-label": i,
|
|
51
51
|
"data-state": b ? "expanded" : "collapsed",
|
|
52
|
-
className:
|
|
52
|
+
className: t(
|
|
53
53
|
"group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-r border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-right-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]",
|
|
54
54
|
n
|
|
55
55
|
),
|
|
@@ -62,29 +62,34 @@ const P = t.forwardRef(
|
|
|
62
62
|
}
|
|
63
63
|
);
|
|
64
64
|
P.displayName = "SidebarSecondary";
|
|
65
|
-
const L =
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
65
|
+
const L = o.forwardRef(({ className: n, label: e, children: r, ...s }, i) => (
|
|
66
|
+
// Hidden in collapsed mode — the CollapsedBreadcrumb's parent label carries the
|
|
67
|
+
// section context in the rail, so a truncated single-letter heading is omitted.
|
|
68
|
+
/* @__PURE__ */ a(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
ref: i,
|
|
72
|
+
className: t(
|
|
73
|
+
"flex items-center shrink-0",
|
|
74
|
+
"hidden group-data-[state=expanded]/sidebar:flex",
|
|
75
|
+
"px-[var(--ui-sidebar-secondary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-secondary-collapsed-container-header-padding-y)]",
|
|
76
|
+
"group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-secondary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-secondary-expanded-container-header-padding-y)]",
|
|
77
|
+
n
|
|
78
|
+
),
|
|
79
|
+
...s,
|
|
80
|
+
children: /* @__PURE__ */ a("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: e ?? r })
|
|
81
|
+
}
|
|
82
|
+
)
|
|
78
83
|
));
|
|
79
84
|
L.displayName = "SidebarSecondaryHeader";
|
|
80
|
-
const A =
|
|
85
|
+
const A = o.forwardRef(({ className: n, ...e }, r) => (
|
|
81
86
|
// Expanded: the section list. Hidden in collapsed mode, where the
|
|
82
87
|
// CollapsedBreadcrumb sibling takes over.
|
|
83
88
|
/* @__PURE__ */ a(
|
|
84
89
|
"div",
|
|
85
90
|
{
|
|
86
91
|
ref: r,
|
|
87
|
-
className:
|
|
92
|
+
className: t(
|
|
88
93
|
"flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]",
|
|
89
94
|
"hidden group-data-[state=expanded]/sidebar:flex",
|
|
90
95
|
n
|
|
@@ -94,42 +99,48 @@ const A = t.forwardRef(({ className: n, ...e }, r) => (
|
|
|
94
99
|
)
|
|
95
100
|
));
|
|
96
101
|
A.displayName = "SidebarSecondaryContent";
|
|
97
|
-
const _ =
|
|
102
|
+
const _ = o.forwardRef(({ className: n, parentLabel: e, currentLabel: r, separator: s, ...i }, d) => (
|
|
98
103
|
// Shown only in collapsed mode — toggled by the same data-[state] selector so
|
|
99
|
-
// it stays in the DOM (SSR-present) with no JS branch.
|
|
100
|
-
// parent → separator → current page.
|
|
104
|
+
// it stays in the DOM (SSR-present) with no JS branch. Stacked top→bottom:
|
|
105
|
+
// parent → separator → current page. In the ~48px rail the labels are rotated
|
|
106
|
+
// to read vertically (`writing-mode: vertical-rl`, glyphs tilted 90° clockwise,
|
|
107
|
+
// reading top-to-bottom) so long labels run down the rail instead of clipping;
|
|
108
|
+
// the separator chevron is turned to point down to match that flow.
|
|
101
109
|
/* @__PURE__ */ m(
|
|
102
110
|
"div",
|
|
103
111
|
{
|
|
104
|
-
ref:
|
|
105
|
-
className:
|
|
106
|
-
|
|
112
|
+
ref: d,
|
|
113
|
+
className: t(
|
|
114
|
+
// `flex-1` so the rail fills the space between the (hidden) header and the
|
|
115
|
+
// footer, keeping the collapse trigger pinned to the bottom; the breadcrumb
|
|
116
|
+
// content stays at the top of that space.
|
|
117
|
+
"flex flex-1 flex-col items-center",
|
|
107
118
|
"gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]",
|
|
108
119
|
"flex group-data-[state=expanded]/sidebar:hidden",
|
|
109
120
|
n
|
|
110
121
|
),
|
|
111
122
|
...i,
|
|
112
123
|
children: [
|
|
113
|
-
/* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: e }),
|
|
124
|
+
/* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-collapsed-breadcrumb-label-text-style whitespace-nowrap [writing-mode:vertical-rl] text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: e }),
|
|
114
125
|
/* @__PURE__ */ a(
|
|
115
126
|
"span",
|
|
116
127
|
{
|
|
117
128
|
"aria-hidden": "true",
|
|
118
129
|
className: "inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]",
|
|
119
|
-
children: s ?? /* @__PURE__ */ a(k, { size: 16 })
|
|
130
|
+
children: s ?? /* @__PURE__ */ a(k, { size: 16, className: "rotate-90" })
|
|
120
131
|
}
|
|
121
132
|
),
|
|
122
|
-
/* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: r })
|
|
133
|
+
/* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-collapsed-label-current-page-text-style whitespace-nowrap [writing-mode:vertical-rl] text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: r })
|
|
123
134
|
]
|
|
124
135
|
}
|
|
125
136
|
)
|
|
126
137
|
));
|
|
127
138
|
_.displayName = "SidebarSecondaryCollapsedBreadcrumb";
|
|
128
|
-
const B =
|
|
139
|
+
const B = o.forwardRef(({ className: n, ...e }, r) => /* @__PURE__ */ a(
|
|
129
140
|
"div",
|
|
130
141
|
{
|
|
131
142
|
ref: r,
|
|
132
|
-
className:
|
|
143
|
+
className: t(
|
|
133
144
|
"flex flex-col shrink-0",
|
|
134
145
|
"border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]",
|
|
135
146
|
"py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
|
|
@@ -139,9 +150,9 @@ const B = t.forwardRef(({ className: n, ...e }, r) => /* @__PURE__ */ a(
|
|
|
139
150
|
}
|
|
140
151
|
));
|
|
141
152
|
B.displayName = "SidebarSecondaryFooter";
|
|
142
|
-
const f =
|
|
143
|
-
({ className: n, expandable: e = !1, open: r, defaultOpen: s = !0, onOpenChange: i, children:
|
|
144
|
-
const u =
|
|
153
|
+
const f = o.createContext({ expandable: !1 }), V = { expandable: !1 }, F = { expandable: !0 }, H = o.forwardRef(
|
|
154
|
+
({ className: n, expandable: e = !1, open: r, defaultOpen: s = !0, onOpenChange: i, children: d, ...c }, l) => {
|
|
155
|
+
const u = t(
|
|
145
156
|
"flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
|
|
146
157
|
n
|
|
147
158
|
);
|
|
@@ -154,21 +165,21 @@ const f = t.createContext({ expandable: !1 }), V = { expandable: !1 }, F = { exp
|
|
|
154
165
|
onOpenChange: i,
|
|
155
166
|
render: /* @__PURE__ */ a("div", { className: u }),
|
|
156
167
|
...c,
|
|
157
|
-
children:
|
|
168
|
+
children: d
|
|
158
169
|
}
|
|
159
|
-
) }) : /* @__PURE__ */ a(f.Provider, { value: V, children: /* @__PURE__ */ a("div", { ref: l, className: u, ...c, children:
|
|
170
|
+
) }) : /* @__PURE__ */ a(f.Provider, { value: V, children: /* @__PURE__ */ a("div", { ref: l, className: u, ...c, children: d }) });
|
|
160
171
|
}
|
|
161
172
|
);
|
|
162
173
|
H.displayName = "SidebarSecondarySection";
|
|
163
|
-
const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", C = "pb-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", j =
|
|
164
|
-
const { expandable: c } =
|
|
174
|
+
const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", C = "pb-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", j = o.forwardRef(({ className: n, actions: e, unreadRollup: r, children: s, ...i }, d) => {
|
|
175
|
+
const { expandable: c } = o.useContext(f);
|
|
165
176
|
if (!c) {
|
|
166
|
-
const l =
|
|
167
|
-
return e == null ? /* @__PURE__ */ a("div", { ref:
|
|
177
|
+
const l = t(w, C, n);
|
|
178
|
+
return e == null ? /* @__PURE__ */ a("div", { ref: d, className: l, ...i, children: s }) : /* @__PURE__ */ m(
|
|
168
179
|
"div",
|
|
169
180
|
{
|
|
170
|
-
ref:
|
|
171
|
-
className:
|
|
181
|
+
ref: d,
|
|
182
|
+
className: t(
|
|
172
183
|
l,
|
|
173
184
|
"flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]"
|
|
174
185
|
),
|
|
@@ -183,8 +194,8 @@ const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-
|
|
|
183
194
|
return /* @__PURE__ */ m(
|
|
184
195
|
"div",
|
|
185
196
|
{
|
|
186
|
-
ref:
|
|
187
|
-
className:
|
|
197
|
+
ref: d,
|
|
198
|
+
className: t(
|
|
188
199
|
"flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]",
|
|
189
200
|
C,
|
|
190
201
|
n
|
|
@@ -194,7 +205,7 @@ const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-
|
|
|
194
205
|
/* @__PURE__ */ m(
|
|
195
206
|
x.Trigger,
|
|
196
207
|
{
|
|
197
|
-
className:
|
|
208
|
+
className: t(
|
|
198
209
|
"group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-left",
|
|
199
210
|
w,
|
|
200
211
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"
|
|
@@ -219,12 +230,12 @@ const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-
|
|
|
219
230
|
);
|
|
220
231
|
});
|
|
221
232
|
j.displayName = "SidebarSecondarySectionLabel";
|
|
222
|
-
const D =
|
|
223
|
-
const { expandable: s } =
|
|
233
|
+
const D = o.forwardRef(({ className: n, ...e }, r) => {
|
|
234
|
+
const { expandable: s } = o.useContext(f), i = /* @__PURE__ */ a(
|
|
224
235
|
"ul",
|
|
225
236
|
{
|
|
226
237
|
ref: r,
|
|
227
|
-
className:
|
|
238
|
+
className: t(
|
|
228
239
|
"flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]",
|
|
229
240
|
n
|
|
230
241
|
),
|
|
@@ -244,9 +255,9 @@ const O = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
|
|
|
244
255
|
defaultVariants: {
|
|
245
256
|
variant: "unselected"
|
|
246
257
|
}
|
|
247
|
-
}), U =
|
|
248
|
-
const { expanded: l } = g(), u =
|
|
249
|
-
(y) =>
|
|
258
|
+
}), U = o.forwardRef(({ className: n, selected: e = !1, icon: r, render: s, children: i, ...d }, c) => {
|
|
259
|
+
const { expanded: l } = g(), u = o.Children.toArray(i), b = u.filter(
|
|
260
|
+
(y) => o.isValidElement(y) && y.type.displayName === "SidebarSecondaryMenuItemExtras"
|
|
250
261
|
), p = u.filter(
|
|
251
262
|
(y) => !b.includes(y)
|
|
252
263
|
), S = N({
|
|
@@ -255,7 +266,7 @@ const O = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
|
|
|
255
266
|
defaultTagName: "a",
|
|
256
267
|
props: h(
|
|
257
268
|
{
|
|
258
|
-
className:
|
|
269
|
+
className: t(
|
|
259
270
|
v({
|
|
260
271
|
variant: e ? "selected" : "unselected"
|
|
261
272
|
}),
|
|
@@ -267,7 +278,7 @@ const O = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
|
|
|
267
278
|
/* @__PURE__ */ a(
|
|
268
279
|
"span",
|
|
269
280
|
{
|
|
270
|
-
className:
|
|
281
|
+
className: t(
|
|
271
282
|
"min-w-0 flex-1 truncate text-left",
|
|
272
283
|
!l && "sr-only"
|
|
273
284
|
),
|
|
@@ -277,13 +288,13 @@ const O = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
|
|
|
277
288
|
b.length > 0 && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center", children: b })
|
|
278
289
|
] })
|
|
279
290
|
},
|
|
280
|
-
|
|
291
|
+
d
|
|
281
292
|
)
|
|
282
293
|
});
|
|
283
294
|
return /* @__PURE__ */ a("li", { className: "contents", children: S });
|
|
284
295
|
});
|
|
285
296
|
U.displayName = "SidebarSecondaryMenuItem";
|
|
286
|
-
const q =
|
|
297
|
+
const q = o.forwardRef(({ className: n, render: e, ...r }, s) => (
|
|
287
298
|
// Disclosure row: Base UI Collapsible gives per-row open state +
|
|
288
299
|
// aria-expanded/aria-controls. Rendered as the list `<li>` wrapper.
|
|
289
300
|
/* @__PURE__ */ a(
|
|
@@ -291,20 +302,20 @@ const q = t.forwardRef(({ className: n, render: e, ...r }, s) => (
|
|
|
291
302
|
{
|
|
292
303
|
ref: s,
|
|
293
304
|
render: e ?? /* @__PURE__ */ a("li", {}),
|
|
294
|
-
className:
|
|
305
|
+
className: t("contents", n),
|
|
295
306
|
...r
|
|
296
307
|
}
|
|
297
308
|
)
|
|
298
309
|
));
|
|
299
310
|
q.displayName = "SidebarSecondaryMenuSub";
|
|
300
|
-
const X =
|
|
311
|
+
const X = o.forwardRef(({ className: n, selected: e = !1, icon: r, children: s, ...i }, d) => {
|
|
301
312
|
const { expanded: c } = g();
|
|
302
313
|
return /* @__PURE__ */ m(
|
|
303
314
|
x.Trigger,
|
|
304
315
|
{
|
|
305
|
-
ref:
|
|
316
|
+
ref: d,
|
|
306
317
|
"aria-current": e ? "page" : void 0,
|
|
307
|
-
className:
|
|
318
|
+
className: t(
|
|
308
319
|
v({
|
|
309
320
|
variant: e ? "selected" : "unselected"
|
|
310
321
|
}),
|
|
@@ -314,13 +325,13 @@ const X = t.forwardRef(({ className: n, selected: e = !1, icon: r, children: s,
|
|
|
314
325
|
...i,
|
|
315
326
|
children: [
|
|
316
327
|
r != null && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: r }),
|
|
317
|
-
/* @__PURE__ */ a("span", { className:
|
|
328
|
+
/* @__PURE__ */ a("span", { className: t("flex-1 truncate", !c && "sr-only"), children: s }),
|
|
318
329
|
/* @__PURE__ */ a(
|
|
319
330
|
R,
|
|
320
331
|
{
|
|
321
332
|
size: 16,
|
|
322
333
|
"aria-hidden": "true",
|
|
323
|
-
className:
|
|
334
|
+
className: t(
|
|
324
335
|
"shrink-0 transition-transform group-data-[panel-open]/row:rotate-180",
|
|
325
336
|
!c && "hidden"
|
|
326
337
|
)
|
|
@@ -331,16 +342,16 @@ const X = t.forwardRef(({ className: n, selected: e = !1, icon: r, children: s,
|
|
|
331
342
|
);
|
|
332
343
|
});
|
|
333
344
|
X.displayName = "SidebarSecondaryMenuSubTrigger";
|
|
334
|
-
const G =
|
|
345
|
+
const G = o.forwardRef(({ className: n, children: e, ...r }, s) => /* @__PURE__ */ a(x.Panel, { ref: s, className: t(n), ...r, children: /* @__PURE__ */ a("ul", { className: "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]", children: e }) }));
|
|
335
346
|
G.displayName = "SidebarSecondaryMenuSubContent";
|
|
336
|
-
const J =
|
|
347
|
+
const J = o.forwardRef(({ className: n, selected: e = !1, render: r, children: s, ...i }, d) => {
|
|
337
348
|
const { expanded: c } = g(), l = N({
|
|
338
349
|
render: r,
|
|
339
|
-
ref:
|
|
350
|
+
ref: d,
|
|
340
351
|
defaultTagName: "a",
|
|
341
352
|
props: h(
|
|
342
353
|
{
|
|
343
|
-
className:
|
|
354
|
+
className: t(
|
|
344
355
|
v({
|
|
345
356
|
variant: e ? "selected" : "unselected"
|
|
346
357
|
}),
|
|
@@ -352,7 +363,7 @@ const J = t.forwardRef(({ className: n, selected: e = !1, render: r, children: s
|
|
|
352
363
|
n
|
|
353
364
|
),
|
|
354
365
|
"aria-current": e ? "page" : void 0,
|
|
355
|
-
children: /* @__PURE__ */ a("span", { className:
|
|
366
|
+
children: /* @__PURE__ */ a("span", { className: t("flex-1 truncate text-left", !c && "sr-only"), children: s })
|
|
356
367
|
},
|
|
357
368
|
i
|
|
358
369
|
)
|
|
@@ -360,18 +371,18 @@ const J = t.forwardRef(({ className: n, selected: e = !1, render: r, children: s
|
|
|
360
371
|
return /* @__PURE__ */ a("li", { className: "contents", children: l });
|
|
361
372
|
});
|
|
362
373
|
J.displayName = "SidebarSecondaryMenuSubItem";
|
|
363
|
-
const K =
|
|
374
|
+
const K = o.forwardRef(({ className: n, variant: e, shortcut: r, tag: s, children: i, ...d }, c) => {
|
|
364
375
|
const { expanded: l } = g(), u = e === "tag" || e === "tag-externalLink", b = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
|
|
365
376
|
return /* @__PURE__ */ m(
|
|
366
377
|
"span",
|
|
367
378
|
{
|
|
368
379
|
ref: c,
|
|
369
|
-
className:
|
|
380
|
+
className: t(
|
|
370
381
|
"inline-flex items-center gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]",
|
|
371
382
|
!l && "hidden",
|
|
372
383
|
n
|
|
373
384
|
),
|
|
374
|
-
...
|
|
385
|
+
...d,
|
|
375
386
|
children: [
|
|
376
387
|
u && (s ?? i),
|
|
377
388
|
p && /* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]", children: r ?? i }),
|
|
@@ -387,26 +398,48 @@ const K = t.forwardRef(({ className: n, variant: e, shortcut: r, tag: s, childre
|
|
|
387
398
|
);
|
|
388
399
|
});
|
|
389
400
|
K.displayName = "SidebarSecondaryMenuItemExtras";
|
|
390
|
-
const Q =
|
|
391
|
-
const { expanded:
|
|
401
|
+
const Q = o.forwardRef(({ className: n, icon: e, shortcut: r, children: s, onClick: i, ...d }, c) => {
|
|
402
|
+
const { expanded: l, toggleExpanded: u } = g();
|
|
392
403
|
return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ m(
|
|
393
404
|
"button",
|
|
394
405
|
{
|
|
395
|
-
ref:
|
|
406
|
+
ref: c,
|
|
396
407
|
type: "button",
|
|
397
|
-
"aria-expanded":
|
|
398
|
-
className:
|
|
408
|
+
"aria-expanded": l,
|
|
409
|
+
className: t(
|
|
399
410
|
v({ variant: "unselected" }),
|
|
400
411
|
"text-left",
|
|
401
412
|
n
|
|
402
413
|
),
|
|
403
|
-
onClick: (
|
|
404
|
-
|
|
414
|
+
onClick: (b) => {
|
|
415
|
+
i == null || i(b), b.defaultPrevented || u();
|
|
405
416
|
},
|
|
406
|
-
...
|
|
417
|
+
...d,
|
|
407
418
|
children: [
|
|
408
|
-
e != null &&
|
|
409
|
-
|
|
419
|
+
e != null && // Flip the chevron when collapsed so a chevron-left ("collapse")
|
|
420
|
+
// becomes a chevron-right ("expand") — the icon always points toward
|
|
421
|
+
// the action it triggers.
|
|
422
|
+
/* @__PURE__ */ a(
|
|
423
|
+
"span",
|
|
424
|
+
{
|
|
425
|
+
className: t(
|
|
426
|
+
"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform",
|
|
427
|
+
!l && "rotate-180"
|
|
428
|
+
),
|
|
429
|
+
children: e
|
|
430
|
+
}
|
|
431
|
+
),
|
|
432
|
+
/* @__PURE__ */ a("span", { className: t("flex-1 truncate", !l && "sr-only"), children: s }),
|
|
433
|
+
r != null && /* @__PURE__ */ a(
|
|
434
|
+
"span",
|
|
435
|
+
{
|
|
436
|
+
className: t(
|
|
437
|
+
"shrink-0 ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]",
|
|
438
|
+
!l && "sr-only"
|
|
439
|
+
),
|
|
440
|
+
children: r
|
|
441
|
+
}
|
|
442
|
+
)
|
|
410
443
|
]
|
|
411
444
|
}
|
|
412
445
|
) });
|