asterui 0.12.26 → 0.12.27

package/dist/index92.js

@@ -1,213 +1,444 @@
-import { jsxs as k, jsx as r } from "react/jsx-runtime";
-import { useState as C, useMemo as S, useCallback as j } from "react";
-function B({
-  items: s,
-  selectedKeys: n,
-  onSelectChange: p,
-  title: x,
-  showSearch: g,
-  filterOption: y,
-  render: N,
-  showSelectAll: w,
-  disabled: u,
-  listStyle: T
-}) {
-  const [l, L] = C(""), b = S(() => l ? s.filter((e) => y(l, e)) : s, [s, l, y]), m = b.filter((e) => !e.disabled), d = m.length > 0 && m.every((e) => n.includes(e.key)), h = m.some((e) => n.includes(e.key)), i = () => {
-    if (!u)
-      if (d)
-        p(n.filter((e) => !m.some((a) => a.key === e)));
-      else {
-        const e = m.map((o) => o.key), a = [.../* @__PURE__ */ new Set([...n, ...e])];
-        p(a);
-      }
-  }, M = (e, a) => {
-    u || a || (n.includes(e) ? p(n.filter((o) => o !== e)) : p([...n, e]));
+import { jsx as k, jsxs as ue } from "react/jsx-runtime";
+import he, { forwardRef as Ne, useCallback as D, useMemo as G, useState as V, createContext as Te, useRef as Ee, useEffect as Ie, useContext as Le } from "react";
+const ke = Te(null);
+function De() {
+  const e = Le(ke);
+  if (!e)
+    throw new Error("Tree components must be used within a Tree");
+  return e;
+}
+function Se(e) {
+  const a = [], c = (d) => {
+    d.forEach((f) => {
+      a.push(f.key), f.children && c(f.children);
+    });
   };
-  return /* @__PURE__ */ k(
+  return c(e), a;
+}
+function de(e) {
+  const a = [], c = (d) => {
+    d.children && d.children.forEach((f) => {
+      a.push(f.key), c(f);
+    });
+  };
+  return c(e), a;
+}
+function ye(e) {
+  const a = /* @__PURE__ */ new Map(), c = (d, f) => {
+    d.forEach((u) => {
+      a.set(u.key, f), u.children && c(u.children, u.key);
+    });
+  };
+  return c(e, null), a;
+}
+function pe(e, a) {
+  for (const c of e) {
+    if (c.key === a) return c;
+    if (c.children) {
+      const d = pe(c.children, a);
+      if (d) return d;
+    }
+  }
+  return null;
+}
+function Ae(e, a) {
+  const c = [], d = (f) => {
+    f.forEach((u) => {
+      c.push(u), u.children && a.includes(u.key) && d(u.children);
+    });
+  };
+  return d(e), c;
+}
+function Me(e, a) {
+  const c = ye(e), d = [];
+  let f = c.get(a);
+  for (; f; )
+    d.push(f), f = c.get(f);
+  return d;
+}
+function be({ node: e, level: a }) {
+  const {
+    checkable: c,
+    checkboxColor: d,
+    checkboxSize: f,
+    selectable: u,
+    showLine: J,
+    showIcon: E,
+    blockNode: Q,
+    expandedKeys: I,
+    selectedKeys: S,
+    loadingKeys: X,
+    switcherIcon: C,
+    titleRender: q,
+    filterTreeNode: L,
+    onToggle: N,
+    onSelect: A,
+    onCheck: M,
+    onRightClick: H,
+    getCheckedState: Y,
+    focusedKey: T,
+    setFocusedKey: w,
+    flattenedNodes: K,
+    baseTestId: Z
+  } = De(), $ = Ee(null), j = e.children && e.children.length > 0, b = e.isLeaf ?? !j, g = I.includes(e.key), p = S.includes(e.key), ee = X.includes(e.key), F = T === e.key, { checked: R, indeterminate: _ } = Y(e), O = L ? L(e) : !1, m = e.disabled;
+  Ie(() => {
+    F && $.current && $.current.focus();
+  }, [F]);
+  const x = (s) => {
+    s.stopPropagation(), !b && !m && N(e.key, e);
+  }, te = (s) => {
+    u && e.selectable !== !1 && !m && A(e.key, e);
+  }, z = (s) => {
+    s.stopPropagation(), !m && !e.disableCheckbox && M(e.key, e);
+  }, ne = (s) => {
+    H && (s.preventDefault(), H({ event: s, node: e }));
+  }, se = (s) => {
+    const v = K.findIndex((i) => i.key === e.key);
+    switch (s.key) {
+      case "ArrowDown": {
+        s.preventDefault();
+        const i = K[v + 1];
+        i && w(i.key);
+        break;
+      }
+      case "ArrowUp": {
+        s.preventDefault();
+        const i = K[v - 1];
+        i && w(i.key);
+        break;
+      }
+      case "ArrowRight": {
+        if (s.preventDefault(), !b && !g)
+          N(e.key, e);
+        else if (j && g) {
+          const i = e.children[0];
+          w(i.key);
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        s.preventDefault(), !b && g && N(e.key, e);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        s.preventDefault(), c && e.checkable !== !1 ? M(e.key, e) : u && e.selectable !== !1 ? A(e.key, e) : b || N(e.key, e);
+        break;
+      }
+      case "Home": {
+        s.preventDefault();
+        const i = K[0];
+        i && w(i.key);
+        break;
+      }
+      case "End": {
+        s.preventDefault();
+        const i = K[K.length - 1];
+        i && w(i.key);
+        break;
+      }
+    }
+  }, re = {
+    xs: "checkbox-xs",
+    sm: "checkbox-sm",
+    md: "",
+    lg: "checkbox-lg",
+    xl: "checkbox-xl"
+  }, ce = {
+    primary: "checkbox-primary",
+    secondary: "checkbox-secondary",
+    accent: "checkbox-accent",
+    neutral: "checkbox-neutral",
+    info: "checkbox-info",
+    success: "checkbox-success",
+    warning: "checkbox-warning",
+    error: "checkbox-error"
+  }, ie = re[f], ae = ce[d], le = () => ee ? /* @__PURE__ */ k("span", { className: "loading loading-spinner loading-xs" }) : b ? /* @__PURE__ */ k("span", { className: "w-4 h-4" }) : C ? typeof C == "function" ? C(g) : C : /* @__PURE__ */ k(
+    "svg",
+    {
+      className: `w-4 h-4 transition-transform duration-200 ${g ? "rotate-90" : ""}`,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ k("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+    }
+  ), B = () => q ? q(e) : e.title, P = p ? "selected" : g ? "expanded" : "collapsed";
+  return /* @__PURE__ */ ue(
     "div",
     {
-      className: "flex flex-col border border-base-300 rounded-lg bg-base-100 overflow-hidden",
-      style: { width: 200, height: 300, ...T },
+      className: "tree-node",
+      role: "treeitem",
+      "aria-expanded": b ? void 0 : g,
+      "aria-selected": p,
+      "aria-checked": c ? _ ? "mixed" : R : void 0,
+      "aria-disabled": m,
+      "aria-level": a + 1,
+      "data-testid": `${Z}-node-${e.key}`,
+      "data-state": P,
+      "data-key": e.key,
       children: [
-        /* @__PURE__ */ k("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-base-300 bg-base-200", children: [
-          w && /* @__PURE__ */ r(
-            "input",
-            {
-              type: "checkbox",
-              className: "checkbox checkbox-sm checkbox-primary",
-              checked: d,
-              ref: (e) => {
-                e && (e.indeterminate = h && !d);
-              },
-              onChange: i,
-              disabled: u || m.length === 0
-            }
-          ),
-          /* @__PURE__ */ r("span", { className: "flex-1 font-medium text-sm truncate", children: x }),
-          /* @__PURE__ */ k("span", { className: "text-xs text-base-content/50", children: [
-            n.filter((e) => b.some((a) => a.key === e)).length,
-            "/",
-            b.length
-          ] })
-        ] }),
-        g && /* @__PURE__ */ r("div", { className: "px-2 py-2 border-b border-base-300", children: /* @__PURE__ */ r(
-          "input",
-          {
-            type: "text",
-            className: "input input-sm w-full",
-            placeholder: "Search...",
-            value: l,
-            onChange: (e) => L(e.target.value),
-            disabled: u
-          }
-        ) }),
-        /* @__PURE__ */ r("div", { className: "flex-1 overflow-auto", children: b.length > 0 ? b.map((e) => /* @__PURE__ */ k(
+        /* @__PURE__ */ ue(
           "div",
           {
+            ref: $,
             className: [
-              "flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-base-200 transition-colors",
-              n.includes(e.key) && "bg-primary/10",
-              (u || e.disabled) && "opacity-50 cursor-not-allowed"
+              "flex items-center py-1 px-1 rounded transition-colors outline-none",
+              "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1",
+              u && !m && "cursor-pointer hover:bg-base-200",
+              p && "bg-primary/10 text-primary",
+              m && "opacity-50 cursor-not-allowed",
+              O && "bg-warning/20",
+              Q && "w-full"
             ].filter(Boolean).join(" "),
-            onClick: () => M(e.key, !!e.disabled),
+            style: { paddingLeft: `${a * 20}px` },
+            tabIndex: F ? 0 : -1,
+            onClick: te,
+            onContextMenu: ne,
+            onKeyDown: se,
+            onFocus: () => w(e.key),
             children: [
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ k(
+                "span",
+                {
+                  className: [
+                    "w-5 h-5 flex items-center justify-center flex-shrink-0",
+                    !b && !m && "cursor-pointer hover:bg-base-300 rounded"
+                  ].filter(Boolean).join(" "),
+                  onClick: x,
+                  "aria-hidden": "true",
+                  children: le()
+                }
+              ),
+              c && e.checkable !== !1 && /* @__PURE__ */ k("span", { className: "mr-1 flex-shrink-0", onClick: z, children: /* @__PURE__ */ k(
                 "input",
                 {
                   type: "checkbox",
-                  className: "checkbox checkbox-sm checkbox-primary",
-                  checked: n.includes(e.key),
-                  disabled: u || e.disabled,
-                  onChange: () => {
-                  }
+                  className: `checkbox ${ie} ${ae}`,
+                  checked: R,
+                  ref: (s) => {
+                    s && (s.indeterminate = _);
+                  },
+                  disabled: m || e.disableCheckbox,
+                  onChange: z,
+                  tabIndex: -1,
+                  "aria-hidden": "true",
+                  "data-state": _ ? "indeterminate" : R ? "checked" : "unchecked"
                 }
-              ),
-              /* @__PURE__ */ r("span", { className: "flex-1 truncate text-sm", children: N(e) })
+              ) }),
+              E && e.icon && /* @__PURE__ */ k("span", { className: "mr-1 flex-shrink-0", "aria-hidden": "true", children: e.icon }),
+              /* @__PURE__ */ k("span", { className: "flex-1 truncate select-none", children: B() })
             ]
-          },
-          e.key
-        )) : /* @__PURE__ */ r("div", { className: "flex items-center justify-center h-full text-base-content/50 text-sm", children: "No data" }) })
+          }
+        ),
+        j && g && /* @__PURE__ */ k(
+          "div",
+          {
+            className: J ? "border-l border-base-300 ml-2.5" : "",
+            role: "group",
+            "aria-label": `${e.title} children`,
+            children: e.children.map((s) => /* @__PURE__ */ k(be, { node: s, level: a + 1 }, s.key))
+          }
+        )
       ]
     }
   );
 }
-function G({
-  dataSource: s,
-  targetKeys: n,
-  defaultTargetKeys: p = [],
-  onChange: x,
-  onSelectChange: g,
-  titles: y = ["Source", "Target"],
-  render: N = (d) => d.title,
-  showSearch: w = !1,
-  filterOption: u = (d, h) => (typeof h.title == "string" ? h.title : String(h.title)).toLowerCase().includes(d.toLowerCase()),
-  showSelectAll: T = !0,
-  disabled: l = !1,
-  listStyle: L,
-  className: b = "",
-  ...m
-}) {
-  const [d, h] = C(p), [i, M] = C([]), [e, a] = C([]), o = n ?? d, K = S(
-    () => s.filter((t) => !o.includes(t.key)),
-    [s, o]
-  ), V = S(
-    () => s.filter((t) => o.includes(t.key)),
-    [s, o]
-  ), W = j(
-    (t) => {
-      M(t), g?.(t, e);
-    },
-    [e, g]
-  ), $ = j(
-    (t) => {
-      a(t), g?.(i, t);
-    },
-    [i, g]
-  ), q = j(() => {
-    if (l || i.length === 0) return;
-    const t = i.filter((f) => {
-      const v = s.find((I) => I.key === f);
-      return v && !v.disabled;
-    });
-    if (t.length === 0) return;
-    const c = [...o, ...t];
-    n === void 0 && h(c), M([]), x?.(c, "right", t);
-  }, [l, i, o, n, x, s]), z = j(() => {
-    if (l || e.length === 0) return;
-    const t = e.filter((f) => {
-      const v = s.find((I) => I.key === f);
-      return v && !v.disabled;
-    });
-    if (t.length === 0) return;
-    const c = o.filter((f) => !t.includes(f));
-    n === void 0 && h(c), a([]), x?.(c, "left", t);
-  }, [l, e, o, n, x, s]), A = i.some((t) => {
-    const c = s.find((f) => f.key === t);
-    return c && !c.disabled;
-  }), D = e.some((t) => {
-    const c = s.find((f) => f.key === t);
-    return c && !c.disabled;
-  });
-  return /* @__PURE__ */ k("div", { className: `flex items-center gap-4 ${b}`, ...m, children: [
-    /* @__PURE__ */ r(
-      B,
-      {
-        items: K,
-        selectedKeys: i,
-        onSelectChange: W,
-        title: y[0],
-        showSearch: w,
-        filterOption: u,
-        render: N,
-        showSelectAll: T,
-        disabled: l,
-        listStyle: L,
-        direction: "left"
+function fe(e) {
+  return null;
+}
+fe.displayName = "Tree.Node";
+function $e(e) {
+  return e.type === fe || typeof e.type == "function" && e.type.displayName === "Tree.Node";
+}
+const _e = Object.assign(
+  Ne(function({
+    treeData: a,
+    children: c,
+    checkable: d = !1,
+    checkboxColor: f = "primary",
+    checkboxSize: u = "sm",
+    selectable: J = !0,
+    multiple: E = !1,
+    defaultExpandAll: Q = !1,
+    defaultExpandedKeys: I = [],
+    expandedKeys: S,
+    defaultSelectedKeys: X = [],
+    selectedKeys: C,
+    defaultCheckedKeys: q = [],
+    checkedKeys: L,
+    onExpand: N,
+    onSelect: A,
+    onCheck: M,
+    showLine: H = !1,
+    showIcon: Y = !1,
+    checkStrictly: T = !1,
+    autoExpandParent: w = !0,
+    blockNode: K = !1,
+    switcherIcon: Z,
+    titleRender: $,
+    filterTreeNode: j,
+    loadData: b,
+    onRightClick: g,
+    fieldNames: p,
+    className: ee = "",
+    "data-testid": F,
+    ...R
+  }, _) {
+    const O = F ?? "tree", m = D((t, o, n) => {
+    }, []), x = G(() => {
+      if (a) {
+        if (p) {
+          const o = (n) => {
+            const r = p.key ? n[p.key] : n.key, l = p.title ? n[p.title] : n.title, h = p.children ? n[p.children] : n.children;
+            return {
+              ...n,
+              key: r,
+              title: l,
+              children: Array.isArray(h) ? h.map((y) => o(y)) : void 0
+            };
+          };
+          return a.map(o);
+        }
+        return a;
       }
-    ),
-    /* @__PURE__ */ k("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ r(
-        "button",
-        {
-          type: "button",
-          className: "btn btn-sm btn-outline",
-          onClick: q,
-          disabled: l || !A,
-          "aria-label": "Move to target",
-          children: /* @__PURE__ */ r("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+      const t = (o) => {
+        const n = [];
+        return he.Children.forEach(o, (r) => {
+          if (he.isValidElement(r) && $e(r)) {
+            const l = r.props, h = r.key;
+            if (!h) {
+              console.warn("Tree.Node requires a key prop");
+              return;
+            }
+            const y = {
+              key: h,
+              title: l.title,
+              icon: l.icon,
+              disabled: l.disabled,
+              disableCheckbox: l.disableCheckbox,
+              selectable: l.selectable,
+              checkable: l.checkable,
+              isLeaf: l.isLeaf,
+              children: l.children ? t(l.children) : void 0
+            };
+            n.push(y);
+          }
+        }), n;
+      };
+      return t(c);
+    }, [a, c, p]), [te, z] = V([]), ne = G(() => {
+      if (Q)
+        return Se(x);
+      if (w && I.length > 0) {
+        const t = new Set(I);
+        return I.forEach((o) => {
+          Me(x, o).forEach((n) => t.add(n));
+        }), Array.from(t);
+      }
+      return I;
+    }, []), [se, re] = V(ne), [ce, ie] = V(X), [ae, le] = V(q), [B, P] = V(null), s = S ?? se, v = C ?? ce, i = L ?? ae, oe = G(() => ye(x), [x]), U = G(() => Ae(x, s), [x, s]), xe = D(
+      (t) => {
+        if (T)
+          return { checked: i.includes(t.key), indeterminate: !1 };
+        if (!t.children || t.children.length === 0)
+          return { checked: i.includes(t.key), indeterminate: !1 };
+        const o = de(t), n = o.filter((r) => i.includes(r));
+        return n.length === 0 ? { checked: i.includes(t.key), indeterminate: !1 } : n.length === o.length ? { checked: !0, indeterminate: !1 } : { checked: !1, indeterminate: !0 };
+      },
+      [i, T]
+    ), ge = D(
+      async (t, o) => {
+        const n = s.includes(t);
+        if (b && !n && !o.isLeaf && (!o.children || o.children.length === 0)) {
+          z((l) => [...l, t]);
+          try {
+            await b(o);
+          } finally {
+            z((l) => l.filter((h) => h !== t));
+          }
         }
-      ),
-      /* @__PURE__ */ r(
-        "button",
-        {
-          type: "button",
-          className: "btn btn-sm btn-outline",
-          onClick: z,
-          disabled: l || !D,
-          "aria-label": "Move to source",
-          children: /* @__PURE__ */ r("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+        const r = n ? s.filter((l) => l !== t) : [...s, t];
+        S === void 0 && re(r), N?.(r, { node: o, expanded: !n });
+      },
+      [s, S, N, b]
+    ), me = D(
+      (t, o) => {
+        let n;
+        E ? v.includes(t) ? n = v.filter((r) => r !== t) : n = [...v, t] : n = v.includes(t) ? [] : [t], C === void 0 && ie(n), A?.(n, { node: o, selected: n.includes(t) });
+      },
+      [v, E, C, A]
+    ), ve = D(
+      (t, o) => {
+        const n = i.includes(t);
+        let r = [...i];
+        if (T)
+          n ? r = r.filter((l) => l !== t) : r.push(t);
+        else {
+          const l = de(o);
+          n ? r = r.filter((y) => y !== t && !l.includes(y)) : (r.push(t), l.forEach((y) => {
+            r.includes(y) || r.push(y);
+          }));
+          let h = oe.get(t) ?? null;
+          for (; h; ) {
+            const y = pe(x, h);
+            y && y.children && (y.children.every(
+              (W) => r.includes(W.key) || de(W).every((Ke) => r.includes(Ke))
+            ) ? r.includes(h) || r.push(h) : r = r.filter((W) => W !== h)), h = oe.get(h) ?? null;
+          }
         }
-      )
-    ] }),
-    /* @__PURE__ */ r(
-      B,
+        L === void 0 && le(r), M?.(r, { node: o, checked: !n });
+      },
+      [i, L, M, oe, x, T]
+    ), Ce = D(() => {
+      !B && U.length > 0 && P(U[0].key);
+    }, [B, U]), we = {
+      checkable: d,
+      checkboxColor: f,
+      checkboxSize: u,
+      selectable: J,
+      multiple: E,
+      showLine: H,
+      showIcon: Y,
+      blockNode: K,
+      checkStrictly: T,
+      expandedKeys: s,
+      selectedKeys: v,
+      checkedKeys: i,
+      loadingKeys: te,
+      switcherIcon: Z,
+      titleRender: $,
+      filterTreeNode: j,
+      onToggle: ge,
+      onSelect: me,
+      onCheck: ve,
+      onRightClick: g,
+      getCheckedState: xe,
+      focusedKey: B,
+      setFocusedKey: P,
+      flattenedNodes: U,
+      registerNode: m,
+      baseTestId: O
+    };
+    return /* @__PURE__ */ k(ke.Provider, { value: we, children: /* @__PURE__ */ k(
+      "div",
       {
-        items: V,
-        selectedKeys: e,
-        onSelectChange: $,
-        title: y[1],
-        showSearch: w,
-        filterOption: u,
-        render: N,
-        showSelectAll: T,
-        disabled: l,
-        listStyle: L,
-        direction: "right"
+        ref: _,
+        className: `tree ${ee}`,
+        role: "tree",
+        "aria-multiselectable": E,
+        "data-testid": O,
+        onFocus: Ce,
+        ...R,
+        children: x.map((t) => /* @__PURE__ */ k(be, { node: t, level: 0 }, t.key))
       }
-    )
-  ] });
-}
+    ) });
+  }),
+  {
+    Node: fe
+  }
+);
 export {
-  G as Transfer
+  _e as Tree
 };
 //# sourceMappingURL=index92.js.map