rsuite 5.50.0 → 5.52.0

package/cjs/Cascader/DropdownMenu.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { ValueType } from './Cascader';
 declare type SetLike<T = unknown> = {
     has(value: T): boolean;
 };
-export interface DropdownMenuProps extends Omit<WithAsProps, 'classPrefix'> {
+export interface TreeViewProps extends Omit<WithAsProps, 'classPrefix'> {
     classPrefix: string;
     disabledItemValues: ValueType[];
     activeItemValue?: ValueType | null;
@@ -21,21 +20,5 @@ export interface DropdownMenuProps extends Omit<WithAsProps, 'classPrefix'> {
     renderMenu?: (items: readonly ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
     onSelect?: (node: ItemDataType, cascadePaths: ItemDataType[], isLeafNode: boolean, event: React.MouseEvent) => void;
 }
-declare const DropdownMenu: RsRefForwardingComponent<'div', DropdownMenuProps>;
-export declare const dropdownMenuPropTypes: {
-    classPrefix: PropTypes.Requireable<string>;
-    disabledItemValues: PropTypes.Requireable<any[]>;
-    activeItemValue: PropTypes.Requireable<any>;
-    childrenKey: PropTypes.Requireable<string>;
-    valueKey: PropTypes.Requireable<string>;
-    labelKey: PropTypes.Requireable<string>;
-    menuWidth: PropTypes.Requireable<number>;
-    menuHeight: PropTypes.Requireable<string | number>;
-    className: PropTypes.Requireable<string>;
-    renderMenuItem: PropTypes.Requireable<(...args: any[]) => any>;
-    renderMenu: PropTypes.Requireable<(...args: any[]) => any>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    cascadeData: PropTypes.Requireable<any[]>;
-    cascadePaths: PropTypes.Requireable<any[]>;
-};
-export default DropdownMenu;
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;

package/cjs/Cascader/DropdownMenu.js

@@ -4,22 +4,21 @@
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = exports.dropdownMenuPropTypes = void 0;
+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 _propTypes = _interopRequireDefault(require("prop-types"));
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
 var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _utils = require("../utils");
-var _Picker = require("../Picker");
+var _Picker = require("../internals/Picker");
 var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
 var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
 var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
 var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 var emptyArray = [];
-var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     activeItemValue = props.activeItemValue,
@@ -42,17 +41,22 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     loadingItemsSet = props.loadingItemsSet,
     _props$labelKey = props.labelKey,
     labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    style = props.style,
     renderMenu = props.renderMenu,
     renderMenuItem = props.renderMenuItem,
     onSelect = props.onSelect,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "renderMenu", "renderMenuItem", "onSelect"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderMenu", "renderMenuItem", "onSelect"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var classes = merge(className, prefix('items'));
   var rootRef = (0, _react.useRef)();
-  var _useCustom = (0, _utils.useCustom)('DropdownMenu'),
+  var _useCustom = (0, _utils.useCustom)(),
     rtl = _useCustom.rtl;
+  var _useCombobox = (0, _Picker.useCombobox)(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
   (0, _react.useEffect)(function () {
     var _rootRef$current;
     var columns = ((_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelectorAll('[data-type="column"]')) || [];
@@ -71,7 +75,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }
     });
   }, [prefix]);
-  var getCascadePaths = (0, _react.useCallback)(function (layer, node) {
+  var getCascadePaths = function getCascadePaths(layer, node) {
     var paths = [];
     for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
       if (i < layer - 1 && cascadePaths) {
@@ -80,14 +84,19 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
     paths.push(node);
     return paths;
-  }, [cascadeData, cascadePaths]);
-  var handleSelect = function handleSelect(layer, node, event) {
+  };
+  var handleSelect = (0, _utils.useEventCallback)(function (layer, node, event) {
     var isLeafNode = (0, _isNil.default)(node[childrenKey]);
     var cascadePaths = getCascadePaths(layer + 1, node);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);
-  };
-  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus) {
+  });
+  var renderCascadeNode = function renderCascadeNode(nodeProps) {
     var _loadingItemsSet$has;
+    var node = nodeProps.node,
+      index = nodeProps.index,
+      layer = nodeProps.layer,
+      focus = nodeProps.focus,
+      size = nodeProps.size;
     var children = node[childrenKey];
     var value = node[valueKey];
     var label = node[labelKey];
@@ -99,16 +108,19 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     // Use `value` in keys when If `value` is string or number
     var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
     var Icon = loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;
-    return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuItem, {
-      classPrefix: "picker-cascader-menu-item",
+    return /*#__PURE__*/_react.default.createElement(_Picker.ListItem, {
       as: 'li',
       role: "treeitem",
+      "aria-level": layer + 1,
+      "aria-setsize": size,
+      "aria-posinset": index + 1,
+      "aria-label": typeof label === 'string' ? label : undefined,
+      classPrefix: "picker-cascader-menu-item",
       key: layer + "-" + onlyKey,
       disabled: disabled,
       active: !(0, _isUndefined.default)(activeItemValue) && (0, _utils.shallowEqual)(activeItemValue, value),
       focus: focus,
       value: value,
-      "aria-owns": node.children ? 'treeitem-' + value + '-children' : undefined,
       className: children ? prefix('has-children') : undefined,
       onSelect: function onSelect(_value, event) {
         return handleSelect(layer, node, event);
@@ -118,56 +130,44 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       spin: loading
     }) : null);
   };
-  var styles = {
-    width: cascadeData.length * menuWidth
-  };
   var cascadeNodes = cascadeData.map(function (children, layer) {
     var onlyKey = layer + "_" + children.length;
     var parentNode = cascadePaths[layer - 1];
-    var menu = /*#__PURE__*/_react.default.createElement("ul", {
-      role: layer === 0 ? 'none presentation' : 'group',
-      id: parentNode ? 'treeitem-' + parentNode[valueKey] + '-children' : undefined
-    }, children.map(function (item, index) {
-      return renderCascadeNode(item, index, layer, cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]));
+    var menu = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (item, index) {
+      var focus = cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]);
+      return renderCascadeNode({
+        node: item,
+        index: index,
+        layer: layer,
+        focus: focus,
+        size: children.length
+      });
     }));
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: onlyKey,
-      className: prefix('column'),
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      role: "group",
       "data-layer": layer,
       "data-type": 'column',
+      key: onlyKey,
+      className: prefix('column'),
       style: {
         height: menuHeight,
         width: menuWidth
       }
     }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
   });
+  var styles = (0, _extends2.default)({}, style, {
+    width: cascadeData.length * menuWidth
+  });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "tree"
+    role: "tree",
+    id: id + "-" + popupType,
+    "aria-labelledby": labelId
   }, rest, {
     ref: (0, _utils.mergeRefs)(rootRef, ref),
-    className: classes
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes,
     style: styles
-  }, cascadeNodes));
+  }), cascadeNodes);
 });
-var dropdownMenuPropTypes = {
-  classPrefix: _propTypes.default.string,
-  disabledItemValues: _propTypes.default.array,
-  activeItemValue: _propTypes.default.any,
-  childrenKey: _propTypes.default.string,
-  valueKey: _propTypes.default.string,
-  labelKey: _propTypes.default.string,
-  menuWidth: _propTypes.default.number,
-  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  className: _propTypes.default.string,
-  renderMenuItem: _propTypes.default.func,
-  renderMenu: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  cascadeData: _propTypes.default.array,
-  cascadePaths: _propTypes.default.array
-};
-exports.dropdownMenuPropTypes = dropdownMenuPropTypes;
-DropdownMenu.displayName = 'DropdownMenu';
-DropdownMenu.propTypes = dropdownMenuPropTypes;
-var _default = DropdownMenu;
+TreeView.displayName = 'TreeView';
+var _default = TreeView;
 exports.default = _default;

package/cjs/Cascader/TreeView.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { ValueType } from './Cascader';
+declare type SetLike<T = unknown> = {
+    has(value: T): boolean;
+};
+export interface TreeViewProps extends Omit<WithAsProps, 'classPrefix'> {
+    classPrefix: string;
+    disabledItemValues: ValueType[];
+    activeItemValue?: ValueType | null;
+    childrenKey: string;
+    cascadeData: (readonly ItemDataType[])[];
+    loadingItemsSet?: SetLike<ItemDataType>;
+    cascadePaths: ItemDataType[];
+    valueKey: string;
+    labelKey: string;
+    menuWidth?: number;
+    menuHeight?: number | string;
+    renderMenuItem?: (itemLabel: React.ReactNode, item: ItemDataType) => React.ReactNode;
+    renderMenu?: (items: readonly ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
+    onSelect?: (node: ItemDataType, cascadePaths: ItemDataType[], isLeafNode: boolean, event: React.MouseEvent) => void;
+}
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;

package/cjs/Cascader/TreeView.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 _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _utils = require("../utils");
+var _Picker = require("../internals/Picker");
+var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
+var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
+var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
+var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
+var emptyArray = [];
+var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    activeItemValue = props.activeItemValue,
+    classPrefix = props.classPrefix,
+    className = props.className,
+    _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$menuWidth = props.menuWidth,
+    menuWidth = _props$menuWidth === void 0 ? 120 : _props$menuWidth,
+    _props$menuHeight = props.menuHeight,
+    menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$cascadeData = props.cascadeData,
+    cascadeData = _props$cascadeData === void 0 ? emptyArray : _props$cascadeData,
+    _props$cascadePaths = props.cascadePaths,
+    cascadePaths = _props$cascadePaths === void 0 ? emptyArray : _props$cascadePaths,
+    loadingItemsSet = props.loadingItemsSet,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    style = props.style,
+    renderMenu = props.renderMenu,
+    renderMenuItem = props.renderMenuItem,
+    onSelect = props.onSelect,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderMenu", "renderMenuItem", "onSelect"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
+  var classes = merge(className, prefix('items'));
+  var rootRef = (0, _react.useRef)();
+  var _useCustom = (0, _utils.useCustom)(),
+    rtl = _useCustom.rtl;
+  var _useCombobox = (0, _Picker.useCombobox)(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
+  (0, _react.useEffect)(function () {
+    var _rootRef$current;
+    var columns = ((_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelectorAll('[data-type="column"]')) || [];
+    columns.forEach(function (column) {
+      if (!column) {
+        return;
+      }
+      var activeItem = column.querySelector("." + prefix('item-focus'));
+      if (!activeItem) {
+        activeItem = column.querySelector("." + prefix('item-active'));
+      }
+      if (activeItem) {
+        var position = (0, _getPosition.default)(activeItem, column);
+        // Let the active option scroll into view.
+        (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);
+      }
+    });
+  }, [prefix]);
+  var getCascadePaths = function getCascadePaths(layer, node) {
+    var paths = [];
+    for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
+      if (i < layer - 1 && cascadePaths) {
+        paths.push(cascadePaths[i]);
+      }
+    }
+    paths.push(node);
+    return paths;
+  };
+  var handleSelect = (0, _utils.useEventCallback)(function (layer, node, event) {
+    var isLeafNode = (0, _isNil.default)(node[childrenKey]);
+    var cascadePaths = getCascadePaths(layer + 1, node);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);
+  });
+  var renderCascadeNode = function renderCascadeNode(nodeProps) {
+    var _loadingItemsSet$has;
+    var node = nodeProps.node,
+      index = nodeProps.index,
+      layer = nodeProps.layer,
+      focus = nodeProps.focus,
+      size = nodeProps.size;
+    var children = node[childrenKey];
+    var value = node[valueKey];
+    var label = node[labelKey];
+    var disabled = disabledItemValues.some(function (disabledValue) {
+      return (0, _utils.shallowEqual)(disabledValue, value);
+    });
+    var loading = (_loadingItemsSet$has = loadingItemsSet === null || loadingItemsSet === void 0 ? void 0 : loadingItemsSet.has(node)) !== null && _loadingItemsSet$has !== void 0 ? _loadingItemsSet$has : false;
+
+    // Use `value` in keys when If `value` is string or number
+    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
+    var Icon = loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;
+    return /*#__PURE__*/_react.default.createElement(_Picker.ListItem, {
+      as: 'li',
+      role: "treeitem",
+      "aria-level": layer + 1,
+      "aria-setsize": size,
+      "aria-posinset": index + 1,
+      "aria-label": typeof label === 'string' ? label : undefined,
+      classPrefix: "picker-cascader-menu-item",
+      key: layer + "-" + onlyKey,
+      disabled: disabled,
+      active: !(0, _isUndefined.default)(activeItemValue) && (0, _utils.shallowEqual)(activeItemValue, value),
+      focus: focus,
+      value: value,
+      className: children ? prefix('has-children') : undefined,
+      onSelect: function onSelect(_value, event) {
+        return handleSelect(layer, node, event);
+      }
+    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {
+      className: prefix('caret'),
+      spin: loading,
+      "data-testid": "spinner"
+    }) : null);
+  };
+  var cascadeNodes = cascadeData.map(function (children, layer) {
+    var onlyKey = layer + "_" + children.length;
+    var parentNode = cascadePaths[layer - 1];
+    var menu = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (item, index) {
+      var focus = cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]);
+      return renderCascadeNode({
+        node: item,
+        index: index,
+        layer: layer,
+        focus: focus,
+        size: children.length
+      });
+    }));
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      role: "group",
+      "data-layer": layer,
+      "data-type": 'column',
+      key: onlyKey,
+      className: prefix('column'),
+      style: {
+        height: menuHeight,
+        width: menuWidth
+      }
+    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
+  });
+  var styles = (0, _extends2.default)({}, style, {
+    width: cascadeData.length * menuWidth
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    role: "tree",
+    id: id + "-" + popupType,
+    "aria-labelledby": labelId
+  }, rest, {
+    ref: (0, _utils.mergeRefs)(rootRef, ref),
+    className: classes,
+    style: styles
+  }), cascadeNodes);
+});
+TreeView.displayName = 'TreeView';
+var _default = TreeView;
+exports.default = _default;

package/cjs/CheckPicker/CheckPicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerHandle, PickerToggleProps } from '../Picker';
+import { PickerHandle, PickerToggleProps } from '../internals/Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];

package/cjs/CheckPicker/CheckPicker.js

@@ -20,7 +20,9 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _treeUtils = require("../utils/treeUtils");
 var _utils = require("../utils");
 var _getDataGroupBy = require("../utils/getDataGroupBy");
-var _Picker = require("../Picker");
+var _Picker = require("../internals/Picker");
+var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
+var _propTypes2 = require("../internals/propTypes");
 var _templateObject;
 var emptyArray = [];
 /**
@@ -252,7 +254,7 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       hasValue = false;
     }
   }
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderPopup = function renderPopup(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -280,8 +282,7 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     } else if (typeof sort === 'function') {
       items = items.sort(sort(false));
     }
-    var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
       listProps: listProps,
       listRef: list,
       disabledItemValues: disabledItemValues,
@@ -291,7 +292,7 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       renderMenuItem: renderMenuItem,
       maxHeight: menuMaxHeight,
       classPrefix: 'picker-check-menu',
-      dropdownMenuItemAs: _Picker.DropdownMenuCheckItem,
+      listItemAs: _Picker.ListCheckItem,
       activeItemValues: value,
       focusItemValue: focusItemValue,
       data: [].concat(filteredStickyItems, items)
@@ -305,14 +306,14 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }) : /*#__PURE__*/_react.default.createElement("div", {
       className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
       onKeyDown: onPickerKeyDown,
       target: trigger
-    }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
+    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
@@ -330,19 +331,20 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    id: id,
+    multiple: true,
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
     onEnter: (0, _utils.createChainedFunction)(initStickyItems, onEnter),
     onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
     onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderPopup
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     style: style,
     ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     ref: target,
     appearance: appearance,
     disabled: disabled,
@@ -353,13 +355,14 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     hasValue: hasValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
 });
 CheckPicker.displayName = 'CheckPicker';
 CheckPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {
   locale: _propTypes.default.any,
-  appearance: _propTypes.default.oneOf(['default', 'subtle']),
+  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),
   menuAutoWidth: _propTypes.default.bool,
   menuMaxHeight: _propTypes.default.number,
   renderMenu: _propTypes.default.func,

package/cjs/CheckTreePicker/CheckTreeNode.d.ts

@@ -21,8 +21,8 @@ export interface CheckTreeNodeProps extends WithAsProps {
     allUncheckable?: boolean;
     onExpand?: (nodeData: any) => void;
     onSelect?: (nodeData: any, event: React.SyntheticEvent) => void;
-    onRenderTreeIcon?: (nodeData: any, expandIcon?: React.ReactNode) => React.ReactNode;
-    onRenderTreeNode?: (nodeData: any) => React.ReactNode;
+    renderTreeIcon?: (nodeData: any, expandIcon?: React.ReactNode) => React.ReactNode;
+    renderTreeNode?: (nodeData: any) => React.ReactNode;
 }
 declare const CheckTreeNode: RsRefForwardingComponent<'div', CheckTreeNodeProps>;
 export default CheckTreeNode;