asterui 0.12.42 → 0.12.44

package/dist/components/Dropdown.js

@@ -1,59 +1,59 @@
-import { jsxs as B, Fragment as ie, jsx as i } from "react/jsx-runtime";
-import D, { useId as q, useState as j, useRef as N, useCallback as R, useEffect as L, createContext as ue, useContext as de } from "react";
-const _ = ue(void 0);
+import { jsxs as B, Fragment as ie, jsx as d } from "react/jsx-runtime";
+import y, { useId as q, useState as j, useRef as K, useCallback as R, useEffect as L, createContext as ue, useContext as de } from "react";
+const G = ue(void 0);
 function V() {
-  const l = de(_);
-  if (!l)
+  const a = de(G);
+  if (!a)
     throw new Error("Dropdown compound components must be used within Dropdown");
-  return l;
+  return a;
 }
-function pe({
-  children: l,
-  items: d,
-  hover: b = !1,
-  trigger: h = ["click"],
-  position: s = "bottom",
-  align: u = "start",
-  open: n,
-  onOpenChange: r,
-  disabled: p = !1,
-  arrow: f = !1,
-  mouseEnterDelay: m = 0.15,
+function fe({
+  children: a,
+  items: l,
+  hover: I = !1,
+  trigger: f = ["click"],
+  position: p = "bottom",
+  align: o = "start",
+  open: s,
+  onOpenChange: t,
+  disabled: m = !1,
+  arrow: b = !1,
+  mouseEnterDelay: w = 0.15,
   mouseLeaveDelay: c = 0.1,
-  getPopupContainer: y,
-  destroyOnHidden: o = !1,
+  getPopupContainer: h,
+  destroyOnHidden: r = !1,
   className: k = "",
   ...S
 }) {
-  const U = q(), v = q(), [e, I] = j(!1), [w, x] = j(-1), [T, P] = j(0), [Y, z] = j(!o), W = N(/* @__PURE__ */ new Map()), $ = N(null), C = N(null), M = b ? ["hover"] : h, F = n !== void 0, A = F ? n : e, g = R((t, E = "trigger") => {
-    p || (F || I(t), t && z(!0), r?.(t, { source: E }));
-  }, [p, F, r]), Z = R(() => {
+  const U = q(), v = q(), [e, D] = j(!1), [i, x] = j(-1), [T, P] = j(0), [Y, z] = j(!r), W = K(/* @__PURE__ */ new Map()), $ = K(null), C = K(null), M = I ? ["hover"] : f, F = s !== void 0, A = F ? s : e, g = R((n, E = "trigger") => {
+    m || (F || D(n), n && z(!0), t?.(n, { source: E }));
+  }, [m, F, t]), Z = R(() => {
     g(!1, "menu"), x(-1), document.getElementById(v)?.focus();
-  }, [g, v]), H = R((t, E, a) => {
-    E ? W.current.set(t, { ref: E, disabled: a }) : W.current.delete(t);
+  }, [g, v]), H = R((n, E, u) => {
+    E ? W.current.set(n, { ref: E, disabled: u }) : W.current.delete(n);
   }, []);
   L(() => {
-    if (o && !A) {
-      const t = setTimeout(() => z(!1), 300);
-      return () => clearTimeout(t);
+    if (r && !A) {
+      const n = setTimeout(() => z(!1), 300);
+      return () => clearTimeout(n);
     }
-  }, [A, o]), L(() => {
-    const t = (E) => {
+  }, [A, r]), L(() => {
+    const n = (E) => {
       $.current && !$.current.contains(E.target) && (g(!1, "trigger"), x(-1));
     };
     if (A)
-      return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+      return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
   }, [A, g]);
   const ee = R(() => {
     M.includes("hover") && (C.current && clearTimeout(C.current), C.current = setTimeout(() => {
       g(!0, "trigger");
-    }, m * 1e3));
-  }, [M, m, g]), ne = R(() => {
+    }, w * 1e3));
+  }, [M, w, g]), ne = R(() => {
     M.includes("hover") && (C.current && clearTimeout(C.current), C.current = setTimeout(() => {
       g(!1, "trigger"), x(-1);
     }, c * 1e3));
-  }, [M, c, g]), te = R((t) => {
-    M.includes("contextMenu") && (t.preventDefault(), g(!0, "trigger"));
+  }, [M, c, g]), te = R((n) => {
+    M.includes("contextMenu") && (n.preventDefault(), g(!0, "trigger"));
   }, [M, g]);
   L(() => () => {
     C.current && clearTimeout(C.current);
@@ -67,82 +67,79 @@ function pe({
     start: "",
     center: "dropdown-center",
     end: "dropdown-end"
-  }, se = typeof f == "boolean" ? f : !!f, ae = [
+  }, se = typeof b == "boolean" ? b : !!b, ae = [
     "dropdown",
-    re[s],
-    oe[u],
+    re[p],
+    oe[o],
     M.includes("hover") && "dropdown-hover",
     A && "dropdown-open",
     k
-  ].filter(Boolean).join(" "), le = () => d ? d.map((t, E) => {
-    if ("type" in t && t.type === "divider")
-      return /* @__PURE__ */ i(X, {}, t.key || `divider-${E}`);
-    const a = t;
-    return a.children && a.children.length > 0 ? /* @__PURE__ */ i(
-      Q,
+  ].filter(Boolean).join(" "), le = () => l ? l.map((n, E) => {
+    if ("type" in n && n.type === "divider")
+      return /* @__PURE__ */ d(X, {}, n.key || `divider-${E}`);
+    const u = n;
+    return u.children && u.children.length > 0 ? /* @__PURE__ */ d(
+      _,
       {
-        itemKey: a.key,
-        title: a.label,
-        icon: a.icon,
-        disabled: a.disabled,
-        children: a.children.map((K) => /* @__PURE__ */ i(
+        title: u.label,
+        icon: u.icon,
+        disabled: u.disabled,
+        children: u.children.map((N) => /* @__PURE__ */ d(
           O,
           {
-            itemKey: K.key,
-            icon: K.icon,
-            disabled: K.disabled,
-            danger: K.danger,
-            onClick: K.onClick,
-            children: K.label
+            icon: N.icon,
+            disabled: N.disabled,
+            danger: N.danger,
+            onClick: N.onClick,
+            children: N.label
           },
-          K.key
+          N.key
         ))
       },
-      a.key
-    ) : /* @__PURE__ */ i(
+      u.key
+    ) : /* @__PURE__ */ d(
       O,
       {
-        itemKey: a.key,
-        icon: a.icon,
-        disabled: a.disabled,
-        danger: a.danger,
-        onClick: a.onClick,
-        children: a.label
+        icon: u.icon,
+        disabled: u.disabled,
+        danger: u.danger,
+        onClick: u.onClick,
+        children: u.label
       },
-      a.key
+      u.key
     );
-  }) : null, ce = d ? /* @__PURE__ */ B(ie, { children: [
-    D.Children.toArray(l).find(
-      (t) => D.isValidElement(t) && t.type === G
+  }) : null, ce = l ? /* @__PURE__ */ B(ie, { children: [
+    y.Children.toArray(a).find(
+      (n) => y.isValidElement(n) && n.type === J
     ),
-    (Y || !o) && /* @__PURE__ */ i(J, { children: le() })
-  ] }) : l;
-  return /* @__PURE__ */ i(
-    _.Provider,
+    (Y || !r) && /* @__PURE__ */ d(Q, { children: le() })
+  ] }) : a;
+  return /* @__PURE__ */ d(
+    G.Provider,
     {
       value: {
-        position: s,
-        align: u,
+        position: p,
+        align: o,
         menuId: U,
         triggerId: v,
         isOpen: A,
         setIsOpen: g,
-        focusedIndex: w,
+        focusedIndex: i,
         setFocusedIndex: x,
         registerItem: H,
         itemCount: T,
         setItemCount: P,
-        disabled: p,
+        disabled: m,
         arrow: se,
         closeDropdown: Z
       },
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ d(
         "div",
         {
           ref: $,
           className: ae,
           "data-state": A ? "open" : "closed",
-          "aria-disabled": p || void 0,
+          "aria-disabled": m || void 0,
           onMouseEnter: ee,
           onMouseLeave: ne,
           onContextMenu: te,
@@ -153,70 +150,70 @@ function pe({
     }
   );
 }
-function G({ children: l, className: d = "" }) {
-  const { menuId: b, triggerId: h, isOpen: s, setIsOpen: u, setFocusedIndex: n, itemCount: r, disabled: p } = V(), f = (o) => {
-    switch (o.key) {
+function J({ children: a, className: l = "" }) {
+  const { menuId: I, triggerId: f, isOpen: p, setIsOpen: o, setFocusedIndex: s, itemCount: t, disabled: m } = V(), b = (r) => {
+    switch (r.key) {
       case "Enter":
       case " ":
       case "ArrowDown":
-        o.preventDefault(), u(!0), n(0);
+        r.preventDefault(), o(!0), s(0);
         break;
       case "ArrowUp":
-        o.preventDefault(), u(!0), n(r - 1);
+        r.preventDefault(), o(!0), s(t - 1);
         break;
       case "Escape":
-        o.preventDefault(), u(!1), n(-1);
+        r.preventDefault(), o(!1), s(-1);
         break;
     }
-  }, m = () => {
-    u(!s), s || n(0);
-  }, c = D.Children.only(l), y = c.props;
-  return D.cloneElement(c, {
-    id: h,
-    tabIndex: p ? -1 : 0,
+  }, w = () => {
+    o(!p), p || s(0);
+  }, c = y.Children.only(a), h = c.props;
+  return y.cloneElement(c, {
+    id: f,
+    tabIndex: m ? -1 : 0,
     "aria-haspopup": "menu",
-    "aria-expanded": s,
-    "aria-controls": b,
-    onClick: (o) => {
-      m(), y.onClick?.(o);
+    "aria-expanded": p,
+    "aria-controls": I,
+    onClick: (r) => {
+      w(), h.onClick?.(r);
     },
-    onKeyDown: (o) => {
-      f(o), y.onKeyDown?.(o);
+    onKeyDown: (r) => {
+      b(r), h.onKeyDown?.(r);
     },
-    className: `${y.className || ""} ${d}`.trim()
+    className: `${h.className || ""} ${l}`.trim()
   });
 }
-function J({ children: l, className: d = "" }) {
-  const { menuId: b, triggerId: h, isOpen: s, setIsOpen: u, focusedIndex: n, setFocusedIndex: r, setItemCount: p, arrow: f, position: m } = V(), c = N(null), y = D.Children.toArray(l).filter(
-    (e) => D.isValidElement(e) && e.type === O
+function Q({ children: a, className: l = "" }) {
+  const { menuId: I, triggerId: f, isOpen: p, setIsOpen: o, focusedIndex: s, setFocusedIndex: t, setItemCount: m, arrow: b, position: w } = V(), c = K(null), h = y.Children.toArray(a).filter(
+    (e) => y.isValidElement(e) && e.type === O
   );
   L(() => {
-    p(y.length);
-  }, [y.length, p]), L(() => {
-    s && n >= 0 && c.current && c.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')[n]?.focus();
-  }, [s, n]);
-  const o = (e) => {
-    const w = y.filter(
-      (x) => D.isValidElement(x) && !x.props.disabled
+    m(h.length);
+  }, [h.length, m]), L(() => {
+    p && s >= 0 && c.current && c.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')[s]?.focus();
+  }, [p, s]);
+  const r = (e) => {
+    const i = h.filter(
+      (x) => y.isValidElement(x) && !x.props.disabled
     ).length;
     switch (e.key) {
       case "ArrowDown":
-        e.preventDefault(), r((n + 1) % w);
+        e.preventDefault(), t((s + 1) % i);
         break;
       case "ArrowUp":
-        e.preventDefault(), r((n - 1 + w) % w);
+        e.preventDefault(), t((s - 1 + i) % i);
         break;
       case "Home":
-        e.preventDefault(), r(0);
+        e.preventDefault(), t(0);
         break;
       case "End":
-        e.preventDefault(), r(w - 1);
+        e.preventDefault(), t(i - 1);
         break;
       case "Escape":
-        e.preventDefault(), u(!1), r(-1), document.getElementById(h)?.focus();
+        e.preventDefault(), o(!1), t(-1), document.getElementById(f)?.focus();
         break;
       case "Tab":
-        u(!1), r(-1);
+        o(!1), t(-1);
         break;
     }
   }, k = [
@@ -226,8 +223,17 @@ function J({ children: l, className: d = "" }) {
     "rounded-box",
     "z-50",
     "shadow",
-    d
-  ].filter(Boolean).join(" "), S = D.Children.map(l, (e, I) => D.isValidElement(e) && e.type === O ? D.cloneElement(e, { _index: I }) : e), v = f ? /* @__PURE__ */ i(
+    l
+  ].filter(Boolean).join(" "), S = y.Children.map(a, (e, D) => {
+    if (y.isValidElement(e)) {
+      const i = e.key != null ? String(e.key) : void 0;
+      if (e.type === O)
+        return y.cloneElement(e, { _index: D, _key: i });
+      if (e.type === _)
+        return y.cloneElement(e, { _key: i });
+    }
+    return e;
+  }), v = b ? /* @__PURE__ */ d(
     "span",
     {
       className: `absolute w-0 h-0 border-8 border-solid ${{
@@ -235,7 +241,7 @@ function J({ children: l, className: d = "" }) {
         bottom: "top-0 left-1/2 -translate-x-1/2 -translate-y-full border-b-base-100 border-l-transparent border-r-transparent border-t-transparent",
         left: "right-0 top-1/2 -translate-y-1/2 translate-x-full border-l-base-100 border-t-transparent border-b-transparent border-r-transparent",
         right: "left-0 top-1/2 -translate-y-1/2 -translate-x-full border-r-base-100 border-t-transparent border-b-transparent border-l-transparent"
-      }[m || "bottom"]}`,
+      }[w || "bottom"]}`,
       "aria-hidden": "true"
     }
   ) : null;
@@ -243,12 +249,12 @@ function J({ children: l, className: d = "" }) {
     "ul",
     {
       ref: c,
-      id: b,
+      id: I,
       role: "menu",
-      "aria-labelledby": h,
+      "aria-labelledby": f,
       tabIndex: -1,
-      className: `${k} ${f ? "relative" : ""}`,
-      onKeyDown: o,
+      className: `${k} ${b ? "relative" : ""}`,
+      onKeyDown: r,
       children: [
         v,
         S
@@ -257,142 +263,142 @@ function J({ children: l, className: d = "" }) {
   );
 }
 function O({
-  children: l,
-  itemKey: d,
-  icon: b,
-  label: h,
-  onClick: s,
-  active: u = !1,
-  disabled: n = !1,
-  danger: r = !1,
-  className: p = ""
+  children: a,
+  icon: l,
+  label: I,
+  onClick: f,
+  active: p = !1,
+  disabled: o = !1,
+  danger: s = !1,
+  className: t = "",
+  _key: m
 }) {
-  const { closeDropdown: f } = V(), m = [u && "active", n && "disabled", p].filter(Boolean).join(" "), c = () => {
-    n || (s?.(), f());
+  const { closeDropdown: b } = V(), w = [p && "active", o && "disabled", t].filter(Boolean).join(" "), c = () => {
+    o || (f?.(), b());
   };
-  return /* @__PURE__ */ i("li", { className: m, role: "none", "data-key": d, children: /* @__PURE__ */ B(
+  return /* @__PURE__ */ d("li", { className: w, role: "none", "data-key": m, children: /* @__PURE__ */ B(
     "a",
     {
       role: "menuitem",
-      tabIndex: n ? -1 : 0,
-      "aria-disabled": n || void 0,
-      className: r ? "text-error" : "",
+      tabIndex: o ? -1 : 0,
+      "aria-disabled": o || void 0,
+      className: s ? "text-error" : "",
       onClick: c,
       onKeyDown: (k) => {
-        (k.key === "Enter" || k.key === " ") && !n && (k.preventDefault(), c());
+        (k.key === "Enter" || k.key === " ") && !o && (k.preventDefault(), c());
       },
       children: [
-        b && /* @__PURE__ */ i("span", { className: "mr-2 inline-flex items-center", children: b }),
-        h || l
+        l && /* @__PURE__ */ d("span", { className: "mr-2 inline-flex items-center", children: l }),
+        I || a
       ]
     }
   ) });
 }
-function Q({
-  children: l,
-  itemKey: d,
-  title: b,
-  icon: h,
-  disabled: s = !1,
-  className: u = ""
+function _({
+  children: a,
+  title: l,
+  icon: I,
+  disabled: f = !1,
+  className: p = "",
+  _key: o
 }) {
-  const [n, r] = j(!1), p = N(null), f = N(null), m = N(null), c = q(), y = () => {
-    s || r(!0);
-  }, o = () => {
-    r(!1);
+  const [s, t] = j(!1), m = K(null), b = K(null), w = K(null), c = q(), h = () => {
+    f || t(!0);
+  }, r = () => {
+    t(!1);
   }, k = () => {
     setTimeout(() => {
-      m.current?.querySelector('[role="menuitem"]:not([aria-disabled="true"])')?.focus();
+      w.current?.querySelector('[role="menuitem"]:not([aria-disabled="true"])')?.focus();
     }, 0);
   }, S = (e) => {
-    if (!s)
+    if (!f)
       switch (e.key) {
         case "ArrowRight":
         case "Enter":
         case " ":
-          e.preventDefault(), e.stopPropagation(), r(!0), k();
+          e.preventDefault(), e.stopPropagation(), t(!0), k();
           break;
         case "ArrowLeft":
         case "Escape":
-          e.preventDefault(), e.stopPropagation(), r(!1);
+          e.preventDefault(), e.stopPropagation(), t(!1);
           break;
       }
   }, U = (e) => {
     switch (e.key) {
       case "ArrowLeft":
       case "Escape":
-        e.preventDefault(), e.stopPropagation(), r(!1), f.current?.focus();
+        e.preventDefault(), e.stopPropagation(), t(!1), b.current?.focus();
         break;
       case "ArrowDown":
         e.preventDefault(), e.stopPropagation();
-        const I = m.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
-        if (I) {
-          const T = (Array.from(I).findIndex((P) => P === document.activeElement) + 1) % I.length;
-          I[T]?.focus();
+        const D = w.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
+        if (D) {
+          const T = (Array.from(D).findIndex((P) => P === document.activeElement) + 1) % D.length;
+          D[T]?.focus();
         }
         break;
       case "ArrowUp":
         e.preventDefault(), e.stopPropagation();
-        const w = m.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
-        if (w) {
-          const T = (Array.from(w).findIndex((P) => P === document.activeElement) - 1 + w.length) % w.length;
-          w[T]?.focus();
+        const i = w.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
+        if (i) {
+          const T = (Array.from(i).findIndex((P) => P === document.activeElement) - 1 + i.length) % i.length;
+          i[T]?.focus();
         }
         break;
     }
-  }, v = [s && "disabled", u].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i(
+  }, v = [f && "disabled", p].filter(Boolean).join(" ");
+  return /* @__PURE__ */ d(
     "li",
     {
-      ref: p,
+      ref: m,
       className: v,
       role: "none",
-      "data-key": d,
-      onMouseEnter: y,
-      onMouseLeave: o,
-      children: /* @__PURE__ */ B("details", { open: n, children: [
+      "data-key": o,
+      onMouseEnter: h,
+      onMouseLeave: r,
+      children: /* @__PURE__ */ B("details", { open: s, children: [
         /* @__PURE__ */ B(
           "summary",
           {
-            ref: f,
+            ref: b,
             role: "menuitem",
-            tabIndex: s ? -1 : 0,
-            "aria-disabled": s || void 0,
+            tabIndex: f ? -1 : 0,
+            "aria-disabled": f || void 0,
             "aria-haspopup": "menu",
-            "aria-expanded": n,
+            "aria-expanded": s,
             "aria-controls": c,
             onKeyDown: S,
             children: [
-              h && /* @__PURE__ */ i("span", { className: "mr-2 inline-flex items-center", children: h }),
-              b
+              I && /* @__PURE__ */ d("span", { className: "mr-2 inline-flex items-center", children: I }),
+              l
             ]
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ d(
           "ul",
           {
-            ref: m,
+            ref: w,
             id: c,
             className: "menu bg-base-100 rounded-box z-50 shadow",
             role: "menu",
-            "aria-label": typeof b == "string" ? b : void 0,
+            "aria-label": typeof l == "string" ? l : void 0,
             onKeyDown: U,
-            children: l
+            children: a
           }
         )
       ] })
     }
   );
 }
-function X({ className: l = "" }) {
-  const d = ["border-base-content/10", l].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i("li", { role: "separator", className: "my-1", children: /* @__PURE__ */ i("hr", { className: d }) });
+function X({ className: a = "" }) {
+  const l = ["border-base-content/10", a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ d("li", { role: "separator", className: "my-1", children: /* @__PURE__ */ d("hr", { className: l }) });
 }
-const be = Object.assign(pe, {
-  Trigger: G,
-  Menu: J,
+const be = Object.assign(fe, {
+  Trigger: J,
+  Menu: Q,
   Item: O,
-  SubMenu: Q,
+  SubMenu: _,
   Divider: X
 });
 export {