@sia.soul/sia-react-ui 0.1.0 → 0.1.3

package/dist/index.js

@@ -87,7 +87,7 @@ import {
   message,
   notification,
   useOverlayLifecycle
-} from "./chunk-ULEGTKXR.js";
+} from "./chunk-Q4XNFMUH.js";
 import {
   TextArea
 } from "./chunk-NZAT2RUM.js";
@@ -97,14 +97,14 @@ import {
 import {
   RichTextContent,
   RichTextEditor
-} from "./chunk-OMA75YLM.js";
+} from "./chunk-OQLDEVCF.js";
 import {
   Dropdown,
   Input,
   Menu,
   Segmented,
   Steps
-} from "./chunk-DZ45HRVP.js";
+} from "./chunk-IMZT6VCU.js";
 import {
   Button
 } from "./chunk-MBS2HXLZ.js";
@@ -112,17 +112,17 @@ import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-34TTF4Y7.js";
+} from "./chunk-R4OWKIXJ.js";
 import {
   Select
-} from "./chunk-JKZGAZMB.js";
+} from "./chunk-OAC7BSUR.js";
 import {
   FILLED_ICON_NAMES,
   ICON_NAMES,
   Icon,
   PopupPortal,
   useControllableState
-} from "./chunk-YCVXUMGP.js";
+} from "./chunk-2RRTDU3N.js";
 
 // src/components/Alert.tsx
 import { useState } from "react";
@@ -1376,6 +1376,21 @@ function setValue(source, path, value) {
 function isEmpty(value) {
   return value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
 }
+function cloneFormValue(value, seen = /* @__PURE__ */ new WeakMap()) {
+  if (!value || typeof value !== "object") return value;
+  if (seen.has(value)) return seen.get(value);
+  if (value instanceof Date) return new Date(value.getTime());
+  if (value instanceof RegExp) return new RegExp(value.source, value.flags);
+  const cloneable = value;
+  if (typeof cloneable.clone === "function") return cloneable.clone();
+  if (!Array.isArray(value) && Object.getPrototypeOf(value) !== Object.prototype && Object.getPrototypeOf(value) !== null) return value;
+  const next = Array.isArray(value) ? [] : {};
+  seen.set(value, next);
+  Object.keys(value).forEach((key) => {
+    next[key] = cloneFormValue(value[key], seen);
+  });
+  return next;
+}
 var FormStore = class {
   values = {};
   initialValues = {};
@@ -1384,11 +1399,13 @@ var FormStore = class {
   listeners = /* @__PURE__ */ new Set();
   callbacks = {};
   version = 0;
+  initialized = false;
   configure(initialValues, callbacks) {
     this.callbacks = callbacks;
-    if (initialValues && Object.keys(this.initialValues).length === 0) {
-      this.initialValues = structuredClone(initialValues);
-      this.values = structuredClone(initialValues);
+    if (!this.initialized) {
+      this.initialized = true;
+      this.initialValues = cloneFormValue(initialValues ?? {});
+      this.values = cloneFormValue(initialValues ?? {});
     }
   }
   subscribe = (listener) => {
@@ -1410,7 +1427,7 @@ var FormStore = class {
     };
   }
   getFieldValue = (name) => getValue(this.values, pathArray(name));
-  getFieldsValue = () => structuredClone(this.values);
+  getFieldsValue = () => cloneFormValue(this.values);
   getFieldError = (name) => this.errors.get(pathKey2(name)) ?? [];
   setFieldValue = (name, value) => {
     const path = pathArray(name);
@@ -1428,7 +1445,7 @@ var FormStore = class {
   };
   resetFields = (names) => {
     if (!names) {
-      this.values = structuredClone(this.initialValues);
+      this.values = cloneFormValue(this.initialValues);
       this.errors.clear();
     } else {
       names.forEach((name) => {
@@ -1617,7 +1634,7 @@ function FormItem({
       content = children;
     }
   }
-  if (noStyle) return content;
+  if (noStyle) return /* @__PURE__ */ jsx9(Fragment3, { children: content });
   const inputWrap = /* @__PURE__ */ jsx9("div", { className: "sia-form-item__input-wrap", children: content });
   const hasError = status === "error" && Boolean(helpContent);
   return /* @__PURE__ */ jsxs9("div", { ref: itemRef, className: `sia-form-item${status ? ` sia-form-item--${status}` : ""} ${className}`.trim(), "data-sia-form-field": key || void 0, children: [
@@ -2360,14 +2377,14 @@ function TimeRangePicker({ value, defaultValue = ["", ""], placeholder = ["\u5F0
 // src/components/TreeSelect.tsx
 import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef7, useState as useState10 } from "react";
 import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
-function flattenTree(nodes, expanded, search, depth = 0, parents = []) {
+function flattenTree(nodes, expanded, search, filter, depth = 0, parents = [], ancestorMatched = false) {
   const result = [];
   for (const node of nodes) {
-    const matches = !search || String(node.title).toLowerCase().includes(search.toLowerCase());
-    const childMatches = search && node.children ? flattenTree(node.children, new Set(node.children.map((child) => child.value)), search, depth + 1, [...parents, node.value]) : [];
+    const matches = !search || ancestorMatched || filter === false || (filter ? filter(search, node) : String(node.title).toLowerCase().includes(search.toLowerCase()));
+    const childMatches = search && node.children ? flattenTree(node.children, expanded, search, filter, depth + 1, [...parents, node.value], matches) : [];
     if (matches || childMatches.length) result.push({ ...node, depth, parentValues: parents });
-    if (node.children && (expanded.has(node.value) || search)) {
-      result.push(...search ? childMatches : flattenTree(node.children, expanded, search, depth + 1, [...parents, node.value]));
+    if (node.children && (expanded.has(node.key ?? node.value) || search)) {
+      result.push(...search ? childMatches : flattenTree(node.children, expanded, search, filter, depth + 1, [...parents, node.value]));
     }
   }
   return result;
@@ -2398,25 +2415,54 @@ function TreeSelect({
   onChange,
   onSearch,
   onDropdownVisibleChange,
+  open: controlledOpen,
+  defaultOpen = false,
+  searchValue,
+  treeExpandedKeys,
+  treeDefaultExpandedKeys = [],
+  onTreeExpand,
+  filterTreeNode,
+  treeCheckStrictly = true,
+  showCheckedStrategy = "all",
+  loading = false,
+  listHeight = 300,
+  popupClassName = "",
+  popupStyle,
+  dropdownFooter,
+  displayRender,
+  renderTrigger,
+  onClear,
+  onSelect,
+  onDeselect,
   ...props
 }) {
   const rootRef = useRef7(null);
   const popupRef = useRef7(null);
+  const nodeIndex = useMemo6(() => {
+    const index = /* @__PURE__ */ new Map();
+    const visit = (nodes) => nodes.forEach((node) => {
+      index.set(node.value, node);
+      if (node.children) visit(node.children);
+    });
+    visit(treeData);
+    return index;
+  }, [treeData]);
+  const resolveNodes = (values) => values.map((value2) => nodeIndex.get(value2) ?? { value: value2, title: String(value2) });
   const multi = multiple || treeCheckable;
   const initial = defaultValue ?? (multi ? [] : void 0);
   const [currentValue, setCurrentValue] = useControllableState({
-    value,
+    value: value === null ? [] : value,
     defaultValue: initial,
-    onChange: (next) => onChange?.(next, findNodes(treeData, Array.isArray(next) ? [...next] : next === void 0 ? [] : [next]))
+    onChange: (next) => onChange?.(next, resolveNodes(Array.isArray(next) ? [...next] : next === void 0 ? [] : [next]))
   });
-  const [open, setOpen] = useState10(false);
-  const [search, setSearch] = useState10("");
+  const [open, setOpen] = useControllableState({ value: controlledOpen, defaultValue: defaultOpen, onChange: onDropdownVisibleChange });
+  const [search, setSearch] = useControllableState({ value: searchValue, defaultValue: "", onChange: onSearch });
   const [expanded, setExpanded] = useState10(() => {
-    if (!treeDefaultExpandAll) return /* @__PURE__ */ new Set();
+    if (!treeDefaultExpandAll) return new Set(treeDefaultExpandedKeys);
     const values = [];
     const collect = (nodes) => nodes.forEach((node) => {
       if (node.children?.length) {
-        values.push(node.value);
+        values.push(node.key ?? node.value);
         collect(node.children);
       }
     });
@@ -2424,99 +2470,229 @@ function TreeSelect({
     return new Set(values);
   });
   const selectedValues = Array.isArray(currentValue) ? [...currentValue] : currentValue === void 0 ? [] : [currentValue];
-  const selectedNodes = useMemo6(() => findNodes(treeData, selectedValues), [treeData, selectedValues.join("|")]);
-  const visibleNodes = useMemo6(() => flattenTree(treeData, expanded, search), [expanded, search, treeData]);
+  const expandedSet = treeExpandedKeys ? new Set(treeExpandedKeys) : expanded;
+  const selectedNodes = resolveNodes(selectedValues);
+  const visibleNodes = flattenTree(treeData, expandedSet, search, filterTreeNode);
+  useEffect6(() => {
+    if (!open || treeExpandedKeys) return;
+    const keys = new Set(expanded);
+    const walk = (nodes, parents) => nodes.forEach((node) => {
+      if (selectedValues.includes(node.value)) parents.forEach((key) => keys.add(key));
+      if (node.children) walk(node.children, [...parents, node.key ?? node.value]);
+    });
+    walk(treeData, []);
+    if (keys.size !== expanded.size) setExpanded(keys);
+    const frame = requestAnimationFrame(() => popupRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" }));
+    return () => cancelAnimationFrame(frame);
+  }, [open, treeData, currentValue, treeExpandedKeys]);
+  function toggleNode(node) {
+    const key = node.key ?? node.value;
+    const next = new Set(expandedSet);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    if (!treeExpandedKeys) setExpanded(next);
+    onTreeExpand?.([...next]);
+  }
+  const cascade = treeCheckable && !treeCheckStrictly;
+  function checkState(values) {
+    const checked2 = new Set(values);
+    const affected2 = (node) => node.disabled || node.disableCheckbox ? [] : [
+      ...node.checkable === false ? [] : [node.value],
+      ...node.children?.flatMap(affected2) ?? []
+    ];
+    if (cascade) {
+      findNodes(treeData, values).forEach((node) => affected2(node).forEach((value2) => checked2.add(value2)));
+      const fold = (nodes) => nodes.forEach((node) => {
+        if (node.disabled || node.disableCheckbox) return;
+        if (node.children) fold(node.children);
+        const children = node.children?.filter((child) => !child.disabled && !child.disableCheckbox && child.checkable !== false) ?? [];
+        if (children.length && node.checkable !== false) {
+          if (children.every((child) => checked2.has(child.value))) checked2.add(node.value);
+          else checked2.delete(node.value);
+        }
+      });
+      fold(treeData);
+    }
+    return { checked: checked2, affected: affected2 };
+  }
+  const { checked, affected } = checkState(selectedValues);
+  function outputValues(values) {
+    if (!cascade || showCheckedStrategy === "all") return [...values];
+    const output = [...values].filter((value2) => !nodeIndex.has(value2));
+    const walk = (nodes, parentChecked = false) => nodes.forEach((node) => {
+      const selected = values.has(node.value);
+      const enabledChildren = node.children?.filter((child) => !child.disabled && !child.disableCheckbox) ?? [];
+      if (selected && (showCheckedStrategy === "parent" ? !parentChecked : !enabledChildren.length)) output.push(node.value);
+      if (node.children) walk(node.children, selected && !node.disabled && !node.disableCheckbox);
+    });
+    walk(treeData);
+    return output;
+  }
+  function clear() {
+    if (disabled || loading) return;
+    setCurrentValue(multi ? [] : void 0);
+    onClear?.();
+  }
   useEffect6(() => {
     if (!open) return void 0;
     const close = (event) => {
       const target = event.target;
       if (!rootRef.current?.contains(target) && !popupRef.current?.contains(target)) {
         setOpen(false);
-        onDropdownVisibleChange?.(false);
+        setSearch("");
       }
     };
     document.addEventListener("pointerdown", close);
     return () => document.removeEventListener("pointerdown", close);
   }, [onDropdownVisibleChange, open]);
   function changeOpen(next) {
+    if (disabled) return;
     setOpen(next);
-    onDropdownVisibleChange?.(next);
+    if (!next) setSearch("");
   }
   function select(node) {
-    if (node.disabled || node.selectable === false) return;
+    if (disabled || loading || node.disabled) return;
+    if (treeCheckable ? node.disableCheckbox || node.checkable === false : node.selectable === false) {
+      if (node.children?.length) toggleNode(node);
+      return;
+    }
     if (multi) {
-      const next = selectedValues.includes(node.value) ? selectedValues.filter((item) => item !== node.value) : [...selectedValues, node.value];
-      setCurrentValue(next);
+      const exists = checked.has(node.value);
+      const next = new Set(checked);
+      (cascade ? affected(node) : [node.value]).forEach((value2) => {
+        if (exists) next.delete(value2);
+        else next.add(value2);
+      });
+      if (cascade && exists) {
+        const removeParents = (nodes) => {
+          let found = false;
+          nodes.forEach((item) => {
+            const childFound = item.children ? removeParents(item.children) : false;
+            if (childFound) next.delete(item.value);
+            if (item.value === node.value || childFound) found = true;
+          });
+          return found;
+        };
+        removeParents(treeData);
+      }
+      setCurrentValue(outputValues(checkState([...next]).checked));
+      if (exists) onDeselect?.(node.value, node);
+      else onSelect?.(node.value, node);
     } else {
       setCurrentValue(node.value);
+      onSelect?.(node.value, node);
       changeOpen(false);
     }
   }
-  return /* @__PURE__ */ jsxs14("div", { ref: rootRef, className: `sia-tree-select sia-tree-select--${size} sia-tree-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
-    /* @__PURE__ */ jsxs14(
-      "button",
-      {
-        type: "button",
-        className: "sia-tree-select__trigger",
-        disabled,
-        "aria-haspopup": "tree",
-        "aria-expanded": open,
-        onClick: () => changeOpen(!open),
-        onKeyDown: (event) => {
-          if (event.key === "ArrowDown") changeOpen(true);
-          if (event.key === "Escape") changeOpen(false);
-        },
-        children: [
-          /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__value", children: selectedNodes.length ? multi ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
-            selectedNodes.slice(0, maxTagCount).map((node) => /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__tag", children: node.title }, node.value)),
-            selectedNodes.length > maxTagCount ? /* @__PURE__ */ jsxs14("span", { className: "sia-tree-select__tag", children: [
-              "+",
-              selectedNodes.length - maxTagCount
-            ] }) : null
-          ] }) : selectedNodes[0]?.title : /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__placeholder", children: placeholder }) }),
-          allowClear && selectedValues.length && !disabled ? /* @__PURE__ */ jsx14("span", { role: "button", tabIndex: -1, className: "sia-tree-select__clear", "aria-label": "\u6E05\u9664\u9009\u62E9", onClick: (event) => {
-            event.stopPropagation();
-            setCurrentValue(multi ? [] : void 0);
-          }, children: /* @__PURE__ */ jsx14(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-          /* @__PURE__ */ jsx14(Icon, { name: open ? "chevron-up" : "chevron-down", size: 14 })
-        ]
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      ref: rootRef,
+      className: `sia-tree-select sia-tree-select--${size} sia-tree-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(),
+      ...props,
+      onKeyDown: (event) => {
+        props.onKeyDown?.(event);
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          changeOpen(false);
+        }
+      },
+      children: [
+        renderTrigger ? renderTrigger({ open, toggle: () => changeOpen(!open), clear }) : /* @__PURE__ */ jsxs14(Fragment4, { children: [
+          /* @__PURE__ */ jsxs14(
+            "button",
+            {
+              type: "button",
+              className: "sia-tree-select__trigger",
+              disabled,
+              "aria-haspopup": "tree",
+              "aria-expanded": open,
+              "aria-label": props["aria-label"],
+              onClick: () => changeOpen(!open),
+              onKeyDown: (event) => {
+                if (event.key === "ArrowDown") {
+                  event.preventDefault();
+                  changeOpen(true);
+                }
+                if (event.key === "Escape") changeOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__value", children: selectedNodes.length ? displayRender ? displayRender(selectedNodes) : multi ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
+                  selectedNodes.slice(0, maxTagCount).map((node) => /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__tag", children: node.title }, node.value)),
+                  selectedNodes.length > maxTagCount ? /* @__PURE__ */ jsxs14("span", { className: "sia-tree-select__tag", children: [
+                    "+",
+                    selectedNodes.length - maxTagCount
+                  ] }) : null
+                ] }) : selectedNodes[0]?.title : /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__placeholder", children: placeholder }) }),
+                /* @__PURE__ */ jsx14(Icon, { name: open ? "chevron-up" : "chevron-down", size: 14 })
+              ]
+            }
+          ),
+          allowClear && selectedValues.length > 0 && !disabled ? /* @__PURE__ */ jsx14("button", { type: "button", className: "sia-tree-select__clear", "aria-label": "\u6E05\u9664\u9009\u62E9", onClick: clear, children: /* @__PURE__ */ jsx14(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null
+        ] }),
+        /* @__PURE__ */ jsxs14(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && !disabled, className: `sia-tree-select__dropdown ${popupClassName}`, style: popupStyle, children: [
+          showSearch ? /* @__PURE__ */ jsxs14("label", { className: "sia-tree-select__search", children: [
+            /* @__PURE__ */ jsx14(Icon, { name: "search", size: 15 }),
+            /* @__PURE__ */ jsx14("input", { "aria-label": searchPlaceholder, autoFocus: true, value: search, placeholder: searchPlaceholder, onChange: (event) => setSearch(event.currentTarget.value) })
+          ] }) : null,
+          /* @__PURE__ */ jsx14("div", { className: "sia-tree-select__tree", role: "tree", "aria-multiselectable": multi || void 0, style: { maxHeight: listHeight }, children: loading ? /* @__PURE__ */ jsx14("div", { role: "status", className: "sia-tree-select__empty", children: "\u52A0\u8F7D\u4E2D\u2026" }) : visibleNodes.length ? visibleNodes.map((node) => {
+            const hasChildren = Boolean(node.children?.length);
+            const selected = checked.has(node.value);
+            const partial = cascade && !selected && affected(node).some((value2) => checked.has(value2));
+            return /* @__PURE__ */ jsxs14(
+              "div",
+              {
+                className: `sia-tree-select__node${selected ? " is-selected" : ""}${node.disabled ? " is-disabled" : ""}`,
+                style: { paddingInlineStart: 8 + node.depth * 20 },
+                role: "treeitem",
+                "aria-level": node.depth + 1,
+                "aria-disabled": node.disabled || void 0,
+                "aria-selected": selected,
+                "aria-expanded": hasChildren ? !!search || expandedSet.has(node.key ?? node.value) : void 0,
+                "aria-checked": treeCheckable ? partial ? "mixed" : selected : void 0,
+                children: [
+                  hasChildren ? /* @__PURE__ */ jsx14("button", { type: "button", className: "sia-tree-select__expand", "aria-label": expandedSet.has(node.key ?? node.value) ? "\u6536\u8D77\u8282\u70B9" : "\u5C55\u5F00\u8282\u70B9", disabled: node.disabled, onClick: () => toggleNode(node), children: /* @__PURE__ */ jsx14(Icon, { name: expandedSet.has(node.key ?? node.value) ? "chevron-down" : "chevron-right", size: 13 }) }) : /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__indent" }),
+                  treeCheckable && node.checkable !== false ? /* @__PURE__ */ jsx14(Checkbox, { "aria-label": typeof node.title === "string" ? node.title : void 0, checked: selected, indeterminate: partial, disabled: node.disabled || node.disableCheckbox, onChange: () => select(node) }) : null,
+                  /* @__PURE__ */ jsx14("button", { type: "button", className: "sia-tree-select__title", disabled: node.disabled, onClick: () => select(node), children: node.title })
+                ]
+              },
+              node.key ?? node.value
+            );
+          }) : /* @__PURE__ */ jsx14("div", { className: "sia-tree-select__empty", children: "\u6682\u65E0\u5339\u914D\u8282\u70B9" }) }),
+          dropdownFooter
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/flatTree.ts
+function buildFlatTree(items, options = {}) {
+  const { idField = "id", parentIdField = "pId", rootParentId } = options;
+  const keyOf = (value) => String(value ?? "");
+  const nodes = new Map(items.map((item) => [keyOf(item[idField]), { ...item, children: [] }]));
+  const roots = [];
+  const isRoot = (parent) => rootParentId !== void 0 ? keyOf(parent) === keyOf(rootParentId) : parent === null || parent === void 0 || parent === "" || parent === 0;
+  for (const node of nodes.values()) {
+    const parentKey = keyOf(node[parentIdField]);
+    const parent = nodes.get(parentKey);
+    let cyclic = false;
+    const visited = /* @__PURE__ */ new Set([keyOf(node[idField])]);
+    let ancestor = parent;
+    while (ancestor) {
+      const key = keyOf(ancestor[idField]);
+      if (visited.has(key)) {
+        cyclic = true;
+        break;
       }
-    ),
-    /* @__PURE__ */ jsxs14(PopupPortal, { ref: popupRef, anchorRef: rootRef, open, className: "sia-tree-select__dropdown", children: [
-      showSearch ? /* @__PURE__ */ jsxs14("label", { className: "sia-tree-select__search", children: [
-        /* @__PURE__ */ jsx14(Icon, { name: "search", size: 15 }),
-        /* @__PURE__ */ jsx14("input", { value: search, placeholder: searchPlaceholder, onChange: (event) => {
-          setSearch(event.currentTarget.value);
-          onSearch?.(event.currentTarget.value);
-        } })
-      ] }) : null,
-      /* @__PURE__ */ jsx14("div", { className: "sia-tree-select__tree", role: "tree", "aria-multiselectable": multi || void 0, children: visibleNodes.length ? visibleNodes.map((node) => {
-        const hasChildren = Boolean(node.children?.length);
-        const selected = selectedValues.includes(node.value);
-        return /* @__PURE__ */ jsxs14(
-          "div",
-          {
-            className: `sia-tree-select__node${selected ? " is-selected" : ""}${node.disabled ? " is-disabled" : ""}`,
-            style: { paddingInlineStart: 8 + node.depth * 20 },
-            role: "treeitem",
-            "aria-selected": selected,
-            "aria-expanded": hasChildren ? expanded.has(node.value) : void 0,
-            children: [
-              hasChildren ? /* @__PURE__ */ jsx14("button", { type: "button", className: "sia-tree-select__expand", "aria-label": expanded.has(node.value) ? "\u6536\u8D77\u8282\u70B9" : "\u5C55\u5F00\u8282\u70B9", onClick: () => setExpanded((current) => {
-                const next = new Set(current);
-                if (next.has(node.value)) next.delete(node.value);
-                else next.add(node.value);
-                return next;
-              }), children: /* @__PURE__ */ jsx14(Icon, { name: expanded.has(node.value) ? "chevron-down" : "chevron-right", size: 13 }) }) : /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__indent" }),
-              treeCheckable ? /* @__PURE__ */ jsx14(Checkbox, { checked: selected, disabled: node.disabled, onChange: () => select(node) }) : null,
-              /* @__PURE__ */ jsx14("button", { type: "button", className: "sia-tree-select__title", disabled: node.disabled, onClick: () => select(node), children: node.title })
-            ]
-          },
-          node.key ?? node.value
-        );
-      }) : /* @__PURE__ */ jsx14("div", { className: "sia-tree-select__empty", children: "\u6682\u65E0\u5339\u914D\u8282\u70B9" }) })
-    ] })
-  ] });
+      visited.add(key);
+      if (isRoot(ancestor[parentIdField])) break;
+      ancestor = nodes.get(keyOf(ancestor[parentIdField]));
+    }
+    if (isRoot(node[parentIdField]) || !parent || cyclic) roots.push(node);
+    else parent.children.push(node);
+  }
+  return roots;
 }
 
 // src/components/Editor.tsx
@@ -5837,10 +6013,13 @@ function TableInner(props, ref) {
   const [autoColumnWidths, setAutoColumnWidths] = useState16({});
   const getRowKey = useCallback2((record, index) => typeof rowKey === "function" ? rowKey(record, index) : record[String(rowKey)] ?? index, [rowKey]);
   const builtInResizePlugin = useMemo9(() => createResizePlugin(), []);
+  const builtInHighlightPlugin = useMemo9(() => createHighlightPlugin(), []);
   const activePlugins = useMemo9(() => {
     const plugins = providedPlugins.filter((plugin) => resizable || plugin.id !== "resize");
-    return resizable && !plugins.some((plugin) => plugin.id === "resize") ? [...plugins, builtInResizePlugin] : plugins;
-  }, [builtInResizePlugin, providedPlugins, resizable]);
+    if (!plugins.some((plugin) => plugin.id === "highlight")) plugins.push(builtInHighlightPlugin);
+    if (resizable && !plugins.some((plugin) => plugin.id === "resize")) plugins.push(builtInResizePlugin);
+    return plugins;
+  }, [builtInHighlightPlugin, builtInResizePlugin, providedPlugins, resizable]);
   const sortedPlugins = useMemo9(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
   const pluginsByIdRef = useRef13(/* @__PURE__ */ new Map());
   pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
@@ -6287,7 +6466,7 @@ function TableInner(props, ref) {
             summaries.length > 0 ? /* @__PURE__ */ jsx20("tfoot", { className: "sia-table__summary", children: summaries.map(renderSummaryRow) }) : null
           ] }) }),
           pipeline.rows.length === 0 ? /* @__PURE__ */ jsx20("div", { className: "sia-table__empty", role: "status", children: emptyText }) : null,
-          /* @__PURE__ */ jsx20("div", { className: "sia-table__scrollbar sia-table__scrollbar--horizontal", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx20("div", { className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--horizontal", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(
             "div",
             {
               className: "sia-table__scrollbar-thumb",
@@ -6297,7 +6476,7 @@ function TableInner(props, ref) {
               onPointerCancel: handleScrollbarPointerEnd
             }
           ) }),
-          /* @__PURE__ */ jsx20("div", { className: "sia-table__scrollbar sia-table__scrollbar--vertical", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx20("div", { className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--vertical", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(
             "div",
             {
               className: "sia-table__scrollbar-thumb",
@@ -6415,7 +6594,7 @@ function visibleRect(target) {
 function createTrack(axis) {
   const track = document.createElement("div");
   const thumb = document.createElement("div");
-  track.className = `sia-floating-scrollbar sia-floating-scrollbar--${axis}`;
+  track.className = `sia-scrollbar-track sia-floating-scrollbar sia-floating-scrollbar--${axis}`;
   thumb.className = "sia-floating-scrollbar__thumb";
   track.dataset.axis = axis;
   track.setAttribute("aria-hidden", "true");
@@ -6690,6 +6869,378 @@ function applySiaTheme(mode, target = document.documentElement) {
   target.dataset.siaTheme = mode;
   target.style.colorScheme = mode;
 }
+
+// src/components/SelectionPanel.tsx
+import { useEffect as useEffect14, useId as useId7, useMemo as useMemo10, useRef as useRef14, useState as useState17 } from "react";
+import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
+function SelectionPanel({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  disabled = false,
+  loading = false,
+  showSearch = true,
+  searchValue,
+  onSearch,
+  selectedOnly = false,
+  showValue = false,
+  displayField = "label",
+  columns = 1,
+  maxHeight = 250,
+  autoFocusSearch = false
+}) {
+  const [localSearch, setLocalSearch] = useState17("");
+  const search = searchValue ?? localSearch;
+  const [scrollTop, setScrollTop] = useState17(0);
+  const [active, setActive] = useState17();
+  const listRef = useRef14(null);
+  const id = useId7();
+  const selected = useMemo10(() => new Set(value), [value]);
+  const count = Math.max(1, Math.floor(columns));
+  const allOptions = useMemo10(() => {
+    const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
+    return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
+  }, [options, value]);
+  const filtered = useMemo10(
+    () => allOptions.filter((option) => (!selectedOnly || selected.has(option.value)) && (!search || option.optionType !== "divider" && [option.label, option.value].some((text) => String(text ?? "").toLowerCase().includes(search.toLowerCase())))),
+    [allOptions, selectedOnly, selected, search]
+  );
+  const rows = useMemo10(() => {
+    const groups = /* @__PURE__ */ new Map();
+    filtered.forEach((option) => {
+      const items = groups.get(option.group) ?? [];
+      items.push(option);
+      groups.set(option.group, items);
+    });
+    const rows2 = [];
+    let top = 0;
+    for (const [group, items] of groups) {
+      if (group) {
+        rows2.push({ key: `group-${rows2.length}`, title: group, top, height: 30 });
+        top += 30;
+      }
+      for (let index = 0; index < items.length; index += count) {
+        const height = showValue ? 48 : 34;
+        rows2.push({ key: `row-${rows2.length}`, items: items.slice(index, index + count), top, height });
+        top += height;
+      }
+    }
+    return rows2;
+  }, [filtered, count, showValue]);
+  const totalHeight = rows.length ? rows[rows.length - 1].top + rows[rows.length - 1].height : 0;
+  const virtual = filtered.length > 100;
+  const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
+  const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
+  useEffect14(() => {
+    setScrollTop(0);
+    if (listRef.current) listRef.current.scrollTop = 0;
+    setActive(void 0);
+  }, [search, selectedOnly, count]);
+  function toggle(option) {
+    if (disabled || loading || option.disabled || option.optionType === "divider") return;
+    setActive(option.value);
+    onChange(multiple ? selected.has(option.value) ? value.filter((item) => item !== option.value) : [...value, option.value] : [option.value]);
+  }
+  function batch(operation) {
+    if (disabled || loading) return;
+    if (operation === "clear") {
+      onChange([]);
+      return;
+    }
+    const editable = new Set(enabled.map((option) => option.value));
+    const retained = value.filter((item) => !editable.has(item));
+    const add = enabled.filter((option) => operation === "all" || !selected.has(option.value)).map((option) => option.value);
+    onChange([...retained, ...add]);
+  }
+  return /* @__PURE__ */ jsxs22("div", { className: "sia-selection-panel", children: [
+    showSearch && /* @__PURE__ */ jsx22(
+      Input,
+      {
+        "aria-label": "\u641C\u7D22\u9009\u9879",
+        placeholder: "\u641C\u7D22",
+        autoFocus: autoFocusSearch,
+        value: search,
+        allowClear: true,
+        onChange: (event) => {
+          setLocalSearch(event.target.value);
+          onSearch?.(event.target.value);
+        }
+      }
+    ),
+    multiple && /* @__PURE__ */ jsxs22("div", { className: "sia-selection-panel__actions", children: [
+      /* @__PURE__ */ jsx22(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
+      /* @__PURE__ */ jsx22(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
+      /* @__PURE__ */ jsx22(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
+      /* @__PURE__ */ jsxs22("span", { children: [
+        "\u5DF2\u9009 ",
+        value.length,
+        " \u9879"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx22(
+      "div",
+      {
+        ref: listRef,
+        role: "listbox",
+        "aria-label": "\u9009\u9879\u5217\u8868",
+        "aria-multiselectable": multiple || void 0,
+        tabIndex: disabled ? -1 : 0,
+        className: "sia-selection-panel__list",
+        style: { maxHeight },
+        onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+        "aria-activedescendant": active !== void 0 ? `${id}-${typeof active}-${active}` : void 0,
+        onKeyDown: (event) => {
+          if (disabled || loading || !enabled.length) return;
+          const index = enabled.findIndex((option) => option.value === active);
+          if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : Math.max(0, Math.min(enabled.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+            const option = enabled[next];
+            setActive(option.value);
+            const row = rows.find((row2) => row2.items?.includes(option));
+            if (row && listRef.current) {
+              listRef.current.scrollTop = Math.max(0, row.top - maxHeight / 2);
+              setScrollTop(listRef.current.scrollTop);
+            }
+          } else if ((event.key === "Enter" || event.key === " ") && index >= 0) {
+            event.preventDefault();
+            toggle(enabled[index]);
+          }
+        },
+        children: loading ? /* @__PURE__ */ jsx22("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ jsx22("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ jsx22("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: row.title !== void 0 ? "sia-selection-panel__group" : "sia-selection-panel__row",
+            style: { position: "absolute", top: row.top, height: row.height, width: "100%", gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` },
+            children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ jsx22("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ jsx22(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ jsxs22(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                id: `${id}-${typeof option.value}-${option.value}`,
+                tabIndex: -1,
+                "aria-selected": selected.has(option.value),
+                "aria-disabled": disabled || option.disabled || void 0,
+                className: `sia-selection-panel__option${active === option.value ? " is-active" : ""}`,
+                onClick: () => toggle(option),
+                children: [
+                  multiple && /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: "sia-selection-panel__check", children: selected.has(option.value) ? "\u2713" : "" }),
+                  /* @__PURE__ */ jsxs22("span", { className: "sia-selection-panel__text", children: [
+                    showValue || displayField === "label" ? option.label : String(option.value),
+                    showValue && /* @__PURE__ */ jsx22("small", { children: String(option.value) })
+                  ] })
+                ]
+              }
+            ) }, `${typeof option.value}-${option.value}`))
+          },
+          row.key
+        )) })
+      }
+    )
+  ] });
+}
+
+// src/components/InputSelect.tsx
+import { forwardRef as forwardRef7, useEffect as useEffect15, useRef as useRef15, useState as useState18 } from "react";
+import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
+var InputSelect = forwardRef7(function InputSelect2({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  multiple = false,
+  displayField = "label",
+  showValue = false,
+  placeholder = "\u8BF7\u9009\u62E9",
+  size = "medium",
+  status,
+  disabled = false,
+  loading = false,
+  allowClear = true,
+  hideSearch,
+  inputMaxLength,
+  parseInput,
+  enableModal,
+  suffix,
+  style,
+  className = "",
+  onOpenChange,
+  ...inputProps
+}, forwardedRef) {
+  const [internal, setInternal] = useState18(defaultValue);
+  const current = value !== void 0 ? value : internal;
+  const values = current == null ? [] : Array.isArray(current) ? current : [current];
+  const text = values.map((item) => displayField === "label" ? String(options.find((option) => option.optionType !== "divider" && option.value === item)?.label ?? item) : String(item)).join(",");
+  const [draft, setDraft] = useState18(text);
+  useEffect15(() => {
+    setDraft(text);
+  }, [text, current]);
+  const [open, setOpen] = useState18(false);
+  const [search, setSearch] = useState18("");
+  const [modalOpen, setModalOpen] = useState18(false);
+  const [modalValues, setModalValues] = useState18([]);
+  const [selectedOnly, setSelectedOnly] = useState18(false);
+  const rootRef = useRef15(null);
+  const popupRef = useRef15(null);
+  const inputRef = useRef15(null);
+  const config = typeof enableModal === "object" ? enableModal : {};
+  function changeOpen(next) {
+    if (next && (disabled || loading)) return;
+    setOpen(next);
+    if (next !== open) onOpenChange?.(next);
+    if (!next) setSearch("");
+  }
+  function emit(next) {
+    if (disabled || loading) return;
+    if (value === void 0) setInternal(next);
+    onChange?.(next);
+  }
+  function select(next) {
+    emit(multiple ? next : next[0]);
+    if (!multiple) {
+      changeOpen(false);
+      inputRef.current?.focus();
+    }
+  }
+  useEffect15(() => {
+    if (!open) return;
+    const outside = (event) => {
+      if (!rootRef.current?.contains(event.target) && !popupRef.current?.contains(event.target)) changeOpen(false);
+    };
+    document.addEventListener("pointerdown", outside);
+    return () => document.removeEventListener("pointerdown", outside);
+  }, [open, onOpenChange]);
+  useEffect15(() => {
+    if (disabled || loading) {
+      changeOpen(false);
+      setModalOpen(false);
+    }
+  }, [disabled, loading]);
+  function openModal() {
+    if (disabled || loading) return;
+    changeOpen(false);
+    setModalValues([...values]);
+    setSelectedOnly(false);
+    setModalOpen(true);
+  }
+  return /* @__PURE__ */ jsxs23("div", { ref: rootRef, style, className: `sia-input-select ${className}`, onKeyDown: (event) => {
+    if (event.key === "Escape" && open) {
+      event.stopPropagation();
+      changeOpen(false);
+      inputRef.current?.focus();
+    }
+  }, children: [
+    /* @__PURE__ */ jsx23(
+      Input,
+      {
+        ...inputProps,
+        ref: (node) => {
+          inputRef.current = node;
+          if (typeof forwardedRef === "function") forwardedRef(node);
+          else if (forwardedRef) forwardedRef.current = node;
+        },
+        role: "combobox",
+        "aria-label": inputProps["aria-label"] ?? placeholder,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        size,
+        status,
+        disabled,
+        readOnly: displayField === "label" || loading,
+        placeholder,
+        value: draft,
+        maxLength: inputMaxLength && inputMaxLength > 0 ? inputMaxLength : void 0,
+        showCount: !!inputMaxLength && inputMaxLength > 0,
+        onClick: () => changeOpen(!open),
+        autoComplete: "off",
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "Enter" && displayField === "label") {
+            event.preventDefault();
+            if (open) popupRef.current?.querySelector('[role="listbox"]')?.focus();
+            else changeOpen(true);
+          }
+        },
+        onChange: (event) => {
+          const next = event.target.value;
+          setDraft(next);
+          emit(parseInput ? parseInput(next) : multiple ? next.split(",").map((item) => item.trim()).filter(Boolean) : next);
+          changeOpen(true);
+        },
+        suffix: /* @__PURE__ */ jsxs23("span", { className: "sia-input-select__suffix", children: [
+          allowClear && draft && !disabled && /* @__PURE__ */ jsx23(Button, { variant: "text", size: "small", disabled: loading, "aria-label": "\u6E05\u9664\u8F93\u5165\u9009\u62E9", onClick: (event) => {
+            event.stopPropagation();
+            setDraft("");
+            emit(multiple ? [] : void 0);
+            inputRef.current?.focus();
+          }, children: "\xD7" }),
+          suffix,
+          enableModal && /* @__PURE__ */ jsx23(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u6253\u5F00\u9009\u62E9\u5F39\u7A97", onClick: (event) => {
+            event.stopPropagation();
+            openModal();
+          }, children: "\u2026" }),
+          /* @__PURE__ */ jsx23(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u5C55\u5F00\u9009\u9879", onClick: (event) => {
+            event.stopPropagation();
+            changeOpen(!open);
+          }, children: /* @__PURE__ */ jsx23(Icon, { name: loading ? "refresh" : open ? "chevron-up" : "chevron-down", size: 13 }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx23(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && !disabled && !loading, className: "sia-input-select__popup", children: /* @__PURE__ */ jsx23(
+      SelectionPanel,
+      {
+        options,
+        value: values,
+        multiple,
+        onChange: select,
+        showValue,
+        displayField,
+        showSearch: !(hideSearch ?? (!multiple && displayField === "value")),
+        autoFocusSearch: displayField === "label",
+        searchValue: search || (!multiple && displayField === "value" ? draft : ""),
+        onSearch: setSearch
+      }
+    ) }),
+    enableModal && /* @__PURE__ */ jsxs23(
+      Modal,
+      {
+        open: modalOpen,
+        title: config.title ?? "\u9009\u62E9",
+        width: config.width ?? 900,
+        onCancel: () => setModalOpen(false),
+        onOpenChange: setModalOpen,
+        onOk: () => {
+          emit(multiple ? modalValues : modalValues[0]);
+          setModalOpen(false);
+        },
+        children: [
+          /* @__PURE__ */ jsxs23("div", { className: "sia-selection-panel__actions", role: "tablist", "aria-label": "\u9009\u9879\u8303\u56F4", children: [
+            /* @__PURE__ */ jsx23(Button, { role: "tab", "aria-selected": !selectedOnly, variant: !selectedOnly ? "primary" : "text", onClick: () => setSelectedOnly(false), children: "\u5168\u90E8" }),
+            /* @__PURE__ */ jsxs23(Button, { role: "tab", "aria-selected": selectedOnly, variant: selectedOnly ? "primary" : "text", onClick: () => setSelectedOnly(true), children: [
+              "\u5DF2\u9009\u9879(",
+              modalValues.length,
+              ")"
+            ] })
+          ] }),
+          modalOpen && /* @__PURE__ */ jsx23(
+            SelectionPanel,
+            {
+              options,
+              value: modalValues,
+              multiple,
+              onChange: setModalValues,
+              selectedOnly,
+              columns: config.columns ?? 3,
+              maxHeight: config.maxHeight ?? 450,
+              showValue,
+              displayField
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
 export {
   Alert,
   Badge,
@@ -6747,6 +7298,7 @@ export {
   ImagePreview,
   Input,
   InputNumber,
+  InputSelect,
   KLineChart,
   LineChart,
   LineShareChart,
@@ -6772,6 +7324,7 @@ export {
   Segmented,
   Select,
   SelectDateRange,
+  SelectionPanel,
   SiaChart,
   Slider,
   Space,
@@ -6806,6 +7359,7 @@ export {
   WordCloudChart,
   XYChart,
   applySiaTheme,
+  buildFlatTree,
   chartColor,
   chartTicks,
   createBaiduMapHost,