rsuite 5.49.0 → 5.51.0

package/cjs/Cascader/DropdownMenu.js

@@ -4,11 +4,10 @@
 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"));
@@ -19,7 +18,7 @@ var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRigh
 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("../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,4 +1,4 @@
-import React, { Ref } from 'react';
+import React from 'react';
 import { PickerLocale } from '../locales';
 import { PickerHandle, PickerToggleProps } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
@@ -12,7 +12,7 @@ export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerL
 }
 export interface CheckPickerComponent {
     <T>(props: CheckPickerProps<T> & {
-        ref?: Ref<PickerHandle>;
+        ref?: React.Ref<PickerHandle>;
     }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;

package/cjs/CheckPicker/CheckPicker.js

@@ -86,11 +86,13 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClose = props.onClose,
     onOpen = props.onOpen,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "classPrefix", "countable", "data", "disabledItemValues", "valueKey", "labelKey", "searchable", "virtualized", "cleanable", "placement", "menuAutoWidth", "menuMaxHeight", "menuClassName", "menuStyle", "locale", "placeholder", "disabled", "toggleAs", "style", "sticky", "value", "defaultValue", "groupBy", "listProps", "id", "sort", "searchBy", "renderMenuItem", "renderMenuGroup", "renderValue", "renderExtraFooter", "renderMenu", "onGroupTitleClick", "onSearch", "onEnter", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onClose", "onOpen"]);
-  var triggerRef = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
-  var listRef = (0, _react.useRef)(null);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale;
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue || []),
@@ -100,18 +102,18 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       data: data,
       valueKey: valueKey,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     onFocusItem = _useFocusItemValue.onKeyDown;
-  var handleSearchCallback = (0, _react.useCallback)(function (searchKeyword, filteredData, event) {
+  var handleSearchCallback = (0, _utils.useEventCallback)(function (searchKeyword, filteredData, event) {
     var _filteredData$;
     // The first option after filtering is the focus.
     setFocusItemValue(filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
-  }, [setFocusItemValue, onSearch, valueKey]);
+  });
 
   // Use search keywords to filter options.
   var _useSearch = (0, _Picker.useSearch)(data, {
@@ -145,17 +147,17 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
     setStickyItems(nextStickyItems);
   };
-  var handleChangeValue = (0, _react.useCallback)(function (value, event) {
+  var handleChangeValue = (0, _utils.useEventCallback)(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleClean = (0, _react.useCallback)(function (event) {
+  });
+  var handleClean = (0, _utils.useEventCallback)(function (event) {
     if (disabled || !cleanable) {
       return;
     }
     setValue([]);
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
     handleChangeValue([], event);
-  }, [disabled, cleanable, setValue, onClean, handleChangeValue]);
+  });
   var handleMenuPressEnter = function handleMenuPressEnter(event) {
     var nextValue = (0, _clone.default)(value);
     if (!focusItemValue) {
@@ -179,10 +181,10 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     toggle: !focusItemValue || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onMenuKeyDown: onFocusItem,
@@ -192,10 +194,10 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setFocusItemValue(null);
     }
   }, rest));
-  var handleSelect = (0, _react.useCallback)(function (nextItemValue, item, event) {
+  var handleSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextItemValue, item, event);
-  }, [onSelect]);
-  var handleItemSelect = (0, _react.useCallback)(function (nextItemValue, item, event, checked) {
+  });
+  var handleItemSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event, checked) {
     var nextValue = (0, _clone.default)(value);
     if (checked) {
       nextValue.push(nextItemValue);
@@ -208,22 +210,16 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setFocusItemValue(nextItemValue);
     handleSelect(nextValue, item, event);
     handleChangeValue(nextValue, event);
-  }, [value, setValue, handleSelect, handleChangeValue, setFocusItemValue]);
-  var handleEntered = (0, _react.useCallback)(function () {
+  });
+  var handleEntered = (0, _utils.useEventCallback)(function () {
     setActive(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen]);
-  var handleExited = (0, _react.useCallback)(function () {
+  });
+  var handleExited = (0, _utils.useEventCallback)(function () {
     resetSearch();
     setFocusItemValue(null);
     setActive(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, setFocusItemValue, resetSearch]);
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
   var selectedItems = data.filter(function (item) {
     return value === null || value === void 0 ? void 0 : value.some(function (val) {
@@ -256,7 +252,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;
@@ -284,10 +280,9 @@ 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: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -295,7 +290,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)
@@ -309,18 +304,18 @@ 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, {
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
       onKeyDown: onPickerKeyDown,
-      target: triggerRef
+      target: trigger
     }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
@@ -334,19 +329,21 @@ 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: triggerRef,
+    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
+    style: style,
+    ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     disabled: disabled,
     onClean: handleClean,
@@ -356,7 +353,8 @@ 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';

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;