@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
1,455 lines (1,454 loc) • 41.7 kB
JavaScript
import * as s from "react";
import { P as e } from "./index-B9vkf41S.js";
import { jsx as T, jsxs as G } from "react/jsx-runtime";
import { F as ae, G as ie, H as j, Y as wo } from "./generateUtilityClasses-B_xKAflz.js";
import { u as ze } from "./index-Ba4TEBpP.js";
import { u as xo } from "./useTheme-0AkY41zn.js";
import { u as Se, s as D, c as ce } from "./DefaultPropsProvider-BrmlvPWg.js";
import { m as ve } from "./memoTheme-C-PaH-Cy.js";
import { u as Bo, a as me } from "./useEventCallback-Y2KwRxBw.js";
import { d as Fe } from "./debounce-46wSf_lW.js";
import { o as Ae } from "./ownerWindow-niciwP7I.js";
import { u as H } from "./useSlot-BSkdRaZr.js";
import { u as se } from "./useSlotProps-CWTjRiRv.js";
import { c as Ve } from "./createSvgIcon-DFIM5PqN.js";
import { B as He } from "./ButtonBase-C2jRC_V7.js";
import { o as Co } from "./ownerDocument-CUrv0DIK.js";
import { r as Eo } from "./refType-8hihVLUh.js";
import { u as Io } from "./useThemeProps-hSh1qhnc.js";
import { c as Ue } from "./capitalize-BHEX83JQ.js";
import { u as Po } from "./unsupportedProp-BuVD30Gh.js";
const Te = /* @__PURE__ */ s.createContext(null);
process.env.NODE_ENV !== "production" && (Te.displayName = "TabContext");
function Mo() {
const [t, o] = s.useState(null);
return s.useEffect(() => {
o(`mui-p-${Math.round(Math.random() * 1e5)}`);
}, []), t;
}
function Oo(t) {
const {
children: o,
value: r
} = t, a = Mo(), i = s.useMemo(() => ({
idPrefix: a,
value: r
}), [a, r]);
return /* @__PURE__ */ T(Te.Provider, {
value: i,
children: o
});
}
process.env.NODE_ENV !== "production" && (Oo.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: e.node,
/**
* The value of the currently selected `Tab`.
*/
value: e.oneOfType([e.number, e.string]).isRequired
});
function Ke() {
return s.useContext(Te);
}
function Xe(t, o) {
const {
idPrefix: r
} = t;
return r === null ? null : `${t.idPrefix}-P-${o}`;
}
function Ye(t, o) {
const {
idPrefix: r
} = t;
return r === null ? null : `${t.idPrefix}-T-${o}`;
}
function No(t) {
return (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2;
}
function Ro(t, o, r, a = {}, i = () => {
}) {
const {
ease: d = No,
duration: p = 300
// standard
} = a;
let f = null;
const h = o[t];
let S = !1;
const v = () => {
S = !0;
}, m = (y) => {
if (S) {
i(new Error("Animation cancelled"));
return;
}
f === null && (f = y);
const g = Math.min(1, (y - f) / p);
if (o[t] = d(g) * (r - h) + h, g >= 1) {
requestAnimationFrame(() => {
i(null);
});
return;
}
requestAnimationFrame(m);
};
return h === r ? (i(new Error("Element already at target position")), v) : (requestAnimationFrame(m), v);
}
const jo = {
width: 99,
height: 99,
position: "absolute",
top: -9999,
overflow: "scroll"
};
function _e(t) {
const {
onChange: o,
...r
} = t, a = s.useRef(), i = s.useRef(null), d = () => {
a.current = i.current.offsetHeight - i.current.clientHeight;
};
return Bo(() => {
const p = Fe(() => {
const h = a.current;
d(), h !== a.current && o(a.current);
}), f = Ae(i.current);
return f.addEventListener("resize", p), () => {
p.clear(), f.removeEventListener("resize", p);
};
}, [o]), s.useEffect(() => {
d(), o(a.current);
}, [o]), /* @__PURE__ */ T("div", {
style: jo,
...r,
ref: i
});
}
process.env.NODE_ENV !== "production" && (_e.propTypes = {
onChange: e.func.isRequired
});
const ko = Ve(/* @__PURE__ */ T("path", {
d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
}), "KeyboardArrowLeft"), $o = Ve(/* @__PURE__ */ T("path", {
d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
}), "KeyboardArrowRight");
function Do(t) {
return ie("MuiTabScrollButton", t);
}
const Wo = ae("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]), Lo = (t) => {
const {
classes: o,
orientation: r,
disabled: a
} = t;
return ce({
root: ["root", r, a && "disabled"]
}, Do, o);
}, zo = D(He, {
name: "MuiTabScrollButton",
slot: "Root",
overridesResolver: (t, o) => {
const {
ownerState: r
} = t;
return [o.root, r.orientation && o[r.orientation]];
}
})({
width: 40,
flexShrink: 0,
opacity: 0.8,
[`&.${Wo.disabled}`]: {
opacity: 0
},
variants: [{
props: {
orientation: "vertical"
},
style: {
width: "100%",
height: 40,
"& svg": {
transform: "var(--TabScrollButton-svgRotate)"
}
}
}]
}), qe = /* @__PURE__ */ s.forwardRef(function(o, r) {
const a = Se({
props: o,
name: "MuiTabScrollButton"
}), {
className: i,
slots: d = {},
slotProps: p = {},
direction: f,
orientation: h,
disabled: S,
...v
} = a, m = ze(), y = {
isRtl: m,
...a
}, g = Lo(y), W = d.StartScrollButtonIcon ?? ko, E = d.EndScrollButtonIcon ?? $o, x = se({
elementType: W,
externalSlotProps: p.startScrollButtonIcon,
additionalProps: {
fontSize: "small"
},
ownerState: y
}), J = se({
elementType: E,
externalSlotProps: p.endScrollButtonIcon,
additionalProps: {
fontSize: "small"
},
ownerState: y
});
return /* @__PURE__ */ T(zo, {
component: "div",
className: j(g.root, i),
ref: r,
role: null,
ownerState: y,
tabIndex: null,
...v,
style: {
...v.style,
...h === "vertical" && {
"--TabScrollButton-svgRotate": `rotate(${m ? -90 : 90}deg)`
}
},
children: f === "left" ? /* @__PURE__ */ T(W, {
...x
}) : /* @__PURE__ */ T(E, {
...J
})
});
});
process.env.NODE_ENV !== "production" && (qe.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The direction the button should indicate.
*/
direction: e.oneOf(["left", "right"]).isRequired,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: e.bool,
/**
* The component orientation (layout flow direction).
*/
orientation: e.oneOf(["horizontal", "vertical"]).isRequired,
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
* @default {}
*/
slotProps: e.shape({
endScrollButtonIcon: e.oneOfType([e.func, e.object]),
startScrollButtonIcon: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
EndScrollButtonIcon: e.elementType,
StartScrollButtonIcon: e.elementType
}),
/**
* @ignore
*/
style: e.object,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
function Fo(t) {
return ie("MuiTabs", t);
}
const ye = ae("MuiTabs", ["root", "vertical", "list", "flexContainer", "flexContainerVertical", "centered", "scroller", "fixed", "scrollableX", "scrollableY", "hideScrollbar", "scrollButtons", "scrollButtonsHideMobile", "indicator"]), $e = (t, o) => t === o ? t.firstChild : o && o.nextElementSibling ? o.nextElementSibling : t.firstChild, De = (t, o) => t === o ? t.lastChild : o && o.previousElementSibling ? o.previousElementSibling : t.lastChild, le = (t, o, r) => {
let a = !1, i = r(t, o);
for (; i; ) {
if (i === t.firstChild) {
if (a)
return;
a = !0;
}
const d = i.disabled || i.getAttribute("aria-disabled") === "true";
if (!i.hasAttribute("tabindex") || d)
i = r(t, i);
else {
i.focus();
return;
}
}
}, Ao = (t) => {
const {
vertical: o,
fixed: r,
hideScrollbar: a,
scrollableX: i,
scrollableY: d,
centered: p,
scrollButtonsHideMobile: f,
classes: h
} = t;
return ce({
root: ["root", o && "vertical"],
scroller: ["scroller", r && "fixed", a && "hideScrollbar", i && "scrollableX", d && "scrollableY"],
list: ["list", "flexContainer", o && "flexContainerVertical", o && "vertical", p && "centered"],
indicator: ["indicator"],
scrollButtons: ["scrollButtons", f && "scrollButtonsHideMobile"],
scrollableX: [i && "scrollableX"],
hideScrollbar: [a && "hideScrollbar"]
}, Fo, h);
}, Vo = D("div", {
name: "MuiTabs",
slot: "Root",
overridesResolver: (t, o) => {
const {
ownerState: r
} = t;
return [{
[`& .${ye.scrollButtons}`]: o.scrollButtons
}, {
[`& .${ye.scrollButtons}`]: r.scrollButtonsHideMobile && o.scrollButtonsHideMobile
}, o.root, r.vertical && o.vertical];
}
})(ve(({
theme: t
}) => ({
overflow: "hidden",
minHeight: 48,
// Add iOS momentum scrolling for iOS < 13.0
WebkitOverflowScrolling: "touch",
display: "flex",
variants: [{
props: ({
ownerState: o
}) => o.vertical,
style: {
flexDirection: "column"
}
}, {
props: ({
ownerState: o
}) => o.scrollButtonsHideMobile,
style: {
[`& .${ye.scrollButtons}`]: {
[t.breakpoints.down("sm")]: {
display: "none"
}
}
}
}]
}))), Ho = D("div", {
name: "MuiTabs",
slot: "Scroller",
overridesResolver: (t, o) => {
const {
ownerState: r
} = t;
return [o.scroller, r.fixed && o.fixed, r.hideScrollbar && o.hideScrollbar, r.scrollableX && o.scrollableX, r.scrollableY && o.scrollableY];
}
})({
position: "relative",
display: "inline-block",
flex: "1 1 auto",
whiteSpace: "nowrap",
variants: [{
props: ({
ownerState: t
}) => t.fixed,
style: {
overflowX: "hidden",
width: "100%"
}
}, {
props: ({
ownerState: t
}) => t.hideScrollbar,
style: {
// Hide dimensionless scrollbar on macOS
scrollbarWidth: "none",
// Firefox
"&::-webkit-scrollbar": {
display: "none"
// Safari + Chrome
}
}
}, {
props: ({
ownerState: t
}) => t.scrollableX,
style: {
overflowX: "auto",
overflowY: "hidden"
}
}, {
props: ({
ownerState: t
}) => t.scrollableY,
style: {
overflowY: "auto",
overflowX: "hidden"
}
}]
}), Uo = D("div", {
name: "MuiTabs",
slot: "List",
overridesResolver: (t, o) => {
const {
ownerState: r
} = t;
return [o.list, o.flexContainer, r.vertical && o.flexContainerVertical, r.centered && o.centered];
}
})({
display: "flex",
variants: [{
props: ({
ownerState: t
}) => t.vertical,
style: {
flexDirection: "column"
}
}, {
props: ({
ownerState: t
}) => t.centered,
style: {
justifyContent: "center"
}
}]
}), Ko = D("span", {
name: "MuiTabs",
slot: "Indicator"
})(ve(({
theme: t
}) => ({
position: "absolute",
height: 2,
bottom: 0,
width: "100%",
transition: t.transitions.create(),
variants: [{
props: {
indicatorColor: "primary"
},
style: {
backgroundColor: (t.vars || t).palette.primary.main
}
}, {
props: {
indicatorColor: "secondary"
},
style: {
backgroundColor: (t.vars || t).palette.secondary.main
}
}, {
props: ({
ownerState: o
}) => o.vertical,
style: {
height: "100%",
width: 2,
right: 0
}
}]
}))), Xo = D(_e)({
overflowX: "auto",
overflowY: "hidden",
// Hide dimensionless scrollbar on macOS
scrollbarWidth: "none",
// Firefox
"&::-webkit-scrollbar": {
display: "none"
// Safari + Chrome
}
}), We = {};
let Le = !1;
const Ge = /* @__PURE__ */ s.forwardRef(function(o, r) {
const a = Se({
props: o,
name: "MuiTabs"
}), i = xo(), d = ze(), {
"aria-label": p,
"aria-labelledby": f,
action: h,
centered: S = !1,
children: v,
className: m,
component: y = "div",
allowScrollButtonsMobile: g = !1,
indicatorColor: W = "primary",
onChange: E,
orientation: x = "horizontal",
ScrollButtonComponent: J,
// TODO: remove in v7 (deprecated in v6)
scrollButtons: P = "auto",
selectionFollowsFocus: de,
slots: M = {},
slotProps: A = {},
TabIndicatorProps: U = {},
// TODO: remove in v7 (deprecated in v6)
TabScrollButtonProps: K = {},
// TODO: remove in v7 (deprecated in v6)
textColor: Q = "primary",
value: k,
variant: O = "standard",
visibleScrollbar: ue = !1,
...Je
} = a, B = O === "scrollable", C = x === "vertical", X = C ? "scrollTop" : "scrollLeft", Z = C ? "top" : "left", ee = C ? "bottom" : "right", pe = C ? "clientHeight" : "clientWidth", Y = C ? "height" : "width", N = {
...a,
component: y,
allowScrollButtonsMobile: g,
indicatorColor: W,
orientation: x,
vertical: C,
scrollButtons: P,
textColor: Q,
variant: O,
visibleScrollbar: ue,
fixed: !B,
hideScrollbar: B && !ue,
scrollableX: B && !C,
scrollableY: B && C,
centered: S && !B,
scrollButtonsHideMobile: !g
}, $ = Ao(N), Qe = se({
elementType: M.StartScrollButtonIcon,
externalSlotProps: A.startScrollButtonIcon,
ownerState: N
}), Ze = se({
elementType: M.EndScrollButtonIcon,
externalSlotProps: A.endScrollButtonIcon,
ownerState: N
});
process.env.NODE_ENV !== "production" && S && B && console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties at the same time on a `Tabs` component.');
const [ge, eo] = s.useState(!1), [L, we] = s.useState(We), [xe, oo] = s.useState(!1), [Be, to] = s.useState(!1), [Ce, no] = s.useState(!1), [Ee, ro] = s.useState({
overflow: "hidden",
scrollbarWidth: 0
}), oe = /* @__PURE__ */ new Map(), R = s.useRef(null), z = s.useRef(null), V = {
slots: M,
slotProps: {
indicator: U,
scrollButton: K,
...A
}
}, Ie = () => {
const n = R.current;
let l;
if (n) {
const u = n.getBoundingClientRect();
l = {
clientWidth: n.clientWidth,
scrollLeft: n.scrollLeft,
scrollTop: n.scrollTop,
scrollWidth: n.scrollWidth,
top: u.top,
bottom: u.bottom,
left: u.left,
right: u.right
};
}
let c;
if (n && k !== !1) {
const u = z.current.children;
if (u.length > 0) {
const b = u[oe.get(k)];
process.env.NODE_ENV !== "production" && (b || console.error(["MUI: The `value` provided to the Tabs component is invalid.", `None of the Tabs' children match with "${k}".`, oe.keys ? `You can provide one of the following values: ${Array.from(oe.keys()).join(", ")}.` : null].join(`
`))), c = b ? b.getBoundingClientRect() : null, process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && !Le && c && c.width === 0 && c.height === 0 && // if the whole Tabs component is hidden, don't warn
l.clientWidth !== 0 && (l = null, console.error(["MUI: The `value` provided to the Tabs component is invalid.", `The Tab with this \`value\` ("${k}") is not part of the document layout.`, "Make sure the tab item is present in the document or that it's not `display: none`."].join(`
`)), Le = !0);
}
}
return {
tabsMeta: l,
tabMeta: c
};
}, _ = me(() => {
const {
tabsMeta: n,
tabMeta: l
} = Ie();
let c = 0, u;
C ? (u = "top", l && n && (c = l.top - n.top + n.scrollTop)) : (u = d ? "right" : "left", l && n && (c = (d ? -1 : 1) * (l[u] - n[u] + n.scrollLeft)));
const b = {
[u]: c,
// May be wrong until the font is loaded.
[Y]: l ? l[Y] : 0
};
if (typeof L[u] != "number" || typeof L[Y] != "number")
we(b);
else {
const I = Math.abs(L[u] - b[u]), F = Math.abs(L[Y] - b[Y]);
(I >= 1 || F >= 1) && we(b);
}
}), fe = (n, {
animation: l = !0
} = {}) => {
l ? Ro(X, R.current, n, {
duration: i.transitions.duration.standard
}) : R.current[X] = n;
}, Pe = (n) => {
let l = R.current[X];
C ? l += n : l += n * (d ? -1 : 1), fe(l);
}, Me = () => {
const n = R.current[pe];
let l = 0;
const c = Array.from(z.current.children);
for (let u = 0; u < c.length; u += 1) {
const b = c[u];
if (l + b[pe] > n) {
u === 0 && (l = n);
break;
}
l += b[pe];
}
return l;
}, lo = () => {
Pe(-1 * Me());
}, so = () => {
Pe(Me());
}, [ao, {
onChange: te,
...io
}] = H("scrollbar", {
className: j($.scrollableX, $.hideScrollbar),
elementType: Xo,
shouldForwardComponentProp: !0,
externalForwardedProps: V,
ownerState: N
}), co = s.useCallback((n) => {
te == null || te(n), ro({
overflow: null,
scrollbarWidth: n
});
}, [te]), [Oe, Ne] = H("scrollButtons", {
className: j($.scrollButtons, K.className),
elementType: qe,
externalForwardedProps: V,
ownerState: N,
additionalProps: {
orientation: x,
slots: {
StartScrollButtonIcon: M.startScrollButtonIcon || M.StartScrollButtonIcon,
EndScrollButtonIcon: M.endScrollButtonIcon || M.EndScrollButtonIcon
},
slotProps: {
startScrollButtonIcon: Qe,
endScrollButtonIcon: Ze
}
}
}), uo = () => {
const n = {};
n.scrollbarSizeListener = B ? /* @__PURE__ */ T(ao, {
...io,
onChange: co
}) : null;
const c = B && (P === "auto" && (xe || Be) || P === !0);
return n.scrollButtonStart = c ? /* @__PURE__ */ T(Oe, {
direction: d ? "right" : "left",
onClick: lo,
disabled: !xe,
...Ne
}) : null, n.scrollButtonEnd = c ? /* @__PURE__ */ T(Oe, {
direction: d ? "left" : "right",
onClick: so,
disabled: !Be,
...Ne
}) : null, n;
}, Re = me((n) => {
const {
tabsMeta: l,
tabMeta: c
} = Ie();
if (!(!c || !l)) {
if (c[Z] < l[Z]) {
const u = l[X] + (c[Z] - l[Z]);
fe(u, {
animation: n
});
} else if (c[ee] > l[ee]) {
const u = l[X] + (c[ee] - l[ee]);
fe(u, {
animation: n
});
}
}
}), ne = me(() => {
B && P !== !1 && no(!Ce);
});
s.useEffect(() => {
const n = Fe(() => {
R.current && _();
});
let l;
const c = (I) => {
I.forEach((F) => {
F.removedNodes.forEach((q) => {
l == null || l.unobserve(q);
}), F.addedNodes.forEach((q) => {
l == null || l.observe(q);
});
}), n(), ne();
}, u = Ae(R.current);
u.addEventListener("resize", n);
let b;
return typeof ResizeObserver < "u" && (l = new ResizeObserver(n), Array.from(z.current.children).forEach((I) => {
l.observe(I);
})), typeof MutationObserver < "u" && (b = new MutationObserver(c), b.observe(z.current, {
childList: !0
})), () => {
n.clear(), u.removeEventListener("resize", n), b == null || b.disconnect(), l == null || l.disconnect();
};
}, [_, ne]), s.useEffect(() => {
const n = Array.from(z.current.children), l = n.length;
if (typeof IntersectionObserver < "u" && l > 0 && B && P !== !1) {
const c = n[0], u = n[l - 1], b = {
root: R.current,
threshold: 0.99
}, I = (he) => {
oo(!he[0].isIntersecting);
}, F = new IntersectionObserver(I, b);
F.observe(c);
const q = (he) => {
to(!he[0].isIntersecting);
}, ke = new IntersectionObserver(q, b);
return ke.observe(u), () => {
F.disconnect(), ke.disconnect();
};
}
}, [B, P, Ce, v == null ? void 0 : v.length]), s.useEffect(() => {
eo(!0);
}, []), s.useEffect(() => {
_();
}), s.useEffect(() => {
Re(We !== L);
}, [Re, L]), s.useImperativeHandle(h, () => ({
updateIndicator: _,
updateScrollButtons: ne
}), [_, ne]);
const [po, fo] = H("indicator", {
className: j($.indicator, U.className),
elementType: Ko,
externalForwardedProps: V,
ownerState: N,
additionalProps: {
style: L
}
}), je = /* @__PURE__ */ T(po, {
...fo
});
let re = 0;
const bo = s.Children.map(v, (n) => {
if (!/* @__PURE__ */ s.isValidElement(n))
return null;
process.env.NODE_ENV !== "production" && wo.isFragment(n) && console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join(`
`));
const l = n.props.value === void 0 ? re : n.props.value;
oe.set(l, re);
const c = l === k;
return re += 1, /* @__PURE__ */ s.cloneElement(n, {
fullWidth: O === "fullWidth",
indicator: c && !ge && je,
selected: c,
selectionFollowsFocus: de,
onChange: E,
textColor: Q,
value: l,
...re === 1 && k === !1 && !n.props.tabIndex ? {
tabIndex: 0
} : {}
});
}), ho = (n) => {
if (n.altKey || n.shiftKey || n.ctrlKey || n.metaKey)
return;
const l = z.current, c = Co(l).activeElement;
if (c.getAttribute("role") !== "tab")
return;
let b = x === "horizontal" ? "ArrowLeft" : "ArrowUp", I = x === "horizontal" ? "ArrowRight" : "ArrowDown";
switch (x === "horizontal" && d && (b = "ArrowRight", I = "ArrowLeft"), n.key) {
case b:
n.preventDefault(), le(l, c, De);
break;
case I:
n.preventDefault(), le(l, c, $e);
break;
case "Home":
n.preventDefault(), le(l, null, $e);
break;
case "End":
n.preventDefault(), le(l, null, De);
break;
}
}, be = uo(), [mo, yo] = H("root", {
ref: r,
className: j($.root, m),
elementType: Vo,
externalForwardedProps: {
...V,
...Je,
component: y
},
ownerState: N
}), [So, vo] = H("scroller", {
ref: R,
className: $.scroller,
elementType: Ho,
externalForwardedProps: V,
ownerState: N,
additionalProps: {
style: {
overflow: Ee.overflow,
[C ? `margin${d ? "Left" : "Right"}` : "marginBottom"]: ue ? void 0 : -Ee.scrollbarWidth
}
}
}), [To, go] = H("list", {
ref: z,
className: j($.list, $.flexContainer),
elementType: Uo,
externalForwardedProps: V,
ownerState: N,
getSlotProps: (n) => ({
...n,
onKeyDown: (l) => {
var c;
ho(l), (c = n.onKeyDown) == null || c.call(n, l);
}
})
});
return /* @__PURE__ */ G(mo, {
...yo,
children: [be.scrollButtonStart, be.scrollbarSizeListener, /* @__PURE__ */ G(So, {
...vo,
children: [/* @__PURE__ */ T(To, {
"aria-label": p,
"aria-labelledby": f,
"aria-orientation": x === "vertical" ? "vertical" : null,
role: "tablist",
...go,
children: bo
}), ge && je]
}), be.scrollButtonEnd]
});
});
process.env.NODE_ENV !== "production" && (Ge.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Callback fired when the component mounts.
* This is useful when you want to trigger an action programmatically.
* It supports two actions: `updateIndicator()` and `updateScrollButtons()`
*
* @param {object} actions This object contains all possible actions
* that can be triggered programmatically.
*/
action: Eo,
/**
* If `true`, the scroll buttons aren't forced hidden on mobile.
* By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
* @default false
*/
allowScrollButtonsMobile: e.bool,
/**
* The label for the Tabs as a string.
*/
"aria-label": e.string,
/**
* An id or list of ids separated by a space that label the Tabs.
*/
"aria-labelledby": e.string,
/**
* If `true`, the tabs are centered.
* This prop is intended for large views.
* @default false
*/
centered: e.bool,
/**
* The content of the component.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: e.elementType,
/**
* Determines the color of the indicator.
* @default 'primary'
*/
indicatorColor: e.oneOfType([e.oneOf(["primary", "secondary"]), e.string]),
/**
* Callback fired when the value changes.
*
* @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {any} value We default to the index of the child (number)
*/
onChange: e.func,
/**
* The component orientation (layout flow direction).
* @default 'horizontal'
*/
orientation: e.oneOf(["horizontal", "vertical"]),
/**
* The component used to render the scroll buttons.
* @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
* @default TabScrollButton
*/
ScrollButtonComponent: e.elementType,
/**
* Determine behavior of scroll buttons when tabs are set to scroll:
*
* - `auto` will only present them when not all the items are visible.
* - `true` will always present them.
* - `false` will never present them.
*
* By default the scroll buttons are hidden on mobile.
* This behavior can be disabled with `allowScrollButtonsMobile`.
* @default 'auto'
*/
scrollButtons: e.oneOf(["auto", !1, !0]),
/**
* If `true` the selected tab changes on focus. Otherwise it only
* changes on activation.
*/
selectionFollowsFocus: e.bool,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: e.shape({
endScrollButtonIcon: e.oneOfType([e.func, e.object]),
indicator: e.oneOfType([e.func, e.object]),
list: e.oneOfType([e.func, e.object]),
root: e.oneOfType([e.func, e.object]),
scrollbar: e.oneOfType([e.func, e.object]),
scrollButtons: e.oneOfType([e.func, e.object]),
scroller: e.oneOfType([e.func, e.object]),
startScrollButtonIcon: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
endScrollButtonIcon: e.elementType,
EndScrollButtonIcon: e.elementType,
indicator: e.elementType,
list: e.elementType,
root: e.elementType,
scrollbar: e.elementType,
scrollButtons: e.elementType,
scroller: e.elementType,
startScrollButtonIcon: e.elementType,
StartScrollButtonIcon: e.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
/**
* Props applied to the tab indicator element.
* @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
* @default {}
*/
TabIndicatorProps: e.object,
/**
* Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
* @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
* @default {}
*/
TabScrollButtonProps: e.object,
/**
* Determines the color of the `Tab`.
* @default 'primary'
*/
textColor: e.oneOf(["inherit", "primary", "secondary"]),
/**
* The value of the currently selected `Tab`.
* If you don't want any selected `Tab`, you can set this prop to `false`.
*/
value: e.any,
/**
* Determines additional display behavior of the tabs:
*
* - `scrollable` will invoke scrolling properties and allow for horizontally
* scrolling (or swiping) of the tab bar.
* - `fullWidth` will make the tabs grow to use all the available space,
* which should be used for small views, like on mobile.
* - `standard` will render the default state.
* @default 'standard'
*/
variant: e.oneOf(["fullWidth", "scrollable", "standard"]),
/**
* If `true`, the scrollbar is visible. It can be useful when displaying
* a long vertical list of tabs.
* @default false
*/
visibleScrollbar: e.bool
});
const Yo = /* @__PURE__ */ s.forwardRef(function(o, r) {
const {
children: a,
...i
} = o, d = Ke();
if (d === null)
throw new TypeError("No TabContext provided");
const p = s.Children.map(a, (f) => /* @__PURE__ */ s.isValidElement(f) ? /* @__PURE__ */ s.cloneElement(f, {
// SOMEDAY: `Tabs` will set those themselves
"aria-controls": Xe(d, f.props.value),
id: Ye(d, f.props.value)
}) : null);
return /* @__PURE__ */ T(Ge, {
...i,
ref: r,
value: d.value,
children: p
});
});
process.env.NODE_ENV !== "production" && (Yo.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* A list of `<Tab />` elements.
*/
children: e.node
});
function _o(t) {
return ie("MuiTabPanel", t);
}
const gt = ae("MuiTabPanel", ["root", "hidden"]), qo = (t) => {
const {
classes: o,
hidden: r
} = t;
return ce({
root: ["root", r && "hidden"]
}, _o, o);
}, Go = D("div", {
name: "MuiTabPanel",
slot: "Root"
})(({
theme: t
}) => ({
padding: t.spacing(3)
})), Jo = /* @__PURE__ */ s.forwardRef(function(o, r) {
const a = Io({
props: o,
name: "MuiTabPanel"
}), {
children: i,
className: d,
value: p,
keepMounted: f = !1,
...h
} = a, S = {
...a
}, v = qo(S), m = Ke();
if (m === null)
throw new TypeError("No TabContext provided");
const y = Xe(m, p), g = Ye(m, p);
return /* @__PURE__ */ T(Go, {
"aria-labelledby": g,
className: j(v.root, d),
hidden: p !== m.value,
id: y,
ref: r,
role: "tabpanel",
ownerState: S,
...h,
children: (f || p === m.value) && i
});
});
process.env.NODE_ENV !== "production" && (Jo.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* Always keep the children in the DOM.
* @default false
*/
keepMounted: e.bool,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
/**
* The `value` of the corresponding `Tab`. Must use the index of the `Tab` when
* no `value` was passed to `Tab`.
*/
value: e.oneOfType([e.number, e.string]).isRequired
});
function Qo(t) {
return ie("MuiTab", t);
}
const w = ae("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper", "icon"]), Zo = (t) => {
const {
classes: o,
textColor: r,
fullWidth: a,
wrapped: i,
icon: d,
label: p,
selected: f,
disabled: h
} = t, S = {
root: ["root", d && p && "labelIcon", `textColor${Ue(r)}`, a && "fullWidth", i && "wrapped", f && "selected", h && "disabled"],
icon: ["iconWrapper", "icon"]
};
return ce(S, Qo, o);
}, et = D(He, {
name: "MuiTab",
slot: "Root",
overridesResolver: (t, o) => {
const {
ownerState: r
} = t;
return [o.root, r.label && r.icon && o.labelIcon, o[`textColor${Ue(r.textColor)}`], r.fullWidth && o.fullWidth, r.wrapped && o.wrapped, {
[`& .${w.iconWrapper}`]: o.iconWrapper
}, {
[`& .${w.icon}`]: o.icon
}];
}
})(ve(({
theme: t
}) => ({
...t.typography.button,
maxWidth: 360,
minWidth: 90,
position: "relative",
minHeight: 48,
flexShrink: 0,
padding: "12px 16px",
overflow: "hidden",
whiteSpace: "normal",
textAlign: "center",
lineHeight: 1.25,
variants: [{
props: ({
ownerState: o
}) => o.label && (o.iconPosition === "top" || o.iconPosition === "bottom"),
style: {
flexDirection: "column"
}
}, {
props: ({
ownerState: o
}) => o.label && o.iconPosition !== "top" && o.iconPosition !== "bottom",
style: {
flexDirection: "row"
}
}, {
props: ({
ownerState: o
}) => o.icon && o.label,
style: {
minHeight: 72,
paddingTop: 9,
paddingBottom: 9
}
}, {
props: ({
ownerState: o,
iconPosition: r
}) => o.icon && o.label && r === "top",
style: {
[`& > .${w.icon}`]: {
marginBottom: 6
}
}
}, {
props: ({
ownerState: o,
iconPosition: r
}) => o.icon && o.label && r === "bottom",
style: {
[`& > .${w.icon}`]: {
marginTop: 6
}
}
}, {
props: ({
ownerState: o,
iconPosition: r
}) => o.icon && o.label && r === "start",
style: {
[`& > .${w.icon}`]: {
marginRight: t.spacing(1)
}
}
}, {
props: ({
ownerState: o,
iconPosition: r
}) => o.icon && o.label && r === "end",
style: {
[`& > .${w.icon}`]: {
marginLeft: t.spacing(1)
}
}
}, {
props: {
textColor: "inherit"
},
style: {
color: "inherit",
opacity: 0.6,
// same opacity as theme.palette.text.secondary
[`&.${w.selected}`]: {
opacity: 1
},
[`&.${w.disabled}`]: {
opacity: (t.vars || t).palette.action.disabledOpacity
}
}
}, {
props: {
textColor: "primary"
},
style: {
color: (t.vars || t).palette.text.secondary,
[`&.${w.selected}`]: {
color: (t.vars || t).palette.primary.main
},
[`&.${w.disabled}`]: {
color: (t.vars || t).palette.text.disabled
}
}
}, {
props: {
textColor: "secondary"
},
style: {
color: (t.vars || t).palette.text.secondary,
[`&.${w.selected}`]: {
color: (t.vars || t).palette.secondary.main
},
[`&.${w.disabled}`]: {
color: (t.vars || t).palette.text.disabled
}
}
}, {
props: ({
ownerState: o
}) => o.fullWidth,
style: {
flexShrink: 1,
flexGrow: 1,
flexBasis: 0,
maxWidth: "none"
}
}, {
props: ({
ownerState: o
}) => o.wrapped,
style: {
fontSize: t.typography.pxToRem(12)
}
}]
}))), ot = /* @__PURE__ */ s.forwardRef(function(o, r) {
const a = Se({
props: o,
name: "MuiTab"
}), {
className: i,
disabled: d = !1,
disableFocusRipple: p = !1,
// eslint-disable-next-line react/prop-types
fullWidth: f,
icon: h,
iconPosition: S = "top",
// eslint-disable-next-line react/prop-types
indicator: v,
label: m,
onChange: y,
onClick: g,
onFocus: W,
// eslint-disable-next-line react/prop-types
selected: E,
// eslint-disable-next-line react/prop-types
selectionFollowsFocus: x,
// eslint-disable-next-line react/prop-types
textColor: J = "inherit",
value: P,
wrapped: de = !1,
...M
} = a, A = {
...a,
disabled: d,
disableFocusRipple: p,
selected: E,
icon: !!h,
iconPosition: S,
label: !!m,
fullWidth: f,
textColor: J,
wrapped: de
}, U = Zo(A), K = h && m && /* @__PURE__ */ s.isValidElement(h) ? /* @__PURE__ */ s.cloneElement(h, {
className: j(U.icon, h.props.className)
}) : h, Q = (O) => {
!E && y && y(O, P), g && g(O);
}, k = (O) => {
x && !E && y && y(O, P), W && W(O);
};
return /* @__PURE__ */ G(et, {
focusRipple: !p,
className: j(U.root, i),
ref: r,
role: "tab",
"aria-selected": E,
disabled: d,
onClick: Q,
onFocus: k,
ownerState: A,
tabIndex: E ? 0 : -1,
...M,
children: [S === "top" || S === "start" ? /* @__PURE__ */ G(s.Fragment, {
children: [K, m]
}) : /* @__PURE__ */ G(s.Fragment, {
children: [m, K]
}), v]
});
});
process.env.NODE_ENV !== "production" && (ot.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* This prop isn't supported.
* Use the `component` prop if you need to change the children structure.
*/
children: Po,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: e.bool,
/**
* If `true`, the keyboard focus ripple is disabled.
* @default false
*/
disableFocusRipple: e.bool,
/**
* If `true`, the ripple effect is disabled.
*
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
* @default false
*/
disableRipple: e.bool,
/**
* The icon to display.
*/
icon: e.oneOfType([e.element, e.string]),
/**
* The position of the icon relative to the label.
* @default 'top'
*/
iconPosition: e.oneOf(["bottom", "end", "start", "top"]),
/**
* The label element.
*/
label: e.node,
/**
* @ignore
*/
onChange: e.func,
/**
* @ignore
*/
onClick: e.func,
/**
* @ignore
*/
onFocus: e.func,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
/**
* You can provide your own value. Otherwise, we fallback to the child position index.
*/
value: e.any,
/**
* Tab labels appear in a single row.
* They can use a second line if needed.
* @default false
*/
wrapped: e.bool
});
export {
$o as K,
Oo as T,
Yo as a,
Jo as b,
ot as c,
Ge as d,
Ye as e,
_o as f,
Xe as g,
w as h,
Qo as i,
ye as j,
Fo as k,
ko as l,
gt as t,
Ke as u
};