rsuite 5.50.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.js

@@ -252,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;
@@ -280,8 +280,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 +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)
@@ -305,7 +304,7 @@ 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,
@@ -330,19 +329,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,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;

package/cjs/CheckTreePicker/CheckTreeNode.js

@@ -8,10 +8,9 @@ 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 _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"));
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
-var _DropdownMenuCheckItem = _interopRequireDefault(require("../Picker/DropdownMenuCheckItem"));
+var _ListCheckItem = _interopRequireDefault(require("../Picker/ListCheckItem"));
 var _treeUtils = require("../utils/treeUtils");
 var _utils = require("../utils");
 var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -35,11 +34,12 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     label = _ref.label,
     uncheckable = _ref.uncheckable,
     checkState = _ref.checkState,
+    value = _ref.value,
     onExpand = _ref.onExpand,
     onSelect = _ref.onSelect,
-    onRenderTreeIcon = _ref.onRenderTreeIcon,
-    onRenderTreeNode = _ref.onRenderTreeNode,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "style", "className", "classPrefix", "visible", "layer", "disabled", "allUncheckable", "rtl", "loading", "expand", "hasChildren", "nodeData", "focus", "label", "uncheckable", "checkState", "onExpand", "onSelect", "onRenderTreeIcon", "onRenderTreeNode"]);
+    renderTreeIcon = _ref.renderTreeIcon,
+    renderTreeNode = _ref.renderTreeNode,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "style", "className", "classPrefix", "visible", "layer", "disabled", "allUncheckable", "rtl", "loading", "expand", "hasChildren", "nodeData", "focus", "label", "uncheckable", "checkState", "value", "onExpand", "onSelect", "renderTreeIcon", "renderTreeNode"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -52,13 +52,13 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       return nodes.join('');
     }
   };
-  var handleExpand = (0, _react.useCallback)(function (event) {
+  var handleExpand = (0, _utils.useEventCallback)(function (event) {
     var _event$nativeEvent, _event$nativeEvent$st;
     // stop propagation when using custom loading icon
     event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : (_event$nativeEvent$st = _event$nativeEvent.stopImmediatePropagation) === null || _event$nativeEvent$st === void 0 ? void 0 : _event$nativeEvent$st.call(_event$nativeEvent);
     onExpand === null || onExpand === void 0 ? void 0 : onExpand(nodeData);
-  }, [nodeData, onExpand]);
-  var handleSelect = (0, _react.useCallback)(function (_value, event) {
+  });
+  var handleSelect = (0, _utils.useEventCallback)(function (_value, event) {
     if (disabled || uncheckable) {
       return;
     }
@@ -73,7 +73,7 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       check: isChecked
     });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextNodeData, event);
-  }, [disabled, checkState, uncheckable, nodeData, onSelect]);
+  });
   var renderIcon = function renderIcon() {
     var expandIconClasses = prefix('expand-icon', 'icon', {
       expanded: expand
@@ -88,8 +88,8 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         spin: true
       }));
     }
-    if (typeof onRenderTreeIcon === 'function') {
-      var customIcon = onRenderTreeIcon(nodeData);
+    if (typeof renderTreeIcon === 'function') {
+      var customIcon = renderTreeIcon(nodeData);
       expandIcon = customIcon !== null ? /*#__PURE__*/_react.default.createElement("div", {
         className: prefix('custom-icon')
       }, customIcon) : expandIcon;
@@ -102,23 +102,6 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onClick: handleExpand
     }, expandIcon) : null;
   };
-  var renderLabel = function renderLabel() {
-    return /*#__PURE__*/_react.default.createElement(_DropdownMenuCheckItem.default, {
-      as: "div",
-      active: checkState === _utils.CHECK_STATE.CHECK,
-      indeterminate: checkState === _utils.CHECK_STATE.INDETERMINATE,
-      focus: focus,
-      checkable: !uncheckable,
-      disabled: disabled,
-      "data-layer": layer,
-      value: nodeData.refKey,
-      className: prefix('label'),
-      title: getTitle(),
-      onSelect: handleSelect
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: prefix('text-wrapper')
-    }, typeof onRenderTreeNode === 'function' ? onRenderTreeNode(nodeData) : label));
-  };
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
     'all-uncheckable': !!allUncheckable,
@@ -126,43 +109,32 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     focus: focus
   }));
   var styles = (0, _extends2.default)({}, style, (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1));
-  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    style: styles,
+    className: classes,
+    ref: ref
+  }), renderIcon(), /*#__PURE__*/_react.default.createElement(_ListCheckItem.default, {
+    as: "div",
     role: "treeitem",
     "aria-label": label,
     "aria-expanded": expand,
     "aria-selected": checkState === _utils.CHECK_STATE.CHECK,
     "aria-disabled": disabled,
-    "aria-level": layer
-  }, rest, {
-    style: styles,
-    className: classes,
-    ref: ref
-  }), renderIcon(), renderLabel()) : null;
+    "aria-level": layer,
+    active: checkState === _utils.CHECK_STATE.CHECK,
+    indeterminate: checkState === _utils.CHECK_STATE.INDETERMINATE,
+    focus: focus,
+    checkable: !uncheckable,
+    disabled: disabled,
+    "data-layer": layer,
+    value: nodeData.refKey || value,
+    className: prefix('label'),
+    title: getTitle(),
+    onSelect: handleSelect
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('text-wrapper')
+  }, typeof renderTreeNode === 'function' ? renderTreeNode(nodeData) : label))) : null;
 });
 CheckTreeNode.displayName = 'CheckTreeNode';
-CheckTreeNode.propTypes = {
-  as: _propTypes.default.elementType,
-  rtl: _propTypes.default.bool,
-  classPrefix: _propTypes.default.string,
-  visible: _propTypes.default.bool,
-  style: _propTypes.default.object,
-  label: _propTypes.default.any,
-  layer: _propTypes.default.number,
-  loading: _propTypes.default.bool,
-  value: _propTypes.default.any,
-  focus: _propTypes.default.bool,
-  expand: _propTypes.default.bool,
-  nodeData: _propTypes.default.object,
-  disabled: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  checkState: _propTypes.default.oneOf([_utils.CHECK_STATE.UNCHECK, _utils.CHECK_STATE.CHECK, _utils.CHECK_STATE.INDETERMINATE]),
-  hasChildren: _propTypes.default.bool,
-  uncheckable: _propTypes.default.bool,
-  allUncheckable: _propTypes.default.bool,
-  onExpand: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  onRenderTreeIcon: _propTypes.default.func,
-  onRenderTreeNode: _propTypes.default.func
-};
 var _default = CheckTreeNode;
 exports.default = _default;