asterui 0.12.23 → 0.12.24

package/dist/index15.js

@@ -1,161 +1,415 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { useState as g, useRef as I, useId as j, useEffect as $, useCallback as E } from "react";
-function T({
-  options: c,
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import { forwardRef as Je, useState as k, useCallback as R, useRef as q, useId as Qe, useMemo as G, useEffect as J } from "react";
+function xe(L, b, N) {
+  return L[b] ?? L[N];
+}
+const Xe = Je(({
+  options: L,
   value: b,
-  onChange: k,
-  placeholder: M = "Please select",
-  disabled: i = !1,
-  allowClear: S = !0,
-  expandTrigger: D = "click",
-  displayRender: w,
-  size: C = "md",
-  className: B = "",
-  ...H
-}) {
-  const [r, d] = g(!1), [o, p] = g(b || []), [y, u] = g([]), x = I(null), W = j(), N = j();
-  $(() => {
-    b !== void 0 && p(b);
-  }, [b]), $(() => {
-    const e = (s) => {
-      x.current && !x.current.contains(s.target) && (d(!1), u([]));
+  defaultValue: N,
+  onChange: v,
+  placeholder: Q = "Please select",
+  disabled: y = !1,
+  allowClear: ke = !0,
+  expandTrigger: ye = "click",
+  changeOnSelect: I = !1,
+  displayRender: X,
+  size: Y = "md",
+  color: Z,
+  status: _,
+  showSearch: u = !1,
+  notFoundContent: je = "No results found",
+  loadData: ee,
+  fieldNames: K,
+  open: te,
+  onDropdownVisibleChange: ne,
+  popupClassName: $e = "",
+  dropdownRender: re,
+  multiple: w = !1,
+  maxTagCount: A,
+  className: Ce = "",
+  "aria-label": Le,
+  "data-testid": Ne,
+  ...Pe
+}, E) => {
+  const P = Ne ?? "cascader", W = te !== void 0, [Oe, De] = k(!1), i = W ? te : Oe, p = R((e) => {
+    W || De(e), ne?.(e);
+  }, [W, ne]), [j, O] = k(b ?? N ?? []), [f, D] = k(
+    b ? [b] : N ? [N] : []
+  ), [se, $] = k([]), [d, h] = k({ column: 0, row: 0 }), [M, S] = k(""), [oe, ae] = k(/* @__PURE__ */ new Set()), V = q(null), le = q(null), Me = q(null), z = Qe(), Se = `${z}-input`, ie = `${z}-listbox`, ce = K?.label ?? "label", de = K?.value ?? "value", T = K?.children ?? "children", U = R((e) => ({
+    value: xe(e, de, "value"),
+    label: xe(e, ce, "label"),
+    disabled: e.disabled,
+    isLeaf: e.isLeaf,
+    children: e[T] ? e[T].map(U) : void 0
+  }), [ce, de, T]), m = G(
+    () => L.map((e) => U(e)),
+    [L, U]
+  );
+  J(() => {
+    b !== void 0 && (O(b), w && D([b]));
+  }, [b, w]), J(() => {
+    const e = (t) => {
+      V.current && !V.current.contains(t.target) && (p(!1), $([]), S(""));
     };
-    if (r)
+    if (i)
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [r]);
-  const z = E((e, s) => {
-    if (e === 0) return c;
-    let t = c;
-    for (let l = 0; l < e; l++) {
-      const a = t.find((f) => f.value === s[l]);
-      if (!a?.children) return [];
-      t = a.children;
+  }, [i, p]);
+  const ue = R((e, t) => {
+    if (e === 0) return m;
+    let n = m;
+    for (let r = 0; r < e; r++) {
+      const s = n.find((o) => o.value === t[r]);
+      if (!s?.children) return [];
+      n = s.children;
+    }
+    return n;
+  }, [m]), B = R((e) => {
+    const t = [];
+    let n = m;
+    for (const r of e) {
+      const s = n.find((o) => o.value === r);
+      if (!s) break;
+      t.push(s), n = s.children || [];
     }
     return t;
-  }, [c]), O = E((e) => {
-    const s = [];
-    let t = c;
-    for (const l of e) {
-      const a = t.find((f) => f.value === l);
-      if (!a) break;
-      s.push(a), t = a.children || [];
+  }, [m]), fe = R(() => {
+    const e = [], t = (n, r, s) => {
+      for (const o of n) {
+        const a = [...r, o], g = [...s, o.value];
+        !o.children || o.children.length === 0 ? e.push({ path: a, values: g }) : (I && e.push({ path: a, values: g }), t(o.children, a, g));
+      }
+    };
+    return t(m, [], []), e;
+  }, [m, I]), c = G(() => {
+    if (!u || !M.trim()) return null;
+    const e = fe(), t = M.toLowerCase(), n = typeof u == "object" && u.filter ? u.filter : (r, s) => s.some(
+      (o) => String(o.label).toLowerCase().includes(r.toLowerCase())
+    );
+    return e.filter(({ path: r }) => n(t, r));
+  }, [u, M, fe]), C = i && se.length > 0 ? se : j, F = G(() => {
+    if (c) return [];
+    const e = [];
+    e.push(m);
+    for (let t = 0; t < C.length; t++) {
+      const n = ue(t + 1, C);
+      n.length > 0 && e.push(n);
     }
-    return s;
-  }, [c]), h = r && y.length > 0 ? y : o, v = [];
-  v.push(c);
-  for (let e = 0; e < h.length; e++) {
-    const s = z(e + 1, h);
-    s.length > 0 && v.push(s);
-  }
-  const K = (e, s) => {
+    return e;
+  }, [c, m, C, ue]), he = async (e, t) => {
     if (e.disabled) return;
-    const t = [...h.slice(0, s), e.value];
-    e.children && e.children.length > 0 ? u(t) : (p(t), d(!1), u([]), k?.(t, O(t)));
-  }, A = (e, s) => {
-    if (D !== "hover" || e.disabled) return;
-    const t = [...h.slice(0, s), e.value];
-    u(t);
-  }, R = (e) => {
-    e.stopPropagation(), p([]), k?.([], []);
-  }, V = (e) => {
-    if (!i)
+    const n = [...C.slice(0, t), e.value], r = B(n);
+    if (ee && !e.children && !e.isLeaf) {
+      const s = e.value;
+      if (!oe.has(s)) {
+        ae((o) => new Set(o).add(s));
+        try {
+          await ee(r);
+        } finally {
+          ae((o) => {
+            const a = new Set(o);
+            return a.delete(s), a;
+          });
+        }
+      }
+      $(n);
+      return;
+    }
+    if (e.children && e.children.length > 0)
+      $(n), I && (O(n), v?.(n, r));
+    else if (w) {
+      const s = n.join("/"), o = f.some((g) => g.join("/") === s);
+      let a;
+      o ? a = f.filter((g) => g.join("/") !== s) : a = [...f, n], D(a);
+    } else
+      O(n), p(!1), $([]), S(""), v?.(n, r);
+  }, be = (e, t) => {
+    if (w) {
+      const n = e.join("/"), r = f.some((o) => o.join("/") === n);
+      let s;
+      r ? s = f.filter((o) => o.join("/") !== n) : s = [...f, e], D(s);
+    } else
+      O(e), p(!1), S(""), v?.(e, t);
+  }, Fe = (e, t) => {
+    if (ye !== "hover" || e.disabled) return;
+    const n = [...C.slice(0, t), e.value];
+    $(n);
+  }, Re = (e) => {
+    e.stopPropagation(), w ? (D([]), v?.([], [])) : (O([]), v?.([], []));
+  }, Ae = (e, t) => {
+    t.stopPropagation();
+    const n = e.join("/"), r = f.filter((s) => s.join("/") !== n);
+    D(r), r.length > 0 ? v?.(r[r.length - 1], B(r[r.length - 1])) : v?.([], []);
+  }, Ee = (e) => {
+    if (!y)
       switch (e.key) {
         case "Enter":
+          if (e.preventDefault(), !i)
+            p(!0);
+          else if (c && c.length > 0) {
+            const { values: t, path: n } = c[d.row] || {};
+            t && be(t, n);
+          } else {
+            const t = F[d.column];
+            if (t) {
+              const n = t[d.row];
+              n && he(n, d.column);
+            }
+          }
+          break;
         case " ":
-          e.preventDefault(), d(!r);
+          u || (e.preventDefault(), p(!i));
           break;
         case "Escape":
-          e.preventDefault(), d(!1), u([]);
+          e.preventDefault(), p(!1), $([]), S("");
+          break;
+        case "ArrowDown":
+          if (e.preventDefault(), !i)
+            p(!0);
+          else if (c)
+            h((t) => ({
+              ...t,
+              row: Math.min(t.row + 1, c.length - 1)
+            }));
+          else {
+            const t = F[d.column];
+            t && h((n) => ({
+              ...n,
+              row: Math.min(n.row + 1, t.length - 1)
+            }));
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault(), h(c ? (t) => ({
+            ...t,
+            row: Math.max(t.row - 1, 0)
+          }) : (t) => ({
+            ...t,
+            row: Math.max(t.row - 1, 0)
+          }));
+          break;
+        case "ArrowRight":
+          e.preventDefault(), !c && d.column < F.length - 1 && h((t) => ({
+            column: t.column + 1,
+            row: 0
+          }));
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), !c && d.column > 0 && h((t) => ({
+            column: t.column - 1,
+            row: 0
+          }));
+          break;
+        case "Home":
+          e.preventDefault(), h((t) => ({ ...t, row: 0 }));
+          break;
+        case "End":
+          if (e.preventDefault(), c)
+            h((t) => ({ ...t, row: c.length - 1 }));
+          else {
+            const t = F[d.column];
+            t && h((n) => ({ ...n, row: t.length - 1 }));
+          }
           break;
       }
-  }, L = O(o), P = L.map((e) => e.label), q = w ? w(P, L) : P.join(" / "), F = {
-    xs: "input-xs text-xs",
-    sm: "input-sm text-sm",
-    md: "input-md",
-    lg: "input-lg text-lg"
-  }, G = {
+  };
+  J(() => {
+    i && h({ column: 0, row: 0 });
+  }, [i]);
+  const pe = B(j), me = pe.map((e) => e.label), ge = X ? X(me, pe) : me.join(" / "), ze = {
+    xs: "input-xs text-xs min-h-6",
+    sm: "input-sm text-sm min-h-8",
+    md: "input-md min-h-10",
+    lg: "input-lg text-lg min-h-12"
+  }, Be = {
     xs: "text-xs",
     sm: "text-sm",
     md: "text-base",
     lg: "text-lg"
-  };
-  return /* @__PURE__ */ m("div", { ref: x, className: `relative inline-block w-full ${B}`, "data-state": r ? "open" : "closed", ...H, children: [
-    /* @__PURE__ */ m(
-      "div",
-      {
-        id: W,
-        role: "combobox",
-        "aria-expanded": r,
-        "aria-haspopup": "listbox",
-        "aria-controls": N,
-        tabIndex: i ? -1 : 0,
-        className: `input input-bordered w-full flex items-center justify-between cursor-pointer ${F[C]} ${i ? "input-disabled cursor-not-allowed" : ""} ${r ? "border-primary" : ""}`,
-        onClick: () => !i && d(!r),
-        onKeyDown: V,
-        children: [
-          /* @__PURE__ */ n("span", { className: o.length === 0 ? "text-base-content/50" : "", children: o.length > 0 ? q : M }),
-          /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: [
-            S && o.length > 0 && !i && /* @__PURE__ */ n(
-              "button",
-              {
-                type: "button",
-                className: "btn btn-ghost btn-xs btn-circle",
-                onClick: R,
-                "aria-label": "Clear selection",
-                children: /* @__PURE__ */ n("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
-              }
-            ),
-            /* @__PURE__ */ n(
-              "svg",
-              {
-                className: `w-4 h-4 transition-transform ${r ? "rotate-180" : ""}`,
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    r && /* @__PURE__ */ n(
-      "div",
-      {
-        id: N,
-        className: `absolute z-50 mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg flex ${G[C]}`,
-        children: v.map((e, s) => /* @__PURE__ */ n(
-          "ul",
+  }, He = {
+    primary: "border-primary focus:border-primary",
+    secondary: "border-secondary focus:border-secondary",
+    accent: "border-accent focus:border-accent",
+    info: "border-info focus:border-info",
+    success: "border-success focus:border-success",
+    warning: "border-warning focus:border-warning",
+    error: "border-error focus:border-error"
+  }, Ie = () => _ === "error" ? "input-error" : _ === "warning" ? "input-warning" : Z && i ? He[Z] : i ? "input-primary" : "", we = (e, t) => `${z}-option-${e}-${t}`, ve = (e) => `${z}-search-option-${e}`, Ke = () => {
+    const e = f, t = A === "responsive" || typeof A == "number" ? e.slice(0, typeof A == "number" ? A : 3) : e, n = e.length - t.length;
+    return /* @__PURE__ */ x("div", { className: "flex flex-wrap gap-1 flex-1", children: [
+      t.map((r) => {
+        const o = B(r).map((a) => a.label).join(" / ");
+        return /* @__PURE__ */ x(
+          "span",
           {
-            role: "listbox",
-            className: `min-w-[120px] max-h-[200px] overflow-y-auto py-1 ${s > 0 ? "border-l border-base-300" : ""}`,
-            children: e.map((t) => {
-              const l = o[s] === t.value, a = h[s] === t.value, f = t.children && t.children.length > 0;
-              return /* @__PURE__ */ m(
-                "li",
+            className: "badge badge-sm gap-1",
+            children: [
+              o,
+              /* @__PURE__ */ l(
+                "button",
                 {
-                  role: "option",
-                  "aria-selected": l,
-                  "aria-disabled": t.disabled,
-                  className: `px-3 py-2 cursor-pointer flex items-center justify-between gap-2 ${t.disabled ? "text-base-content/30 cursor-not-allowed" : l ? "bg-primary text-primary-content" : a ? "bg-base-200" : "hover:bg-base-200"}`,
-                  onClick: () => K(t, s),
-                  onMouseEnter: () => A(t, s),
-                  children: [
-                    /* @__PURE__ */ n("span", { children: t.label }),
-                    f && /* @__PURE__ */ n("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
-                  ]
-                },
-                t.value
-              );
-            })
+                  type: "button",
+                  className: "btn btn-ghost btn-xs btn-circle w-3 h-3 min-h-0",
+                  onClick: (a) => Ae(r, a),
+                  "aria-label": `Remove ${o}`,
+                  children: /* @__PURE__ */ l("svg", { className: "w-2 h-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ l("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ]
           },
-          s
-        ))
-      }
-    )
-  ] });
-}
+          r.join("/")
+        );
+      }),
+      n > 0 && /* @__PURE__ */ x("span", { className: "badge badge-sm", children: [
+        "+",
+        n
+      ] })
+    ] });
+  }, We = () => {
+    if (!c) return null;
+    if (c.length === 0)
+      return /* @__PURE__ */ l("div", { className: "p-4 text-center text-base-content/50", children: je });
+    const e = typeof u == "object" && u.render ? u.render : null;
+    return /* @__PURE__ */ l("ul", { role: "listbox", className: "max-h-[200px] overflow-y-auto py-1", children: c.map(({ path: t, values: n }, r) => {
+      const s = w ? f.some((a) => a.join("/") === n.join("/")) : j.join("/") === n.join("/"), o = d.row === r;
+      return /* @__PURE__ */ l(
+        "li",
+        {
+          id: ve(r),
+          role: "option",
+          "aria-selected": s,
+          "data-testid": `${P}-search-option-${n.join("-")}`,
+          "data-state": s ? "selected" : void 0,
+          className: `px-3 py-2 cursor-pointer ${s ? "bg-primary text-primary-content" : o ? "bg-base-200" : "hover:bg-base-200"}`,
+          onClick: () => be(n, t),
+          children: e ? e(M, t) : t.map((a) => a.label).join(" / ")
+        },
+        n.join("/")
+      );
+    }) });
+  }, Ve = () => {
+    const e = c ? We() : /* @__PURE__ */ l("div", { className: "flex", children: F.map((t, n) => /* @__PURE__ */ l(
+      "ul",
+      {
+        role: "listbox",
+        "aria-label": `Level ${n + 1} options`,
+        className: `min-w-[120px] max-h-[200px] overflow-y-auto py-1 ${n > 0 ? "border-l border-base-300" : ""}`,
+        children: t.map((r, s) => {
+          const o = j[n] === r.value, a = C[n] === r.value, g = r.children && r.children.length > 0, Ue = oe.has(r.value), qe = d.column === n && d.row === s, Ge = we(n, s);
+          return /* @__PURE__ */ x(
+            "li",
+            {
+              id: Ge,
+              role: "option",
+              "aria-selected": o,
+              "aria-disabled": r.disabled,
+              "data-testid": `${P}-option-${r.value}`,
+              "data-state": o ? "selected" : a ? "hovered" : void 0,
+              "data-value": r.value,
+              className: `px-3 py-2 cursor-pointer flex items-center justify-between gap-2 ${r.disabled ? "text-base-content/30 cursor-not-allowed" : o ? "bg-primary text-primary-content" : qe || a ? "bg-base-200" : "hover:bg-base-200"}`,
+              onClick: () => he(r, n),
+              onMouseEnter: () => Fe(r, n),
+              children: [
+                /* @__PURE__ */ l("span", { children: r.label }),
+                Ue ? /* @__PURE__ */ l("span", { className: "loading loading-spinner loading-xs" }) : g ? /* @__PURE__ */ l("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ l("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) : null
+              ]
+            },
+            r.value
+          );
+        })
+      },
+      n
+    )) });
+    return re ? re(e) : e;
+  }, Te = () => {
+    if (i)
+      return c ? ve(d.row) : we(d.column, d.row);
+  }, H = w ? f.length > 0 : j.length > 0;
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      ref: (e) => {
+        V.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
+      },
+      className: `relative inline-block w-full ${Ce}`,
+      "data-testid": P,
+      "data-state": i ? "open" : "closed",
+      ...Pe,
+      children: [
+        /* @__PURE__ */ x(
+          "div",
+          {
+            id: Se,
+            role: "combobox",
+            "aria-expanded": i,
+            "aria-haspopup": "listbox",
+            "aria-controls": ie,
+            "aria-activedescendant": Te(),
+            "aria-label": Le,
+            "aria-disabled": y,
+            tabIndex: y ? -1 : 0,
+            className: `input input-bordered w-full flex items-center justify-between cursor-pointer gap-1 ${ze[Y]} ${y ? "input-disabled cursor-not-allowed" : ""} ${Ie()}`,
+            onClick: () => {
+              y || (p(!i), u && !i && setTimeout(() => le.current?.focus(), 0));
+            },
+            onKeyDown: Ee,
+            children: [
+              w && f.length > 0 ? Ke() : u && i ? /* @__PURE__ */ l(
+                "input",
+                {
+                  ref: le,
+                  type: "text",
+                  className: "flex-1 bg-transparent outline-none min-w-[50px]",
+                  value: M,
+                  onChange: (e) => S(e.target.value),
+                  onClick: (e) => e.stopPropagation(),
+                  placeholder: H ? String(ge) : Q,
+                  "aria-label": "Search options"
+                }
+              ) : /* @__PURE__ */ l("span", { className: `flex-1 truncate ${H ? "" : "text-base-content/50"}`, children: H ? ge : Q }),
+              /* @__PURE__ */ x("div", { className: "flex items-center gap-1 shrink-0", children: [
+                ke && H && !y && /* @__PURE__ */ l(
+                  "button",
+                  {
+                    type: "button",
+                    className: "btn btn-ghost btn-xs btn-circle",
+                    onClick: Re,
+                    "aria-label": "Clear selection",
+                    "data-testid": `${P}-clear`,
+                    children: /* @__PURE__ */ l("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ l("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  }
+                ),
+                /* @__PURE__ */ l(
+                  "svg",
+                  {
+                    className: `w-4 h-4 transition-transform ${i ? "rotate-180" : ""}`,
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ l("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        i && /* @__PURE__ */ l(
+          "div",
+          {
+            ref: Me,
+            id: ie,
+            className: `absolute z-50 mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg ${Be[Y]} ${$e}`,
+            "data-testid": `${P}-dropdown`,
+            children: Ve()
+          }
+        )
+      ]
+    }
+  );
+});
+Xe.displayName = "Cascader";
 export {
-  T as Cascader
+  Xe as Cascader
 };
 //# sourceMappingURL=index15.js.map