@cgi-learning-hub/ui 0.0.1-dev.1708990372 → 0.0.1-dev.1709023966

package/dist/components/lists/TabList.stories.es.js

@@ -0,0 +1,1027 @@
+import { jsx as h, jsxs as ee } from "react/jsx-runtime";
+import { P as t, e as U, _ as p, g as pe, a as he, s as $, b as ve, f as D, h as me, t as ft } from "../../useThemeProps-Dg9Uoq7q.js";
+import * as a from "react";
+import { u as $e } from "../../useTheme-DJEDOopE.js";
+import { u as bt } from "../../useForkRef-DwN_Iz9R.js";
+import { d as _e, a as Ae, o as pt } from "../../ownerWindow-C7EH1lr6.js";
+import { a as ue } from "../../useTimeout-KN97abZR.js";
+import { r as ht } from "../../refType-Hh9tfnoF.js";
+import { c as je } from "../../createSvgIcon-KaSN8JhZ.js";
+import { B as vt } from "../../ButtonBase-B0tkJ9zf.js";
+import { u as te } from "../../useSlotProps-MoAYME1z.js";
+import { T as de } from "../../Tab-C4l6V01S.js";
+let A;
+function ke() {
+  if (A)
+    return A;
+  const e = document.createElement("div"), o = document.createElement("div");
+  return o.style.width = "10px", o.style.height = "1px", e.appendChild(o), e.dir = "rtl", e.style.fontSize = "14px", e.style.width = "4px", e.style.height = "1px", e.style.position = "absolute", e.style.top = "-1000px", e.style.overflow = "scroll", document.body.appendChild(e), A = "reverse", e.scrollLeft > 0 ? A = "default" : (e.scrollLeft = 1, e.scrollLeft === 0 && (A = "negative")), document.body.removeChild(e), A;
+}
+function mt(e, o) {
+  const l = e.scrollLeft;
+  if (o !== "rtl")
+    return l;
+  switch (ke()) {
+    case "negative":
+      return e.scrollWidth - e.clientWidth + l;
+    case "reverse":
+      return e.scrollWidth - e.clientWidth - l;
+    default:
+      return l;
+  }
+}
+const Se = /* @__PURE__ */ a.createContext(null);
+process.env.NODE_ENV !== "production" && (Se.displayName = "TabContext");
+function St() {
+  const [e, o] = a.useState(null);
+  return a.useEffect(() => {
+    o(`mui-p-${Math.round(Math.random() * 1e5)}`);
+  }, []), e;
+}
+function We(e) {
+  const {
+    children: o,
+    value: l
+  } = e, c = St(), s = a.useMemo(() => ({
+    idPrefix: c,
+    value: l
+  }), [c, l]);
+  return /* @__PURE__ */ h(Se.Provider, {
+    value: s,
+    children: o
+  });
+}
+process.env.NODE_ENV !== "production" && (We.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: t.node,
+  /**
+   * The value of the currently selected `Tab`.
+   */
+  value: t.oneOfType([t.number, t.string]).isRequired
+});
+function Ve() {
+  return a.useContext(Se);
+}
+function Ue(e, o) {
+  const {
+    idPrefix: l
+  } = e;
+  return l === null ? null : `${e.idPrefix}-P-${o}`;
+}
+function Fe(e, o) {
+  const {
+    idPrefix: l
+  } = e;
+  return l === null ? null : `${e.idPrefix}-T-${o}`;
+}
+function yt(e) {
+  return (1 + Math.sin(Math.PI * e - Math.PI / 2)) / 2;
+}
+function Tt(e, o, l, c = {}, s = () => {
+}) {
+  const {
+    ease: d = yt,
+    duration: v = 300
+    // standard
+  } = c;
+  let b = null;
+  const m = o[e];
+  let w = !1;
+  const y = () => {
+    w = !0;
+  }, P = (E) => {
+    if (w) {
+      s(new Error("Animation cancelled"));
+      return;
+    }
+    b === null && (b = E);
+    const x = Math.min(1, (E - b) / v);
+    if (o[e] = d(x) * (l - m) + m, x >= 1) {
+      requestAnimationFrame(() => {
+        s(null);
+      });
+      return;
+    }
+    requestAnimationFrame(P);
+  };
+  return m === l ? (s(new Error("Element already at target position")), y) : (requestAnimationFrame(P), y);
+}
+const gt = ["onChange"], Bt = {
+  width: 99,
+  height: 99,
+  position: "absolute",
+  top: -9999,
+  overflow: "scroll"
+};
+function He(e) {
+  const {
+    onChange: o
+  } = e, l = U(e, gt), c = a.useRef(), s = a.useRef(null), d = () => {
+    c.current = s.current.offsetHeight - s.current.clientHeight;
+  };
+  return bt(() => {
+    const v = _e(() => {
+      const m = c.current;
+      d(), m !== c.current && o(c.current);
+    }), b = Ae(s.current);
+    return b.addEventListener("resize", v), () => {
+      v.clear(), b.removeEventListener("resize", v);
+    };
+  }, [o]), a.useEffect(() => {
+    d(), o(c.current);
+  }, [o]), /* @__PURE__ */ h("div", p({
+    style: Bt,
+    ref: s
+  }, l));
+}
+process.env.NODE_ENV !== "production" && (He.propTypes = {
+  onChange: t.func.isRequired
+});
+const wt = je(/* @__PURE__ */ h("path", {
+  d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+}), "KeyboardArrowLeft"), xt = je(/* @__PURE__ */ h("path", {
+  d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+}), "KeyboardArrowRight");
+function Ct(e) {
+  return he("MuiTabScrollButton", e);
+}
+const Et = pe("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]), It = Et, Nt = ["className", "slots", "slotProps", "direction", "orientation", "disabled"], Ot = (e) => {
+  const {
+    classes: o,
+    orientation: l,
+    disabled: c
+  } = e;
+  return me({
+    root: ["root", l, c && "disabled"]
+  }, Ct, o);
+}, Mt = $(vt, {
+  name: "MuiTabScrollButton",
+  slot: "Root",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: l
+    } = e;
+    return [o.root, l.orientation && o[l.orientation]];
+  }
+})(({
+  ownerState: e
+}) => p({
+  width: 40,
+  flexShrink: 0,
+  opacity: 0.8,
+  [`&.${It.disabled}`]: {
+    opacity: 0
+  }
+}, e.orientation === "vertical" && {
+  width: "100%",
+  height: 40,
+  "& svg": {
+    transform: `rotate(${e.isRtl ? -90 : 90}deg)`
+  }
+})), Xe = /* @__PURE__ */ a.forwardRef(function(o, l) {
+  var c, s;
+  const d = ve({
+    props: o,
+    name: "MuiTabScrollButton"
+  }), {
+    className: v,
+    slots: b = {},
+    slotProps: m = {},
+    direction: w
+  } = d, y = U(d, Nt), E = $e().direction === "rtl", x = p({
+    isRtl: E
+  }, d), oe = Ot(x), F = (c = b.StartScrollButtonIcon) != null ? c : wt, T = (s = b.EndScrollButtonIcon) != null ? s : xt, H = te({
+    elementType: F,
+    externalSlotProps: m.startScrollButtonIcon,
+    additionalProps: {
+      fontSize: "small"
+    },
+    ownerState: x
+  }), N = te({
+    elementType: T,
+    externalSlotProps: m.endScrollButtonIcon,
+    additionalProps: {
+      fontSize: "small"
+    },
+    ownerState: x
+  });
+  return /* @__PURE__ */ h(Mt, p({
+    component: "div",
+    className: D(oe.root, v),
+    ref: l,
+    role: null,
+    ownerState: x,
+    tabIndex: null
+  }, y, {
+    children: w === "left" ? /* @__PURE__ */ h(F, p({}, H)) : /* @__PURE__ */ h(T, p({}, N))
+  }));
+});
+process.env.NODE_ENV !== "production" && (Xe.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: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The direction the button should indicate.
+   */
+  direction: t.oneOf(["left", "right"]).isRequired,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: t.bool,
+  /**
+   * The component orientation (layout flow direction).
+   */
+  orientation: t.oneOf(["horizontal", "vertical"]).isRequired,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps: t.shape({
+    endScrollButtonIcon: t.oneOfType([t.func, t.object]),
+    startScrollButtonIcon: t.oneOfType([t.func, t.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: t.shape({
+    EndScrollButtonIcon: t.elementType,
+    StartScrollButtonIcon: t.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
+});
+const Pt = Xe;
+function Rt(e) {
+  return he("MuiTabs", e);
+}
+const zt = pe("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVertical", "centered", "scroller", "fixed", "scrollableX", "scrollableY", "hideScrollbar", "scrollButtons", "scrollButtonsHideMobile", "indicator"]), fe = zt, Lt = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"], Re = (e, o) => e === o ? e.firstChild : o && o.nextElementSibling ? o.nextElementSibling : e.firstChild, ze = (e, o) => e === o ? e.lastChild : o && o.previousElementSibling ? o.previousElementSibling : e.lastChild, Z = (e, o, l) => {
+  let c = !1, s = l(e, o);
+  for (; s; ) {
+    if (s === e.firstChild) {
+      if (c)
+        return;
+      c = !0;
+    }
+    const d = s.disabled || s.getAttribute("aria-disabled") === "true";
+    if (!s.hasAttribute("tabindex") || d)
+      s = l(e, s);
+    else {
+      s.focus();
+      return;
+    }
+  }
+}, Dt = (e) => {
+  const {
+    vertical: o,
+    fixed: l,
+    hideScrollbar: c,
+    scrollableX: s,
+    scrollableY: d,
+    centered: v,
+    scrollButtonsHideMobile: b,
+    classes: m
+  } = e;
+  return me({
+    root: ["root", o && "vertical"],
+    scroller: ["scroller", l && "fixed", c && "hideScrollbar", s && "scrollableX", d && "scrollableY"],
+    flexContainer: ["flexContainer", o && "flexContainerVertical", v && "centered"],
+    indicator: ["indicator"],
+    scrollButtons: ["scrollButtons", b && "scrollButtonsHideMobile"],
+    scrollableX: [s && "scrollableX"],
+    hideScrollbar: [c && "hideScrollbar"]
+  }, Rt, m);
+}, $t = $("div", {
+  name: "MuiTabs",
+  slot: "Root",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: l
+    } = e;
+    return [{
+      [`& .${fe.scrollButtons}`]: o.scrollButtons
+    }, {
+      [`& .${fe.scrollButtons}`]: l.scrollButtonsHideMobile && o.scrollButtonsHideMobile
+    }, o.root, l.vertical && o.vertical];
+  }
+})(({
+  ownerState: e,
+  theme: o
+}) => p({
+  overflow: "hidden",
+  minHeight: 48,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: "touch",
+  display: "flex"
+}, e.vertical && {
+  flexDirection: "column"
+}, e.scrollButtonsHideMobile && {
+  [`& .${fe.scrollButtons}`]: {
+    [o.breakpoints.down("sm")]: {
+      display: "none"
+    }
+  }
+})), _t = $("div", {
+  name: "MuiTabs",
+  slot: "Scroller",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: l
+    } = e;
+    return [o.scroller, l.fixed && o.fixed, l.hideScrollbar && o.hideScrollbar, l.scrollableX && o.scrollableX, l.scrollableY && o.scrollableY];
+  }
+})(({
+  ownerState: e
+}) => p({
+  position: "relative",
+  display: "inline-block",
+  flex: "1 1 auto",
+  whiteSpace: "nowrap"
+}, e.fixed && {
+  overflowX: "hidden",
+  width: "100%"
+}, e.hideScrollbar && {
+  // Hide dimensionless scrollbar on macOS
+  scrollbarWidth: "none",
+  // Firefox
+  "&::-webkit-scrollbar": {
+    display: "none"
+    // Safari + Chrome
+  }
+}, e.scrollableX && {
+  overflowX: "auto",
+  overflowY: "hidden"
+}, e.scrollableY && {
+  overflowY: "auto",
+  overflowX: "hidden"
+})), At = $("div", {
+  name: "MuiTabs",
+  slot: "FlexContainer",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: l
+    } = e;
+    return [o.flexContainer, l.vertical && o.flexContainerVertical, l.centered && o.centered];
+  }
+})(({
+  ownerState: e
+}) => p({
+  display: "flex"
+}, e.vertical && {
+  flexDirection: "column"
+}, e.centered && {
+  justifyContent: "center"
+})), jt = $("span", {
+  name: "MuiTabs",
+  slot: "Indicator",
+  overridesResolver: (e, o) => o.indicator
+})(({
+  ownerState: e,
+  theme: o
+}) => p({
+  position: "absolute",
+  height: 2,
+  bottom: 0,
+  width: "100%",
+  transition: o.transitions.create()
+}, e.indicatorColor === "primary" && {
+  backgroundColor: (o.vars || o).palette.primary.main
+}, e.indicatorColor === "secondary" && {
+  backgroundColor: (o.vars || o).palette.secondary.main
+}, e.vertical && {
+  height: "100%",
+  width: 2,
+  right: 0
+})), kt = $(He)({
+  overflowX: "auto",
+  overflowY: "hidden",
+  // Hide dimensionless scrollbar on macOS
+  scrollbarWidth: "none",
+  // Firefox
+  "&::-webkit-scrollbar": {
+    display: "none"
+    // Safari + Chrome
+  }
+}), Le = {};
+let De = !1;
+const Ye = /* @__PURE__ */ a.forwardRef(function(o, l) {
+  const c = ve({
+    props: o,
+    name: "MuiTabs"
+  }), s = $e(), d = s.direction === "rtl", {
+    "aria-label": v,
+    "aria-labelledby": b,
+    action: m,
+    centered: w = !1,
+    children: y,
+    className: P,
+    component: E = "div",
+    allowScrollButtonsMobile: x = !1,
+    indicatorColor: oe = "primary",
+    onChange: F,
+    orientation: T = "horizontal",
+    ScrollButtonComponent: H = Pt,
+    scrollButtons: N = "auto",
+    selectionFollowsFocus: Je,
+    slots: X = {},
+    slotProps: ye = {},
+    TabIndicatorProps: re = {},
+    TabScrollButtonProps: Y = {},
+    textColor: Te = "primary",
+    value: _,
+    variant: ne = "standard",
+    visibleScrollbar: le = !1
+  } = c, Qe = U(c, Lt), g = ne === "scrollable", B = T === "vertical", j = B ? "scrollTop" : "scrollLeft", q = B ? "top" : "left", K = B ? "bottom" : "right", se = B ? "clientHeight" : "clientWidth", k = B ? "height" : "width", R = p({}, c, {
+    component: E,
+    allowScrollButtonsMobile: x,
+    indicatorColor: oe,
+    orientation: T,
+    vertical: B,
+    scrollButtons: N,
+    textColor: Te,
+    variant: ne,
+    visibleScrollbar: le,
+    fixed: !g,
+    hideScrollbar: g && !le,
+    scrollableX: g && !B,
+    scrollableY: g && B,
+    centered: w && !g,
+    scrollButtonsHideMobile: !x
+  }), O = Dt(R), Ze = te({
+    elementType: X.StartScrollButtonIcon,
+    externalSlotProps: ye.startScrollButtonIcon,
+    ownerState: R
+  }), et = te({
+    elementType: X.EndScrollButtonIcon,
+    externalSlotProps: ye.endScrollButtonIcon,
+    ownerState: R
+  });
+  process.env.NODE_ENV !== "production" && w && g && console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties at the same time on a `Tabs` component.');
+  const [ge, tt] = a.useState(!1), [z, Be] = a.useState(Le), [we, ot] = a.useState(!1), [xe, rt] = a.useState(!1), [Ce, nt] = a.useState(!1), [Ee, lt] = a.useState({
+    overflow: "hidden",
+    scrollbarWidth: 0
+  }), G = /* @__PURE__ */ new Map(), I = a.useRef(null), L = a.useRef(null), Ie = () => {
+    const r = I.current;
+    let n;
+    if (r) {
+      const u = r.getBoundingClientRect();
+      n = {
+        clientWidth: r.clientWidth,
+        scrollLeft: r.scrollLeft,
+        scrollTop: r.scrollTop,
+        scrollLeftNormalized: mt(r, s.direction),
+        scrollWidth: r.scrollWidth,
+        top: u.top,
+        bottom: u.bottom,
+        left: u.left,
+        right: u.right
+      };
+    }
+    let i;
+    if (r && _ !== !1) {
+      const u = L.current.children;
+      if (u.length > 0) {
+        const f = u[G.get(_)];
+        process.env.NODE_ENV !== "production" && (f || console.error(["MUI: The `value` provided to the Tabs component is invalid.", `None of the Tabs' children match with "${_}".`, G.keys ? `You can provide one of the following values: ${Array.from(G.keys()).join(", ")}.` : null].join(`
+`))), i = f ? f.getBoundingClientRect() : null, process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && !De && i && i.width === 0 && i.height === 0 && // if the whole Tabs component is hidden, don't warn
+        n.clientWidth !== 0 && (n = null, console.error(["MUI: The `value` provided to the Tabs component is invalid.", `The Tab with this \`value\` ("${_}") 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(`
+`)), De = !0);
+      }
+    }
+    return {
+      tabsMeta: n,
+      tabMeta: i
+    };
+  }, W = ue(() => {
+    const {
+      tabsMeta: r,
+      tabMeta: n
+    } = Ie();
+    let i = 0, u;
+    if (B)
+      u = "top", n && r && (i = n.top - r.top + r.scrollTop);
+    else if (u = d ? "right" : "left", n && r) {
+      const S = d ? r.scrollLeftNormalized + r.clientWidth - r.scrollWidth : r.scrollLeft;
+      i = (d ? -1 : 1) * (n[u] - r[u] + S);
+    }
+    const f = {
+      [u]: i,
+      // May be wrong until the font is loaded.
+      [k]: n ? n[k] : 0
+    };
+    if (isNaN(z[u]) || isNaN(z[k]))
+      Be(f);
+    else {
+      const S = Math.abs(z[u] - f[u]), C = Math.abs(z[k] - f[k]);
+      (S >= 1 || C >= 1) && Be(f);
+    }
+  }), ae = (r, {
+    animation: n = !0
+  } = {}) => {
+    n ? Tt(j, I.current, r, {
+      duration: s.transitions.duration.standard
+    }) : I.current[j] = r;
+  }, Ne = (r) => {
+    let n = I.current[j];
+    B ? n += r : (n += r * (d ? -1 : 1), n *= d && ke() === "reverse" ? -1 : 1), ae(n);
+  }, Oe = () => {
+    const r = I.current[se];
+    let n = 0;
+    const i = Array.from(L.current.children);
+    for (let u = 0; u < i.length; u += 1) {
+      const f = i[u];
+      if (n + f[se] > r) {
+        u === 0 && (n = r);
+        break;
+      }
+      n += f[se];
+    }
+    return n;
+  }, st = () => {
+    Ne(-1 * Oe());
+  }, at = () => {
+    Ne(Oe());
+  }, ct = a.useCallback((r) => {
+    lt({
+      overflow: null,
+      scrollbarWidth: r
+    });
+  }, []), it = () => {
+    const r = {};
+    r.scrollbarSizeListener = g ? /* @__PURE__ */ h(kt, {
+      onChange: ct,
+      className: D(O.scrollableX, O.hideScrollbar)
+    }) : null;
+    const i = g && (N === "auto" && (we || xe) || N === !0);
+    return r.scrollButtonStart = i ? /* @__PURE__ */ h(H, p({
+      slots: {
+        StartScrollButtonIcon: X.StartScrollButtonIcon
+      },
+      slotProps: {
+        startScrollButtonIcon: Ze
+      },
+      orientation: T,
+      direction: d ? "right" : "left",
+      onClick: st,
+      disabled: !we
+    }, Y, {
+      className: D(O.scrollButtons, Y.className)
+    })) : null, r.scrollButtonEnd = i ? /* @__PURE__ */ h(H, p({
+      slots: {
+        EndScrollButtonIcon: X.EndScrollButtonIcon
+      },
+      slotProps: {
+        endScrollButtonIcon: et
+      },
+      orientation: T,
+      direction: d ? "left" : "right",
+      onClick: at,
+      disabled: !xe
+    }, Y, {
+      className: D(O.scrollButtons, Y.className)
+    })) : null, r;
+  }, Me = ue((r) => {
+    const {
+      tabsMeta: n,
+      tabMeta: i
+    } = Ie();
+    if (!(!i || !n)) {
+      if (i[q] < n[q]) {
+        const u = n[j] + (i[q] - n[q]);
+        ae(u, {
+          animation: r
+        });
+      } else if (i[K] > n[K]) {
+        const u = n[j] + (i[K] - n[K]);
+        ae(u, {
+          animation: r
+        });
+      }
+    }
+  }), J = ue(() => {
+    g && N !== !1 && nt(!Ce);
+  });
+  a.useEffect(() => {
+    const r = _e(() => {
+      I.current && W();
+    });
+    let n;
+    const i = (S) => {
+      S.forEach((C) => {
+        C.removedNodes.forEach((V) => {
+          var M;
+          (M = n) == null || M.unobserve(V);
+        }), C.addedNodes.forEach((V) => {
+          var M;
+          (M = n) == null || M.observe(V);
+        });
+      }), r(), J();
+    }, u = Ae(I.current);
+    u.addEventListener("resize", r);
+    let f;
+    return typeof ResizeObserver < "u" && (n = new ResizeObserver(r), Array.from(L.current.children).forEach((S) => {
+      n.observe(S);
+    })), typeof MutationObserver < "u" && (f = new MutationObserver(i), f.observe(L.current, {
+      childList: !0
+    })), () => {
+      var S, C;
+      r.clear(), u.removeEventListener("resize", r), (S = f) == null || S.disconnect(), (C = n) == null || C.disconnect();
+    };
+  }, [W, J]), a.useEffect(() => {
+    const r = Array.from(L.current.children), n = r.length;
+    if (typeof IntersectionObserver < "u" && n > 0 && g && N !== !1) {
+      const i = r[0], u = r[n - 1], f = {
+        root: I.current,
+        threshold: 0.99
+      }, S = (ie) => {
+        ot(!ie[0].isIntersecting);
+      }, C = new IntersectionObserver(S, f);
+      C.observe(i);
+      const V = (ie) => {
+        rt(!ie[0].isIntersecting);
+      }, M = new IntersectionObserver(V, f);
+      return M.observe(u), () => {
+        C.disconnect(), M.disconnect();
+      };
+    }
+  }, [g, N, Ce, y == null ? void 0 : y.length]), a.useEffect(() => {
+    tt(!0);
+  }, []), a.useEffect(() => {
+    W();
+  }), a.useEffect(() => {
+    Me(Le !== z);
+  }, [Me, z]), a.useImperativeHandle(m, () => ({
+    updateIndicator: W,
+    updateScrollButtons: J
+  }), [W, J]);
+  const Pe = /* @__PURE__ */ h(jt, p({}, re, {
+    className: D(O.indicator, re.className),
+    ownerState: R,
+    style: p({}, z, re.style)
+  }));
+  let Q = 0;
+  const ut = a.Children.map(y, (r) => {
+    if (!/* @__PURE__ */ a.isValidElement(r))
+      return null;
+    process.env.NODE_ENV !== "production" && ft.isFragment(r) && console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join(`
+`));
+    const n = r.props.value === void 0 ? Q : r.props.value;
+    G.set(n, Q);
+    const i = n === _;
+    return Q += 1, /* @__PURE__ */ a.cloneElement(r, p({
+      fullWidth: ne === "fullWidth",
+      indicator: i && !ge && Pe,
+      selected: i,
+      selectionFollowsFocus: Je,
+      onChange: F,
+      textColor: Te,
+      value: n
+    }, Q === 1 && _ === !1 && !r.props.tabIndex ? {
+      tabIndex: 0
+    } : {}));
+  }), dt = (r) => {
+    const n = L.current, i = pt(n).activeElement;
+    if (i.getAttribute("role") !== "tab")
+      return;
+    let f = T === "horizontal" ? "ArrowLeft" : "ArrowUp", S = T === "horizontal" ? "ArrowRight" : "ArrowDown";
+    switch (T === "horizontal" && d && (f = "ArrowRight", S = "ArrowLeft"), r.key) {
+      case f:
+        r.preventDefault(), Z(n, i, ze);
+        break;
+      case S:
+        r.preventDefault(), Z(n, i, Re);
+        break;
+      case "Home":
+        r.preventDefault(), Z(n, null, Re);
+        break;
+      case "End":
+        r.preventDefault(), Z(n, null, ze);
+        break;
+    }
+  }, ce = it();
+  return /* @__PURE__ */ ee($t, p({
+    className: D(O.root, P),
+    ownerState: R,
+    ref: l,
+    as: E
+  }, Qe, {
+    children: [ce.scrollButtonStart, ce.scrollbarSizeListener, /* @__PURE__ */ ee(_t, {
+      className: O.scroller,
+      ownerState: R,
+      style: {
+        overflow: Ee.overflow,
+        [B ? `margin${d ? "Left" : "Right"}` : "marginBottom"]: le ? void 0 : -Ee.scrollbarWidth
+      },
+      ref: I,
+      children: [/* @__PURE__ */ h(At, {
+        "aria-label": v,
+        "aria-labelledby": b,
+        "aria-orientation": T === "vertical" ? "vertical" : null,
+        className: O.flexContainer,
+        ownerState: R,
+        onKeyDown: dt,
+        ref: L,
+        role: "tablist",
+        children: ut
+      }), ge && Pe]
+    }), ce.scrollButtonEnd]
+  }));
+});
+process.env.NODE_ENV !== "production" && (Ye.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: ht,
+  /**
+   * 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: t.bool,
+  /**
+   * The label for the Tabs as a string.
+   */
+  "aria-label": t.string,
+  /**
+   * An id or list of ids separated by a space that label the Tabs.
+   */
+  "aria-labelledby": t.string,
+  /**
+   * If `true`, the tabs are centered.
+   * This prop is intended for large views.
+   * @default false
+   */
+  centered: t.bool,
+  /**
+   * The content of the component.
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: t.elementType,
+  /**
+   * Determines the color of the indicator.
+   * @default 'primary'
+   */
+  indicatorColor: t.oneOfType([t.oneOf(["primary", "secondary"]), t.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: t.func,
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: t.oneOf(["horizontal", "vertical"]),
+  /**
+   * The component used to render the scroll buttons.
+   * @default TabScrollButton
+   */
+  ScrollButtonComponent: t.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: t.oneOf(["auto", !1, !0]),
+  /**
+   * If `true` the selected tab changes on focus. Otherwise it only
+   * changes on activation.
+   */
+  selectionFollowsFocus: t.bool,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps: t.shape({
+    endScrollButtonIcon: t.oneOfType([t.func, t.object]),
+    startScrollButtonIcon: t.oneOfType([t.func, t.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: t.shape({
+    EndScrollButtonIcon: t.elementType,
+    StartScrollButtonIcon: t.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  /**
+   * Props applied to the tab indicator element.
+   * @default  {}
+   */
+  TabIndicatorProps: t.object,
+  /**
+   * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
+   * @default {}
+   */
+  TabScrollButtonProps: t.object,
+  /**
+   * Determines the color of the `Tab`.
+   * @default 'primary'
+   */
+  textColor: t.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: t.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: t.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: t.bool
+});
+const Wt = Ye, Vt = ["children"], qe = /* @__PURE__ */ a.forwardRef(function(o, l) {
+  const {
+    children: c
+  } = o, s = U(o, Vt), d = Ve();
+  if (d === null)
+    throw new TypeError("No TabContext provided");
+  const v = a.Children.map(c, (b) => /* @__PURE__ */ a.isValidElement(b) ? /* @__PURE__ */ a.cloneElement(b, {
+    // SOMEDAY: `Tabs` will set those themselves
+    "aria-controls": Ue(d, b.props.value),
+    id: Fe(d, b.props.value)
+  }) : null);
+  return /* @__PURE__ */ h(Wt, p({}, s, {
+    ref: l,
+    value: d.value,
+    children: v
+  }));
+});
+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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A list of `<Tab />` elements.
+   */
+  children: t.node
+});
+const Ke = qe;
+function Ut(e) {
+  return he("MuiTabPanel", e);
+}
+pe("MuiTabPanel", ["root"]);
+const Ft = ["children", "className", "value"], Ht = (e) => {
+  const {
+    classes: o
+  } = e;
+  return me({
+    root: ["root"]
+  }, Ut, o);
+}, Xt = $("div", {
+  name: "MuiTabPanel",
+  slot: "Root",
+  overridesResolver: (e, o) => o.root
+})(({
+  theme: e
+}) => ({
+  padding: e.spacing(3)
+})), Ge = /* @__PURE__ */ a.forwardRef(function(o, l) {
+  const c = ve({
+    props: o,
+    name: "MuiTabPanel"
+  }), {
+    children: s,
+    className: d,
+    value: v
+  } = c, b = U(c, Ft), m = p({}, c), w = Ht(m), y = Ve();
+  if (y === null)
+    throw new TypeError("No TabContext provided");
+  const P = Ue(y, v), E = Fe(y, v);
+  return /* @__PURE__ */ h(Xt, p({
+    "aria-labelledby": E,
+    className: D(w.root, d),
+    hidden: v !== y.value,
+    id: P,
+    ref: l,
+    role: "tabpanel",
+    ownerState: m
+  }, b, {
+    children: v === y.value && s
+  }));
+});
+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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  /**
+   * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when
+   * no `value` was passed to `Tab`.
+   */
+  value: t.string.isRequired
+});
+const be = Ge, so = {
+  title: "Components/Lists/TabList",
+  component: Ke,
+  argTypes: {
+    // Définissez ici vos paramètres d'histoires spécifiques aux arguments (args).
+    value: {
+      options: ["1", "2", "3"],
+      control: { type: "select" }
+    }
+  }
+}, Yt = (e) => /* @__PURE__ */ ee(We, { value: e.value, children: [
+  /* @__PURE__ */ ee(Ke, { onChange: e.handleChange, "aria-label": "lab API tabs example", children: [
+    /* @__PURE__ */ h(de, { label: "Utilisateurs", value: "1" }),
+    /* @__PURE__ */ h(de, { label: "Groupes", value: "2" }),
+    /* @__PURE__ */ h(de, { label: "Demandes d'inscription", value: "3" })
+  ] }),
+  /* @__PURE__ */ h(be, { value: "1", children: "Utilisateurs" }),
+  /* @__PURE__ */ h(be, { value: "2", children: "Groupes" }),
+  /* @__PURE__ */ h(be, { value: "3", children: "Demandes d'inscription" })
+] }), qt = Yt.bind({});
+qt.args = {
+  value: "1",
+  handleChange: (e, o) => !0
+};
+export {
+  qt as Default,
+  so as default
+};