rsuite 5.55.1 → 5.57.0

package/cjs/Cascader/useActive.js

@@ -0,0 +1,43 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
+var useActive = function useActive(props) {
+  var onOpen = props.onOpen,
+    onClose = props.onClose,
+    onEntered = props.onEntered,
+    onExited = props.onExited,
+    target = props.target,
+    setSearchKeyword = props.setSearchKeyword; // Use component active state to support keyboard events.
+  var _useState = (0, _react.useState)(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var handleEntered = (0, _useEventCallback.default)(function (node) {
+    onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);
+    if (!target.current) {
+      return;
+    }
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    setActive(true);
+  });
+  var handleExited = (0, _useEventCallback.default)(function (node) {
+    onExited === null || onExited === void 0 ? void 0 : onExited(node);
+    if (!target.current) {
+      return;
+    }
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    setActive(false);
+    setSearchKeyword('');
+  });
+  return {
+    active: active,
+    handleEntered: handleEntered,
+    handleExited: handleExited
+  };
+};
+var _default = useActive;
+exports.default = _default;

package/cjs/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/cjs/Checkbox/Checkbox.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _CheckboxGroup = require("../CheckboxGroup");
 var _propTypes2 = require("../internals/propTypes");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
  * The Checkbox component is used for selecting multiple options from a set.
  * @see https://rsuitejs.com/components/checkbox
@@ -36,12 +36,15 @@ var Checkbox = /*#__PURE__*/_react.default.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,
@@ -58,7 +61,7 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClick = props.onClick,
     onCheckboxClick = props.onCheckboxClick,
     onChange = props.onChange,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "checked", "className", "children", "classPrefix", "checkable", "defaultChecked", "title", "inputRef", "inputProps", "indeterminate", "tabIndex", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onClick", "onCheckboxClick", "onChange"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useControlled)(controlledChecked, defaultChecked),
     selfChecked = _useControlled[0],
     setSelfChecked = _useControlled[1],
@@ -78,7 +81,7 @@ var Checkbox = /*#__PURE__*/_react.default.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,
@@ -93,7 +96,8 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     // In uncontrolled situations, use defaultChecked instead of checked
     htmlInputProps[controlled ? 'checked' : 'defaultChecked'] = checked;
   }
-  var handleChange = (0, _react.useCallback)(function (event) {
+  var checkboxRef = (0, _react.useRef)(null);
+  var handleChange = (0, _utils.useEventCallback)(function (event) {
     var nextChecked = event.target.checked;
     if (disabled || readOnly) {
       return;
@@ -101,30 +105,34 @@ var Checkbox = /*#__PURE__*/_react.default.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 = (0, _utils.useEventCallback)(function (event) {
+    // Prevent check when label is not clickable
+    if (!labelClickable && event.target !== checkboxRef.current) {
+      event.preventDefault();
+    }
+  });
+  var labelId = (0, _utils.useUniqueId)('label-');
   if (plaintext) {
     return checked ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
       ref: ref,
       className: classes
     }), children) : null;
   }
-  var input = /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["wrapper"]))),
-    onClick: onCheckboxClick,
-    "aria-disabled": disabled
+  var control = /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["control"])))
   }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, htmlInputProps, inputProps, {
+    "aria-disabled": disabled,
+    "aria-checked": indeterminate ? 'mixed' : checked,
+    "aria-labelledby": labelId,
     name: name,
     value: value,
     type: "checkbox",
-    ref: inputRef,
+    ref: (0, _utils.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.default.createElement("span", {
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["inner"]))),
@@ -138,28 +146,30 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["checker"])))
   }, /*#__PURE__*/_react.default.createElement("label", {
-    title: title
-  }, checkable ? input : null, children)));
+    title: title,
+    onClick: handleLabelClick
+  }, checkable ? control : null, /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
+    id: labelId
+  }, children))));
 });
 Checkbox.displayName = 'Checkbox';
 Checkbox.propTypes = {
   as: _propTypes.default.elementType,
-  title: _propTypes.default.string,
+  checked: _propTypes.default.bool,
+  checkable: _propTypes.default.bool,
   className: _propTypes.default.string,
-  inline: _propTypes.default.bool,
+  children: _propTypes.default.node,
+  classPrefix: _propTypes.default.string,
   disabled: _propTypes.default.bool,
-  checked: _propTypes.default.bool,
   defaultChecked: _propTypes.default.bool,
+  inline: _propTypes.default.bool,
   indeterminate: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  onClick: _propTypes.default.func,
   inputProps: _propTypes.default.any,
   inputRef: _propTypes2.refType,
   value: _propTypes.default.any,
-  children: _propTypes.default.node,
-  classPrefix: _propTypes.default.string,
-  tabIndex: _propTypes.default.number,
-  checkable: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onClick: _propTypes.default.func,
   onCheckboxClick: _propTypes.default.func
 };
 var _default = Checkbox;

package/cjs/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/cjs/InputPicker/InputPicker.js

@@ -124,7 +124,7 @@ var InputPicker = /*#__PURE__*/_react.default.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`');
   }
@@ -579,7 +579,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       listItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
       listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,
       listItemProps: {
-        renderMenuItemCheckbox: renderMenuItemCheckbox
+        renderCheckbox: renderCheckbox
       },
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,

package/cjs/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/cjs/Loader/Loader.js

@@ -29,20 +29,20 @@ var Loader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     content = props.content,
     size = props.size,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "inverse", "backdrop", "speed", "center", "vertical", "content", "size"]);
-  var hasContent = !!content;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
+  var labelId = (0, _utils.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.default.createElement(Component, (0, _extends2.default)({
-    role: "progressbar"
+    role: "status",
+    "aria-labelledby": content ? labelId : undefined
   }, rest, {
     ref: ref,
     className: classes
@@ -52,7 +52,8 @@ var Loader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: withClassPrefix()
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('spin')
-  }), hasContent && /*#__PURE__*/_react.default.createElement("span", {
+  }), content && /*#__PURE__*/_react.default.createElement("span", {
+    id: labelId,
     className: prefix('content')
   }, content)));
 });

package/cjs/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/cjs/MultiCascadeTree/MultiCascadeTree.js

@@ -0,0 +1,131 @@
+'use client';
+"use strict";
+
+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 = _interopRequireDefault(require("react"));
+var _TreeView = _interopRequireDefault(require("./TreeView"));
+var _hooks = require("./hooks");
+var _utils = require("../utils");
+var _SearchView = _interopRequireDefault(require("./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.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 ? 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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _hooks.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 = (0, _utils.useControlled)(valueProp, defaultValue),
+    controlledValue = _useControlled[0];
+  var cascadeValueProps = (0, _extends2.default)({}, itemKeys, {
+    uncheckableItemValues: uncheckableItemValues,
+    cascade: cascade,
+    value: controlledValue,
+    onCheck: onCheck,
+    onChange: onChange
+  });
+  var _useCascadeValue = (0, _hooks.useCascadeValue)(cascadeValueProps, flattenData),
+    value = _useCascadeValue.value,
+    handleCheck = _useCascadeValue.handleCheck;
+  var _useSearch = (0, _hooks.useSearch)({
+      labelKey: labelKey,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      flattenedData: flattenData,
+      uncheckableItemValues: uncheckableItemValues,
+      onSearch: onSearch
+    }),
+    items = _useSearch.items,
+    searchKeyword = _useSearch.searchKeyword,
+    handleSearch = _useSearch.handleSearch;
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix('multi'));
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    className: classes
+  }, rest), searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {
+    data: items,
+    value: value,
+    searchKeyword: searchKeyword,
+    valueKey: valueKey,
+    labelKey: labelKey,
+    childrenKey: childrenKey,
+    disabledItemValues: disabledItemValues,
+    onCheck: handleCheck,
+    onSearch: handleSearch
+  }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {
+    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';
+var _default = MultiCascadeTree;
+exports.default = _default;

package/cjs/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/cjs/MultiCascadeTree/SearchView.js

@@ -0,0 +1,117 @@
+'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 _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+var _utils2 = require("./utils");
+var _utils3 = require("../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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "searchKeyword", "childrenKey", "labelKey", "valueKey", "value", "data", "disabledItemValues", "inputRef", "cascade", "onSearch", "onCheck"]);
+  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 _extends2;
+    var nodes = (0, _treeUtils.getNodeParents)(item);
+    var label = (0, _utils3.highlightLabel)({
+      item: item,
+      labelKey: labelKey,
+      searchKeyword: searchKeyword,
+      render: function render(patch, index) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          key: index,
+          className: prefix('match')
+        }, patch);
+      }
+    });
+    nodes.push((0, _extends3.default)({}, 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 && (0, _utils2.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.default.createElement("div", {
+      role: "treeitem",
+      "aria-disabled": disabled,
+      key: key,
+      className: rowClasses,
+      "data-key": item[valueKey]
+    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+      disabled: disabled,
+      checked: active,
+      value: item[valueKey],
+      indeterminate: indeterminate,
+      onChange: handleChange
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: prefix('col-group')
+    }, nodes.map(function (node, index) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        key: "col-" + index,
+        className: prefix('col')
+      }, node[labelKey]);
+    }))));
+  };
+  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/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;