rsuite 5.49.0 → 5.51.0

package/esm/Cascader/TreeView.js

@@ -0,0 +1,167 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useEffect, useRef } from 'react';
+import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
+import isUndefined from 'lodash/isUndefined';
+import isNil from 'lodash/isNil';
+import { shallowEqual, useClassNames, mergeRefs, useCustom, useEventCallback } from '../utils';
+import { ListItem, useCombobox } from '../Picker';
+import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
+import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
+import getPosition from 'dom-lib/getPosition';
+import scrollTop from 'dom-lib/scrollTop';
+var emptyArray = [];
+var TreeView = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderMenu", "renderMenuItem", "onSelect"]);
+  var _useClassNames = useClassNames(classPrefix),
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
+  var classes = merge(className, prefix('items'));
+  var rootRef = useRef();
+  var _useCustom = useCustom(),
+    rtl = _useCustom.rtl;
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
+  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 = getPosition(activeItem, column);
+        // Let the active option scroll into view.
+        scrollTop(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 = useEventCallback(function (layer, node, event) {
+    var isLeafNode = isNil(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 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 ? SpinnerIcon : rtl ? AngleLeftIcon : AngleRightIcon;
+    return /*#__PURE__*/React.createElement(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: !isUndefined(activeItemValue) && 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.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.createElement(React.Fragment, null, children.map(function (item, index) {
+      var focus = cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]);
+      return renderCascadeNode({
+        node: item,
+        index: index,
+        layer: layer,
+        focus: focus,
+        size: children.length
+      });
+    }));
+    return /*#__PURE__*/React.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 = _extends({}, style, {
+    width: cascadeData.length * menuWidth
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    role: "tree",
+    id: id + "-" + popupType,
+    "aria-labelledby": labelId
+  }, rest, {
+    ref: mergeRefs(rootRef, ref),
+    className: classes,
+    style: styles
+  }), cascadeNodes);
+});
+TreeView.displayName = 'TreeView';
+export default TreeView;

package/esm/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/esm/CheckPicker/CheckPicker.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject;
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import clone from 'lodash/clone';
 import isUndefined from 'lodash/isUndefined';
@@ -13,9 +13,9 @@ import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import { filterNodesOfTree } from '../utils/treeUtils';
-import { createChainedFunction, useClassNames, shallowEqual, useCustom, useControlled, mergeRefs } from '../utils';
+import { createChainedFunction, useClassNames, shallowEqual, useCustom, useControlled, useEventCallback, mergeRefs } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuCheckItem as DropdownMenuItem, PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { Listbox, ListCheckItem, PickerToggle, PickerPopup, SearchBar, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 /**
  * A component for selecting checkable items in a dropdown list.
@@ -80,11 +80,13 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClose = props.onClose,
     onOpen = props.onOpen,
     rest = _objectWithoutPropertiesLoose(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 = useRef(null);
-  var targetRef = useRef(null);
-  var overlayRef = useRef(null);
-  var searchInputRef = useRef(null);
-  var listRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = useCustom('Picker', overrideLocale),
     locale = _useCustom.locale;
   var _useControlled = useControlled(valueProp, defaultValue || []),
@@ -94,18 +96,18 @@ var CheckPicker = /*#__PURE__*/React.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 = useCallback(function (searchKeyword, filteredData, event) {
+  var handleSearchCallback = 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 = useSearch(data, {
@@ -139,17 +141,17 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     setStickyItems(nextStickyItems);
   };
-  var handleChangeValue = useCallback(function (value, event) {
+  var handleChangeValue = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleClean = useCallback(function (event) {
+  });
+  var handleClean = 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 = clone(value);
     if (!focusItemValue) {
@@ -173,10 +175,10 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     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,
@@ -186,10 +188,10 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setFocusItemValue(null);
     }
   }, rest));
-  var handleSelect = useCallback(function (nextItemValue, item, event) {
+  var handleSelect = useEventCallback(function (nextItemValue, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextItemValue, item, event);
-  }, [onSelect]);
-  var handleItemSelect = useCallback(function (nextItemValue, item, event, checked) {
+  });
+  var handleItemSelect = useEventCallback(function (nextItemValue, item, event, checked) {
     var nextValue = clone(value);
     if (checked) {
       nextValue.push(nextItemValue);
@@ -202,22 +204,16 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFocusItemValue(nextItemValue);
     handleSelect(nextValue, item, event);
     handleChangeValue(nextValue, event);
-  }, [value, setValue, handleSelect, handleChangeValue, setFocusItemValue]);
-  var handleEntered = useCallback(function () {
+  });
+  var handleEntered = useEventCallback(function () {
     setActive(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen]);
-  var handleExited = useCallback(function () {
+  });
+  var handleExited = useEventCallback(function () {
     resetSearch();
     setFocusItemValue(null);
     setActive(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, setFocusItemValue, resetSearch]);
-  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) {
@@ -250,7 +246,7 @@ var CheckPicker = /*#__PURE__*/React.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;
@@ -278,10 +274,9 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else if (typeof sort === 'function') {
       items = items.sort(sort(false));
     }
-    var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/React.createElement(Listbox, {
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -289,7 +284,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderMenuItem: renderMenuItem,
       maxHeight: menuMaxHeight,
       classPrefix: 'picker-check-menu',
-      dropdownMenuItemAs: DropdownMenuItem,
+      listItemAs: ListCheckItem,
       activeItemValues: value,
       focusItemValue: focusItemValue,
       data: [].concat(filteredStickyItems, items)
@@ -303,18 +298,18 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }) : /*#__PURE__*/React.createElement("div", {
       className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+    return /*#__PURE__*/React.createElement(PickerPopup, {
+      ref: mergeRefs(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
       onKeyDown: onPickerKeyDown,
-      target: triggerRef
+      target: trigger
     }, searchable && /*#__PURE__*/React.createElement(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 = usePickerClassName(_extends({}, props, {
@@ -328,19 +323,21 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    multiple: true,
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: createChainedFunction(initStickyItems, onEnter),
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderPopup
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     disabled: disabled,
     onClean: handleClean,
@@ -350,7 +347,8 @@ var CheckPicker = /*#__PURE__*/React.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/esm/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/esm/CheckTreePicker/CheckTreeNode.js

@@ -1,13 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { forwardRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
-import DropdownMenuCheckItem from '../Picker/DropdownMenuCheckItem';
+import ListCheckItem from '../Picker/ListCheckItem';
 import { getTreeNodeIndent } from '../utils/treeUtils';
-import { useClassNames, CHECK_STATE, reactToString } from '../utils';
+import { useClassNames, useEventCallback, CHECK_STATE, reactToString } from '../utils';
 var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
     Component = _ref$as === void 0 ? 'div' : _ref$as,
@@ -29,11 +28,12 @@ var CheckTreeNode = /*#__PURE__*/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 = _objectWithoutPropertiesLoose(_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 = _objectWithoutPropertiesLoose(_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 = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -46,13 +46,13 @@ var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return nodes.join('');
     }
   };
-  var handleExpand = useCallback(function (event) {
+  var handleExpand = 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 = useCallback(function (_value, event) {
+  });
+  var handleSelect = useEventCallback(function (_value, event) {
     if (disabled || uncheckable) {
       return;
     }
@@ -67,7 +67,7 @@ var CheckTreeNode = /*#__PURE__*/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
@@ -82,8 +82,8 @@ var CheckTreeNode = /*#__PURE__*/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.createElement("div", {
         className: prefix('custom-icon')
       }, customIcon) : expandIcon;
@@ -96,23 +96,6 @@ var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClick: handleExpand
     }, expandIcon) : null;
   };
-  var renderLabel = function renderLabel() {
-    return /*#__PURE__*/React.createElement(DropdownMenuCheckItem, {
-      as: "div",
-      active: checkState === CHECK_STATE.CHECK,
-      indeterminate: checkState === CHECK_STATE.INDETERMINATE,
-      focus: focus,
-      checkable: !uncheckable,
-      disabled: disabled,
-      "data-layer": layer,
-      value: nodeData.refKey,
-      className: prefix('label'),
-      title: getTitle(),
-      onSelect: handleSelect
-    }, /*#__PURE__*/React.createElement("span", {
-      className: prefix('text-wrapper')
-    }, typeof onRenderTreeNode === 'function' ? onRenderTreeNode(nodeData) : label));
-  };
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
     'all-uncheckable': !!allUncheckable,
@@ -120,42 +103,31 @@ var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
     focus: focus
   }));
   var styles = _extends({}, style, getTreeNodeIndent(rtl, layer - 1));
-  return visible ? /*#__PURE__*/React.createElement(Component, _extends({
+  return visible ? /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    style: styles,
+    className: classes,
+    ref: ref
+  }), renderIcon(), /*#__PURE__*/React.createElement(ListCheckItem, {
+    as: "div",
     role: "treeitem",
     "aria-label": label,
     "aria-expanded": expand,
     "aria-selected": checkState === CHECK_STATE.CHECK,
     "aria-disabled": disabled,
-    "aria-level": layer
-  }, rest, {
-    style: styles,
-    className: classes,
-    ref: ref
-  }), renderIcon(), renderLabel()) : null;
+    "aria-level": layer,
+    active: checkState === CHECK_STATE.CHECK,
+    indeterminate: checkState === 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.createElement("span", {
+    className: prefix('text-wrapper')
+  }, typeof renderTreeNode === 'function' ? renderTreeNode(nodeData) : label))) : null;
 });
 CheckTreeNode.displayName = 'CheckTreeNode';
-CheckTreeNode.propTypes = {
-  as: PropTypes.elementType,
-  rtl: PropTypes.bool,
-  classPrefix: PropTypes.string,
-  visible: PropTypes.bool,
-  style: PropTypes.object,
-  label: PropTypes.any,
-  layer: PropTypes.number,
-  loading: PropTypes.bool,
-  value: PropTypes.any,
-  focus: PropTypes.bool,
-  expand: PropTypes.bool,
-  nodeData: PropTypes.object,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  checkState: PropTypes.oneOf([CHECK_STATE.UNCHECK, CHECK_STATE.CHECK, CHECK_STATE.INDETERMINATE]),
-  hasChildren: PropTypes.bool,
-  uncheckable: PropTypes.bool,
-  allUncheckable: PropTypes.bool,
-  onExpand: PropTypes.func,
-  onSelect: PropTypes.func,
-  onRenderTreeIcon: PropTypes.func,
-  onRenderTreeNode: PropTypes.func
-};
 export default CheckTreeNode;