rsuite 5.55.1 → 5.57.0

package/esm/Checkbox/Checkbox.d.ts

@@ -1,43 +1,85 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
 export declare type ValueType = string | number;
-export interface CheckboxProps<V = ValueType> extends WithAsProps {
-    /** HTML title */
-    title?: string;
-    /** Inline layout */
-    inline?: boolean;
-    /** A checkbox can appear disabled and be unable to change states */
+export interface CheckboxProps<V = ValueType> extends WithAsProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The color of the checkbox when checked or indeterminate
+     *
+     * @version 5.56.0
+     */
+    color?: TypeAttributes.Color;
+    /**
+     * Whether to show checkbox
+     *
+     * @private Used in MultiCascader
+     */
+    checkable?: boolean;
+    /**
+     * A checkbox can appear disabled and be unable to change states
+     */
     disabled?: boolean;
-    /** Make the control readonly */
+    /**
+     * Make the control readonly
+     */
     readOnly?: boolean;
-    /** Render the control as plain text */
+    /**
+     * Render the control as plain text
+     */
     plaintext?: boolean;
-    /** Whether or not checkbox is checked. */
+    /**
+     * Whether or not checkbox is checked.
+     */
     checked?: boolean;
-    /** The initial value of checked. */
+    /**
+     * The initial value of checked.
+     */
     defaultChecked?: boolean;
-    /** Whether or not checkbox is indeterminate. */
+    /**
+     * Whether or not checkbox is indeterminate.
+     */
     indeterminate?: boolean;
-    /** Attributes applied to the input element. */
+    /**
+     * Attributes applied to the input element.
+     */
     inputProps?: React.HTMLAttributes<HTMLInputElement>;
-    /** Pass a ref to the input element. */
+    /**
+     * Pass a ref to the input element.
+     */
     inputRef?: React.Ref<any>;
-    /** The HTML input value. */
+    /**
+     * Inline layout
+     *
+     * @private Used in CheckboxGroup
+     */
+    inline?: boolean;
+    /**
+     * The HTML input value.
+     */
     value?: V;
-    /** A checkbox can receive focus. */
-    tabIndex?: number;
-    /** Whether to show checkbox */
-    checkable?: boolean;
-    /** Used for the name of the form */
+    /**
+     * Used for the name of the form
+     */
     name?: string;
-    /** Called when the user attempts to change the checked state. */
+    /**
+     * Whether the label is clickable
+     *
+     * @private Used in MultiCascader
+     */
+    labelClickable?: boolean;
+    /**
+     * Called when the user attempts to change the checked state.
+     */
     onChange?: (value: V | undefined, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Called when the checkbox or label is clicked. */
+    /**
+     * Called when the checkbox or label is clicked.
+     */
     onClick?: (event: React.SyntheticEvent) => void;
-    /** Called when the checkbox is clicked. */
+    /**
+     * Called when the checkbox is clicked.
+     *
+     * @private Used in MultiCascader
+     */
     onCheckboxClick?: (event: React.SyntheticEvent) => void;
-    /** Called when the user presses down a key. */
-    onKeyDown?: (event: React.KeyboardEvent) => void;
 }
 /**
  * The Checkbox component is used for selecting multiple options from a set.

package/esm/Checkbox/Checkbox.js

@@ -2,10 +2,10 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject, _templateObject2, _templateObject3;
-import React, { useContext, useCallback, useMemo } from 'react';
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import React, { useContext, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useControlled, partitionHTMLProps, useClassNames } from '../utils';
+import { useControlled, partitionHTMLProps, useClassNames, useEventCallback, useUniqueId, mergeRefs } from '../utils';
 import { CheckboxGroupContext } from '../CheckboxGroup';
 import { refType } from '../internals/propTypes';
 /**
@@ -30,12 +30,15 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classPrefix = _props$classPrefix === void 0 ? 'checkbox' : _props$classPrefix,
     _props$checkable = props.checkable,
     checkable = _props$checkable === void 0 ? true : _props$checkable,
+    color = props.color,
     _props$defaultChecked = props.defaultChecked,
     defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
     title = props.title,
     inputRef = props.inputRef,
     inputProps = props.inputProps,
     indeterminate = props.indeterminate,
+    _props$labelClickable = props.labelClickable,
+    labelClickable = _props$labelClickable === void 0 ? true : _props$labelClickable,
     _props$tabIndex = props.tabIndex,
     tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
     _props$disabled = props.disabled,
@@ -52,7 +55,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick = props.onClick,
     onCheckboxClick = props.onCheckboxClick,
     onChange = props.onChange,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "checked", "className", "children", "classPrefix", "checkable", "defaultChecked", "title", "inputRef", "inputProps", "indeterminate", "tabIndex", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onClick", "onCheckboxClick", "onChange"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "checked", "className", "children", "classPrefix", "checkable", "color", "defaultChecked", "title", "inputRef", "inputProps", "indeterminate", "labelClickable", "tabIndex", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onClick", "onCheckboxClick", "onChange"]);
   var _useControlled = useControlled(controlledChecked, defaultChecked),
     selfChecked = _useControlled[0],
     setSelfChecked = _useControlled[1],
@@ -72,7 +75,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var classes = merge(className, withClassPrefix({
+  var classes = merge(className, withClassPrefix(color, {
     inline: inline,
     indeterminate: indeterminate,
     disabled: disabled,
@@ -87,7 +90,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // In uncontrolled situations, use defaultChecked instead of checked
     htmlInputProps[controlled ? 'checked' : 'defaultChecked'] = checked;
   }
-  var handleChange = useCallback(function (event) {
+  var checkboxRef = useRef(null);
+  var handleChange = useEventCallback(function (event) {
     var nextChecked = event.target.checked;
     if (disabled || readOnly) {
       return;
@@ -95,30 +99,34 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setSelfChecked(nextChecked);
     onChange === null || onChange === void 0 ? void 0 : onChange(value, nextChecked, event);
     onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, nextChecked, event);
-  }, [disabled, readOnly, setSelfChecked, onChange, value, onGroupChange]);
+  });
+  var handleLabelClick = useEventCallback(function (event) {
+    // Prevent check when label is not clickable
+    if (!labelClickable && event.target !== checkboxRef.current) {
+      event.preventDefault();
+    }
+  });
+  var labelId = useUniqueId('label-');
   if (plaintext) {
     return checked ? /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
       ref: ref,
       className: classes
     }), children) : null;
   }
-  var input = /*#__PURE__*/React.createElement("span", {
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["wrapper"]))),
-    onClick: onCheckboxClick,
-    "aria-disabled": disabled
+  var control = /*#__PURE__*/React.createElement("span", {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["control"])))
   }, /*#__PURE__*/React.createElement("input", _extends({}, htmlInputProps, inputProps, {
+    "aria-disabled": disabled,
+    "aria-checked": indeterminate ? 'mixed' : checked,
+    "aria-labelledby": labelId,
     name: name,
     value: value,
     type: "checkbox",
-    ref: inputRef,
+    ref: mergeRefs(checkboxRef, inputRef),
     tabIndex: tabIndex,
     readOnly: readOnly,
     disabled: disabled,
-    "aria-disabled": disabled,
-    "aria-checked": indeterminate ? 'mixed' : checked,
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    },
+    onClick: onCheckboxClick,
     onChange: handleChange
   })), /*#__PURE__*/React.createElement("span", {
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["inner"]))),
@@ -132,28 +140,30 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["checker"])))
   }, /*#__PURE__*/React.createElement("label", {
-    title: title
-  }, checkable ? input : null, children)));
+    title: title,
+    onClick: handleLabelClick
+  }, checkable ? control : null, /*#__PURE__*/React.createElement("span", {
+    className: prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["label"]))),
+    id: labelId
+  }, children))));
 });
 Checkbox.displayName = 'Checkbox';
 Checkbox.propTypes = {
   as: PropTypes.elementType,
-  title: PropTypes.string,
+  checked: PropTypes.bool,
+  checkable: PropTypes.bool,
   className: PropTypes.string,
-  inline: PropTypes.bool,
+  children: PropTypes.node,
+  classPrefix: PropTypes.string,
   disabled: PropTypes.bool,
-  checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
+  inline: PropTypes.bool,
   indeterminate: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
   inputProps: PropTypes.any,
   inputRef: refType,
   value: PropTypes.any,
-  children: PropTypes.node,
-  classPrefix: PropTypes.string,
-  tabIndex: PropTypes.number,
-  checkable: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
   onCheckboxClick: PropTypes.func
 };
 export default Checkbox;

package/esm/InlineEdit/InlineEdit.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { type ChildrenProps } from './renderChildren';
-export interface InlineEditProps extends WithAsProps {
+export interface InlineEditProps extends Omit<WithAsProps, 'children'> {
     /**
      * If true, the InlineEdit will be disabled.
      */

package/esm/InputPicker/InputPicker.js

@@ -118,7 +118,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     trigger = _useContext.trigger,
     disabledOptions = _useContext.disabledOptions,
     onTagRemove = _useContext.onTagRemove,
-    renderMenuItemCheckbox = _useContext.renderMenuItemCheckbox;
+    renderCheckbox = _useContext.renderCheckbox;
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
@@ -573,7 +573,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       listItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
       listItemAs: multi ? ListCheckItem : ListItem,
       listItemProps: {
-        renderMenuItemCheckbox: renderMenuItemCheckbox
+        renderCheckbox: renderCheckbox
       },
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,

package/esm/InputPicker/InputPickerContext.d.ts

@@ -20,7 +20,7 @@ export interface InputPickerContextProps extends TagOnlyProps {
      */
     disabledOptions?: boolean;
     /** Custom render checkbox on menu item */
-    renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
+    renderCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
 }
 declare const InputPickerContext: React.Context<InputPickerContextProps>;
 export default InputPickerContext;

package/esm/Loader/Loader.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames } from '../utils';
+import { useClassNames, useUniqueId } from '../utils';
 import { oneOf } from '../internals/propTypes';
 /**
  * The `Loader` component is used to indicate the loading state of a page or a section.
@@ -24,20 +24,20 @@ var Loader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     content = props.content,
     size = props.size,
     rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "inverse", "backdrop", "speed", "center", "vertical", "content", "size"]);
-  var hasContent = !!content;
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
+  var labelId = useUniqueId('loader-label-');
   var classes = merge(className, prefix('wrapper', "speed-" + speed, size, {
     'backdrop-wrapper': backdrop,
-    'has-content': hasContent,
     vertical: vertical,
     inverse: inverse,
     center: center
   }));
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "progressbar"
+    role: "status",
+    "aria-labelledby": content ? labelId : undefined
   }, rest, {
     ref: ref,
     className: classes
@@ -47,7 +47,8 @@ var Loader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: withClassPrefix()
   }, /*#__PURE__*/React.createElement("span", {
     className: prefix('spin')
-  }), hasContent && /*#__PURE__*/React.createElement("span", {
+  }), content && /*#__PURE__*/React.createElement("span", {
+    id: labelId,
     className: prefix('content')
   }, content)));
 });

package/esm/MultiCascadeTree/MultiCascadeTree.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DataItemValue } from '../@types/common';
+import type { MultiCascadeTreeProps } from './types';
+/**
+ * The `MultiCascadeTree` component is used to select multiple values from cascading options.
+ * @see https://rsuitejs.com/components/multi-cascade-tree/
+ */
+declare const MultiCascadeTree: React.ForwardRefExoticComponent<MultiCascadeTreeProps<DataItemValue, DataItemValue[]> & React.RefAttributes<unknown>>;
+export default MultiCascadeTree;

package/esm/MultiCascadeTree/MultiCascadeTree.js

@@ -0,0 +1,125 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import TreeView from './TreeView';
+import { useCascadeValue, useSelect, useSearch } from './hooks';
+import { useClassNames, useControlled } from '../utils';
+import SearchView from './SearchView';
+var emptyArray = [];
+
+/**
+ * The `MultiCascadeTree` component is used to select multiple values from cascading options.
+ * @see https://rsuitejs.com/components/multi-cascade-tree/
+ */
+var MultiCascadeTree = /*#__PURE__*/React.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 ? emptyArray : _props$data,
+    defaultValue = props.defaultValue,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'cascade-tree' : _props$classPrefix,
+    valueProp = props.value,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    _props$childrenKey = props.childrenKey,
+    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
+    _props$cascade = props.cascade,
+    cascade = _props$cascade === void 0 ? true : _props$cascade,
+    columnWidth = props.columnWidth,
+    columnHeight = props.columnHeight,
+    searchable = props.searchable,
+    _props$uncheckableIte = props.uncheckableItemValues,
+    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,
+    getChildren = props.getChildren,
+    renderColumn = props.renderColumn,
+    renderTreeNode = props.renderTreeNode,
+    onSelect = props.onSelect,
+    onCheck = props.onCheck,
+    onChange = props.onChange,
+    onSearch = props.onSearch,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "data", "defaultValue", "className", "classPrefix", "value", "valueKey", "labelKey", "childrenKey", "disabledItemValues", "cascade", "columnWidth", "columnHeight", "searchable", "uncheckableItemValues", "getChildren", "renderColumn", "renderTreeNode", "onSelect", "onCheck", "onChange", "onSearch"]);
+  var itemKeys = {
+    childrenKey: childrenKey,
+    labelKey: labelKey,
+    valueKey: valueKey
+  };
+  var _useSelect = useSelect({
+      data: data,
+      childrenKey: childrenKey,
+      labelKey: labelKey,
+      valueKey: valueKey,
+      onSelect: onSelect,
+      getChildren: getChildren
+    }),
+    selectedPaths = _useSelect.selectedPaths,
+    flattenData = _useSelect.flattenData,
+    columnData = _useSelect.columnData,
+    handleSelect = _useSelect.handleSelect;
+  var _useControlled = useControlled(valueProp, defaultValue),
+    controlledValue = _useControlled[0];
+  var cascadeValueProps = _extends({}, itemKeys, {
+    uncheckableItemValues: uncheckableItemValues,
+    cascade: cascade,
+    value: controlledValue,
+    onCheck: onCheck,
+    onChange: onChange
+  });
+  var _useCascadeValue = useCascadeValue(cascadeValueProps, flattenData),
+    value = _useCascadeValue.value,
+    handleCheck = _useCascadeValue.handleCheck;
+  var _useSearch = useSearch({
+      labelKey: labelKey,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      flattenedData: flattenData,
+      uncheckableItemValues: uncheckableItemValues,
+      onSearch: onSearch
+    }),
+    items = _useSearch.items,
+    searchKeyword = _useSearch.searchKeyword,
+    handleSearch = _useSearch.handleSearch;
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix('multi'));
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    className: classes
+  }, rest), searchable && /*#__PURE__*/React.createElement(SearchView, {
+    data: items,
+    value: value,
+    searchKeyword: searchKeyword,
+    valueKey: valueKey,
+    labelKey: labelKey,
+    childrenKey: childrenKey,
+    disabledItemValues: disabledItemValues,
+    onCheck: handleCheck,
+    onSearch: handleSearch
+  }), !searchKeyword && /*#__PURE__*/React.createElement(TreeView, {
+    cascade: cascade,
+    columnWidth: columnWidth,
+    columnHeight: columnHeight,
+    uncheckableItemValues: uncheckableItemValues,
+    disabledItemValues: disabledItemValues,
+    valueKey: valueKey,
+    labelKey: labelKey,
+    childrenKey: childrenKey,
+    classPrefix: classPrefix,
+    cascadeData: columnData,
+    cascadePaths: selectedPaths,
+    value: value,
+    onSelect: handleSelect,
+    onCheck: handleCheck,
+    renderColumn: renderColumn,
+    renderTreeNode: renderTreeNode
+  }));
+});
+MultiCascadeTree.displayName = 'MultiCascadeTree';
+export default MultiCascadeTree;

package/esm/MultiCascadeTree/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;
+    childrenKey: string;
+    value: T[];
+    data: ItemDataType<T>[];
+    disabledItemValues: any[];
+    cascade?: boolean;
+    onSearch: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onCheck: (item: ItemDataType<T>, event: React.SyntheticEvent, checked: boolean) => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+declare function SearchView<T>(props: SearchViewProps<T>): JSX.Element;
+export default SearchView;

package/esm/MultiCascadeTree/SearchView.js

@@ -0,0 +1,111 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import { useClassNames, useCustom } from '../utils';
+import { getNodeParents } from '../utils/treeUtils';
+import SearchBox from '../internals/SearchBox';
+import Checkbox from '../Checkbox';
+import { isSomeChildChecked } from './utils';
+import { highlightLabel } from '../CascadeTree/utils';
+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,
+    childrenKey = props.childrenKey,
+    labelKey = props.labelKey,
+    valueKey = props.valueKey,
+    value = props.value,
+    data = props.data,
+    disabledItemValues = props.disabledItemValues,
+    inputRef = props.inputRef,
+    cascade = props.cascade,
+    onSearch = props.onSearch,
+    onCheck = props.onCheck,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "searchKeyword", "childrenKey", "labelKey", "valueKey", "value", "data", "disabledItemValues", "inputRef", "cascade", "onSearch", "onCheck"]);
+  var _useClassNames = useClassNames(classPrefix),
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix,
+    withClassPrefix = _useClassNames.withClassPrefix,
+    rootPrefix = _useClassNames.rootPrefix;
+  var classes = merge(className, withClassPrefix());
+  var _useCustom = useCustom('Picker'),
+    locale = _useCustom.locale;
+  var renderSearchRow = function renderSearchRow(item, key) {
+    var _extends2;
+    var nodes = getNodeParents(item);
+    var label = highlightLabel({
+      item: item,
+      labelKey: labelKey,
+      searchKeyword: searchKeyword,
+      render: function render(patch, index) {
+        return /*#__PURE__*/React.createElement("span", {
+          key: index,
+          className: prefix('match')
+        }, patch);
+      }
+    });
+    nodes.push(_extends({}, item, (_extends2 = {}, _extends2[labelKey] = label, _extends2)));
+    var active = value.some(function (value) {
+      if (cascade) {
+        return nodes.some(function (node) {
+          return node[valueKey] === value;
+        });
+      }
+      return item[valueKey] === value;
+    });
+    var disabled = disabledItemValues.some(function (value) {
+      return nodes.some(function (node) {
+        return node[valueKey] === value;
+      });
+    });
+    var rowClasses = prefix('row', {
+      'row-disabled': disabled
+    });
+    var indeterminate = cascade && !active && isSomeChildChecked(item, value, {
+      valueKey: valueKey,
+      childrenKey: childrenKey
+    });
+    var handleChange = function handleChange(_value, checked, event) {
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(item, event, checked);
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      role: "treeitem",
+      "aria-disabled": disabled,
+      key: key,
+      className: rowClasses,
+      "data-key": item[valueKey]
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      disabled: disabled,
+      checked: active,
+      value: item[valueKey],
+      indeterminate: indeterminate,
+      onChange: handleChange
+    }, /*#__PURE__*/React.createElement("span", {
+      className: prefix('col-group')
+    }, nodes.map(function (node, index) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: "col-" + index,
+        className: prefix('col')
+      }, node[labelKey]);
+    }))));
+  };
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classes
+  }, rest), /*#__PURE__*/React.createElement(SearchBox, {
+    placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
+    onChange: onSearch,
+    value: searchKeyword,
+    inputRef: inputRef
+  }), searchKeyword !== '' && /*#__PURE__*/React.createElement("div", {
+    className: prefix('panel'),
+    "data-layer": 0,
+    role: "tree"
+  }, data.length ? data.map(renderSearchRow) : /*#__PURE__*/React.createElement("div", {
+    className: merge(prefix('none'), rootPrefix('picker-none'))
+  }, locale.noResultsText)));
+}
+export default SearchView;

package/esm/MultiCascadeTree/TreeView.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import type { CascadeColumn } from '../CascadeTree/types';
+export interface TreeViewProps<T = any> extends WithAsProps {
+    disabledItemValues?: T[];
+    value: T[];
+    childrenKey: string;
+    valueKey: string;
+    labelKey: string;
+    columnWidth?: number;
+    columnHeight?: number | string;
+    cascade?: boolean;
+    cascadeData: (readonly ItemDataType<T>[])[];
+    cascadePaths?: ItemDataType<T>[];
+    uncheckableItemValues: T[];
+    renderTreeNode?: (node: React.ReactNode, item: ItemDataType<T>) => React.ReactNode;
+    renderColumn?: (childNodes: React.ReactNode, column: CascadeColumn<T>) => React.ReactNode;
+    onCheck?: (node: ItemDataType<T>, event: React.SyntheticEvent, checked: boolean) => void;
+    onSelect?: (node: ItemDataType<T>, cascadePaths: ItemDataType<T>[], event: React.SyntheticEvent) => void;
+}
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;