@commercetools/nimbus 2.5.0 → 2.6.0

package/dist/chunks/tabs-D3t5ePxt.es.js

@@ -0,0 +1,537 @@
+import { jsx as b, jsxs as J, Fragment as Q } from "react/jsx-runtime";
+import u, { useMemo as T, useRef as X, useEffect as Y, useContext as x, useState as Z, forwardRef as F, createContext as O } from "react";
+import { a as D, b as g, $ as ee, e as H, d as te } from "./utils-CiIOoh_a.es.js";
+import { g as ie, e as ae, h as z, j as le, k as se } from "./SelectionManager-CKL0m64P.es.js";
+import { a as ne, $ as oe } from "./SelectionIndicator-B27AsfqE.es.js";
+import { $ as re, g as A, f as de, a as ce } from "./CollectionBuilder-0GDhYLYj.es.js";
+import { $ as fe } from "./Hidden-X9vuhkMZ.es.js";
+import { a as v, $ as ue } from "./mergeProps-Dg8WqJiN.es.js";
+import { $ as K } from "./filterDOMProps-Cxz9cAAv.es.js";
+import { $ as w } from "./useObjectRef-CaJ5pgjX.es.js";
+import { a as be, b as N } from "./useListState-xdP8vTga.es.js";
+import { $ as $e, a as pe } from "./animation-sblr3yZx.es.js";
+import { f as he } from "./openLink-HsZR1nGD.es.js";
+import { $ as ye } from "./useFocusable-hSEKBu4u.es.js";
+import { $ as j } from "./useLabels-kXO7sGKX.es.js";
+import { $ as ve } from "./useHasTabbableChild-MKRDwhdr.es.js";
+import { $ as me } from "./context-BfHy4NgG.es.js";
+import { $ as I } from "./useFocusRing-BMbyOrJt.es.js";
+import { $ as Pe } from "./useHover-Y3jiyL7C.es.js";
+import { $ as xe } from "./useControlledState-3TGZUXux.es.js";
+import { createSlotRecipeContext as ge } from "@chakra-ui/react";
+import { e as B } from "./extract-style-props-B7802mZ7.es.js";
+import { useChakraContext as Ke, useSlotRecipe as Se } from "@chakra-ui/react/styled-system";
+const U = /* @__PURE__ */ new WeakMap();
+function S(i, e, t) {
+  if (!i)
+    return "";
+  typeof e == "string" && (e = e.replace(/\s+/g, ""));
+  let a = U.get(i);
+  return process.env.NODE_ENV !== "production" && !a && console.error("There is no tab id, please check if you have rendered the tab panel before the tab list."), `${a}-${t}-${e}`;
+}
+function Te(i, e, t) {
+  let { key: a, isDisabled: l, shouldSelectOnPressUp: s } = i, { selectionManager: o, selectedKey: d } = e, n = a === d, r = l || e.isDisabled || e.selectionManager.isDisabled(a), { itemProps: c, isPressed: f } = ie({
+    selectionManager: o,
+    key: a,
+    ref: t,
+    isDisabled: r,
+    shouldSelectOnPressUp: s,
+    linkBehavior: "selection"
+  }), p = S(e, a, "tab"), h = S(e, a, "tabpanel"), { tabIndex: y } = c, $ = e.collection.getItem(a), P = K($?.props, {
+    labelable: !0
+  });
+  delete P.id;
+  let q = he($?.props), { focusableProps: G } = ye({
+    ...$?.props,
+    isDisabled: r
+  }, t);
+  return {
+    tabProps: v(P, G, q, c, {
+      id: p,
+      "aria-selected": n,
+      "aria-disabled": r || void 0,
+      "aria-controls": n ? h : void 0,
+      tabIndex: r ? void 0 : y,
+      role: "tab"
+    }),
+    isSelected: n,
+    isDisabled: r,
+    isPressed: f
+  };
+}
+function De(i, e, t) {
+  let a = ve(t) ? void 0 : 0;
+  var l;
+  const s = S(e, (l = i.id) !== null && l !== void 0 ? l : e?.selectedKey, "tabpanel"), o = j({
+    ...i,
+    id: s,
+    "aria-labelledby": S(e, e?.selectedKey, "tab")
+  });
+  return {
+    tabPanelProps: v(o, {
+      tabIndex: a,
+      role: "tabpanel",
+      "aria-describedby": i["aria-describedby"],
+      "aria-details": i["aria-details"]
+    })
+  };
+}
+class Ee {
+  getKeyLeftOf(e) {
+    return this.flipDirection ? this.getNextKey(e) : this.getPreviousKey(e);
+  }
+  getKeyRightOf(e) {
+    return this.flipDirection ? this.getPreviousKey(e) : this.getNextKey(e);
+  }
+  isDisabled(e) {
+    var t, a;
+    return this.disabledKeys.has(e) || !!(!((a = this.collection.getItem(e)) === null || a === void 0 || (t = a.props) === null || t === void 0) && t.isDisabled);
+  }
+  getFirstKey() {
+    let e = this.collection.getFirstKey();
+    return e != null && this.isDisabled(e) && (e = this.getNextKey(e)), e;
+  }
+  getLastKey() {
+    let e = this.collection.getLastKey();
+    return e != null && this.isDisabled(e) && (e = this.getPreviousKey(e)), e;
+  }
+  getKeyAbove(e) {
+    return this.tabDirection ? null : this.getPreviousKey(e);
+  }
+  getKeyBelow(e) {
+    return this.tabDirection ? null : this.getNextKey(e);
+  }
+  getNextKey(e) {
+    let t = e;
+    do
+      t = this.collection.getKeyAfter(t), t == null && (t = this.collection.getFirstKey());
+    while (t != null && this.isDisabled(t));
+    return t;
+  }
+  getPreviousKey(e) {
+    let t = e;
+    do
+      t = this.collection.getKeyBefore(t), t == null && (t = this.collection.getLastKey());
+    while (t != null && this.isDisabled(t));
+    return t;
+  }
+  constructor(e, t, a, l = /* @__PURE__ */ new Set()) {
+    this.collection = e, this.flipDirection = t === "rtl" && a === "horizontal", this.disabledKeys = l, this.tabDirection = a === "horizontal";
+  }
+}
+function Ce(i, e, t) {
+  let { orientation: a = "horizontal", keyboardActivation: l = "automatic" } = i, { collection: s, selectionManager: o, disabledKeys: d } = e, { direction: n } = me(), r = T(() => new Ee(s, n, a, d), [
+    s,
+    d,
+    a,
+    n
+  ]), { collectionProps: c } = ae({
+    ref: t,
+    selectionManager: o,
+    keyboardDelegate: r,
+    selectOnFocus: l === "automatic",
+    disallowEmptySelection: !0,
+    scrollRef: t,
+    linkBehavior: "selection"
+  }), f = ue();
+  U.set(e, f);
+  let p = j({
+    ...i,
+    id: f
+  });
+  return {
+    tabListProps: {
+      ...v(c, p),
+      role: "tablist",
+      "aria-orientation": a,
+      tabIndex: void 0
+    }
+  };
+}
+function Fe(i) {
+  var e;
+  let [t, a] = xe(i.selectedKey, (e = i.defaultSelectedKey) !== null && e !== void 0 ? e : null, i.onSelectionChange), l = T(() => t != null ? [
+    t
+  ] : [], [
+    t
+  ]), { collection: s, disabledKeys: o, selectionManager: d } = be({
+    ...i,
+    selectionMode: "single",
+    disallowEmptySelection: !0,
+    allowDuplicateSelectionEvents: !0,
+    selectedKeys: l,
+    onSelectionChange: (r) => {
+      if (r === "all") return;
+      var c;
+      let f = (c = r.values().next().value) !== null && c !== void 0 ? c : null;
+      f === t && i.onSelectionChange && i.onSelectionChange(f), a(f);
+    }
+  }), n = t != null ? s.getItem(t) : null;
+  return {
+    collection: s,
+    disabledKeys: o,
+    selectionManager: d,
+    selectedKey: t,
+    setSelectedKey: a,
+    selectedItem: n
+  };
+}
+function we(i) {
+  var e, t;
+  let a = Fe({
+    ...i,
+    onSelectionChange: i.onSelectionChange ? (n) => {
+      var r;
+      n != null && ((r = i.onSelectionChange) === null || r === void 0 || r.call(i, n));
+    } : void 0,
+    suppressTextValueWarning: !0,
+    defaultSelectedKey: (t = (e = i.defaultSelectedKey) !== null && e !== void 0 ? e : V(i.collection, i.disabledKeys ? new Set(i.disabledKeys) : /* @__PURE__ */ new Set())) !== null && t !== void 0 ? t : void 0
+  }), { selectionManager: l, collection: s, selectedKey: o } = a, d = X(o);
+  return Y(() => {
+    let n = o;
+    i.selectedKey == null && (l.isEmpty || n == null || !s.getItem(n)) && (n = V(s, a.disabledKeys), n != null && l.setSelectedKeys([
+      n
+    ])), (n != null && l.focusedKey == null || !l.isFocused && n !== d.current) && l.setFocusedKey(n), d.current = n;
+  }), {
+    ...a,
+    isDisabled: i.isDisabled || !1
+  };
+}
+function V(i, e) {
+  let t = null;
+  if (i) {
+    var a, l, s, o;
+    for (t = i.getFirstKey(); t != null && (e.has(t) || !((l = i.getItem(t)) === null || l === void 0 || (a = l.props) === null || a === void 0) && a.isDisabled) && t !== i.getLastKey(); ) t = i.getKeyAfter(t);
+    t != null && (e.has(t) || !((o = i.getItem(t)) === null || o === void 0 || (s = o.props) === null || s === void 0) && s.isDisabled) && t === i.getLastKey() && (t = i.getFirstKey());
+  }
+  return t;
+}
+const E = /* @__PURE__ */ O(null), m = /* @__PURE__ */ O(null), Ie = /* @__PURE__ */ F(function(e, t) {
+  [e, t] = ee(e, t, E);
+  let { children: a, orientation: l = "horizontal" } = e;
+  return a = T(() => typeof a == "function" ? a({
+    orientation: l,
+    defaultChildren: null
+  }) : a, [
+    a,
+    l
+  ]), /* @__PURE__ */ u.createElement(de, {
+    content: a
+  }, (s) => /* @__PURE__ */ u.createElement(Re, {
+    props: e,
+    collection: s,
+    tabsRef: t
+  }));
+});
+function Re({ props: i, tabsRef: e, collection: t }) {
+  let { orientation: a = "horizontal" } = i, l = we({
+    ...i,
+    collection: t,
+    children: void 0
+  }), { focusProps: s, isFocused: o, isFocusVisible: d } = I({
+    within: !0
+  }), n = T(() => ({
+    orientation: a,
+    isFocusWithin: o,
+    isFocusVisible: d
+  }), [
+    a,
+    o,
+    d
+  ]), r = D({
+    ...i,
+    defaultClassName: "react-aria-Tabs",
+    values: n
+  }), c = K(i, {
+    global: !0
+  });
+  return /* @__PURE__ */ u.createElement(g.div, {
+    ...v(c, r, s),
+    ref: e,
+    slot: i.slot || void 0,
+    "data-focused": o || void 0,
+    "data-orientation": a,
+    "data-focus-visible": d || void 0,
+    "data-disabled": l.isDisabled || void 0
+  }, /* @__PURE__ */ u.createElement(H, {
+    values: [
+      [
+        E,
+        i
+      ],
+      [
+        m,
+        l
+      ]
+    ]
+  }, r.children));
+}
+const Le = /* @__PURE__ */ F(function(e, t) {
+  return x(m) ? /* @__PURE__ */ u.createElement(ke, {
+    props: e,
+    forwardedRef: t
+  }) : /* @__PURE__ */ u.createElement(A, e);
+});
+function ke({ props: i, forwardedRef: e }) {
+  let t = x(m), { CollectionRoot: a } = x(z), { orientation: l = "horizontal", keyboardActivation: s = "automatic" } = te(E), o = w(e), { tabListProps: d } = Ce({
+    ...i,
+    orientation: l,
+    keyboardActivation: s
+  }, t, o), n = D({
+    ...i,
+    children: null,
+    defaultClassName: "react-aria-TabList",
+    values: {
+      orientation: l,
+      state: t
+    }
+  }), r = K(i, {
+    global: !0
+  });
+  return delete r.id, /* @__PURE__ */ u.createElement(g.div, {
+    ...v(r, n, d),
+    ref: o,
+    "data-orientation": l || void 0
+  }, /* @__PURE__ */ u.createElement(oe, null, /* @__PURE__ */ u.createElement(a, {
+    collection: t.collection,
+    persistedKeys: se(t.selectionManager.focusedKey)
+  })));
+}
+class W extends ce {
+}
+W.type = "item";
+const Me = /* @__PURE__ */ re(W, (i, e, t) => {
+  let a = x(m), l = w(e), { tabProps: s, isSelected: o, isDisabled: d, isPressed: n } = Te({
+    key: t.key,
+    ...i
+  }, a, l), { focusProps: r, isFocused: c, isFocusVisible: f } = I(), { hoverProps: p, isHovered: h } = Pe({
+    isDisabled: d,
+    onHoverStart: i.onHoverStart,
+    onHoverEnd: i.onHoverEnd,
+    onHoverChange: i.onHoverChange
+  }), y = D({
+    ...i,
+    id: void 0,
+    children: t.rendered,
+    defaultClassName: "react-aria-Tab",
+    values: {
+      isSelected: o,
+      isDisabled: d,
+      isFocused: c,
+      isFocusVisible: f,
+      isPressed: n,
+      isHovered: h
+    }
+  }), $ = t.props.href ? g.a : g.div, P = K(i, {
+    global: !0
+  });
+  return delete P.id, delete P.onClick, /* @__PURE__ */ u.createElement($, {
+    ...v(P, y, s, r, p),
+    ref: l,
+    "data-selected": o || void 0,
+    "data-disabled": d || void 0,
+    "data-focused": c || void 0,
+    "data-focus-visible": f || void 0,
+    "data-pressed": n || void 0,
+    "data-hovered": h || void 0
+  }, /* @__PURE__ */ u.createElement(ne.Provider, {
+    value: {
+      isSelected: o
+    }
+  }, y.children));
+}), Ne = /* @__PURE__ */ fe(function(e, t) {
+  const a = x(m);
+  let l = w(t), s = a.selectedKey === e.id, [o, d] = Z(a.selectedKey != null ? s : null);
+  o == null && a.selectedKey != null ? d(s) : !s && o && d(!1);
+  let n = $e(l, s);
+  return !s && !e.shouldForceMount && !n ? null : /* @__PURE__ */ u.createElement(Ve, {
+    ...e,
+    tabPanelRef: l,
+    isInitiallySelected: o || !1,
+    isExiting: n
+  });
+});
+function Ve(i) {
+  let e = x(m), { id: t, tabPanelRef: a, isInitiallySelected: l, isExiting: s, ...o } = i, { tabPanelProps: d } = De(i, e, a), { focusProps: n, isFocused: r, isFocusVisible: c } = I(), f = e.selectedKey === i.id, p = pe(a) && !l, h = D({
+    ...i,
+    defaultClassName: "react-aria-TabPanel",
+    values: {
+      isFocused: r,
+      isFocusVisible: c,
+      // @ts-ignore - compatibility with React < 19
+      isInert: N(!f),
+      isEntering: p,
+      isExiting: s,
+      state: e
+    }
+  }), y = K(o, {
+    global: !0
+  });
+  delete y.id;
+  let $ = f ? v(y, d, n, h) : v(y, h);
+  return /* @__PURE__ */ u.createElement(g.div, {
+    ...$,
+    ref: a,
+    "data-focused": r || void 0,
+    "data-focus-visible": c || void 0,
+    // @ts-ignore
+    inert: N(!f || i.inert),
+    "data-inert": f ? void 0 : "true",
+    "data-entering": p || void 0,
+    "data-exiting": s || void 0
+  }, /* @__PURE__ */ u.createElement(H, {
+    values: [
+      [
+        E,
+        null
+      ],
+      [
+        m,
+        null
+      ]
+    ]
+  }, /* @__PURE__ */ u.createElement(z.Provider, {
+    value: le
+  }, h.children)));
+}
+const { withProvider: Oe, withContext: C } = /* @__PURE__ */ ge({
+  key: "nimbusTabs"
+}), He = /* @__PURE__ */ Oe(
+  "div",
+  "root"
+), ze = /* @__PURE__ */ C(
+  "div",
+  "list"
+), Ae = /* @__PURE__ */ C(
+  "button",
+  "tab"
+), je = /* @__PURE__ */ C("div", "panels"), Be = /* @__PURE__ */ C("div", "panel"), R = ({ children: i, isDisabled: e, ...t }) => /* @__PURE__ */ b(Ae, { asChild: !0, ...t, children: /* @__PURE__ */ b(Me, { isDisabled: e, children: i }) });
+R.displayName = "Tabs.Tab";
+const L = ({ tabs: i, children: e, ...t }) => {
+  const [a, l] = B(t);
+  if (!i && !e)
+    throw new Error(
+      'Tabs.List: Either provide "tabs" prop or "children" must be provided'
+    );
+  return /* @__PURE__ */ b(ze, { ...a, asChild: !0, children: /* @__PURE__ */ b(Le, { items: i, ...l, children: i ? (s) => /* @__PURE__ */ b(R, { id: s.id, isDisabled: s.isDisabled, children: s.tabLabel }, s.id) : e }) });
+};
+L.displayName = "Tabs.List";
+const k = /* @__PURE__ */ F(
+  ({ children: i, ...e }, t) => {
+    if (!i)
+      throw new Error("Tabs.Panel: children prop is required");
+    return /* @__PURE__ */ b(Be, { asChild: !0, ref: t, ...e, children: /* @__PURE__ */ b(Ne, { children: i }) });
+  }
+);
+k.displayName = "Tabs.Panel";
+const M = ({ tabs: i, children: e, ...t }) => {
+  if (!i && !e)
+    throw new Error(
+      'Tabs.Panels: Either provide "items" prop or "children" must be provided'
+    );
+  return /* @__PURE__ */ b(je, { ...t, children: i ? /* @__PURE__ */ b(A, { items: i, children: (a) => /* @__PURE__ */ b(k, { id: a.id, children: a.panelContent }, a.id) }) : e });
+};
+M.displayName = "Tabs.Panels";
+const _ = ({
+  children: i,
+  tabs: e,
+  tabListAriaLabel: t,
+  ...a
+}) => {
+  const l = Ke(), s = Se({ key: "nimbusTabs" }), [o, d] = s.splitVariantProps(a), [n, r] = B(d), c = l.normalizeValue(o.orientation);
+  return /* @__PURE__ */ b(He, { asChild: !0, ...o, ...n, children: /* @__PURE__ */ b(Ie, { ...r, orientation: c, children: i || /* @__PURE__ */ J(Q, { children: [
+    /* @__PURE__ */ b(L, { tabs: e, "aria-label": t }),
+    /* @__PURE__ */ b(M, { tabs: e })
+  ] }) }) });
+};
+_.displayName = "Tabs.Root";
+const bt = {
+  /**
+   * # Tabs.Root
+   *
+   * The root component that provides context and state management for the tabs.
+   * Must wrap all tabs parts (List, Tab, Panels, Panel) to coordinate their behavior.
+   *
+   * @example
+   * ```tsx
+   * <Tabs.Root orientation="horizontal" size="md">
+   *   <Tabs.List>
+   *     <Tabs.Tab id="tab1">Tab 1</Tabs.Tab>
+   *   </Tabs.List>
+   *   <Tabs.Panels>
+   *     <Tabs.Panel id="tab1">Content</Tabs.Panel>
+   *   </Tabs.Panels>
+   * </Tabs.Root>
+   * ```
+   */
+  Root: _,
+  /**
+   * # Tabs.List
+   *
+   * The container for tab buttons that allows users to navigate between panels.
+   * Handles keyboard navigation and manages the active tab state.
+   *
+   * @example
+   * ```tsx
+   * <Tabs.List>
+   *   <Tabs.Tab id="tab1">First Tab</Tabs.Tab>
+   *   <Tabs.Tab id="tab2">Second Tab</Tabs.Tab>
+   * </Tabs.List>
+   * ```
+   */
+  List: L,
+  /**
+   * # Tabs.Tab
+   *
+   * An individual tab button that activates its corresponding panel when selected.
+   * Supports keyboard navigation, disabled states, and custom content.
+   *
+   * @example
+   * ```tsx
+   * <Tabs.Tab id="settings" isDisabled={false}>
+   *   <Icon name="settings" />
+   *   Settings
+   * </Tabs.Tab>
+   * ```
+   */
+  Tab: R,
+  /**
+   * # Tabs.Panels
+   *
+   * The container for all tab panels that displays the content for the active tab.
+   * Manages visibility and accessibility of panel content.
+   *
+   * @example
+   * ```tsx
+   * <Tabs.Panels>
+   *   <Tabs.Panel id="tab1">First panel content</Tabs.Panel>
+   *   <Tabs.Panel id="tab2">Second panel content</Tabs.Panel>
+   * </Tabs.Panels>
+   * ```
+   */
+  Panels: M,
+  /**
+   * # Tabs.Panel
+   *
+   * An individual panel that displays content when its corresponding tab is active.
+   * Automatically manages focus and accessibility attributes.
+   *
+   * @example
+   * ```tsx
+   * <Tabs.Panel id="profile">
+   *   <h3>Profile Settings</h3>
+   *   <p>Manage your profile information here.</p>
+   * </Tabs.Panel>
+   * ```
+   */
+  Panel: k
+};
+export {
+  bt as T,
+  L as a,
+  k as b,
+  M as c,
+  _ as d,
+  R as e
+};
+//# sourceMappingURL=tabs-D3t5ePxt.es.js.map