@wisdomgarden/torque 0.1.0

package/dist/components/tree/hooks/use-tree-animation.js

@@ -0,0 +1,111 @@
+"use client";
+import { useState as w, useEffect as a, useRef as E, useCallback as _ } from "react";
+const b = 20, k = 200;
+function S(m, I, g, M) {
+  const [p, h] = w(
+    []
+  );
+  a(() => {
+    I !== void 0 && h(I);
+  }, [I]);
+  const [v, A] = w([]), [D, N] = w(/* @__PURE__ */ new Map()), L = E(null), c = E(
+    /* @__PURE__ */ new Map()
+  ), R = E([]);
+  a(() => {
+    const n = c.current;
+    return () => {
+      n.forEach((t) => clearTimeout(t)), n.clear();
+    };
+  }, []), a(() => {
+    m?.length && h(m);
+  }, [m]);
+  const x = _((n) => {
+    const t = L.current;
+    if (!t) return [];
+    const o = [];
+    let u;
+    try {
+      u = t.getItemInstance(n);
+    } catch {
+      return o;
+    }
+    const i = (l) => {
+      const e = l.getChildren();
+      for (const s of e)
+        o.push(s.getId()), s.isFolder() && s.isExpanded() && i(s);
+    };
+    return i(u), o;
+  }, []);
+  a(() => {
+    const n = R.current, t = p;
+    if (n === t) return;
+    const o = t.filter((i) => !n.includes(i)), u = n.filter((i) => !t.includes(i));
+    if (R.current = t, !(o.length === 0 && u.length === 0)) {
+      if (M) {
+        A(t);
+        return;
+      }
+      N((i) => {
+        const l = new Map(i);
+        for (const e of o) {
+          c.current.has(e) && (clearTimeout(c.current.get(e)), c.current.delete(e));
+          const s = x(e);
+          for (const r of s)
+            l.set(r, "expanding");
+          const T = setTimeout(() => {
+            N((r) => {
+              const f = new Map(r);
+              for (const d of s)
+                f.get(d) === "expanding" && f.delete(d);
+              return f;
+            });
+          }, b);
+          c.current.set(e, T);
+        }
+        for (const e of u) {
+          c.current.has(e) && (clearTimeout(c.current.get(e)), c.current.delete(e));
+          const s = x(e);
+          for (const r of s)
+            l.set(r, "collapsing");
+          const T = setTimeout(() => {
+            N((r) => {
+              const f = new Map(r);
+              for (const d of s)
+                f.get(d) === "collapsing" && f.delete(d);
+              return f;
+            }), A((r) => p.includes(e) ? r : r.filter((f) => f !== e));
+          }, k);
+          c.current.set(e, T);
+        }
+        return l;
+      }), A((i) => {
+        const l = [...t];
+        for (const e of u)
+          l.includes(e) || l.push(e);
+        return l;
+      });
+    }
+  }, [p, x, M]);
+  const O = _(
+    (n) => {
+      h((t) => {
+        const o = typeof n == "function" ? n(t) : n;
+        return g && setTimeout(() => {
+          g(o);
+        }, 0), o;
+      });
+    },
+    [g]
+  );
+  return {
+    expandedItems: v,
+    setExpandedItems: O,
+    animatingNodes: D,
+    treeRef: L
+  };
+}
+export {
+  k as ANIMATION_COLLAPSE_DURATION,
+  b as ANIMATION_EXPAND_DELAY,
+  S as useTreeAnimation
+};

package/dist/components/tree/hooks/use-tree-config.d.ts

@@ -0,0 +1,22 @@
+import { TreeDataNode } from '../tree.types';
+type Setter = (v: string[] | ((old: string[]) => string[])) => void;
+/**
+ * 将 TreeDataNode<T>[] 组装成 @headless-tree 所需的 dataLoader，调用 useTree
+ *
+ * selectedItems / checkedItems 分别受控，互不干扰
+ */
+export declare function useTreeConfig<T>(data: TreeDataNode<T>[], getItemId: (item: T) => string, getItemName: (item: T) => string, isItemFolder: ((item: T) => boolean) | undefined, options: {
+    selectedItems: string[];
+    setSelectedItems: Setter;
+    checkedItems: string[];
+    setCheckedItems: Setter;
+    expandedItems: string[];
+    setExpandedItems: Setter;
+    selectableFolders?: boolean;
+    propagateCheckedState: boolean;
+    selectOnLabelClick: boolean;
+    selectionMode: 'single' | 'multi';
+    expandFolderOnSelect: boolean;
+    isItemDisabled?: (item: T) => boolean;
+}): import("@headless-tree/core").TreeInstance<T>;
+export {};

package/dist/components/tree/hooks/use-tree-config.js

@@ -0,0 +1,96 @@
+"use client";
+import { syncDataLoaderFeature as N, selectionFeature as j, hotkeysCoreFeature as q, checkboxesFeature as z, searchFeature as A } from "@headless-tree/core";
+import { useTree as G } from "@headless-tree/react";
+import { useRef as H, useMemo as h, useCallback as g, useLayoutEffect as J } from "react";
+import { useCustomClickBehaviorFeature as K } from "./use-custom-click-behavior-feature.js";
+const F = "__tree_select_root__";
+function W(I, a, x, p, S) {
+  const {
+    selectedItems: D,
+    setSelectedItems: k,
+    checkedItems: M,
+    setCheckedItems: C,
+    expandedItems: _,
+    setExpandedItems: O,
+    selectableFolders: b = !1,
+    propagateCheckedState: w,
+    selectOnLabelClick: y,
+    selectionMode: E,
+    expandFolderOnSelect: L,
+    isItemDisabled: l
+  } = S, d = H(/* @__PURE__ */ new Map()), i = h(() => {
+    const e = /* @__PURE__ */ new Map(), t = (s, n) => {
+      const f = [];
+      for (const r of s) {
+        const c = a(r.data);
+        d.current.set(c, r.data), f.push(c), r.children?.length ? t(r.children, c) : e.set(c, []);
+      }
+      e.set(n, f);
+    };
+    return t(I, F), e;
+  }, [I, a]), u = g(
+    (e) => {
+      const t = d.current.get(e);
+      return t !== void 0 && !!l?.(t);
+    },
+    [l]
+  ), o = g(
+    (e, t) => (s) => e((n) => {
+      const r = (typeof s == "function" ? s(n) : s).filter((R) => !u(R));
+      if (!t) return r;
+      const c = n.filter(u);
+      return [.../* @__PURE__ */ new Set([...r, ...c])];
+    }),
+    [u]
+  ), T = h(
+    () => o(k, !1),
+    [o, k]
+  ), v = h(
+    () => o(C, !0),
+    [o, C]
+  ), B = K({
+    selectableFolders: b,
+    selectOnLabelClick: y,
+    selectionMode: E,
+    expandFolderOnSelect: L,
+    isItemDisabled: l
+  }), m = G({
+    rootItemId: F,
+    getItemName: (e) => {
+      const t = e.getItemData();
+      return t != null ? x(t) : "";
+    },
+    isItemFolder: (e) => {
+      const t = e.getItemData();
+      if (t == null) return !1;
+      if (p)
+        return p(t);
+      const s = a(t), n = i.get(s);
+      return n ? n.length > 0 : !1;
+    },
+    dataLoader: {
+      getItem: (e) => d.current.get(e),
+      getChildren: (e) => i.get(e) ?? []
+    },
+    state: { selectedItems: D, checkedItems: M, expandedItems: _ },
+    setSelectedItems: T,
+    setCheckedItems: v,
+    setExpandedItems: O,
+    canCheckFolders: b,
+    propagateCheckedState: w,
+    features: [
+      N,
+      j,
+      q,
+      z,
+      A,
+      B
+    ]
+  });
+  return J(() => {
+    m.rebuildTree();
+  }, [i, m]), m;
+}
+export {
+  W as useTreeConfig
+};

package/dist/components/tree/hooks/use-tree-search.d.ts

@@ -0,0 +1,19 @@
+import { TreeDataNode } from '../tree.types';
+interface UseTreeSearchProps<T> {
+    data: TreeDataNode<T>[];
+    getItemId: (item: T) => string;
+    getItemName: (item: T) => string;
+    searchable: boolean;
+    setExpandedItems: (updater: string[] | ((old: string[]) => string[])) => void;
+    searchValue?: string;
+    onSearchValueChange?: (value: string) => void;
+}
+/**
+ * 提供树节点的搜索功能与过滤逻辑
+ */
+export declare function useTreeSearch<T>({ data, getItemId, getItemName, searchable, setExpandedItems, searchValue: controlledSearchValue, onSearchValueChange, }: UseTreeSearchProps<T>): {
+    searchValue: string;
+    setSearchValue: (val: string) => void;
+    filteredData: TreeDataNode<T>[];
+};
+export {};

package/dist/components/tree/hooks/use-tree-search.js

@@ -0,0 +1,57 @@
+"use client";
+import { useState as K, useCallback as M, useMemo as m } from "react";
+function A({
+  data: l,
+  getItemId: f,
+  getItemName: u,
+  searchable: d,
+  setExpandedItems: h,
+  searchValue: o,
+  onSearchValueChange: w
+}) {
+  const [p, y] = K(""), i = o !== void 0 ? o : p, E = M(
+    (e) => {
+      o === void 0 && y(e), w?.(e);
+    },
+    [o, w]
+  ), D = m(() => {
+    const e = (c, a) => {
+      const r = [], s = /* @__PURE__ */ new Set(), k = a.toLowerCase();
+      for (const t of c) {
+        const x = f(t.data), C = u(t.data).toLowerCase().includes(k);
+        let n;
+        if (t.children && t.children.length > 0) {
+          const { resultData: T, keysToExpand: L } = e(
+            t.children,
+            a
+          );
+          T.length > 0 && (n = T), L.forEach((v) => s.add(v));
+        }
+        (C || n && n.length > 0) && (r.push({ ...t, children: n }), n && n.length > 0 && s.add(x));
+      }
+      return { resultData: r, keysToExpand: s };
+    };
+    return e;
+  }, [f, u]), S = m(() => {
+    if (!d || !i.trim())
+      return l;
+    const { resultData: e, keysToExpand: c } = D(
+      l,
+      i.trim()
+    );
+    return c.size > 0 && setTimeout(() => {
+      h((a) => {
+        const r = new Set(a);
+        return c.forEach((s) => r.add(s)), Array.from(r);
+      });
+    }, 0), e;
+  }, [l, i, d, D, h]);
+  return {
+    searchValue: i,
+    setSearchValue: E,
+    filteredData: S
+  };
+}
+export {
+  A as useTreeSearch
+};

package/dist/components/tree/hooks/use-tree-value.d.ts

@@ -0,0 +1,16 @@
+type Setter = (v: string[] | ((old: string[]) => string[])) => void;
+/**
+ * 受控/非受控 value 桥接
+ *
+ * 外部统一用 value/defaultValue/onChange，
+ * 内部拆成 selectedItems + checkedItems 两个独立受控状态给 headless-tree。
+ * 非活跃模式的 setter 是 noop，防止跨模式误触发 onChange。
+ */
+export declare function useTreeValue(valueProp: string | string[] | undefined, defaultValue: string | string[] | undefined, onChange: ((v: string | string[]) => void) | undefined, selectionMode: 'single' | 'multi'): {
+    selectedItems: string[];
+    setSelectedItems: Setter;
+    checkedItems: string[];
+    setCheckedItems: Setter;
+    clear: () => void;
+};
+export {};

package/dist/components/tree/hooks/use-tree-value.js

@@ -0,0 +1,37 @@
+"use client";
+import { useState as a, useCallback as l } from "react";
+const m = () => {
+};
+function u(e) {
+  return e === void 0 ? [] : Array.isArray(e) ? e : e ? [e] : [];
+}
+function b(e, d, c, I) {
+  const t = e !== void 0, [k, f] = a(() => u(d)), i = t ? u(e) : k, n = I === "single", r = l(
+    (s) => typeof s == "function" ? s(i) : s,
+    [i]
+  ), S = l(
+    (s) => {
+      const o = r(s);
+      t || f(o), c?.(o[0] ?? "");
+    },
+    [r, t, c]
+  ), x = l(
+    (s) => {
+      const o = r(s);
+      t || f(o), c?.(o);
+    },
+    [r, t, c]
+  ), y = l(() => {
+    t || f([]), c?.(n ? "" : []);
+  }, [t, n, c]);
+  return {
+    selectedItems: n ? i : [],
+    setSelectedItems: n ? S : m,
+    checkedItems: n ? [] : i,
+    setCheckedItems: n ? m : x,
+    clear: y
+  };
+}
+export {
+  b as useTreeValue
+};

package/dist/components/tree/hooks/use-tree.d.ts

@@ -0,0 +1,13 @@
+import { TreeContextValue } from '../tree-context';
+import { TreeBaseProps } from '../tree.types';
+export interface UseTreeReturn<T> extends TreeContextValue<T> {
+    selectedItems: string[];
+    checkedItems: string[];
+    setCheckedItems: (v: string[] | ((old: string[]) => string[])) => void;
+    clear: () => void;
+}
+/**
+ * 封装了 Tree 状态和逻辑的综合 Hook
+ * 既可以在 Tree 内部使用，也可以在外部（如 TreeSelect）调用后将 context 传给 Tree
+ */
+export declare function useTree<T>(props: TreeBaseProps<T>): UseTreeReturn<T>;

package/dist/components/tree/hooks/use-tree.js

@@ -0,0 +1,111 @@
+"use client";
+import { useLayoutEffect as j, useImperativeHandle as q } from "react";
+import { useTreeAnimation as w, ANIMATION_COLLAPSE_DURATION as B } from "./use-tree-animation.js";
+import { useTreeConfig as G } from "./use-tree-config.js";
+import { useTreeSearch as J } from "./use-tree-search.js";
+import { useTreeValue as K } from "./use-tree-value.js";
+function $(s) {
+  const {
+    data: i,
+    getItemId: r,
+    getItemName: a,
+    isItemFolder: I,
+    getItemIcon: h,
+    isItemDisabled: o,
+    value: f,
+    defaultValue: p,
+    onChange: g,
+    selectionMode: t = "single",
+    classNames: T = {},
+    searchable: C = !0,
+    renderNode: S,
+    selectableFolders: V = !0,
+    propagateCheckedState: x = !0,
+    selectOnLabelClick: N = t === "single",
+    expandFolderOnSelect: b = !0,
+    defaultExpandedIds: k,
+    expandedIds: A,
+    onExpandedIdsChange: E,
+    lazyMode: O,
+    searchValue: L,
+    onSearchValueChange: y
+  } = s, {
+    selectedItems: l,
+    setSelectedItems: D,
+    checkedItems: c,
+    setCheckedItems: n,
+    clear: F
+  } = K(
+    f,
+    p,
+    g,
+    t
+  ), { expandedItems: M, setExpandedItems: d, animatingNodes: R, treeRef: m } = w(
+    k,
+    A,
+    E,
+    O
+  ), { searchValue: v, setSearchValue: _, filteredData: z } = J({
+    data: i,
+    getItemId: r,
+    getItemName: a,
+    searchable: C,
+    setExpandedItems: d,
+    searchValue: L,
+    onSearchValueChange: y
+  }), e = G(
+    z,
+    r,
+    a,
+    I,
+    {
+      selectedItems: l,
+      setSelectedItems: D,
+      checkedItems: c,
+      setCheckedItems: n,
+      expandedItems: M,
+      setExpandedItems: d,
+      selectableFolders: V,
+      propagateCheckedState: x,
+      selectOnLabelClick: N,
+      selectionMode: t,
+      expandFolderOnSelect: b,
+      isItemDisabled: o
+    }
+  );
+  return j(() => {
+    m.current = e;
+  }, [e, m]), q(
+    s.apiRef,
+    () => ({
+      scrollToItem: (H, P) => {
+        const U = P ?? { block: "nearest" }, u = () => {
+          try {
+            e.getItemInstance(H)?.scrollTo(U);
+          } catch {
+          }
+        };
+        u(), setTimeout(u, B + 50);
+      }
+    }),
+    [e]
+  ), {
+    tree: e,
+    selectionMode: t,
+    classNames: T,
+    renderNode: S,
+    getItemName: a,
+    getItemIcon: h,
+    isItemDisabled: o,
+    animatingNodes: R,
+    searchValue: v,
+    setSearchValue: _,
+    selectedItems: l,
+    checkedItems: c,
+    setCheckedItems: n,
+    clear: F
+  };
+}
+export {
+  $ as useTree
+};

package/dist/components/tree/index.d.ts

@@ -0,0 +1,7 @@
+export * from './tree.types';
+export * from './tree-context';
+export * from './tree-node';
+export * from './tree-node-list';
+export * from './tree-content';
+export * from './tree';
+export * from './hooks/use-tree';

package/dist/components/tree/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { TreeContextProvider as o, useTreeContext as t } from "./tree-context.js";
+import { TreeNode as T } from "./tree-node.js";
+import { TreeNodeList as m } from "./tree-node-list.js";
+import { TreeContent as n } from "./tree-content.js";
+import { Tree as d } from "./tree.js";
+import { useTree as u } from "./hooks/use-tree.js";
+export {
+  d as Tree,
+  n as TreeContent,
+  o as TreeContextProvider,
+  T as TreeNode,
+  m as TreeNodeList,
+  u as useTree,
+  t as useTreeContext
+};

package/dist/components/tree/styles/tree.module.css.js

@@ -0,0 +1,44 @@
+"use client";
+const n = "_root_16vfl_2", o = "_tree_16vfl_8", e = "_node_16vfl_17", _ = "_nodeWidth_16vfl_25", d = "_nodeContent_16vfl_35", t = "_chevronIcon_16vfl_103", l = "_chevronIconExpanded_16vfl_107", c = "_nodeIcon_16vfl_111", a = "_nodeIconDisabled_16vfl_116", i = "_nodeLabel_16vfl_121", s = "_nodeLabelDisabled_16vfl_130", r = "_nodeLabelActive_16vfl_134", v = "_nodeLabelMatching_16vfl_139", f = "_nodeAnimationWrapper_16vfl_143", p = "_isExpanding_16vfl_151", b = "_isCollapsing_16vfl_152", h = "_nodeAnimationInner_16vfl_157", I = "_searchWrap_16vfl_163", L = "_fullWidth_16vfl_168", W = {
+  root: n,
+  tree: o,
+  node: e,
+  nodeWidth: _,
+  nodeContent: d,
+  chevronIcon: t,
+  chevronIconExpanded: l,
+  nodeIcon: c,
+  nodeIconDisabled: a,
+  nodeLabel: i,
+  nodeLabelDisabled: s,
+  nodeLabelActive: r,
+  nodeLabelMatching: v,
+  nodeAnimationWrapper: f,
+  isExpanding: p,
+  isCollapsing: b,
+  nodeAnimationInner: h,
+  searchWrap: I,
+  fullWidth: L
+};
+export {
+  t as chevronIcon,
+  l as chevronIconExpanded,
+  W as default,
+  L as fullWidth,
+  b as isCollapsing,
+  p as isExpanding,
+  e as node,
+  h as nodeAnimationInner,
+  f as nodeAnimationWrapper,
+  d as nodeContent,
+  c as nodeIcon,
+  a as nodeIconDisabled,
+  i as nodeLabel,
+  r as nodeLabelActive,
+  s as nodeLabelDisabled,
+  v as nodeLabelMatching,
+  _ as nodeWidth,
+  n as root,
+  I as searchWrap,
+  o as tree
+};

package/dist/components/tree/tree-content.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface TreeContentProps {
+    readonly searchable?: boolean;
+    /** 是否在挂载时自动聚焦搜索框（通常用于下拉面板等需要抢占焦点的场景） */
+    readonly autoFocusSearch?: boolean;
+    /** 搜索框占位文案，默认 `common:search` */
+    readonly searchPlaceholder?: string;
+    /** 渲染在搜索框与节点列表之间的自定义区域（如全选行） */
+    readonly topSlot?: React.ReactNode;
+}
+/**
+ * 纯表现层的树内容区域
+ * 依赖外部提供的 TreeContext
+ */
+export declare function TreeContent({ searchable, autoFocusSearch, searchPlaceholder, topSlot, }: TreeContentProps): React.JSX.Element;

package/dist/components/tree/tree-content.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsxs as D, Fragment as y, jsx as o } from "react/jsx-runtime";
+import { useRef as w, useEffect as v, useCallback as a } from "react";
+import "../../provider/ui-context.js";
+import { useLocale as C } from "../../provider/hooks.js";
+import { DropDownEmptyState as x } from "../_inner/dropdown/empty-state.js";
+import { TextInput as F } from "../text-input/text-input.js";
+import f from "./styles/tree.module.css.js";
+import { useTreeContext as A } from "./tree-context.js";
+import { TreeNodeList as S } from "./tree-node-list.js";
+function V({
+  searchable: r = !0,
+  autoFocusSearch: m = !1,
+  searchPlaceholder: l,
+  topSlot: p
+}) {
+  const i = C(), { tree: t, searchValue: u, setSearchValue: c } = A(), s = w(null), d = r && u.trim().length > 0 && t.getItems().length === 0;
+  v(() => {
+    if (r && m) {
+      let e;
+      return e = requestAnimationFrame(() => {
+        e = requestAnimationFrame(() => {
+          s.current?.focus();
+        });
+      }), () => cancelAnimationFrame(e);
+    }
+  }, [r, m]);
+  const h = a(
+    (e) => {
+      c(e.target.value);
+    },
+    [c]
+  ), g = a(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const n = t.getItems()[0];
+        n && (n.setFocused(), t.updateDomFocus());
+      }
+    },
+    [t]
+  ), I = a(
+    (e) => {
+      if (e.key !== "ArrowUp" || !r) return;
+      const n = t.getItems();
+      if (n[0]) {
+        try {
+          if (t.getFocusedItem().getId() !== n[0].getId()) return;
+        } catch {
+          return;
+        }
+        e.nativeEvent.stopImmediatePropagation(), e.preventDefault(), s.current?.focus();
+      }
+    },
+    [t, r]
+  );
+  return /* @__PURE__ */ D(y, { children: [
+    r && /* @__PURE__ */ o("div", { className: f.searchWrap, children: /* @__PURE__ */ o(
+      F,
+      {
+        ref: s,
+        placeholder: l ?? i.search,
+        size: "sm",
+        value: u,
+        onChange: h,
+        onKeyDown: g,
+        leftIconName: "search",
+        className: f.fullWidth
+      }
+    ) }),
+    p,
+    d ? /* @__PURE__ */ o(x, { text: i.noSearchResult }) : /* @__PURE__ */ o(S, { onKeyDownCapture: I })
+  ] });
+}
+export {
+  V as TreeContent
+};

package/dist/components/tree/tree-context.d.ts

@@ -0,0 +1,19 @@
+import { TreeInstance } from '@headless-tree/core';
+import { TreeBaseProps, TreeClassNames } from './tree.types';
+export interface TreeContextValue<T = unknown> {
+    tree: TreeInstance<T>;
+    selectionMode: 'single' | 'multi';
+    classNames: TreeClassNames;
+    renderNode?: TreeBaseProps<T>['renderNode'];
+    getItemName: (item: T) => string;
+    getItemIcon?: TreeBaseProps<T>['getItemIcon'];
+    isItemDisabled?: TreeBaseProps<T>['isItemDisabled'];
+    animatingNodes: Map<string, 'expanding' | 'collapsing'>;
+    searchValue: string;
+    setSearchValue: (value: string) => void;
+}
+export declare const TreeContextProvider: import("react").Provider<TreeContextValue<any> | null>;
+/**
+ * 获取 Tree 上下文
+ */
+export declare function useTreeContext<T = unknown>(): TreeContextValue<T>;

package/dist/components/tree/tree-context.js

@@ -0,0 +1,13 @@
+"use client";
+import { createContext as r, useContext as o } from "react";
+const t = r(null), s = t.Provider;
+function i() {
+  const e = o(t);
+  if (!e)
+    throw new Error("useTreeContext must be used inside TreeContextProvider");
+  return e;
+}
+export {
+  s as TreeContextProvider,
+  i as useTreeContext
+};