npm - @canvas-components/react-components - Versions diffs - 0.3.7 → 0.3.8 - Mend

@canvas-components/react-components 0.3.7 → 0.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -927,6 +927,31 @@ interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" |
  */
 declare const ReactSelect: react.ForwardRefExoticComponent<ReactSelectProps & react.RefAttributes<HTMLInputElement>>;
+/** 级联选择树节点；值保留原始字符串或数字类型。 */
+interface ReactCascaderOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    children?: ReactCascaderOption[];
+}
+/** 选择来源及是否已完成路径选择。 */
+interface ReactCascaderChangeInfo {
+    trigger: "mouse" | "keyboard" | "clear";
+    complete: boolean;
+}
+/** 单路径级联选择配置。 */
+interface ReactCascaderProps extends Omit<ReactInputProps, "value" | "defaultValue" | "onChange" | "onPressEnter" | "displayRender"> {
+    value?: (string | number)[];
+    options?: ReactCascaderOption[];
+    showSearch?: boolean;
+    changeOnSelect?: boolean;
+    expandTrigger?: "click" | "hover";
+    displayRender?: (labels: string[], selectedOptions: ReactCascaderOption[]) => string;
+    onChange?: (value: (string | number)[], selectedOptions: ReactCascaderOption[], info: ReactCascaderChangeInfo) => void;
+}
+/** 多列展开的级联选择器，复用现有输入框、浮层及主题。 */
+declare function ReactCascader(props: ReactCascaderProps): react.JSX.Element;
 interface ReactAutoCompleteProps extends Omit<ReactSelectProps, "allowCustomValue" | "onChange" | "onInputValueChange" | "onPressEnter"> {
     /** 当前值。 */
     value?: string | number;
@@ -1291,4 +1316,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
  */
 declare const REACT_COMPONENT_PREFIX = "canvas-react";
-export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
+export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };

package/dist/index.d.ts CHANGED Viewed

@@ -927,6 +927,31 @@ interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" |
  */
 declare const ReactSelect: react.ForwardRefExoticComponent<ReactSelectProps & react.RefAttributes<HTMLInputElement>>;
+/** 级联选择树节点；值保留原始字符串或数字类型。 */
+interface ReactCascaderOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    children?: ReactCascaderOption[];
+}
+/** 选择来源及是否已完成路径选择。 */
+interface ReactCascaderChangeInfo {
+    trigger: "mouse" | "keyboard" | "clear";
+    complete: boolean;
+}
+/** 单路径级联选择配置。 */
+interface ReactCascaderProps extends Omit<ReactInputProps, "value" | "defaultValue" | "onChange" | "onPressEnter" | "displayRender"> {
+    value?: (string | number)[];
+    options?: ReactCascaderOption[];
+    showSearch?: boolean;
+    changeOnSelect?: boolean;
+    expandTrigger?: "click" | "hover";
+    displayRender?: (labels: string[], selectedOptions: ReactCascaderOption[]) => string;
+    onChange?: (value: (string | number)[], selectedOptions: ReactCascaderOption[], info: ReactCascaderChangeInfo) => void;
+}
+/** 多列展开的级联选择器，复用现有输入框、浮层及主题。 */
+declare function ReactCascader(props: ReactCascaderProps): react.JSX.Element;
 interface ReactAutoCompleteProps extends Omit<ReactSelectProps, "allowCustomValue" | "onChange" | "onInputValueChange" | "onPressEnter"> {
     /** 当前值。 */
     value?: string | number;
@@ -1291,4 +1316,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
  */
 declare const REACT_COMPONENT_PREFIX = "canvas-react";
-export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
+export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };

package/dist/index.js CHANGED Viewed

@@ -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,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 = useRef(null);
+  const inputRef = useRef(null);
+  const popupRef = useRef(null);
+  const popupId = useId();
+  const selected = useMemo(() => resolvePath(options, value), [options, value]);
+  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 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 = 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]);
+  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__ */ 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 (![
+                "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__ */ 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-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;
+                      return /* @__PURE__ */ 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__ */ 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
+                ))
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 var ReactAutoComplete = forwardRef(function ReactAutoComplete2(props, ref) {
   const {
     onChange,
@@ -8525,6 +8852,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, ReactVirtualList, ReactYearPicker, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map