@aster-ui/prefixed 0.12.55 → 0.12.57

package/dist/components/Dropdown.js

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