welcome-ui/dist/Tabs.js

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

"use client";
import { jsx as P, jsxs as fe } from "react/jsx-runtime";
import { C as ee, a as te, h as U, b as be, j as pe } from "./SBSPVDDI-CW8jwL0u.js";
import { e as oe, v as ve, f as B, c as W, b as j, _ as H, i as K, w as se, A as Ie, d as h, a as v, u as V, x as ne, ad as Se, p as xe, W as he, F as _e, G as D, H as O, I as k, S as J, K as Q } from "./OE2EFRVA-C3721cM3.js";
import { u as A, m as ge, o as X, c as Ce, s as z, a as w, f as Pe, b as re, d as Y } from "./RTNCFSKZ-P4icqVD0.js";
import ae, { useCallback as ce, useRef as F, useEffect as Z, useState as q, createContext as ie, useMemo as Te, cloneElement as Ee, forwardRef as le } from "react";
import { c as M } from "./index-PAaZGbyz.js";
import { f as we } from "./forwardRefWithAs-8eP3ZN15.js";
import { u as Re, b as ye } from "./OLVWQA7U-CQsIDzlF.js";
import { m as $e, g as Ne, u as Le } from "./useForkRef-D807AV7D.js";
import { u as Oe, a as ke } from "./use-viewport-CgrficYB.js";
import { u as ze, d as Ae } from "./T22PY7TE-BxbmImwX.js";
import { P as De, a as Me } from "./Y67KZUMI-CtXJ_hZt.js";
import { c as Ve, a as Fe, u as Be } from "./B7UTNDHN-C-gORHYH.js";
var G = oe(
  [te],
  [ee]
), We = G.useScopedContext, de = G.useProviderContext, ue = G.ScopedContextProvider, je = "button", He = W(function(r) {
  var t = r, {
    store: e,
    getItem: s
  } = t, n = H(t, [
    "store",
    "getItem"
  ]), m;
  const i = We();
  e = e || i, K(
    e,
    process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
  );
  const d = se(), a = n.id || d, _ = Ie(n), c = ce(
    (f) => {
      const R = h(v({}, f), { dimmed: _ });
      return s ? s(R) : R;
    },
    [_, s]
  ), b = n.onClick, x = V((f) => {
    b == null || b(f), !f.defaultPrevented && (e == null || e.setSelectedId(a));
  }), u = e.panels.useState(
    (f) => {
      var R;
      return (R = f.items.find((l) => l.tabId === a)) == null ? void 0 : R.id;
    }
  ), p = d ? n.shouldRegisterItem : !1, I = e.useState((f) => !!a && f.activeId === a), S = e.useState((f) => !!a && f.selectedId === a), T = e.useState((f) => !!e.item(f.activeId)), g = I || S && !T, y = S || ((m = n.accessibleWhenDisabled) != null ? m : !0);
  if (A(
    e.combobox || e.composite,
    "virtualFocus"
  ) && (n = h(v({}, n), {
    tabIndex: -1
  })), n = h(v({
    id: a,
    role: "tab",
    "aria-selected": S,
    "aria-controls": u || void 0
  }, n), {
    onClick: x
  }), e.composite) {
    const f = {
      id: a,
      accessibleWhenDisabled: y,
      store: e.composite,
      shouldRegisterItem: g && p,
      rowId: n.rowId,
      render: n.render
    };
    n = h(v({}, n), {
      render: /* @__PURE__ */ P(
        U,
        h(v({}, f), {
          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ P(U, h(v({}, f), { store: e.combobox })) : f.render
        })
      )
    });
  }
  return n = be(h(v({
    store: e
  }, n), {
    accessibleWhenDisabled: y,
    getItem: c,
    shouldRegisterItem: p
  })), n;
}), Ke = ve(
  B(function(r) {
    const t = He(r);
    return j(je, t);
  })
), qe = "div", Ge = W(
  function(r) {
    var t = r, { store: e } = t, s = H(t, ["store"]);
    const n = de();
    e = e || n, K(
      e,
      process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
    );
    const m = e.useState(
      (i) => i.orientation === "both" ? void 0 : i.orientation
    );
    return s = ne(
      s,
      (i) => /* @__PURE__ */ P(ue, { value: e, children: i }),
      [e]
    ), e.composite && (s = v({
      focusable: !1
    }, s)), s = v({
      role: "tablist",
      "aria-orientation": m
    }, s), s = Re(v({ store: e }, s)), s;
  }
), Ue = B(function(r) {
  const t = Ge(r);
  return j(qe, t);
}), Je = "div", Qe = W(
  function(r) {
    var t = r, {
      store: e,
      unmountOnHide: s,
      tabId: n,
      getItem: m,
      scrollRestoration: i,
      scrollElement: d
    } = t, a = H(t, [
      "store",
      "unmountOnHide",
      "tabId",
      "getItem",
      "scrollRestoration",
      "scrollElement"
    ]);
    const _ = de();
    e = e || _, K(
      e,
      process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
    );
    const c = F(null), b = se(a.id), x = A(
      e.panels,
      () => {
        var l;
        return n || ((l = e == null ? void 0 : e.panels.item(b)) == null ? void 0 : l.tabId);
      }
    ), u = A(
      e,
      (l) => !!x && l.selectedId === x
    ), p = ze({ open: u }), I = A(p, "mounted"), S = F(
      /* @__PURE__ */ new Map()
    ), T = V(() => {
      const l = c.current;
      return l ? d ? typeof d == "function" ? d(l) : "current" in d ? d.current : d : l : null;
    });
    Z(() => {
      var l, E;
      if (!i || !I) return;
      const C = T();
      if (!C) return;
      if (i === "reset") {
        C.scroll(0, 0);
        return;
      }
      if (!x) return;
      const $ = S.current.get(x);
      C.scroll((l = $ == null ? void 0 : $.x) != null ? l : 0, (E = $ == null ? void 0 : $.y) != null ? E : 0);
      const L = () => {
        S.current.set(x, {
          x: C.scrollLeft,
          y: C.scrollTop
        });
      };
      return C.addEventListener("scroll", L), () => {
        C.removeEventListener("scroll", L);
      };
    }, [i, I, x, T, e]);
    const [g, y] = q(!1);
    Z(() => {
      const l = c.current;
      if (!l) return;
      const E = Se(l);
      y(!!E.length);
    }, []);
    const N = ce(
      (l) => {
        const E = h(v({}, l), { id: b || l.id, tabId: n });
        return m ? m(E) : E;
      },
      [b, n, m]
    ), f = a.onKeyDown, R = V((l) => {
      if (f == null || f(l), l.defaultPrevented || !(e != null && e.composite)) return;
      const C = {
        ArrowLeft: e.previous,
        ArrowRight: e.next,
        Home: e.first,
        End: e.last
      }[l.key];
      if (!C) return;
      const { selectedId: $ } = e.getState(), L = C({ activeId: $ });
      L && (l.preventDefault(), e.move(L));
    });
    return a = ne(
      a,
      (l) => /* @__PURE__ */ P(ue, { value: e, children: l }),
      [e]
    ), a = h(v({
      id: b,
      role: "tabpanel",
      "aria-labelledby": x || void 0
    }, a), {
      children: s && !I ? null : a.children,
      ref: xe(c, a.ref),
      onKeyDown: R
    }), a = he(v({
      // If the tab panel is rendered as part of another composite widget such
      // as combobox, it should not be focusable.
      focusable: !e.composite && !g
    }, a)), a = Ae(v({ store: p }, a)), a = pe(h(v({ store: e.panels }, a), { getItem: N })), a;
  }
), Xe = B(function(r) {
  const t = Qe(r);
  return j(Je, t);
}), Ye = oe(
  [Me, te],
  [De, ee]
), Ze = Ye.useContext;
ie(!1);
ie(null);
function et(o = {}) {
  var r = o, {
    composite: t,
    combobox: e
  } = r, s = _e(r, [
    "composite",
    "combobox"
  ]);
  const n = [
    "items",
    "renderedItems",
    "moves",
    "orientation",
    "virtualFocus",
    "includesBaseElement",
    "baseElement",
    "focusLoop",
    "focusShift",
    "focusWrap"
  ], m = ge(
    s.store,
    X(t, n),
    X(e, n)
  ), i = m == null ? void 0 : m.getState(), d = Ve(D(k({}, s), {
    store: m,
    // We need to explicitly set the default value of `includesBaseElement` to
    // `false` since we don't want the composite store to default it to `true`
    // when the activeId state is null, which could be the case when rendering
    // combobox with tab.
    includesBaseElement: O(
      s.includesBaseElement,
      i == null ? void 0 : i.includesBaseElement,
      !1
    ),
    orientation: O(
      s.orientation,
      i == null ? void 0 : i.orientation,
      "horizontal"
    ),
    focusLoop: O(s.focusLoop, i == null ? void 0 : i.focusLoop, !0)
  })), a = Fe(), _ = D(k({}, d.getState()), {
    selectedId: O(
      s.selectedId,
      i == null ? void 0 : i.selectedId,
      s.defaultSelectedId
    ),
    selectOnMove: O(
      s.selectOnMove,
      i == null ? void 0 : i.selectOnMove,
      !0
    )
  }), c = Ce(_, d, m);
  z(
    c,
    () => w(c, ["moves"], () => {
      const { activeId: u, selectOnMove: p } = c.getState();
      if (!p || !u) return;
      const I = d.item(u);
      I && (I.dimmed || I.disabled || c.setState("selectedId", I.id));
    })
  );
  let b = !0;
  z(
    c,
    () => Pe(c, ["selectedId"], (u, p) => {
      if (!b) {
        b = !0;
        return;
      }
      t && u.selectedId === p.selectedId || c.setState("activeId", u.selectedId);
    })
  ), z(
    c,
    () => w(c, ["selectedId", "renderedItems"], (u) => {
      if (u.selectedId !== void 0) return;
      const { activeId: p, renderedItems: I } = c.getState(), S = d.item(p);
      if (S && !S.disabled && !S.dimmed)
        c.setState("selectedId", S.id);
      else {
        const T = I.find(
          (g) => !g.disabled && !g.dimmed
        );
        c.setState("selectedId", T == null ? void 0 : T.id);
      }
    })
  ), z(
    c,
    () => w(c, ["renderedItems"], (u) => {
      const p = u.renderedItems;
      if (p.length)
        return w(a, ["renderedItems"], (I) => {
          const S = I.renderedItems;
          S.some((g) => !g.tabId) && S.forEach((g, y) => {
            if (g.tabId) return;
            const N = p[y];
            N && a.renderItem(D(k({}, g), { tabId: N.id }));
          });
        });
    })
  );
  let x = null;
  return z(c, () => {
    const u = () => {
      x = c.getState().selectedId;
    }, p = () => {
      b = !1, c.setState("selectedId", x);
    };
    if (t && "setSelectElement" in t)
      return J(
        w(t, ["value"], u),
        w(t, ["mounted"], p)
      );
    if (e)
      return J(
        w(e, ["selectedValue"], u),
        w(e, ["mounted"], p)
      );
  }), D(k(k({}, d), c), {
    panels: a,
    setSelectedId: (u) => c.setState("selectedId", u),
    select: (u) => {
      c.setState("selectedId", u), d.move(u);
    }
  });
}
function tt(o, r, t) {
  Q(r, [t.composite, t.combobox]), o = Be(o, r, t), Y(o, t, "selectedId", "setSelectedId"), Y(o, t, "selectOnMove");
  const [e, s] = re(() => o.panels, {});
  return Q(s, [o, s]), Object.assign(
    Te(() => h(v({}, o), { panels: e }), [o, e]),
    { composite: t.composite, combobox: t.combobox }
  );
}
function Ot(o = {}) {
  const r = ye(), t = Ze() || r;
  o = h(v({}, o), {
    composite: o.composite !== void 0 ? o.composite : t,
    combobox: o.combobox !== void 0 ? o.combobox : r
  });
  const [e, s] = re(et, o);
  return tt(e, s, o);
}
const me = (o) => {
  if (!o || typeof window > "u") return 1;
  const r = Number(window.getComputedStyle(o).scale);
  return isNaN(r) ? me(o.parentElement) : r;
};
function ot(o, r) {
  const [t, e] = q(null), s = ae.Children.map(r, (n) => n.props.id === o ? Ee(n, {
    ...n.props,
    ref: $e(e, Ne(n))
  }) : n);
  return { activeTab: t, tabs: s };
}
const st = "_root_102tt_2", nt = {
  root: st
};
function rt({ activeTab: o, listRef: r, orientation: t }) {
  const [e, s] = q({}), { height: n, width: m } = Oe();
  return ke(() => {
    const i = r.current;
    if (!i || !o) return;
    const d = i.getBoundingClientRect(), a = o.getBoundingClientRect(), _ = me(i);
    if (t === "vertical") {
      const c = a.top - d.top, b = a.height;
      s({
        offset: c,
        orientation: t,
        size: b
      });
    } else {
      const c = (a.left - d.left + i.scrollLeft) / _, b = a.width / _;
      s({
        offset: isNaN(c) ? 0 : c,
        orientation: t,
        size: isNaN(b) ? 0 : b
      });
    }
  }, [r, o, m, n, t]), e;
}
const at = M(nt), ct = ({ activeTab: o, listRef: r, orientation: t }) => {
  const e = rt({ activeTab: o, listRef: r, orientation: t }), s = {
    "--active-bar-offset": `${e.offset}px`,
    "--active-bar-size": `${e.size}px`
  };
  return /* @__PURE__ */ P("span", { className: at("root", `orientation-${t}`), style: s });
}, it = "_root_axn0q_2", lt = {
  root: it,
  "size-md": "_size-md_axn0q_18",
  "size-sm": "_size-sm_axn0q_21"
}, dt = M(lt), ut = le(
  ({ children: o, className: r, size: t = "md", store: e, ...s }, n) => {
    const m = F(), [, i] = Le(n, m), { orientation: d, selectedId: a } = A(e), { activeTab: _, tabs: c } = ot(a, o), b = ae.Children.count(o) > 1;
    return /* @__PURE__ */ fe(
      Ue,
      {
        className: dt("root", `size-${t}`, r),
        ref: i,
        store: e,
        ...s,
        children: [
          c,
          b ? /* @__PURE__ */ P(ct, { activeTab: _, listRef: m, orientation: d }) : null
        ]
      }
    );
  }
), mt = "_root_1kepd_2", ft = {
  root: mt
}, bt = M(ft), pt = le(
  ({ children: o, store: r, tabId: t, ...e }, s) => /* @__PURE__ */ P(Xe, { className: bt("root"), ref: s, store: r, tabId: t, ...e, children: o })
), vt = "_root_1j27o_2", It = {
  root: vt
}, St = M(It), xt = we(
  ({ as: o, children: r, className: t, id: e, store: s, ...n }, m) => /* @__PURE__ */ P(
    Ke,
    {
      className: St("root", t),
      id: e,
      ref: m,
      render: o ? /* @__PURE__ */ P(o, {}) : void 0,
      store: s,
      ...n,
      children: r
    }
  )
), kt = Object.assign(xt, { List: ut, Panel: pt });
export {
  kt as Tab,
  xt as TabComponent,
  Ot as useTab
};