@televet/kibble-ui 5.0.2-beta.menu.6 → 5.0.2-beta.menu.8

package/dist/chunks/menu.component-BIFydd_a.js

@@ -0,0 +1,708 @@
+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 { 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-CdTyTFds.js";
+import { T as ge } from "./tooltip.component-C_NS-AoH.js";
+import { F as z } from "./flex-CX-8gE9T.js";
+import { W as ct } from "./textInput.component-BC0Hi8R_.js";
+import { S as at } from "./spinner.component-B3dkvoO9.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-C9UYIjEB.js";
+import { c as lt } from "./create-slot-recipe-context-D_FXDJGp.js";
+import { d as dt } from "./icons-CoSqruIn.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-Bw4Gg9Z0.js";
+import { m as ft, c as Mt } from "./index-CbVKVxMW.js";
+import { a6 as p } from "./index-fHSGm2nC.js";
+import { W as Pt } from "./checkbox.component-DE35wBj-.js";
+const [ve, m] = _({
+  name: "MenuContext",
+  hookName: "useMenuContext",
+  providerName: "<MenuProvider />",
+  strict: !1
+}), je = h((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) => {
+  const t = m(), s = p(t.getArrowTipProps(), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+Ce.displayName = "MenuArrowTip";
+const [ne, Zt] = _({
+  name: "MenuItemContext",
+  hookName: "useMenuItemContext",
+  providerName: "<MenuItemProvider />"
+}), [oe, Ie] = _({
+  name: "MenuItemPropsContext",
+  hookName: "useMenuItemPropsContext",
+  providerName: "<MenuItemPropsProvider />"
+}), be = h((o, n) => {
+  const [t, s] = O()(o, [
+    "checked",
+    "closeOnSelect",
+    "disabled",
+    "onCheckedChange",
+    "value",
+    "valueText"
+  ]), c = {
+    ...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 }) }) });
+});
+be.displayName = "MenuCheckboxItem";
+const ke = h((o, n) => {
+  const t = m(), s = te(), 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 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 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, [
+    "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 }) }) });
+});
+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);
+  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 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 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) => {
+  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) => {
+  const t = m(), s = p(t.getPositionerProps(), o);
+  return te().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+$e.displayName = "MenuPositioner";
+const Re = h((o, n) => {
+  const [t, s] = O()(o, [
+    "closeOnSelect",
+    "disabled",
+    "value",
+    "valueText"
+  ]), c = m(), u = Ae(), a = {
+    ...t,
+    checked: u.value === t.value,
+    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 }) }) });
+});
+Re.displayName = "MenuRadioItem";
+const Le = h((o, n) => {
+  const [t, s] = O()(o, [
+    "id",
+    "onValueChange",
+    "value"
+  ]), c = m(), a = { id: Y(), ...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(() => {
+    n.current = o;
+  }), B(() => {
+    t.current !== !0 && (t.current = !0, n.current());
+  }, []);
+}, vt = (o) => {
+  const n = Y(), { getRootNode: t } = mt(), { dir: s } = xt(), c = {
+    id: n,
+    dir: s,
+    getRootNode: t,
+    ...o
+  }, u = ht(ft, c);
+  return { api: Mt(u, gt), service: u };
+}, [ze, Fe] = _({
+  name: "MenuMachineContext",
+  hookName: "useMenuMachineContext",
+  providerName: "<MenuMachineProvider />",
+  strict: !1
+}), [We, jt] = _({
+  name: "MenuMachineContext",
+  hookName: "useMenuMachineContext",
+  providerName: "<MenuMachineProvider />",
+  strict: !1
+}), Ct = (o) => {
+  const [n, t] = fe(o), [s, c] = O()(t, [
+    "anchorPoint",
+    "aria-label",
+    "closeOnSelect",
+    "composite",
+    "defaultHighlightedValue",
+    "defaultOpen",
+    "highlightedValue",
+    "id",
+    "ids",
+    "loopFocus",
+    "navigate",
+    "onEscapeKeyDown",
+    "onFocusOutside",
+    "onHighlightChange",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onSelect",
+    "open",
+    "positioning",
+    "typeahead"
+  ]), u = m(), a = Fe(), { api: i, service: f } = vt(s), N = 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 }) }) }) });
+}, 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 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(
+    {
+      ...t.getTriggerProps(),
+      "aria-controls": s.unmounted ? void 0 : t.getTriggerProps()["aria-controls"]
+    },
+    o
+  );
+  return /* @__PURE__ */ e.jsx(g.button, { ...c, ref: n });
+});
+De.displayName = "MenuTrigger";
+const Ve = h((o, n) => {
+  const t = jt(), s = p(t?.() ?? {}, o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+Ve.displayName = "MenuTriggerItem";
+const {
+  withRootProvider: He,
+  withContext: x
+} = lt({ key: "menu" });
+He(
+  It
+);
+const bt = He(Ct, {
+  defaultProps: { lazyMount: !0, unmountOnExit: !0 }
+}), kt = x(
+  De,
+  "trigger",
+  { forwardAsChild: !0 }
+);
+x(Se, "contextTrigger", { forwardAsChild: !0 });
+const St = x(
+  $e,
+  "positioner",
+  { forwardAsChild: !0 }
+);
+x(
+  Ee,
+  "separator",
+  { forwardAsChild: !0 }
+);
+const wt = x(
+  ke,
+  "content",
+  { forwardAsChild: !0 }
+), Nt = x(
+  Ce,
+  "arrowTip",
+  { forwardAsChild: !0 }
+);
+x(
+  je,
+  "arrow",
+  { forwardAsChild: !0, defaultProps: { children: /* @__PURE__ */ e.jsx(Nt, {}) } }
+);
+x(
+  we,
+  "indicator",
+  { forwardAsChild: !0 }
+);
+const yt = x(
+  Te,
+  "itemGroup",
+  { forwardAsChild: !0 }
+), At = x(Ge, "itemGroupLabel", { forwardAsChild: !0 }), de = x(
+  Ne,
+  "item",
+  { forwardAsChild: !0 }
+), Tt = x(Ve, "item", { forwardAsChild: !0 });
+x(
+  Oe,
+  "itemText",
+  { forwardAsChild: !0 }
+);
+x(
+  "kbd",
+  "itemCommand"
+);
+x(_e, "itemIndicator", {
+  forwardAsChild: !0,
+  defaultProps: { children: /* @__PURE__ */ e.jsx(dt, { boxSize: "4" }) }
+});
+x(be, "item", { forwardAsChild: !0 });
+x(Le, "itemGroup", { forwardAsChild: !0 });
+x(
+  Re,
+  "item",
+  { forwardAsChild: !0 }
+);
+const Ke = ({
+  hideCaret: o = !1,
+  size: n = "md",
+  text: t,
+  textProps: s,
+  variant: c,
+  onClick: u,
+  ["data-testid"]: a = "kibble-menu-button",
+  ...i
+}) => /* @__PURE__ */ e.jsxs(
+  Z,
+  {
+    className: "Menu__Button",
+    "data-testid": a,
+    size: n,
+    variant: c,
+    ...i,
+    ...!t && o && { paddingInline: 0, paddingBlock: 0 },
+    onClick: (f) => {
+      f.stopPropagation(), u?.(f);
+    },
+    children: [
+      t && /* @__PURE__ */ e.jsx(
+        ee,
+        {
+          className: "Menu__ButtonText",
+          "data-testid": `${a}-text`,
+          fontWeight: "semibold",
+          size: n,
+          color: c ? "inherit" : s?.color || "text.contrast",
+          truncated: !0,
+          ...s,
+          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" }) })
+    ]
+  }
+), Gt = ({ tooltipProps: o, isMenuOpen: n, ...t }) => {
+  const [s, c] = L(!1), u = j(() => {
+    n || c(!0);
+  }, [n]), a = j(() => {
+    n || c(!1);
+  }, [n]);
+  return B(() => {
+    n && c(!1);
+  }, [n]), /* @__PURE__ */ e.jsx(ge, { label: t.text || "", open: s && !n, ...o, children: /* @__PURE__ */ e.jsx(
+    T,
+    {
+      onClick: (i) => {
+        i.preventDefault(), i.stopPropagation(), c(!1);
+      },
+      onMouseEnter: u,
+      onMouseLeave: a,
+      children: /* @__PURE__ */ e.jsx(Ke, { ...t })
+    }
+  ) });
+}, _t = ({
+  label: o,
+  leftElement: n,
+  onSelect: t,
+  shouldTruncateText: s,
+  type: c = "default",
+  variant: u,
+  ["data-testid"]: a = "kibble-menu-item",
+  ...i
+}) => {
+  const [f, N] = L(!1), y = j(() => {
+    t && t(i.value);
+  }, [t, i.value]);
+  if (c === "submenu") {
+    const {
+      valueText: S,
+      listProps: C,
+      positionerProps: M,
+      portalled: A = !0,
+      open: k,
+      lazyMount: I = !0,
+      unmountOnExit: V = !0
+    } = i;
+    return /* @__PURE__ */ e.jsx(
+      Ot,
+      {
+        lazyMount: I,
+        unmountOnExit: V,
+        submenuTrigger: /* @__PURE__ */ e.jsxs(
+          Tt,
+          {
+            className: "Menu__Item--Submenu",
+            "data-testid": `${a}-submenu`,
+            justifyContent: "space-between",
+            "aria-valuetext": S,
+            position: "relative",
+            onClick: () => {
+              k !== void 0 && t ? t(i.value) : N(!f);
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(
+                X,
+                {
+                  label: o,
+                  leftElement: n,
+                  shouldTruncateText: s,
+                  variant: u
+                }
+              ),
+              /* @__PURE__ */ e.jsx(he, { name: "chevronRight", size: "sm" })
+            ]
+          }
+        ),
+        portalled: A,
+        open: k !== void 0 ? k : f,
+        listProps: C,
+        positionerProps: M
+      }
+    );
+  }
+  if (c === "checkbox") {
+    const { checked: S, value: C, disabled: M, tooltipLabel: A, ...k } = i;
+    return /* @__PURE__ */ e.jsxs(
+      de,
+      {
+        className: "Menu__Item--Checkbox",
+        "data-testid": `${a}-checkbox`,
+        value: C,
+        closeOnSelect: !1,
+        onSelect: M ? void 0 : y,
+        gap: 3,
+        disabled: M,
+        ...k,
+        children: [
+          /* @__PURE__ */ e.jsx(Pt, { checked: !!S, disabled: M, size: "md", fullWidth: !1 }),
+          /* @__PURE__ */ e.jsx(
+            X,
+            {
+              label: o,
+              leftElement: n,
+              shouldTruncateText: s,
+              variant: u,
+              tooltipLabel: A
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (c === "default") {
+    const { selected: S = !1, disabled: C, value: M, tooltipLabel: A, ...k } = 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,
+        children: /* @__PURE__ */ e.jsx(
+          X,
+          {
+            label: o,
+            leftElement: n,
+            shouldTruncateText: s,
+            variant: S ? "info" : u,
+            tooltipLabel: A
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ e.jsx(e.Fragment, {});
+}, X = ({
+  label: o,
+  leftElement: n,
+  shouldTruncateText: t,
+  variant: s,
+  tooltipLabel: c
+}) => {
+  const u = /* @__PURE__ */ e.jsxs(z, { 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
+  ] });
+  return c ? /* @__PURE__ */ e.jsx(ge, { label: c, children: u }) : u;
+}, pe = ({
+  groupName: o,
+  hasSelectedItems: n = !1,
+  onToggle: t,
+  ["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: [
+    /* @__PURE__ */ e.jsx(me, { groupName: o, onToggle: t }),
+    /* @__PURE__ */ e.jsx(xe, { 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,
+  {
+    variant: "ghostNeutral",
+    iconName: "arrowCircle",
+    size: "xs",
+    disabled: !o,
+    onClick: () => t({ groupName: n, clear: !0 }),
+    children: "Clear All"
+  }
+), Ot = ({
+  buttonProps: o,
+  listProps: n,
+  positionerProps: t,
+  portalled: s = !1,
+  submenuTrigger: c,
+  lazyMount: u = !0,
+  onOpenChange: a,
+  ["data-testid"]: i = "kibble-menu",
+  ...f
+}) => {
+  const { contentRef: N } = it(), {
+    canSelectAll: y,
+    canSelectGroups: S,
+    emptyState: C = "No results found",
+    groupSortOrder: M,
+    loading: A,
+    maxH: k = "480px",
+    menuItems: I = [],
+    minW: V = "240px",
+    onSearch: w,
+    onSelect: H,
+    onSelectAll: re,
+    searchable: K,
+    searchPlaceholder: qe = "Search...",
+    shouldTruncateText: Je,
+    ...se
+  } = n || {}, [Qe, Ue] = L(!1), [q, J] = L(""), [F, Q] = L(I), ce = D(() => {
+    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);
+    }), r;
+  }, [F]), ae = D(() => {
+    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;
+    });
+  }, [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(
+    ({ groupName: r, clear: l }) => {
+      let d;
+      const P = F.filter((v) => v.type === "checkbox" && !v.disabled);
+      if (r) {
+        const v = P.filter((W) => W.groupLabel === r);
+        d = l ? b.filter((W) => W.groupLabel !== r) : (
+          // Otherwise, add the items in the group to the selected items
+          [.../* @__PURE__ */ new Set([...b, ...v])]
+        );
+      } else
+        d = l ? [] : P.map((v) => ({ ...v, checked: !0 }));
+      re?.({ allSelectedItems: d });
+    },
+    [re, F, b]
+  ), Xe = j(
+    (r) => {
+      if (r.type === "checkbox") {
+        const l = U(r.value) ? b.filter((d) => d.value !== r.value) : [...b, r];
+        if (r.onSelect) {
+          r.onSelect(r.value);
+          return;
+        }
+        H?.({ item: r, allSelectedItems: l });
+        return;
+      }
+      if (r.onSelect) {
+        r.onSelect(r.value);
+        return;
+      }
+      H?.({ item: r, allSelectedItems: [r] });
+    },
+    [H, U, b]
+  ), 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);
+    },
+    [w]
+  ), Ze = j(() => {
+    J(""), w && w({
+      target: { value: "" }
+    });
+  }, [w]), et = j(
+    (r) => {
+      Ue(r), r || (J(""), Q(I)), a && a({ open: r, allSelectedItems: b });
+    },
+    [I, a, b]
+  );
+  return B(() => {
+    Q(w ? I : ue(q, I));
+  }, [q, w, ue, I]), /* @__PURE__ */ e.jsxs(
+    bt,
+    {
+      lazyMount: u,
+      unmountOnExit: u,
+      onOpenChange: (r) => {
+        et(r.open);
+      },
+      ...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(
+          wt,
+          {
+            className: "Menu__Content",
+            "data-testid": `${i}-content`,
+            maxH: k,
+            minW: V,
+            ...se,
+            ...K && { pt: "0" },
+            onClick: (r) => {
+              r.stopPropagation(), se?.onClick?.(r);
+            },
+            children: [
+              K && /* @__PURE__ */ e.jsx(
+                T,
+                {
+                  className: "Menu__SearchBarContainer",
+                  "data-testid": `${i}-search-bar-container`,
+                  px: 3,
+                  py: 2,
+                  position: "sticky",
+                  top: 0,
+                  bg: "background",
+                  zIndex: "docked",
+                  children: /* @__PURE__ */ e.jsx(
+                    ct,
+                    {
+                      className: "Menu__SearchBar",
+                      "data-testid": `${i}-search-bar`,
+                      placeholder: qe,
+                      onChange: Ye,
+                      size: "sm",
+                      value: q,
+                      clearable: !0,
+                      onClear: Ze,
+                      onKeyDown: (r) => {
+                        r.code === "Space" && r.stopPropagation();
+                      }
+                    }
+                  )
+                }
+              ),
+              y && /* @__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(
+                    pe,
+                    {
+                      onToggle: ie,
+                      hasSelectedItems: !!b.length
+                    }
+                  )
+                }
+              ),
+              A && /* @__PURE__ */ e.jsx(z, { 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)
+                );
+                return /* @__PURE__ */ e.jsxs(v, { children: [
+                  !d && /* @__PURE__ */ e.jsx(At, { children: /* @__PURE__ */ e.jsxs(z, { alignItems: "center", justifyContent: "space-between", children: [
+                    r,
+                    S && P.includes("checkbox") && /* @__PURE__ */ e.jsx(
+                      pe,
+                      {
+                        groupName: r,
+                        onToggle: ie,
+                        hasSelectedItems: tt
+                      }
+                    )
+                  ] }) }),
+                  Object.entries(l).map(
+                    ([R, E]) => E.map((G, nt) => {
+                      const { groupLabel: ot, ...rt } = G;
+                      return /* @__PURE__ */ e.jsx(
+                        _t,
+                        {
+                          shouldTruncateText: Je,
+                          ...G.type === "checkbox" && {
+                            checked: U(G.value)
+                          },
+                          "data-testid": `${i}-item-${G.label}`,
+                          onSelect: () => Xe(G),
+                          ...G.type === "submenu" && {
+                            positionerProps: t
+                          },
+                          ...rt
+                        },
+                        `menu-item-${ot}-${R}-${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 }) }) })
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  Ot as M
+};
+//# sourceMappingURL=menu.component-BIFydd_a.js.map