@wisdomgarden/torque 0.1.0

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

@@ -0,0 +1,201 @@
+"use client";
+import { jsxs as E, jsx as d } from "react/jsx-runtime";
+import { useId as ue } from "@mantine/hooks";
+import { clsx as ge } from "clsx";
+import { useState as Ie, useCallback as m, useMemo as G } from "react";
+import { useFormWrapperProps as be } from "../../common/use-form-wrapper-props.js";
+import "../../provider/ui-context.js";
+import { useLocale as Ce } from "../../provider/hooks.js";
+import { Checkbox as Se } from "../checkbox/checkbox.js";
+import { FormItemWrapper as we } from "../form-wrapper/form-item-wrapper.js";
+import { Popover as J } from "../popover/index.js";
+import { TreeContextProvider as ke } from "../tree/tree-context.js";
+import { useTree as Te } from "../tree/hooks/use-tree.js";
+import A from "./styles/tree-select.module.css.js";
+import { TreeSelectDropdown as Ne } from "./tree-select-dropdown.js";
+import { TreeSelectTarget as Oe } from "./tree-select-target.js";
+const ve = (h, p, c) => {
+  if (!p) return null;
+  const n = [...h];
+  for (; n.length > 0; ) {
+    const l = n.shift();
+    if (l) {
+      if (c(l.data) === p) return l.data;
+      l.children?.length && n.push(...l.children);
+    }
+  }
+  return null;
+};
+function ye(h) {
+  const { id: p } = h, c = ue(p), { wrapProps: n, rest: l, outerDescribedBy: P } = be(h, c), {
+    onChange: x,
+    selectionMode: t = "single",
+    data: S,
+    getItemId: w,
+    isItemFolder: k,
+    isItemDisabled: D,
+    selectableFolders: T = !0,
+    propagateCheckedState: K = !0,
+    showSelectAll: N = !1,
+    placeholder: Q,
+    disabled: f = !1,
+    clearable: U = !1,
+    size: X = "md",
+    singleLine: Y,
+    borderRadius: Z = "full",
+    position: _ = "bottom-start",
+    withinPortal: $ = !0,
+    dropdownMaxHeight: ee = 404,
+    searchable: O = !0,
+    searchPlaceholder: le,
+    renderTarget: F,
+    "aria-label": L,
+    onDropdownOpen: R,
+    onDropdownClose: M
+  } = l, [u, te] = Ie(!1), g = m(
+    (e) => {
+      te(e), e ? R?.() : M?.();
+    },
+    [R, M]
+  ), re = m(
+    (e) => {
+      t === "single" && g(!1), x?.(e);
+    },
+    [t, g, x]
+  ), W = Te({ ...l, onChange: re }), {
+    tree: se,
+    searchValue: oe,
+    setSearchValue: j,
+    classNames: v,
+    selectedItems: ne,
+    checkedItems: y,
+    setCheckedItems: I,
+    clear: ae,
+    getItemName: de
+  } = W, V = m(
+    (e) => {
+      g(e), !e && O && j("");
+    },
+    [g, O, j]
+  ), z = t === "single" ? ne : y, ce = m(
+    (e) => {
+      I((s) => s.filter((a) => a !== e));
+    },
+    [I]
+  ), B = t === "single" && F ? F({
+    selected: ve(S, z[0], w),
+    dropdownOpened: u,
+    disabled: f
+  }) : null, ie = Ce(), r = G(() => {
+    const e = [], s = [], a = [];
+    if (!N || t !== "multi")
+      return { leafIds: e, folderIds: s, disabledIds: a };
+    const i = (fe) => {
+      for (const o of fe) {
+        const q = w(o.data);
+        if (D?.(o.data)) {
+          a.push(q), o.children?.length && i(o.children);
+          continue;
+        }
+        ((k ? k(o.data) : !!o.children?.length) ? s : e).push(q), o.children?.length && i(o.children);
+      }
+    };
+    return i(S), { leafIds: e, folderIds: s, disabledIds: a };
+  }, [
+    N,
+    t,
+    S,
+    w,
+    k,
+    D
+  ]), H = G(() => new Set(y), [y]), b = T && !K ? [...r.folderIds, ...r.leafIds] : r.leafIds, C = b.length > 0 && b.every((e) => H.has(e)), me = b.some((e) => H.has(e)), he = m(() => {
+    I((e) => {
+      const s = e.filter(
+        (i) => r.disabledIds.includes(i)
+      );
+      if (C) return s;
+      const a = T ? [...r.folderIds, ...r.leafIds] : r.leafIds;
+      return [...s, ...a];
+    });
+  }, [C, T, r, I]), pe = N && t === "multi" && !oe && b.length > 0 ? /* @__PURE__ */ E("div", { className: A.selectAllRow, children: [
+    /* @__PURE__ */ d("span", { className: A.spacer, "aria-hidden": "true" }),
+    /* @__PURE__ */ d(
+      Se,
+      {
+        checked: C,
+        indeterminate: !C && me,
+        onChange: he,
+        label: ie.selectAll,
+        labelClassName: A.selectAllLabel
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ d(ke, { value: W, children: /* @__PURE__ */ d(
+    we,
+    {
+      ...n,
+      className: ge(v?.root, n.className),
+      id: c,
+      children: /* @__PURE__ */ E(
+        J,
+        {
+          opened: u,
+          onOpenChange: V,
+          position: _,
+          disabled: f,
+          offset: 4,
+          children: [
+            /* @__PURE__ */ d(
+              J.Target,
+              {
+                ...B ? {
+                  "aria-label": L,
+                  "aria-describedby": P
+                } : {},
+                children: B ?? /* @__PURE__ */ d(
+                  Oe,
+                  {
+                    size: X,
+                    placeholder: Q,
+                    disabled: f,
+                    clearable: U,
+                    error: n.error,
+                    singleLine: Y,
+                    borderRadius: Z,
+                    id: c,
+                    "aria-label": L,
+                    "aria-describedby": P,
+                    selectionMode: t,
+                    selectedIds: z,
+                    tree: se,
+                    getItemName: de,
+                    onRemove: ce,
+                    onClick: () => !f && V(!u),
+                    onClear: ae,
+                    dropdownOpened: u,
+                    classNames: v
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ d(
+              Ne,
+              {
+                classNames: v,
+                searchable: O,
+                searchPlaceholder: le,
+                withinPortal: $,
+                dropdownMaxHeight: ee,
+                topSlot: pe
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+ye.displayName = "TreeSelect";
+export {
+  ye as TreeSelect
+};

package/dist/components/tree-select/tree-select.types.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FormProps, InputWrapProps, SimpleComponentSizeBase } from '../../common/components.types';
+import { PopoverPosition } from '../popover';
+import { TreeBaseProps, TreeClassNames } from '../tree/tree.types';
+export interface TreeSelectClassNames extends TreeClassNames {
+    target?: string;
+    dropdown?: string;
+}
+export interface TreeSelectRenderTargetProps<T> {
+    readonly selected: T | null;
+    readonly dropdownOpened: boolean;
+    readonly disabled: boolean;
+}
+/**
+ * TreeSelect 下拉树组件 Props
+ */
+export type TreeSelectProps<T = unknown> = TreeBaseProps<T> & InputWrapProps & FormProps & {
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    size?: SimpleComponentSizeBase;
+    borderRadius?: 'full' | 'sm';
+    position?: PopoverPosition;
+    /** PC 端下拉是否渲染到 Portal；嵌套浮层关系由 Popover 自动处理。 @default true */
+    withinPortal?: boolean;
+    /** 下拉面板最大高度，超出后内部列表滚动。number 按 px 处理。 @default 404 */
+    dropdownMaxHeight?: number | string;
+    classNames?: TreeSelectClassNames;
+    /** 多选模式下，已选标签超出 2 个是否折叠为 "+N..."，默认为 true */
+    singleLine?: boolean;
+    /** 仅多选有效：在下拉面板顶部显示全选行（搜索时自动隐藏） */
+    showSelectAll?: boolean;
+    /** 自定义单选触发器，返回的元素会直接接收 Popover 交互和 ARIA 属性 */
+    renderTarget?: (props: TreeSelectRenderTargetProps<T>) => React.ReactElement;
+    id?: string;
+    'aria-label'?: string;
+    onDropdownOpen?: () => void;
+    onDropdownClose?: () => void;
+};

package/dist/components/unstyled-button/index.d.ts

@@ -0,0 +1 @@
+export { UnstyledButton } from './unstyled-button';

package/dist/components/unstyled-button/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { UnstyledButton as n } from "./unstyled-button.js";
+export {
+  n as UnstyledButton
+};

package/dist/components/unstyled-button/unstyled-button.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps, LayoutElement } from '../box/box.types';
+export type UnstyledButtonProps<T extends LayoutElement = 'button'> = BoxProps<T>;
+export declare function UnstyledButton<T extends LayoutElement = 'button'>(props: UnstyledButtonProps<T>): import("react").JSX.Element;

package/dist/components/unstyled-button/unstyled-button.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as e } from "clsx";
+import { Box as n } from "../box/box.js";
+import c from "./unstyled-button.module.css.js";
+function u(o) {
+  const { component: t = "button", className: r, ...s } = o;
+  return /* @__PURE__ */ m(
+    n,
+    {
+      component: t,
+      className: e(c.root, r),
+      ...s
+    }
+  );
+}
+export {
+  u as UnstyledButton
+};

package/dist/components/unstyled-button/unstyled-button.module.css.js

@@ -0,0 +1,8 @@
+"use client";
+const o = "_root_1oxvj_2", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

package/dist/components/virtualized-tree-select/index.d.ts

@@ -0,0 +1,2 @@
+export { VirtualizedTreeSelect } from './virtualized-tree-select';
+export type { VirtualizedTreeSelectProps } from './virtualized-tree-select';

package/dist/components/virtualized-tree-select/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { VirtualizedTreeSelect as t } from "./virtualized-tree-select.js";
+export {
+  t as VirtualizedTreeSelect
+};

package/dist/components/virtualized-tree-select/virtualized-tree-select.d.ts

@@ -0,0 +1,25 @@
+import type { TreeDataNode } from '../tree/tree.types';
+type SingleModeProps = {
+    selectionMode?: 'single';
+    value?: string;
+    onChange?: (value: string) => void;
+};
+type MultiModeProps = {
+    selectionMode: 'multi';
+    value?: string[];
+    onChange?: (value: string[]) => void;
+};
+type SelectionProps = SingleModeProps | MultiModeProps;
+export type VirtualizedTreeSelectProps<T = unknown> = SelectionProps & {
+    readonly data: TreeDataNode<T>[];
+    readonly getItemId: (item: T) => string;
+    readonly getItemName: (item: T) => string;
+    readonly clearable?: boolean;
+    readonly placeholder?: string;
+    readonly id?: string;
+    readonly defaultExpandedIds?: string[];
+    readonly onDropdownClose?: (value: string[]) => void;
+    readonly borderRadius?: 'sm' | 'full';
+};
+export declare function VirtualizedTreeSelect<T = unknown>(props: VirtualizedTreeSelectProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/virtualized-tree-select/virtualized-tree-select.js

@@ -0,0 +1,253 @@
+"use client";
+import { jsxs as M, jsx as o } from "react/jsx-runtime";
+import { useCombobox as ne, Combobox as f, PillsInput as _, Pill as H, Checkbox as te } from "@mantine/core";
+import { useId as oe } from "@mantine/hooks";
+import { useVirtualizer as re } from "@tanstack/react-virtual";
+import { clsx as ie } from "clsx";
+import { useState as W, useRef as I, useDeferredValue as ae, useEffect as le, useMemo as P } from "react";
+import "../../provider/ui-context.js";
+import { useLocale as se } from "../../provider/hooks.js";
+import { useIsWrapped as ce } from "../_inner/tags-input/hooks/use-is-wrapped.js";
+import A from "../_inner/tags-input/styles/tags-input.module.css.js";
+import { IconButton as de } from "../icon-button/icon-button.js";
+import { Text as ue } from "../text/text.js";
+import { Tooltip as he } from "../tooltip/index.js";
+import g from "./virtualized-tree-select.module.css.js";
+const pe = 36, fe = 320, G = 8, me = 27;
+function j(a, t, l, r = /* @__PURE__ */ new Map()) {
+  for (const s of a)
+    r.set(t(s.data), l(s.data)), s.children && j(s.children, t, l, r);
+  return r;
+}
+function Y(a, t, l, r, s = 0) {
+  const p = [];
+  for (const d of a) {
+    const u = t(d.data), h = !!d.children?.length;
+    p.push({ id: u, name: l(d.data), depth: s, isFolder: h }), h && r.has(u) && d.children && p.push(
+      ...Y(
+        d.children,
+        t,
+        l,
+        r,
+        s + 1
+      )
+    );
+  }
+  return p;
+}
+function $(a, t, l, r, s = 0) {
+  const p = [], d = r.toLowerCase();
+  for (const u of a) {
+    const h = t(u.data), v = l(u.data), D = !!u.children?.length, x = u.children ? $(u.children, t, l, r, s + 1) : [];
+    (v.toLowerCase().includes(d) || x.length > 0) && (p.push({ id: h, name: v, depth: s, isFolder: D }), p.push(...x));
+  }
+  return p;
+}
+function Re(a) {
+  const {
+    data: t,
+    getItemId: l,
+    getItemName: r,
+    selectionMode: s = "single",
+    clearable: p,
+    placeholder: d,
+    id: u,
+    defaultExpandedIds: h,
+    onDropdownClose: v,
+    borderRadius: D = "full"
+  } = a, x = se(), q = oe(u), [k, L] = W(""), [y, T] = W(
+    () => new Set(h ?? [])
+  ), V = I(null), N = ae(k), w = N.trim().length > 0, [J, K] = ce(), B = I(t);
+  le(() => {
+    const e = B.current !== t;
+    if (B.current = t, e) {
+      T(new Set(h ?? []));
+      return;
+    }
+    h?.length && T((n) => {
+      const i = new Set(n);
+      let E = !1;
+      for (const m of h)
+        i.has(m) || (i.add(m), E = !0);
+      return E ? i : n;
+    });
+  }, [t, h]);
+  const b = s === "multi", c = P(() => {
+    const e = a.value;
+    return Array.isArray(e) ? e : typeof e == "string" ? [e] : [];
+  }, [a.value]), O = I(v);
+  O.current = v;
+  const S = I(c);
+  S.current = c;
+  const R = (e) => {
+    S.current = e, O.current?.(e);
+  }, C = ne({
+    onDropdownClose: () => {
+      L(""), O.current?.(S.current);
+    }
+  }), Q = P(
+    () => j(t, l, r),
+    [t, l, r]
+  ), z = P(
+    () => w ? $(t, l, r, N) : Y(t, l, r, y),
+    [t, l, r, N, w, y]
+  ), F = re({
+    count: z.length,
+    getScrollElement: () => V.current,
+    estimateSize: () => pe,
+    overscan: 10
+  }), U = (e) => {
+    T((n) => {
+      const i = new Set(n);
+      return i.has(e) ? i.delete(e) : i.add(e), i;
+    });
+  }, X = (e) => {
+    if (b) {
+      const n = c.includes(e) ? c.filter((i) => i !== e) : [...c, e];
+      a.onChange?.(n), S.current = n;
+    } else
+      a.onChange?.(e), S.current = [e], C.closeDropdown();
+  }, Z = (e) => {
+    if (!b) return;
+    const n = c.filter((i) => i !== e);
+    a.onChange?.(n), R(n);
+  }, ee = () => {
+    b ? (a.onChange?.([]), R([])) : (a.onChange?.(""), R([]));
+  };
+  return /* @__PURE__ */ M(
+    f,
+    {
+      store: C,
+      withinPortal: !1,
+      onOptionSubmit: X,
+      children: [
+        /* @__PURE__ */ o(f.Target, { children: /* @__PURE__ */ o(
+          _,
+          {
+            id: q,
+            classNames: {
+              input: A.pillsInput,
+              section: A.pillsInputSection
+            },
+            "data-size": "md",
+            "data-border-radius": D,
+            "data-wrapped": K,
+            "data-value-length": c.length,
+            rightSection: p && c.length > 0 ? /* @__PURE__ */ o(f.ClearButton, { onClear: ee }) : void 0,
+            onClick: () => C.openDropdown(),
+            children: /* @__PURE__ */ M(H.Group, { ref: J, children: [
+              c.map((e) => /* @__PURE__ */ o(
+                H,
+                {
+                  withRemoveButton: b,
+                  onRemove: () => Z(e),
+                  children: Q.get(e) ?? e
+                },
+                e
+              )),
+              /* @__PURE__ */ o(f.EventsTarget, { children: /* @__PURE__ */ o(
+                _.Field,
+                {
+                  "aria-label": d ?? x.pleaseSelect,
+                  placeholder: c.length === 0 ? d : void 0,
+                  value: k,
+                  onChange: (e) => {
+                    C.updateSelectedOptionIndex(), L(e.currentTarget.value);
+                  },
+                  onFocus: () => C.openDropdown(),
+                  onBlur: () => C.closeDropdown()
+                }
+              ) })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ o(f.Dropdown, { children: /* @__PURE__ */ o(f.Options, { children: z.length === 0 ? /* @__PURE__ */ o(f.Empty, { children: x.noData }) : /* @__PURE__ */ o(
+          "div",
+          {
+            ref: V,
+            style: { height: fe, overflowY: "auto" },
+            children: /* @__PURE__ */ o(
+              "div",
+              {
+                style: {
+                  height: F.getTotalSize(),
+                  position: "relative"
+                },
+                children: F.getVirtualItems().map((e) => {
+                  const n = z[e.index], i = c.includes(n.id), E = w || y.has(n.id);
+                  return /* @__PURE__ */ o(
+                    f.Option,
+                    {
+                      value: n.id,
+                      className: g.virtualOption,
+                      style: {
+                        height: e.size,
+                        transform: `translateY(${e.start}px)`,
+                        padding: 0
+                      },
+                      children: /* @__PURE__ */ M(
+                        "div",
+                        {
+                          className: g.virtualOptionContent,
+                          style: {
+                            paddingInlineStart: G + n.depth * me,
+                            paddingInlineEnd: G
+                          },
+                          children: [
+                            n.isFolder ? /* @__PURE__ */ o(
+                              de,
+                              {
+                                iconName: "arrow-right-fill",
+                                iconClassName: E ? g.expandIconOpen : g.expandIcon,
+                                variant: "text",
+                                color: "regular",
+                                size: "md",
+                                tabIndex: -1,
+                                "aria-hidden": !0,
+                                onMouseDown: (m) => {
+                                  m.preventDefault(), m.stopPropagation();
+                                },
+                                onClick: (m) => {
+                                  m.stopPropagation(), w || U(n.id);
+                                }
+                              }
+                            ) : /* @__PURE__ */ o("span", { className: g.spacer, "aria-hidden": !0 }),
+                            b && /* @__PURE__ */ o(
+                              te,
+                              {
+                                readOnly: !0,
+                                "aria-hidden": !0,
+                                tabIndex: -1,
+                                checked: i,
+                                style: { cursor: "pointer", pointerEvents: "none" }
+                              }
+                            ),
+                            /* @__PURE__ */ o(he, { showOnlyWhenTruncated: !0, label: n.name, children: /* @__PURE__ */ o(
+                              ue,
+                              {
+                                component: "span",
+                                className: ie(
+                                  g.nodeLabel,
+                                  i && g.nodeLabelChecked
+                                ),
+                                children: n.name
+                              }
+                            ) })
+                          ]
+                        }
+                      )
+                    },
+                    e.key
+                  );
+                })
+              }
+            )
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+export {
+  Re as VirtualizedTreeSelect
+};

package/dist/components/virtualized-tree-select/virtualized-tree-select.module.css.js

@@ -0,0 +1,20 @@
+"use client";
+const n = "_virtualOption_rl5uu_2", e = "_virtualOptionContent_rl5uu_9", o = "_spacer_rl5uu_15", t = "_expandIcon_rl5uu_21", a = "_expandIconOpen_rl5uu_25", l = "_nodeLabel_rl5uu_29", u = "_nodeLabelChecked_rl5uu_40", c = {
+  virtualOption: n,
+  virtualOptionContent: e,
+  spacer: o,
+  expandIcon: t,
+  expandIconOpen: a,
+  nodeLabel: l,
+  nodeLabelChecked: u
+};
+export {
+  c as default,
+  t as expandIcon,
+  a as expandIconOpen,
+  l as nodeLabel,
+  u as nodeLabelChecked,
+  o as spacer,
+  n as virtualOption,
+  e as virtualOptionContent
+};