@canvas-components/react-components 0.3.6 → 0.3.8

package/dist/index.cjs

@@ -319,6 +319,7 @@ function ReactPopup(props) {
     style,
     surfaceClassName,
     surfaceStyle,
+    constrainHeight = false,
     zIndex = 1200
   } = props;
   const { scale: contentScale } = useReactContentScale();
@@ -340,6 +341,7 @@ function ReactPopup(props) {
         return;
       }
       const nextPosition = resolvePopupPosition({
+        constrainHeight,
         anchor: nextAnchor,
         contentScale,
         matchAnchorWidth,
@@ -349,7 +351,7 @@ function ReactPopup(props) {
         popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
       });
       setPosition((prev) => {
-        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
+        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
           return prev;
         }
         return nextPosition;
@@ -376,6 +378,7 @@ function ReactPopup(props) {
     anchorRect,
     anchorRef,
     contentScale,
+    constrainHeight,
     matchAnchorWidth,
     minWidth,
     offset,
@@ -392,6 +395,7 @@ function ReactPopup(props) {
         return;
       }
       const nextPosition = resolvePopupPosition({
+        constrainHeight,
         anchor: nextAnchor,
         contentScale,
         matchAnchorWidth,
@@ -401,7 +405,7 @@ function ReactPopup(props) {
         popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
       });
       setPosition((prev) => {
-        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
+        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
           return prev;
         }
         return nextPosition;
@@ -419,6 +423,7 @@ function ReactPopup(props) {
     anchorRect,
     anchorRef,
     contentScale,
+    constrainHeight,
     matchAnchorWidth,
     minWidth,
     offset,
@@ -484,7 +489,7 @@ function ReactPopup(props) {
               transition.className,
               surfaceClassName
             ),
-            style: surfaceStyle,
+            style: resolvePopupSurfaceStyle(surfaceStyle, position.style.maxHeight),
             children
           }
         )
@@ -513,7 +518,8 @@ function resolvePopupPosition(params) {
     matchAnchorWidth ? anchor.width : 0
   );
   const popupWidth = preferredVisualWidth;
-  const popupHeight = popupRect?.height ?? 0;
+  const maxVisualHeight = Math.max(0, viewportHeight - margin * 2);
+  const popupHeight = params.constrainHeight ? Math.min(popupRect?.height ?? 0, maxVisualHeight) : popupRect?.height ?? 0;
   const isHorizontalPlacement = placement.startsWith("left") || placement.startsWith("right");
   const preferredVertical = placement.startsWith("top") ? "top" : placement.endsWith("Top") ? "top" : "bottom";
   const preferredTop = resolveRawTop({
@@ -558,6 +564,7 @@ function resolvePopupPosition(params) {
       vertical: resolvedVertical
     }),
     style: {
+      ...params.constrainHeight ? { maxHeight: toContentLayoutSize(maxVisualHeight, contentScale) } : {},
       left,
       top,
       width: matchAnchorWidth ? layoutAnchorWidth : void 0,
@@ -565,6 +572,19 @@ function resolvePopupPosition(params) {
     }
   };
 }
+function resolvePopupSurfaceStyle(style, viewportMaxHeight) {
+  if (typeof viewportMaxHeight !== "number") return style;
+  const custom = style?.maxHeight;
+  const maxHeight = typeof custom === "number" ? Math.min(custom, viewportMaxHeight) : typeof custom === "string" && custom !== "none" ? `min(${custom}, ${viewportMaxHeight}px)` : viewportMaxHeight;
+  return {
+    ...style,
+    boxSizing: "border-box",
+    minHeight: 0,
+    maxHeight,
+    overflowY: "auto",
+    overscrollBehaviorY: "contain"
+  };
+}
 function resolvePlacement(params) {
   const { horizontal, isHorizontalPlacement, vertical } = params;
   if (isHorizontalPlacement) {
@@ -714,7 +734,7 @@ var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, re
 });
 
 // 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 = React.forwardRef(
   function ReactSelect2(props, ref) {
     const {
@@ -7239,6 +7259,333 @@ function clamp3(value, min, max) {
   }
   return Math.min(Math.max(value, min), max);
 }
+
+// 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');
+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,
+    changeOnSelect = false,
+    expandTrigger = "click",
+    displayRender,
+    onChange,
+    allowClear = true,
+    disabled,
+    readOnly,
+    onFocus,
+    onBlur,
+    onClick,
+    onKeyDown,
+    ...inputProps
+  } = props;
+  const anchorRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const popupRef = React.useRef(null);
+  const popupId = React.useId();
+  const selected = React.useMemo(() => resolvePath(options, value), [options, value]);
+  const [path, setPath] = React.useState(selected);
+  const [open, setOpen] = React.useState(false);
+  const [keyword, setKeyword] = React.useState("");
+  const [typing, setTyping] = React.useState(false);
+  const [focus, setFocus] = React.useState({ column: 0, index: -1 });
+  const interactive = !disabled && !readOnly;
+  React.useEffect(() => {
+    setPath(selected);
+  }, [selected]);
+  const labels = value.map(
+    (part, index) => selected[index]?.label ?? String(part)
+  );
+  const text = displayRender?.(labels, selected) ?? labels.join(" / ");
+  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 = React.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) && 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]);
+  React.useEffect(() => {
+    popupRef.current?.querySelector("[data-active='true']")?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [focus, open]);
+  const choose = (next, trigger, fromSearch = false) => {
+    const item = next[next.length - 1];
+    if (!item || next.some((option) => option.disabled)) return;
+    setPath(next);
+    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);
+    setPath(selected);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      className: `canvas-react-cascader${open && interactive ? " canvas-react-cascader-open" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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 (![
+                "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 (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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "canvas-react-select-clear-icon",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: `canvas-react-select-arrow${open && interactive ? " canvas-react-select-arrow-open" : ""}`,
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ReactPopup,
+          {
+            constrainHeight: true,
+            open: open && interactive,
+            anchorRef,
+            onOpenChange: setOpen,
+            surfaceClassName: "canvas-react-cascader-popup",
+            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    role: "listbox",
+                    "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;
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          id: `${popupId}-${column}-${index}`,
+                          role: "option",
+                          "aria-selected": path[column] === item,
+                          "aria-disabled": !!item.disabled,
+                          "data-active": active,
+                          className: "canvas-react-cascader-option",
+                          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: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: searching ? next.map((part) => part.label).join(" / ") : item.label }),
+                            !searching && item.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: "canvas-react-cascader-chevron",
+                                "aria-hidden": "true"
+                              }
+                            ) : null
+                          ]
+                        },
+                        index
+                      );
+                    })
+                  },
+                  column
+                ))
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 var ReactAutoComplete = React.forwardRef(function ReactAutoComplete2(props, ref) {
   const {
     onChange,
@@ -8529,6 +8876,7 @@ var reactMessage = {
 exports.REACT_COMPONENT_PREFIX = REACT_COMPONENT_PREFIX;
 exports.ReactAutoComplete = ReactAutoComplete;
 exports.ReactButton = ReactButton;
+exports.ReactCascader = ReactCascader;
 exports.ReactCheckbox = ReactCheckbox;
 exports.ReactCol = ReactCol;
 exports.ReactColorPicker = ReactColorPicker;