@pismo/marola 0.0.1-alpha.7 → 0.0.1-alpha.8
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/Tab-CRwnhsj5.js +254 -0
- package/dist/Tabs.module-yYcTJnj6.js +103 -0
- package/dist/assets/Input.css +1 -1
- package/dist/assets/InputSearch.css +1 -0
- package/dist/assets/PageHeader.css +1 -1
- package/dist/assets/Snackbar.css +1 -1
- package/dist/assets/Toggle.css +1 -1
- package/dist/assets/global.css +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.js +104 -104
- package/dist/components/Input/Input.stories.d.ts +1 -1
- package/dist/components/InputSearch/InputSearch.d.ts +11 -0
- package/dist/components/InputSearch/InputSearch.js +29 -0
- package/dist/components/InputSearch/InputSearch.stories.d.ts +22 -0
- package/dist/components/InputSearch/InputSearch.stories.js +36 -0
- package/dist/components/PageHeader/PageHeader.js +25 -25
- package/dist/components/PageHeader/PageHeader.stories.js +3 -3
- package/dist/components/Snackbar/Snackbar.d.ts +1 -1
- package/dist/components/Snackbar/Snackbar.js +30 -30
- package/dist/components/Table/Table.d.ts +1 -1
- package/dist/components/Table/Table.js +14 -14
- package/dist/components/Tabs/Tab.js +6 -239
- package/dist/components/Tabs/TabPanel.js +18 -19
- package/dist/components/Tabs/Tabs.d.ts +2 -0
- package/dist/components/Tabs/Tabs.js +12 -8
- package/dist/components/Toggle/Toggle.d.ts +3 -5
- package/dist/components/Toggle/Toggle.js +105 -110
- package/dist/components/Toggle/Toggle.stories.d.ts +22 -0
- package/dist/components/Toggle/Toggle.stories.js +27 -0
- package/dist/main.d.ts +1 -0
- package/dist/main.js +42 -35
- package/package.json +1 -1
- package/dist/ListContext-Dj2Va7Iv.js +0 -18
- package/dist/Tabs.module-BA-PC7fA.js +0 -66
- package/dist/useCompoundItem-CTYi5M_E.js +0 -41
|
@@ -44,7 +44,7 @@ function te(u = {}) {
|
|
|
44
44
|
r == null || r(l, "clickaway");
|
|
45
45
|
}, p = o.clear, E = N.useCallback(() => {
|
|
46
46
|
s != null && c(e ?? s * 0.5);
|
|
47
|
-
}, [s, e, c]),
|
|
47
|
+
}, [s, e, c]), x = (l) => (d) => {
|
|
48
48
|
const f = l.onBlur;
|
|
49
49
|
f == null || f(d), E();
|
|
50
50
|
}, g = (l) => (d) => {
|
|
@@ -70,7 +70,7 @@ function te(u = {}) {
|
|
|
70
70
|
// See https://github.com/mui/material-ui/issues/29080
|
|
71
71
|
role: "presentation"
|
|
72
72
|
}, l, d, {
|
|
73
|
-
onBlur:
|
|
73
|
+
onBlur: x(d),
|
|
74
74
|
onFocus: g(d),
|
|
75
75
|
onMouseEnter: R(d),
|
|
76
76
|
onMouseLeave: P(d)
|
|
@@ -92,7 +92,7 @@ const ne = ["autoHideDuration", "children", "disableWindowBlurListener", "exited
|
|
|
92
92
|
resumeHideDuration: m,
|
|
93
93
|
slotProps: p = {},
|
|
94
94
|
slots: E = {}
|
|
95
|
-
} = s,
|
|
95
|
+
} = s, x = j(s, ne), g = oe(), {
|
|
96
96
|
getRootProps: R,
|
|
97
97
|
onClickAway: P
|
|
98
98
|
} = te(w({}, s, {
|
|
@@ -104,7 +104,7 @@ const ne = ["autoHideDuration", "children", "disableWindowBlurListener", "exited
|
|
|
104
104
|
})), L = s, l = E.root || "div", d = U({
|
|
105
105
|
elementType: l,
|
|
106
106
|
getSlotProps: R,
|
|
107
|
-
externalForwardedProps:
|
|
107
|
+
externalForwardedProps: x,
|
|
108
108
|
externalSlotProps: p.root,
|
|
109
109
|
additionalProps: {
|
|
110
110
|
ref: a
|
|
@@ -228,7 +228,7 @@ process.env.NODE_ENV !== "production" && t.oneOfType([t.string, t.shape({
|
|
|
228
228
|
const G = C.createContext(null);
|
|
229
229
|
var ie = function(s) {
|
|
230
230
|
return s.scrollTop;
|
|
231
|
-
}, S = "unmounted", v = "exited", k = "entering", y = "entered", A = "exiting",
|
|
231
|
+
}, S = "unmounted", v = "exited", k = "entering", y = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
|
|
232
232
|
re(s, u);
|
|
233
233
|
function s(r, n) {
|
|
234
234
|
var e;
|
|
@@ -278,7 +278,7 @@ var ie = function(s) {
|
|
|
278
278
|
status: S
|
|
279
279
|
});
|
|
280
280
|
}, a.performEnter = function(n) {
|
|
281
|
-
var e = this, o = this.props.enter, i = this.context ? this.context.isMounting : n, c = this.props.nodeRef ? [i] : [D.findDOMNode(this), i], m = c[0], p = c[1], E = this.getTimeouts(),
|
|
281
|
+
var e = this, o = this.props.enter, i = this.context ? this.context.isMounting : n, c = this.props.nodeRef ? [i] : [D.findDOMNode(this), i], m = c[0], p = c[1], E = this.getTimeouts(), x = i ? E.appear : E.enter;
|
|
282
282
|
if (!n && !o || F.disabled) {
|
|
283
283
|
this.safeSetState({
|
|
284
284
|
status: y
|
|
@@ -290,7 +290,7 @@ var ie = function(s) {
|
|
|
290
290
|
this.props.onEnter(m, p), this.safeSetState({
|
|
291
291
|
status: k
|
|
292
292
|
}, function() {
|
|
293
|
-
e.props.onEntering(m, p), e.onTransitionEnd(
|
|
293
|
+
e.props.onEntering(m, p), e.onTransitionEnd(x, function() {
|
|
294
294
|
e.safeSetState({
|
|
295
295
|
status: y
|
|
296
296
|
}, function() {
|
|
@@ -357,8 +357,8 @@ var ie = function(s) {
|
|
|
357
357
|
);
|
|
358
358
|
}, s;
|
|
359
359
|
}(C.Component);
|
|
360
|
-
|
|
361
|
-
|
|
360
|
+
b.contextType = G;
|
|
361
|
+
b.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
362
362
|
/**
|
|
363
363
|
* A React reference to DOM element that need to transition:
|
|
364
364
|
* https://stackoverflow.com/a/51127130/4671932
|
|
@@ -529,7 +529,7 @@ x.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
529
529
|
} : {};
|
|
530
530
|
function _() {
|
|
531
531
|
}
|
|
532
|
-
|
|
532
|
+
b.defaultProps = {
|
|
533
533
|
in: !1,
|
|
534
534
|
mountOnEnter: !1,
|
|
535
535
|
unmountOnExit: !1,
|
|
@@ -543,26 +543,26 @@ x.defaultProps = {
|
|
|
543
543
|
onExiting: _,
|
|
544
544
|
onExited: _
|
|
545
545
|
};
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
const ae = "
|
|
546
|
+
b.UNMOUNTED = S;
|
|
547
|
+
b.EXITED = v;
|
|
548
|
+
b.ENTERING = k;
|
|
549
|
+
b.ENTERED = y;
|
|
550
|
+
b.EXITING = A;
|
|
551
|
+
const ae = "_snackbar_kt3bd_1", ue = "_bottomToTop_kt3bd_1", T = {
|
|
552
552
|
snackbar: ae,
|
|
553
|
-
"snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-
|
|
554
|
-
"snackbar--content": "_snackbar--
|
|
555
|
-
"snackbar--success": "_snackbar--
|
|
556
|
-
"snackbar--error": "_snackbar--
|
|
557
|
-
"snackbar--attention": "_snackbar--
|
|
558
|
-
"snackbar--message": "_snackbar--
|
|
559
|
-
"snackbar--action": "_snackbar--
|
|
553
|
+
"snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-wrapper_kt3bd_14",
|
|
554
|
+
"snackbar--content": "_snackbar--content_kt3bd_19",
|
|
555
|
+
"snackbar--success": "_snackbar--success_kt3bd_29",
|
|
556
|
+
"snackbar--error": "_snackbar--error_kt3bd_32",
|
|
557
|
+
"snackbar--attention": "_snackbar--attention_kt3bd_35",
|
|
558
|
+
"snackbar--message": "_snackbar--message_kt3bd_38",
|
|
559
|
+
"snackbar--action": "_snackbar--action_kt3bd_46",
|
|
560
560
|
bottomToTop: ue
|
|
561
|
-
},
|
|
561
|
+
}, xe = ({
|
|
562
562
|
snackbarMessage: u,
|
|
563
563
|
color: s,
|
|
564
|
-
autoHideDuration: a,
|
|
565
|
-
open: r,
|
|
564
|
+
autoHideDuration: a = 5e3,
|
|
565
|
+
open: r = !0,
|
|
566
566
|
onClose: n,
|
|
567
567
|
classNameWrapper: e,
|
|
568
568
|
"data-testid": o
|
|
@@ -575,7 +575,7 @@ const ae = "_snackbar_1xdf2_1", ue = "_bottomToTop_1xdf2_1", T = {
|
|
|
575
575
|
unmounted: "translateY(80px)"
|
|
576
576
|
}, E = () => {
|
|
577
577
|
c(!1);
|
|
578
|
-
},
|
|
578
|
+
}, x = () => {
|
|
579
579
|
c(!0);
|
|
580
580
|
};
|
|
581
581
|
return /* @__PURE__ */ h("div", { className: O(T.snackbar, e), children: /* @__PURE__ */ h(
|
|
@@ -587,14 +587,14 @@ const ae = "_snackbar_1xdf2_1", ue = "_bottomToTop_1xdf2_1", T = {
|
|
|
587
587
|
exited: i,
|
|
588
588
|
className: O(T["snackbar__snackbar-el-wrapper"]),
|
|
589
589
|
children: /* @__PURE__ */ h(
|
|
590
|
-
|
|
590
|
+
b,
|
|
591
591
|
{
|
|
592
592
|
timeout: { enter: 400, exit: 400 },
|
|
593
593
|
in: r,
|
|
594
594
|
appear: !0,
|
|
595
595
|
unmountOnExit: !0,
|
|
596
596
|
onEnter: E,
|
|
597
|
-
onExited:
|
|
597
|
+
onExited: x,
|
|
598
598
|
nodeRef: m,
|
|
599
599
|
children: (g) => /* @__PURE__ */ Y(
|
|
600
600
|
"div",
|
|
@@ -618,5 +618,5 @@ const ae = "_snackbar_1xdf2_1", ue = "_bottomToTop_1xdf2_1", T = {
|
|
|
618
618
|
) });
|
|
619
619
|
};
|
|
620
620
|
export {
|
|
621
|
-
|
|
621
|
+
xe as Snackbar
|
|
622
622
|
};
|
|
@@ -4,7 +4,7 @@ import * as c from "react";
|
|
|
4
4
|
import { useState as u } from "react";
|
|
5
5
|
import { c as h } from "../../clsx-DB4S2d7J.js";
|
|
6
6
|
import { paginationDefaultTranslations as b, Pagination as g } from "../Pagination/Pagination.js";
|
|
7
|
-
import { sortTooltipDefaultTranslations as
|
|
7
|
+
import { sortTooltipDefaultTranslations as x, SortTooltip as q } from "../SortTooltip/SortTooltip.js";
|
|
8
8
|
import { TableProvider as N, useTable as C } from "./TableContext.js";
|
|
9
9
|
const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ c.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ c.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ c.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ c.createElement("defs", null, /* @__PURE__ */ c.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ c.createElement("rect", { width: 7, height: 10, fill: "white" })))), E = "_table_xe8qp_1", v = "_th__wrapper_xe8qp_40", y = "_tr_xe8qp_58", P = "_td_xe8qp_62", t = {
|
|
10
10
|
table: E,
|
|
@@ -28,11 +28,11 @@ const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10,
|
|
|
28
28
|
}, B = {
|
|
29
29
|
pt: {
|
|
30
30
|
...b.pt,
|
|
31
|
-
...
|
|
31
|
+
...x.pt
|
|
32
32
|
},
|
|
33
33
|
en: {
|
|
34
34
|
...b.en,
|
|
35
|
-
...
|
|
35
|
+
...x.en
|
|
36
36
|
},
|
|
37
37
|
// example to add a new language translation
|
|
38
38
|
es: {
|
|
@@ -64,14 +64,14 @@ const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10,
|
|
|
64
64
|
/* @__PURE__ */ r("table", { ...m, className: p, children: l }),
|
|
65
65
|
_ && /* @__PURE__ */ r(g, { ..._, t: i })
|
|
66
66
|
] });
|
|
67
|
-
},
|
|
67
|
+
}, D = ({ children: l, ...e }) => /* @__PURE__ */ r("thead", { ...e, children: l }), F = ({ children: l, ...e }) => /* @__PURE__ */ r("tbody", { ...e, children: l }), M = ({ children: l, onClick: e, disabled: a, className: n, ..._ }) => {
|
|
68
68
|
const s = h(
|
|
69
69
|
t.tr,
|
|
70
70
|
e && !a ? t["tr__row-or-cell--clickable"] : a ? t["tr__row-or-cell--disabled"] : "",
|
|
71
71
|
n
|
|
72
72
|
);
|
|
73
73
|
return /* @__PURE__ */ r("tr", { ..._, className: s, onClick: () => !a && (e == null ? void 0 : e()), children: l });
|
|
74
|
-
},
|
|
74
|
+
}, O = ({ children: l, onClick: e, disabled: a, className: n, align: _ = "left", ...s }) => {
|
|
75
75
|
const o = h(
|
|
76
76
|
t.td,
|
|
77
77
|
e && !a ? t["td__row-or-cell--clickable"] : a ? t["td__row-or-cell--disabled"] : "",
|
|
@@ -79,7 +79,7 @@ const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10,
|
|
|
79
79
|
n
|
|
80
80
|
);
|
|
81
81
|
return /* @__PURE__ */ r("td", { ...s, className: o, onClick: () => !a && (e == null ? void 0 : e()), children: /* @__PURE__ */ r("span", { className: t["td-wrapper"], children: l }) });
|
|
82
|
-
},
|
|
82
|
+
}, $ = ({
|
|
83
83
|
children: l,
|
|
84
84
|
onSort: e,
|
|
85
85
|
sortType: a,
|
|
@@ -88,13 +88,13 @@ const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10,
|
|
|
88
88
|
align: s = "left",
|
|
89
89
|
...o
|
|
90
90
|
}) => {
|
|
91
|
-
const { translations: m } = C(), [p, i] = u(!1),
|
|
91
|
+
const { translations: m } = C(), [p, i] = u(!1), f = h(
|
|
92
92
|
t.th__wrapper,
|
|
93
93
|
p ? t["th__wrapper--pressed"] : "",
|
|
94
94
|
e ? t["th__wrapper--clickable"] : "",
|
|
95
95
|
n
|
|
96
96
|
);
|
|
97
|
-
return /* @__PURE__ */ r("th", { ...o, className: t[`cell--${s}-alignment`], children: /* @__PURE__ */ w("span", { className:
|
|
97
|
+
return /* @__PURE__ */ r("th", { ...o, className: t[`cell--${s}-alignment`], children: /* @__PURE__ */ w("span", { className: f, onClick: e && (() => i(!p)), children: [
|
|
98
98
|
/* @__PURE__ */ r("span", { children: l }),
|
|
99
99
|
e && /* @__PURE__ */ w(T, { children: [
|
|
100
100
|
/* @__PURE__ */ r("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ r(L, {}) }),
|
|
@@ -112,11 +112,11 @@ const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10,
|
|
|
112
112
|
] })
|
|
113
113
|
] }) });
|
|
114
114
|
};
|
|
115
|
-
d.THead =
|
|
116
|
-
d.TBody =
|
|
117
|
-
d.Tr =
|
|
118
|
-
d.Td =
|
|
119
|
-
d.Th =
|
|
115
|
+
d.THead = D;
|
|
116
|
+
d.TBody = F;
|
|
117
|
+
d.Tr = M;
|
|
118
|
+
d.Td = O;
|
|
119
|
+
d.Th = $;
|
|
120
120
|
export {
|
|
121
|
-
d as
|
|
121
|
+
d as Table
|
|
122
122
|
};
|
|
@@ -1,241 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import { a as p, _ as B } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
|
|
7
|
-
import { e as O, g as W, a as q, u as N, b as z, P as o, c as G, d as J } from "../../index-CqjC7P5Y.js";
|
|
8
|
-
import { u as K, a as Q } from "../../useCompoundItem-CTYi5M_E.js";
|
|
9
|
-
import { L as X, a as E } from "../../ListContext-Dj2Va7Iv.js";
|
|
10
|
-
import { u as Y } from "../../useButton-Bc8IAgyk.js";
|
|
11
|
-
function Z(n) {
|
|
12
|
-
const {
|
|
13
|
-
handlePointerOverEvents: t = !1,
|
|
14
|
-
item: e
|
|
15
|
-
} = n, s = f.useContext(X);
|
|
16
|
-
if (!s)
|
|
17
|
-
throw new Error("useListItem must be used within a ListProvider");
|
|
18
|
-
const {
|
|
19
|
-
dispatch: a,
|
|
20
|
-
getItemState: i
|
|
21
|
-
} = s, {
|
|
22
|
-
highlighted: c,
|
|
23
|
-
selected: b,
|
|
24
|
-
focusable: m
|
|
25
|
-
} = i(e), h = f.useCallback((l) => (r) => {
|
|
26
|
-
var d;
|
|
27
|
-
if ((d = l.onClick) == null || d.call(l, r), !r.defaultPrevented) {
|
|
28
|
-
if (process.env.NODE_ENV !== "production" && e === void 0)
|
|
29
|
-
throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
|
|
30
|
-
`));
|
|
31
|
-
a({
|
|
32
|
-
type: E.itemClick,
|
|
33
|
-
item: e,
|
|
34
|
-
event: r
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
}, [a, e]), P = f.useCallback((l) => (r) => {
|
|
38
|
-
var d;
|
|
39
|
-
if ((d = l.onMouseOver) == null || d.call(l, r), !r.defaultPrevented) {
|
|
40
|
-
if (process.env.NODE_ENV !== "production" && e === void 0)
|
|
41
|
-
throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
|
|
42
|
-
`));
|
|
43
|
-
a({
|
|
44
|
-
type: E.itemHover,
|
|
45
|
-
item: e,
|
|
46
|
-
event: r
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
}, [a, e]);
|
|
50
|
-
let u;
|
|
51
|
-
return m && (u = c ? 0 : -1), {
|
|
52
|
-
getRootProps: (l = {}) => {
|
|
53
|
-
const r = O(l);
|
|
54
|
-
return p({}, l, {
|
|
55
|
-
onClick: h(r),
|
|
56
|
-
onPointerOver: t ? P(r) : void 0,
|
|
57
|
-
tabIndex: u
|
|
58
|
-
});
|
|
59
|
-
},
|
|
60
|
-
highlighted: c,
|
|
61
|
-
selected: b
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
function ee(n, t) {
|
|
65
|
-
return function(s = {}) {
|
|
66
|
-
const a = p({}, s, n(s));
|
|
67
|
-
return p({}, a, t(a));
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
const w = "Tab";
|
|
71
|
-
function te(n) {
|
|
72
|
-
return W(w, n);
|
|
73
|
-
}
|
|
74
|
-
q(w, ["root", "selected", "disabled"]);
|
|
75
|
-
function oe(n) {
|
|
76
|
-
return n.size;
|
|
77
|
-
}
|
|
78
|
-
function se(n) {
|
|
79
|
-
const {
|
|
80
|
-
value: t,
|
|
81
|
-
rootRef: e,
|
|
82
|
-
disabled: s = !1,
|
|
83
|
-
id: a
|
|
84
|
-
} = n, i = f.useRef(null), c = K(a), {
|
|
85
|
-
value: b,
|
|
86
|
-
selectionFollowsFocus: m,
|
|
87
|
-
getTabPanelId: h
|
|
88
|
-
} = $(), P = f.useMemo(() => ({
|
|
89
|
-
disabled: s,
|
|
90
|
-
ref: i,
|
|
91
|
-
id: c
|
|
92
|
-
}), [s, i, c]), {
|
|
93
|
-
id: u,
|
|
94
|
-
index: C,
|
|
95
|
-
totalItemCount: l
|
|
96
|
-
} = Q(t ?? oe, P), {
|
|
97
|
-
getRootProps: r,
|
|
98
|
-
highlighted: d,
|
|
99
|
-
selected: g
|
|
100
|
-
} = Z({
|
|
101
|
-
item: u
|
|
102
|
-
}), {
|
|
103
|
-
getRootProps: v,
|
|
104
|
-
rootRef: R,
|
|
105
|
-
active: T,
|
|
106
|
-
focusVisible: L,
|
|
107
|
-
setFocusVisible: M
|
|
108
|
-
} = Y({
|
|
109
|
-
disabled: s,
|
|
110
|
-
focusableWhenDisabled: !m,
|
|
111
|
-
type: "button"
|
|
112
|
-
}), _ = N(i, e, R), H = u !== void 0 ? h(u) : void 0;
|
|
113
|
-
return {
|
|
114
|
-
getRootProps: (x = {}) => {
|
|
115
|
-
const V = O(x), F = ee(r, v);
|
|
116
|
-
return p({}, x, F(V), {
|
|
117
|
-
role: "tab",
|
|
118
|
-
"aria-controls": H,
|
|
119
|
-
"aria-selected": g,
|
|
120
|
-
id: c,
|
|
121
|
-
ref: _
|
|
122
|
-
});
|
|
123
|
-
},
|
|
124
|
-
active: T,
|
|
125
|
-
focusVisible: L,
|
|
126
|
-
highlighted: d,
|
|
127
|
-
index: C,
|
|
128
|
-
rootRef: _,
|
|
129
|
-
// the `selected` state isn't set on the server (it relies on effects to be calculated),
|
|
130
|
-
// so we fall back to checking the `value` prop with the selectedValue from the TabsContext
|
|
131
|
-
selected: g || u === b,
|
|
132
|
-
setFocusVisible: M,
|
|
133
|
-
totalTabsCount: l
|
|
134
|
-
};
|
|
135
|
-
}
|
|
136
|
-
const ne = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], re = (n) => {
|
|
137
|
-
const {
|
|
138
|
-
selected: t,
|
|
139
|
-
disabled: e
|
|
140
|
-
} = n;
|
|
141
|
-
return G({
|
|
142
|
-
root: ["root", t && "selected", e && "disabled"]
|
|
143
|
-
}, J(te));
|
|
144
|
-
}, k = /* @__PURE__ */ f.forwardRef(function(t, e) {
|
|
145
|
-
var s;
|
|
146
|
-
const {
|
|
147
|
-
children: a,
|
|
148
|
-
disabled: i = !1,
|
|
149
|
-
slotProps: c = {},
|
|
150
|
-
slots: b = {},
|
|
151
|
-
value: m
|
|
152
|
-
} = t, h = B(t, ne), P = f.useRef(), u = N(P, e), {
|
|
153
|
-
active: C,
|
|
154
|
-
highlighted: l,
|
|
155
|
-
selected: r,
|
|
156
|
-
getRootProps: d
|
|
157
|
-
} = se(p({}, t, {
|
|
158
|
-
rootRef: u,
|
|
159
|
-
value: m
|
|
160
|
-
})), g = p({}, t, {
|
|
161
|
-
active: C,
|
|
162
|
-
disabled: i,
|
|
163
|
-
highlighted: l,
|
|
164
|
-
selected: r
|
|
165
|
-
}), v = re(g), R = (s = b.root) != null ? s : "button", T = z({
|
|
166
|
-
elementType: R,
|
|
167
|
-
getSlotProps: d,
|
|
168
|
-
externalSlotProps: c.root,
|
|
169
|
-
externalForwardedProps: h,
|
|
170
|
-
additionalProps: {
|
|
171
|
-
ref: e
|
|
172
|
-
},
|
|
173
|
-
ownerState: g,
|
|
174
|
-
className: v.root
|
|
175
|
-
});
|
|
176
|
-
return /* @__PURE__ */ I(R, p({}, T, {
|
|
177
|
-
children: a
|
|
178
|
-
}));
|
|
179
|
-
});
|
|
180
|
-
process.env.NODE_ENV !== "production" && (k.propTypes = {
|
|
181
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
182
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
183
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
184
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
185
|
-
/**
|
|
186
|
-
* A ref for imperative actions. It currently only supports `focusVisible()` action.
|
|
187
|
-
*/
|
|
188
|
-
action: o.oneOfType([o.func, o.shape({
|
|
189
|
-
current: o.shape({
|
|
190
|
-
focusVisible: o.func.isRequired
|
|
191
|
-
})
|
|
192
|
-
})]),
|
|
193
|
-
/**
|
|
194
|
-
* @ignore
|
|
195
|
-
*/
|
|
196
|
-
children: o.node,
|
|
197
|
-
/**
|
|
198
|
-
* If `true`, the component is disabled.
|
|
199
|
-
* @default false
|
|
200
|
-
*/
|
|
201
|
-
disabled: o.bool,
|
|
202
|
-
/**
|
|
203
|
-
* Callback invoked when new value is being set.
|
|
204
|
-
*/
|
|
205
|
-
onChange: o.func,
|
|
206
|
-
/**
|
|
207
|
-
* The props used for each slot inside the Tab.
|
|
208
|
-
* @default {}
|
|
209
|
-
*/
|
|
210
|
-
slotProps: o.shape({
|
|
211
|
-
root: o.oneOfType([o.func, o.object])
|
|
212
|
-
}),
|
|
213
|
-
/**
|
|
214
|
-
* The components used for each slot inside the Tab.
|
|
215
|
-
* Either a string to use a HTML element or a component.
|
|
216
|
-
* @default {}
|
|
217
|
-
*/
|
|
218
|
-
slots: o.shape({
|
|
219
|
-
root: o.elementType
|
|
220
|
-
}),
|
|
221
|
-
/**
|
|
222
|
-
* You can provide your own value. Otherwise, it falls back to the child position index.
|
|
223
|
-
*/
|
|
224
|
-
value: o.oneOfType([o.number, o.string])
|
|
225
|
-
});
|
|
226
|
-
const he = S(
|
|
227
|
-
({ children: n, value: t, disabled: e, dataTestId: s }, a) => {
|
|
228
|
-
const i = U(A), c = j(
|
|
229
|
-
() => D(
|
|
230
|
-
y.tabs__tab,
|
|
231
|
-
t === (i == null ? void 0 : i.value) && y["tabs__tab--selected"],
|
|
232
|
-
e && y["tabs__tab--disabled"]
|
|
233
|
-
),
|
|
234
|
-
[t, i, e]
|
|
235
|
-
);
|
|
236
|
-
return /* @__PURE__ */ I(k, { className: c, disabled: e, value: t, "data-testid": s, ref: a, children: n });
|
|
237
|
-
}
|
|
238
|
-
);
|
|
1
|
+
import "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import "../../clsx-DB4S2d7J.js";
|
|
4
|
+
import "../../Tabs.module-yYcTJnj6.js";
|
|
5
|
+
import { T as a } from "../../Tab-CRwnhsj5.js";
|
|
239
6
|
export {
|
|
240
|
-
|
|
7
|
+
a as Tab
|
|
241
8
|
};
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { jsx as T } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
2
|
+
import * as m from "react";
|
|
3
3
|
import { forwardRef as v } from "react";
|
|
4
|
-
import { u as y,
|
|
5
|
-
import { a as b, _
|
|
6
|
-
import { g as
|
|
7
|
-
import { u as S, a as U } from "../../useCompoundItem-CTYi5M_E.js";
|
|
4
|
+
import { u as y, a as x, b as C, s as N } from "../../Tabs.module-yYcTJnj6.js";
|
|
5
|
+
import { a as b, _ } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
|
|
6
|
+
import { g as w, a as O, u as E, b as I, P as o, c as S, d as U } from "../../index-CqjC7P5Y.js";
|
|
8
7
|
const h = "TabPanel";
|
|
9
8
|
function j(t) {
|
|
10
|
-
return
|
|
9
|
+
return w(h, t);
|
|
11
10
|
}
|
|
12
|
-
|
|
11
|
+
O(h, ["root", "hidden"]);
|
|
13
12
|
function M(t) {
|
|
14
13
|
return t.size;
|
|
15
14
|
}
|
|
@@ -23,13 +22,13 @@ function V(t) {
|
|
|
23
22
|
throw new Error("No TabContext provided");
|
|
24
23
|
const {
|
|
25
24
|
value: f,
|
|
26
|
-
getTabId:
|
|
27
|
-
} = i, a =
|
|
25
|
+
getTabId: P
|
|
26
|
+
} = i, a = x(s), r = m.useRef(null), c = E(r, n), u = m.useMemo(() => ({
|
|
28
27
|
id: a,
|
|
29
28
|
ref: r
|
|
30
29
|
}), [a]), {
|
|
31
30
|
id: l
|
|
32
|
-
} =
|
|
31
|
+
} = C(e ?? M, u), d = l !== f, p = l !== void 0 ? P(l) : void 0;
|
|
33
32
|
return {
|
|
34
33
|
hidden: d,
|
|
35
34
|
getRootProps: (g = {}) => b({
|
|
@@ -46,21 +45,21 @@ const F = ["children", "value", "slotProps", "slots"], $ = (t) => {
|
|
|
46
45
|
const {
|
|
47
46
|
hidden: e
|
|
48
47
|
} = t;
|
|
49
|
-
return
|
|
48
|
+
return S({
|
|
50
49
|
root: ["root", e && "hidden"]
|
|
51
|
-
},
|
|
52
|
-
}, R = /* @__PURE__ */
|
|
50
|
+
}, U(j));
|
|
51
|
+
}, R = /* @__PURE__ */ m.forwardRef(function(e, s) {
|
|
53
52
|
var n;
|
|
54
53
|
const {
|
|
55
54
|
children: i,
|
|
56
55
|
slotProps: f = {},
|
|
57
|
-
slots:
|
|
58
|
-
} = e, a =
|
|
56
|
+
slots: P = {}
|
|
57
|
+
} = e, a = _(e, F), {
|
|
59
58
|
hidden: r,
|
|
60
59
|
getRootProps: c
|
|
61
60
|
} = V(e), u = b({}, e, {
|
|
62
61
|
hidden: r
|
|
63
|
-
}), l = $(u), d = (n =
|
|
62
|
+
}), l = $(u), d = (n = P.root) != null ? n : "div", p = I({
|
|
64
63
|
elementType: d,
|
|
65
64
|
getSlotProps: c,
|
|
66
65
|
externalSlotProps: f.root,
|
|
@@ -111,9 +110,9 @@ process.env.NODE_ENV !== "production" && (R.propTypes = {
|
|
|
111
110
|
*/
|
|
112
111
|
value: o.oneOfType([o.number, o.string])
|
|
113
112
|
});
|
|
114
|
-
const
|
|
115
|
-
({ children: t, value: e, dataTestId: s }, n) => /* @__PURE__ */ T(R, { className:
|
|
113
|
+
const W = v(
|
|
114
|
+
({ children: t, value: e, dataTestId: s }, n) => /* @__PURE__ */ T(R, { className: N["tabs__tab-panel"], value: e, "data-testid": s, ref: n, children: t })
|
|
116
115
|
);
|
|
117
116
|
export {
|
|
118
|
-
|
|
117
|
+
W as TabPanel
|
|
119
118
|
};
|
|
@@ -7,3 +7,5 @@ export interface TabsProps {
|
|
|
7
7
|
onChange?: (tabValue: number | string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
|
|
8
8
|
}
|
|
9
9
|
export declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export * from './Tab';
|
|
11
|
+
export * from './TabPanel';
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { jsx as E } from "react/jsx-runtime";
|
|
2
2
|
import * as i from "react";
|
|
3
3
|
import { forwardRef as xe, useState as Ve } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { c as Q, C as Z, T as Te, u as Ie, s as Se } from "../../Tabs.module-yYcTJnj6.js";
|
|
5
|
+
import { L as S, a as Re } from "../../Tab-CRwnhsj5.js";
|
|
6
|
+
import { T as bt } from "../../Tab-CRwnhsj5.js";
|
|
7
|
+
import { TabPanel as vt } from "./TabPanel.js";
|
|
5
8
|
import { a as b, _ as ee } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
|
|
6
|
-
import { u as
|
|
7
|
-
import { u as
|
|
8
|
-
import { a as S, L as ye } from "../../ListContext-Dj2Va7Iv.js";
|
|
9
|
+
import { u as we, e as Pe, g as te, a as ne, b as oe, P as v, c as le, d as se } from "../../index-CqjC7P5Y.js";
|
|
10
|
+
import { u as ye } from "../../useControlled-CCMYYdCM.js";
|
|
9
11
|
function J(t, e, l = (n, o) => n === o) {
|
|
10
12
|
return t.length === e.length && t.every((n, o) => l(n, e[o]));
|
|
11
13
|
}
|
|
@@ -332,7 +334,7 @@ function Je(t) {
|
|
|
332
334
|
if (o === "activeDescendant" && u == null)
|
|
333
335
|
throw new Error("useList: The `getItemId` prop is required when using the `activeDescendant` focus management.");
|
|
334
336
|
}
|
|
335
|
-
const A = i.useRef(null), F =
|
|
337
|
+
const A = i.useRef(null), F = we(d, A), k = i.useCallback((x, p, I) => {
|
|
336
338
|
if (C == null || C(x, p, I), o === "DOM" && p != null && (I === S.itemClick || I === S.keyDown || I === S.textNavigation)) {
|
|
337
339
|
var R;
|
|
338
340
|
s == null || (R = s(p)) == null || R.focus();
|
|
@@ -403,7 +405,7 @@ function Je(t) {
|
|
|
403
405
|
event: p
|
|
404
406
|
}));
|
|
405
407
|
}, Ce = (x = {}) => {
|
|
406
|
-
const p =
|
|
408
|
+
const p = Pe(x);
|
|
407
409
|
return b({}, x, {
|
|
408
410
|
"aria-activedescendant": o === "activeDescendant" && N != null ? u(N) : void 0,
|
|
409
411
|
tabIndex: o === "DOM" ? -1 : 0,
|
|
@@ -446,7 +448,7 @@ function Xe(t) {
|
|
|
446
448
|
orientation: o = "horizontal",
|
|
447
449
|
direction: a = "ltr",
|
|
448
450
|
selectionFollowsFocus: s = !1
|
|
449
|
-
} = t, [u, r] =
|
|
451
|
+
} = t, [u, r] = ye({
|
|
450
452
|
controlled: e,
|
|
451
453
|
default: l,
|
|
452
454
|
name: "Tabs",
|
|
@@ -739,7 +741,7 @@ function lt(t) {
|
|
|
739
741
|
}), [s, o, u]);
|
|
740
742
|
return /* @__PURE__ */ E(Z.Provider, {
|
|
741
743
|
value: d,
|
|
742
|
-
children: /* @__PURE__ */ E(
|
|
744
|
+
children: /* @__PURE__ */ E(Re.Provider, {
|
|
743
745
|
value: r,
|
|
744
746
|
children: l
|
|
745
747
|
})
|
|
@@ -819,5 +821,7 @@ const ft = xe(({ children: t, onChange: e, dataTestId: l }, n) => {
|
|
|
819
821
|
}, ref: n, children: /* @__PURE__ */ E(he, { className: Se.tabs, children: t }) });
|
|
820
822
|
});
|
|
821
823
|
export {
|
|
824
|
+
bt as Tab,
|
|
825
|
+
vt as TabPanel,
|
|
822
826
|
ft as Tabs
|
|
823
827
|
};
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { InputHTMLAttributes } from 'react';
|
|
2
2
|
|
|
3
3
|
type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
4
|
-
label
|
|
4
|
+
label?: string;
|
|
5
5
|
disabled?: boolean;
|
|
6
|
-
checked?: boolean;
|
|
7
6
|
'data-testid'?: string;
|
|
8
7
|
classNameWrapper?: string;
|
|
9
|
-
classNameLabel?: string;
|
|
10
8
|
classNameInput?: string;
|
|
11
|
-
|
|
9
|
+
classNameLabel?: string;
|
|
12
10
|
};
|
|
13
|
-
export declare const Toggle: ({ onChange, label, disabled,
|
|
11
|
+
export declare const Toggle: ({ onChange, label, disabled, classNameWrapper, "data-testid": dataTestId, classNameInput, classNameLabel, }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
12
|
export {};
|