welcome-ui/dist/Tabs.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as $ } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { forwardRef as W } from "./System.mjs";
import z, { th as S, system as he, css as k } from "@xstyled/styled-components";
import { C as ne, a as re, d as Q, u as ge, e as Te } from "./P2CTZE2T-1n7Xlf8m.mjs";
import { t as ae, z as Pe, A as D, B as j, C as A, P as Z, d as g, g as p, G as ee, v as Ce, f as K, c as G, h as U, _ as X, i as Y, w as ie, l as $e, b as F, D as ce, a9 as ye, e as we, m as Ee } from "./LVA2YJMS-B8X1PCyC.mjs";
import { c as _e, b as Re, u as Le, a as Ne } from "./ITI7HKP4-DKM_MiJK.mjs";
import { e as Be, f as je } from "./VGCJ63VH-C4H4_vtu.mjs";
import { m as Ae, o as te, c as Oe, s as O, d as E, g as ke, a as le, b as oe, u as V } from "./YV4JVR4I-BLeUul5N.mjs";
import { createContext as de, useMemo as De, useCallback as ue, useRef as M, useEffect as se, useState as q, Children as Ve, Fragment as ze, cloneElement as Fe } from "react";
import { u as Me } from "./use-fork-ref-CUZErtAC.mjs";
import { u as He } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
import { u as We } from "./use-viewport-CWpjoHXy.mjs";
import { u as Ke } from "./VEVQD5MH-BSxDdMFG.mjs";
import { P as Ge, a as Ue } from "./MTZPJQMC-DdjKPI9r.mjs";
var Xe = ae(
  [Ue, re],
  [Ge, ne]
), Ye = Xe.useContext;
de(!1);
de(null);
function qe(t = {}) {
  var s = t, {
    composite: o,
    combobox: e
  } = s, n = Pe(s, [
    "composite",
    "combobox"
  ]);
  const r = [
    "items",
    "renderedItems",
    "moves",
    "orientation",
    "virtualFocus",
    "includesBaseElement",
    "baseElement",
    "focusLoop",
    "focusShift",
    "focusWrap"
  ], m = Ae(
    n.store,
    te(o, r),
    te(e, r)
  ), c = m == null ? void 0 : m.getState(), d = _e(D(A({}, n), {
    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: j(
      n.includesBaseElement,
      c == null ? void 0 : c.includesBaseElement,
      !1
    ),
    orientation: j(
      n.orientation,
      c == null ? void 0 : c.orientation,
      "horizontal"
    ),
    focusLoop: j(n.focusLoop, c == null ? void 0 : c.focusLoop, !0)
  })), a = Re(), T = D(A({}, d.getState()), {
    selectedId: j(
      n.selectedId,
      c == null ? void 0 : c.selectedId,
      n.defaultSelectedId
    ),
    selectOnMove: j(
      n.selectOnMove,
      c == null ? void 0 : c.selectOnMove,
      !0
    )
  }), i = Oe(T, d, m);
  O(
    i,
    () => E(i, ["moves"], () => {
      const { activeId: u, selectOnMove: f } = i.getState();
      if (!f || !u) return;
      const I = d.item(u);
      I && (I.dimmed || I.disabled || i.setState("selectedId", I.id));
    })
  );
  let v = !0;
  O(
    i,
    () => ke(i, ["selectedId"], (u, f) => {
      if (!v) {
        v = !0;
        return;
      }
      o && u.selectedId === f.selectedId || i.setState("activeId", u.selectedId);
    })
  ), O(
    i,
    () => E(i, ["selectedId", "renderedItems"], (u) => {
      if (u.selectedId !== void 0) return;
      const { activeId: f, renderedItems: I } = i.getState(), x = d.item(f);
      if (x && !x.disabled && !x.dimmed)
        i.setState("selectedId", x.id);
      else {
        const y = I.find(
          (P) => !P.disabled && !P.dimmed
        );
        i.setState("selectedId", y == null ? void 0 : y.id);
      }
    })
  ), O(
    i,
    () => E(i, ["renderedItems"], (u) => {
      const f = u.renderedItems;
      if (f.length)
        return E(a, ["renderedItems"], (I) => {
          const x = I.renderedItems;
          x.some((P) => !P.tabId) && x.forEach((P, R) => {
            if (P.tabId) return;
            const N = f[R];
            N && a.renderItem(D(A({}, P), { tabId: N.id }));
          });
        });
    })
  );
  let h = null;
  return O(i, () => {
    const u = () => {
      h = i.getState().selectedId;
    }, f = () => {
      v = !1, i.setState("selectedId", h);
    };
    if (o && "setSelectElement" in o)
      return Z(
        E(o, ["value"], u),
        E(o, ["mounted"], f)
      );
    if (e)
      return Z(
        E(e, ["selectedValue"], u),
        E(e, ["mounted"], f)
      );
  }), D(A(A({}, d), i), {
    panels: a,
    setSelectedId: (u) => i.setState("selectedId", u),
    select: (u) => {
      i.setState("selectedId", u), d.move(u);
    }
  });
}
function Je(t, s, o) {
  ee(s, [o.composite, o.combobox]), t = Le(t, s, o), oe(t, o, "selectedId", "setSelectedId"), oe(t, o, "selectOnMove");
  const [e, n] = le(() => t.panels, {});
  return ee(n, [t, n]), Object.assign(
    De(() => g(p({}, t), { panels: e }), [t, e]),
    { composite: o.composite, combobox: o.combobox }
  );
}
function Qe(t = {}) {
  const s = Ke(), o = Ye() || s;
  t = g(p({}, t), {
    composite: t.composite !== void 0 ? t.composite : o,
    combobox: t.combobox !== void 0 ? t.combobox : s
  });
  const [e, n] = le(qe, t);
  return Je(e, n, t);
}
var J = ae(
  [re],
  [ne]
), Ze = J.useScopedContext, me = J.useProviderContext, be = J.ScopedContextProvider, et = "button", tt = G(function(s) {
  var o = s, {
    store: e,
    getItem: n
  } = o, r = X(o, [
    "store",
    "getItem"
  ]), m;
  const c = Ze();
  e = e || c, Y(
    e,
    process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
  );
  const d = ie(), a = r.id || d, T = $e(r), i = ue(
    (b) => {
      const _ = g(p({}, b), { dimmed: T });
      return n ? n(_) : _;
    },
    [T, n]
  ), v = r.onClick, h = F((b) => {
    v == null || v(b), !b.defaultPrevented && (e == null || e.setSelectedId(a));
  }), u = e.panels.useState(
    (b) => {
      var _;
      return (_ = b.items.find((l) => l.tabId === a)) == null ? void 0 : _.id;
    }
  ), f = d ? r.shouldRegisterItem : !1, I = e.useState((b) => !!a && b.activeId === a), x = e.useState((b) => !!a && b.selectedId === a), y = e.useState((b) => !!e.item(b.activeId)), P = I || x && !y, R = x || ((m = r.accessibleWhenDisabled) != null ? m : !0);
  if (V(
    e.combobox || e.composite,
    "virtualFocus"
  ) && (r = g(p({}, r), {
    tabIndex: -1
  })), r = g(p({
    id: a,
    role: "tab",
    "aria-selected": x,
    "aria-controls": u || void 0
  }, r), {
    onClick: h
  }), e.composite) {
    const b = {
      id: a,
      accessibleWhenDisabled: R,
      store: e.composite,
      shouldRegisterItem: P && f,
      rowId: r.rowId,
      render: r.render
    };
    r = g(p({}, r), {
      render: /* @__PURE__ */ $.jsx(
        Q,
        g(p({}, b), {
          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ $.jsx(Q, g(p({}, b), { store: e.combobox })) : b.render
        })
      )
    });
  }
  return r = ge(g(p({
    store: e
  }, r), {
    accessibleWhenDisabled: R,
    getItem: i,
    shouldRegisterItem: f
  })), r;
}), ot = Ce(
  K(function(s) {
    const o = tt(s);
    return U(et, o);
  })
), st = "div", nt = G(
  function(s) {
    var o = s, { store: e } = o, n = X(o, ["store"]);
    const r = me();
    e = e || r, Y(
      e,
      process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
    );
    const m = e.useState(
      (c) => c.orientation === "both" ? void 0 : c.orientation
    );
    return n = ce(
      n,
      (c) => /* @__PURE__ */ $.jsx(be, { value: e, children: c }),
      [e]
    ), e.composite && (n = p({
      focusable: !1
    }, n)), n = p({
      role: "tablist",
      "aria-orientation": m
    }, n), n = Ne(p({ store: e }, n)), n;
  }
), rt = K(function(s) {
  const o = nt(s);
  return U(st, o);
}), at = "div", it = G(
  function(s) {
    var o = s, {
      store: e,
      unmountOnHide: n,
      tabId: r,
      getItem: m,
      scrollRestoration: c,
      scrollElement: d
    } = o, a = X(o, [
      "store",
      "unmountOnHide",
      "tabId",
      "getItem",
      "scrollRestoration",
      "scrollElement"
    ]);
    const T = me();
    e = e || T, Y(
      e,
      process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
    );
    const i = M(null), v = ie(a.id), h = V(
      e.panels,
      () => {
        var l;
        return r || ((l = e == null ? void 0 : e.panels.item(v)) == null ? void 0 : l.tabId);
      }
    ), u = V(
      e,
      (l) => !!h && l.selectedId === h
    ), f = Be({ open: u }), I = V(f, "mounted"), x = M(
      /* @__PURE__ */ new Map()
    ), y = F(() => {
      const l = i.current;
      return l ? d ? typeof d == "function" ? d(l) : "current" in d ? d.current : d : l : null;
    });
    se(() => {
      var l, w;
      if (!c || !I) return;
      const C = y();
      if (!C) return;
      if (c === "reset") {
        C.scroll(0, 0);
        return;
      }
      if (!h) return;
      const L = x.current.get(h);
      C.scroll((l = L == null ? void 0 : L.x) != null ? l : 0, (w = L == null ? void 0 : L.y) != null ? w : 0);
      const B = () => {
        x.current.set(h, {
          x: C.scrollLeft,
          y: C.scrollTop
        });
      };
      return C.addEventListener("scroll", B), () => {
        C.removeEventListener("scroll", B);
      };
    }, [c, I, h, y, e]);
    const [P, R] = q(!1);
    se(() => {
      const l = i.current;
      if (!l) return;
      const w = ye(l);
      R(!!w.length);
    }, []);
    const N = ue(
      (l) => {
        const w = g(p({}, l), { id: v || l.id, tabId: r });
        return m ? m(w) : w;
      },
      [v, r, m]
    ), b = a.onKeyDown, _ = F((l) => {
      if (b == null || b(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: L } = e.getState(), B = C({ activeId: L });
      B && (l.preventDefault(), e.move(B));
    });
    return a = ce(
      a,
      (l) => /* @__PURE__ */ $.jsx(be, { value: e, children: l }),
      [e]
    ), a = g(p({
      id: v,
      role: "tabpanel",
      "aria-labelledby": h || void 0
    }, a), {
      children: n && !I ? null : a.children,
      ref: we(i, a.ref),
      onKeyDown: _
    }), a = Ee(p({
      // If the tab panel is rendered as part of another composite widget such
      // as combobox, it should not be focusable.
      focusable: !e.composite && !P
    }, a)), a = je(p({ store: f }, a)), a = Te(g(p({ store: e.panels }, a), { getItem: N })), a;
  }
), ct = K(function(s) {
  const o = it(s);
  return U(at, o);
});
const lt = z(rt)(
  ({ size: t }) => k`
    position: relative;
    width: 100%;
    overflow-x: auto;
    display: flex;
    border: 0;
    gap: xl;

    &[aria-orientation='vertical'] {
      flex-direction: column;
      ${S("tabs.tabsBorder.vertical")};
    }

    ${S("tabs.tabsBorder.horizontal")};

    ${fe} {
      ${S(`tabs.item.size.${t}`)}
    }
    ${he};
  `
), fe = z.button`
  border: 0;
  background: none;
  ${S("tabs.item.default")};
  display: flex;
  align-items: center;
  flex: none;
  padding: md 0;
  transition: medium;
  text-transform: none;
  cursor: pointer;
  gap: sm;

  &:focus {
    outline: none !important; /* important for firefox */

    &:not([aria-selected='true']) {
      ${S("tabs.item.focus")};
    }
  }

  &[aria-selected='true'] {
    ${S("tabs.item.active")};
  }

  &[aria-disabled='true'] {
    ${S("tabs.item.disabled")};
    cursor: auto;
  }

  &:hover:not([aria-selected='true']):not([aria-disabled='true']) {
    ${S("tabs.item.focus")};
  }

  & > svg,
  img {
    ${S("tabs.icon")};
  }

  & > span {
    ${S("tabs.badge")};
  }
`, dt = z(ct)(
  ({ orientation: t }) => k`
    ${t === "vertical" ? S("tabs.panel.vertical") : S("tabs.panel.horizontal")};
  `
), ut = ({ offset: t = 0, size: s = 0 }) => k`
  ${S("tabs.activeBar.horizontal")};
  left: 0;
  bottom: 0;
  width: ${s}px;
  transform: translateX(${t}px);
`, mt = ({ offset: t = 0, size: s = 0 }) => k`
  ${S("tabs.activeBar.vertical")};
  right: 0;
  top: 0;
  height: ${s}px;
  transform: translateY(${t}px);
`, bt = z.span(
  ({ orientation: t, ...s }) => k`
    position: absolute;
    ${t === "vertical" ? mt(s) : ut(s)}
    will-change: width, transform;
    transition: medium;
    transition-property: transform, width;
  `
);
function H(t) {
  var s = Ve.toArray(t);
  return s.reduce(function(o, e) {
    return e.type === ze ? o.concat(H(e.props.children)) : (o.push(e), o);
  }, []);
}
const pe = (t) => {
  if (!t || typeof window > "u") return 1;
  const s = Number(window.getComputedStyle(t).scale);
  return isNaN(s) ? pe(t.parentElement) : s;
};
function ft(t, s, o) {
  const [e, n] = q({}), { height: r, width: m } = We();
  return He(() => {
    const c = t.current;
    if (!c || !s) return;
    const d = c.getBoundingClientRect(), a = s.getBoundingClientRect(), T = pe(c);
    if (o === "vertical") {
      const i = a.top - d.top, v = a.height;
      n({
        offset: i,
        orientation: o,
        size: v
      });
    } else {
      const i = (a.left - d.left + c.scrollLeft) / T, v = a.width / T;
      n({
        offset: isNaN(i) ? 0 : i,
        orientation: o,
        size: isNaN(v) ? 0 : v
      });
    }
  }, [t, s, m, r, o]), e;
}
const ve = ({ activeTab: t, listRef: s, orientation: o }) => {
  const e = ft(s, t, o);
  return /* @__PURE__ */ $.jsx(bt, { ...e });
};
ve.displayName = "ActiveBar";
const pt = H.default || H;
function vt(t, s) {
  const [o, e] = q(null);
  return [pt(s).map((r) => r.props.id === t ? Fe(r, { ref: e }) : r), o];
}
const Ie = W(
  ({ children: t, size: s = "md", store: o, ...e }, n) => {
    const r = M(), m = Me(n, r), { orientation: c, selectedId: d } = o.useState(), [a, T] = vt(d, t);
    return /* @__PURE__ */ $.jsxs(lt, { orientation: c, ref: m, size: s, store: o, ...e, children: [
      a,
      a.length > 1 && /* @__PURE__ */ $.jsx(ve, { activeTab: T, listRef: r, orientation: c })
    ] });
  }
);
Ie.displayName = "TabList";
const xe = W(
  ({ children: t, store: s, tabId: o, ...e }, n) => {
    const r = s.useState("orientation");
    return /* @__PURE__ */ $.jsx(dt, { orientation: r, ref: n, store: s, tabId: o, ...e, children: t });
  }
);
xe.displayName = "TabPanel";
const Se = W(
  ({ as: t, children: s, id: o, store: e, ...n }, r) => /* @__PURE__ */ $.jsx(
    ot,
    {
      id: o,
      render: (m) => /* @__PURE__ */ $.jsx(fe, { as: t, ...m, ref: r }),
      store: e,
      ...n,
      children: s
    }
  )
);
Se.displayName = "Tab";
const Lt = Object.assign(Se, { List: Ie, Panel: xe });
function Nt(t) {
  return Qe(t);
}
export {
  Lt as Tab,
  Se as TabComponent,
  Nt as useTab
};