rsuite 5.49.0 → 5.51.0

package/cjs/MultiCascader/MultiCascader.js

@@ -13,7 +13,7 @@ var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
-var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
+var _TreeView = _interopRequireDefault(require("./TreeView"));
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
 var _utils = require("./utils");
 var _treeUtils = require("../utils/treeUtils");
@@ -120,15 +120,12 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useState2 = (0, _react.useState)(),
     selectedPaths = _useState2[0],
     setSelectedPaths = _useState2[1];
-  var triggerRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef
-  });
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale,
     rtl = _useCustom.rtl;
@@ -145,7 +142,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       valueKey: valueKey,
       defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       },
       callback: (0, _react.useCallback)(function (value) {
         var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(function (item) {
@@ -179,16 +176,16 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useState3 = (0, _react.useState)(''),
     searchKeyword = _useState3[0],
     setSearchKeyword = _useState3[1];
-  var handleEntered = (0, _react.useCallback)(function () {
+  var handleEntered = (0, _utils3.useEventCallback)(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [onOpen]);
-  var handleExited = (0, _react.useCallback)(function () {
+  });
+  var handleExited = (0, _utils3.useEventCallback)(function () {
     setActive(false);
     setSearchKeyword('');
-  }, []);
-  var handleSelect = (0, _react.useCallback)(function (node, cascadePaths, event) {
-    var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;
+  });
+  var handleSelect = (0, _utils3.useEventCallback)(function (node, cascadePaths, event) {
+    var _node$childrenKey, _node$childrenKey2, _trigger$current, _trigger$current$upda;
     setSelectedPaths(cascadePaths);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
     var columnIndex = cascadePaths.length;
@@ -201,7 +198,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         children.then(function (data) {
           node.loading = false;
           node[childrenKey] = data;
-          if (targetRef.current || inline) {
+          if (target.current || inline) {
             addFlattenData(data, node);
             addColumn(data, columnIndex);
           }
@@ -218,9 +215,9 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       // Removes subsequent columns of the current column when the clicked node is a leaf node.
       removeColumnByIndex(columnIndex);
     }
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);
-  }, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);
-  var handleCheck = (0, _react.useCallback)(function (node, event, checked) {
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$upda = _trigger$current.updatePosition) === null || _trigger$current$upda === void 0 ? void 0 : _trigger$current$upda.call(_trigger$current);
+  });
+  var handleCheck = (0, _utils3.useEventCallback)(function (node, event, checked) {
     var nodeValue = node[valueKey];
     var nextValue = [];
     if (cascade) {
@@ -238,38 +235,38 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setValue(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);
-  }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);
-  var handleClean = (0, _react.useCallback)(function (event) {
-    if (disabled || !targetRef.current) {
+  });
+  var handleClean = (0, _utils3.useEventCallback)(function (event) {
+    if (disabled || !target.current) {
       return;
     }
     setSelectedPaths([]);
     setValue([]);
     setColumnData([data]);
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [data, disabled, onChange, setColumnData, setValue]);
-  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {
-    var _overlayRef$current;
+  });
+  var handleMenuPressEnter = (0, _utils3.useEventCallback)(function (event) {
+    var _overlay$current;
     var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
       return item[valueKey] === focusItemValue;
     });
-    var checkbox = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector("[data-key=\"" + focusItemValue + "\"] [type=\"checkbox\"]");
+    var checkbox = (_overlay$current = overlay.current) === null || _overlay$current === void 0 ? void 0 : _overlay$current.querySelector("[data-key=\"" + focusItemValue + "\"] [type=\"checkbox\"]");
     if (checkbox) {
       handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');
     }
-  }, [data, focusItemValue, handleCheck, valueKey]);
+  });
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.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,
     onMenuPressEnter: handleMenuPressEnter
   }, rest));
-  var handleSearch = (0, _react.useCallback)(function (value, event) {
+  var handleSearch = (0, _utils3.useEventCallback)(function (value, event) {
     setSearchKeyword(value);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
     if (value) {
@@ -278,8 +275,8 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       setLayer(selectedPaths.length - 1);
     }
     setKeys([]);
-  }, [onSearch, selectedPaths, setKeys, setLayer]);
-  var getSearchResult = (0, _react.useCallback)(function () {
+  });
+  var getSearchResult = function getSearchResult() {
     var items = [];
     var result = flattenData.filter(function (item) {
       if (uncheckableItemValues.some(function (value) {
@@ -301,7 +298,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }
     }
     return items;
-  }, [flattenData, labelKey, searchKeyword, uncheckableItemValues, valueKey]);
+  };
   var renderSearchRow = function renderSearchRow(item, key) {
     var _extends2;
     var nodes = (0, _treeUtils.getNodeParents)(item);
@@ -337,9 +334,10 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       'cascader-row-focus': item[valueKey] === focusItemValue
     });
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "treeitem",
+      "aria-disabled": disabled,
       key: key,
       className: itemClasses,
-      "aria-disabled": disabled,
       "data-key": item[valueKey]
     }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
       disabled: disabled,
@@ -368,12 +366,13 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     var items = getSearchResult();
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('cascader-search-panel'),
-      "data-layer": 0
+      "data-layer": 0,
+      role: "tree"
     }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('none')
     }, locale.noResultsText));
   };
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderTreeView = function renderTreeView(positionProps, speakerRef) {
     var _ref = positionProps || {},
       left = _ref.left,
       top = _ref.top,
@@ -385,19 +384,18 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     var classes = merge(className, menuClassName, prefix('cascader-menu', 'multi-cascader-menu', {
       inline: inline
     }));
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils3.mergeRefs)(overlayRef, speakerRef),
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
+      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),
       className: classes,
       style: styles,
-      target: triggerRef,
+      target: trigger,
       onKeyDown: onPickerKeyDown
     }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
-    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
-      id: id ? id + "-listbox" : undefined,
+      inputRef: searchInput
+    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_TreeView.default, {
       cascade: cascade,
       menuWidth: menuWidth,
       menuHeight: menuHeight,
@@ -447,25 +445,28 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
   if (inline) {
-    return renderDropdownMenu();
+    return renderTreeView();
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
+    multiple: true,
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),
     onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),
     onExit: (0, _utils3.createChainedFunction)(onClose, onExit),
-    speaker: renderDropdownMenu
+    speaker: renderTreeView
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,
-    ref: targetRef,
+    ref: target,
     onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),
     onKeyDown: onPickerKeyDown,
     cleanable: cleanable && !disabled,

package/cjs/MultiCascader/{DropdownMenu.d.ts → TreeView.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { ValueType } from './MultiCascader';
-export interface DropdownMenuProps extends WithAsProps {
+export interface TreeViewProps extends WithAsProps {
     disabledItemValues: ValueType;
     value: ValueType;
     childrenKey: string;
@@ -21,5 +21,5 @@ export interface DropdownMenuProps extends WithAsProps {
 /**
  * TODO: reuse Menu from Cascader for consistent behavior
  */
-declare const DropdownMenu: RsRefForwardingComponent<'div', DropdownMenuProps>;
-export default DropdownMenu;
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;

package/cjs/MultiCascader/{DropdownMenu.js → TreeView.js}

@@ -1,14 +1,12 @@
 '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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
 var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
 var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
@@ -20,7 +18,7 @@ var emptyArray = [];
 /**
  * TODO: reuse Menu from Cascader for consistent behavior
  */
-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,
     _props$classPrefix = props.classPrefix,
@@ -46,18 +44,24 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
     _props$labelKey = props.labelKey,
     labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    style = props.style,
     renderMenuItem = props.renderMenuItem,
     renderMenu = props.renderMenu,
     _onCheck = props.onCheck,
     onSelect = props.onSelect,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "renderMenuItem", "renderMenu", "onCheck", "onSelect"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "style", "renderMenuItem", "renderMenu", "onCheck", "onSelect"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var classes = merge(className, prefix('items'));
-  var _useCustom = (0, _utils.useCustom)('DropdownMenu'),
+  var _useCustom = (0, _utils.useCustom)(),
     rtl = _useCustom.rtl;
-  var getCascadePaths = (0, _react.useCallback)(function (layer, node) {
+  var _useCombobox = (0, _Picker.useCombobox)(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType,
+    multiple = _useCombobox.multiple;
+  var getCascadePaths = function getCascadePaths(layer, node) {
     var paths = [];
     for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
       if (i < layer - 1 && cascadePaths) {
@@ -66,15 +70,21 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
     paths.push(node);
     return paths;
-  }, [cascadeData, cascadePaths]);
-  var handleSelect = (0, _react.useCallback)(function (layer, node, event) {
+  };
+  var handleSelect = (0, _utils.useEventCallback)(function (layer, node, event) {
     var cascadePaths = getCascadePaths(layer + 1, node);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
-  }, [getCascadePaths, onSelect]);
-  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus, uncheckable) {
+  });
+  var renderCascadeNode = function renderCascadeNode(nodeProps) {
+    var node = nodeProps.node,
+      index = nodeProps.index,
+      layer = nodeProps.layer,
+      focus = nodeProps.focus,
+      uncheckable = nodeProps.uncheckable,
+      size = nodeProps.size;
     var children = node[childrenKey];
     var nodeValue = node[valueKey];
-    var nodeLabel = node[labelKey];
+    var label = node[labelKey];
     var disabled = disabledItemValues.some(function (disabledValue) {
       return (0, _utils.shallowEqual)(disabledValue, nodeValue);
     });
@@ -90,8 +100,13 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         valueKey: valueKey
       });
     }
-    return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuCheckItem, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.ListCheckItem, {
       as: "li",
+      role: "treeitem",
+      "aria-level": layer + 1,
+      "aria-setsize": size,
+      "aria-posinset": index + 1,
+      "aria-label": typeof label === 'string' ? label : undefined,
       key: layer + "-" + onlyKey,
       disabled: disabled,
       active: active,
@@ -111,73 +126,61 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         return _onCheck === null || _onCheck === void 0 ? void 0 : _onCheck(node, event, checked);
       },
       checkable: !uncheckable
-    }, renderMenuItem ? renderMenuItem(nodeLabel, node) : nodeLabel, children ? /*#__PURE__*/_react.default.createElement(Icon, {
+    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {
       className: prefix('caret'),
       spin: node.loading
     }) : null);
   };
-  var renderCascade = function renderCascade() {
-    var styles = {
-      width: cascadeData.length * menuWidth
-    };
-    var columnStyles = {
-      height: menuHeight,
-      width: menuWidth
-    };
-    var cascadeNodes = cascadeData.map(function (children, layer) {
-      var uncheckableCount = 0;
-      var onlyKey = layer + "_" + children.length;
-      var menu = /*#__PURE__*/_react.default.createElement("ul", {
-        role: "listbox"
-      }, children.map(function (item, index) {
-        var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {
-          return (0, _utils.shallowEqual)(uncheckableValue, item[valueKey]);
-        });
-        if (uncheckable) {
-          uncheckableCount++;
-        }
-        return renderCascadeNode(item, index, layer, cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]), uncheckable);
-      }));
-      var parentNode = cascadePaths[layer - 1];
-      var columnClasses = prefix('column', {
-        'column-uncheckable': uncheckableCount === children.length
+  var columnStyles = {
+    height: menuHeight,
+    width: menuWidth
+  };
+  var cascadeNodes = cascadeData.map(function (children, layer) {
+    var uncheckableCount = 0;
+    var onlyKey = layer + "_" + children.length;
+    var menu = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (item, index) {
+      var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {
+        return (0, _utils.shallowEqual)(uncheckableValue, item[valueKey]);
       });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: onlyKey,
-        className: columnClasses,
-        "data-layer": layer,
-        style: columnStyles
-      }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
+      if (uncheckable) {
+        uncheckableCount++;
+      }
+      var focus = cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]);
+      return renderCascadeNode({
+        node: item,
+        index: index,
+        layer: layer,
+        focus: focus,
+        uncheckable: uncheckable,
+        size: children.length
+      });
+    }));
+    var parentNode = cascadePaths[layer - 1];
+    var columnClasses = prefix('column', {
+      'column-uncheckable': uncheckableCount === children.length
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: styles
-    }, cascadeNodes);
-  };
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      role: "group",
+      key: onlyKey,
+      className: columnClasses,
+      "data-layer": layer,
+      style: columnStyles
+    }, 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,
+    "aria-multiselectable": multiple
+  }, rest, {
     ref: ref,
-    className: classes
-  }), renderCascade());
+    className: classes,
+    style: styles
+  }), cascadeNodes);
 });
-DropdownMenu.displayName = 'DropdownMenu';
-DropdownMenu.propTypes = {
-  classPrefix: _propTypes.default.string,
-  data: _propTypes.default.array,
-  disabledItemValues: _propTypes.default.array,
-  value: _propTypes.default.array,
-  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,
-  cascade: _propTypes.default.bool,
-  cascadeData: _propTypes.default.array,
-  cascadePaths: _propTypes.default.array,
-  uncheckableItemValues: _propTypes.default.array,
-  renderMenuItem: _propTypes.default.func,
-  renderMenu: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  onCheck: _propTypes.default.func
-};
-var _default = DropdownMenu;
+TreeView.displayName = 'TreeView';
+var _default = TreeView;
 exports.default = _default;

package/{esm/Picker/DropdownMenuCheckItem.d.ts → cjs/Picker/ListCheckItem.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckboxProps } from '../Checkbox';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-export interface DropdownMenuCheckItemProps extends WithAsProps {
+export interface ListCheckItemProps extends WithAsProps {
     active?: boolean;
     checkboxAs?: React.ElementType | string;
     classPrefix?: string;
@@ -19,5 +19,5 @@ export interface DropdownMenuCheckItemProps extends WithAsProps {
     onKeyDown?: (event: React.KeyboardEvent) => void;
     renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
 }
-declare const DropdownMenuCheckItem: RsRefForwardingComponent<'div', DropdownMenuCheckItemProps>;
-export default DropdownMenuCheckItem;
+declare const ListCheckItem: RsRefForwardingComponent<'div', ListCheckItemProps>;
+export default ListCheckItem;

package/cjs/Picker/{DropdownMenuCheckItem.js → ListCheckItem.js}

@@ -1,17 +1,16 @@
 '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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 var _utils = require("../utils");
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
-var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
+var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$active = props.active,
     active = _props$active === void 0 ? false : _props$active,
     _props$as = props.as,
@@ -34,19 +33,21 @@ var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (pro
     onSelectItem = props.onSelectItem,
     renderMenuItemCheckbox = props.renderMenuItemCheckbox,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "checkboxAs", "classPrefix", "checkable", "disabled", "value", "focus", "children", "className", "indeterminate", "onKeyDown", "onSelect", "onCheck", "onSelectItem", "renderMenuItemCheckbox"]);
-  var handleChange = (0, _react.useCallback)(function (value, checked, event) {
+  var handleChange = (0, _utils.useEventCallback)(function (value, checked, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);
-  }, [onSelect]);
-  var handleCheck = (0, _react.useCallback)(function (event) {
+  });
+  var handleCheck = (0, _utils.useEventCallback)(function (event) {
     if (!disabled) {
       onCheck === null || onCheck === void 0 ? void 0 : onCheck(value, event, !active);
     }
-  }, [value, disabled, onCheck, active]);
-  var handleSelectItem = (0, _react.useCallback)(function (event) {
+  });
+  var handleSelectItem = (0, _utils.useEventCallback)(function (event) {
     if (!disabled) {
       onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(value, event, !active);
     }
-  }, [value, disabled, onSelectItem, active]);
+  });
+  var _useCombobox = (0, _useCombobox2.default)(),
+    id = _useCombobox.id;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix;
   var checkboxItemClasses = withClassPrefix({
@@ -69,6 +70,7 @@ var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (pro
     role: "option",
     "aria-selected": active,
     "aria-disabled": disabled,
+    id: id ? id + "-opt-" + value : undefined,
     "data-key": value
   }, rest, {
     ref: ref,
@@ -78,24 +80,6 @@ var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (pro
     role: "checkbox"
   }, checkboxProps)));
 });
-DropdownMenuCheckItem.displayName = 'DropdownMenuCheckItem';
-DropdownMenuCheckItem.propTypes = {
-  classPrefix: _propTypes.default.string,
-  active: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  checkable: _propTypes.default.bool,
-  indeterminate: _propTypes.default.bool,
-  value: _propTypes.default.any,
-  onSelect: _propTypes.default.func,
-  onCheck: _propTypes.default.func,
-  onSelectItem: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  focus: _propTypes.default.bool,
-  title: _propTypes.default.string,
-  className: _propTypes.default.string,
-  children: _propTypes.default.node,
-  as: _propTypes.default.elementType,
-  checkboxAs: _propTypes.default.elementType
-};
-var _default = DropdownMenuCheckItem;
+ListCheckItem.displayName = 'ListCheckItem';
+var _default = ListCheckItem;
 exports.default = _default;

package/cjs/Picker/{DropdownMenuItem.d.ts → ListItem.d.ts}

@@ -1,14 +1,14 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-export interface DropdownMenuItemProps extends WithAsProps {
+export interface ListItemProps extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     active?: boolean;
     disabled?: boolean;
-    value?: any;
+    value?: string | number;
     focus?: boolean;
     title?: string;
     onSelect?: (value: any, event: React.MouseEvent) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
     renderItem?: (value: any) => React.ReactNode;
 }
-declare const DropdownMenuItem: RsRefForwardingComponent<'div', DropdownMenuItemProps>;
-export default DropdownMenuItem;
+declare const ListItem: RsRefForwardingComponent<'div', ListItemProps>;
+export default ListItem;