@canvas-components/react-components 0.3.8 → 0.3.10

package/dist/index.cjs

@@ -495,9 +495,13 @@ function ReactPopup(props) {
         )
       }
     ),
-    document.body
+    resolvePopupContainer(anchorRef?.current)
   );
 }
+function resolvePopupContainer(anchor) {
+  const fullscreenElement = document.fullscreenElement;
+  return fullscreenElement instanceof HTMLElement && (!anchor || fullscreenElement.contains(anchor)) ? fullscreenElement : document.body;
+}
 function resolvePopupPosition(params) {
   const {
     anchor,
@@ -7260,8 +7264,84 @@ function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 
+// src/components/cascader/cascader-selection.ts
+function createCascaderSelection(options) {
+  const entries = /* @__PURE__ */ new Map();
+  const visit = (items, parents, disabled = false) => items.map((item) => {
+    const nodes = [...parents, item];
+    const path = nodes.map((node) => node.value);
+    const key = JSON.stringify(path);
+    const entry = {
+      path,
+      children: [],
+      leaves: [],
+      disabled: disabled || !!item.disabled
+    };
+    entries.set(key, entry);
+    entry.children = visit(item.children ?? [], nodes, entry.disabled);
+    entry.leaves = entry.disabled ? [] : entry.children.length ? entry.children.flatMap((child) => child.leaves) : [key];
+    return entry;
+  });
+  const roots = visit(options, []);
+  const expand = (value) => {
+    const checked = /* @__PURE__ */ new Set();
+    const preserved = /* @__PURE__ */ new Map();
+    for (const path of value) {
+      const key = JSON.stringify(path);
+      const entry = entries.get(key);
+      if (!entry || entry.disabled || !entry.leaves.length)
+        preserved.set(key, path);
+      else entry.leaves.forEach((leaf) => checked.add(leaf));
+    }
+    return { checked, preserved };
+  };
+  const state = (entry, checked) => {
+    const count = entry?.leaves.filter((leaf) => checked.has(leaf)).length ?? 0;
+    return {
+      checked: count > 0 && count === entry?.leaves.length,
+      indeterminate: count > 0 && count < (entry?.leaves.length ?? 0)
+    };
+  };
+  const collect = (checked, preserved, strategy) => {
+    const paths = [];
+    const walk = (entry) => {
+      if (entry.disabled) return;
+      if (state(entry, checked).checked && (strategy === "SHOW_PARENT" || !entry.children.length))
+        paths.push(entry.path);
+      else entry.children.forEach(walk);
+    };
+    roots.forEach(walk);
+    return [...paths, ...preserved.values()];
+  };
+  return {
+    /** 归一化回填值，去重并应用父级/末级策略。 */
+    normalize(value, strategy) {
+      const { checked, preserved } = expand(value);
+      return collect(checked, preserved, strategy);
+    },
+    /** 计算某一路径的全选和半选状态。 */
+    getState(value, path) {
+      const { checked, preserved } = expand(value);
+      if (preserved.has(JSON.stringify(path)))
+        return { checked: true, indeterminate: false };
+      return state(entries.get(JSON.stringify(path)), checked);
+    },
+    /** 切换某个节点以及全部可用后代，不修改入参。 */
+    toggle(value, path, strategy) {
+      const entry = entries.get(JSON.stringify(path));
+      if (!entry || entry.disabled || !entry.leaves.length) return value;
+      const { checked, preserved } = expand(value);
+      const remove = state(entry, checked).checked;
+      entry.leaves.forEach(
+        (leaf) => remove ? checked.delete(leaf) : checked.add(leaf)
+      );
+      return collect(checked, preserved, strategy);
+    }
+  };
+}
+
 // src/components/cascader/style.css
-styleInject('@import "../../styles/variables.css";\n.canvas-react-cascader {\n  width: 100%;\n  min-width: 0;\n}\n.canvas-react-cascader > .canvas-react-input-affix-wrapper {\n  width: 100%;\n}\n.canvas-react-cascader-menus {\n  display: flex;\n  max-width: calc(100vw - 24px);\n  overflow: auto;\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n}\n.canvas-react-cascader-menu {\n  flex: 0 0 auto;\n  min-width: 120px;\n  max-width: 320px;\n  max-height: min(256px, calc(100vh - 48px));\n  overflow: auto;\n  padding: 4px;\n}\n.canvas-react-cascader-menu + .canvas-react-cascader-menu {\n  border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-cascader-option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  padding: 5px 10px;\n  line-height: 22px;\n  border-radius: var(--canvas-react-radius-sm);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.canvas-react-cascader-option[aria-selected=true] {\n  color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-cascader-option[data-active=true] {\n  background: var(--canvas-react-color-bg-hover, #f5f5f5);\n}\n.canvas-react-cascader-option[aria-disabled=true] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.canvas-react-cascader-empty {\n  padding: 8px 10px;\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-cascader-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.canvas-react-cascader-option:not([aria-disabled=true]):hover .canvas-react-cascader-chevron,\n.canvas-react-cascader-option[aria-selected=true] .canvas-react-cascader-chevron {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n');
+styleInject('@import "../../styles/variables.css";\n.canvas-react-cascader {\n  width: 100%;\n  min-width: 0;\n}\n.canvas-react-cascader > .canvas-react-input-affix-wrapper {\n  width: 100%;\n}\n.canvas-react-cascader-menus {\n  display: flex;\n  max-width: calc(100vw - 24px);\n  overflow: auto;\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n}\n.canvas-react-cascader-menu {\n  flex: 0 0 auto;\n  min-width: 120px;\n  max-width: 320px;\n  max-height: min(256px, calc(100vh - 48px));\n  overflow: auto;\n  padding: 4px;\n}\n.canvas-react-cascader-menu + .canvas-react-cascader-menu {\n  border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-cascader-option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  padding: 5px 10px;\n  line-height: 22px;\n  border-radius: var(--canvas-react-radius-sm);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.canvas-react-cascader-check {\n  display: inline-flex;\n  flex: 0 0 auto;\n  margin-right: -12px;\n}\n.canvas-react-cascader-check > * {\n  pointer-events: none;\n}\n.canvas-react-cascader-option > span:not(.canvas-react-cascader-check):not(.canvas-react-cascader-chevron) {\n  flex: 1;\n}\n.canvas-react-cascader-option[aria-selected=true] {\n  color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-cascader-option[data-active=true] {\n  background: var(--canvas-react-color-bg-hover, #f5f5f5);\n}\n.canvas-react-cascader-option[aria-disabled=true] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.canvas-react-cascader-empty {\n  padding: 8px 10px;\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-cascader-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.canvas-react-cascader-option:not([aria-disabled=true]):hover .canvas-react-cascader-chevron,\n.canvas-react-cascader-option[data-expanded=true] .canvas-react-cascader-chevron {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n');
 function resolvePath(options, value) {
   const path = [];
   for (const part of value) {
@@ -7279,6 +7359,8 @@ function ReactCascader(props) {
     value = EMPTY_VALUE,
     options = EMPTY_OPTIONS,
     showSearch = false,
+    multiple = false,
+    showCheckedStrategy = "SHOW_PARENT",
     changeOnSelect = false,
     expandTrigger = "click",
     displayRender,
@@ -7296,7 +7378,13 @@ function ReactCascader(props) {
   const inputRef = React.useRef(null);
   const popupRef = React.useRef(null);
   const popupId = React.useId();
-  const selected = React.useMemo(() => resolvePath(options, value), [options, value]);
+  const selection = React.useMemo(() => createCascaderSelection(options), [options]);
+  const singleValue = multiple ? EMPTY_VALUE : value;
+  const multipleValue = multiple ? value.filter(Array.isArray) : [];
+  const selected = React.useMemo(
+    () => resolvePath(options, singleValue),
+    [options, singleValue]
+  );
   const [path, setPath] = React.useState(selected);
   const [open, setOpen] = React.useState(false);
   const [keyword, setKeyword] = React.useState("");
@@ -7306,10 +7394,14 @@ function ReactCascader(props) {
   React.useEffect(() => {
     setPath(selected);
   }, [selected]);
-  const labels = value.map(
-    (part, index) => selected[index]?.label ?? String(part)
-  );
-  const text = displayRender?.(labels, selected) ?? labels.join(" / ");
+  const displayPath = (valuePath) => {
+    const nodes = resolvePath(options, valuePath);
+    const labels = valuePath.map(
+      (part, index) => nodes[index]?.label ?? String(part)
+    );
+    return displayRender?.(labels, nodes) ?? labels.join(" / ");
+  };
+  const text = multiple ? selection.normalize(multipleValue, showCheckedStrategy).map(displayPath).join("\uFF1B") : displayPath(singleValue);
   const columns = [options];
   for (const item of path) {
     if (!item.children?.length) break;
@@ -7323,21 +7415,37 @@ function ReactCascader(props) {
       for (const item of items) {
         if (item.disabled) continue;
         const next = [...parents, item];
-        if ((!item.children?.length || changeOnSelect) && next.map((part) => part.label).join(" / ").toLocaleLowerCase().includes(keyword.trim().toLocaleLowerCase()))
+        if ((!item.children?.length || changeOnSelect || multiple) && next.map((part) => part.label).join(" / ").toLocaleLowerCase().includes(keyword.trim().toLocaleLowerCase()))
           matches.push(next);
         if (item.children?.length) visit(item.children, next);
       }
     };
     visit(options, []);
     return matches;
-  }, [options, keyword, changeOnSelect]);
+  }, [options, keyword, changeOnSelect, multiple]);
   React.useEffect(() => {
     popupRef.current?.querySelector("[data-active='true']")?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
   }, [focus, open]);
+  const toggle = (next, trigger) => {
+    const updated = selection.toggle(
+      multipleValue,
+      next.map((item) => item.value),
+      showCheckedStrategy
+    );
+    onChange?.(
+      updated,
+      updated.map((parts) => resolvePath(options, parts)),
+      { trigger, complete: false }
+    );
+  };
   const choose = (next, trigger, fromSearch = false) => {
     const item = next[next.length - 1];
     if (!item || next.some((option) => option.disabled)) return;
     setPath(next);
+    if (multiple) {
+      if (!item.children?.length || fromSearch) toggle(next, trigger);
+      return;
+    }
     const complete = !item.children?.length || fromSearch;
     if (complete || changeOnSelect)
       onChange?.(
@@ -7354,7 +7462,7 @@ function ReactCascader(props) {
   const show = () => {
     if (!interactive) return;
     setOpen(true);
-    setPath(selected);
+    if (!multiple) setPath(selected);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -7406,7 +7514,7 @@ function ReactCascader(props) {
                 setTyping(false);
                 return;
               }
-              if (![
+              if (!(multiple && event.key === " " && (!showSearch || !typing)) && ![
                 "ArrowDown",
                 "ArrowUp",
                 "ArrowRight",
@@ -7439,7 +7547,9 @@ function ReactCascader(props) {
                 const item = items[focus.index];
                 if (!item || item.disabled) return;
                 const next = searching ? results[focus.index] : [...path.slice(0, column), item];
-                if (event.key === "Enter") choose(next, "keyboard", searching);
+                if (multiple && (event.key === "Enter" || event.key === " "))
+                  toggle(next, "keyboard");
+                else if (event.key === "Enter") choose(next, "keyboard", searching);
                 else if (event.key !== "ArrowRight") return;
                 if (!searching && item.children?.length) {
                   setPath(next);
@@ -7536,20 +7646,26 @@ function ReactCascader(props) {
                   "div",
                   {
                     role: "listbox",
+                    "aria-multiselectable": multiple || void 0,
                     "aria-label": searching ? "\u641C\u7D22\u7ED3\u679C" : `\u7B2C ${column + 1} \u7EA7\u9009\u9879`,
                     className: "canvas-react-cascader-menu",
                     children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "canvas-react-cascader-empty", children: "\u6682\u65E0\u6570\u636E" }) : items.map((item, index) => {
                       const next = searching ? results[index] : [...path.slice(0, column), item];
                       const active = focus.column === column && focus.index === index;
+                      const checkedState = multiple ? selection.getState(
+                        multipleValue,
+                        next.map((node) => node.value)
+                      ) : { checked: false, indeterminate: false };
                       return /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
                           id: `${popupId}-${column}-${index}`,
                           role: "option",
-                          "aria-selected": path[column] === item,
+                          "aria-selected": multiple ? checkedState.checked : path[column] === item,
                           "aria-disabled": !!item.disabled,
                           "data-active": active,
                           className: "canvas-react-cascader-option",
+                          "data-expanded": !!item.children?.length && path[column] === item,
                           onMouseDown: (event) => event.preventDefault(),
                           onMouseEnter: () => {
                             if (item.disabled) return;
@@ -7562,6 +7678,32 @@ function ReactCascader(props) {
                             choose(next, "mouse", searching);
                           },
                           children: [
+                            multiple ? /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: "canvas-react-cascader-check",
+                                role: "checkbox",
+                                "aria-checked": checkedState.indeterminate ? "mixed" : checkedState.checked,
+                                "aria-label": `\u9009\u62E9 ${next.map((node) => node.label).join(" / ")}`,
+                                "aria-disabled": !!item.disabled,
+                                onClick: (event) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  if (!item.disabled) toggle(next, "mouse");
+                                },
+                                children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  ReactCheckbox,
+                                  {
+                                    tabIndex: -1,
+                                    "aria-hidden": "true",
+                                    readOnly: true,
+                                    checked: checkedState.checked,
+                                    indeterminate: checkedState.indeterminate,
+                                    disabled: item.disabled
+                                  }
+                                )
+                              }
+                            ) : null,
                             /* @__PURE__ */ jsxRuntime.jsx("span", { children: searching ? next.map((part) => part.label).join(" / ") : item.label }),
                             !searching && item.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                               "span",
@@ -7586,6 +7728,371 @@ function ReactCascader(props) {
     }
   );
 }
+
+// src/components/tree-select/tree-select-utils.ts
+function createTreeSelectIndex(treeData) {
+  const entries = [];
+  const byValue = /* @__PURE__ */ new Map();
+  const visit = (nodes, parents) => {
+    for (const node of nodes) {
+      const entry = {
+        node,
+        key: node.key ?? node.value,
+        parents,
+        depth: parents.length
+      };
+      entries.push(entry);
+      byValue.set(node.value, entry);
+      if (node.children?.length) visit(node.children, [...parents, entry]);
+    }
+  };
+  visit(treeData, []);
+  return { entries, byValue };
+}
+function normalizeTreeSelectValue(value, multiple) {
+  const values = multiple ? Array.isArray(value) ? value : [] : [value];
+  return [
+    ...new Set(
+      values.filter(
+        (part) => typeof part === "string" || typeof part === "number"
+      )
+    )
+  ];
+}
+
+// src/components/tree-select/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-tree-select {\n  width: 100%;\n  min-width: 0;\n}\n.canvas-react-tree-select-tree {\n  max-height: min(280px, calc(100vh - 48px));\n  overflow: auto;\n  padding: 4px;\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n}\n.canvas-react-tree-select-node {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 30px;\n  padding: 2px 10px 2px 6px;\n  box-sizing: border-box;\n  line-height: 22px;\n  border-radius: var(--canvas-react-radius-sm);\n  cursor: pointer;\n}\n.canvas-react-tree-select-node[data-active=true] {\n  background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-tree-select-node[aria-selected=true] {\n  background: var(--canvas-react-color-bg-active);\n  color: var(--canvas-react-color-primary);\n}\n.canvas-react-tree-select-node[aria-disabled=true] .canvas-react-tree-select-title {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.canvas-react-tree-select-switcher {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 18px;\n  width: 18px;\n  height: 24px;\n  border: 0;\n  padding: 0;\n  background: transparent;\n  cursor: pointer;\n}\n.canvas-react-tree-select-chevron {\n  width: 7px;\n  height: 7px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transition: transform 0.18s ease, border-color 0.18s ease;\n  pointer-events: none;\n}\n.canvas-react-tree-select-chevron-open {\n  transform: rotate(135deg);\n  border-color: #6b7280;\n}\n.canvas-react-tree-select-title {\n  flex: 1;\n  white-space: nowrap;\n}\n.canvas-react-tree-select-check {\n  color: var(--canvas-react-color-primary);\n}\n.canvas-react-tree-select-empty {\n  padding: 8px 10px;\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-tree-select:hover .canvas-react-select-clear,\n.canvas-react-tree-select-open .canvas-react-select-clear,\n.canvas-react-tree-select:focus-within .canvas-react-select-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-tree-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-tree-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-tree-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n  opacity: 0;\n}\n');
+var EMPTY_TREE = [];
+function ReactTreeSelect(props) {
+  const {
+    value = null,
+    treeData = EMPTY_TREE,
+    multiple = false,
+    showSearch = multiple,
+    treeDefaultExpandAll = false,
+    treeDefaultExpandedKeys,
+    allowClear = true,
+    onChange,
+    disabled,
+    readOnly,
+    onFocus,
+    onBlur,
+    onClick,
+    onKeyDown,
+    ...inputProps
+  } = props;
+  const index = React.useMemo(() => createTreeSelectIndex(treeData), [treeData]);
+  const selected = React.useMemo(
+    () => normalizeTreeSelectValue(value, multiple),
+    [value, multiple]
+  );
+  const selectedSet = React.useMemo(() => new Set(selected), [selected]);
+  const [expanded, setExpanded] = React.useState(
+    () => /* @__PURE__ */ new Set([
+      ...treeDefaultExpandAll ? index.entries.filter((entry) => entry.node.children?.length).map((entry) => entry.key) : treeDefaultExpandedKeys ?? [],
+      ...selected.flatMap(
+        (part) => index.byValue.get(part)?.parents.map((parent) => parent.key) ?? []
+      )
+    ])
+  );
+  const [open, setOpen] = React.useState(false);
+  const [keyword, setKeyword] = React.useState(null);
+  const [active, setActive] = React.useState(
+    selected[0] ?? null
+  );
+  const anchorRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const treeRef = React.useRef(null);
+  const treeId = React.useId();
+  const interactive = !disabled && !readOnly;
+  const query = (keyword ?? "").trim().toLocaleLowerCase();
+  const text = selected.map((part) => index.byValue.get(part)?.node.title ?? String(part)).join("\uFF1B");
+  const visible = React.useMemo(() => {
+    if (!query)
+      return index.entries.filter(
+        (entry) => entry.parents.every((parent) => expanded.has(parent.key))
+      );
+    const matches = /* @__PURE__ */ new Set();
+    for (const entry of index.entries) {
+      if (!entry.node.title.toLocaleLowerCase().includes(query)) continue;
+      matches.add(entry);
+      entry.parents.forEach((parent) => matches.add(parent));
+    }
+    return index.entries.filter((entry) => matches.has(entry));
+  }, [index, query, expanded]);
+  React.useEffect(() => {
+    setExpanded((previous) => {
+      const next = new Set(previous);
+      selected.forEach(
+        (part) => index.byValue.get(part)?.parents.forEach((parent) => next.add(parent.key))
+      );
+      return next;
+    });
+  }, [index, selected]);
+  React.useEffect(() => {
+    treeRef.current?.querySelector('[data-active="true"]')?.scrollIntoView?.({ block: "nearest" });
+  }, [active, open]);
+  const expand = (entry, next) => {
+    if (!entry.node.children?.length || query) return;
+    setExpanded((previous) => {
+      const keys = new Set(previous);
+      if (next ?? !keys.has(entry.key)) keys.add(entry.key);
+      else keys.delete(entry.key);
+      return keys;
+    });
+  };
+  const choose = (entry, trigger) => {
+    if (entry.node.disabled) return;
+    if (entry.node.selectable === false) {
+      expand(entry);
+      return;
+    }
+    const next = multiple ? selectedSet.has(entry.node.value) ? selected.filter((part) => part !== entry.node.value) : [...selected, entry.node.value] : [entry.node.value];
+    onChange?.(
+      multiple ? next : entry.node.value,
+      next.flatMap((part) => index.byValue.get(part)?.node ?? []),
+      { trigger, complete: !multiple }
+    );
+    if (!multiple) {
+      setOpen(false);
+      setKeyword(null);
+    }
+  };
+  const show = () => {
+    if (interactive) setOpen(true);
+  };
+  const activeIndex = visible.findIndex((entry) => entry.node.value === active);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      className: `canvas-react-tree-select${open && interactive ? " canvas-react-tree-select-open" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ReactInput,
+          {
+            ...inputProps,
+            ref: inputRef,
+            disabled,
+            readOnly: readOnly || !showSearch,
+            allowClear: false,
+            role: "combobox",
+            "aria-haspopup": "tree",
+            "aria-expanded": open && interactive,
+            "aria-controls": open ? treeId : void 0,
+            "aria-activedescendant": open && activeIndex >= 0 ? `${treeId}-${activeIndex}` : void 0,
+            value: open && keyword !== null ? keyword : text,
+            onFocus: (event) => {
+              show();
+              onFocus?.(event);
+            },
+            onClick: (event) => {
+              show();
+              onClick?.(event);
+            },
+            onBlur: (event) => {
+              setOpen(false);
+              setKeyword(null);
+              onBlur?.(event);
+            },
+            onChange: (event) => {
+              setKeyword(event.target.value);
+              setActive(null);
+              show();
+            },
+            onKeyDown: (event) => {
+              onKeyDown?.(event);
+              if (event.defaultPrevented || !interactive) return;
+              if (event.key === "Escape") {
+                event.preventDefault();
+                setOpen(false);
+                setKeyword(null);
+                return;
+              }
+              const space = event.key === " " && (!showSearch || keyword === null);
+              if (!space && ![
+                "ArrowDown",
+                "ArrowUp",
+                "ArrowLeft",
+                "ArrowRight",
+                "Enter",
+                "Home",
+                "End"
+              ].includes(event.key))
+                return;
+              event.preventDefault();
+              show();
+              if (!visible.length) return;
+              const entry = visible[activeIndex];
+              if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                const next = activeIndex < 0 ? event.key === "ArrowDown" ? 0 : visible.length - 1 : (activeIndex + (event.key === "ArrowDown" ? 1 : -1) + visible.length) % visible.length;
+                setActive(visible[next].node.value);
+              } else if (event.key === "Home" || event.key === "End")
+                setActive(
+                  visible[event.key === "Home" ? 0 : visible.length - 1].node.value
+                );
+              else if (entry) {
+                if (event.key === "ArrowRight") {
+                  if (entry.node.children?.length && !expanded.has(entry.key) && !query)
+                    expand(entry, true);
+                  else if (visible[activeIndex + 1]?.depth > entry.depth)
+                    setActive(visible[activeIndex + 1].node.value);
+                } else if (event.key === "ArrowLeft") {
+                  if (expanded.has(entry.key) && !query) expand(entry, false);
+                  else
+                    setActive(
+                      entry.parents[entry.parents.length - 1]?.node.value ?? entry.node.value
+                    );
+                } else choose(entry, "keyboard");
+              }
+            },
+            suffix: /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: `canvas-react-select-actions${allowClear && interactive && selected.length ? " canvas-react-select-actions-clearable" : ""}`,
+                onPointerDown: (event) => {
+                  if (interactive) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                  }
+                },
+                onMouseDown: (event) => {
+                  if (interactive) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                  }
+                },
+                onClick: (event) => {
+                  event.stopPropagation();
+                  if (interactive) {
+                    inputRef.current?.focus({ preventScroll: true });
+                    show();
+                  }
+                },
+                children: [
+                  allowClear && interactive && selected.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: -1,
+                      "aria-label": "\u6E05\u7A7A\u6811\u9009\u62E9",
+                      className: "canvas-react-select-clear",
+                      onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        inputRef.current?.focus({ preventScroll: true });
+                        setKeyword(null);
+                        setActive(null);
+                        setOpen(true);
+                        onChange?.(multiple ? [] : null, [], {
+                          trigger: "clear",
+                          complete: false
+                        });
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "canvas-react-select-clear-icon",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: `canvas-react-select-arrow${open ? " canvas-react-select-arrow-open" : ""}`,
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ReactPopup,
+          {
+            open: open && interactive,
+            anchorRef,
+            onOpenChange: setOpen,
+            matchAnchorWidth: true,
+            constrainHeight: true,
+            surfaceClassName: "canvas-react-tree-select-popup",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: treeRef,
+                id: treeId,
+                role: "tree",
+                "aria-label": "\u6811\u9009\u62E9\u9009\u9879",
+                "aria-multiselectable": multiple || void 0,
+                className: "canvas-react-tree-select-tree",
+                children: visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "canvas-react-tree-select-empty", children: "\u6682\u65E0\u6570\u636E" }) : visible.map((entry, position) => {
+                  const isExpanded = !!query || expanded.has(entry.key);
+                  const hasChildren = !!entry.node.children?.length;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      id: `${treeId}-${position}`,
+                      role: "treeitem",
+                      "aria-level": entry.depth + 1,
+                      "aria-expanded": hasChildren ? isExpanded : void 0,
+                      "aria-selected": selectedSet.has(entry.node.value),
+                      "aria-disabled": !!entry.node.disabled,
+                      "data-active": entry.node.value === active,
+                      className: "canvas-react-tree-select-node",
+                      style: { paddingLeft: 6 + entry.depth * 18 },
+                      onMouseDown: (event) => event.preventDefault(),
+                      onMouseEnter: () => setActive(entry.node.value),
+                      onClick: () => {
+                        setActive(entry.node.value);
+                        choose(entry, "mouse");
+                      },
+                      children: [
+                        hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            tabIndex: -1,
+                            "aria-label": `${isExpanded ? "\u6536\u8D77" : "\u5C55\u5F00"} ${entry.node.title}`,
+                            className: "canvas-react-tree-select-switcher",
+                            onClick: (event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              expand(entry);
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: `canvas-react-tree-select-chevron${isExpanded ? " canvas-react-tree-select-chevron-open" : ""}`,
+                                "aria-hidden": "true"
+                              }
+                            )
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "canvas-react-tree-select-switcher" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "canvas-react-tree-select-title", children: entry.node.title }),
+                        multiple && selectedSet.has(entry.node.value) ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "canvas-react-tree-select-check",
+                            "aria-hidden": "true",
+                            children: "\u2713"
+                          }
+                        ) : null
+                      ]
+                    },
+                    JSON.stringify(entry.node.value)
+                  );
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 var ReactAutoComplete = React.forwardRef(function ReactAutoComplete2(props, ref) {
   const {
     onChange,
@@ -8908,6 +9415,7 @@ exports.ReactTimePicker = ReactTimePicker;
 exports.ReactTimeRangePicker = ReactTimeRangePicker;
 exports.ReactTooltip = ReactTooltip;
 exports.ReactTransition = ReactTransition;
+exports.ReactTreeSelect = ReactTreeSelect;
 exports.ReactVirtualList = ReactVirtualList;
 exports.ReactYearPicker = ReactYearPicker;
 exports.reactMessage = reactMessage;