welcome-ui/dist/tab-panel-Cc3MfOBM.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { C as q, a as B, c as V, b as X, d as z } from "./WZWDIE3S-CGqoM1Fy.js";
import { b as w } from "./Q5W46E73-5xQblshY.js";
import { b as G, w as J, f as N, c as k, a as _, i as R, j as H, B as Q, u as L, h as K, a9 as U, q as Y, X as Z } from "./U6HHPQDW-CzxyP5H7.js";
import { useCallback as O, useRef as W, useEffect as M, useState as p } from "react";
import { jsx as D } from "react/jsx-runtime";
import { u as ee } from "./ZMWF7ASR-Jc8y_k3t.js";
import { u as te, d as ne } from "./WLZ6H5FH-CuTcX7sR.js";
var A = G(
  [B],
  [q]
), ae = A.useScopedContext, j = A.useProviderContext, $ = A.ScopedContextProvider, ie = "button", oe = k(function({
  store: e,
  getItem: i,
  ...a
}) {
  var l;
  const c = ae();
  e = e || c, R(
    e,
    process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
  );
  const u = H(), n = a.id || u, S = Q(a), I = O(
    (o) => {
      const m = { ...o, dimmed: S };
      return i ? i(m) : m;
    },
    [S, i]
  ), b = a.onClick, s = L((o) => {
    b == null || b(o), !o.defaultPrevented && (e == null || e.setSelectedId(n));
  }), y = e.panels.useState(
    (o) => {
      var m;
      return (m = o.items.find((t) => t.tabId === n)) == null ? void 0 : m.id;
    }
  ), x = u ? a.shouldRegisterItem : !1, C = e.useState((o) => !!n && o.activeId === n), f = e.useState((o) => !!n && o.selectedId === n), P = e.useState((o) => !!e.item(o.activeId)), E = C || f && !P, g = f || ((l = a.accessibleWhenDisabled) != null ? l : !0);
  if (w(
    e.combobox || e.composite,
    "virtualFocus"
  ) && (a = {
    ...a,
    tabIndex: -1
  }), a = {
    id: n,
    role: "tab",
    "aria-selected": f,
    "aria-controls": y || void 0,
    ...a,
    onClick: s
  }, e.composite) {
    const o = {
      id: n,
      accessibleWhenDisabled: g,
      store: e.composite,
      shouldRegisterItem: E && x,
      rowId: a.rowId,
      render: a.render
    };
    a = {
      ...a,
      render: /* @__PURE__ */ D(
        V,
        {
          ...o,
          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ D(V, { ...o, store: e.combobox }) : o.render
        }
      )
    };
  }
  return a = X({
    store: e,
    ...a,
    accessibleWhenDisabled: g,
    getItem: I,
    shouldRegisterItem: x
  }), a;
}), Ie = J(
  N(function(e) {
    const i = oe(e);
    return _(ie, i);
  })
), ce = "div", re = k(
  function({ store: e, ...i }) {
    const a = j();
    e = e || a, R(
      e,
      process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
    );
    const l = e.useState(
      (c) => c.orientation === "both" ? void 0 : c.orientation
    );
    return i = K(
      i,
      (c) => /* @__PURE__ */ D($, { value: e, children: c }),
      [e]
    ), e.composite && (i = {
      focusable: !1,
      ...i
    }), i = {
      role: "tablist",
      "aria-orientation": l,
      ...i
    }, i = ee({ store: e, ...i }), i;
  }
), xe = N(function(e) {
  const i = re(e);
  return _(ce, i);
}), ue = "div", se = k(
  function({
    store: e,
    unmountOnHide: i,
    tabId: a,
    getItem: l,
    scrollRestoration: c,
    scrollElement: u,
    ...n
  }) {
    const S = j();
    e = e || S, R(
      e,
      process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
    );
    const I = W(null), b = H(n.id), s = w(
      e.panels,
      () => {
        var t;
        return a || ((t = e == null ? void 0 : e.panels.item(b)) == null ? void 0 : t.tabId);
      }
    ), y = w(
      e,
      (t) => !!s && t.selectedId === s
    ), x = te({ open: y }), C = w(x, "mounted"), f = W(
      /* @__PURE__ */ new Map()
    ), P = L(() => {
      const t = I.current;
      return t ? u ? typeof u == "function" ? u(t) : "current" in u ? u.current : u : t : null;
    });
    M(() => {
      var t, d;
      if (!c || !C) return;
      const r = P();
      if (!r) return;
      if (c === "reset") {
        r.scroll(0, 0);
        return;
      }
      if (!s) return;
      const v = f.current.get(s);
      r.scroll((t = v == null ? void 0 : v.x) != null ? t : 0, (d = v == null ? void 0 : v.y) != null ? d : 0);
      const h = () => {
        f.current.set(s, {
          x: r.scrollLeft,
          y: r.scrollTop
        });
      };
      return r.addEventListener("scroll", h), () => {
        r.removeEventListener("scroll", h);
      };
    }, [c, C, s, P, e]);
    const [E, g] = p(!1);
    M(() => {
      const t = I.current;
      if (!t) return;
      const d = U(t);
      g(!!d.length);
    }, []);
    const F = O(
      (t) => {
        const d = { ...t, id: b || t.id, tabId: a };
        return l ? l(d) : d;
      },
      [b, a, l]
    ), o = n.onKeyDown, m = L((t) => {
      if (o == null || o(t), t.defaultPrevented || !(e != null && e.composite)) return;
      const r = {
        ArrowLeft: e.previous,
        ArrowRight: e.next,
        Home: e.first,
        End: e.last
      }[t.key];
      if (!r) return;
      const { selectedId: v } = e.getState(), h = r({ activeId: v });
      h && (t.preventDefault(), e.move(h));
    });
    return n = K(
      n,
      (t) => /* @__PURE__ */ D($, { value: e, children: t }),
      [e]
    ), n = {
      id: b,
      role: "tabpanel",
      "aria-labelledby": s || void 0,
      ...n,
      children: i && !C ? null : n.children,
      ref: Y(I, n.ref),
      onKeyDown: m
    }, n = Z({
      // If the tab panel is rendered as part of another composite widget such
      // as combobox, it should not be focusable.
      focusable: !e.composite && !E,
      ...n
    }), n = ne({ store: x, ...n }), n = z({ store: e.panels, ...n, getItem: F }), n;
  }
), Ce = N(function(e) {
  const i = se(e);
  return _(ue, i);
});
export {
  Ie as T,
  xe as a,
  Ce as b
};