rsuite 5.56.0 → 5.57.0

package/MultiCascadeTree/styles/index.less

@@ -0,0 +1,37 @@
+@import '../../styles/common.less';
+@import '../../Cascader/styles/index.less';
+@import '../../internals/Picker/styles/index.less';
+@import '../../Checkbox/styles/index.less';
+
+// MultiCascadeTree
+// ----------------------
+
+.rs-cascade-tree {
+  &-items .rs-check-item .rs-checkbox-checker > label {
+    padding-right: 26px; // 12px + 8px + 6px
+  }
+
+  &-items .rs-check-item.rs-check-item-focus,
+  &-items .rs-check-item.rs-checkbox-checked {
+    .rs-checkbox-checker > label {
+      font-weight: bold;
+    }
+  }
+
+  &-column&-column-uncheckable {
+    .rs-check-item .rs-checkbox-checker > label {
+      padding-left: @picker-item-content-padding-horizontal;
+    }
+  }
+}
+.rs-cascade-tree-multi {
+  .rs-cascade-search-view-row {
+    padding-left: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .rs-cascade-search-view-col {
+    padding: 0;
+  }
+}

package/MultiCascader/styles/index.css

@@ -351,19 +351,12 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
-.rs-picker-cascader-menu-items > div::before,
-.rs-picker-cascader-menu-items > div::after {
-  content: ' ';
-  display: table;
-}
-.rs-picker-cascader-menu-items > div::after {
-  clear: both;
-}
-.rs-picker-cascader-search-panel {
+.rs-cascade-search-view-panel {
   max-height: 300px;
+  margin-top: 6px;
   overflow: auto;
 }
-.rs-picker-cascader-row {
+.rs-cascade-search-view-row {
   display: block;
   padding: 8px 12px;
   clear: both;
@@ -375,13 +368,13 @@
   text-decoration: none;
   width: 100%;
 }
-.rs-picker-cascader-row:hover {
+.rs-cascade-search-view-row:hover {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
   color: #1675e0;
   color: var(--rs-listbox-option-hover-text);
 }
-.rs-theme-high-contrast .rs-picker-cascader-row:hover {
+.rs-theme-high-contrast .rs-cascade-search-view-row:hover {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
   outline-offset: -3px;
@@ -390,16 +383,16 @@
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-cascader-row:hover {
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-search-view-row:hover {
   outline-offset: 2px;
 }
-.rs-picker-cascader-row.rs-picker-cascader-row-focus {
+.rs-cascade-search-view-row.rs-cascade-search-view-row-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
   color: #1675e0;
   color: var(--rs-listbox-option-hover-text);
 }
-.rs-theme-high-contrast .rs-picker-cascader-row.rs-picker-cascader-row-focus {
+.rs-theme-high-contrast .rs-cascade-search-view-row.rs-cascade-search-view-row-focus {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
   outline-offset: -3px;
@@ -408,40 +401,52 @@
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-cascader-row.rs-picker-cascader-row-focus {
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-search-view-row.rs-cascade-search-view-row-focus {
   outline-offset: 2px;
 }
-.rs-picker-cascader-row:disabled,
-.rs-picker-cascader-row.rs-picker-cascader-row-disabled {
+.rs-cascade-search-view-row:disabled,
+.rs-cascade-search-view-row.rs-cascade-search-view-row-disabled {
   color: #c5c6c7;
   color: var(--rs-listbox-option-disabled-text);
   background: none;
   cursor: not-allowed;
 }
-.rs-picker-cascader-row:disabled .rs-picker-cascader-search-match,
-.rs-picker-cascader-row.rs-picker-cascader-row-disabled .rs-picker-cascader-search-match {
+.rs-cascade-search-view-row:disabled .rs-cascade-search-view-match,
+.rs-cascade-search-view-row.rs-cascade-search-view-row-disabled .rs-cascade-search-view-match {
   opacity: 0.7;
   font-weight: normal;
 }
-.rs-picker-cascader-col {
+.rs-cascade-search-view-col {
   display: inline-block;
 }
-.rs-picker-cascader-col::after {
+.rs-cascade-search-view-col::after {
   content: '\00a0/\00a0';
 }
-.rs-picker-cascader-col:last-child::after {
+.rs-cascade-search-view-col:last-child::after {
   display: none;
 }
-.rs-picker-cascader-search-match {
+.rs-cascade-search-view-match {
   color: #3498ff;
   color: var(--rs-primary-500);
   font-weight: bold;
 }
-.rs-picker-cascader-menu-column {
-  float: left;
+.rs-cascade-tree-items {
+  padding: 6px 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.rs-cascade-tree-items ul,
+.rs-cascade-tree-items li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 14px;
+}
+.rs-cascade-tree-column {
   overflow-y: auto;
 }
-.rs-picker-cascader-menu-column-loading {
+.rs-cascade-tree-column-loading {
   padding: 4px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -453,17 +458,10 @@
       -ms-flex-pack: center;
           justify-content: center;
 }
-.rs-picker-cascader-menu-column-loading .rs-icon {
+.rs-cascade-tree-column-loading .rs-icon {
   margin: 4px;
 }
-.rs-picker-cascader-menu-items ul,
-.rs-picker-cascader-menu-items li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  font-size: 14px;
-}
-.rs-picker-cascader-menu-item {
+.rs-cascade-tree-item {
   display: block;
   padding: 8px 12px;
   clear: both;
@@ -478,22 +476,20 @@
   padding: 8px 28px 8px 12px;
   word-break: break-word;
 }
-.rs-picker-cascader-menu-items-has-children .rs-picker-cascader-menu-item {
+.rs-cascade-tree-items-has-children .rs-cascade-tree-item {
   padding-right: 32px;
 }
-.rs-picker-cascader-menu-item:hover,
-.rs-picker-cascader-menu-item:focus,
-.rs-picker-cascader-menu-item.rs-picker-select-menu-item-focus,
-.rs-picker-cascader-menu-item.rs-picker-cascader-menu-item-focus {
+.rs-cascade-tree-item:hover,
+.rs-cascade-tree-item:focus,
+.rs-cascade-tree-item.rs-cascade-tree-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
   color: #1675e0;
   color: var(--rs-listbox-option-hover-text);
 }
-.rs-theme-high-contrast .rs-picker-cascader-menu-item:hover,
-.rs-theme-high-contrast .rs-picker-cascader-menu-item:focus,
-.rs-theme-high-contrast .rs-picker-cascader-menu-item.rs-picker-select-menu-item-focus,
-.rs-theme-high-contrast .rs-picker-cascader-menu-item.rs-picker-cascader-menu-item-focus {
+.rs-theme-high-contrast .rs-cascade-tree-item:hover,
+.rs-theme-high-contrast .rs-cascade-tree-item:focus,
+.rs-theme-high-contrast .rs-cascade-tree-item.rs-cascade-tree-item-focus {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
   outline-offset: -3px;
@@ -502,34 +498,33 @@
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-cascader-menu-item:hover,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-cascader-menu-item:focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-cascader-menu-item.rs-picker-select-menu-item-focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-cascader-menu-item.rs-picker-cascader-menu-item-focus {
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-tree-item:hover,
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-tree-item:focus,
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-cascade-tree-item.rs-cascade-tree-item-focus {
   outline-offset: 2px;
 }
-.rs-picker-cascader-menu-item.rs-picker-cascader-menu-item-active {
+.rs-cascade-tree-item.rs-cascade-tree-item-active {
   background-color: #f2faff;
   background-color: var(--rs-listbox-option-selected-bg);
   font-weight: bold;
   color: #1675e0;
   color: var(--rs-listbox-option-selected-text);
 }
-.rs-theme-high-contrast .rs-picker-cascader-menu-item.rs-picker-cascader-menu-item-active {
+.rs-theme-high-contrast .rs-cascade-tree-item.rs-cascade-tree-item-active {
   text-decoration: underline;
 }
-.rs-picker-cascader-menu-item.rs-picker-cascader-menu-item-active .rs-picker-cascader-menu-caret {
+.rs-cascade-tree-item.rs-cascade-tree-item-active .rs-cascade-tree-caret {
   color: #575757;
   color: var(--rs-text-primary);
 }
-.rs-picker-cascader-menu-item:disabled,
-.rs-picker-cascader-menu-item.rs-picker-cascader-menu-item-disabled {
+.rs-cascade-tree-item:disabled,
+.rs-cascade-tree-item.rs-cascade-tree-item-disabled {
   color: #c5c6c7;
   color: var(--rs-listbox-option-disabled-text);
   background: none;
   cursor: not-allowed;
 }
-.rs-picker-cascader-menu-caret {
+.rs-cascade-tree-caret {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -543,6 +538,24 @@
   height: 20px;
   font-size: 12px;
 }
+.rs-cascade-tree-items .rs-check-item .rs-checkbox-checker > label {
+  padding-right: 26px;
+}
+.rs-cascade-tree-items .rs-check-item.rs-check-item-focus .rs-checkbox-checker > label,
+.rs-cascade-tree-items .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
+  font-weight: bold;
+}
+.rs-cascade-tree-column.rs-cascade-tree-column-uncheckable .rs-check-item .rs-checkbox-checker > label {
+  padding-left: 12px;
+}
+.rs-cascade-tree-multi .rs-cascade-search-view-row {
+  padding-left: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.rs-cascade-tree-multi .rs-cascade-search-view-col {
+  padding: 0;
+}
 .rs-btn {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -3684,23 +3697,13 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   background-color: #673ab7;
   background-color: var(--rs-violet-500);
 }
-.rs-picker-cascader-menu .rs-check-item .rs-checkbox-checker > label {
-  padding-right: 26px;
-}
-.rs-picker-cascader-menu .rs-check-item.rs-check-item-focus .rs-checkbox-checker > label,
-.rs-picker-cascader-menu .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
-  font-weight: bold;
-}
-.rs-picker-cascader-menu-column.rs-picker-cascader-menu-column-uncheckable .rs-check-item .rs-checkbox-checker > label {
-  padding-left: 12px;
-}
-.rs-picker-multi-cascader-menu .rs-picker-cascader-col {
-  padding: 0;
-}
-.rs-picker-multi-cascader-menu .rs-picker-cascader-row {
+.rs-picker-popup-multi-cascader .rs-cascade-search-view-row {
   padding-left: 0;
   padding-top: 0;
   padding-bottom: 0;
 }
+.rs-picker-popup-multi-cascader .rs-cascade-search-view-col {
+  padding: 0;
+}
 
 /*# sourceMappingURL=index.css.map */

package/MultiCascader/styles/index.less

@@ -1,36 +1,16 @@
-@import '../../styles/common';
-@import '../../Cascader/styles/index';
-@import '../../internals/Picker/styles/index';
-@import '../../Checkbox/styles/index';
+@import '../../styles/common.less';
+@import '../../MultiCascadeTree/styles/index.less';
+@import '../../internals/Picker/styles/index.less';
+@import '../../Checkbox/styles/index.less';
 
-// MultiCascader
-// ----------------------
-
-.rs-picker-cascader {
-  &-menu .rs-check-item .rs-checkbox-checker > label {
-    padding-right: 26px; // 12px + 8px + 6px
-  }
-
-  &-menu .rs-check-item.rs-check-item-focus,
-  &-menu .rs-check-item.rs-checkbox-checked {
-    .rs-checkbox-checker > label {
-      font-weight: bold;
-    }
+.rs-picker-popup-multi-cascader {
+  .rs-cascade-search-view-row {
+    padding-left: 0;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
-  &-menu-column&-menu-column-uncheckable {
-    .rs-check-item .rs-checkbox-checker > label {
-      padding-left: @picker-item-content-padding-horizontal;
-    }
+  .rs-cascade-search-view-col {
+    padding: 0;
   }
 }
-
-.rs-picker-multi-cascader-menu .rs-picker-cascader-col {
-  padding: 0;
-}
-
-.rs-picker-multi-cascader-menu .rs-picker-cascader-row {
-  padding-left: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}

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;