@alfadocs/ui-kit 1.10.1 → 1.12.4

package/dist/_chunks/{icon-button-group-D6SVMteH.js → icon-button-group-VCCod3Hz.js}

@@ -1,13 +1,13 @@
-import { jsx as a, jsxs as _ } from "react/jsx-runtime";
-import { forwardRef as je, useState as U, useCallback as W, useRef as z, Children as pe, isValidElement as H, useEffect as ge, cloneElement as me } from "react";
-import { c as ze } from "./index-D2ZczOXr.js";
-import { useTranslation as Se } from "react-i18next";
-import { I as be } from "./icon-button-DA2CAGHZ.js";
-import { D as w } from "./dropdown-menu-DU-Hrf33.js";
-import { u as Be } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { u as Ke } from "./use-priority-overflow-c9SjxZkZ.js";
-import { E as ve } from "./ellipsis-dRo9ouSU.js";
-const ye = ze(
+import { jsx as a, jsxs as T } from "react/jsx-runtime";
+import { forwardRef as Se, useState as W, useCallback as H, useRef as F, Children as be, isValidElement as _, useEffect as ve, cloneElement as ye } from "react";
+import { c as Be } from "./index-D2ZczOXr.js";
+import { useTranslation as Ke } from "react-i18next";
+import { I as he } from "./icon-button-DA2CAGHZ.js";
+import { D as k } from "./dropdown-menu-DU-Hrf33.js";
+import { u as Pe } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as Te } from "./use-priority-overflow-c9SjxZkZ.js";
+import { E as we } from "./ellipsis-dRo9ouSU.js";
+const ke = Be(
   [
     "ds:inline-flex ds:isolate",
     // Hairline border around the group unifies the children into one
@@ -52,16 +52,16 @@ const ye = ze(
       orientation: "horizontal"
     }
   }
-), he = "ds:absolute ds:start-0 ds:top-0 ds:invisible ds:pointer-events-none", Pe = je(
-  (d, v) => {
+), Ie = "ds:absolute ds:start-0 ds:top-0 ds:invisible ds:pointer-events-none", _e = Se(
+  (d, y) => {
     const {
       size: m,
-      orientation: u = "horizontal",
+      orientation: c = "horizontal",
       role: i = "group",
       mode: n = "momentary",
       disabled: q = !1,
       intent: S = "outline",
-      overflow: we = "none",
+      overflow: Ce = "none",
       className: J,
       children: Q,
       "aria-label": X,
@@ -69,11 +69,11 @@ const ye = ze(
       // Controlled-value props are consumed via `props as …` below; strip them
       // here so they never spread onto the root <div> (React would warn that
       // `onValueChange` is an unknown DOM event handler).
-      value: _e,
-      defaultValue: Fe,
-      onValueChange: Ge,
+      value: Me,
+      defaultValue: Oe,
+      onValueChange: $e,
       ...Z
-    } = d, { t: ke } = Se(), y = we === "menu" && u !== "vertical", [ee, oe] = U(
+    } = d, { t: Re } = Ke(), h = Ce === "menu" && c !== "vertical", [ee, oe] = W(
       () => n === "toggle-single" ? d.defaultValue ?? "" : n === "toggle-multi" ? d.defaultValue ?? [] : ""
     ), g = (() => {
       if (n === "toggle-single") {
@@ -85,7 +85,7 @@ const ye = ze(
         return e.value !== void 0 ? e.value : ee;
       }
       return "";
-    })(), k = W(
+    })(), I = H(
       (e) => {
         var o, r;
         if (n === "toggle-single") {
@@ -97,194 +97,203 @@ const ye = ze(
         }
       },
       [n, d]
-    ), b = i === "toolbar" || i === "radiogroup", R = z([]), [h, I] = U(0), te = W(
+    ), b = i === "toolbar" || i === "radiogroup", x = F([]), [v, A] = W(0), te = H(
       (e, o) => {
-        R.current[e] = o;
+        x.current[e] = o;
       },
       []
-    ), re = z(null), [F, Ce] = U(!1);
-    Be(() => {
+    ), re = F(null), [G, xe] = W(!1);
+    Pe(() => {
       if (typeof window > "u") return;
       const e = re.current;
       if (!e) return;
       const o = window.getComputedStyle(e).direction;
-      Ce(o === "rtl");
+      xe(o === "rtl");
     }, []);
-    const G = W(
+    const M = H(
       (e) => {
-        var T;
+        var P;
         if (!b) return;
-        const o = R.current.filter(Boolean).length;
+        const o = x.current.filter(Boolean).length;
         if (o === 0) return;
-        const r = u === "vertical" ? "ArrowDown" : F ? "ArrowLeft" : "ArrowRight", t = u === "vertical" ? "ArrowUp" : F ? "ArrowRight" : "ArrowLeft";
+        const r = c === "vertical" ? "ArrowDown" : G ? "ArrowLeft" : "ArrowRight", t = c === "vertical" ? "ArrowUp" : G ? "ArrowRight" : "ArrowLeft";
         let s = null;
-        if (e.key === r ? s = (h + 1) % o : e.key === t ? s = (h - 1 + o) % o : e.key === "Home" ? s = 0 : e.key === "End" && (s = o - 1), s === null) return;
-        const L = o;
-        let C = 0, c = s;
-        for (; C < L; ) {
-          const f = R.current[c];
+        if (e.key === r ? s = (v + 1) % o : e.key === t ? s = (v - 1 + o) % o : e.key === "Home" ? s = 0 : e.key === "End" && (s = o - 1), s === null) return;
+        const N = o;
+        let R = 0, u = s;
+        for (; R < N; ) {
+          const f = x.current[u];
           if (f && f.getAttribute("aria-disabled") !== "true" && !f.disabled)
             break;
-          c = e.key === t || e.key === "End" ? (c - 1 + o) % o : (c + 1) % o, C += 1;
+          u = e.key === t || e.key === "End" ? (u - 1 + o) % o : (u + 1) % o, R += 1;
         }
-        if (e.preventDefault(), I(c), (T = R.current[c]) == null || T.focus(), i === "radiogroup" && n === "toggle-single") {
-          const f = se.current[c];
+        if (e.preventDefault(), A(u), (P = x.current[u]) == null || P.focus(), i === "radiogroup" && n === "toggle-single") {
+          const f = se.current[u];
           if (f && typeof f == "object" && "props" in f) {
-            const N = f.props.value;
-            N && N !== g && k(N);
+            const j = f.props.value;
+            j && j !== g && I(j);
           }
         }
       },
       [
         b,
-        u,
-        F,
-        h,
+        c,
+        G,
+        v,
         i,
         n,
-        k,
+        I,
         g
       ]
-    ), x = y ? pe.toArray(Q).filter(H) : [], B = (e) => {
+    ), D = h ? be.toArray(Q).filter(_) : [], B = (e) => {
       const o = e.props["aria-label"];
       return typeof o == "string" ? o : typeof e.props.tooltip == "string" ? e.props.tooltip : null;
     };
-    z(!1);
-    const Re = x.map((e) => {
+    F(!1);
+    const Ae = D.map((e) => {
       const o = e.props["data-overflow-pin"] !== void 0, r = B(e) !== null;
       return o || !r;
-    }), { containerRef: Ie, fullRowRef: xe, triggerProbeRef: Ae, visible: ne, overflowing: K } = Ke({
-      enabled: y,
-      count: x.length,
-      pinned: Re
-    }), ie = z(null), A = y ? x.filter((e, o) => ne[o]) : pe.toArray(Q);
-    y && (R.current.length = A.length + (K ? 1 : 0));
-    const se = z([]);
-    se.current = A;
-    const M = i === "radiogroup" && n === "toggle-single" ? A.findIndex(
-      (e) => H(e) && e.props.value === g
+    }), { containerRef: De, fullRowRef: Ve, triggerProbeRef: Le, visible: ne, overflowing: V } = Te({
+      enabled: h,
+      count: D.length,
+      pinned: Ae
+    }), ie = F(null), w = h ? D.filter((e, o) => ne[o]) : be.toArray(Q);
+    h && (x.current.length = w.length + (V ? 1 : 0));
+    const se = F([]);
+    se.current = w;
+    const O = i === "radiogroup" && n === "toggle-single" ? w.findIndex(
+      (e) => _(e) && e.props.value === g
     ) : -1;
-    ge(() => {
-      M >= 0 && I(M);
-    }, [M]);
-    const V = A.length;
-    ge(() => {
+    ve(() => {
+      O >= 0 && A(O);
+    }, [O]);
+    const C = w.length;
+    ve(() => {
       var o;
-      if (!b || !y) return;
-      const e = V + (K ? 1 : 0);
-      e > 0 && h >= e && (I(e - 1), document.activeElement === document.body && ((o = ie.current) == null || o.focus()));
+      if (!b || !h) return;
+      const e = C + (V ? 1 : 0);
+      e > 0 && v >= e && (A(e - 1), document.activeElement === document.body && ((o = ie.current) == null || o.focus()));
     }, [
       b,
-      y,
+      h,
+      C,
       V,
-      K,
-      h
+      v
     ]);
-    const ae = A.map((e, o) => {
-      if (!H(e))
+    const ae = (e) => {
+      if (!_(e)) return !1;
+      const o = e.props;
+      return o.disabled === !0 || o.loading === !0;
+    }, le = w.findIndex((e) => !ae(e)), de = ae(w[v]) ? le !== -1 ? le : (
+      /* Every visible child is disabled: the overflow trigger is the
+         only thing left that can hold focus. Without this the group
+         has no tab stop at all and the menu is unreachable. */
+      V ? C : v
+    ) : v, ce = w.map((e, o) => {
+      if (!_(e))
         return e;
-      const r = e, t = r.props.value, { ariaPressed: s, ariaChecked: L } = Te(
+      const r = e, t = r.props.value, { ariaPressed: s, ariaChecked: N } = Ge(
         n,
         i,
         t,
         g
-      ), C = q === !0, c = r.props.disabled === !0, T = (p) => {
-        var l, j;
-        if (C) {
+      ), R = q === !0, u = r.props.disabled === !0, P = (p) => {
+        var l, z;
+        if (R) {
           p.preventDefault(), p.stopPropagation();
           return;
         }
-        if ((j = (l = r.props).onClick) == null || j.call(l, p), !p.defaultPrevented && t) {
+        if ((z = (l = r.props).onClick) == null || z.call(l, p), !p.defaultPrevented && t) {
           if (n === "toggle-single") {
             if (g === t) return;
-            k(t);
+            I(t);
           } else if (n === "toggle-multi") {
-            const E = g, Le = E.includes(t) ? E.filter((Ne) => Ne !== t) : [...E, t];
-            k(Le);
+            const U = g, ze = U.includes(t) ? U.filter((Fe) => Fe !== t) : [...U, t];
+            I(ze);
           }
         }
       }, f = (p) => {
         te(o, p);
         const l = r.ref;
         typeof l == "function" ? l(p) : l != null && typeof l == "object" && (l.current = p);
-      }, N = C && !c ? !0 : void 0, Ve = n !== "momentary" || C, De = {
+      }, j = R && !u ? !0 : void 0, Ne = n !== "momentary" || R, je = {
         intent: r.props.intent ?? S,
         size: r.props.size ?? m,
-        disabled: c,
-        "aria-disabled": N,
-        onClick: Ve ? T : r.props.onClick,
+        disabled: u,
+        "aria-disabled": j,
+        onClick: Ne ? P : r.props.onClick,
         "aria-pressed": s,
-        "aria-checked": L,
+        "aria-checked": N,
         // When the group is a radiogroup, children must be `role="radio"`
         // so screen readers announce them as radio buttons and so
         // `getByRole('radio')` works in tests. The button element is
         // re-purposed as a radio; `aria-checked` above carries the state.
         role: i === "radiogroup" ? "radio" : void 0,
-        tabIndex: b ? o === h ? 0 : -1 : void 0,
+        tabIndex: b ? o === de ? 0 : -1 : void 0,
         onFocus: (p) => {
-          var l, j;
-          b && I(o), (j = (l = r.props).onFocus) == null || j.call(l, p);
+          var l, z;
+          b && A(o), (z = (l = r.props).onFocus) == null || z.call(l, p);
         },
         ref: f
       };
-      return me(r, De);
-    }), le = (e) => {
-      re.current = e, typeof v == "function" ? v(e) : v && typeof v == "object" && (v.current = e);
+      return ye(r, je);
+    }), ue = (e) => {
+      re.current = e, typeof y == "function" ? y(e) : y && typeof y == "object" && (y.current = e);
     };
-    if (!y)
+    if (!h)
       return /* @__PURE__ */ a(
         "div",
         {
-          ref: le,
+          ref: ue,
           role: i,
           "aria-label": X,
           "aria-labelledby": Y,
-          "aria-orientation": i === "toolbar" ? u : void 0,
-          onKeyDown: G,
-          className: ye({ orientation: u, className: J }),
+          "aria-orientation": i === "toolbar" ? c : void 0,
+          onKeyDown: M,
+          className: ke({ orientation: c, className: J }),
           "data-component": "icon-button-group",
           ...Z,
-          children: ae
+          children: ce
         }
       );
-    const de = ke("buttonGroup.more", "More options"), D = q === !0, O = x.map((e, o) => ({ childEl: e, i: o })).filter(({ i: e }) => !ne[e]);
-    let P = null;
-    n === "toggle-single" ? P = /* @__PURE__ */ a(
-      w.RadioGroup,
+    const fe = Re("buttonGroup.more", "More options"), L = q === !0, $ = D.map((e, o) => ({ childEl: e, i: o })).filter(({ i: e }) => !ne[e]);
+    let K = null;
+    n === "toggle-single" ? K = /* @__PURE__ */ a(
+      k.RadioGroup,
       {
         value: g,
         onValueChange: (e) => {
-          !D && e !== g && k(e);
+          !L && e !== g && I(e);
         },
-        children: O.map(({ childEl: e, i: o }) => /* @__PURE__ */ a(
-          w.RadioItem,
+        children: $.map(({ childEl: e, i: o }) => /* @__PURE__ */ a(
+          k.RadioItem,
           {
             value: e.props.value ?? "",
-            disabled: D || e.props.disabled === !0,
+            disabled: L || e.props.disabled === !0,
             children: B(e)
           },
           e.key ?? o
         ))
       }
-    ) : n === "toggle-multi" ? P = O.map(({ childEl: e, i: o }) => {
+    ) : n === "toggle-multi" ? K = $.map(({ childEl: e, i: o }) => {
       const r = e.props.value, t = g, s = r ? t.includes(r) : !1;
       return /* @__PURE__ */ a(
-        w.CheckboxItem,
+        k.CheckboxItem,
         {
           checked: s,
-          disabled: D || e.props.disabled === !0,
+          disabled: L || e.props.disabled === !0,
           onCheckedChange: () => {
-            D || !r || k(s ? t.filter((L) => L !== r) : [...t, r]);
+            L || !r || I(s ? t.filter((N) => N !== r) : [...t, r]);
           },
           children: B(e)
         },
         e.key ?? o
       );
-    }) : P = O.map(({ childEl: e, i: o }) => /* @__PURE__ */ a(
-      w.Item,
+    }) : K = $.map(({ childEl: e, i: o }) => /* @__PURE__ */ a(
+      k.Item,
       {
         startIcon: e.props.icon,
-        disabled: D || e.props.disabled === !0,
+        disabled: L || e.props.disabled === !0,
         onSelect: (r) => {
           var t, s;
           (s = (t = e.props).onClick) == null || s.call(
@@ -296,57 +305,57 @@ const ye = ze(
       },
       e.key ?? o
     ));
-    const ue = K ? /* @__PURE__ */ _(w.Root, { children: [
-      /* @__PURE__ */ a(w.Trigger, { asChild: !0, children: /* @__PURE__ */ a(
-        be,
+    const pe = V ? /* @__PURE__ */ T(k.Root, { children: [
+      /* @__PURE__ */ a(k.Trigger, { asChild: !0, children: /* @__PURE__ */ a(
+        he,
         {
-          icon: /* @__PURE__ */ a(ve, {}),
+          icon: /* @__PURE__ */ a(we, {}),
           intent: S,
           size: m,
-          "aria-label": de,
+          "aria-label": fe,
           ref: (e) => {
-            ie.current = e, te(V, e);
+            ie.current = e, te(C, e);
           },
-          tabIndex: b ? h === V ? 0 : -1 : void 0,
-          onFocus: b ? () => I(V) : void 0
+          tabIndex: b ? de === C ? 0 : -1 : void 0,
+          onFocus: b ? () => A(C) : void 0
         }
       ) }),
-      /* @__PURE__ */ a(w.Content, { align: "end", children: P })
-    ] }) : null, ce = ye({ orientation: u }), $ = i !== "radiogroup", fe = /* @__PURE__ */ _(
+      /* @__PURE__ */ a(k.Content, { align: "end", children: K })
+    ] }) : null, ge = ke({ orientation: c }), E = i !== "radiogroup", me = /* @__PURE__ */ T(
       "div",
       {
         role: i,
         "aria-label": X,
         "aria-labelledby": Y,
-        "aria-orientation": i === "toolbar" ? u : void 0,
-        onKeyDown: $ ? G : void 0,
-        className: `${ce} ds:max-w-full`,
+        "aria-orientation": i === "toolbar" ? c : void 0,
+        onKeyDown: E ? M : void 0,
+        className: `${ge} ds:max-w-full`,
         children: [
-          ae,
-          $ ? ue : null
+          ce,
+          E ? pe : null
         ]
       }
     );
     return /* @__PURE__ */ a(
       "div",
       {
-        ref: le,
+        ref: ue,
         "data-component": "icon-button-group",
         className: [
           "ds:relative ds:block ds:w-full ds:min-w-0 ds:overflow-x-clip",
           J ?? ""
         ].join(" ").trim(),
         ...Z,
-        children: /* @__PURE__ */ _("div", { ref: Ie, className: "ds:block ds:w-full ds:min-w-0", children: [
+        children: /* @__PURE__ */ T("div", { ref: De, className: "ds:block ds:w-full ds:min-w-0", children: [
           /* @__PURE__ */ a(
             "div",
             {
-              ref: xe,
+              ref: Ve,
               "aria-hidden": "true",
               inert: !0,
-              className: `${he} ${ce}`,
-              children: x.map(
-                (e, o) => me(e, {
+              className: `${Ie} ${ge}`,
+              children: D.map(
+                (e, o) => ye(e, {
                   key: e.key ?? o,
                   intent: e.props.intent ?? S,
                   size: e.props.size ?? m,
@@ -359,32 +368,32 @@ const ye = ze(
           /* @__PURE__ */ a(
             "span",
             {
-              ref: Ae,
+              ref: Le,
               "aria-hidden": "true",
               inert: !0,
-              className: he,
+              className: Ie,
               children: /* @__PURE__ */ a(
-                be,
+                he,
                 {
-                  icon: /* @__PURE__ */ a(ve, {}),
+                  icon: /* @__PURE__ */ a(we, {}),
                   intent: S,
                   size: m,
-                  "aria-label": de,
+                  "aria-label": fe,
                   tabIndex: -1
                 }
               )
             }
           ),
-          $ ? fe : (
+          E ? me : (
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- non-focusable wrapper; arrow-key roving bubbles up from the focusable IconButtons in the strip and the overflow trigger
-            /* @__PURE__ */ _(
+            /* @__PURE__ */ T(
               "div",
               {
                 className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
-                onKeyDown: G,
+                onKeyDown: M,
                 children: [
-                  fe,
-                  ue
+                  me,
+                  pe
                 ]
               }
             )
@@ -394,13 +403,13 @@ const ye = ze(
     );
   }
 );
-Pe.displayName = "IconButtonGroup";
-function Te(d, v, m, u) {
+_e.displayName = "IconButtonGroup";
+function Ge(d, y, m, c) {
   if (d === "momentary" || !m) return {};
-  const i = d === "toggle-multi" ? u.includes(m) : u === m;
-  return v === "radiogroup" ? { ariaChecked: i } : { ariaPressed: i };
+  const i = d === "toggle-multi" ? c.includes(m) : c === m;
+  return y === "radiogroup" ? { ariaChecked: i } : { ariaPressed: i };
 }
 export {
-  Pe as I
+  _e as I
 };
-//# sourceMappingURL=icon-button-group-D6SVMteH.js.map
+//# sourceMappingURL=icon-button-group-VCCod3Hz.js.map