@canvas-components/react-components 0.3.7 → 0.3.9

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext, useSyncExternalStore, cloneElement, Fragment as Fragment$1 } from 'react';
+import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext, useSyncExternalStore, cloneElement, Fragment as Fragment$1, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -713,7 +713,7 @@ var ReactVirtualList = forwardRef(function ReactVirtualListInner(props, ref) {
 });
 
 // src/components/select/style.css
-styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n}\n.canvas-react-select {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: transparent;\n  box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n  height: 100%;\n  min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n.canvas-react-select-input {\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-select:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n  color: #9ca3af;\n  background: #fafafa;\n  cursor: not-allowed;\n}\n.canvas-react-select-actions {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  min-width: 12px;\n  height: 1em;\n  min-height: 12px;\n  margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.5em;\n  height: 0.5em;\n  min-width: 6px;\n  min-height: 6px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transform: translate(-50%, -58%) rotate(45deg);\n  opacity: 1;\n  transition:\n    opacity 0.18s ease,\n    transform 0.18s ease,\n    border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n  border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n  border-color: #6b7280;\n  transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transform: translate(-50%, -50%) rotate(0deg);\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n  color: #6b7280;\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n  opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-select-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n  transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n  padding: 4px;\n}\n.canvas-react-select-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n  position: relative;\n}\n.canvas-react-select-option {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 11px;\n  border-radius: var(--canvas-react-radius-sm);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n  color: var(--canvas-react-color-primary);\n  font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n  color: inherit;\n}\n.canvas-react-select-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
+styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n}\n.canvas-react-select {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: transparent;\n  box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n  height: 100%;\n  min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n.canvas-react-select-input {\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-select:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n  color: #9ca3af;\n  background: #fafafa;\n  cursor: not-allowed;\n}\n.canvas-react-select-actions {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  min-width: 12px;\n  height: 1em;\n  min-height: 12px;\n  margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.5em;\n  height: 0.5em;\n  min-width: 6px;\n  min-height: 6px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transform: translate(-50%, -58%) rotate(45deg);\n  opacity: 1;\n  transition:\n    opacity 0.18s ease,\n    transform 0.18s ease,\n    border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n  border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n  border-color: #6b7280;\n  transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transform: translate(-50%, -50%) rotate(0deg);\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n  color: #6b7280;\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear,\n.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader:focus-within .canvas-react-select-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n  opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-select-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n  transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n  padding: 4px;\n}\n.canvas-react-select-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n  position: relative;\n}\n.canvas-react-select-option {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 11px;\n  border-radius: var(--canvas-react-radius-sm);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n  color: var(--canvas-react-color-primary);\n  font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n  color: inherit;\n}\n.canvas-react-select-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
 var ReactSelect = forwardRef(
   function ReactSelect2(props, ref) {
     const {
@@ -7238,6 +7238,836 @@ 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-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) {
+    const item = options.find((option) => option.value === part);
+    if (!item) break;
+    path.push(item);
+    options = item.children ?? [];
+  }
+  return path;
+}
+var EMPTY_OPTIONS = [];
+var EMPTY_VALUE = [];
+function ReactCascader(props) {
+  const {
+    value = EMPTY_VALUE,
+    options = EMPTY_OPTIONS,
+    showSearch = false,
+    multiple = false,
+    showCheckedStrategy = "SHOW_PARENT",
+    changeOnSelect = false,
+    expandTrigger = "click",
+    displayRender,
+    onChange,
+    allowClear = true,
+    disabled,
+    readOnly,
+    onFocus,
+    onBlur,
+    onClick,
+    onKeyDown,
+    ...inputProps
+  } = props;
+  const anchorRef = useRef(null);
+  const inputRef = useRef(null);
+  const popupRef = useRef(null);
+  const popupId = useId();
+  const selection = useMemo(() => createCascaderSelection(options), [options]);
+  const singleValue = multiple ? EMPTY_VALUE : value;
+  const multipleValue = multiple ? value.filter(Array.isArray) : [];
+  const selected = useMemo(
+    () => resolvePath(options, singleValue),
+    [options, singleValue]
+  );
+  const [path, setPath] = useState(selected);
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState("");
+  const [typing, setTyping] = useState(false);
+  const [focus, setFocus] = useState({ column: 0, index: -1 });
+  const interactive = !disabled && !readOnly;
+  useEffect(() => {
+    setPath(selected);
+  }, [selected]);
+  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;
+    columns.push(item.children);
+  }
+  const searching = showSearch && keyword.trim().length > 0;
+  const results = useMemo(() => {
+    if (!keyword.trim()) return [];
+    const matches = [];
+    const visit = (items, parents) => {
+      for (const item of items) {
+        if (item.disabled) continue;
+        const next = [...parents, item];
+        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, multiple]);
+  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?.(
+        next.map((option) => option.value),
+        next,
+        { trigger, complete }
+      );
+    if (complete) {
+      setOpen(false);
+      setKeyword("");
+      setTyping(false);
+    }
+  };
+  const show = () => {
+    if (!interactive) return;
+    setOpen(true);
+    if (!multiple) setPath(selected);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      className: `canvas-react-cascader${open && interactive ? " canvas-react-cascader-open" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          ReactInput,
+          {
+            ref: inputRef,
+            ...inputProps,
+            disabled,
+            readOnly: readOnly || !showSearch,
+            allowClear: false,
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": open ? popupId : void 0,
+            "aria-activedescendant": open && focus.index >= 0 ? `${popupId}-${searching ? 0 : focus.column}-${focus.index}` : void 0,
+            value: open && showSearch && typing ? keyword : text,
+            onFocus: (event) => {
+              show();
+              onFocus?.(event);
+            },
+            onClick: (event) => {
+              show();
+              onClick?.(event);
+            },
+            onBlur: (event) => {
+              setOpen(false);
+              setKeyword("");
+              setTyping(false);
+              onBlur?.(event);
+            },
+            onChange: (event) => {
+              setTyping(true);
+              setKeyword(event.target.value);
+              setOpen(true);
+              setFocus({ column: 0, index: -1 });
+            },
+            onKeyDown: (event) => {
+              onKeyDown?.(event);
+              if (event.defaultPrevented || !interactive) return;
+              if (event.key === "Escape") {
+                event.preventDefault();
+                setOpen(false);
+                setKeyword("");
+                setTyping(false);
+                return;
+              }
+              if (!(multiple && event.key === " " && (!showSearch || !typing)) && ![
+                "ArrowDown",
+                "ArrowUp",
+                "ArrowRight",
+                "ArrowLeft",
+                "Enter"
+              ].includes(event.key))
+                return;
+              event.preventDefault();
+              setOpen(true);
+              const column = searching ? 0 : Math.min(focus.column, columns.length - 1);
+              const items = searching ? results.map((result) => result[result.length - 1]) : columns[column];
+              if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                const direction = event.key === "ArrowDown" ? 1 : -1;
+                let index = focus.index;
+                if (index < 0) index = direction === 1 ? -1 : 0;
+                for (let count = 0; count < items.length; count++) {
+                  index = (index + direction + items.length) % items.length;
+                  if (!items[index].disabled) {
+                    setFocus({ column, index });
+                    break;
+                  }
+                }
+              } else if (event.key === "ArrowLeft" && !searching) {
+                const previous = Math.max(0, column - 1);
+                setFocus({
+                  column: previous,
+                  index: columns[previous].indexOf(path[previous])
+                });
+              } else {
+                const item = items[focus.index];
+                if (!item || item.disabled) return;
+                const next = searching ? results[focus.index] : [...path.slice(0, column), item];
+                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);
+                  setFocus({
+                    column: column + 1,
+                    index: item.children.findIndex((child) => !child.disabled)
+                  });
+                }
+              }
+            },
+            suffix: /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: `canvas-react-select-actions${allowClear && interactive && value.length > 0 ? " canvas-react-select-actions-clearable" : ""}`,
+                onPointerDown: (event) => {
+                  if (!interactive) return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                },
+                onMouseDown: (event) => {
+                  if (!interactive) return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                },
+                onClick: (event) => {
+                  if (!interactive) return;
+                  event.stopPropagation();
+                  inputRef.current?.focus({ preventScroll: true });
+                  show();
+                },
+                children: [
+                  allowClear && interactive && value.length > 0 ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "canvas-react-select-clear",
+                      tabIndex: -1,
+                      "aria-label": "\u6E05\u7A7A\u7EA7\u8054\u9009\u62E9",
+                      onPointerDown: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                      },
+                      onMouseDown: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                      },
+                      onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        inputRef.current?.focus({ preventScroll: true });
+                        setKeyword("");
+                        setTyping(false);
+                        setPath([]);
+                        setFocus({ column: 0, index: -1 });
+                        setOpen(true);
+                        onChange?.([], [], { trigger: "clear", complete: false });
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "canvas-react-select-clear-icon",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `canvas-react-select-arrow${open && interactive ? " canvas-react-select-arrow-open" : ""}`,
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ReactPopup,
+          {
+            constrainHeight: true,
+            open: open && interactive,
+            anchorRef,
+            onOpenChange: setOpen,
+            surfaceClassName: "canvas-react-cascader-popup",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: popupRef,
+                id: popupId,
+                className: "canvas-react-cascader-menus",
+                children: (searching ? [results.map((result) => result[result.length - 1])] : columns).map((items, column) => /* @__PURE__ */ jsx(
+                  "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__ */ 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__ */ jsxs(
+                        "div",
+                        {
+                          id: `${popupId}-${column}-${index}`,
+                          role: "option",
+                          "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;
+                            setFocus({ column, index });
+                            if (expandTrigger === "hover" && !searching && item.children?.length)
+                              setPath(next);
+                          },
+                          onClick: () => {
+                            setFocus({ column, index });
+                            choose(next, "mouse", searching);
+                          },
+                          children: [
+                            multiple ? /* @__PURE__ */ 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__ */ jsx(
+                                  ReactCheckbox,
+                                  {
+                                    tabIndex: -1,
+                                    "aria-hidden": "true",
+                                    readOnly: true,
+                                    checked: checkedState.checked,
+                                    indeterminate: checkedState.indeterminate,
+                                    disabled: item.disabled
+                                  }
+                                )
+                              }
+                            ) : null,
+                            /* @__PURE__ */ jsx("span", { children: searching ? next.map((part) => part.label).join(" / ") : item.label }),
+                            !searching && item.children?.length ? /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "canvas-react-cascader-chevron",
+                                "aria-hidden": "true"
+                              }
+                            ) : null
+                          ]
+                        },
+                        index
+                      );
+                    })
+                  },
+                  column
+                ))
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// 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 = useMemo(() => createTreeSelectIndex(treeData), [treeData]);
+  const selected = useMemo(
+    () => normalizeTreeSelectValue(value, multiple),
+    [value, multiple]
+  );
+  const selectedSet = useMemo(() => new Set(selected), [selected]);
+  const [expanded, setExpanded] = 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] = useState(false);
+  const [keyword, setKeyword] = useState(null);
+  const [active, setActive] = useState(
+    selected[0] ?? null
+  );
+  const anchorRef = useRef(null);
+  const inputRef = useRef(null);
+  const treeRef = useRef(null);
+  const treeId = 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 = 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]);
+  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]);
+  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__ */ jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      className: `canvas-react-tree-select${open && interactive ? " canvas-react-tree-select-open" : ""}`,
+      children: [
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+                        "span",
+                        {
+                          className: "canvas-react-select-clear-icon",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `canvas-react-select-arrow${open ? " canvas-react-select-arrow-open" : ""}`,
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ReactPopup,
+          {
+            open: open && interactive,
+            anchorRef,
+            onOpenChange: setOpen,
+            matchAnchorWidth: true,
+            constrainHeight: true,
+            surfaceClassName: "canvas-react-tree-select-popup",
+            children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(
+                              "span",
+                              {
+                                className: `canvas-react-tree-select-chevron${isExpanded ? " canvas-react-tree-select-chevron-open" : ""}`,
+                                "aria-hidden": "true"
+                              }
+                            )
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { className: "canvas-react-tree-select-switcher" }),
+                        /* @__PURE__ */ jsx("span", { className: "canvas-react-tree-select-title", children: entry.node.title }),
+                        multiple && selectedSet.has(entry.node.value) ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "canvas-react-tree-select-check",
+                            "aria-hidden": "true",
+                            children: "\u2713"
+                          }
+                        ) : null
+                      ]
+                    },
+                    JSON.stringify(entry.node.value)
+                  );
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 var ReactAutoComplete = forwardRef(function ReactAutoComplete2(props, ref) {
   const {
     onChange,
@@ -8525,6 +9355,6 @@ var reactMessage = {
   error: (content) => showMessage("error", content)
 };
 
-export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactVirtualList, ReactYearPicker, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
+export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCascader, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactTreeSelect, ReactVirtualList, ReactYearPicker, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map