@purpurds/tabs 8.8.1 → 8.9.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.
- package/dist/LICENSE.txt +1 -1
- package/dist/styles.css +1 -1
- package/dist/tabs.cjs.js +1 -9
- package/dist/tabs.cjs.js.map +1 -1
- package/dist/tabs.es.js +291 -312
- package/dist/tabs.es.js.map +1 -1
- package/package.json +24 -24
package/dist/tabs.es.js
CHANGED
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
import { jsx as m, jsxs as ee } from "react/jsx-runtime";
|
|
2
2
|
import * as a from "react";
|
|
3
|
-
import O, { forwardRef as be, isValidElement as
|
|
3
|
+
import O, { forwardRef as be, isValidElement as Ge, useRef as te, useState as B, Children as z, useEffect as H } from "react";
|
|
4
4
|
import "react-dom";
|
|
5
5
|
function We(e) {
|
|
6
6
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
7
7
|
}
|
|
8
|
-
var de = { exports: {} };
|
|
9
|
-
/*!
|
|
10
|
-
Copyright (c) 2018 Jed Watson.
|
|
11
|
-
Licensed under the MIT License (MIT), see
|
|
12
|
-
http://jedwatson.github.io/classnames
|
|
13
|
-
*/
|
|
14
|
-
var fe;
|
|
8
|
+
var de = { exports: {} }, fe;
|
|
15
9
|
function Ke() {
|
|
16
10
|
return fe || (fe = 1, (function(e) {
|
|
17
11
|
(function() {
|
|
@@ -45,7 +39,7 @@ function Ke() {
|
|
|
45
39
|
})(de)), de.exports;
|
|
46
40
|
}
|
|
47
41
|
var qe = Ke();
|
|
48
|
-
const ze = /* @__PURE__ */ We(qe),
|
|
42
|
+
const ze = /* @__PURE__ */ We(qe), He = {
|
|
49
43
|
"purpur-icon": "_purpur-icon_8u1lq_1",
|
|
50
44
|
"purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
|
|
51
45
|
"purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
|
|
@@ -53,19 +47,19 @@ const ze = /* @__PURE__ */ We(qe), Ye = {
|
|
|
53
47
|
"purpur-icon--md": "_purpur-icon--md_8u1lq_16",
|
|
54
48
|
"purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
|
|
55
49
|
"purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
|
|
56
|
-
},
|
|
50
|
+
}, Ye = ze.bind(He), pe = "purpur-icon", Ze = "md", Xe = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Je = ({ content: e = "", title: t } = {}) => {
|
|
57
51
|
const r = [
|
|
58
52
|
{ name: "xmlns", value: "http://www.w3.org/2000/svg" },
|
|
59
53
|
{ name: "fill", value: "currentColor" },
|
|
60
54
|
{ name: "viewBox", value: "0 0 24 24" },
|
|
61
55
|
t ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
|
|
62
56
|
], o = t ? `<title>${t}</title>` : "";
|
|
63
|
-
return `<svg ${
|
|
64
|
-
}, Qe = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), ge = ({ svg: e, allyTitle: t, className: r, size: o =
|
|
57
|
+
return `<svg ${Xe(r)}>${o}${e}</svg>`;
|
|
58
|
+
}, Qe = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), ge = ({ svg: e, allyTitle: t, className: r, size: o = Ze, ...s }) => {
|
|
65
59
|
const n = Je({
|
|
66
60
|
content: Qe(e.svg),
|
|
67
61
|
title: t
|
|
68
|
-
}), c =
|
|
62
|
+
}), c = Ye(pe, `${pe}--${o}`, r);
|
|
69
63
|
return /* @__PURE__ */ m("span", { className: c, dangerouslySetInnerHTML: { __html: n }, ...s });
|
|
70
64
|
};
|
|
71
65
|
ge.displayName = "Icon";
|
|
@@ -82,37 +76,35 @@ const et = {
|
|
|
82
76
|
};
|
|
83
77
|
function A(e, t, { checkForDefaultPrevented: r = !0 } = {}) {
|
|
84
78
|
return function(s) {
|
|
85
|
-
if (e
|
|
86
|
-
return t
|
|
79
|
+
if (e?.(s), r === !1 || !s.defaultPrevented)
|
|
80
|
+
return t?.(s);
|
|
87
81
|
};
|
|
88
82
|
}
|
|
89
83
|
function ie(e, t = []) {
|
|
90
84
|
let r = [];
|
|
91
85
|
function o(n, c) {
|
|
92
|
-
const i = a.createContext(c),
|
|
86
|
+
const i = a.createContext(c), f = r.length;
|
|
93
87
|
r = [...r, c];
|
|
94
|
-
const
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
return /* @__PURE__ */ m(h.Provider, { value: _, children: g });
|
|
88
|
+
const l = (d) => {
|
|
89
|
+
const { scope: _, children: g, ...I } = d, C = _?.[e]?.[f] || i, v = a.useMemo(() => I, Object.values(I));
|
|
90
|
+
return /* @__PURE__ */ m(C.Provider, { value: v, children: g });
|
|
98
91
|
};
|
|
99
|
-
|
|
100
|
-
function
|
|
101
|
-
|
|
102
|
-
const g = ((h = v == null ? void 0 : v[e]) == null ? void 0 : h[d]) || i, I = a.useContext(g);
|
|
92
|
+
l.displayName = n + "Provider";
|
|
93
|
+
function u(d, _) {
|
|
94
|
+
const g = _?.[e]?.[f] || i, I = a.useContext(g);
|
|
103
95
|
if (I) return I;
|
|
104
96
|
if (c !== void 0) return c;
|
|
105
|
-
throw new Error(`\`${
|
|
97
|
+
throw new Error(`\`${d}\` must be used within \`${n}\``);
|
|
106
98
|
}
|
|
107
|
-
return [
|
|
99
|
+
return [l, u];
|
|
108
100
|
}
|
|
109
101
|
const s = () => {
|
|
110
102
|
const n = r.map((c) => a.createContext(c));
|
|
111
103
|
return function(i) {
|
|
112
|
-
const
|
|
104
|
+
const f = i?.[e] || n;
|
|
113
105
|
return a.useMemo(
|
|
114
|
-
() => ({ [`__scope${e}`]: { ...i, [e]:
|
|
115
|
-
[i,
|
|
106
|
+
() => ({ [`__scope${e}`]: { ...i, [e]: f } }),
|
|
107
|
+
[i, f]
|
|
116
108
|
);
|
|
117
109
|
};
|
|
118
110
|
};
|
|
@@ -127,9 +119,9 @@ function nt(...e) {
|
|
|
127
119
|
scopeName: s.scopeName
|
|
128
120
|
}));
|
|
129
121
|
return function(n) {
|
|
130
|
-
const c = o.reduce((i, { useScope:
|
|
131
|
-
const
|
|
132
|
-
return { ...i, ...
|
|
122
|
+
const c = o.reduce((i, { useScope: f, scopeName: l }) => {
|
|
123
|
+
const d = f(n)[`__scope${l}`];
|
|
124
|
+
return { ...i, ...d };
|
|
133
125
|
}, {});
|
|
134
126
|
return a.useMemo(() => ({ [`__scope${t.scopeName}`]: c }), [c]);
|
|
135
127
|
};
|
|
@@ -157,16 +149,16 @@ function he(...e) {
|
|
|
157
149
|
};
|
|
158
150
|
};
|
|
159
151
|
}
|
|
160
|
-
function
|
|
152
|
+
function Z(...e) {
|
|
161
153
|
return a.useCallback(he(...e), e);
|
|
162
154
|
}
|
|
163
155
|
// @__NO_SIDE_EFFECTS__
|
|
164
156
|
function se(e) {
|
|
165
157
|
const t = /* @__PURE__ */ rt(e), r = a.forwardRef((o, s) => {
|
|
166
|
-
const { children: n, ...c } = o, i = a.Children.toArray(n),
|
|
167
|
-
if (
|
|
168
|
-
const
|
|
169
|
-
return /* @__PURE__ */ m(t, { ...c, ref: s, children: a.isValidElement(
|
|
158
|
+
const { children: n, ...c } = o, i = a.Children.toArray(n), f = i.find(st);
|
|
159
|
+
if (f) {
|
|
160
|
+
const l = f.props.children, u = i.map((d) => d === f ? a.Children.count(l) > 1 ? a.Children.only(null) : a.isValidElement(l) ? l.props.children : null : d);
|
|
161
|
+
return /* @__PURE__ */ m(t, { ...c, ref: s, children: a.isValidElement(l) ? a.cloneElement(l, void 0, u) : null });
|
|
170
162
|
}
|
|
171
163
|
return /* @__PURE__ */ m(t, { ...c, ref: s, children: n });
|
|
172
164
|
});
|
|
@@ -193,63 +185,62 @@ function ct(e, t) {
|
|
|
193
185
|
for (const o in t) {
|
|
194
186
|
const s = e[o], n = t[o];
|
|
195
187
|
/^on[A-Z]/.test(o) ? s && n ? r[o] = (...i) => {
|
|
196
|
-
const
|
|
197
|
-
return s(...i),
|
|
188
|
+
const f = n(...i);
|
|
189
|
+
return s(...i), f;
|
|
198
190
|
} : s && (r[o] = s) : o === "style" ? r[o] = { ...s, ...n } : o === "className" && (r[o] = [s, n].filter(Boolean).join(" "));
|
|
199
191
|
}
|
|
200
192
|
return { ...e, ...r };
|
|
201
193
|
}
|
|
202
194
|
function it(e) {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
return r ? e.ref : (t = (s = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : s.get, r = t && "isReactWarning" in t && t.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
|
|
195
|
+
let t = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, r = t && "isReactWarning" in t && t.isReactWarning;
|
|
196
|
+
return r ? e.ref : (t = Object.getOwnPropertyDescriptor(e, "ref")?.get, r = t && "isReactWarning" in t && t.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
|
|
206
197
|
}
|
|
207
198
|
function at(e) {
|
|
208
199
|
const t = e + "CollectionProvider", [r, o] = ie(t), [s, n] = r(
|
|
209
200
|
t,
|
|
210
201
|
{ collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
|
|
211
|
-
), c = (
|
|
212
|
-
const { scope:
|
|
213
|
-
return /* @__PURE__ */ m(s, { scope:
|
|
202
|
+
), c = (C) => {
|
|
203
|
+
const { scope: v, children: y } = C, R = O.useRef(null), h = O.useRef(/* @__PURE__ */ new Map()).current;
|
|
204
|
+
return /* @__PURE__ */ m(s, { scope: v, itemMap: h, collectionRef: R, children: y });
|
|
214
205
|
};
|
|
215
206
|
c.displayName = t;
|
|
216
|
-
const i = e + "CollectionSlot",
|
|
217
|
-
(
|
|
218
|
-
const { scope:
|
|
219
|
-
return /* @__PURE__ */ m(
|
|
207
|
+
const i = e + "CollectionSlot", f = /* @__PURE__ */ se(i), l = O.forwardRef(
|
|
208
|
+
(C, v) => {
|
|
209
|
+
const { scope: y, children: R } = C, h = n(i, y), b = Z(v, h.collectionRef);
|
|
210
|
+
return /* @__PURE__ */ m(f, { ref: b, children: R });
|
|
220
211
|
}
|
|
221
212
|
);
|
|
222
|
-
|
|
223
|
-
const
|
|
224
|
-
(
|
|
225
|
-
const { scope:
|
|
226
|
-
return O.useEffect(() => (
|
|
213
|
+
l.displayName = i;
|
|
214
|
+
const u = e + "CollectionItemSlot", d = "data-radix-collection-item", _ = /* @__PURE__ */ se(u), g = O.forwardRef(
|
|
215
|
+
(C, v) => {
|
|
216
|
+
const { scope: y, children: R, ...h } = C, b = O.useRef(null), T = Z(v, b), E = n(u, y);
|
|
217
|
+
return O.useEffect(() => (E.itemMap.set(b, { ref: b, ...h }), () => void E.itemMap.delete(b))), /* @__PURE__ */ m(_, { [d]: "", ref: T, children: R });
|
|
227
218
|
}
|
|
228
219
|
);
|
|
229
|
-
g.displayName =
|
|
230
|
-
function I(
|
|
231
|
-
const
|
|
220
|
+
g.displayName = u;
|
|
221
|
+
function I(C) {
|
|
222
|
+
const v = n(e + "CollectionConsumer", C);
|
|
232
223
|
return O.useCallback(() => {
|
|
233
|
-
const
|
|
234
|
-
if (!
|
|
235
|
-
const
|
|
236
|
-
return Array.from(
|
|
237
|
-
(
|
|
224
|
+
const R = v.collectionRef.current;
|
|
225
|
+
if (!R) return [];
|
|
226
|
+
const h = Array.from(R.querySelectorAll(`[${d}]`));
|
|
227
|
+
return Array.from(v.itemMap.values()).sort(
|
|
228
|
+
(E, P) => h.indexOf(E.ref.current) - h.indexOf(P.ref.current)
|
|
238
229
|
);
|
|
239
|
-
}, [
|
|
230
|
+
}, [v.collectionRef, v.itemMap]);
|
|
240
231
|
}
|
|
241
232
|
return [
|
|
242
|
-
{ Provider: c, Slot:
|
|
233
|
+
{ Provider: c, Slot: l, ItemSlot: g },
|
|
243
234
|
I,
|
|
244
235
|
o
|
|
245
236
|
];
|
|
246
237
|
}
|
|
247
|
-
var
|
|
238
|
+
var X = globalThis?.document ? a.useLayoutEffect : () => {
|
|
248
239
|
}, ut = a[" useId ".trim().toString()] || (() => {
|
|
249
240
|
}), lt = 0;
|
|
250
241
|
function we(e) {
|
|
251
242
|
const [t, r] = a.useState(ut());
|
|
252
|
-
return
|
|
243
|
+
return X(() => {
|
|
253
244
|
r((o) => o ?? String(lt++));
|
|
254
245
|
}, [e]), t ? `radix-${t}` : "";
|
|
255
246
|
}
|
|
@@ -271,10 +262,10 @@ var dt = [
|
|
|
271
262
|
"span",
|
|
272
263
|
"svg",
|
|
273
264
|
"ul"
|
|
274
|
-
],
|
|
265
|
+
], L = dt.reduce((e, t) => {
|
|
275
266
|
const r = /* @__PURE__ */ se(`Primitive.${t}`), o = a.forwardRef((s, n) => {
|
|
276
|
-
const { asChild: c, ...i } = s,
|
|
277
|
-
return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ m(
|
|
267
|
+
const { asChild: c, ...i } = s, f = c ? r : t;
|
|
268
|
+
return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ m(f, { ...i, ref: n });
|
|
278
269
|
});
|
|
279
270
|
return o.displayName = `Primitive.${t}`, { ...e, [t]: o };
|
|
280
271
|
}, {});
|
|
@@ -282,12 +273,9 @@ function ft(e) {
|
|
|
282
273
|
const t = a.useRef(e);
|
|
283
274
|
return a.useEffect(() => {
|
|
284
275
|
t.current = e;
|
|
285
|
-
}), a.useMemo(() => (...r) =>
|
|
286
|
-
var o;
|
|
287
|
-
return (o = t.current) == null ? void 0 : o.call(t, ...r);
|
|
288
|
-
}, []);
|
|
276
|
+
}), a.useMemo(() => (...r) => t.current?.(...r), []);
|
|
289
277
|
}
|
|
290
|
-
var pt = a[" useInsertionEffect ".trim().toString()] ||
|
|
278
|
+
var pt = a[" useInsertionEffect ".trim().toString()] || X;
|
|
291
279
|
function Ce({
|
|
292
280
|
prop: e,
|
|
293
281
|
defaultProp: t,
|
|
@@ -298,28 +286,27 @@ function Ce({
|
|
|
298
286
|
const [s, n, c] = mt({
|
|
299
287
|
defaultProp: t,
|
|
300
288
|
onChange: r
|
|
301
|
-
}), i = e !== void 0,
|
|
289
|
+
}), i = e !== void 0, f = i ? e : s;
|
|
302
290
|
{
|
|
303
|
-
const
|
|
291
|
+
const u = a.useRef(e !== void 0);
|
|
304
292
|
a.useEffect(() => {
|
|
305
|
-
const
|
|
306
|
-
|
|
307
|
-
`${o} is changing from ${
|
|
308
|
-
),
|
|
293
|
+
const d = u.current;
|
|
294
|
+
d !== i && console.warn(
|
|
295
|
+
`${o} is changing from ${d ? "controlled" : "uncontrolled"} to ${i ? "controlled" : "uncontrolled"}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
|
|
296
|
+
), u.current = i;
|
|
309
297
|
}, [i, o]);
|
|
310
298
|
}
|
|
311
|
-
const
|
|
312
|
-
(
|
|
313
|
-
var f;
|
|
299
|
+
const l = a.useCallback(
|
|
300
|
+
(u) => {
|
|
314
301
|
if (i) {
|
|
315
|
-
const
|
|
316
|
-
|
|
302
|
+
const d = vt(u) ? u(e) : u;
|
|
303
|
+
d !== e && c.current?.(d);
|
|
317
304
|
} else
|
|
318
|
-
n(
|
|
305
|
+
n(u);
|
|
319
306
|
},
|
|
320
307
|
[i, e, n, c]
|
|
321
308
|
);
|
|
322
|
-
return [
|
|
309
|
+
return [f, l];
|
|
323
310
|
}
|
|
324
311
|
function mt({
|
|
325
312
|
defaultProp: e,
|
|
@@ -329,26 +316,25 @@ function mt({
|
|
|
329
316
|
return pt(() => {
|
|
330
317
|
n.current = t;
|
|
331
318
|
}, [t]), a.useEffect(() => {
|
|
332
|
-
|
|
333
|
-
s.current !== r && ((c = n.current) == null || c.call(n, r), s.current = r);
|
|
319
|
+
s.current !== r && (n.current?.(r), s.current = r);
|
|
334
320
|
}, [r, s]), [r, o, n];
|
|
335
321
|
}
|
|
336
322
|
function vt(e) {
|
|
337
323
|
return typeof e == "function";
|
|
338
324
|
}
|
|
339
325
|
var _t = a.createContext(void 0);
|
|
340
|
-
function
|
|
326
|
+
function ye(e) {
|
|
341
327
|
const t = a.useContext(_t);
|
|
342
328
|
return e || t || "ltr";
|
|
343
329
|
}
|
|
344
|
-
var ne = "rovingFocusGroup.onEntryFocus", bt = { bubbles: !1, cancelable: !0 }, U = "RovingFocusGroup", [ce,
|
|
330
|
+
var ne = "rovingFocusGroup.onEntryFocus", bt = { bubbles: !1, cancelable: !0 }, U = "RovingFocusGroup", [ce, Se, gt] = at(U), [ht, Ie] = ie(
|
|
345
331
|
U,
|
|
346
332
|
[gt]
|
|
347
333
|
), [wt, Ct] = ht(U), Re = a.forwardRef(
|
|
348
|
-
(e, t) => /* @__PURE__ */ m(ce.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m(ce.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m(
|
|
334
|
+
(e, t) => /* @__PURE__ */ m(ce.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m(ce.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m(yt, { ...e, ref: t }) }) })
|
|
349
335
|
);
|
|
350
336
|
Re.displayName = U;
|
|
351
|
-
var
|
|
337
|
+
var yt = a.forwardRef((e, t) => {
|
|
352
338
|
const {
|
|
353
339
|
__scopeRovingFocusGroup: r,
|
|
354
340
|
orientation: o,
|
|
@@ -356,71 +342,71 @@ var St = a.forwardRef((e, t) => {
|
|
|
356
342
|
dir: n,
|
|
357
343
|
currentTabStopId: c,
|
|
358
344
|
defaultCurrentTabStopId: i,
|
|
359
|
-
onCurrentTabStopIdChange:
|
|
360
|
-
onEntryFocus:
|
|
361
|
-
preventScrollOnEntryFocus:
|
|
362
|
-
...
|
|
363
|
-
} = e,
|
|
345
|
+
onCurrentTabStopIdChange: f,
|
|
346
|
+
onEntryFocus: l,
|
|
347
|
+
preventScrollOnEntryFocus: u = !1,
|
|
348
|
+
...d
|
|
349
|
+
} = e, _ = a.useRef(null), g = Z(t, _), I = ye(n), [C, v] = Ce({
|
|
364
350
|
prop: c,
|
|
365
351
|
defaultProp: i ?? null,
|
|
366
|
-
onChange:
|
|
352
|
+
onChange: f,
|
|
367
353
|
caller: U
|
|
368
|
-
}), [
|
|
354
|
+
}), [y, R] = a.useState(!1), h = ft(l), b = Se(r), T = a.useRef(!1), [E, P] = a.useState(0);
|
|
369
355
|
return a.useEffect(() => {
|
|
370
|
-
const
|
|
371
|
-
if (
|
|
372
|
-
return
|
|
373
|
-
}, [
|
|
356
|
+
const S = _.current;
|
|
357
|
+
if (S)
|
|
358
|
+
return S.addEventListener(ne, h), () => S.removeEventListener(ne, h);
|
|
359
|
+
}, [h]), /* @__PURE__ */ m(
|
|
374
360
|
wt,
|
|
375
361
|
{
|
|
376
362
|
scope: r,
|
|
377
363
|
orientation: o,
|
|
378
364
|
dir: I,
|
|
379
365
|
loop: s,
|
|
380
|
-
currentTabStopId:
|
|
366
|
+
currentTabStopId: C,
|
|
381
367
|
onItemFocus: a.useCallback(
|
|
382
|
-
(
|
|
383
|
-
[
|
|
368
|
+
(S) => v(S),
|
|
369
|
+
[v]
|
|
384
370
|
),
|
|
385
|
-
onItemShiftTab: a.useCallback(() =>
|
|
371
|
+
onItemShiftTab: a.useCallback(() => R(!0), []),
|
|
386
372
|
onFocusableItemAdd: a.useCallback(
|
|
387
|
-
() => P((
|
|
373
|
+
() => P((S) => S + 1),
|
|
388
374
|
[]
|
|
389
375
|
),
|
|
390
376
|
onFocusableItemRemove: a.useCallback(
|
|
391
|
-
() => P((
|
|
377
|
+
() => P((S) => S - 1),
|
|
392
378
|
[]
|
|
393
379
|
),
|
|
394
380
|
children: /* @__PURE__ */ m(
|
|
395
|
-
|
|
381
|
+
L.div,
|
|
396
382
|
{
|
|
397
|
-
tabIndex:
|
|
383
|
+
tabIndex: y || E === 0 ? -1 : 0,
|
|
398
384
|
"data-orientation": o,
|
|
399
|
-
...
|
|
385
|
+
...d,
|
|
400
386
|
ref: g,
|
|
401
387
|
style: { outline: "none", ...e.style },
|
|
402
388
|
onMouseDown: A(e.onMouseDown, () => {
|
|
403
|
-
|
|
389
|
+
T.current = !0;
|
|
404
390
|
}),
|
|
405
|
-
onFocus: A(e.onFocus, (
|
|
406
|
-
const Q = !
|
|
407
|
-
if (
|
|
391
|
+
onFocus: A(e.onFocus, (S) => {
|
|
392
|
+
const Q = !T.current;
|
|
393
|
+
if (S.target === S.currentTarget && Q && !y) {
|
|
408
394
|
const F = new CustomEvent(ne, bt);
|
|
409
|
-
if (
|
|
410
|
-
const
|
|
395
|
+
if (S.currentTarget.dispatchEvent(F), !F.defaultPrevented) {
|
|
396
|
+
const j = b().filter((x) => x.focusable), V = j.find((x) => x.active), k = j.find((x) => x.id === C), W = [V, k, ...j].filter(
|
|
411
397
|
Boolean
|
|
412
|
-
).map((
|
|
413
|
-
|
|
398
|
+
).map((x) => x.ref.current);
|
|
399
|
+
Ee(W, u);
|
|
414
400
|
}
|
|
415
401
|
}
|
|
416
|
-
|
|
402
|
+
T.current = !1;
|
|
417
403
|
}),
|
|
418
|
-
onBlur: A(e.onBlur, () =>
|
|
404
|
+
onBlur: A(e.onBlur, () => R(!1))
|
|
419
405
|
}
|
|
420
406
|
)
|
|
421
407
|
}
|
|
422
408
|
);
|
|
423
|
-
}),
|
|
409
|
+
}), Te = "RovingFocusGroupItem", Ne = a.forwardRef(
|
|
424
410
|
(e, t) => {
|
|
425
411
|
const {
|
|
426
412
|
__scopeRovingFocusGroup: r,
|
|
@@ -429,7 +415,7 @@ var St = a.forwardRef((e, t) => {
|
|
|
429
415
|
tabStopId: n,
|
|
430
416
|
children: c,
|
|
431
417
|
...i
|
|
432
|
-
} = e,
|
|
418
|
+
} = e, f = we(), l = n || f, u = Ct(Te, r), d = u.currentTabStopId === l, _ = Se(r), { onFocusableItemAdd: g, onFocusableItemRemove: I, currentTabStopId: C } = u;
|
|
433
419
|
return a.useEffect(() => {
|
|
434
420
|
if (o)
|
|
435
421
|
return g(), () => I();
|
|
@@ -437,49 +423,49 @@ var St = a.forwardRef((e, t) => {
|
|
|
437
423
|
ce.ItemSlot,
|
|
438
424
|
{
|
|
439
425
|
scope: r,
|
|
440
|
-
id:
|
|
426
|
+
id: l,
|
|
441
427
|
focusable: o,
|
|
442
428
|
active: s,
|
|
443
429
|
children: /* @__PURE__ */ m(
|
|
444
|
-
|
|
430
|
+
L.span,
|
|
445
431
|
{
|
|
446
|
-
tabIndex:
|
|
447
|
-
"data-orientation":
|
|
432
|
+
tabIndex: d ? 0 : -1,
|
|
433
|
+
"data-orientation": u.orientation,
|
|
448
434
|
...i,
|
|
449
435
|
ref: t,
|
|
450
|
-
onMouseDown: A(e.onMouseDown, (
|
|
451
|
-
o ?
|
|
436
|
+
onMouseDown: A(e.onMouseDown, (v) => {
|
|
437
|
+
o ? u.onItemFocus(l) : v.preventDefault();
|
|
452
438
|
}),
|
|
453
|
-
onFocus: A(e.onFocus, () =>
|
|
454
|
-
onKeyDown: A(e.onKeyDown, (
|
|
455
|
-
if (
|
|
456
|
-
|
|
439
|
+
onFocus: A(e.onFocus, () => u.onItemFocus(l)),
|
|
440
|
+
onKeyDown: A(e.onKeyDown, (v) => {
|
|
441
|
+
if (v.key === "Tab" && v.shiftKey) {
|
|
442
|
+
u.onItemShiftTab();
|
|
457
443
|
return;
|
|
458
444
|
}
|
|
459
|
-
if (
|
|
460
|
-
const
|
|
461
|
-
if (
|
|
462
|
-
if (
|
|
463
|
-
|
|
464
|
-
let
|
|
465
|
-
if (
|
|
466
|
-
else if (
|
|
467
|
-
|
|
468
|
-
const b =
|
|
469
|
-
|
|
445
|
+
if (v.target !== v.currentTarget) return;
|
|
446
|
+
const y = Rt(v, u.orientation, u.dir);
|
|
447
|
+
if (y !== void 0) {
|
|
448
|
+
if (v.metaKey || v.ctrlKey || v.altKey || v.shiftKey) return;
|
|
449
|
+
v.preventDefault();
|
|
450
|
+
let h = _().filter((b) => b.focusable).map((b) => b.ref.current);
|
|
451
|
+
if (y === "last") h.reverse();
|
|
452
|
+
else if (y === "prev" || y === "next") {
|
|
453
|
+
y === "prev" && h.reverse();
|
|
454
|
+
const b = h.indexOf(v.currentTarget);
|
|
455
|
+
h = u.loop ? Tt(h, b + 1) : h.slice(b + 1);
|
|
470
456
|
}
|
|
471
|
-
setTimeout(() =>
|
|
457
|
+
setTimeout(() => Ee(h));
|
|
472
458
|
}
|
|
473
459
|
}),
|
|
474
|
-
children: typeof c == "function" ? c({ isCurrentTabStop:
|
|
460
|
+
children: typeof c == "function" ? c({ isCurrentTabStop: d, hasTabStop: C != null }) : c
|
|
475
461
|
}
|
|
476
462
|
)
|
|
477
463
|
}
|
|
478
464
|
);
|
|
479
465
|
}
|
|
480
466
|
);
|
|
481
|
-
|
|
482
|
-
var
|
|
467
|
+
Ne.displayName = Te;
|
|
468
|
+
var St = {
|
|
483
469
|
ArrowLeft: "prev",
|
|
484
470
|
ArrowUp: "prev",
|
|
485
471
|
ArrowRight: "next",
|
|
@@ -495,27 +481,27 @@ function It(e, t) {
|
|
|
495
481
|
function Rt(e, t, r) {
|
|
496
482
|
const o = It(e.key, r);
|
|
497
483
|
if (!(t === "vertical" && ["ArrowLeft", "ArrowRight"].includes(o)) && !(t === "horizontal" && ["ArrowUp", "ArrowDown"].includes(o)))
|
|
498
|
-
return
|
|
484
|
+
return St[o];
|
|
499
485
|
}
|
|
500
|
-
function
|
|
486
|
+
function Ee(e, t = !1) {
|
|
501
487
|
const r = document.activeElement;
|
|
502
488
|
for (const o of e)
|
|
503
489
|
if (o === r || (o.focus({ preventScroll: t }), document.activeElement !== r)) return;
|
|
504
490
|
}
|
|
505
|
-
function
|
|
491
|
+
function Tt(e, t) {
|
|
506
492
|
return e.map((r, o) => e[(t + o) % e.length]);
|
|
507
493
|
}
|
|
508
|
-
var
|
|
509
|
-
function
|
|
494
|
+
var Nt = Re, Et = Ne;
|
|
495
|
+
function xt(e, t) {
|
|
510
496
|
return a.useReducer((r, o) => t[r][o] ?? r, e);
|
|
511
497
|
}
|
|
512
|
-
var
|
|
513
|
-
const { present: t, children: r } = e, o = At(t), s = typeof r == "function" ? r({ present: o.isPresent }) : a.Children.only(r), n =
|
|
498
|
+
var xe = (e) => {
|
|
499
|
+
const { present: t, children: r } = e, o = At(t), s = typeof r == "function" ? r({ present: o.isPresent }) : a.Children.only(r), n = Z(o.ref, $t(s));
|
|
514
500
|
return typeof r == "function" || o.isPresent ? a.cloneElement(s, { ref: n }) : null;
|
|
515
501
|
};
|
|
516
|
-
|
|
502
|
+
xe.displayName = "Presence";
|
|
517
503
|
function At(e) {
|
|
518
|
-
const [t, r] = a.useState(), o = a.useRef(null), s = a.useRef(e), n = a.useRef("none"), c = e ? "mounted" : "unmounted", [i,
|
|
504
|
+
const [t, r] = a.useState(), o = a.useRef(null), s = a.useRef(e), n = a.useRef("none"), c = e ? "mounted" : "unmounted", [i, f] = xt(c, {
|
|
519
505
|
mounted: {
|
|
520
506
|
UNMOUNT: "unmounted",
|
|
521
507
|
ANIMATION_OUT: "unmountSuspended"
|
|
@@ -529,47 +515,46 @@ function At(e) {
|
|
|
529
515
|
}
|
|
530
516
|
});
|
|
531
517
|
return a.useEffect(() => {
|
|
532
|
-
const
|
|
533
|
-
n.current = i === "mounted" ?
|
|
534
|
-
}, [i]),
|
|
535
|
-
const
|
|
536
|
-
if (
|
|
537
|
-
const
|
|
538
|
-
e ?
|
|
518
|
+
const l = Y(o.current);
|
|
519
|
+
n.current = i === "mounted" ? l : "none";
|
|
520
|
+
}, [i]), X(() => {
|
|
521
|
+
const l = o.current, u = s.current;
|
|
522
|
+
if (u !== e) {
|
|
523
|
+
const _ = n.current, g = Y(l);
|
|
524
|
+
e ? f("MOUNT") : g === "none" || l?.display === "none" ? f("UNMOUNT") : f(u && _ !== g ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
|
|
539
525
|
}
|
|
540
|
-
}, [e,
|
|
526
|
+
}, [e, f]), X(() => {
|
|
541
527
|
if (t) {
|
|
542
|
-
let
|
|
543
|
-
const
|
|
544
|
-
const
|
|
545
|
-
if (g.target === t &&
|
|
546
|
-
const
|
|
547
|
-
t.style.animationFillMode = "forwards",
|
|
548
|
-
t.style.animationFillMode === "forwards" && (t.style.animationFillMode =
|
|
528
|
+
let l;
|
|
529
|
+
const u = t.ownerDocument.defaultView ?? window, d = (g) => {
|
|
530
|
+
const C = Y(o.current).includes(CSS.escape(g.animationName));
|
|
531
|
+
if (g.target === t && C && (f("ANIMATION_END"), !s.current)) {
|
|
532
|
+
const v = t.style.animationFillMode;
|
|
533
|
+
t.style.animationFillMode = "forwards", l = u.setTimeout(() => {
|
|
534
|
+
t.style.animationFillMode === "forwards" && (t.style.animationFillMode = v);
|
|
549
535
|
});
|
|
550
536
|
}
|
|
551
|
-
},
|
|
552
|
-
g.target === t && (n.current =
|
|
537
|
+
}, _ = (g) => {
|
|
538
|
+
g.target === t && (n.current = Y(o.current));
|
|
553
539
|
};
|
|
554
|
-
return t.addEventListener("animationstart",
|
|
555
|
-
|
|
540
|
+
return t.addEventListener("animationstart", _), t.addEventListener("animationcancel", d), t.addEventListener("animationend", d), () => {
|
|
541
|
+
u.clearTimeout(l), t.removeEventListener("animationstart", _), t.removeEventListener("animationcancel", d), t.removeEventListener("animationend", d);
|
|
556
542
|
};
|
|
557
543
|
} else
|
|
558
|
-
|
|
559
|
-
}, [t,
|
|
544
|
+
f("ANIMATION_END");
|
|
545
|
+
}, [t, f]), {
|
|
560
546
|
isPresent: ["mounted", "unmountSuspended"].includes(i),
|
|
561
|
-
ref: a.useCallback((
|
|
562
|
-
o.current =
|
|
547
|
+
ref: a.useCallback((l) => {
|
|
548
|
+
o.current = l ? getComputedStyle(l) : null, r(l);
|
|
563
549
|
}, [])
|
|
564
550
|
};
|
|
565
551
|
}
|
|
566
|
-
function
|
|
567
|
-
return
|
|
552
|
+
function Y(e) {
|
|
553
|
+
return e?.animationName || "none";
|
|
568
554
|
}
|
|
569
555
|
function $t(e) {
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
return r ? e.ref : (t = (s = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : s.get, r = t && "isReactWarning" in t && t.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
|
|
556
|
+
let t = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, r = t && "isReactWarning" in t && t.isReactWarning;
|
|
557
|
+
return r ? e.ref : (t = Object.getOwnPropertyDescriptor(e, "ref")?.get, r = t && "isReactWarning" in t && t.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
|
|
573
558
|
}
|
|
574
559
|
var J = "Tabs", [Mt] = ie(J, [
|
|
575
560
|
Ie
|
|
@@ -582,9 +567,9 @@ var J = "Tabs", [Mt] = ie(J, [
|
|
|
582
567
|
defaultValue: n,
|
|
583
568
|
orientation: c = "horizontal",
|
|
584
569
|
dir: i,
|
|
585
|
-
activationMode:
|
|
586
|
-
...
|
|
587
|
-
} = e,
|
|
570
|
+
activationMode: f = "automatic",
|
|
571
|
+
...l
|
|
572
|
+
} = e, u = ye(i), [d, _] = Ce({
|
|
588
573
|
prop: o,
|
|
589
574
|
onChange: s,
|
|
590
575
|
defaultProp: n ?? "",
|
|
@@ -595,17 +580,17 @@ var J = "Tabs", [Mt] = ie(J, [
|
|
|
595
580
|
{
|
|
596
581
|
scope: r,
|
|
597
582
|
baseId: we(),
|
|
598
|
-
value:
|
|
599
|
-
onValueChange:
|
|
583
|
+
value: d,
|
|
584
|
+
onValueChange: _,
|
|
600
585
|
orientation: c,
|
|
601
|
-
dir:
|
|
602
|
-
activationMode:
|
|
586
|
+
dir: u,
|
|
587
|
+
activationMode: f,
|
|
603
588
|
children: /* @__PURE__ */ m(
|
|
604
|
-
|
|
589
|
+
L.div,
|
|
605
590
|
{
|
|
606
|
-
dir:
|
|
591
|
+
dir: u,
|
|
607
592
|
"data-orientation": c,
|
|
608
|
-
...
|
|
593
|
+
...l,
|
|
609
594
|
ref: t
|
|
610
595
|
}
|
|
611
596
|
)
|
|
@@ -618,7 +603,7 @@ var Me = "TabsList", Pe = a.forwardRef(
|
|
|
618
603
|
(e, t) => {
|
|
619
604
|
const { __scopeTabs: r, loop: o = !0, ...s } = e, n = ae(Me, r), c = Ae(r);
|
|
620
605
|
return /* @__PURE__ */ m(
|
|
621
|
-
|
|
606
|
+
Nt,
|
|
622
607
|
{
|
|
623
608
|
asChild: !0,
|
|
624
609
|
...c,
|
|
@@ -626,7 +611,7 @@ var Me = "TabsList", Pe = a.forwardRef(
|
|
|
626
611
|
dir: n.dir,
|
|
627
612
|
loop: o,
|
|
628
613
|
children: /* @__PURE__ */ m(
|
|
629
|
-
|
|
614
|
+
L.div,
|
|
630
615
|
{
|
|
631
616
|
role: "tablist",
|
|
632
617
|
"aria-orientation": n.orientation,
|
|
@@ -641,36 +626,36 @@ var Me = "TabsList", Pe = a.forwardRef(
|
|
|
641
626
|
Pe.displayName = Me;
|
|
642
627
|
var Oe = "TabsTrigger", Fe = a.forwardRef(
|
|
643
628
|
(e, t) => {
|
|
644
|
-
const { __scopeTabs: r, value: o, disabled: s = !1, ...n } = e, c = ae(Oe, r), i = Ae(r),
|
|
629
|
+
const { __scopeTabs: r, value: o, disabled: s = !1, ...n } = e, c = ae(Oe, r), i = Ae(r), f = je(c.baseId, o), l = Ve(c.baseId, o), u = o === c.value;
|
|
645
630
|
return /* @__PURE__ */ m(
|
|
646
|
-
|
|
631
|
+
Et,
|
|
647
632
|
{
|
|
648
633
|
asChild: !0,
|
|
649
634
|
...i,
|
|
650
635
|
focusable: !s,
|
|
651
|
-
active:
|
|
636
|
+
active: u,
|
|
652
637
|
children: /* @__PURE__ */ m(
|
|
653
|
-
|
|
638
|
+
L.button,
|
|
654
639
|
{
|
|
655
640
|
type: "button",
|
|
656
641
|
role: "tab",
|
|
657
|
-
"aria-selected":
|
|
658
|
-
"aria-controls":
|
|
659
|
-
"data-state":
|
|
642
|
+
"aria-selected": u,
|
|
643
|
+
"aria-controls": l,
|
|
644
|
+
"data-state": u ? "active" : "inactive",
|
|
660
645
|
"data-disabled": s ? "" : void 0,
|
|
661
646
|
disabled: s,
|
|
662
|
-
id:
|
|
647
|
+
id: f,
|
|
663
648
|
...n,
|
|
664
649
|
ref: t,
|
|
665
|
-
onMouseDown: A(e.onMouseDown, (
|
|
666
|
-
!s &&
|
|
650
|
+
onMouseDown: A(e.onMouseDown, (d) => {
|
|
651
|
+
!s && d.button === 0 && d.ctrlKey === !1 ? c.onValueChange(o) : d.preventDefault();
|
|
667
652
|
}),
|
|
668
|
-
onKeyDown: A(e.onKeyDown, (
|
|
669
|
-
[" ", "Enter"].includes(
|
|
653
|
+
onKeyDown: A(e.onKeyDown, (d) => {
|
|
654
|
+
[" ", "Enter"].includes(d.key) && c.onValueChange(o);
|
|
670
655
|
}),
|
|
671
656
|
onFocus: A(e.onFocus, () => {
|
|
672
|
-
const
|
|
673
|
-
!
|
|
657
|
+
const d = c.activationMode !== "manual";
|
|
658
|
+
!u && !s && d && c.onValueChange(o);
|
|
674
659
|
})
|
|
675
660
|
}
|
|
676
661
|
)
|
|
@@ -679,50 +664,45 @@ var Oe = "TabsTrigger", Fe = a.forwardRef(
|
|
|
679
664
|
}
|
|
680
665
|
);
|
|
681
666
|
Fe.displayName = Oe;
|
|
682
|
-
var De = "TabsContent",
|
|
667
|
+
var De = "TabsContent", Le = a.forwardRef(
|
|
683
668
|
(e, t) => {
|
|
684
|
-
const { __scopeTabs: r, value: o, forceMount: s, children: n, ...c } = e, i = ae(De, r),
|
|
669
|
+
const { __scopeTabs: r, value: o, forceMount: s, children: n, ...c } = e, i = ae(De, r), f = je(i.baseId, o), l = Ve(i.baseId, o), u = o === i.value, d = a.useRef(u);
|
|
685
670
|
return a.useEffect(() => {
|
|
686
|
-
const
|
|
687
|
-
return () => cancelAnimationFrame(
|
|
688
|
-
}, []), /* @__PURE__ */ m(
|
|
689
|
-
|
|
671
|
+
const _ = requestAnimationFrame(() => d.current = !1);
|
|
672
|
+
return () => cancelAnimationFrame(_);
|
|
673
|
+
}, []), /* @__PURE__ */ m(xe, { present: s || u, children: ({ present: _ }) => /* @__PURE__ */ m(
|
|
674
|
+
L.div,
|
|
690
675
|
{
|
|
691
|
-
"data-state":
|
|
676
|
+
"data-state": u ? "active" : "inactive",
|
|
692
677
|
"data-orientation": i.orientation,
|
|
693
678
|
role: "tabpanel",
|
|
694
|
-
"aria-labelledby":
|
|
695
|
-
hidden: !
|
|
696
|
-
id:
|
|
679
|
+
"aria-labelledby": f,
|
|
680
|
+
hidden: !_,
|
|
681
|
+
id: l,
|
|
697
682
|
tabIndex: 0,
|
|
698
683
|
...c,
|
|
699
684
|
ref: t,
|
|
700
685
|
style: {
|
|
701
686
|
...e.style,
|
|
702
|
-
animationDuration:
|
|
687
|
+
animationDuration: d.current ? "0s" : void 0
|
|
703
688
|
},
|
|
704
|
-
children:
|
|
689
|
+
children: _ && n
|
|
705
690
|
}
|
|
706
691
|
) });
|
|
707
692
|
}
|
|
708
693
|
);
|
|
709
|
-
|
|
710
|
-
function
|
|
694
|
+
Le.displayName = De;
|
|
695
|
+
function je(e, t) {
|
|
711
696
|
return `${e}-trigger-${t}`;
|
|
712
697
|
}
|
|
713
698
|
function Ve(e, t) {
|
|
714
699
|
return `${e}-content-${t}`;
|
|
715
700
|
}
|
|
716
|
-
var Ot = $e, Ft = Pe, Dt = Fe,
|
|
717
|
-
function
|
|
701
|
+
var Ot = $e, Ft = Pe, Dt = Fe, Lt = Le;
|
|
702
|
+
function jt(e) {
|
|
718
703
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
719
704
|
}
|
|
720
705
|
var re = { exports: {} };
|
|
721
|
-
/*!
|
|
722
|
-
Copyright (c) 2018 Jed Watson.
|
|
723
|
-
Licensed under the MIT License (MIT), see
|
|
724
|
-
http://jedwatson.github.io/classnames
|
|
725
|
-
*/
|
|
726
706
|
var ve;
|
|
727
707
|
function Vt() {
|
|
728
708
|
return ve || (ve = 1, (function(e) {
|
|
@@ -757,15 +737,15 @@ function Vt() {
|
|
|
757
737
|
})(re)), re.exports;
|
|
758
738
|
}
|
|
759
739
|
var Bt = Vt();
|
|
760
|
-
const ue = /* @__PURE__ */
|
|
740
|
+
const ue = /* @__PURE__ */ jt(Bt), Ut = {
|
|
761
741
|
"purpur-tab-content": "_purpur-tab-content_1ugbi_1",
|
|
762
742
|
"purpur-tab-content--force-mount": "_purpur-tab-content--force-mount_1ugbi_15"
|
|
763
|
-
},
|
|
743
|
+
}, kt = ue.bind(Ut), _e = "purpur-tab-content", Gt = be(
|
|
764
744
|
({ children: e, tabId: t, "data-testid": r, className: o, disableForceMount: s, ...n }, c) => /* @__PURE__ */ m(
|
|
765
|
-
|
|
745
|
+
Lt,
|
|
766
746
|
{
|
|
767
747
|
ref: c,
|
|
768
|
-
className:
|
|
748
|
+
className: kt(_e, o, {
|
|
769
749
|
[`${_e}--force-mount`]: !s
|
|
770
750
|
}),
|
|
771
751
|
"data-testid": r,
|
|
@@ -775,7 +755,7 @@ const ue = /* @__PURE__ */ Lt(Bt), Ut = {
|
|
|
775
755
|
children: e
|
|
776
756
|
}
|
|
777
757
|
)
|
|
778
|
-
), Wt = (e) => !!e &&
|
|
758
|
+
), Wt = (e) => !!e && Ge(e) && !!e.props.name && !!e.props.tabId, Kt = {
|
|
779
759
|
"purpur-tab-header": "_purpur-tab-header_1tc2s_1",
|
|
780
760
|
"purpur-tab-header--contained": "_purpur-tab-header--contained_1tc2s_36",
|
|
781
761
|
"purpur-tab-header--contained-negative": "_purpur-tab-header--contained-negative_1tc2s_36",
|
|
@@ -792,7 +772,7 @@ const ue = /* @__PURE__ */ Lt(Bt), Ut = {
|
|
|
792
772
|
fullWidth: n,
|
|
793
773
|
"data-testid": c,
|
|
794
774
|
children: i
|
|
795
|
-
},
|
|
775
|
+
}, f) => /* @__PURE__ */ m(
|
|
796
776
|
Dt,
|
|
797
777
|
{
|
|
798
778
|
id: `${t}-trigger`,
|
|
@@ -802,12 +782,12 @@ const ue = /* @__PURE__ */ Lt(Bt), Ut = {
|
|
|
802
782
|
value: t,
|
|
803
783
|
"data-testid": c,
|
|
804
784
|
"data-index": e,
|
|
805
|
-
ref:
|
|
785
|
+
ref: f,
|
|
806
786
|
onFocus: s,
|
|
807
787
|
children: i
|
|
808
788
|
}
|
|
809
789
|
)
|
|
810
|
-
),
|
|
790
|
+
), Ht = {
|
|
811
791
|
"purpur-tabs__wrapper": "_purpur-tabs__wrapper_jv2vl_1",
|
|
812
792
|
"purpur-tabs__scroll-button": "_purpur-tabs__scroll-button_jv2vl_9",
|
|
813
793
|
"purpur-tabs__scroll-button--left": "_purpur-tabs__scroll-button--left_jv2vl_71",
|
|
@@ -823,14 +803,13 @@ const ue = /* @__PURE__ */ Lt(Bt), Ut = {
|
|
|
823
803
|
"purpur-tabs--contained-negative": "_purpur-tabs--contained-negative_jv2vl_123",
|
|
824
804
|
"purpur-tabs__content-container": "_purpur-tabs__content-container_jv2vl_126",
|
|
825
805
|
"purpur-tabs--full-width": "_purpur-tabs--full-width_jv2vl_136"
|
|
826
|
-
}, tn = ["line", "contained"],
|
|
827
|
-
|
|
828
|
-
if (typeof (e == null ? void 0 : e.getBoundingClientRect) != "function" || typeof (t == null ? void 0 : t.scroll) != "function")
|
|
806
|
+
}, tn = ["line", "contained"], Yt = (e) => new CustomEvent("tabChangeDetail", { detail: { value: e } }), M = ue.bind(Ht), N = "purpur-tabs", Zt = (e, t) => {
|
|
807
|
+
if (typeof e?.getBoundingClientRect != "function" || typeof t?.scroll != "function")
|
|
829
808
|
return;
|
|
830
|
-
const r = e.getBoundingClientRect(), o = t.getBoundingClientRect(), s = t.clientWidth, n = parseInt(
|
|
809
|
+
const r = e.getBoundingClientRect(), o = t.getBoundingClientRect(), s = t.clientWidth, n = parseInt(getComputedStyle(t).borderLeftWidth?.split("px")[0], 10), c = o.left + (isNaN(n) ? 0 : n);
|
|
831
810
|
let i;
|
|
832
811
|
r.right > o.right && (i = r.left + t.scrollLeft, i = i + r.width - s + s * 0.1, i = i - c), r.left < o.left && (i = r.left + t.scrollLeft, i = i - s * 0.1, i = i - c), i !== void 0 && t.scroll({ left: i, behavior: "smooth" });
|
|
833
|
-
},
|
|
812
|
+
}, Xt = ({
|
|
834
813
|
children: e,
|
|
835
814
|
variant: t = "line",
|
|
836
815
|
negative: r = !1,
|
|
@@ -839,112 +818,112 @@ const ue = /* @__PURE__ */ Lt(Bt), Ut = {
|
|
|
839
818
|
className: n,
|
|
840
819
|
defaultValue: c,
|
|
841
820
|
animateHeight: i = !1,
|
|
842
|
-
"data-testid":
|
|
843
|
-
value:
|
|
844
|
-
...
|
|
821
|
+
"data-testid": f,
|
|
822
|
+
value: l,
|
|
823
|
+
...u
|
|
845
824
|
}) => {
|
|
846
|
-
const
|
|
847
|
-
|
|
848
|
-
`${
|
|
849
|
-
{ [`${
|
|
825
|
+
const d = te(null), [_, g] = B(-1), [I, C] = B({}), [v, y] = B(0), [R, h] = B(0), b = z.toArray(e).filter(Wt), T = te(null), E = te(new Array(b.length)), P = 200, S = t === "line", Q = M(
|
|
826
|
+
N,
|
|
827
|
+
`${N}--${t}${r ? "-negative" : ""}`,
|
|
828
|
+
{ [`${N}--full-width`]: o },
|
|
850
829
|
n
|
|
851
|
-
), F = z.map(b, ({ props: { tabId: p } }) => p),
|
|
852
|
-
const p = F.findIndex((
|
|
830
|
+
), F = z.map(b, ({ props: { tabId: p } }) => p), j = () => {
|
|
831
|
+
const p = F.findIndex((w) => w === c);
|
|
853
832
|
return p >= 0 ? p : 0;
|
|
854
833
|
};
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
}, [b,
|
|
858
|
-
const [V,
|
|
834
|
+
H(() => {
|
|
835
|
+
l && k(b.findIndex((p) => p.props.tabId === l));
|
|
836
|
+
}, [b, l]);
|
|
837
|
+
const [V, k] = B(j);
|
|
859
838
|
if (new Set(F).size !== F.length)
|
|
860
839
|
throw new Error("tabId must be unique");
|
|
861
|
-
const
|
|
862
|
-
if (!
|
|
840
|
+
const G = (p, w) => w || f ? `${w || f}-${p}` : void 0, W = () => {
|
|
841
|
+
if (!S)
|
|
863
842
|
return;
|
|
864
|
-
const p =
|
|
865
|
-
|
|
866
|
-
},
|
|
867
|
-
|
|
843
|
+
const p = E.current[V];
|
|
844
|
+
y(p?.offsetLeft || 0), h(p?.getBoundingClientRect().width || 0);
|
|
845
|
+
}, x = (p) => {
|
|
846
|
+
S && !l && k(b.findIndex((w) => w.props.tabId === p)), s?.(Yt(p));
|
|
868
847
|
}, Be = (p) => {
|
|
869
|
-
if (
|
|
870
|
-
const { scrollLeft:
|
|
871
|
-
|
|
848
|
+
if (T?.current) {
|
|
849
|
+
const { scrollLeft: w } = T.current, $ = p === "left" ? -P : P;
|
|
850
|
+
T.current.scroll({ left: w + $, behavior: "smooth" });
|
|
872
851
|
}
|
|
873
852
|
}, le = ({ side: p }) => /* @__PURE__ */ m(
|
|
874
853
|
"button",
|
|
875
854
|
{
|
|
876
|
-
className: M(`${
|
|
855
|
+
className: M(`${N}__scroll-button`, `${N}__scroll-button--${p}`),
|
|
877
856
|
onClick: () => Be(p),
|
|
878
857
|
type: "button",
|
|
879
858
|
"aria-hidden": "true",
|
|
880
859
|
tabIndex: -1,
|
|
881
|
-
"data-testid":
|
|
860
|
+
"data-testid": G("scroll-button"),
|
|
882
861
|
children: /* @__PURE__ */ m(ge, { svg: p === "left" ? et : tt, size: "md" })
|
|
883
862
|
}
|
|
884
863
|
);
|
|
885
|
-
return
|
|
864
|
+
return H(() => {
|
|
886
865
|
const p = () => {
|
|
887
|
-
if (
|
|
888
|
-
const $ =
|
|
866
|
+
if (d.current && i) {
|
|
867
|
+
const $ = d.current.offsetHeight;
|
|
889
868
|
g($);
|
|
890
869
|
}
|
|
891
|
-
},
|
|
870
|
+
}, w = () => {
|
|
892
871
|
p(), W();
|
|
893
872
|
};
|
|
894
|
-
return p(), window.addEventListener("resize",
|
|
895
|
-
window.removeEventListener("resize",
|
|
873
|
+
return p(), window.addEventListener("resize", w), () => {
|
|
874
|
+
window.removeEventListener("resize", w);
|
|
896
875
|
};
|
|
897
|
-
}, [V, i]),
|
|
876
|
+
}, [V, i]), H(() => {
|
|
898
877
|
W();
|
|
899
|
-
}, [V, o, b.length, t]),
|
|
900
|
-
const p =
|
|
878
|
+
}, [V, o, b.length, t]), H(() => {
|
|
879
|
+
const p = T.current;
|
|
901
880
|
if (!p) return;
|
|
902
|
-
const
|
|
903
|
-
const { scrollLeft: $, scrollWidth: K, clientWidth: q } = p, D = K > q, Ue = $ <= 1,
|
|
881
|
+
const w = () => {
|
|
882
|
+
const { scrollLeft: $, scrollWidth: K, clientWidth: q } = p, D = K > q, Ue = $ <= 1, ke = $ + q >= K - 1;
|
|
904
883
|
if (!D) {
|
|
905
|
-
|
|
884
|
+
C({});
|
|
906
885
|
return;
|
|
907
886
|
}
|
|
908
|
-
|
|
909
|
-
[`${
|
|
910
|
-
[`${
|
|
887
|
+
C({
|
|
888
|
+
[`${N}__wrapper--scroll-start`]: !Ue,
|
|
889
|
+
[`${N}__wrapper--scroll-end`]: !ke
|
|
911
890
|
});
|
|
912
891
|
};
|
|
913
|
-
return
|
|
914
|
-
p.removeEventListener("scroll",
|
|
892
|
+
return w(), p.addEventListener("scroll", w, { passive: !0 }), window.addEventListener("resize", w), () => {
|
|
893
|
+
p.removeEventListener("scroll", w), window.removeEventListener("resize", w);
|
|
915
894
|
};
|
|
916
895
|
}, []), /* @__PURE__ */ m(
|
|
917
896
|
Ot,
|
|
918
897
|
{
|
|
919
898
|
defaultValue: c ?? b[0].props.tabId,
|
|
920
|
-
onValueChange:
|
|
921
|
-
"data-testid":
|
|
899
|
+
onValueChange: x,
|
|
900
|
+
"data-testid": f,
|
|
922
901
|
className: Q,
|
|
923
|
-
value:
|
|
924
|
-
...
|
|
925
|
-
children: /* @__PURE__ */ ee("div", { className: M(`${
|
|
926
|
-
/* @__PURE__ */ ee("div", { className: M(`${
|
|
902
|
+
value: l,
|
|
903
|
+
...u,
|
|
904
|
+
children: /* @__PURE__ */ ee("div", { className: M(`${N}__container`), children: [
|
|
905
|
+
/* @__PURE__ */ ee("div", { className: M(`${N}__wrapper`, I), children: [
|
|
927
906
|
/* @__PURE__ */ ee(
|
|
928
907
|
Ft,
|
|
929
908
|
{
|
|
930
909
|
ref: (p) => {
|
|
931
|
-
|
|
910
|
+
T.current = p;
|
|
932
911
|
},
|
|
933
|
-
className: M(`${
|
|
912
|
+
className: M(`${N}__list`),
|
|
934
913
|
children: [
|
|
935
|
-
z.map(b, (p,
|
|
914
|
+
z.map(b, (p, w) => {
|
|
936
915
|
const { name: $, tabId: K, "data-testid": q } = p.props;
|
|
937
916
|
return /* @__PURE__ */ m(
|
|
938
917
|
zt,
|
|
939
918
|
{
|
|
940
|
-
"data-testid":
|
|
941
|
-
index:
|
|
919
|
+
"data-testid": G("header", q),
|
|
920
|
+
index: w,
|
|
942
921
|
tabId: K,
|
|
943
922
|
ref: (D) => {
|
|
944
|
-
D && (
|
|
923
|
+
D && (E.current[w] = D);
|
|
945
924
|
},
|
|
946
925
|
onFocus: (D) => {
|
|
947
|
-
|
|
926
|
+
Zt(D.target, T.current);
|
|
948
927
|
},
|
|
949
928
|
variant: t,
|
|
950
929
|
negative: r,
|
|
@@ -953,15 +932,15 @@ const ue = /* @__PURE__ */ Lt(Bt), Ut = {
|
|
|
953
932
|
}
|
|
954
933
|
);
|
|
955
934
|
}),
|
|
956
|
-
|
|
935
|
+
S && /* @__PURE__ */ m(
|
|
957
936
|
"div",
|
|
958
937
|
{
|
|
959
|
-
className: M(`${
|
|
938
|
+
className: M(`${N}__selected-border`),
|
|
960
939
|
style: {
|
|
961
|
-
width:
|
|
962
|
-
transform: `translateX(${
|
|
940
|
+
width: R,
|
|
941
|
+
transform: `translateX(${v}px)`
|
|
963
942
|
},
|
|
964
|
-
"data-testid":
|
|
943
|
+
"data-testid": G("selected-border")
|
|
965
944
|
}
|
|
966
945
|
)
|
|
967
946
|
]
|
|
@@ -973,19 +952,19 @@ const ue = /* @__PURE__ */ Lt(Bt), Ut = {
|
|
|
973
952
|
/* @__PURE__ */ m(
|
|
974
953
|
"div",
|
|
975
954
|
{
|
|
976
|
-
className: i ? M(`${
|
|
977
|
-
style: { height: i &&
|
|
978
|
-
children: /* @__PURE__ */ m("div", { ref:
|
|
955
|
+
className: i ? M(`${N}__content-wrapper`) : "",
|
|
956
|
+
style: { height: i && _ > -1 ? `${_}px` : "auto" },
|
|
957
|
+
children: /* @__PURE__ */ m("div", { ref: d, className: M(`${N}__content-container`), children: z.map(b, (p) => p) })
|
|
979
958
|
}
|
|
980
959
|
)
|
|
981
960
|
] })
|
|
982
961
|
}
|
|
983
962
|
);
|
|
984
963
|
};
|
|
985
|
-
|
|
964
|
+
Xt.Content = Gt;
|
|
986
965
|
export {
|
|
987
|
-
|
|
988
|
-
|
|
966
|
+
Xt as Tabs,
|
|
967
|
+
Yt as createTabChangeDetailEvent,
|
|
989
968
|
tn as tabsVariants
|
|
990
969
|
};
|
|
991
970
|
//# sourceMappingURL=tabs.es.js.map
|