@alfadocs/ui-kit-debug 1.44.0 → 1.46.0

package/dist/_chunks/{icon-button-group-DkkdIygu.js → icon-button-group-DZKC6KGf.js}

@@ -1,13 +1,16 @@
-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-CehAeZoP.js";
+import { jsx as l, jsxs as _ } from "react/jsx-runtime";
+import { forwardRef as Ke, useState as H, useCallback as F, useRef as P, Children as ye, isValidElement as G, useEffect as he, cloneElement as we } from "react";
+import { c as Te } from "./index-D2ZczOXr.js";
+import { useTranslation as _e } from "react-i18next";
+import { I as ke } from "./icon-button-CehAeZoP.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(
+import { u as Ge } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as Me } from "./use-priority-overflow-c9SjxZkZ.js";
+import { E as Ie } from "./ellipsis-dRo9ouSU.js";
+function Re(s) {
+  s && (s.inert = !0);
+}
+const Ce = Te(
   [
     "ds:inline-flex ds:isolate",
     // Hairline border around the group unifies the children into one
@@ -52,16 +55,16 @@ const ke = Be(
       orientation: "horizontal"
     }
   }
-), Ie = "ds:absolute ds:start-0 ds:top-0 ds:invisible ds:pointer-events-none", _e = Se(
-  (d, y) => {
+), xe = "ds:absolute ds:start-0 ds:top-0 ds:invisible ds:pointer-events-none", Oe = Ke(
+  (s, y) => {
     const {
-      size: m,
+      size: b,
       orientation: c = "horizontal",
       role: i = "group",
       mode: n = "momentary",
       disabled: q = !1,
       intent: S = "outline",
-      overflow: Ce = "none",
+      overflow: Ae = "none",
       className: J,
       children: Q,
       "aria-label": X,
@@ -69,66 +72,66 @@ const ke = Be(
       // 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: Me,
-      defaultValue: Oe,
-      onValueChange: $e,
+      value: Ee,
+      defaultValue: Ue,
+      onValueChange: We,
       ...Z
-    } = d, { t: Re } = Ke(), h = Ce === "menu" && c !== "vertical", [ee, oe] = W(
-      () => n === "toggle-single" ? d.defaultValue ?? "" : n === "toggle-multi" ? d.defaultValue ?? [] : ""
+    } = s, { t: De } = _e(), h = Ae === "menu" && c !== "vertical", [ee, te] = H(
+      () => n === "toggle-single" ? s.defaultValue ?? "" : n === "toggle-multi" ? s.defaultValue ?? [] : ""
     ), g = (() => {
       if (n === "toggle-single") {
-        const e = d;
+        const e = s;
         return e.value !== void 0 ? e.value : ee;
       }
       if (n === "toggle-multi") {
-        const e = d;
+        const e = s;
         return e.value !== void 0 ? e.value : ee;
       }
       return "";
-    })(), I = H(
+    })(), I = F(
       (e) => {
-        var o, r;
+        var t, r;
         if (n === "toggle-single") {
-          const t = d;
-          t.value === void 0 && oe(e), (o = t.onValueChange) == null || o.call(t, e);
+          const o = s;
+          o.value === void 0 && te(e), (t = o.onValueChange) == null || t.call(o, e);
         } else if (n === "toggle-multi") {
-          const t = d;
-          t.value === void 0 && oe(e), (r = t.onValueChange) == null || r.call(t, e);
+          const o = s;
+          o.value === void 0 && te(e), (r = o.onValueChange) == null || r.call(o, e);
         }
       },
-      [n, d]
-    ), b = i === "toolbar" || i === "radiogroup", x = F([]), [v, A] = W(0), te = H(
-      (e, o) => {
-        x.current[e] = o;
+      [n, s]
+    ), m = i === "toolbar" || i === "radiogroup", x = P([]), [v, A] = H(0), oe = F(
+      (e, t) => {
+        x.current[e] = t;
       },
       []
-    ), re = F(null), [G, xe] = W(!1);
-    Pe(() => {
+    ), re = P(null), [M, Ve] = H(!1);
+    Ge(() => {
       if (typeof window > "u") return;
       const e = re.current;
       if (!e) return;
-      const o = window.getComputedStyle(e).direction;
-      xe(o === "rtl");
+      const t = window.getComputedStyle(e).direction;
+      Ve(t === "rtl");
     }, []);
-    const M = H(
+    const O = F(
       (e) => {
-        var P;
-        if (!b) return;
-        const o = x.current.filter(Boolean).length;
-        if (o === 0) return;
-        const r = c === "vertical" ? "ArrowDown" : G ? "ArrowLeft" : "ArrowRight", t = c === "vertical" ? "ArrowUp" : G ? "ArrowRight" : "ArrowLeft";
-        let s = null;
-        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; ) {
+        var T;
+        if (!m) return;
+        const t = x.current.filter(Boolean).length;
+        if (t === 0) return;
+        const r = c === "vertical" ? "ArrowDown" : M ? "ArrowLeft" : "ArrowRight", o = c === "vertical" ? "ArrowUp" : M ? "ArrowRight" : "ArrowLeft";
+        let a = null;
+        if (e.key === r ? a = (v + 1) % t : e.key === o ? a = (v - 1 + t) % t : e.key === "Home" ? a = 0 : e.key === "End" && (a = t - 1), a === null) return;
+        const N = t;
+        let C = 0, u = a;
+        for (; C < N; ) {
           const f = x.current[u];
           if (f && f.getAttribute("aria-disabled") !== "true" && !f.disabled)
             break;
-          u = e.key === t || e.key === "End" ? (u - 1 + o) % o : (u + 1) % o, R += 1;
+          u = e.key === o || e.key === "End" ? (u - 1 + t) % t : (u + 1) % t, C += 1;
         }
-        if (e.preventDefault(), A(u), (P = x.current[u]) == null || P.focus(), i === "radiogroup" && n === "toggle-single") {
-          const f = se.current[u];
+        if (e.preventDefault(), A(u), (T = x.current[u]) == null || T.focus(), i === "radiogroup" && n === "toggle-single") {
+          const f = le.current[u];
           if (f && typeof f == "object" && "props" in f) {
             const j = f.props.value;
             j && j !== g && I(j);
@@ -136,264 +139,274 @@ const ke = Be(
         }
       },
       [
-        b,
+        m,
         c,
-        G,
+        M,
         v,
         i,
         n,
         I,
         g
       ]
-    ), 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;
+    ), D = h ? ye.toArray(Q).filter(G) : [], B = (e) => {
+      const t = e.props["aria-label"];
+      return typeof t == "string" ? t : typeof e.props.tooltip == "string" ? e.props.tooltip : null;
     };
-    F(!1);
-    const Ae = D.map((e) => {
-      const o = e.props["data-overflow-pin"] !== void 0, r = B(e) !== null;
-      return o || !r;
-    }), { containerRef: De, fullRowRef: Ve, triggerProbeRef: Le, visible: ne, overflowing: V } = Te({
+    P(!1);
+    const Le = D.map((e) => {
+      const t = e.props["data-overflow-pin"] !== void 0, r = B(e) !== null;
+      return t || !r;
+    }), { containerRef: Ne, fullRowRef: ne, triggerProbeRef: ie, visible: se, overflowing: V } = Me({
       enabled: h,
       count: D.length,
-      pinned: Ae
-    }), ie = F(null), w = h ? D.filter((e, o) => ne[o]) : be.toArray(Q);
+      pinned: Le
+    }), je = F(
+      (e) => {
+        Re(e), ne(e);
+      },
+      [ne]
+    ), ze = F(
+      (e) => {
+        Re(e), ie(e);
+      },
+      [ie]
+    ), ae = P(null), w = h ? D.filter((e, t) => se[t]) : ye.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
+    const le = P([]);
+    le.current = w;
+    const $ = i === "radiogroup" && n === "toggle-single" ? w.findIndex(
+      (e) => G(e) && e.props.value === g
     ) : -1;
-    ve(() => {
-      O >= 0 && A(O);
-    }, [O]);
-    const C = w.length;
-    ve(() => {
-      var o;
-      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()));
+    he(() => {
+      $ >= 0 && A($);
+    }, [$]);
+    const R = w.length;
+    he(() => {
+      var t;
+      if (!m || !h) return;
+      const e = R + (V ? 1 : 0);
+      e > 0 && v >= e && (A(e - 1), document.activeElement === document.body && ((t = ae.current) == null || t.focus()));
     }, [
-      b,
+      m,
       h,
-      C,
+      R,
       V,
       v
     ]);
-    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 : (
+    const de = (e) => {
+      if (!G(e)) return !1;
+      const t = e.props;
+      return t.disabled === !0 || t.loading === !0;
+    }, ce = w.findIndex((e) => !de(e)), ue = de(w[v]) ? ce !== -1 ? ce : (
       /* 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))
+      V ? R : v
+    ) : v, fe = w.map((e, t) => {
+      if (!G(e))
         return e;
-      const r = e, t = r.props.value, { ariaPressed: s, ariaChecked: N } = Ge(
+      const r = e, o = r.props.value, { ariaPressed: a, ariaChecked: N } = $e(
         n,
         i,
-        t,
+        o,
         g
-      ), R = q === !0, u = r.props.disabled === !0, P = (p) => {
-        var l, z;
-        if (R) {
+      ), C = q === !0, u = r.props.disabled === !0, T = (p) => {
+        var d, z;
+        if (C) {
           p.preventDefault(), p.stopPropagation();
           return;
         }
-        if ((z = (l = r.props).onClick) == null || z.call(l, p), !p.defaultPrevented && t) {
+        if ((z = (d = r.props).onClick) == null || z.call(d, p), !p.defaultPrevented && o) {
           if (n === "toggle-single") {
-            if (g === t) return;
-            I(t);
+            if (g === o) return;
+            I(o);
           } else if (n === "toggle-multi") {
-            const U = g, ze = U.includes(t) ? U.filter((Fe) => Fe !== t) : [...U, t];
-            I(ze);
+            const W = g, Se = W.includes(o) ? W.filter((Be) => Be !== o) : [...W, o];
+            I(Se);
           }
         }
       }, f = (p) => {
-        te(o, p);
-        const l = r.ref;
-        typeof l == "function" ? l(p) : l != null && typeof l == "object" && (l.current = p);
-      }, j = R && !u ? !0 : void 0, Ne = n !== "momentary" || R, je = {
+        oe(t, p);
+        const d = r.ref;
+        typeof d == "function" ? d(p) : d != null && typeof d == "object" && (d.current = p);
+      }, j = C && !u ? !0 : void 0, Fe = n !== "momentary" || C, Pe = {
         intent: r.props.intent ?? S,
-        size: r.props.size ?? m,
+        size: r.props.size ?? b,
         disabled: u,
         "aria-disabled": j,
-        onClick: Ne ? P : r.props.onClick,
-        "aria-pressed": s,
+        onClick: Fe ? T : r.props.onClick,
+        "aria-pressed": a,
         "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 === de ? 0 : -1 : void 0,
+        tabIndex: m ? t === ue ? 0 : -1 : void 0,
         onFocus: (p) => {
-          var l, z;
-          b && A(o), (z = (l = r.props).onFocus) == null || z.call(l, p);
+          var d, z;
+          m && A(t), (z = (d = r.props).onFocus) == null || z.call(d, p);
         },
         ref: f
       };
-      return ye(r, je);
-    }), ue = (e) => {
+      return we(r, Pe);
+    }), pe = (e) => {
       re.current = e, typeof y == "function" ? y(e) : y && typeof y == "object" && (y.current = e);
     };
     if (!h)
-      return /* @__PURE__ */ a(
+      return /* @__PURE__ */ l(
         "div",
         {
-          ref: ue,
+          ref: pe,
           role: i,
           "aria-label": X,
           "aria-labelledby": Y,
           "aria-orientation": i === "toolbar" ? c : void 0,
-          onKeyDown: M,
-          className: ke({ orientation: c, className: J }),
+          onKeyDown: O,
+          className: Ce({ orientation: c, className: J }),
           "data-component": "icon-button-group",
           ...Z,
-          children: ce
+          children: fe
         }
       );
-    const fe = Re("buttonGroup.more", "More options"), L = q === !0, $ = D.map((e, o) => ({ childEl: e, i: o })).filter(({ i: e }) => !ne[e]);
+    const ge = De("buttonGroup.more", "More options"), L = q === !0, E = D.map((e, t) => ({ childEl: e, i: t })).filter(({ i: e }) => !se[e]);
     let K = null;
-    n === "toggle-single" ? K = /* @__PURE__ */ a(
+    n === "toggle-single" ? K = /* @__PURE__ */ l(
       k.RadioGroup,
       {
         value: g,
         onValueChange: (e) => {
           !L && e !== g && I(e);
         },
-        children: $.map(({ childEl: e, i: o }) => /* @__PURE__ */ a(
+        children: E.map(({ childEl: e, i: t }) => /* @__PURE__ */ l(
           k.RadioItem,
           {
             value: e.props.value ?? "",
             disabled: L || e.props.disabled === !0,
             children: B(e)
           },
-          e.key ?? o
+          e.key ?? t
         ))
       }
-    ) : 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(
+    ) : n === "toggle-multi" ? K = E.map(({ childEl: e, i: t }) => {
+      const r = e.props.value, o = g, a = r ? o.includes(r) : !1;
+      return /* @__PURE__ */ l(
         k.CheckboxItem,
         {
-          checked: s,
+          checked: a,
           disabled: L || e.props.disabled === !0,
           onCheckedChange: () => {
-            L || !r || I(s ? t.filter((N) => N !== r) : [...t, r]);
+            L || !r || I(a ? o.filter((N) => N !== r) : [...o, r]);
           },
           children: B(e)
         },
-        e.key ?? o
+        e.key ?? t
       );
-    }) : K = $.map(({ childEl: e, i: o }) => /* @__PURE__ */ a(
+    }) : K = E.map(({ childEl: e, i: t }) => /* @__PURE__ */ l(
       k.Item,
       {
         startIcon: e.props.icon,
         disabled: L || e.props.disabled === !0,
         onSelect: (r) => {
-          var t, s;
-          (s = (t = e.props).onClick) == null || s.call(
-            t,
+          var o, a;
+          (a = (o = e.props).onClick) == null || a.call(
+            o,
             r
           );
         },
         children: B(e)
       },
-      e.key ?? o
+      e.key ?? t
     ));
-    const pe = V ? /* @__PURE__ */ T(k.Root, { children: [
-      /* @__PURE__ */ a(k.Trigger, { asChild: !0, children: /* @__PURE__ */ a(
-        he,
+    const be = V ? /* @__PURE__ */ _(k.Root, { children: [
+      /* @__PURE__ */ l(k.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
+        ke,
         {
-          icon: /* @__PURE__ */ a(we, {}),
+          icon: /* @__PURE__ */ l(Ie, {}),
           intent: S,
-          size: m,
-          "aria-label": fe,
+          size: b,
+          "aria-label": ge,
           ref: (e) => {
-            ie.current = e, te(C, e);
+            ae.current = e, oe(R, e);
           },
-          tabIndex: b ? de === C ? 0 : -1 : void 0,
-          onFocus: b ? () => A(C) : void 0
+          tabIndex: m ? ue === R ? 0 : -1 : void 0,
+          onFocus: m ? () => A(R) : void 0
         }
       ) }),
-      /* @__PURE__ */ a(k.Content, { align: "end", children: K })
-    ] }) : null, ge = ke({ orientation: c }), E = i !== "radiogroup", me = /* @__PURE__ */ T(
+      /* @__PURE__ */ l(k.Content, { align: "end", children: K })
+    ] }) : null, me = Ce({ orientation: c }), U = i !== "radiogroup", ve = /* @__PURE__ */ _(
       "div",
       {
         role: i,
         "aria-label": X,
         "aria-labelledby": Y,
         "aria-orientation": i === "toolbar" ? c : void 0,
-        onKeyDown: E ? M : void 0,
-        className: `${ge} ds:max-w-full`,
+        onKeyDown: U ? O : void 0,
+        className: `${me} ds:max-w-full`,
         children: [
-          ce,
-          E ? pe : null
+          fe,
+          U ? be : null
         ]
       }
     );
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ l(
       "div",
       {
-        ref: ue,
+        ref: pe,
         "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__ */ T("div", { ref: De, className: "ds:block ds:w-full ds:min-w-0", children: [
-          /* @__PURE__ */ a(
+        children: /* @__PURE__ */ _("div", { ref: Ne, className: "ds:block ds:w-full ds:min-w-0", children: [
+          /* @__PURE__ */ l(
             "div",
             {
-              ref: Ve,
+              ref: je,
               "aria-hidden": "true",
               inert: !0,
-              className: `${Ie} ${ge}`,
+              className: `${xe} ${me}`,
               children: D.map(
-                (e, o) => ye(e, {
-                  key: e.key ?? o,
+                (e, t) => we(e, {
+                  key: e.key ?? t,
                   intent: e.props.intent ?? S,
-                  size: e.props.size ?? m,
+                  size: e.props.size ?? b,
                   tabIndex: -1,
                   ref: null
                 })
               )
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ l(
             "span",
             {
-              ref: Le,
+              ref: ze,
               "aria-hidden": "true",
               inert: !0,
-              className: Ie,
-              children: /* @__PURE__ */ a(
-                he,
+              className: xe,
+              children: /* @__PURE__ */ l(
+                ke,
                 {
-                  icon: /* @__PURE__ */ a(we, {}),
+                  icon: /* @__PURE__ */ l(Ie, {}),
                   intent: S,
-                  size: m,
-                  "aria-label": fe,
+                  size: b,
+                  "aria-label": ge,
                   tabIndex: -1
                 }
               )
             }
           ),
-          E ? me : (
+          U ? ve : (
             // 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__ */ T(
+            /* @__PURE__ */ _(
               "div",
               {
                 className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
-                onKeyDown: M,
+                onKeyDown: O,
                 children: [
-                  me,
-                  pe
+                  ve,
+                  be
                 ]
               }
             )
@@ -403,13 +416,13 @@ const ke = Be(
     );
   }
 );
-_e.displayName = "IconButtonGroup";
-function Ge(d, y, m, c) {
-  if (d === "momentary" || !m) return {};
-  const i = d === "toggle-multi" ? c.includes(m) : c === m;
+Oe.displayName = "IconButtonGroup";
+function $e(s, y, b, c) {
+  if (s === "momentary" || !b) return {};
+  const i = s === "toggle-multi" ? c.includes(b) : c === b;
   return y === "radiogroup" ? { ariaChecked: i } : { ariaPressed: i };
 }
 export {
-  _e as I
+  Oe as I
 };
-//# sourceMappingURL=icon-button-group-DkkdIygu.js.map
+//# sourceMappingURL=icon-button-group-DZKC6KGf.js.map