@aster-ui/prefixed 0.12.58 → 0.12.60

package/dist/components/Dropdown.js

@@ -1,162 +1,163 @@
-import { jsx as i, jsxs as j, Fragment as me } from "react/jsx-runtime";
-import k, { forwardRef as be, useId as V, useState as $, useRef as R, useImperativeHandle as we, useCallback as S, useEffect as L, createContext as he, useContext as ge } from "react";
-const De = "d-dropdown", ye = "d-dropdown-top", Ie = "d-dropdown-bottom", xe = "d-dropdown-left", ke = "d-dropdown-right", Ce = "d-dropdown-center", ve = "d-dropdown-end", Ee = "d-dropdown-hover", Me = "d-dropdown-open", Ae = "d-dropdown-content", J = "d-menu", Q = he(void 0);
+import { jsx as c, jsxs as j, Fragment as ge } from "react/jsx-runtime";
+import x, { forwardRef as he, useId as V, useState as $, useRef as N, useImperativeHandle as De, useCallback as K, useEffect as L, createContext as ye, useContext as Ie } from "react";
+import { useConfig as xe } from "../providers/ConfigProvider.js";
+const Ce = "d-dropdown", ke = "d-dropdown-top", ve = "d-dropdown-bottom", Ee = "d-dropdown-left", Me = "d-dropdown-right", Ae = "d-dropdown-center", Te = "d-dropdown-end", Re = "d-dropdown-hover", Ne = "d-dropdown-open", Se = "d-dropdown-content", J = "d-menu", Q = ye(void 0);
 function z() {
-  const u = ge(Q);
-  if (!u)
+  const i = Ie(Q);
+  if (!i)
     throw new Error("Dropdown compound components must be used within Dropdown");
-  return u;
+  return i;
 }
-const Te = be(function({
+const Ke = he(function({
   children: l,
   items: f,
-  trigger: p = ["click"],
+  trigger: u = ["click"],
   position: m = "bottom",
   align: o = "start",
   open: s,
   onOpenChange: r,
-  disabled: d = !1,
+  disabled: h,
   arrow: b = !1,
   mouseEnterDelay: w = 0.15,
   mouseLeaveDelay: D = 0.1,
-  getPopupContainer: h,
+  getPopupContainer: g,
   destroyOnHidden: t = !1,
-  popupRender: C,
+  popupRender: k,
   "data-testid": y,
-  className: K = "",
+  className: P = "",
   ...O
 }, a) {
-  const e = V(), g = V(), [I, v] = $(!1), [P, U] = $(-1), [ee, ne] = $(0), [te, _] = $(!t), G = R(/* @__PURE__ */ new Map()), F = R(null), E = R(null), A = p;
-  we(a, () => F.current, []);
-  const re = (n) => y ? `${y}-${n}` : void 0, q = s !== void 0, T = q ? s : I, x = S((n, M = "trigger") => {
-    d || (q || v(n), n && _(!0), r?.(n, { source: M }));
-  }, [d, q, r]), oe = S(() => {
-    x(!1, "menu"), U(-1), document.getElementById(g)?.focus();
-  }, [x, g]), se = S((n, M, c) => {
-    M ? G.current.set(n, { ref: M, disabled: c }) : G.current.delete(n);
+  const { componentDisabled: e, getPopupContainer: C } = xe(), p = h ?? e ?? !1, v = V(), A = V(), [ee, ne] = $(!1), [te, U] = $(-1), [re, oe] = $(0), [se, W] = $(!t), _ = N(/* @__PURE__ */ new Map()), F = N(null), E = N(null), T = u;
+  De(a, () => F.current, []);
+  const ae = (n) => y ? `${y}-${n}` : void 0, q = s !== void 0, R = q ? s : ee, I = K((n, M = "trigger") => {
+    p || (q || ne(n), n && W(!0), r?.(n, { source: M }));
+  }, [p, q, r]), le = K(() => {
+    I(!1, "menu"), U(-1), document.getElementById(A)?.focus();
+  }, [I, A]), de = K((n, M, d) => {
+    M ? _.current.set(n, { ref: M, disabled: d }) : _.current.delete(n);
   }, []);
   L(() => {
-    if (t && !T) {
-      const n = setTimeout(() => _(!1), 300);
+    if (t && !R) {
+      const n = setTimeout(() => W(!1), 300);
       return () => clearTimeout(n);
     }
-  }, [T, t]), L(() => {
+  }, [R, t]), L(() => {
     const n = (M) => {
-      F.current && !F.current.contains(M.target) && (x(!1, "trigger"), U(-1));
+      F.current && !F.current.contains(M.target) && (I(!1, "trigger"), U(-1));
     };
-    if (T)
+    if (R)
       return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
-  }, [T, x]);
-  const ae = S(() => {
-    A.includes("hover") && (E.current && clearTimeout(E.current), E.current = setTimeout(() => {
-      x(!0, "trigger");
+  }, [R, I]);
+  const ce = K(() => {
+    T.includes("hover") && (E.current && clearTimeout(E.current), E.current = setTimeout(() => {
+      I(!0, "trigger");
     }, w * 1e3));
-  }, [A, w, x]), le = S(() => {
-    A.includes("hover") && (E.current && clearTimeout(E.current), E.current = setTimeout(() => {
-      x(!1, "trigger"), U(-1);
+  }, [T, w, I]), ie = K(() => {
+    T.includes("hover") && (E.current && clearTimeout(E.current), E.current = setTimeout(() => {
+      I(!1, "trigger"), U(-1);
     }, D * 1e3));
-  }, [A, D, x]), de = S((n) => {
-    A.includes("contextMenu") && (n.preventDefault(), x(!0, "trigger"));
-  }, [A, x]);
+  }, [T, D, I]), ue = K((n) => {
+    T.includes("contextMenu") && (n.preventDefault(), I(!0, "trigger"));
+  }, [T, I]);
   L(() => () => {
     E.current && clearTimeout(E.current);
   }, []);
-  const ce = {
-    top: ye,
-    bottom: Ie,
-    left: xe,
-    right: ke
-  }, ie = {
+  const pe = {
+    top: ke,
+    bottom: ve,
+    left: Ee,
+    right: Me
+  }, fe = {
     start: "",
-    center: Ce,
-    end: ve
-  }, ue = typeof b == "boolean" ? b : !!b, pe = [
-    De,
-    ce[m],
-    ie[o],
-    A.includes("hover") && Ee,
-    T && Me,
-    K
-  ].filter(Boolean).join(" "), H = f ? (te || !t) && /* @__PURE__ */ i(Y, { children: f ? f.map((n, M) => {
+    center: Ae,
+    end: Te
+  }, me = typeof b == "boolean" ? b : !!b, be = [
+    Ce,
+    pe[m],
+    fe[o],
+    T.includes("hover") && Re,
+    R && Ne,
+    P
+  ].filter(Boolean).join(" "), H = f ? (se || !t) && /* @__PURE__ */ c(Y, { children: f ? f.map((n, M) => {
     if ("type" in n && n.type === "divider")
-      return /* @__PURE__ */ i(Z, {}, n.key || `divider-${M}`);
-    const c = n;
-    return c.children && c.children.length > 0 ? /* @__PURE__ */ i(
-      W,
+      return /* @__PURE__ */ c(Z, {}, n.key || `divider-${M}`);
+    const d = n;
+    return d.children && d.children.length > 0 ? /* @__PURE__ */ c(
+      G,
       {
-        title: c.label,
-        icon: c.icon,
-        disabled: c.disabled,
-        children: c.children.map((N) => /* @__PURE__ */ i(
+        title: d.label,
+        icon: d.icon,
+        disabled: d.disabled,
+        children: d.children.map((S) => /* @__PURE__ */ c(
           B,
           {
-            icon: N.icon,
-            disabled: N.disabled,
-            danger: N.danger,
-            onClick: N.onClick,
-            children: N.label
+            icon: S.icon,
+            disabled: S.disabled,
+            danger: S.danger,
+            onClick: S.onClick,
+            children: S.label
           },
-          N.key
+          S.key
         ))
       },
-      c.key
-    ) : /* @__PURE__ */ i(
+      d.key
+    ) : /* @__PURE__ */ c(
       B,
       {
-        icon: c.icon,
-        disabled: c.disabled,
-        danger: c.danger,
-        onClick: c.onClick,
-        children: c.label
+        icon: d.icon,
+        disabled: d.disabled,
+        danger: d.danger,
+        onClick: d.onClick,
+        children: d.label
       },
-      c.key
+      d.key
     );
-  }) : null }) : null, fe = f ? /* @__PURE__ */ j(me, { children: [
-    k.Children.toArray(l).find(
-      (n) => k.isValidElement(n) && n.type === X
+  }) : null }) : null, we = f ? /* @__PURE__ */ j(ge, { children: [
+    x.Children.toArray(l).find(
+      (n) => x.isValidElement(n) && n.type === X
     ),
-    C ? C(H) : H
+    k ? k(H) : H
   ] }) : l;
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     Q.Provider,
     {
       value: {
         position: m,
         align: o,
-        menuId: e,
-        triggerId: g,
-        isOpen: T,
-        setIsOpen: x,
-        focusedIndex: P,
+        menuId: v,
+        triggerId: A,
+        isOpen: R,
+        setIsOpen: I,
+        focusedIndex: te,
         setFocusedIndex: U,
-        registerItem: se,
-        itemCount: ee,
-        setItemCount: ne,
-        disabled: d,
-        arrow: ue,
-        closeDropdown: oe,
-        getTestId: re
+        registerItem: de,
+        itemCount: re,
+        setItemCount: oe,
+        disabled: p,
+        arrow: me,
+        closeDropdown: le,
+        getTestId: ae
       },
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ c(
         "div",
         {
           ref: F,
-          className: pe,
-          "data-state": T ? "open" : "closed",
+          className: be,
+          "data-state": R ? "open" : "closed",
           "data-testid": y,
-          "aria-disabled": d || void 0,
-          onMouseEnter: ae,
-          onMouseLeave: le,
-          onContextMenu: de,
+          "aria-disabled": p || void 0,
+          onMouseEnter: ce,
+          onMouseLeave: ie,
+          onContextMenu: ue,
           ...O,
-          children: fe
+          children: we
         }
       )
     }
   );
 });
-function X({ children: u, className: l = "" }) {
-  const { menuId: f, triggerId: p, isOpen: m, setIsOpen: o, setFocusedIndex: s, itemCount: r, disabled: d } = z(), b = (t) => {
+function X({ children: i, className: l = "" }) {
+  const { menuId: f, triggerId: u, isOpen: m, setIsOpen: o, setFocusedIndex: s, itemCount: r, disabled: h } = z(), b = (t) => {
     switch (t.key) {
       case "Enter":
       case " ":
@@ -172,73 +173,73 @@ function X({ children: u, className: l = "" }) {
     }
   }, w = () => {
     o(!m), m || s(0);
-  }, D = k.Children.only(u), h = D.props;
-  return k.cloneElement(D, {
-    id: p,
-    tabIndex: d ? -1 : 0,
+  }, D = x.Children.only(i), g = D.props;
+  return x.cloneElement(D, {
+    id: u,
+    tabIndex: h ? -1 : 0,
     "aria-haspopup": "menu",
     "aria-expanded": m,
     "aria-controls": f,
     onClick: (t) => {
-      w(), h.onClick?.(t);
+      w(), g.onClick?.(t);
     },
     onKeyDown: (t) => {
-      b(t), h.onKeyDown?.(t);
+      b(t), g.onKeyDown?.(t);
     },
-    className: `${h.className || ""} ${l}`.trim()
+    className: `${g.className || ""} ${l}`.trim()
   });
 }
-function Y({ children: u, className: l = "" }) {
-  const { menuId: f, triggerId: p, isOpen: m, setIsOpen: o, focusedIndex: s, setFocusedIndex: r, setItemCount: d, arrow: b, position: w, getTestId: D } = z(), h = R(null), t = k.Children.toArray(u).filter(
-    (e) => k.isValidElement(e) && e.type === B
+function Y({ children: i, className: l = "" }) {
+  const { menuId: f, triggerId: u, isOpen: m, setIsOpen: o, focusedIndex: s, setFocusedIndex: r, setItemCount: h, arrow: b, position: w, getTestId: D } = z(), g = N(null), t = x.Children.toArray(i).filter(
+    (e) => x.isValidElement(e) && e.type === B
   );
   L(() => {
-    d(t.length);
-  }, [t.length, d]), L(() => {
-    m && s >= 0 && h.current && h.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')[s]?.focus();
+    h(t.length);
+  }, [t.length, h]), L(() => {
+    m && s >= 0 && g.current && g.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')[s]?.focus();
   }, [m, s]);
-  const C = (e) => {
-    const I = t.filter(
-      (v) => k.isValidElement(v) && !v.props.disabled
+  const k = (e) => {
+    const p = t.filter(
+      (v) => x.isValidElement(v) && !v.props.disabled
     ).length;
     switch (e.key) {
       case "ArrowDown":
-        e.preventDefault(), r((s + 1) % I);
+        e.preventDefault(), r((s + 1) % p);
         break;
       case "ArrowUp":
-        e.preventDefault(), r((s - 1 + I) % I);
+        e.preventDefault(), r((s - 1 + p) % p);
         break;
       case "Home":
         e.preventDefault(), r(0);
         break;
       case "End":
-        e.preventDefault(), r(I - 1);
+        e.preventDefault(), r(p - 1);
         break;
       case "Escape":
-        e.preventDefault(), o(!1), r(-1), document.getElementById(p)?.focus();
+        e.preventDefault(), o(!1), r(-1), document.getElementById(u)?.focus();
         break;
       case "Tab":
         o(!1), r(-1);
         break;
     }
   }, y = [
-    Ae,
+    Se,
     J,
     "bg-base-100",
     "rounded-box",
     "z-50",
     "shadow",
     l
-  ].filter(Boolean).join(" "), K = k.Children.map(u, (e, g) => {
-    if (k.isValidElement(e)) {
-      const I = e.key != null ? String(e.key) : void 0;
+  ].filter(Boolean).join(" "), P = x.Children.map(i, (e, C) => {
+    if (x.isValidElement(e)) {
+      const p = e.key != null ? String(e.key) : void 0;
       if (e.type === B)
-        return k.cloneElement(e, { _index: g, _key: I });
-      if (e.type === W)
-        return k.cloneElement(e, { _key: I });
+        return x.cloneElement(e, { _index: C, _key: p });
+      if (e.type === G)
+        return x.cloneElement(e, { _key: p });
     }
     return e;
-  }), a = b ? /* @__PURE__ */ i(
+  }), a = b ? /* @__PURE__ */ c(
     "span",
     {
       className: `absolute w-0 h-0 border-8 border-solid ${{
@@ -253,83 +254,83 @@ function Y({ children: u, className: l = "" }) {
   return /* @__PURE__ */ j(
     "ul",
     {
-      ref: h,
+      ref: g,
       id: f,
       role: "menu",
-      "aria-labelledby": p,
+      "aria-labelledby": u,
       tabIndex: -1,
       className: `${y} ${b ? "relative" : ""}`,
       "data-testid": D("menu"),
-      onKeyDown: C,
+      onKeyDown: k,
       children: [
         a,
-        K
+        P
       ]
     }
   );
 }
 function B({
-  children: u,
+  children: i,
   icon: l,
   label: f,
-  onClick: p,
+  onClick: u,
   active: m = !1,
   disabled: o = !1,
   danger: s = !1,
   className: r = "",
-  _key: d
+  _key: h
 }) {
-  const { closeDropdown: b, getTestId: w } = z(), D = [m && "active", o && "disabled", r].filter(Boolean).join(" "), h = () => {
-    o || (p?.(), b());
+  const { closeDropdown: b, getTestId: w } = z(), D = [m && "active", o && "disabled", r].filter(Boolean).join(" "), g = () => {
+    o || (u?.(), b());
   }, t = (y) => {
-    (y.key === "Enter" || y.key === " ") && !o && (y.preventDefault(), h());
-  }, C = f || u;
-  return /* @__PURE__ */ i("li", { className: D, role: "none", "data-key": d, "data-testid": d ? w(`item-${d}`) : void 0, children: /* @__PURE__ */ j(
+    (y.key === "Enter" || y.key === " ") && !o && (y.preventDefault(), g());
+  }, k = f || i;
+  return /* @__PURE__ */ c("li", { className: D, role: "none", "data-key": h, "data-testid": h ? w(`item-${h}`) : void 0, children: /* @__PURE__ */ j(
     "a",
     {
       role: "menuitem",
       tabIndex: o ? -1 : 0,
       "aria-disabled": o || void 0,
       className: s ? "text-error" : "",
-      onClick: h,
+      onClick: g,
       onKeyDown: t,
       children: [
-        l && /* @__PURE__ */ i("span", { className: "mr-2 inline-flex items-center", children: l }),
-        C
+        l && /* @__PURE__ */ c("span", { className: "mr-2 inline-flex items-center", children: l }),
+        k
       ]
     }
   ) });
 }
-function W({
-  children: u,
+function G({
+  children: i,
   title: l,
   icon: f,
-  disabled: p = !1,
+  disabled: u = !1,
   className: m = "",
   _key: o
 }) {
-  const [s, r] = $(!1), d = R(null), b = R(null), w = R(null), D = V(), h = () => {
-    p || r(!0);
+  const [s, r] = $(!1), h = N(null), b = N(null), w = N(null), D = V(), g = () => {
+    u || r(!0);
   }, t = () => {
     r(!1);
-  }, C = () => {
+  }, k = () => {
     setTimeout(() => {
       w.current?.querySelector('[role="menuitem"]:not([aria-disabled="true"])')?.focus();
     }, 0);
   }, y = (a) => {
-    if (!p)
+    if (!u)
       switch (a.key) {
         case "ArrowRight":
         case "Enter":
         case " ":
-          a.preventDefault(), a.stopPropagation(), r(!0), C();
+          a.preventDefault(), a.stopPropagation(), r(!0), k();
           break;
         case "ArrowLeft":
         case "Escape":
           a.preventDefault(), a.stopPropagation(), r(!1);
           break;
       }
-  }, K = (a) => {
+  }, P = (a) => {
     switch (a.key) {
       case "ArrowLeft":
       case "Escape":
@@ -339,28 +340,28 @@ function W({
         a.preventDefault(), a.stopPropagation();
         const e = w.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
         if (e) {
-          const v = (Array.from(e).findIndex((P) => P === document.activeElement) + 1) % e.length;
+          const v = (Array.from(e).findIndex((A) => A === document.activeElement) + 1) % e.length;
           e[v]?.focus();
         }
         break;
       case "ArrowUp":
         a.preventDefault(), a.stopPropagation();
-        const g = w.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
-        if (g) {
-          const v = (Array.from(g).findIndex((P) => P === document.activeElement) - 1 + g.length) % g.length;
-          g[v]?.focus();
+        const C = w.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
+        if (C) {
+          const v = (Array.from(C).findIndex((A) => A === document.activeElement) - 1 + C.length) % C.length;
+          C[v]?.focus();
         }
         break;
     }
-  }, O = [p && "disabled", m].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i(
+  }, O = [u && "disabled", m].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c(
     "li",
     {
-      ref: d,
+      ref: h,
       className: O,
       role: "none",
       "data-key": o,
-      onMouseEnter: h,
+      onMouseEnter: g,
       onMouseLeave: t,
       children: /* @__PURE__ */ j("details", { open: s, children: [
         /* @__PURE__ */ j(
@@ -368,19 +369,19 @@ function W({
           {
             ref: b,
             role: "menuitem",
-            tabIndex: p ? -1 : 0,
-            "aria-disabled": p || void 0,
+            tabIndex: u ? -1 : 0,
+            "aria-disabled": u || void 0,
             "aria-haspopup": "menu",
             "aria-expanded": s,
             "aria-controls": D,
             onKeyDown: y,
             children: [
-              f && /* @__PURE__ */ i("span", { className: "mr-2 inline-flex items-center", children: f }),
+              f && /* @__PURE__ */ c("span", { className: "mr-2 inline-flex items-center", children: f }),
               l
             ]
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ c(
           "ul",
           {
             ref: w,
@@ -388,26 +389,26 @@ function W({
             className: `${J} bg-base-100 rounded-box z-50 shadow`,
             role: "menu",
             "aria-label": typeof l == "string" ? l : void 0,
-            onKeyDown: K,
-            children: u
+            onKeyDown: P,
+            children: i
           }
         )
       ] })
     }
   );
 }
-function Z({ className: u = "" }) {
-  const l = ["border-base-content/10", u].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i("li", { role: "separator", className: "my-1", children: /* @__PURE__ */ i("hr", { className: l }) });
+function Z({ className: i = "" }) {
+  const l = ["border-base-content/10", i].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c("li", { role: "separator", className: "my-1", children: /* @__PURE__ */ c("hr", { className: l }) });
 }
-const Ke = Object.assign(Te, {
+const Be = Object.assign(Ke, {
   Trigger: X,
   Menu: Y,
   Item: B,
-  SubMenu: W,
+  SubMenu: G,
   Divider: Z
 });
 export {
-  Ke as Dropdown
+  Be as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map