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

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

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