@kolking/react-ui 1.7.3 → 1.8.0

package/dist/components/Dialog/Dialog.d.ts

@@ -5,13 +5,17 @@ export type DialogProps = React.HTMLAttributes<HTMLDivElement> & {
     open?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     width?: React.CSSProperties['width'];
+    lockScroll?: boolean;
     requestClose: () => void;
+    setTriggerProps?: React.Dispatch<React.SetStateAction<object>>;
 };
 export declare const Dialog: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     open?: boolean;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     width?: React.CSSProperties["width"];
+    lockScroll?: boolean;
     requestClose: () => void;
+    setTriggerProps?: React.Dispatch<React.SetStateAction<object>>;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const DialogTitle: ({ className, children, ...props }: Omit<HeadingProps, "title">) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogContent: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/Dialog.js

@@ -1,76 +1,98 @@
-import { jsx as o } from "react/jsx-runtime";
-import y, { useRef as D, useImperativeHandle as _, useEffect as E } from "react";
-import { createPortal as k } from "react-dom";
-import { FocusTrap as h } from "focus-trap-react";
+import { jsx as t } from "react/jsx-runtime";
+import h, { useState as x, useLayoutEffect as m, useContext as y } from "react";
 import s from "classnames";
-import { cssProps as L } from "../../utils/helpers.js";
-import { Button as N } from "../Button/Button.js";
-import { Heading as b } from "../Heading/Heading.js";
-import { Icon as w } from "../Icon/Icon.js";
-const x = "Dialog_overlay_C98Qt", R = "Dialog_dialog_G3gxL", T = "Dialog_footer_N-aEV", I = "Dialog_close_JSEkn", i = {
-  overlay: x,
-  dialog: R,
-  footer: T,
-  close: I
-}, P = { escapeDeactivates: !1 }, Q = y.forwardRef(
-  ({ open: t = !1, size: e, width: l, style: g, className: m, children: u, requestClose: n, ...p }, v) => {
-    const c = D(null);
-    return _(v, () => c.current), E(() => {
-      const r = c.current;
-      if (r && t) {
-        let d = function(a) {
-          a.target === a.currentTarget && n();
-        }, f = function(a) {
-          a.key === "Escape" && (a.stopPropagation(), a.preventDefault(), n());
-        };
-        return r.addEventListener("click", d), r.addEventListener("keydown", f), () => {
-          r.removeEventListener("click", d), r.removeEventListener("keydown", f);
-        };
+import { useFloating as N, useInteractions as L, useDismiss as E, useRole as S, useMergeRefs as k, FloatingPortal as M, FloatingOverlay as O, FloatingFocusManager as Q, useId as j } from "@floating-ui/react";
+import { cssProps as q } from "../../utils/helpers.js";
+import { DialogContext as d } from "./DialogContext.js";
+import { Button as w } from "../Button/Button.js";
+import { Heading as B } from "../Heading/Heading.js";
+import { Icon as G } from "../Icon/Icon.js";
+const H = "Dialog_overlay_C98Qt", J = "Dialog_dialog_G3gxL", P = "Dialog_title_2pDPQ", V = "Dialog_footer_N-aEV", z = "Dialog_close_JSEkn", r = {
+  overlay: H,
+  dialog: J,
+  title: P,
+  footer: V,
+  close: z
+}, oo = h.forwardRef(
+  ({
+    open: o = !1,
+    size: e,
+    width: a,
+    lockScroll: l = !0,
+    style: i,
+    className: v,
+    children: D,
+    setTriggerProps: n,
+    requestClose: u,
+    ..._
+  }, p) => {
+    const [f, b] = x(), { refs: F, context: c } = N({
+      open: o,
+      onOpenChange: u
+    }), { getFloatingProps: C, getReferenceProps: g } = L([
+      E(c),
+      S(c, { role: "dialog" })
+    ]);
+    m(() => {
+      n == null || n(g());
+    }, [n, g]);
+    const I = k([F.setFloating, p]), R = document.querySelector("[data-floating-root]") ?? document.body;
+    return o ? /* @__PURE__ */ t(d.Provider, { value: { labelId: f, setLabelId: b, requestClose: u }, children: /* @__PURE__ */ t(M, { root: R, children: /* @__PURE__ */ t(
+      O,
+      {
+        "data-floating-root": !0,
+        "data-dialog-overlay": !0,
+        lockScroll: l,
+        className: r.overlay,
+        children: /* @__PURE__ */ t(Q, { context: c, children: /* @__PURE__ */ t(
+          "div",
+          {
+            ...C(_),
+            ref: I,
+            "data-dialog": !0,
+            "data-open": o,
+            "aria-labelledby": f,
+            className: s(r.dialog, v),
+            style: { ...i, ...q({ size: e, width: a }) },
+            children: D
+          }
+        ) })
       }
-    }, [t, n]), t ? k(
-      /* @__PURE__ */ o(h, { active: t, focusTrapOptions: P, children: /* @__PURE__ */ o(
-        "div",
-        {
-          ...p,
-          ref: c,
-          tabIndex: 0,
-          "data-dialog": !0,
-          "data-open": t,
-          "data-floating-root": !0,
-          className: i.overlay,
-          children: /* @__PURE__ */ o(
-            "div",
-            {
-              role: "alertdialog",
-              "aria-modal": "true",
-              "data-dialog-wrapper": !0,
-              className: s(i.dialog, m),
-              style: { ...g, ...L({ size: e, width: l }) },
-              children: u
-            }
-          )
-        }
-      ) }),
-      // Append to an element with data-floating-root attribute
-      document.querySelector("[data-floating-root]") ?? document.body
-    ) : null;
+    ) }) }) : null;
   }
-), V = ({ className: t, children: e, ...l }) => /* @__PURE__ */ o(b, { as: "h4", ...l, "data-dialog-title": !0, title: e, className: t }), z = (t) => /* @__PURE__ */ o("div", { ...t, "data-dialog-content": !0 }), A = ({ className: t, ...e }) => /* @__PURE__ */ o("div", { ...e, "data-dialog-footer": !0, className: s(i.footer, t) }), K = ({ className: t, ...e }) => /* @__PURE__ */ o(
-  N,
-  {
-    type: "button",
-    variant: "tertiary",
-    "aria-label": "close dialog",
-    icon: /* @__PURE__ */ o(w, { name: "close" }),
-    ...e,
-    "data-dialog-close": !0,
-    className: s(i.close, t)
-  }
-);
+), to = ({ className: o, children: e, ...a }) => {
+  const l = j(), { setLabelId: i } = y(d);
+  return m(() => (i(l), () => i(void 0)), [l, i]), /* @__PURE__ */ t(
+    B,
+    {
+      as: "h4",
+      ...a,
+      id: l,
+      "data-dialog-title": !0,
+      title: e,
+      className: s(r.title, o)
+    }
+  );
+}, eo = (o) => /* @__PURE__ */ t("div", { ...o, "data-dialog-content": !0 }), ao = ({ className: o, ...e }) => /* @__PURE__ */ t("div", { ...e, "data-dialog-footer": !0, className: s(r.footer, o) }), lo = ({ className: o, ...e }) => {
+  const { requestClose: a } = y(d);
+  return /* @__PURE__ */ t(
+    w,
+    {
+      type: "button",
+      variant: "tertiary",
+      "aria-label": "close dialog",
+      icon: /* @__PURE__ */ t(G, { name: "close" }),
+      onClick: a,
+      ...e,
+      "data-dialog-close": !0,
+      className: s(r.close, o)
+    }
+  );
+};
 export {
-  Q as Dialog,
-  K as DialogClose,
-  z as DialogContent,
-  A as DialogFooter,
-  V as DialogTitle
+  oo as Dialog,
+  lo as DialogClose,
+  eo as DialogContent,
+  ao as DialogFooter,
+  to as DialogTitle
 };

package/dist/components/Dialog/DialogContext.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export type DialogContextProps = {
+    labelId?: string;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    requestClose: () => void;
+};
+export declare const DialogContext: React.Context<DialogContextProps>;

package/dist/components/Dialog/DialogContext.js

@@ -0,0 +1,5 @@
+import t from "react";
+const o = t.createContext({});
+export {
+  o as DialogContext
+};

package/dist/components/Dialog/useDialog.d.ts

@@ -9,8 +9,12 @@ export declare function useDialog<T, R>(options?: DialogOptions<T, R>): {
     props: {
         ref: import('react').RefObject<HTMLDivElement>;
         open: boolean;
+        setTriggerProps: import('react').Dispatch<import('react').SetStateAction<{}>>;
         requestClose: () => void;
     };
+    trigger: {
+        onClick: (values: T) => void;
+    };
     data: T | undefined;
     show: (values: T) => void;
     cancel: () => void;

package/dist/components/Dialog/useDialog.js

@@ -1,35 +1,36 @@
-import { useRef as l, useState as y, useCallback as a } from "react";
-function g(t, u) {
-  setTimeout(
-    u,
-    t ? parseFloat(getComputedStyle(t).transitionDuration) * 1e3 : 0
-  );
+import { useRef as l, useState as f, useCallback as o } from "react";
+function T(r, a) {
+  const c = r ? Math.max(
+    ...getComputedStyle(r).transitionDuration.split(",").map((t) => parseFloat(t) * 1e3)
+  ) : 0;
+  setTimeout(a, c);
 }
-function v(t) {
-  const u = l(null), s = l(t), c = l(!1), [D, i] = y((t == null ? void 0 : t.defaultOpen) ?? !1), [b, d] = y();
-  s.current = t;
-  const w = a((e) => {
-    var r, n;
-    c.current || (i(!0), d(e), (n = (r = s.current) == null ? void 0 : r.onShow) == null || n.call(r, e));
-  }, []), o = a((e) => {
-    var r;
-    c.current || (c.current = !0, (r = u.current) == null || r.setAttribute("data-open", "false"), g(u.current, () => {
-      var n, C, f, m;
-      e !== void 0 ? (C = (n = s.current) == null ? void 0 : n.onConfirm) == null || C.call(n, e) : (m = (f = s.current) == null ? void 0 : f.onCancel) == null || m.call(f), i(!1), d(void 0), c.current = !1;
+function v(r) {
+  const a = l(null), c = l(r), t = l(!1), [D, b] = f({}), [h, p] = f((r == null ? void 0 : r.defaultOpen) ?? !1), [w, d] = f();
+  c.current = r;
+  const g = o((e) => {
+    var n, s;
+    t.current || (p(!0), d(e), (s = (n = c.current) == null ? void 0 : n.onShow) == null || s.call(n, e));
+  }, []), u = o((e) => {
+    var n;
+    t.current || (t.current = !0, (n = a.current) == null || n.setAttribute("data-open", "false"), T(a.current, () => {
+      var s, C, i, y;
+      e !== void 0 ? (C = (s = c.current) == null ? void 0 : s.onConfirm) == null || C.call(s, e) : (y = (i = c.current) == null ? void 0 : i.onCancel) == null || y.call(i), p(!1), d(void 0), t.current = !1;
     }));
-  }, []), p = a(() => o(), [o]), O = a((e) => o(e), [o]), S = a(async (e) => {
-    c.current = !0;
+  }, []), m = o(() => u(), [u]), O = o((e) => u(e), [u]), S = o(async (e) => {
+    t.current = !0;
     try {
       return await e;
     } finally {
-      c.current = !1;
+      t.current = !1;
     }
   }, []);
   return {
-    props: { ref: u, open: D, requestClose: p },
-    data: b,
-    show: w,
-    cancel: p,
+    props: { ref: a, open: h, setTriggerProps: b, requestClose: m },
+    trigger: { ...D, onClick: g },
+    data: w,
+    show: g,
+    cancel: m,
     confirm: O,
     preventClose: S
   };

package/dist/components/Fields/Numeric.js

@@ -1,55 +1,55 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
 import y from "classnames";
-import _, { useRef as h, useImperativeHandle as v, useCallback as c } from "react";
+import _, { useRef as h, useImperativeHandle as v, useCallback as s } from "react";
 import { Icon as i } from "../Icon/Icon.js";
-import { Button as o } from "../Button/Button.js";
+import { Button as l } from "../Button/Button.js";
 import { I as w } from "../../Input-D46mAsdt.js";
-const E = "styles_numeric_dzUSE", R = "styles_increase_5S-Jo", g = "styles_decrease_j8UR6", s = {
+const E = "styles_numeric_dzUSE", R = "styles_increase_5S-Jo", g = "styles_decrease_j8UR6", c = {
   numeric: E,
   increase: R,
   decrease: g
 }, x = _.forwardRef(
-  ({ labelIncrease: l = "increase", labelDecrease: u = "decrease", className: d, ...a }, m) => {
+  ({ labelIncrease: o = "increase", labelDecrease: d = "decrease", className: u, ...n }, m) => {
     const e = h(null);
     v(m, () => e.current);
-    const p = c(() => {
-      var n, r;
-      (n = e.current) == null || n.stepUp(), (r = e.current) == null || r.dispatchEvent(new Event("change", { bubbles: !0 }));
-    }, []), b = c(() => {
-      var n, r;
-      (n = e.current) == null || n.stepDown(), (r = e.current) == null || r.dispatchEvent(new Event("change", { bubbles: !0 }));
+    const b = s(() => {
+      var r, t;
+      (r = e.current) == null || r.stepUp(), (t = e.current) == null || t.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, []), p = s(() => {
+      var r, t;
+      (r = e.current) == null || r.stepDown(), (t = e.current) == null || t.dispatchEvent(new Event("change", { bubbles: !0 }));
     }, []);
     return /* @__PURE__ */ f(
       w,
       {
-        ...a,
+        ...n,
         ref: e,
         type: "number",
         wrapperType: "numeric",
-        className: y(s.numeric, d),
+        className: y(c.numeric, u),
         children: [
-          /* @__PURE__ */ t(
-            o,
+          /* @__PURE__ */ a(
+            l,
             {
               type: "button",
               variant: "secondary",
-              "aria-label": l,
-              disabled: a.disabled,
-              className: s.increase,
-              icon: /* @__PURE__ */ t(i, { name: "triangle-up" }),
-              onClick: p
+              "aria-label": o,
+              disabled: n.disabled || n.readOnly,
+              className: c.increase,
+              icon: /* @__PURE__ */ a(i, { name: "triangle-up" }),
+              onClick: b
             }
           ),
-          /* @__PURE__ */ t(
-            o,
+          /* @__PURE__ */ a(
+            l,
             {
               type: "button",
               variant: "secondary",
-              "aria-label": u,
-              disabled: a.disabled,
-              className: s.decrease,
-              icon: /* @__PURE__ */ t(i, { name: "triangle-down" }),
-              onClick: b
+              "aria-label": d,
+              disabled: n.disabled || n.readOnly,
+              className: c.decrease,
+              icon: /* @__PURE__ */ a(i, { name: "triangle-down" }),
+              onClick: p
             }
           )
         ]

package/dist/components/Heading/Heading.d.ts

@@ -4,9 +4,10 @@ export type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'title
     as?: HeadingElement;
     size?: HeadingElement;
     title: React.ReactNode;
+    description?: React.ReactNode;
     margin?: React.CSSProperties['margin'];
     marginStart?: React.CSSProperties['marginBlockStart'];
     marginEnd?: React.CSSProperties['marginBlockEnd'];
 };
-export declare const Heading: ({ as: Element, size, title, margin, marginStart, marginEnd, className, children, style, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: ({ as: Element, size, title, description, margin, marginStart, marginEnd, className, children, style, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Heading/Heading.js

@@ -1,57 +1,61 @@
-import { jsx as a, jsxs as f } from "react/jsx-runtime";
-import g from "classnames";
-import { cssProps as H } from "../../utils/helpers.js";
-const j = "Heading_h1_jZARG", u = "Heading_heading_OG4PS", p = "Heading_h2_juB1Q", x = "Heading_h3_tZEj0", v = "Heading_h4_X927D", z = "Heading_h5_047wq", B = "Heading_h6_52sKy", G = "Heading_accessory_VOBHY", h = {
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import y from "classnames";
+import u from "react";
+import { cssProps as f } from "../../utils/helpers.js";
+const j = "Heading_h1_jZARG", v = "Heading_heading_OG4PS", m = "Heading_h2_juB1Q", x = "Heading_h3_tZEj0", N = "Heading_h4_X927D", R = "Heading_h5_047wq", z = "Heading_h6_52sKy", A = "Heading_accessory_VOBHY", B = "Heading_description_iRVjv", e = {
   h1: j,
-  heading: u,
-  h2: p,
+  heading: v,
+  h2: m,
   h3: x,
-  h4: v,
-  h5: z,
-  h6: B,
-  accessory: G
-}, Z = ({
+  h4: N,
+  h5: R,
+  h6: z,
+  accessory: A,
+  description: B
+}, V = ({
   as: s = "h2",
-  size: y = s,
-  title: c,
-  margin: e,
-  marginStart: n,
-  marginEnd: o,
-  className: d,
-  children: i,
-  style: t,
-  ...r
+  size: l = s,
+  title: n,
+  description: i,
+  margin: h,
+  marginStart: c,
+  marginEnd: d,
+  className: o,
+  children: t,
+  style: r,
+  ..._
 }) => {
-  const _ = `var(--font-size-${y})`;
-  return i ? /* @__PURE__ */ f(
+  const g = `var(--font-size-${l})`, H = u.Children.toArray(t).length > 0;
+  return H || i ? /* @__PURE__ */ p(
     "header",
     {
-      ...r,
+      ..._,
       "data-heading": s,
-      className: g(h.heading, d),
+      className: y(e.heading, o),
       style: {
-        ...t,
-        ...H({ fontSize: _, margin: e, marginStart: n, marginEnd: o })
+        ...r,
+        ...f({ fontSize: g, margin: h, marginStart: c, marginEnd: d })
       },
       children: [
-        /* @__PURE__ */ a(s, { "data-heading-title": !0, children: c }),
-        /* @__PURE__ */ a("div", { "data-heading-accessory": !0, className: h.accessory, children: i })
+        /* @__PURE__ */ a(s, { "data-heading-title": !0, children: n }),
+        H && /* @__PURE__ */ a("div", { "data-heading-accessory": !0, className: e.accessory, children: t }),
+        i && /* @__PURE__ */ a("div", { "data-heading-description": !0, className: e.description, children: i })
       ]
     }
   ) : /* @__PURE__ */ a(
     s,
     {
-      ...r,
+      ..._,
       "data-heading": s,
-      className: g(h[s], d),
+      className: y(e[s], o),
       style: {
-        ...t,
-        ...H({ fontSize: _, margin: e, marginStart: n, marginEnd: o })
+        ...r,
+        ...f({ fontSize: g, margin: h, marginStart: c, marginEnd: d })
       },
-      children: c
+      children: n
     }
   );
 };
 export {
-  Z as Heading
+  V as Heading
 };

package/dist/components/Menu/Menu.d.ts

@@ -4,6 +4,7 @@ export type MenuProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> &
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     placement?: Placement;
     trigger: React.JSX.Element;
+    offset?: number;
     unmount?: boolean;
     minWidth?: React.CSSProperties['minWidth'];
     maxWidth?: React.CSSProperties['maxWidth'];
@@ -11,4 +12,4 @@ export type MenuProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> &
     maxHeight?: React.CSSProperties['maxHeight'];
     onSelect?: (index: number) => void;
 };
-export declare const Menu: ({ size, placement, trigger, unmount, minWidth, maxWidth, minHeight, maxHeight, className, children, onSelect, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: ({ size, placement, trigger, offset: customOffset, unmount, minWidth, maxWidth, minHeight, maxHeight, className, children, onSelect, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/Menu.js

@@ -1,86 +1,88 @@
-import { jsxs as L, Fragment as O, jsx as t } from "react/jsx-runtime";
-import W, { useState as a, useRef as p, useMemo as _, useEffect as b } from "react";
-import { flushSync as k } from "react-dom";
-import { useFloating as A, offset as D, flip as H, size as U, autoUpdate as q, useInteractions as G, useDismiss as J, useRole as K, useClick as Q, useListNavigation as T, FloatingPortal as V, FloatingFocusManager as X, FloatingList as Y } from "@floating-ui/react";
-import Z from "classnames";
-import { MenuContext as $ } from "./MenuContext.js";
-import { cssProps as ee } from "../../utils/helpers.js";
-import { s as te } from "../../styles.module-DHm-YTnz.js";
-const me = ({
-  size: g,
-  placement: h = "bottom-start",
-  trigger: l,
-  unmount: R = !0,
-  minWidth: v,
-  maxWidth: x,
-  minHeight: F,
+import { jsxs as W, Fragment as _, jsx as t } from "react/jsx-runtime";
+import b, { useState as l, useRef as g, useMemo as k, useEffect as A } from "react";
+import { flushSync as D } from "react-dom";
+import { useFloating as H, offset as U, flip as q, size as G, autoUpdate as J, useInteractions as K, useDismiss as Q, useRole as T, useClick as V, useListNavigation as X, useMergeRefs as Y, FloatingPortal as Z, FloatingFocusManager as $, FloatingList as ee } from "@floating-ui/react";
+import te from "classnames";
+import { MenuContext as oe } from "./MenuContext.js";
+import { cssProps as ne } from "../../utils/helpers.js";
+import { s as se } from "../../styles.module-DHm-YTnz.js";
+const de = ({
+  size: h,
+  placement: u = "bottom-start",
+  trigger: o,
+  offset: R = 5,
+  unmount: v = !0,
+  minWidth: x,
+  maxWidth: F,
+  minHeight: M,
   maxHeight: P,
   className: y,
   children: z,
   onSelect: c,
-  ...M
+  ...w
 }) => {
-  const [r, m] = a(!1), [i, w] = a(null), [C, E] = a({}), u = p([]), f = p(null), { refs: o, context: e, floatingStyles: I } = A({
-    open: r,
-    placement: h,
-    onOpenChange: m,
-    whileElementsMounted: q,
+  const [i, f] = l(!1), [a, C] = l(null), [E, I] = l({}), m = g([]), d = g(null), { refs: n, context: e, floatingStyles: N } = H({
+    open: i,
+    placement: u,
+    onOpenChange: f,
+    whileElementsMounted: J,
     middleware: [
-      D(5),
-      H({ padding: 10 }),
-      U({
+      U(R),
+      q({ padding: 10 }),
+      G({
         padding: 10,
-        apply({ rects: n, availableWidth: s, availableHeight: B }) {
-          k(() => {
-            E({
-              minHeight: F,
-              minWidth: v ?? n.reference.width,
-              maxWidth: x ?? s,
-              maxHeight: P ?? B
+        apply({ rects: s, availableWidth: r, availableHeight: O }) {
+          D(() => {
+            I({
+              minHeight: M,
+              minWidth: x ?? s.reference.width,
+              maxWidth: F ?? r,
+              maxHeight: P ?? O
             });
           });
         }
       })
     ]
-  }), { getReferenceProps: N, getFloatingProps: S, getItemProps: d } = G([
-    J(e),
-    K(e, { role: "menu" }),
-    Q(e, { event: "mousedown" }),
-    T(e, {
-      listRef: u,
+  }), { getReferenceProps: S, getFloatingProps: j, getItemProps: p } = K([
+    Q(e),
+    T(e, { role: "menu" }),
+    V(e, { event: "mousedown" }),
+    X(e, {
+      listRef: m,
       loop: !0,
-      activeIndex: i,
-      onNavigate: w
+      activeIndex: a,
+      onNavigate: C
     })
-  ]), j = _(
-    () => ({ active: i, setOpen: m, getItemProps: d, onSelect: c }),
-    [i, d, c]
-  );
-  return b(() => {
-    var s;
-    const n = (s = o.domReference.current) == null ? void 0 : s.closest("[data-floating-root]");
-    n && (f.current = n);
-  }, [o]), /* @__PURE__ */ L(O, { children: [
-    W.cloneElement(l, {
-      ref: o.setReference,
-      ...N(l.props),
-      "data-menu-trigger": !0
-    }),
-    /* @__PURE__ */ t($.Provider, { value: j, children: (r || !R) && /* @__PURE__ */ t(V, { root: f.current, children: /* @__PURE__ */ t(X, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
+  ]), B = k(
+    () => ({ active: a, setOpen: f, getItemProps: p, onSelect: c }),
+    [a, p, c]
+  ), L = Y([
+    n.setReference,
+    "ref" in o ? o.ref : null
+  ]);
+  return A(() => {
+    var r;
+    const s = (r = n.domReference.current) == null ? void 0 : r.closest("[data-floating-root]");
+    s && (d.current = s);
+  }, [n]), /* @__PURE__ */ W(_, { children: [
+    b.cloneElement(
+      o,
+      S({ ref: L, "data-menu-trigger": !0, ...o.props })
+    ),
+    /* @__PURE__ */ t(oe.Provider, { value: B, children: (i || !v) && /* @__PURE__ */ t(Z, { root: d.current, children: /* @__PURE__ */ t($, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
       "div",
       {
-        ...M,
-        ...S(),
-        ref: o.setFloating,
-        "data-menu": !0,
-        "data-open": r,
-        className: Z(te.menu, y),
-        style: { ...I, ...C, ...ee({ size: g }) },
-        children: /* @__PURE__ */ t(Y, { elementsRef: u, children: z })
+        ...j(w),
+        ref: n.setFloating,
+        "data-open": i,
+        "data-menu": u,
+        className: te(se.menu, y),
+        style: { ...N, ...E, ...ne({ size: h }) },
+        children: /* @__PURE__ */ t(ee, { elementsRef: m, children: z })
       }
     ) }) }) })
   ] });
 };
 export {
-  me as Menu
+  de as Menu
 };