@skygraph/react 0.0.0-placeholder.0 → 0.4.0

package/dist/tree.cjs

@@ -0,0 +1,1821 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tree.ts
+var tree_exports = {};
+__export(tree_exports, {
+  Tree: () => Tree,
+  TreeSelect: () => TreeSelect,
+  useTree: () => useTree
+});
+module.exports = __toCommonJS(tree_exports);
+
+// src/components/complex/Tree/Tree.tsx
+var import_react6 = require("react");
+
+// src/hooks/useTree.ts
+var import_react = require("react");
+var import_core = require("@skygraph/core");
+function useTree(options) {
+  const [{ core, tree }] = (0, import_react.useState)(() => {
+    const c = (0, import_core.createCore)();
+    const t = (0, import_core.createTree)(c, options);
+    if (options?.data) {
+      t.setData(options.data);
+    }
+    return { core: c, tree: t };
+  });
+  const [treeState, setTreeState] = (0, import_react.useState)(() => tree.getState());
+  const [flatNodes, setFlatNodes] = (0, import_react.useState)(() => tree.getFlatNodes());
+  const refresh = (0, import_react.useCallback)(() => {
+    setTreeState(tree.getState());
+    setFlatNodes(tree.getFlatNodes());
+  }, [tree]);
+  const expand = (0, import_react.useCallback)((key) => {
+    tree.expand(key);
+    refresh();
+  }, [tree, refresh]);
+  const collapse = (0, import_react.useCallback)((key) => {
+    tree.collapse(key);
+    refresh();
+  }, [tree, refresh]);
+  const toggleExpand = (0, import_react.useCallback)((key) => {
+    tree.toggleExpand(key);
+    refresh();
+  }, [tree, refresh]);
+  const setExpandedKeys = (0, import_react.useCallback)((keys) => {
+    tree.setExpandedKeys(keys);
+    refresh();
+  }, [tree, refresh]);
+  const expandAll = (0, import_react.useCallback)(() => {
+    tree.expandAll();
+    refresh();
+  }, [tree, refresh]);
+  const collapseAll = (0, import_react.useCallback)(() => {
+    tree.collapseAll();
+    refresh();
+  }, [tree, refresh]);
+  const check = (0, import_react.useCallback)((key) => {
+    tree.check(key);
+    refresh();
+  }, [tree, refresh]);
+  const uncheck = (0, import_react.useCallback)((key) => {
+    tree.uncheck(key);
+    refresh();
+  }, [tree, refresh]);
+  const toggleCheck = (0, import_react.useCallback)((key) => {
+    tree.toggleCheck(key);
+    refresh();
+  }, [tree, refresh]);
+  const setCheckedKeys = (0, import_react.useCallback)((keys) => {
+    tree.setCheckedKeys(keys);
+    refresh();
+  }, [tree, refresh]);
+  const select = (0, import_react.useCallback)((key, multiple) => {
+    tree.select(key, multiple);
+    refresh();
+  }, [tree, refresh]);
+  const deselect = (0, import_react.useCallback)((key) => {
+    tree.deselect(key);
+    refresh();
+  }, [tree, refresh]);
+  const setSelectedKeys = (0, import_react.useCallback)((keys) => {
+    tree.setSelectedKeys(keys);
+    refresh();
+  }, [tree, refresh]);
+  const markLoading = (0, import_react.useCallback)((key) => {
+    tree.markLoading(key);
+    refresh();
+  }, [tree, refresh]);
+  const markLoaded = (0, import_react.useCallback)((key) => {
+    tree.markLoaded(key);
+    refresh();
+  }, [tree, refresh]);
+  const addChildren = (0, import_react.useCallback)((parentKey, children) => {
+    tree.addChildren(parentKey, children);
+    refresh();
+  }, [tree, refresh]);
+  const moveNode = (0, import_react.useCallback)((dragKey, dropKey, position) => {
+    const result = tree.moveNode(dragKey, dropKey, position);
+    refresh();
+    return result;
+  }, [tree, refresh]);
+  const filterNodes = (0, import_react.useCallback)((predicate) => {
+    tree.filterNodes(predicate);
+    refresh();
+  }, [tree, refresh]);
+  const expandToLevel = (0, import_react.useCallback)((level) => {
+    const flat = tree.getFlatNodes();
+    const keys = [];
+    for (const item of flat) {
+      if (item.depth < level && !item.isLeaf) {
+        keys.push(item.key);
+      }
+    }
+    tree.expandAll();
+    const allFlat = tree.getFlatNodes();
+    const expandKeys = [];
+    for (const item of allFlat) {
+      if (item.depth < level && !item.isLeaf) {
+        expandKeys.push(item.key);
+      }
+    }
+    tree.setExpandedKeys(expandKeys);
+    refresh();
+  }, [tree, refresh]);
+  const checkAll = (0, import_react.useCallback)(() => {
+    const allKeys = tree.getAllKeys();
+    tree.setCheckedKeys(allKeys);
+    refresh();
+  }, [tree, refresh]);
+  const uncheckAll = (0, import_react.useCallback)(() => {
+    tree.setCheckedKeys([]);
+    refresh();
+  }, [tree, refresh]);
+  const getNodePath = (0, import_react.useCallback)((key) => {
+    const path = [];
+    let current = key;
+    while (current !== null) {
+      path.unshift(current);
+      current = tree.getParentKey(current);
+    }
+    return path;
+  }, [tree]);
+  return (0, import_react.useMemo)(() => ({
+    core,
+    tree,
+    treeState,
+    flatNodes,
+    expand,
+    collapse,
+    toggleExpand,
+    setExpandedKeys,
+    expandAll,
+    collapseAll,
+    expandToLevel,
+    check,
+    uncheck,
+    toggleCheck,
+    setCheckedKeys,
+    checkAll,
+    uncheckAll,
+    select,
+    deselect,
+    setSelectedKeys,
+    markLoading,
+    markLoaded,
+    addChildren,
+    moveNode,
+    filterNodes,
+    getNodePath,
+    refresh
+  }), [
+    core,
+    tree,
+    treeState,
+    flatNodes,
+    expand,
+    collapse,
+    toggleExpand,
+    setExpandedKeys,
+    expandAll,
+    collapseAll,
+    expandToLevel,
+    check,
+    uncheck,
+    toggleCheck,
+    setCheckedKeys,
+    checkAll,
+    uncheckAll,
+    select,
+    deselect,
+    setSelectedKeys,
+    markLoading,
+    markLoaded,
+    addChildren,
+    moveNode,
+    filterNodes,
+    getNodePath,
+    refresh
+  ]);
+}
+
+// src/components/complex/Tree/TreeNodeRow.tsx
+var import_react5 = require("react");
+
+// src/components/ui/Checkbox.tsx
+var import_react4 = __toESM(require("react"), 1);
+
+// src/components/ConfigProvider.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SgConfigContext = (0, import_react2.createContext)({});
+function useConfig() {
+  return (0, import_react2.useContext)(SgConfigContext);
+}
+
+// src/components/ui/Spin.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Spin({
+  spinning = true,
+  size: sizeProp,
+  delay,
+  tip,
+  fullscreen,
+  indicator,
+  children,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const resolvedSize = sizeProp ?? config.size ?? "middle";
+  const [visible, setVisible] = import_react3.default.useState(delay ? false : spinning);
+  import_react3.default.useEffect(() => {
+    if (!delay) {
+      setVisible(spinning);
+      return;
+    }
+    if (spinning) {
+      const timer = setTimeout(() => setVisible(true), delay);
+      return () => clearTimeout(timer);
+    }
+    setVisible(false);
+  }, [spinning, delay]);
+  if (!visible && !children) return null;
+  if (!visible && children) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  const spinSizeClass = resolvedSize === "middle" ? "default" : resolvedSize;
+  const spinClasses = unstyled ? className ?? "" : ["sg-spin", `sg-spin-${spinSizeClass}`, className].filter(Boolean).join(" ");
+  const spinElement = indicator ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      className: spinClasses,
+      style,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": config.locale?.spin?.loading ?? "Loading"
+    }
+  );
+  if (fullscreen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: unstyled ? "" : "sg-spin-fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: unstyled ? "" : "sg-spin-fullscreen-inner", children: [
+      spinElement,
+      tip && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }) });
+  }
+  if (!children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: unstyled ? "" : "sg-spin-standalone", style, children: [
+      spinElement,
+      tip && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: unstyled ? "" : "sg-spin-container", style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: unstyled ? "" : "sg-spin-overlay", children: [
+      spinElement,
+      tip && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: visible ? unstyled ? "" : "sg-spin-blur" : "", children })
+  ] });
+}
+
+// src/components/ui/Checkbox.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Checkbox({
+  checked,
+  defaultChecked,
+  disabled: disabledProp,
+  loading,
+  indeterminate,
+  onChange,
+  children,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const disabled = disabledProp ?? config.disabled ?? false;
+  const inputRef = import_react4.default.useRef(null);
+  import_react4.default.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate ?? false;
+    }
+  }, [indeterminate]);
+  const wrapperClass = unstyled ? className ?? "" : [
+    "sg-checkbox",
+    disabled || loading ? "sg-checkbox-disabled" : "",
+    loading ? "sg-checkbox-loading" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: wrapperClass, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        "aria-checked": checked,
+        className: unstyled ? "" : "sg-checkbox-input",
+        checked,
+        defaultChecked,
+        disabled: disabled || loading,
+        onChange: (e) => onChange?.(e.target.checked)
+      }
+    ),
+    children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: unstyled ? "" : "sg-checkbox-label", children }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spin, { size: "small", unstyled })
+  ] });
+}
+
+// src/components/complex/Tree/TreeNodeRow.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function TreeNodeRow(props) {
+  const {
+    node,
+    nodeKey,
+    depth,
+    isLeaf,
+    indentSize,
+    expanded,
+    checked,
+    halfChecked,
+    selected,
+    loading,
+    disabled,
+    focused,
+    checkable,
+    selectable,
+    showLine,
+    showLeafIcon,
+    showIcon,
+    blockNode,
+    directory,
+    globalIcon,
+    nodeIcon,
+    switcherIcon,
+    draggable,
+    dropPosition,
+    dragKey,
+    onExpand,
+    onCheck,
+    onSelect,
+    onDragStart,
+    onDragOver,
+    onDragLeave,
+    onDragEnd,
+    onDrop,
+    onRightClick,
+    onLoadData,
+    onFocusNode,
+    titleRender,
+    searchValue,
+    editable,
+    editing,
+    onEditStart,
+    onEditConfirm,
+    onEditCancel,
+    actions,
+    status,
+    lineIsLast,
+    lineParentIsLast,
+    unstyled,
+    nodeClassName,
+    nodeStyle
+  } = props;
+  const rowRef = (0, import_react5.useRef)(null);
+  const editInputRef = (0, import_react5.useRef)(null);
+  const [editValue, setEditValue] = (0, import_react5.useState)("");
+  (0, import_react5.useEffect)(() => {
+    if (editing) {
+      setEditValue(String(node.title ?? ""));
+      setTimeout(() => editInputRef.current?.focus(), 0);
+    }
+  }, [editing, node.title]);
+  (0, import_react5.useEffect)(() => {
+    if (focused && rowRef.current) {
+      rowRef.current.scrollIntoView?.({ block: "nearest" });
+    }
+  }, [focused]);
+  const handleSwitcherClick = (e) => {
+    e.stopPropagation();
+    if (isLeaf) return;
+    if (!expanded && loading) return;
+    onExpand(nodeKey);
+    if (!expanded && !isLeaf && onLoadData) {
+      onLoadData(node);
+    }
+  };
+  const handleCheckChange = () => {
+    if (disabled || node.disableCheckbox) return;
+    onCheck(nodeKey);
+  };
+  const handleSelect = () => {
+    if (disabled || node.selectable === false) return;
+    if (!selectable) return;
+    onSelect(nodeKey);
+    if (directory && !isLeaf) {
+      onExpand(nodeKey);
+    }
+  };
+  const handleClick = () => {
+    onFocusNode(nodeKey);
+    handleSelect();
+  };
+  const handleDoubleClick = () => {
+    if (editable && !editing) {
+      onEditStart(nodeKey);
+    }
+  };
+  const handleContextMenu = (e) => {
+    if (onRightClick) {
+      e.preventDefault();
+      onRightClick(e, node);
+    }
+  };
+  const handleEditKeyDown = (0, import_react5.useCallback)((e) => {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      onEditConfirm(nodeKey, editValue);
+    } else if (e.key === "Escape") {
+      onEditCancel(nodeKey);
+    }
+  }, [nodeKey, editValue, onEditConfirm, onEditCancel]);
+  const handleEditBlur = (0, import_react5.useCallback)(() => {
+    onEditConfirm(nodeKey, editValue);
+  }, [nodeKey, editValue, onEditConfirm]);
+  const renderHighlightedTitle = (title) => {
+    if (!searchValue) return title;
+    const index = title.toLowerCase().indexOf(searchValue.toLowerCase());
+    if (index === -1) return title;
+    const before = title.slice(0, index);
+    const match = title.slice(index, index + searchValue.length);
+    const after = title.slice(index + searchValue.length);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      before,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sg-tree-highlight", children: match }),
+      after
+    ] });
+  };
+  const renderSwitcher = () => {
+    if (isLeaf) {
+      if (showLine) {
+        if (showLeafIcon === false) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sg-tree-switcher sg-tree-switcher-noop" });
+        if (showLeafIcon && typeof showLeafIcon !== "boolean") {
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sg-tree-switcher sg-tree-switcher-leaf-icon", children: showLeafIcon });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sg-tree-switcher sg-tree-switcher-leaf", children: "\u2500" });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sg-tree-switcher sg-tree-switcher-noop" });
+    }
+    if (loading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sg-tree-switcher sg-tree-switcher-loading", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spin, { size: "small" }) });
+    }
+    let iconContent;
+    if (switcherIcon) {
+      iconContent = typeof switcherIcon === "function" ? switcherIcon({ expanded, loading, isLeaf }) : switcherIcon;
+    } else {
+      iconContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "svg",
+        {
+          className: `sg-tree-switcher-arrow${expanded ? " sg-tree-switcher-arrow-open" : ""}`,
+          width: "10",
+          height: "10",
+          viewBox: "0 0 10 10",
+          fill: "none",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 2L7 5L3 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
+      {
+        className: `sg-tree-switcher${expanded ? " sg-tree-switcher-open" : " sg-tree-switcher-close"}`,
+        onClick: handleSwitcherClick,
+        children: iconContent
+      }
+    );
+  };
+  const renderIcon = () => {
+    if (!showIcon && !directory) return null;
+    const iconSource = nodeIcon ?? globalIcon;
+    let iconContent = null;
+    if (iconSource) {
+      iconContent = typeof iconSource === "function" ? iconSource({ expanded, selected }) : iconSource;
+    } else if (directory) {
+      iconContent = expanded ? "\u{1F4C2}" : "\u{1F4C1}";
+    }
+    if (!iconContent) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sg-tree-icon", children: iconContent });
+  };
+  const renderTitle = () => {
+    if (editing) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          ref: editInputRef,
+          className: "sg-tree-edit-input",
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          onKeyDown: handleEditKeyDown,
+          onBlur: handleEditBlur,
+          onClick: (e) => e.stopPropagation()
+        }
+      );
+    }
+    if (titleRender) {
+      return titleRender(node, { expanded, selected, checked, halfChecked });
+    }
+    const titleText = String(node.title ?? nodeKey);
+    return renderHighlightedTitle(titleText);
+  };
+  const renderActions = () => {
+    if (!actions || actions.length === 0) return null;
+    const visibleActions = actions.filter((a) => !a.visible || a.visible(node));
+    if (visibleActions.length === 0) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sg-tree-actions", onClick: (e) => e.stopPropagation(), children: visibleActions.map((action) => {
+      const isDisabled = action.disabled?.(node) ?? false;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          className: `sg-tree-action-btn${action.danger ? " sg-tree-action-danger" : ""}${isDisabled ? " sg-tree-action-disabled" : ""}`,
+          title: action.title,
+          onClick: (e) => {
+            e.stopPropagation();
+            if (!isDisabled) action.onClick(node, nodeKey);
+          },
+          disabled: isDisabled,
+          type: "button",
+          children: action.icon ?? action.title ?? action.key
+        },
+        action.key
+      );
+    }) });
+  };
+  const renderIndentLines = () => {
+    if (!showLine) return null;
+    const lines = [];
+    for (let i = 0; i < depth; i++) {
+      const isParentLast = lineParentIsLast[i] ?? false;
+      lines.push(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: `sg-tree-indent-line${isParentLast ? " sg-tree-indent-line-hidden" : ""}`,
+            style: { left: i * indentSize + indentSize / 2 }
+          },
+          i
+        )
+      );
+    }
+    if (depth > 0) {
+      lines.push(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: `sg-tree-indent-branch${lineIsLast ? " sg-tree-indent-branch-last" : ""}`,
+            style: { left: (depth - 1) * indentSize + indentSize / 2 }
+          },
+          "branch"
+        )
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: lines });
+  };
+  const renderStatus = () => {
+    if (status === "default") return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `sg-tree-status sg-tree-status-${status}` });
+  };
+  if (unstyled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        ref: rowRef,
+        role: "treeitem",
+        "aria-expanded": isLeaf ? void 0 : expanded,
+        "aria-selected": selected,
+        "aria-checked": checkable ? checked : void 0,
+        "aria-level": depth + 1,
+        "data-key": nodeKey,
+        children: [
+          checkable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Checkbox,
+            {
+              checked,
+              indeterminate: halfChecked,
+              disabled: disabled || node.disableCheckbox,
+              onChange: handleCheckChange,
+              unstyled: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { onClick: handleClick, children: renderTitle() })
+        ]
+      }
+    );
+  }
+  const isDragging = dragKey === nodeKey;
+  const rowCls = [
+    "sg-tree-node",
+    selected ? "sg-tree-node-selected" : "",
+    disabled ? "sg-tree-node-disabled" : "",
+    isLeaf ? "sg-tree-node-leaf" : "",
+    expanded ? "sg-tree-node-expanded" : "",
+    draggable ? "sg-tree-node-draggable" : "",
+    isDragging ? "sg-tree-node-dragging" : "",
+    dropPosition === 0 ? "sg-tree-node-drop-inner" : "",
+    dropPosition === -1 ? "sg-tree-node-drop-before" : "",
+    dropPosition === 1 ? "sg-tree-node-drop-after" : "",
+    showLine ? "sg-tree-node-show-line" : "",
+    blockNode ? "sg-tree-node-block" : "",
+    directory ? "sg-tree-node-directory" : "",
+    focused ? "sg-tree-node-focused" : "",
+    editing ? "sg-tree-node-editing" : "",
+    status !== "default" ? `sg-tree-node-status-${status}` : "",
+    nodeClassName
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref: rowRef,
+      className: rowCls,
+      style: { ...nodeStyle, paddingLeft: depth * indentSize },
+      role: "treeitem",
+      "aria-expanded": isLeaf ? void 0 : expanded,
+      "aria-selected": selected,
+      "aria-checked": checkable ? checked : void 0,
+      "aria-level": depth + 1,
+      "data-key": nodeKey,
+      draggable: draggable && !editing,
+      onDragStart: draggable ? (e) => onDragStart(e, nodeKey) : void 0,
+      onDragOver: draggable ? (e) => {
+        e.preventDefault();
+        onDragOver(e, nodeKey);
+      } : void 0,
+      onDragLeave: draggable ? (e) => onDragLeave(e, nodeKey) : void 0,
+      onDragEnd: draggable ? (e) => onDragEnd(e, nodeKey) : void 0,
+      onDrop: draggable ? (e) => {
+        e.preventDefault();
+        onDrop(e, nodeKey);
+      } : void 0,
+      onContextMenu: handleContextMenu,
+      onClick: handleClick,
+      onDoubleClick: editable ? handleDoubleClick : void 0,
+      children: [
+        renderIndentLines(),
+        renderSwitcher(),
+        checkable && node.checkable !== false && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Checkbox,
+          {
+            checked,
+            indeterminate: halfChecked,
+            disabled: disabled || node.disableCheckbox,
+            onChange: handleCheckChange
+          }
+        ),
+        renderIcon(),
+        renderStatus(),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: `sg-tree-title${selectable && !editing ? " sg-tree-title-selectable" : ""}`,
+            children: renderTitle()
+          }
+        ),
+        renderActions()
+      ]
+    }
+  );
+}
+
+// src/components/complex/Tree/types.ts
+var DEFAULT_TREE_LOCALE = {
+  emptyText: "No data",
+  loadingText: "Loading...",
+  searchPlaceholder: "Search...",
+  expandAllText: "Expand All",
+  collapseAllText: "Collapse All",
+  checkAllText: "Check All",
+  uncheckAllText: "Uncheck All",
+  clearSearch: "Clear search"
+};
+var DEFAULT_INDENT = 24;
+var NODE_HEIGHT = 28;
+
+// src/components/complex/Tree/Tree.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Tree(props) {
+  const {
+    treeData,
+    fieldNames,
+    checkable = false,
+    checkStrictly = false,
+    checkedKeys: controlledCheckedKeys,
+    defaultCheckedKeys,
+    onCheck,
+    selectable = true,
+    multiple = false,
+    selectedKeys: controlledSelectedKeys,
+    defaultSelectedKeys,
+    onSelect,
+    expandedKeys: controlledExpandedKeys,
+    defaultExpandedKeys,
+    defaultExpandAll = false,
+    autoExpandParent = false,
+    onExpand,
+    draggable = false,
+    allowDrop,
+    onDragStart,
+    onDragOver,
+    onDragLeave,
+    onDragEnd,
+    onDrop,
+    loadData,
+    showLine = false,
+    showIcon = false,
+    icon: globalIcon,
+    switcherIcon,
+    blockNode = false,
+    height,
+    virtual = true,
+    disabled = false,
+    indentSize = DEFAULT_INDENT,
+    directory = false,
+    onRightClick,
+    // Search
+    showSearch = false,
+    searchValue: controlledSearchValue,
+    defaultSearchValue = "",
+    onSearch,
+    filterTreeNode,
+    highlightSearch = true,
+    // Keyboard
+    keyboard = true,
+    // Editable
+    editable = false,
+    onEdit,
+    onEditCancel,
+    // Custom render
+    titleRender,
+    // Actions
+    actions,
+    // Toolbar
+    showToolbar = false,
+    toolbarExtra,
+    // Animation
+    animated = true,
+    // Focus
+    autoFocus = false,
+    focusedKey: controlledFocusedKey,
+    onFocus: onFocusCallback,
+    // Scroll
+    scrollToKey,
+    // Status
+    nodeStatus,
+    locale,
+    className,
+    style,
+    unstyled
+  } = props;
+  const t = (0, import_react6.useMemo)(() => ({ ...DEFAULT_TREE_LOCALE, ...locale }), [locale]);
+  const showLineConfig = typeof showLine === "object" ? showLine : { showLeafIcon: false };
+  const isShowLine = !!showLine;
+  const {
+    tree,
+    treeState,
+    flatNodes,
+    toggleExpand,
+    setExpandedKeys,
+    expandAll,
+    collapseAll,
+    toggleCheck,
+    setCheckedKeys,
+    select,
+    setSelectedKeys,
+    markLoading,
+    markLoaded,
+    moveNode,
+    filterNodes,
+    refresh
+  } = useTree({
+    data: treeData,
+    fieldNames,
+    checkStrictly,
+    defaultExpandAll,
+    defaultExpandedKeys,
+    defaultCheckedKeys,
+    defaultSelectedKeys
+  });
+  const [internalSearchValue, setInternalSearchValue] = (0, import_react6.useState)(defaultSearchValue);
+  const searchValue = controlledSearchValue ?? internalSearchValue;
+  const handleSearchChange = (0, import_react6.useCallback)(
+    (value) => {
+      if (controlledSearchValue === void 0) {
+        setInternalSearchValue(value);
+      }
+      onSearch?.(value);
+      if (!value) {
+        filterNodes(null);
+        return;
+      }
+      const predicate = filterTreeNode ? (node) => filterTreeNode(node, value) : (node) => {
+        const title = String(node.title ?? "");
+        return title.toLowerCase().includes(value.toLowerCase());
+      };
+      filterNodes(predicate);
+      if (autoExpandParent) {
+        const filtered = tree.getFilteredKeys();
+        if (filtered) {
+          setExpandedKeys(filtered);
+        }
+      }
+    },
+    [
+      controlledSearchValue,
+      onSearch,
+      filterTreeNode,
+      filterNodes,
+      autoExpandParent,
+      tree,
+      setExpandedKeys
+    ]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (controlledSearchValue !== void 0 && controlledSearchValue !== internalSearchValue) {
+      handleSearchChange(controlledSearchValue);
+    }
+  }, [controlledSearchValue]);
+  const prevDataRef = (0, import_react6.useRef)(treeData);
+  (0, import_react6.useEffect)(() => {
+    if (prevDataRef.current !== treeData) {
+      prevDataRef.current = treeData;
+      tree.setData(treeData);
+      refresh();
+    }
+  }, [treeData, tree, refresh]);
+  (0, import_react6.useEffect)(() => {
+    if (controlledExpandedKeys !== void 0) setExpandedKeys(controlledExpandedKeys);
+  }, [controlledExpandedKeys, setExpandedKeys]);
+  (0, import_react6.useEffect)(() => {
+    if (controlledCheckedKeys !== void 0) setCheckedKeys(controlledCheckedKeys);
+  }, [controlledCheckedKeys, setCheckedKeys]);
+  (0, import_react6.useEffect)(() => {
+    if (controlledSelectedKeys !== void 0) setSelectedKeys(controlledSelectedKeys);
+  }, [controlledSelectedKeys, setSelectedKeys]);
+  const [internalFocusedKey, setInternalFocusedKey] = (0, import_react6.useState)(null);
+  const focusedKey = controlledFocusedKey ?? internalFocusedKey;
+  const treeRef = (0, import_react6.useRef)(null);
+  const setFocusedKey = (0, import_react6.useCallback)(
+    (key) => {
+      setInternalFocusedKey(key);
+      if (key !== null) onFocusCallback?.(key);
+    },
+    [onFocusCallback]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (autoFocus && flatNodes.length > 0 && focusedKey === null) {
+      setFocusedKey(flatNodes[0].key);
+    }
+  }, []);
+  const [editingKey, setEditingKey] = (0, import_react6.useState)(null);
+  const isNodeEditable = (0, import_react6.useCallback)(
+    (node) => {
+      if (typeof editable === "function") return editable(node);
+      return !!editable;
+    },
+    [editable]
+  );
+  const handleEditStart = (0, import_react6.useCallback)((key) => {
+    setEditingKey(key);
+  }, []);
+  const handleEditConfirm = (0, import_react6.useCallback)(
+    (key, value) => {
+      const node = tree.getNode(key);
+      if (node && onEdit) {
+        onEdit({ key, node, value, oldValue: String(node.title ?? "") });
+      }
+      setEditingKey(null);
+    },
+    [tree, onEdit]
+  );
+  const handleEditCancelInternal = (0, import_react6.useCallback)(
+    (key) => {
+      setEditingKey(null);
+      onEditCancel?.(key);
+    },
+    [onEditCancel]
+  );
+  const [dragKey, setDragKey] = (0, import_react6.useState)(null);
+  const [dropKey, setDropKey] = (0, import_react6.useState)(null);
+  const [dropPosition, setDropPosition] = (0, import_react6.useState)(0);
+  const handleExpand = (0, import_react6.useCallback)(
+    (key) => {
+      toggleExpand(key);
+      const node = tree.getNode(key);
+      if (node && onExpand) {
+        const newState = tree.getState();
+        const expanded = newState.expandedKeys.includes(key);
+        onExpand(newState.expandedKeys, { expanded, node });
+      }
+    },
+    [toggleExpand, tree, onExpand]
+  );
+  const handleCheck = (0, import_react6.useCallback)(
+    (key) => {
+      toggleCheck(key);
+      if (onCheck) {
+        const newState = tree.getState();
+        const node = tree.getNode(key);
+        const checkedNodes = newState.checkedKeys.map((ck) => tree.getNode(ck)).filter(Boolean);
+        onCheck(newState.checkedKeys, {
+          checked: newState.checkedKeys.includes(key),
+          node,
+          checkedNodes,
+          halfCheckedKeys: newState.halfCheckedKeys
+        });
+      }
+    },
+    [toggleCheck, tree, onCheck]
+  );
+  const handleSelect = (0, import_react6.useCallback)(
+    (key) => {
+      select(key, multiple);
+      if (onSelect) {
+        const newState = tree.getState();
+        const node = tree.getNode(key);
+        const selectedNodes = newState.selectedKeys.map((sk) => tree.getNode(sk)).filter(Boolean);
+        onSelect(newState.selectedKeys, {
+          selected: newState.selectedKeys.includes(key),
+          node,
+          selectedNodes
+        });
+      }
+    },
+    [select, multiple, tree, onSelect]
+  );
+  const handleLoadData = (0, import_react6.useCallback)(
+    (node) => {
+      if (!loadData) return;
+      const key = node.key;
+      if (treeState.loadedKeys.includes(key) || treeState.loadingKeys.includes(key)) return;
+      markLoading(key);
+      loadData(node).then(() => {
+        markLoaded(key);
+      });
+    },
+    [loadData, treeState.loadedKeys, treeState.loadingKeys, markLoading, markLoaded]
+  );
+  const handleDragStart = (0, import_react6.useCallback)(
+    (e, key) => {
+      setDragKey(key);
+      e.dataTransfer.effectAllowed = "move";
+      const node = tree.getNode(key);
+      if (node) onDragStart?.({ event: e, node });
+    },
+    [tree, onDragStart]
+  );
+  const handleDragOver = (0, import_react6.useCallback)(
+    (e, key) => {
+      e.preventDefault();
+      setDropKey(key);
+      const rect = e.currentTarget.getBoundingClientRect();
+      const y = e.clientY - rect.top;
+      const h = rect.height;
+      let pos = 0;
+      if (y < h * 0.25) pos = -1;
+      else if (y > h * 0.75) pos = 1;
+      setDropPosition(pos);
+      const node = tree.getNode(key);
+      if (node) onDragOver?.({ event: e, node });
+    },
+    [tree, onDragOver]
+  );
+  const handleDragLeave = (0, import_react6.useCallback)(
+    (e, key) => {
+      setDropKey(null);
+      const node = tree.getNode(key);
+      if (node) onDragLeave?.({ event: e, node });
+    },
+    [tree, onDragLeave]
+  );
+  const handleDragEnd = (0, import_react6.useCallback)(
+    (e, key) => {
+      setDragKey(null);
+      setDropKey(null);
+      const node = tree.getNode(key);
+      if (node) onDragEnd?.({ event: e, node });
+    },
+    [tree, onDragEnd]
+  );
+  const handleDrop = (0, import_react6.useCallback)(
+    (e, key) => {
+      e.preventDefault();
+      if (dragKey === null || dragKey === key) {
+        setDragKey(null);
+        setDropKey(null);
+        return;
+      }
+      const dragNode = tree.getNode(dragKey);
+      const dropNode = tree.getNode(key);
+      if (!dragNode || !dropNode) return;
+      if (allowDrop && !allowDrop({ dragNode, dropNode, dropPosition })) {
+        setDragKey(null);
+        setDropKey(null);
+        return;
+      }
+      moveNode(dragKey, key, dropPosition);
+      if (onDrop) {
+        onDrop({ event: e, node: dropNode, dragNode, dropPosition });
+      }
+      setDragKey(null);
+      setDropKey(null);
+    },
+    [dragKey, dropPosition, tree, allowDrop, moveNode, onDrop]
+  );
+  const handleRightClick = (0, import_react6.useCallback)(
+    (e, node) => {
+      onRightClick?.({ event: e, node });
+    },
+    [onRightClick]
+  );
+  const isDraggable = (node) => {
+    if (typeof draggable === "function") return draggable(node);
+    return !!draggable;
+  };
+  const containerRef = (0, import_react6.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react6.useState)(0);
+  const itemHeight = NODE_HEIGHT;
+  const scrollToFocused = (0, import_react6.useCallback)(
+    (key) => {
+      const index = flatNodes.findIndex((item) => item.key === key);
+      if (index === -1) return;
+      const el = containerRef.current ?? treeRef.current;
+      if (!el) return;
+      const targetTop = index * itemHeight;
+      const { scrollTop: st, clientHeight: ch } = el;
+      if (targetTop < st) {
+        el.scrollTop = targetTop;
+      } else if (targetTop + itemHeight > st + ch) {
+        el.scrollTop = targetTop + itemHeight - ch;
+      }
+    },
+    [flatNodes, itemHeight]
+  );
+  const handleKeyDown = (0, import_react6.useCallback)(
+    (e) => {
+      if (!keyboard || disabled || editingKey !== null) return;
+      const currentIndex = flatNodes.findIndex((item) => item.key === focusedKey);
+      if (currentIndex === -1 && flatNodes.length === 0) return;
+      const focusNode = (index) => {
+        if (index >= 0 && index < flatNodes.length) {
+          setFocusedKey(flatNodes[index].key);
+          scrollToFocused(flatNodes[index].key);
+        }
+      };
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          focusNode(currentIndex === -1 ? 0 : Math.min(currentIndex + 1, flatNodes.length - 1));
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          focusNode(currentIndex === -1 ? 0 : Math.max(currentIndex - 1, 0));
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          if (currentIndex === -1) break;
+          const item = flatNodes[currentIndex];
+          if (!item.isLeaf && !treeState.expandedKeys.includes(item.key)) {
+            handleExpand(item.key);
+          } else if (!item.isLeaf && treeState.expandedKeys.includes(item.key)) {
+            focusNode(currentIndex + 1);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          if (currentIndex === -1) break;
+          const item = flatNodes[currentIndex];
+          if (!item.isLeaf && treeState.expandedKeys.includes(item.key)) {
+            handleExpand(item.key);
+          } else if (item.parentKey !== null) {
+            const parentIndex = flatNodes.findIndex((n) => n.key === item.parentKey);
+            if (parentIndex !== -1) focusNode(parentIndex);
+          }
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          focusNode(0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          focusNode(flatNodes.length - 1);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          if (currentIndex === -1) break;
+          const item = flatNodes[currentIndex];
+          if (selectable) handleSelect(item.key);
+          break;
+        }
+        case " ": {
+          e.preventDefault();
+          if (currentIndex === -1) break;
+          const item = flatNodes[currentIndex];
+          if (checkable) handleCheck(item.key);
+          else if (!item.isLeaf) handleExpand(item.key);
+          break;
+        }
+        case "*": {
+          e.preventDefault();
+          expandAll();
+          break;
+        }
+        case "F2": {
+          e.preventDefault();
+          if (currentIndex === -1) break;
+          const item = flatNodes[currentIndex];
+          if (isNodeEditable(item.node)) {
+            handleEditStart(item.key);
+          }
+          break;
+        }
+      }
+    },
+    [
+      keyboard,
+      disabled,
+      editingKey,
+      flatNodes,
+      focusedKey,
+      treeState.expandedKeys,
+      handleExpand,
+      handleCheck,
+      handleSelect,
+      expandAll,
+      setFocusedKey,
+      checkable,
+      selectable,
+      scrollToFocused,
+      isNodeEditable,
+      handleEditStart
+    ]
+  );
+  const handleScroll = (0, import_react6.useCallback)(() => {
+    if (containerRef.current) {
+      setScrollTop(containerRef.current.scrollTop);
+    }
+  }, []);
+  const useVirtual = virtual && height !== void 0 && flatNodes.length > 50;
+  const VIRTUAL_OVERSCAN = 5;
+  const visibleSlice = (0, import_react6.useMemo)(() => {
+    if (!useVirtual || !height) {
+      return { nodes: flatNodes, startIndex: 0 };
+    }
+    const rawStart = Math.floor(scrollTop / itemHeight);
+    const startIndex = Math.max(0, rawStart - VIRTUAL_OVERSCAN);
+    const visibleCount = Math.ceil(height / itemHeight) + VIRTUAL_OVERSCAN * 2;
+    const endIndex = Math.min(flatNodes.length, startIndex + visibleCount);
+    return { nodes: flatNodes.slice(startIndex, endIndex), startIndex };
+  }, [flatNodes, useVirtual, height, scrollTop, itemHeight]);
+  const visibleNodes = visibleSlice.nodes;
+  const virtualOffset = visibleSlice.startIndex * itemHeight;
+  const totalHeight = flatNodes.length * itemHeight;
+  const virtualBottomPad = Math.max(
+    0,
+    totalHeight - virtualOffset - visibleNodes.length * itemHeight
+  );
+  (0, import_react6.useEffect)(() => {
+    if (scrollToKey !== void 0) {
+      const index = flatNodes.findIndex((item) => item.key === scrollToKey);
+      if (index !== -1) {
+        scrollToFocused(scrollToKey);
+        setFocusedKey(scrollToKey);
+      }
+    }
+  }, [scrollToKey]);
+  const handleExpandAll = (0, import_react6.useCallback)(() => {
+    expandAll();
+    if (onExpand) onExpand(tree.getState().expandedKeys, { expanded: true, node: treeData[0] });
+  }, [expandAll, onExpand, tree, treeData]);
+  const handleCollapseAll = (0, import_react6.useCallback)(() => {
+    collapseAll();
+    if (onExpand) onExpand([], { expanded: false, node: treeData[0] });
+  }, [collapseAll, onExpand, treeData]);
+  const handleCheckAll = (0, import_react6.useCallback)(() => {
+    const allKeys = tree.getAllKeys();
+    setCheckedKeys(allKeys);
+    if (onCheck) {
+      const allNodes = allKeys.map((k) => tree.getNode(k)).filter(Boolean);
+      onCheck(allKeys, {
+        checked: true,
+        node: allNodes[0],
+        checkedNodes: allNodes,
+        halfCheckedKeys: []
+      });
+    }
+  }, [tree, setCheckedKeys, onCheck]);
+  const handleUncheckAll = (0, import_react6.useCallback)(() => {
+    setCheckedKeys([]);
+    if (onCheck) {
+      onCheck([], { checked: false, node: treeData[0], checkedNodes: [], halfCheckedKeys: [] });
+    }
+  }, [setCheckedKeys, onCheck, treeData]);
+  const siblingsMap = (0, import_react6.useMemo)(() => {
+    if (!isShowLine) return null;
+    const map = /* @__PURE__ */ new Map();
+    function walk(list, depth, parentIsLast) {
+      for (let i = 0; i < list.length; i++) {
+        const node = list[i];
+        const key = node.key;
+        const isLast = i === list.length - 1;
+        map.set(key, { isLast, parentIsLast: [...parentIsLast] });
+        const children = node.children;
+        if (children && children.length > 0) {
+          walk(children, depth + 1, [...parentIsLast, isLast]);
+        }
+      }
+    }
+    walk(treeData, 0, []);
+    return map;
+  }, [treeData, isShowLine]);
+  const renderNode = (item) => {
+    const lineInfo = siblingsMap?.get(item.key);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      TreeNodeRow,
+      {
+        node: item.node,
+        nodeKey: item.key,
+        depth: item.depth,
+        isLeaf: item.isLeaf,
+        indentSize,
+        expanded: treeState.expandedKeys.includes(item.key),
+        checked: treeState.checkedKeys.includes(item.key),
+        halfChecked: treeState.halfCheckedKeys.includes(item.key),
+        selected: treeState.selectedKeys.includes(item.key),
+        loading: treeState.loadingKeys.includes(item.key),
+        disabled: disabled || !!item.node.disabled,
+        focused: focusedKey === item.key,
+        checkable,
+        selectable,
+        showLine: isShowLine,
+        showLeafIcon: showLineConfig.showLeafIcon ?? false,
+        showIcon: showIcon || directory,
+        blockNode,
+        directory,
+        animated,
+        globalIcon,
+        nodeIcon: item.node.icon,
+        switcherIcon,
+        draggable: isDraggable(item.node),
+        dropPosition: dropKey === item.key ? dropPosition : null,
+        dragKey,
+        t,
+        onExpand: handleExpand,
+        onCheck: handleCheck,
+        onSelect: handleSelect,
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDragEnd: handleDragEnd,
+        onDrop: handleDrop,
+        onRightClick: onRightClick ? handleRightClick : void 0,
+        onLoadData: loadData ? handleLoadData : void 0,
+        nodeClassName: item.node.className,
+        nodeStyle: item.node.style,
+        titleRender,
+        searchValue: highlightSearch ? searchValue : "",
+        editable: isNodeEditable(item.node),
+        editing: editingKey === item.key,
+        onEditStart: handleEditStart,
+        onEditConfirm: handleEditConfirm,
+        onEditCancel: handleEditCancelInternal,
+        actions,
+        status: nodeStatus?.(item.node) ?? "default",
+        lineIsLast: lineInfo?.isLast ?? false,
+        lineParentIsLast: lineInfo?.parentIsLast ?? [],
+        onFocusNode: setFocusedKey
+      },
+      item.key
+    );
+  };
+  if (unstyled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        ref: treeRef,
+        className,
+        style,
+        role: "tree",
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        children: flatNodes.map((item) => renderNode(item))
+      }
+    );
+  }
+  const wrapperCls = [
+    "sg-tree",
+    isShowLine ? "sg-tree-show-line" : "",
+    blockNode ? "sg-tree-block-node" : "",
+    directory ? "sg-tree-directory" : "",
+    disabled ? "sg-tree-disabled" : "",
+    animated ? "sg-tree-animated" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const renderSearch = () => {
+    if (!showSearch) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "sg-tree-search", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          className: "sg-tree-search-input",
+          type: "text",
+          value: searchValue,
+          onChange: (e) => handleSearchChange(e.target.value),
+          placeholder: t.searchPlaceholder,
+          "aria-label": t.searchPlaceholder
+        }
+      ),
+      searchValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          className: "sg-tree-search-clear",
+          onClick: () => handleSearchChange(""),
+          "aria-label": t.clearSearch,
+          type: "button",
+          children: "\xD7"
+        }
+      )
+    ] });
+  };
+  const renderToolbar = () => {
+    if (!showToolbar) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "sg-tree-toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "sg-tree-toolbar-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "sg-tree-toolbar-btn",
+            onClick: handleExpandAll,
+            title: t.expandAllText,
+            type: "button",
+            children: "\u229E"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "sg-tree-toolbar-btn",
+            onClick: handleCollapseAll,
+            title: t.collapseAllText,
+            type: "button",
+            children: "\u229F"
+          }
+        ),
+        checkable && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sg-tree-toolbar-divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              className: "sg-tree-toolbar-btn",
+              onClick: handleCheckAll,
+              title: t.checkAllText,
+              type: "button",
+              children: "\u2611"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              className: "sg-tree-toolbar-btn",
+              onClick: handleUncheckAll,
+              title: t.uncheckAllText,
+              type: "button",
+              children: "\u2610"
+            }
+          )
+        ] })
+      ] }),
+      toolbarExtra && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "sg-tree-toolbar-extra", children: toolbarExtra })
+    ] });
+  };
+  const renderNodes = (list) => list.map((item) => renderNode(item));
+  if (flatNodes.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: wrapperCls, style, role: "tree", children: [
+      renderSearch(),
+      renderToolbar(),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "sg-tree-empty", children: t.emptyText })
+    ] });
+  }
+  if (useVirtual && height) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: wrapperCls, style, children: [
+      renderSearch(),
+      renderToolbar(),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          ref: containerRef,
+          className: "sg-tree-virtual-container",
+          style: { height, overflow: "auto" },
+          onScroll: handleScroll,
+          onKeyDown: handleKeyDown,
+          role: "tree",
+          tabIndex: 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              style: {
+                paddingTop: virtualOffset,
+                paddingBottom: virtualBottomPad,
+                boxSizing: "border-box"
+              },
+              children: renderNodes(visibleNodes)
+            }
+          )
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ref: treeRef,
+      className: wrapperCls,
+      style,
+      role: "tree",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      children: [
+        renderSearch(),
+        renderToolbar(),
+        renderNodes(visibleNodes)
+      ]
+    }
+  );
+}
+
+// src/components/complex/TreeSelect/TreeSelect.tsx
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function toArray(val) {
+  if (val === void 0) return [];
+  return Array.isArray(val) ? val : [val];
+}
+function collectAllKeys(nodes) {
+  const keys = [];
+  const walk = (list) => {
+    for (const n of list) {
+      keys.push(n.key);
+      if (n.children) walk(n.children);
+    }
+  };
+  walk(nodes);
+  return keys;
+}
+function findNode(nodes, key) {
+  for (const n of nodes) {
+    if (n.key === key) return n;
+    if (n.children) {
+      const found = findNode(n.children, key);
+      if (found) return found;
+    }
+  }
+  return void 0;
+}
+function getNodeLabel(node) {
+  if (!node) return "";
+  return node.title ?? String(node.key);
+}
+function filterTreeKeepMatches(nodes, predicate) {
+  const result = [];
+  for (const node of nodes) {
+    const childResult = node.children ? filterTreeKeepMatches(node.children, predicate) : [];
+    if (predicate(node) || childResult.length > 0) {
+      result.push({
+        ...node,
+        children: childResult.length > 0 ? childResult : void 0
+      });
+    }
+  }
+  return result;
+}
+function getParentKeys(nodes, targetKey) {
+  const parents = [];
+  const walk = (list, path) => {
+    for (const n of list) {
+      if (n.key === targetKey) {
+        parents.push(...path);
+        return true;
+      }
+      if (n.children && walk(n.children, [...path, n.key])) return true;
+    }
+    return false;
+  };
+  walk(nodes, []);
+  return parents;
+}
+function applyStrategy(checkedKeys, treeData, strategy) {
+  if (strategy === "SHOW_ALL") return checkedKeys;
+  const checkedSet = new Set(checkedKeys);
+  if (strategy === "SHOW_CHILD") {
+    return checkedKeys.filter((key) => {
+      const node = findNode(treeData, key);
+      return !node?.children || node.children.length === 0;
+    });
+  }
+  if (strategy === "SHOW_PARENT") {
+    return checkedKeys.filter((key) => {
+      const parentKeys = getParentKeys(treeData, key);
+      return !parentKeys.some((pk) => checkedSet.has(pk));
+    });
+  }
+  return checkedKeys;
+}
+function TreeSelect(props) {
+  const {
+    treeData,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    fieldNames,
+    multiple = false,
+    treeCheckable = false,
+    treeCheckStrictly = false,
+    treeDefaultExpandAll = false,
+    treeDefaultExpandedKeys,
+    showSearch = false,
+    filterTreeNode,
+    placeholder = "Please select",
+    allowClear = false,
+    disabled = false,
+    size = "middle",
+    maxTagCount,
+    dropdownStyle,
+    treeLine = false,
+    showCheckedStrategy = "SHOW_ALL",
+    onSearch,
+    className,
+    style,
+    unstyled
+  } = props;
+  const treeSelectLocale = useConfig().locale?.treeSelect;
+  const searchPlaceholder = treeSelectLocale?.searchPlaceholder ?? "Search...";
+  const noMatchesText = treeSelectLocale?.noMatches ?? "No matches";
+  const isMultiple = multiple || treeCheckable;
+  const [internalValue, setInternalValue] = (0, import_react7.useState)(
+    () => toArray(controlledValue ?? defaultValue)
+  );
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react7.useState)("");
+  const wrapperRef = (0, import_react7.useRef)(null);
+  const searchRef = (0, import_react7.useRef)(null);
+  const currentValue = (0, import_react7.useMemo)(
+    () => toArray(controlledValue ?? internalValue),
+    [controlledValue, internalValue]
+  );
+  (0, import_react7.useEffect)(() => {
+    if (controlledValue !== void 0) {
+      setInternalValue(toArray(controlledValue));
+    }
+  }, [controlledValue]);
+  (0, import_react7.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+        setSearchValue("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    if (open && showSearch && searchRef.current) {
+      searchRef.current.focus();
+    }
+  }, [open, showSearch]);
+  const defaultFilter = (0, import_react7.useCallback)((input, node) => {
+    const title = String(node.title ?? node.key).toLowerCase();
+    return title.includes(input.toLowerCase());
+  }, []);
+  const filterFn = filterTreeNode ?? defaultFilter;
+  const filteredTreeData = (0, import_react7.useMemo)(() => {
+    if (!searchValue) return treeData;
+    return filterTreeKeepMatches(treeData, (node) => filterFn(searchValue, node));
+  }, [treeData, searchValue, filterFn]);
+  const filteredExpandedKeys = (0, import_react7.useMemo)(() => {
+    if (!searchValue) return void 0;
+    return collectAllKeys(filteredTreeData);
+  }, [searchValue, filteredTreeData]);
+  const fireChange = (0, import_react7.useCallback)(
+    (keys, triggerNode) => {
+      setInternalValue(keys);
+      const labels = keys.map((k) => getNodeLabel(findNode(treeData, k)));
+      if (onChange) {
+        const result = isMultiple ? keys : keys[0];
+        onChange(result, labels, { triggerNode });
+      }
+    },
+    [treeData, onChange, isMultiple]
+  );
+  const handleTreeSelect = (0, import_react7.useCallback)(
+    (_selectedKeys, info) => {
+      if (treeCheckable) return;
+      const node = info.node;
+      if (isMultiple) {
+        const newKeys = info.selected ? [...currentValue, node.key] : currentValue.filter((k) => k !== node.key);
+        fireChange(newKeys, node);
+      } else {
+        fireChange([node.key], node);
+        setOpen(false);
+        setSearchValue("");
+      }
+    },
+    [treeCheckable, isMultiple, currentValue, fireChange]
+  );
+  const handleTreeCheck = (0, import_react7.useCallback)(
+    (checkedKeys, info) => {
+      const displayed = applyStrategy(checkedKeys, treeData, showCheckedStrategy);
+      fireChange(displayed, info.node);
+    },
+    [treeData, showCheckedStrategy, fireChange]
+  );
+  const handleRemoveTag = (0, import_react7.useCallback)(
+    (key, e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      const node = findNode(treeData, key) ?? { key };
+      const newKeys = currentValue.filter((k) => k !== key);
+      fireChange(newKeys, node);
+    },
+    [disabled, treeData, currentValue, fireChange]
+  );
+  const handleClear = (0, import_react7.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      const node = treeData[0] ?? { key: "" };
+      fireChange([], node);
+      setSearchValue("");
+    },
+    [disabled, treeData, fireChange]
+  );
+  const handleSearchChange = (0, import_react7.useCallback)(
+    (e) => {
+      const val = e.target.value;
+      setSearchValue(val);
+      onSearch?.(val);
+    },
+    [onSearch]
+  );
+  const handleTriggerClick = (0, import_react7.useCallback)(() => {
+    if (disabled) return;
+    setOpen((prev) => !prev);
+  }, [disabled]);
+  const displayedValues = (0, import_react7.useMemo)(() => {
+    if (!isMultiple) return currentValue;
+    return applyStrategy(currentValue, treeData, showCheckedStrategy);
+  }, [isMultiple, currentValue, treeData, showCheckedStrategy]);
+  const treeCheckedKeys = (0, import_react7.useMemo)(() => {
+    if (!treeCheckable) return void 0;
+    return currentValue;
+  }, [treeCheckable, currentValue]);
+  const treeSelectedKeys = (0, import_react7.useMemo)(() => {
+    if (treeCheckable) return void 0;
+    return currentValue;
+  }, [treeCheckable, currentValue]);
+  if (unstyled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: wrapperRef, className, style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: handleTriggerClick, children: [
+        displayedValues.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: placeholder }),
+        !isMultiple && displayedValues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: getNodeLabel(findNode(treeData, displayedValues[0])) }),
+        isMultiple && displayedValues.map((key) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          getNodeLabel(findNode(treeData, key)),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { onClick: (e) => handleRemoveTag(key, e), children: "\xD7" })
+        ] }, String(key)))
+      ] }),
+      open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+        showSearch && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            ref: searchRef,
+            value: searchValue,
+            onChange: handleSearchChange,
+            placeholder: searchPlaceholder
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Tree,
+          {
+            treeData: filteredTreeData,
+            fieldNames,
+            checkable: treeCheckable,
+            checkStrictly: treeCheckStrictly,
+            checkedKeys: treeCheckedKeys,
+            selectedKeys: treeSelectedKeys,
+            multiple: isMultiple,
+            defaultExpandAll: treeDefaultExpandAll,
+            defaultExpandedKeys: treeDefaultExpandedKeys,
+            expandedKeys: filteredExpandedKeys,
+            showLine: treeLine,
+            onSelect: handleTreeSelect,
+            onCheck: handleTreeCheck,
+            unstyled: true
+          }
+        )
+      ] })
+    ] });
+  }
+  const wrapperCls = [
+    "sg-treeselect",
+    `sg-treeselect-${size}`,
+    open ? "sg-treeselect-open" : "",
+    disabled ? "sg-treeselect-disabled" : "",
+    isMultiple ? "sg-treeselect-multiple" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const visibleTags = maxTagCount !== void 0 && isMultiple ? displayedValues.slice(0, maxTagCount) : displayedValues;
+  const hiddenCount = maxTagCount !== void 0 && isMultiple ? Math.max(0, displayedValues.length - maxTagCount) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: wrapperCls, style, ref: wrapperRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "sg-treeselect-selector", onClick: handleTriggerClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "sg-treeselect-selection-wrap", children: [
+        displayedValues.length === 0 && !searchValue && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sg-treeselect-placeholder", children: placeholder }),
+        !isMultiple && displayedValues.length > 0 && !searchValue && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sg-treeselect-selection-item", children: getNodeLabel(findNode(treeData, displayedValues[0])) }),
+        isMultiple && visibleTags.map((key) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "sg-treeselect-tag", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sg-treeselect-tag-label", children: getNodeLabel(findNode(treeData, key)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sg-treeselect-tag-close", onClick: (e) => handleRemoveTag(key, e), children: "\xD7" })
+        ] }, String(key))),
+        hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "sg-treeselect-tag sg-treeselect-tag-rest", children: [
+          "+",
+          hiddenCount,
+          "..."
+        ] }),
+        showSearch && open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            ref: searchRef,
+            className: "sg-treeselect-search-input",
+            value: searchValue,
+            onChange: handleSearchChange,
+            placeholder: displayedValues.length === 0 ? "" : ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "sg-treeselect-actions", children: [
+        allowClear && displayedValues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sg-treeselect-clear", onClick: handleClear, children: "\xD7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sg-treeselect-arrow", children: open ? "\u25B2" : "\u25BC" })
+      ] })
+    ] }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sg-treeselect-dropdown", style: dropdownStyle, children: filteredTreeData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sg-treeselect-empty", children: noMatchesText }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Tree,
+      {
+        treeData: filteredTreeData,
+        fieldNames,
+        checkable: treeCheckable,
+        checkStrictly: treeCheckStrictly,
+        checkedKeys: treeCheckedKeys,
+        selectedKeys: treeSelectedKeys,
+        multiple: isMultiple,
+        defaultExpandAll: treeDefaultExpandAll,
+        defaultExpandedKeys: treeDefaultExpandedKeys,
+        expandedKeys: filteredExpandedKeys,
+        showLine: treeLine,
+        onSelect: handleTreeSelect,
+        onCheck: handleTreeCheck
+      }
+    ) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tree,
+  TreeSelect,
+  useTree
+});
+//# sourceMappingURL=tree.cjs.map