rsuite 5.55.1 → 5.57.0

package/TagPicker/styles/index.css

@@ -406,17 +406,16 @@
   position: relative;
 }
 /* rtl:begin:ignore */
-.rs-checkbox-wrapper::before,
-.rs-checkbox-wrapper::after,
-.rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-control::before,
+.rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-control .rs-checkbox-inner::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   display: block;
 }
-.rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-control .rs-checkbox-inner::after {
   opacity: 0;
   -webkit-transform: rotate(45deg) scale(0);
           transform: rotate(45deg) scale(0);
@@ -425,12 +424,12 @@
   transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
   transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46), -webkit-transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
 }
-.rs-theme-high-contrast .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-theme-high-contrast .rs-checkbox-control .rs-checkbox-inner::after {
   -webkit-transition: none;
   transition: none;
 }
-.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::after,
-.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after,
+.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after {
   border: solid #fff;
   border: solid var(--rs-checkbox-icon);
   width: 6px;
@@ -439,12 +438,12 @@
   margin-left: 5px;
   opacity: 1;
 }
-.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after {
   border-width: 0 2px 2px 0;
   -webkit-transform: rotate(45deg) scale(1);
           transform: rotate(45deg) scale(1);
 }
-.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after {
   border-width: 0 0 2px;
   -webkit-transform: rotate(0deg) scale(1);
           transform: rotate(0deg) scale(1);
@@ -454,7 +453,7 @@
 }
 /* rtl:end:ignore */
 /* stylelint-disable-next-line */
-.rs-checkbox-wrapper {
+.rs-checkbox-control {
   position: absolute;
   width: 16px;
   height: 16px;
@@ -462,18 +461,22 @@
   left: 10px;
   top: 10px;
 }
-.rs-checkbox-wrapper [type='checkbox'] {
-  width: 0;
-  height: 0;
+.rs-checkbox-control [type='checkbox'] {
+  position: absolute;
   opacity: 0;
+  z-index: 1;
+  top: -10px;
+  right: -10px;
+  bottom: -10px;
+  left: -10px;
 }
-.rs-checkbox-wrapper::before,
-.rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-control::before,
+.rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-control .rs-checkbox-inner::after {
   width: 16px;
   height: 16px;
 }
-.rs-checkbox-wrapper::before {
+.rs-checkbox-control::before {
   border: 1px solid #3498ff;
   border: 1px solid var(--rs-checkbox-checked-bg);
   background-color: transparent;
@@ -487,23 +490,17 @@
   transition: transform 0.2s linear, opacity 0.2s linear;
   transition: transform 0.2s linear, opacity 0.2s linear, -webkit-transform 0.2s linear;
 }
-.rs-theme-high-contrast .rs-checkbox-wrapper::before {
+.rs-theme-high-contrast .rs-checkbox-control::before {
   -webkit-transition: none;
   transition: none;
 }
-.rs-checkbox-checked .rs-checkbox-wrapper::before {
+.rs-checkbox-checked .rs-checkbox-control::before {
   -webkit-transform: scale(1.5);
           transform: scale(1.5);
   opacity: 0;
   visibility: visible;
 }
-.rs-checkbox-wrapper::after {
-  top: -10px;
-  right: -10px;
-  bottom: -10px;
-  left: -10px;
-}
-.rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-control .rs-checkbox-inner::before {
   border: 1px solid #d9d9d9;
   border: 1px solid var(--rs-checkbox-border);
   background-color: transparent;
@@ -513,35 +510,140 @@
   transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
   transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear;
 }
-.rs-theme-high-contrast .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-theme-high-contrast .rs-checkbox-control .rs-checkbox-inner::before {
   -webkit-transition: none;
   transition: none;
 }
-label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
+label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-color: #3498ff;
   border-color: var(--rs-checkbox-checked-bg);
 }
-.rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate) .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate) .rs-checkbox-control .rs-checkbox-inner::before {
   border-color: #f7f7fa;
   border-color: var(--rs-checkbox-disabled-bg);
   background-color: #f7f7fa;
   background-color: var(--rs-checkbox-disabled-bg);
 }
-.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   border-color: #3498ff;
   border-color: var(--rs-checkbox-checked-bg);
   background-color: #3498ff;
   background-color: var(--rs-checkbox-checked-bg);
 }
-.rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   opacity: 0.3;
 }
-.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
+.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   opacity: 0.5;
 }
+.rs-checkbox-red .rs-checkbox-control::before {
+  border-color: #f44336;
+  border-color: var(--rs-red-500);
+}
+.rs-checkbox-red label:hover .rs-checkbox-inner::before {
+  border-color: #f44336;
+  border-color: var(--rs-red-500);
+}
+.rs-checkbox-red.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-red.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #f44336;
+  border-color: var(--rs-red-500);
+  background-color: #f44336;
+  background-color: var(--rs-red-500);
+}
+.rs-checkbox-orange .rs-checkbox-control::before {
+  border-color: #fa8900;
+  border-color: var(--rs-orange-500);
+}
+.rs-checkbox-orange label:hover .rs-checkbox-inner::before {
+  border-color: #fa8900;
+  border-color: var(--rs-orange-500);
+}
+.rs-checkbox-orange.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-orange.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #fa8900;
+  border-color: var(--rs-orange-500);
+  background-color: #fa8900;
+  background-color: var(--rs-orange-500);
+}
+.rs-checkbox-yellow .rs-checkbox-control::before {
+  border-color: #ffb300;
+  border-color: var(--rs-yellow-500);
+}
+.rs-checkbox-yellow label:hover .rs-checkbox-inner::before {
+  border-color: #ffb300;
+  border-color: var(--rs-yellow-500);
+}
+.rs-checkbox-yellow.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-yellow.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #ffb300;
+  border-color: var(--rs-yellow-500);
+  background-color: #ffb300;
+  background-color: var(--rs-yellow-500);
+}
+.rs-checkbox-green .rs-checkbox-control::before {
+  border-color: #4caf50;
+  border-color: var(--rs-green-500);
+}
+.rs-checkbox-green label:hover .rs-checkbox-inner::before {
+  border-color: #4caf50;
+  border-color: var(--rs-green-500);
+}
+.rs-checkbox-green.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-green.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #4caf50;
+  border-color: var(--rs-green-500);
+  background-color: #4caf50;
+  background-color: var(--rs-green-500);
+}
+.rs-checkbox-cyan .rs-checkbox-control::before {
+  border-color: #00bcd4;
+  border-color: var(--rs-cyan-500);
+}
+.rs-checkbox-cyan label:hover .rs-checkbox-inner::before {
+  border-color: #00bcd4;
+  border-color: var(--rs-cyan-500);
+}
+.rs-checkbox-cyan.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-cyan.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #00bcd4;
+  border-color: var(--rs-cyan-500);
+  background-color: #00bcd4;
+  background-color: var(--rs-cyan-500);
+}
+.rs-checkbox-blue .rs-checkbox-control::before {
+  border-color: #2196f3;
+  border-color: var(--rs-blue-500);
+}
+.rs-checkbox-blue label:hover .rs-checkbox-inner::before {
+  border-color: #2196f3;
+  border-color: var(--rs-blue-500);
+}
+.rs-checkbox-blue.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-blue.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #2196f3;
+  border-color: var(--rs-blue-500);
+  background-color: #2196f3;
+  background-color: var(--rs-blue-500);
+}
+.rs-checkbox-violet .rs-checkbox-control::before {
+  border-color: #673ab7;
+  border-color: var(--rs-violet-500);
+}
+.rs-checkbox-violet label:hover .rs-checkbox-inner::before {
+  border-color: #673ab7;
+  border-color: var(--rs-violet-500);
+}
+.rs-checkbox-violet.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-violet.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #673ab7;
+  border-color: var(--rs-violet-500);
+  background-color: #673ab7;
+  background-color: var(--rs-violet-500);
+}
 .rs-picker-subtle .picker-subtle-toggle {
   position: relative;
   z-index: 5;
@@ -3478,11 +3580,11 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 52px;
 }
-.rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 12px;
 }
-.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper,
-.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-control,
+.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 26px;
 }
 .rs-picker-input {

package/cjs/@types/common.d.ts

@@ -35,10 +35,10 @@ export interface AnimationEventProps {
     onExited?: (node: HTMLElement) => void;
 }
 export declare type PickerAppearance = 'default' | 'subtle';
-export interface PickerBaseProps<LocaleType = any> extends WithAsProps, AnimationEventProps {
+export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventProps {
     id?: string;
     /** Custom locale */
-    locale?: Partial<LocaleType>;
+    locale?: Partial<L>;
     /** A picker can have different appearances. */
     appearance?: PickerAppearance;
     /** Format picker to appear inside a content block */
@@ -108,24 +108,22 @@ export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTML
     /** Make the control readonly */
     readOnly?: boolean;
 }
-declare type ToArray<V> = V extends any[] ? V : V[];
-export interface FormControlPickerProps<ValueType = any, LocaleType = any, DataType = Record<string, any>> extends PickerBaseProps<LocaleType>, FormControlBaseProps<ValueType> {
+export declare type ToArray<V> = V extends any[] ? V : V[];
+export interface DataProps<TData> {
     /** The data of component */
-    data: DataType[];
+    data: TData[];
     /** Set option value 'key' in 'data' */
     valueKey?: string;
     /** Set options to display the 'key' in 'data' */
     labelKey?: string;
     /** Set children key in data */
     childrenKey?: string;
-    /** Disabled items */
-    disabledItemValues?: ToArray<NonNullable<ValueType>>;
-    /** Initial value */
-    defaultValue?: ValueType;
-    /** Current value of the component. Creates a controlled component */
-    value?: ValueType;
-    /** Called after the value has been changed */
-    onChange?: (value: ValueType, event: React.SyntheticEvent) => void;
+}
+export interface FormControlPickerProps<T = any, L = any, D = Record<string, any>, I = T> extends PickerBaseProps<L>, FormControlBaseProps<T>, DataProps<D> {
+    /**
+     * Disabled items
+     */
+    disabledItemValues?: ToArray<NonNullable<I>>;
 }
 export declare namespace TypeAttributes {
     type Size = 'lg' | 'md' | 'sm' | 'xs';
@@ -150,6 +148,7 @@ export interface ItemDataType<T = number | string> extends Record<string, any> {
     children?: ItemDataType<T>[];
     loading?: boolean;
 }
+export declare type DataItemValue = number | string | null;
 export interface Offset {
     top: number;
     left: number;
@@ -163,4 +162,3 @@ export declare type CursorPosition = {
     clientTop: number;
     clientLeft: number;
 };
-export {};

package/cjs/CascadeTree/CascadeTree.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CascadeTreeProps } from './types';
+export interface CascadeTreeComponent {
+    <T>(props: CascadeTreeProps<T> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<CascadeTreeProps<any>>;
+}
+/**
+ * CascadeTree is a component that displays tree-structured data in columns.
+ *
+ * @see https://rsuitejs.com/components/cascade-tree
+ */
+declare const CascadeTree: CascadeTreeComponent;
+export default CascadeTree;

package/cjs/CascadeTree/CascadeTree.js

@@ -0,0 +1,174 @@
+'use client';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _treeUtils = require("../utils/treeUtils");
+var _utils = require("../utils");
+var _useMap = require("../utils/useMap");
+var _TreeView = _interopRequireDefault(require("./TreeView"));
+var _SearchView = _interopRequireDefault(require("./SearchView"));
+var _hooks = require("./hooks");
+/**
+ * CascadeTree is a component that displays tree-structured data in columns.
+ *
+ * @see https://rsuitejs.com/components/cascade-tree
+ */
+var CascadeTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    defaultValue = props.defaultValue,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'cascade-tree' : _props$classPrefix,
+    _props$childrenKey = props.childrenKey,
+    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    valueProp = props.value,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
+    columnWidth = props.columnWidth,
+    columnHeight = props.columnHeight,
+    searchable = props.searchable,
+    renderTreeNode = props.renderTreeNode,
+    renderColumn = props.renderColumn,
+    onSelect = props.onSelect,
+    onSearch = props.onSearch,
+    onChange = props.onChange,
+    getChildren = props.getChildren,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "defaultValue", "className", "classPrefix", "childrenKey", "valueKey", "labelKey", "value", "disabledItemValues", "columnWidth", "columnHeight", "searchable", "renderTreeNode", "renderColumn", "onSelect", "onSearch", "onChange", "getChildren"]);
+  var _ref = (0, _utils.useControlled)(valueProp, defaultValue),
+    value = _ref[0],
+    setValue = _ref[1]; // Store the children of each node
+  var childrenMap = (0, _useMap.useMap)();
+
+  // Store the parent of each node
+  var parentMap = (0, _react.useMemo)(function () {
+    return (0, _treeUtils.getParentMap)(data, function (item) {
+      var _childrenMap$get;
+      return (_childrenMap$get = childrenMap.get(item)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : item[childrenKey];
+    });
+  }, [childrenMap, childrenKey, data]);
+
+  // Flatten the tree data
+  var flattenedData = (0, _react.useMemo)(function () {
+    return (0, _treeUtils.flattenTree)(data, function (item) {
+      var _childrenMap$get2;
+      return (_childrenMap$get2 = childrenMap.get(item)) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : item[childrenKey];
+    });
+  }, [childrenMap, childrenKey, data]);
+
+  // The selected item
+  var selectedItem = flattenedData.find(function (item) {
+    return item[valueKey] === value;
+  });
+
+  // Callback function after selecting the node
+  var onSelectCallback = function onSelectCallback(node, event) {
+    var isLeafNode = node.isLeafNode,
+      cascadePaths = node.cascadePaths,
+      itemData = node.itemData;
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemData, cascadePaths, event);
+    if (isLeafNode) {
+      var nextValue = itemData[valueKey];
+      setValue(nextValue);
+    }
+  };
+  var _useSelect = (0, _hooks.useSelect)({
+      value: value,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      childrenMap: childrenMap,
+      selectedItem: selectedItem,
+      getChildren: getChildren,
+      onChange: onChange,
+      onSelect: onSelectCallback
+    }),
+    activeItem = _useSelect.activeItem,
+    loadingItemsSet = _useSelect.loadingItemsSet,
+    handleSelect = _useSelect.handleSelect;
+  var _usePaths = (0, _hooks.usePaths)({
+      data: data,
+      activeItem: activeItem,
+      selectedItem: selectedItem,
+      getParent: function getParent(item) {
+        return parentMap.get(item);
+      },
+      getChildren: function getChildren(item) {
+        var _childrenMap$get3;
+        return (_childrenMap$get3 = childrenMap.get(item)) !== null && _childrenMap$get3 !== void 0 ? _childrenMap$get3 : item[childrenKey];
+      }
+    }),
+    columns = _usePaths.columns,
+    pathTowardsActiveItem = _usePaths.pathTowardsActiveItem;
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var onSearchCallback = (0, _react.useCallback)(function (value, _items, event) {
+    return onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
+  }, [onSearch]);
+  var _useSearch = (0, _hooks.useSearch)({
+      labelKey: labelKey,
+      childrenKey: childrenKey,
+      parentMap: parentMap,
+      flattenedData: flattenedData,
+      onSearch: onSearchCallback
+    }),
+    items = _useSearch.items,
+    searchKeyword = _useSearch.searchKeyword,
+    setSearchKeyword = _useSearch.setSearchKeyword,
+    handleSearch = _useSearch.handleSearch;
+  var handleSearchRowSelect = (0, _utils.useEventCallback)(function (item, items, event) {
+    var _item$childrenKey;
+    var node = {
+      itemData: item,
+      cascadePaths: items,
+      isLeafNode: !((_item$childrenKey = item[childrenKey]) !== null && _item$childrenKey !== void 0 && _item$childrenKey.length)
+    };
+    handleSelect(node, event);
+    setSearchKeyword('');
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    className: classes
+  }, rest, {
+    ref: ref
+  }), searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {
+    data: items,
+    searchKeyword: searchKeyword,
+    valueKey: valueKey,
+    labelKey: labelKey,
+    parentMap: parentMap,
+    disabledItemValues: disabledItemValues,
+    onSelect: handleSearchRowSelect,
+    onSearch: handleSearch
+  }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {
+    columnWidth: columnWidth,
+    columnHeight: columnHeight,
+    disabledItemValues: disabledItemValues,
+    loadingItemsSet: loadingItemsSet,
+    valueKey: valueKey,
+    labelKey: labelKey,
+    childrenKey: childrenKey,
+    classPrefix: classPrefix,
+    data: columns,
+    cascadePaths: pathTowardsActiveItem,
+    activeItemValue: value,
+    onSelect: handleSelect,
+    renderColumn: renderColumn,
+    renderTreeNode: renderTreeNode
+  }));
+});
+CascadeTree.displayName = 'CascadeTree';
+var _default = CascadeTree;
+exports.default = _default;

package/cjs/CascadeTree/SearchView.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ItemDataType, WithAsProps } from '../@types/common';
+interface SearchViewProps<T> extends WithAsProps {
+    searchKeyword: string;
+    labelKey: string;
+    valueKey: string;
+    parentMap: WeakMap<ItemDataType<T>, ItemDataType<T>>;
+    data: ItemDataType<T>[];
+    focusItemValue?: T | null;
+    disabledItemValues: any[];
+    renderSearchItem?: (label: React.ReactNode, items: ItemDataType<T>[]) => React.ReactNode;
+    onSelect: (item: ItemDataType<T>, items: ItemDataType<T>[], event: React.MouseEvent) => void;
+    onSearch: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+declare function SearchView<T>(props: SearchViewProps<T>): JSX.Element;
+export default SearchView;

package/cjs/CascadeTree/SearchView.js

@@ -0,0 +1,106 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../utils");
+var _treeUtils = require("../utils/treeUtils");
+var _utils2 = require("./utils");
+var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
+function SearchView(props) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'cascade-search-view' : _props$classPrefix,
+    className = props.className,
+    searchKeyword = props.searchKeyword,
+    labelKey = props.labelKey,
+    valueKey = props.valueKey,
+    parentMap = props.parentMap,
+    data = props.data,
+    focusItemValue = props.focusItemValue,
+    disabledItemValues = props.disabledItemValues,
+    inputRef = props.inputRef,
+    renderSearchItem = props.renderSearchItem,
+    onSearch = props.onSearch,
+    onSelect = props.onSelect,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "searchKeyword", "labelKey", "valueKey", "parentMap", "data", "focusItemValue", "disabledItemValues", "inputRef", "renderSearchItem", "onSearch", "onSelect"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix,
+    withClassPrefix = _useClassNames.withClassPrefix,
+    rootPrefix = _useClassNames.rootPrefix;
+  var classes = merge(className, withClassPrefix());
+  var _useCustom = (0, _utils.useCustom)('Picker'),
+    locale = _useCustom.locale;
+  var renderSearchRow = function renderSearchRow(item, key) {
+    var items = (0, _treeUtils.getPathTowardsItem)(item, function (item) {
+      return parentMap.get(item);
+    });
+    var formattedNodes = items.map(function (itemData) {
+      var _extends2;
+      var label = (0, _utils2.highlightLabel)({
+        item: itemData,
+        labelKey: labelKey,
+        searchKeyword: searchKeyword,
+        render: function render(patch, index) {
+          return /*#__PURE__*/_react.default.createElement("span", {
+            key: index,
+            className: prefix('match')
+          }, patch);
+        }
+      });
+      return (0, _extends3.default)({}, itemData, (_extends2 = {}, _extends2[labelKey] = label, _extends2));
+    });
+    var disabled = disabledItemValues.some(function (value) {
+      return formattedNodes.some(function (itemData) {
+        return itemData[valueKey] === value;
+      });
+    });
+    var itemClasses = prefix('row', {
+      'row-disabled': disabled,
+      'row-focus': item[valueKey] === focusItemValue
+    });
+    var label = formattedNodes.map(function (itemData, index) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        key: "col-" + index,
+        className: prefix('col')
+      }, itemData[labelKey]);
+    });
+    var handleCheck = function handleCheck(event) {
+      if (!disabled) {
+        onSelect(item, items, event);
+      }
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      role: "treeitem",
+      "aria-disabled": disabled,
+      "aria-label": item[labelKey],
+      key: key,
+      "data-key": item[valueKey],
+      className: itemClasses,
+      tabIndex: -1,
+      onClick: handleCheck
+    }, renderSearchItem ? renderSearchItem(label, items) : label);
+  };
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({
+    className: classes
+  }, rest), /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
+    placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
+    onChange: onSearch,
+    value: searchKeyword,
+    inputRef: inputRef
+  }), searchKeyword !== '' && /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('panel'),
+    "data-layer": 0,
+    role: "tree"
+  }, data.length ? data.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement("div", {
+    className: merge(prefix('none'), rootPrefix('picker-none'))
+  }, locale.noResultsText)));
+}
+var _default = SearchView;
+exports.default = _default;

package/cjs/CascadeTree/TreeView.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ItemDataType, WithAsProps, RsRefForwardingComponent, DataProps, ToArray } from '../@types/common';
+import { SelectNode, CascadeColumn } from './types';
+declare type SetLike<T = unknown> = {
+    has(value: T): boolean;
+};
+export interface TreeViewProps<T = any> extends WithAsProps, Omit<DataProps<ItemDataType<T>>, 'data'> {
+    data?: (readonly ItemDataType<T>[])[];
+    disabledItemValues?: ToArray<NonNullable<T>>;
+    activeItemValue?: T | null;
+    loadingItemsSet?: SetLike<ItemDataType<T>>;
+    cascadePaths?: ItemDataType<T>[];
+    columnWidth?: number;
+    columnHeight?: number | string;
+    renderTreeNode?: (node: React.ReactNode, itemData: ItemDataType<T>) => React.ReactNode;
+    renderColumn?: (childNodes: React.ReactNode, column: CascadeColumn<T>) => React.ReactNode;
+    onSelect?: (node: SelectNode<T>, event: React.MouseEvent) => void;
+}
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;