@televet/kibble-ui 5.0.31 → 5.0.32-ne.0

package/dist/chunks/{menu.component-8gDv-vKT.js → menu.component-f_E3xGpR.js}

@@ -1,18 +1,18 @@
 import { j as e } from "./jsx-runtime-C5mzlN2N.js";
-import st, { forwardRef as h, useEffect as B, useId as Y, useRef as le, useCallback as j, useState as L, useMemo as D } from "react";
+import st, { forwardRef as x, useEffect as F, useId as Z, useRef as le, useCallback as j, useState as z, useMemo as K } from "react";
 import { B as T } from "./index-9BerxEcw.js";
-import { B as Z } from "./button.component-BO6oee_V.js";
-import { I as he } from "./icon.component-PV_nHBId.js";
-import { W as ee } from "./text.component-DbJw4Y9-.js";
+import { B as ee } from "./button.component-BO6oee_V.js";
+import { I as xe } from "./icon.component-PV_nHBId.js";
+import { W as te } from "./text.component-DbJw4Y9-.js";
 import { T as ge } from "./tooltip.component-BWCTmG_j.js";
-import { F as z } from "./flex-CX-8gE9T.js";
+import { F as W } from "./flex-CX-8gE9T.js";
 import { W as ct } from "./textInput.component-Co3pNJhe.js";
 import { S as at } from "./spinner.component-BxtAqNQO.js";
 import { u as it } from "./usePortalContentRef-DO_jc4W9.js";
-import { u as te, s as fe, c as Me, d as Pe, P as ut } from "./index-DcmJgLUo.js";
+import { u as ne, s as fe, c as Me, d as Pe, P as ut } from "./index-DcmJgLUo.js";
 import { c as lt } from "./create-slot-recipe-context-D_FXDJGp.js";
 import { d as dt } from "./icons-CEVtpQAi.js";
-import { a as _, d as g, b as O, e as pt, u as mt, f as xt, g as ht, n as gt } from "./use-locale-context-DmcfCmf9.js";
+import { a as _, d as g, b as $, e as pt, u as mt, f as ht, g as xt, n as gt } from "./use-locale-context-DmcfCmf9.js";
 import { m as ft, c as Mt } from "./index-CmREf48Z.js";
 import { a6 as p } from "./index-BcafYtXX.js";
 import { W as Pt } from "./checkbox.component-BoqZIgZE.js";
@@ -21,26 +21,26 @@ const [ve, m] = _({
   hookName: "useMenuContext",
   providerName: "<MenuProvider />",
   strict: !1
-}), je = h((o, n) => {
+}), Ce = x((o, n) => {
   const t = m(), s = p(t.getArrowProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-je.displayName = "MenuArrow";
-const Ce = h((o, n) => {
+Ce.displayName = "MenuArrow";
+const je = x((o, n) => {
   const t = m(), s = p(t.getArrowTipProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-Ce.displayName = "MenuArrowTip";
-const [ne, Zt] = _({
+je.displayName = "MenuArrowTip";
+const [oe, Zt] = _({
   name: "MenuItemContext",
   hookName: "useMenuItemContext",
   providerName: "<MenuItemProvider />"
-}), [oe, Ie] = _({
+}), [re, Ie] = _({
   name: "MenuItemPropsContext",
   hookName: "useMenuItemPropsContext",
   providerName: "<MenuItemPropsProvider />"
-}), be = h((o, n) => {
-  const [t, s] = O()(o, [
+}), be = x((o, n) => {
+  const [t, s] = $()(o, [
     "checked",
     "closeOnSelect",
     "disabled",
@@ -51,66 +51,66 @@ const [ne, Zt] = _({
     ...t,
     type: "checkbox"
   }, u = m(), a = p(u.getOptionItemProps(c), s), i = u.getOptionItemState(c);
-  return /* @__PURE__ */ e.jsx(oe, { value: c, children: /* @__PURE__ */ e.jsx(ne, { value: i, children: /* @__PURE__ */ e.jsx(g.div, { ...a, ref: n }) }) });
+  return /* @__PURE__ */ e.jsx(re, { value: c, children: /* @__PURE__ */ e.jsx(oe, { value: i, children: /* @__PURE__ */ e.jsx(g.div, { ...a, ref: n }) }) });
 });
 be.displayName = "MenuCheckboxItem";
-const ke = h((o, n) => {
-  const t = m(), s = te(), c = p(t.getContentProps(), s.getPresenceProps(), o);
+const ke = x((o, n) => {
+  const t = m(), s = ne(), c = p(t.getContentProps(), s.getPresenceProps(), o);
   return s.unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...c, ref: pt(s.ref, n) });
 });
 ke.displayName = "MenuContent";
-const Se = h((o, n) => {
+const Se = x((o, n) => {
   const t = m(), s = p(t.getContextTriggerProps(), o);
   return /* @__PURE__ */ e.jsx(g.button, { ...s, ref: n });
 });
 Se.displayName = "MenuContextTrigger";
-const we = h((o, n) => {
+const we = x((o, n) => {
   const t = m(), s = p(t.getIndicatorProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
 we.displayName = "MenuIndicator";
-const Ne = h((o, n) => {
-  const [t, s] = O()(o, [
+const Ne = x((o, n) => {
+  const [t, s] = $()(o, [
     "closeOnSelect",
     "disabled",
     "value",
     "valueText",
     "onSelect"
   ]), c = m(), u = p(c.getItemProps(t), s), a = c.getItemState(t);
-  return B(() => c.addItemListener({ id: a.id, onSelect: t.onSelect }), [a.id, t.onSelect]), /* @__PURE__ */ e.jsx(oe, { value: t, children: /* @__PURE__ */ e.jsx(ne, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) }) });
+  return F(() => c.addItemListener({ id: a.id, onSelect: t.onSelect }), [a.id, t.onSelect]), /* @__PURE__ */ e.jsx(re, { value: t, children: /* @__PURE__ */ e.jsx(oe, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) }) });
 });
 Ne.displayName = "MenuItem";
 const [ye, Ae] = _({
   name: "MenuItemGroupContext",
   hookName: "useMenuItemGroupContext",
   providerName: "<MenuItemGroupProvider />"
-}), Te = h((o, n) => {
-  const [t, s] = O()(o, ["id"]), c = m(), a = { id: Y(), ...t }, i = p(c.getItemGroupProps(a), s);
+}), Te = x((o, n) => {
+  const [t, s] = $()(o, ["id"]), c = m(), a = { id: Z(), ...t }, i = p(c.getItemGroupProps(a), s);
   return /* @__PURE__ */ e.jsx(ye, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
 });
 Te.displayName = "MenuItemGroup";
-const Ge = h((o, n) => {
+const Ge = x((o, n) => {
   const t = m(), s = Ae(), c = p(t.getItemGroupLabelProps({ htmlFor: s.id }), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
 Ge.displayName = "MenuItemGroupLabel";
-const _e = h((o, n) => {
+const Oe = x((o, n) => {
   const t = m(), s = Ie(), c = p(t.getItemIndicatorProps(s), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
-_e.displayName = "MenuItemIndicator";
-const Oe = h((o, n) => {
+Oe.displayName = "MenuItemIndicator";
+const _e = x((o, n) => {
   const t = m(), s = Ie(), c = p(t.getItemTextProps(s), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
-Oe.displayName = "MenuItemText";
-const $e = h((o, n) => {
+_e.displayName = "MenuItemText";
+const $e = x((o, n) => {
   const t = m(), s = p(t.getPositionerProps(), o);
-  return te().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+  return ne().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
 $e.displayName = "MenuPositioner";
-const Re = h((o, n) => {
-  const [t, s] = O()(o, [
+const Re = x((o, n) => {
+  const [t, s] = $()(o, [
     "closeOnSelect",
     "disabled",
     "value",
@@ -121,45 +121,45 @@ const Re = h((o, n) => {
     type: "radio",
     onCheckedChange: () => u.onValueChange?.({ value: t.value })
   }, i = p(c.getOptionItemProps(a), s), f = c.getOptionItemState(a);
-  return /* @__PURE__ */ e.jsx(oe, { value: a, children: /* @__PURE__ */ e.jsx(ne, { value: f, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) }) });
+  return /* @__PURE__ */ e.jsx(re, { value: a, children: /* @__PURE__ */ e.jsx(oe, { value: f, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) }) });
 });
 Re.displayName = "MenuRadioItem";
-const Le = h((o, n) => {
-  const [t, s] = O()(o, [
+const Le = x((o, n) => {
+  const [t, s] = $()(o, [
     "id",
     "onValueChange",
     "value"
-  ]), c = m(), a = { id: Y(), ...t }, i = p(c.getItemGroupProps({ id: a.id }), s);
+  ]), c = m(), a = { id: Z(), ...t }, i = p(c.getItemGroupProps({ id: a.id }), s);
   return /* @__PURE__ */ e.jsx(ye, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
 });
 Le.displayName = "MenuRadioItemGroup";
 const Be = (o) => {
   const n = le(o), t = le(!1);
-  B(() => {
+  F(() => {
     n.current = o;
-  }), B(() => {
+  }), F(() => {
     t.current !== !0 && (t.current = !0, n.current());
   }, []);
 }, vt = (o) => {
-  const n = Y(), { getRootNode: t } = mt(), { dir: s } = xt(), c = {
+  const n = Z(), { getRootNode: t } = mt(), { dir: s } = ht(), c = {
     id: n,
     dir: s,
     getRootNode: t,
     ...o
-  }, u = ht(ft, c);
+  }, u = xt(ft, c);
   return { api: Mt(u, gt), service: u };
 }, [ze, Fe] = _({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
-}), [We, jt] = _({
+}), [We, Ct] = _({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
-}), Ct = (o) => {
-  const [n, t] = fe(o), [s, c] = O()(t, [
+}), jt = (o) => {
+  const [n, t] = fe(o), [s, c] = $()(t, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -181,26 +181,26 @@ const Be = (o) => {
     "open",
     "positioning",
     "typeahead"
-  ]), u = m(), a = Fe(), { api: i, service: f } = vt(s), N = Me(p({ present: i.open }, n));
+  ]), u = m(), a = Fe(), { api: i, service: f } = vt(s), S = Me(p({ present: i.open }, n));
   Be(() => {
     a && u && (u.setChild(f), i.setParent(a));
   });
-  const y = j(() => u?.getTriggerItemProps(i), [i, u]);
-  return /* @__PURE__ */ e.jsx(We, { value: y, children: /* @__PURE__ */ e.jsx(ze, { value: f, children: /* @__PURE__ */ e.jsx(ve, { value: i, children: /* @__PURE__ */ e.jsx(Pe, { value: N, ...c }) }) }) });
+  const N = j(() => u?.getTriggerItemProps(i), [i, u]);
+  return /* @__PURE__ */ e.jsx(We, { value: N, children: /* @__PURE__ */ e.jsx(ze, { value: f, children: /* @__PURE__ */ e.jsx(ve, { value: i, children: /* @__PURE__ */ e.jsx(Pe, { value: S, ...c }) }) }) });
 }, It = (o) => {
   const n = m(), t = Fe(), [s, { value: c, children: u }] = fe(o), { api: a, service: i } = c, f = Me(p({ present: a.open }, s));
   Be(() => {
     t && n && (n.setChild(i), a.setParent(t));
   });
-  const N = j(() => n?.getTriggerItemProps(a), [a, n]);
-  return /* @__PURE__ */ e.jsx(We, { value: N, children: /* @__PURE__ */ e.jsx(ze, { value: i, children: /* @__PURE__ */ e.jsx(ve, { value: a, children: /* @__PURE__ */ e.jsx(Pe, { value: f, children: u }) }) }) });
-}, Ee = h((o, n) => {
+  const S = j(() => n?.getTriggerItemProps(a), [a, n]);
+  return /* @__PURE__ */ e.jsx(We, { value: S, children: /* @__PURE__ */ e.jsx(ze, { value: i, children: /* @__PURE__ */ e.jsx(ve, { value: a, children: /* @__PURE__ */ e.jsx(Pe, { value: f, children: u }) }) }) });
+}, Ee = x((o, n) => {
   const t = m(), s = p(t.getSeparatorProps(), o);
   return /* @__PURE__ */ e.jsx(g.hr, { ...s, ref: n });
 });
 Ee.displayName = "MenuSeparator";
-const De = h((o, n) => {
-  const t = m(), s = te(), c = p(
+const De = x((o, n) => {
+  const t = m(), s = ne(), c = p(
     {
       ...t.getTriggerProps(),
       "aria-controls": s.unmounted ? void 0 : t.getTriggerProps()["aria-controls"]
@@ -210,80 +210,80 @@ const De = h((o, n) => {
   return /* @__PURE__ */ e.jsx(g.button, { ...c, ref: n });
 });
 De.displayName = "MenuTrigger";
-const Ve = h((o, n) => {
-  const t = jt(), s = p(t?.() ?? {}, o);
+const Ve = x((o, n) => {
+  const t = Ct(), s = p(t?.() ?? {}, o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
 Ve.displayName = "MenuTriggerItem";
 const {
   withRootProvider: He,
-  withContext: x
+  withContext: h
 } = lt({ key: "menu" });
 He(
   It
 );
-const bt = He(Ct, {
+const bt = He(jt, {
   defaultProps: { lazyMount: !0, unmountOnExit: !0 }
-}), kt = x(
+}), kt = h(
   De,
   "trigger",
   { forwardAsChild: !0 }
 );
-x(Se, "contextTrigger", { forwardAsChild: !0 });
-const St = x(
+h(Se, "contextTrigger", { forwardAsChild: !0 });
+const St = h(
   $e,
   "positioner",
   { forwardAsChild: !0 }
 );
-x(
+h(
   Ee,
   "separator",
   { forwardAsChild: !0 }
 );
-const wt = x(
+const wt = h(
   ke,
   "content",
   { forwardAsChild: !0 }
-), Nt = x(
-  Ce,
+), Nt = h(
+  je,
   "arrowTip",
   { forwardAsChild: !0 }
 );
-x(
-  je,
+h(
+  Ce,
   "arrow",
   { forwardAsChild: !0, defaultProps: { children: /* @__PURE__ */ e.jsx(Nt, {}) } }
 );
-x(
+h(
   we,
   "indicator",
   { forwardAsChild: !0 }
 );
-const yt = x(
+const yt = h(
   Te,
   "itemGroup",
   { forwardAsChild: !0 }
-), At = x(Ge, "itemGroupLabel", { forwardAsChild: !0 }), de = x(
+), At = h(Ge, "itemGroupLabel", { forwardAsChild: !0 }), de = h(
   Ne,
   "item",
   { forwardAsChild: !0 }
-), Tt = x(Ve, "item", { forwardAsChild: !0 });
-x(
-  Oe,
+), Tt = h(Ve, "item", { forwardAsChild: !0 });
+h(
+  _e,
   "itemText",
   { forwardAsChild: !0 }
 );
-x(
+h(
   "kbd",
   "itemCommand"
 );
-x(_e, "itemIndicator", {
+h(Oe, "itemIndicator", {
   forwardAsChild: !0,
   defaultProps: { children: /* @__PURE__ */ e.jsx(dt, { boxSize: "4" }) }
 });
-x(be, "item", { forwardAsChild: !0 });
-x(Le, "itemGroup", { forwardAsChild: !0 });
-x(
+h(be, "item", { forwardAsChild: !0 });
+h(Le, "itemGroup", { forwardAsChild: !0 });
+h(
   Re,
   "item",
   { forwardAsChild: !0 }
@@ -298,7 +298,7 @@ const Ke = ({
   ["data-testid"]: a = "kibble-menu-button",
   ...i
 }) => /* @__PURE__ */ e.jsxs(
-  Z,
+  ee,
   {
     className: "Menu__Button",
     "data-testid": a,
@@ -311,7 +311,7 @@ const Ke = ({
     },
     children: [
       t && /* @__PURE__ */ e.jsx(
-        ee,
+        te,
         {
           className: "Menu__ButtonText",
           "data-testid": `${a}-text`,
@@ -323,16 +323,16 @@ const Ke = ({
           children: t
         }
       ),
-      !o && /* @__PURE__ */ e.jsx(z, { className: "Menu__ButtonCaret", "data-testid": `${a}-caret`, children: /* @__PURE__ */ e.jsx(he, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" }) })
+      !o && /* @__PURE__ */ e.jsx(W, { className: "Menu__ButtonCaret", "data-testid": `${a}-caret`, children: /* @__PURE__ */ e.jsx(xe, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" }) })
     ]
   }
 ), Gt = ({ tooltipProps: o, isMenuOpen: n, ...t }) => {
-  const [s, c] = L(!1), u = j(() => {
+  const [s, c] = z(!1), u = j(() => {
     n || c(!0);
   }, [n]), a = j(() => {
     n || c(!1);
   }, [n]);
-  return B(() => {
+  return F(() => {
     n && c(!1);
   }, [n]), /* @__PURE__ */ e.jsx(ge, { label: t.text || "", open: s && !n, ...o, children: /* @__PURE__ */ e.jsx(
     T,
@@ -345,7 +345,7 @@ const Ke = ({
       children: /* @__PURE__ */ e.jsx(Ke, { ...t })
     }
   ) });
-}, _t = ({
+}, Ot = ({
   label: o,
   leftElement: n,
   onSelect: t,
@@ -355,38 +355,42 @@ const Ke = ({
   ["data-testid"]: a = "kibble-menu-item",
   ...i
 }) => {
-  const [f, N] = L(!1), y = j(() => {
+  const [f, S] = z(!1), N = j(() => {
     t && t(i.value);
   }, [t, i.value]);
   if (c === "submenu") {
     const {
-      valueText: S,
-      listProps: C,
-      positionerProps: M,
+      valueText: w,
+      listProps: I,
+      positioning: M,
+      positionerProps: y,
       portalled: A = !0,
-      open: k,
-      lazyMount: I = !0,
-      unmountOnExit: V = !0
-    } = i;
+      open: P,
+      onOpenChange: q,
+      lazyMount: b = !0,
+      unmountOnExit: R = !0
+    } = i, E = (G) => {
+      P === void 0 && !G.open && S(!1), q?.(G);
+    };
     return /* @__PURE__ */ e.jsx(
-      Ot,
+      _t,
       {
-        lazyMount: I,
-        unmountOnExit: V,
+        lazyMount: b,
+        unmountOnExit: R,
         submenuTrigger: /* @__PURE__ */ e.jsxs(
           Tt,
           {
             className: "Menu__Item--Submenu",
             "data-testid": `${a}-submenu`,
             justifyContent: "space-between",
-            "aria-valuetext": S,
+            "aria-valuetext": w,
             position: "relative",
             onClick: () => {
-              k !== void 0 && t ? t(i.value) : N(!f);
+              P !== void 0 && t ? t(i.value) : S(!f);
             },
             children: [
               /* @__PURE__ */ e.jsx(
-                X,
+                Y,
                 {
                   label: o,
                   leftElement: n,
@@ -394,40 +398,42 @@ const Ke = ({
                   variant: u
                 }
               ),
-              /* @__PURE__ */ e.jsx(he, { name: "chevronRight", size: "sm" })
+              /* @__PURE__ */ e.jsx(xe, { name: "chevronRight", size: "sm" })
             ]
           }
         ),
         portalled: A,
-        open: k !== void 0 ? k : f,
-        listProps: C,
-        positionerProps: M
+        open: P !== void 0 ? P : f,
+        onOpenChange: E,
+        listProps: I,
+        positioning: M,
+        positionerProps: y
       }
     );
   }
   if (c === "checkbox") {
-    const { checked: S, value: C, disabled: M, tooltipLabel: A, ...k } = i;
+    const { checked: w, value: I, disabled: M, tooltipLabel: y, ...A } = i;
     return /* @__PURE__ */ e.jsxs(
       de,
       {
         className: "Menu__Item--Checkbox",
         "data-testid": `${a}-checkbox`,
-        value: C,
+        value: I,
         closeOnSelect: !1,
-        onSelect: M ? void 0 : y,
+        onSelect: M ? void 0 : N,
         gap: 3,
         disabled: M,
-        ...k,
+        ...A,
         children: [
-          /* @__PURE__ */ e.jsx(Pt, { checked: !!S, disabled: M, size: "md", fullWidth: !1 }),
+          /* @__PURE__ */ e.jsx(Pt, { checked: !!w, disabled: M, size: "md", fullWidth: !1 }),
           /* @__PURE__ */ e.jsx(
-            X,
+            Y,
             {
               label: o,
               leftElement: n,
               shouldTruncateText: s,
               variant: u,
-              tooltipLabel: A
+              tooltipLabel: y
             }
           )
         ]
@@ -435,41 +441,41 @@ const Ke = ({
     );
   }
   if (c === "default") {
-    const { selected: S = !1, disabled: C, value: M, tooltipLabel: A, ...k } = i;
+    const { selected: w = !1, disabled: I, value: M, tooltipLabel: y, ...A } = i;
     return /* @__PURE__ */ e.jsx(
       de,
       {
         className: "Menu__Item--Default",
         "data-testid": `${a}-default`,
         value: M,
-        onSelect: C ? void 0 : y,
-        disabled: C,
-        ...S && { bgColor: "background.secondaryAlpha.hover" },
-        ...k,
+        onSelect: I ? void 0 : N,
+        disabled: I,
+        ...w && { bgColor: "background.secondaryAlpha.hover" },
+        ...A,
         children: /* @__PURE__ */ e.jsx(
-          X,
+          Y,
           {
             label: o,
             leftElement: n,
             shouldTruncateText: s,
-            variant: S ? "info" : u,
-            tooltipLabel: A
+            variant: w ? "info" : u,
+            tooltipLabel: y
           }
         )
       }
     );
   }
   return /* @__PURE__ */ e.jsx(e.Fragment, {});
-}, X = ({
+}, Y = ({
   label: o,
   leftElement: n,
   shouldTruncateText: t,
   variant: s,
   tooltipLabel: c
 }) => {
-  const u = /* @__PURE__ */ e.jsxs(z, { className: "Menu__ItemLabel", alignItems: "center", gap: 3, children: [
+  const u = /* @__PURE__ */ e.jsxs(W, { className: "Menu__ItemLabel", alignItems: "center", gap: 3, children: [
     n,
-    typeof o == "string" ? /* @__PURE__ */ e.jsx(ee, { size: "sm", truncated: t, variant: s, children: o }) : o
+    typeof o == "string" ? /* @__PURE__ */ e.jsx(te, { size: "sm", truncated: t, variant: s, children: o }) : o
   ] });
   return c ? /* @__PURE__ */ e.jsx(ge, { label: c, children: u }) : u;
 }, pe = ({
@@ -479,12 +485,12 @@ const Ke = ({
   ["data-testid"]: s = "kibble-menu-toggle-buttons"
 }) => {
   const c = !!o;
-  return /* @__PURE__ */ e.jsx(T, { className: "Menu__ToggleButtons", "data-testid": s, ...c && { textAlign: "right", w: "50%" }, children: c ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(xe, { hasSelectedItems: n, groupName: o, onToggle: t }) : /* @__PURE__ */ e.jsx(me, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(z, { justifyContent: "space-between", children: [
+  return /* @__PURE__ */ e.jsx(T, { className: "Menu__ToggleButtons", "data-testid": s, ...c && { textAlign: "right", w: "50%" }, children: c ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(he, { hasSelectedItems: n, groupName: o, onToggle: t }) : /* @__PURE__ */ e.jsx(me, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(W, { justifyContent: "space-between", children: [
     /* @__PURE__ */ e.jsx(me, { groupName: o, onToggle: t }),
-    /* @__PURE__ */ e.jsx(xe, { hasSelectedItems: n, groupName: o, onToggle: t })
+    /* @__PURE__ */ e.jsx(he, { hasSelectedItems: n, groupName: o, onToggle: t })
   ] }) });
-}, me = ({ groupName: o, onToggle: n }) => /* @__PURE__ */ e.jsx(Z, { variant: "ghost", size: "xs", onClick: () => n({ groupName: o, clear: !1 }), children: "Select All" }), xe = ({ hasSelectedItems: o, groupName: n, onToggle: t }) => /* @__PURE__ */ e.jsx(
-  Z,
+}, me = ({ groupName: o, onToggle: n }) => /* @__PURE__ */ e.jsx(ee, { variant: "ghost", size: "xs", onClick: () => n({ groupName: o, clear: !1 }), children: "Select All" }), he = ({ hasSelectedItems: o, groupName: n, onToggle: t }) => /* @__PURE__ */ e.jsx(
+  ee,
   {
     variant: "ghostNeutral",
     iconName: "arrowCircle",
@@ -493,7 +499,7 @@ const Ke = ({
     onClick: () => t({ groupName: n, clear: !0 }),
     children: "Clear All"
   }
-), Ot = ({
+), _t = ({
   buttonProps: o,
   listProps: n,
   positionerProps: t,
@@ -504,89 +510,89 @@ const Ke = ({
   ["data-testid"]: i = "kibble-menu",
   ...f
 }) => {
-  const { contentRef: N } = it(), {
-    canSelectAll: y,
-    canSelectGroups: S,
-    emptyState: C = "No results found",
+  const { contentRef: S } = it(), {
+    canSelectAll: N,
+    canSelectGroups: w,
+    emptyState: I = "No results found",
     groupSortOrder: M,
-    loading: A,
-    maxH: k = "480px",
-    menuItems: I = [],
-    minW: V = "240px",
-    onSearch: w,
-    onSelect: H,
-    onSelectAll: re,
-    searchable: K,
+    loading: y,
+    maxH: A = "480px",
+    menuItems: P = [],
+    minW: q = "240px",
+    onSearch: b,
+    onSelect: R,
+    onSelectAll: E,
+    searchable: G,
     searchPlaceholder: qe = "Search...",
     shouldTruncateText: Je,
     ...se
-  } = n || {}, [Qe, Ue] = L(!1), [q, J] = L(""), [F, Q] = L(I), ce = D(() => {
+  } = n || {}, [Qe, Ue] = z(!1), [J, Q] = z(""), [D, U] = z(P), ce = K(() => {
     const r = {};
-    return F?.forEach((l) => {
-      const d = l.groupLabel || "default", P = l.type === "checkbox" ? "checkbox" : "default";
-      r[d] || (r[d] = {}), r[d][P] || (r[d][P] = []), r[d][P].push(l);
+    return D?.forEach((l) => {
+      const d = l.groupLabel || "default", v = l.type === "checkbox" ? "checkbox" : "default";
+      r[d] || (r[d] = {}), r[d][v] || (r[d][v] = []), r[d][v].push(l);
     }), r;
-  }, [F]), ae = D(() => {
+  }, [D]), ae = K(() => {
     const r = Object.entries(ce);
     return !M || M.length === 0 ? r : r.sort(([l], [d]) => {
-      const P = M.indexOf(l), v = M.indexOf(d);
-      return P !== -1 && v !== -1 ? P - v : P !== -1 ? -1 : v !== -1 ? 1 : 0;
+      const v = M.indexOf(l), C = M.indexOf(d);
+      return v !== -1 && C !== -1 ? v - C : v !== -1 ? -1 : C !== -1 ? 1 : 0;
     });
-  }, [ce, M]), $ = D(() => I?.filter((r) => r.type === "checkbox") || [], [I]), U = j(
-    (r) => $.some((l) => l.value === r && l.checked),
-    [$]
-  ), b = D(() => $.filter((r) => r.checked), [$]), ie = j(
+  }, [ce, M]), L = K(() => P?.filter((r) => r.type === "checkbox") || [], [P]), X = j(
+    (r) => L.some((l) => l.value === r && l.checked),
+    [L]
+  ), k = K(() => L.filter((r) => r.checked), [L]), ie = j(
     ({ groupName: r, clear: l }) => {
       let d;
-      const P = F.filter((v) => v.type === "checkbox" && !v.disabled);
+      const v = D.filter((C) => C.type === "checkbox" && !C.disabled);
       if (r) {
-        const v = P.filter((W) => W.groupLabel === r);
-        d = l ? b.filter((W) => W.groupLabel !== r) : (
+        const C = v.filter((V) => V.groupLabel === r);
+        d = l ? k.filter((V) => V.groupLabel !== r) : (
           // Otherwise, add the items in the group to the selected items
-          [.../* @__PURE__ */ new Set([...b, ...v])]
+          [.../* @__PURE__ */ new Set([...k, ...C])]
         );
       } else
-        d = l ? [] : P.map((v) => ({ ...v, checked: !0 }));
-      re?.({ allSelectedItems: d });
+        d = l ? [] : v.map((C) => ({ ...C, checked: !0 }));
+      E?.({ allSelectedItems: d });
     },
-    [re, F, b]
+    [E, D, k]
   ), Xe = j(
     (r) => {
       if (r.type === "checkbox") {
-        const l = U(r.value) ? b.filter((d) => d.value !== r.value) : [...b, r];
+        const l = X(r.value) ? k.filter((d) => d.value !== r.value) : [...k, r];
         if (r.onSelect) {
           r.onSelect(r.value);
           return;
         }
-        H?.({ item: r, allSelectedItems: l });
+        R?.({ item: r, allSelectedItems: l });
         return;
       }
       if (r.onSelect) {
         r.onSelect(r.value);
         return;
       }
-      H?.({ item: r, allSelectedItems: [r] });
+      R?.({ item: r, allSelectedItems: [r] });
     },
-    [H, U, b]
+    [R, X, k]
   ), ue = j((r, l) => r === "" || !r ? l : l.filter((d) => !!(typeof d.label == "string" ? d.label : d.valueText)?.toLowerCase().includes(r.toLowerCase())), []), Ye = j(
     (r) => {
       const l = r.target.value;
-      J(l), w && w(r);
+      Q(l), b && b(r);
     },
-    [w]
+    [b]
   ), Ze = j(() => {
-    J(""), w && w({
+    Q(""), b && b({
       target: { value: "" }
     });
-  }, [w]), et = j(
+  }, [b]), et = j(
     (r) => {
-      Ue(r), r || (J(""), Q(I)), a && a({ open: r, allSelectedItems: b });
+      Ue(r), r || (Q(""), U(P)), a && a({ open: r, allSelectedItems: k });
     },
-    [I, a, b]
+    [P, a, k]
   );
-  return B(() => {
-    Q(w ? I : ue(q, I));
-  }, [q, w, ue, I]), /* @__PURE__ */ e.jsxs(
+  return F(() => {
+    U(b ? P : ue(J, P));
+  }, [J, b, ue, P]), /* @__PURE__ */ e.jsxs(
     bt,
     {
       lazyMount: u,
@@ -597,20 +603,20 @@ const Ke = ({
       ...f,
       children: [
         c || /* @__PURE__ */ e.jsx(kt, { asChild: !0, className: "Menu__Trigger", "data-testid": `${i}-trigger`, children: o?.showTooltip ? /* @__PURE__ */ e.jsx(Gt, { isMenuOpen: Qe, ...o }) : /* @__PURE__ */ e.jsx(Ke, { ...o }) }),
-        /* @__PURE__ */ e.jsx(ut, { disabled: !s, container: N || void 0, children: /* @__PURE__ */ e.jsx(St, { className: "Menu", "data-testid": i, ...t, children: /* @__PURE__ */ e.jsxs(
+        /* @__PURE__ */ e.jsx(ut, { disabled: !s, container: S || void 0, children: /* @__PURE__ */ e.jsx(St, { className: "Menu", "data-testid": i, ...t, children: /* @__PURE__ */ e.jsxs(
           wt,
           {
             className: "Menu__Content",
             "data-testid": `${i}-content`,
-            maxH: k,
-            minW: V,
+            maxH: A,
+            minW: q,
             ...se,
-            ...K && { pt: "0" },
+            ...G && { pt: "0" },
             onClick: (r) => {
               r.stopPropagation(), se?.onClick?.(r);
             },
             children: [
-              K && /* @__PURE__ */ e.jsx(
+              G && /* @__PURE__ */ e.jsx(
                 T,
                 {
                   className: "Menu__SearchBarContainer",
@@ -629,7 +635,7 @@ const Ke = ({
                       placeholder: qe,
                       onChange: Ye,
                       size: "sm",
-                      value: q,
+                      value: J,
                       clearable: !0,
                       onClear: Ze,
                       onKeyDown: (r) => {
@@ -639,31 +645,31 @@ const Ke = ({
                   )
                 }
               ),
-              y && /* @__PURE__ */ e.jsx(
+              N && /* @__PURE__ */ e.jsx(
                 T,
                 {
                   className: "Menu__CheckboxGroupHeader",
                   "data-testid": `${i}-checkbox-group-header`,
                   px: 3,
-                  mt: K ? 1 : 2,
-                  children: y && !!$.length && /* @__PURE__ */ e.jsx(
+                  mt: G ? 1 : 2,
+                  children: N && !!L.length && /* @__PURE__ */ e.jsx(
                     pe,
                     {
                       onToggle: ie,
-                      hasSelectedItems: !!b.length
+                      hasSelectedItems: !!k.length
                     }
                   )
                 }
               ),
-              A && /* @__PURE__ */ e.jsx(z, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(at, { fullScreen: !0 }) }),
+              y && /* @__PURE__ */ e.jsx(W, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(at, { fullScreen: !0 }) }),
               /* @__PURE__ */ e.jsx(T, { className: "Menu__List", "data-testid": `${i}-list`, children: ae.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: ae.map(([r, l]) => {
-                const d = r === "default", P = Object.keys(l), v = d ? st.Fragment : yt, tt = l.checkbox?.map((R) => R.value)?.some(
-                  (R) => b.some((E) => E.value === R && E.checked)
+                const d = r === "default", v = Object.keys(l), C = d ? st.Fragment : yt, tt = l.checkbox?.map((B) => B.value)?.some(
+                  (B) => k.some((H) => H.value === B && H.checked)
                 );
-                return /* @__PURE__ */ e.jsxs(v, { children: [
-                  !d && /* @__PURE__ */ e.jsx(At, { children: /* @__PURE__ */ e.jsxs(z, { alignItems: "center", justifyContent: "space-between", children: [
+                return /* @__PURE__ */ e.jsxs(C, { children: [
+                  !d && /* @__PURE__ */ e.jsx(At, { children: /* @__PURE__ */ e.jsxs(W, { alignItems: "center", justifyContent: "space-between", children: [
                     r,
-                    S && P.includes("checkbox") && /* @__PURE__ */ e.jsx(
+                    w && v.includes("checkbox") && /* @__PURE__ */ e.jsx(
                       pe,
                       {
                         groupName: r,
@@ -673,28 +679,28 @@ const Ke = ({
                     )
                   ] }) }),
                   Object.entries(l).map(
-                    ([R, E]) => E.map((G, nt) => {
-                      const { groupLabel: ot, ...rt } = G;
+                    ([B, H]) => H.map((O, nt) => {
+                      const { groupLabel: ot, ...rt } = O;
                       return /* @__PURE__ */ e.jsx(
-                        _t,
+                        Ot,
                         {
                           shouldTruncateText: Je,
-                          ...G.type === "checkbox" && {
-                            checked: U(G.value)
+                          ...O.type === "checkbox" && {
+                            checked: X(O.value)
                           },
-                          onSelect: () => Xe(G),
-                          ...G.type === "submenu" && {
+                          onSelect: () => Xe(O),
+                          ...O.type === "submenu" && {
                             positionerProps: t
                           },
                           ...rt,
-                          "data-testid": `${i}-item-${G.label}`
+                          "data-testid": `${i}-item-${O.label}`
                         },
-                        `menu-item-${ot}-${R}-${nt}`
+                        `menu-item-${ot}-${B}-${nt}`
                       );
                     })
                   )
                 ] }, r);
-              }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(T, { p: 3, children: typeof C == "string" ? /* @__PURE__ */ e.jsx(T, { textAlign: "center", children: /* @__PURE__ */ e.jsx(ee, { size: "sm", variant: "subtle", "data-testid": `${i}-empty-state`, children: C }) }) : C }) }) })
+              }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(T, { p: 3, children: typeof I == "string" ? /* @__PURE__ */ e.jsx(T, { textAlign: "center", children: /* @__PURE__ */ e.jsx(te, { size: "sm", variant: "subtle", "data-testid": `${i}-empty-state`, children: I }) }) : I }) }) })
             ]
           }
         ) }) })
@@ -703,6 +709,6 @@ const Ke = ({
   );
 };
 export {
-  Ot as M
+  _t as M
 };
-//# sourceMappingURL=menu.component-8gDv-vKT.js.map
+//# sourceMappingURL=menu.component-f_E3xGpR.js.map