rsuite 5.19.0 → 5.20.0-beta.6

package/esm/Animation/Transition.d.ts

@@ -36,7 +36,7 @@ interface TransitionState {
 }
 export declare const transitionPropTypes: {
     animation: PropTypes.Requireable<boolean>;
-    children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    children: PropTypes.Requireable<string | number | boolean | ((...args: any[]) => any) | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     className: PropTypes.Requireable<string>;
     in: PropTypes.Requireable<boolean>;
     unmountOnExit: PropTypes.Requireable<boolean>;
@@ -59,7 +59,7 @@ declare type EventToken = {
 declare class Transition extends React.Component<TransitionProps, TransitionState> {
     static propTypes: {
         animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | ((...args: any[]) => any) | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         className: PropTypes.Requireable<string>;
         in: PropTypes.Requireable<boolean>;
         unmountOnExit: PropTypes.Requireable<boolean>;

package/esm/Calendar/MonthDropdown.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 export interface MonthDropdownProps extends WithAsProps {
     show?: boolean;
+    limitStartYear?: number;
     limitEndYear?: number;
     height?: number;
     width?: number;

package/esm/Calendar/MonthDropdown.js

@@ -1,35 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { AutoSizer, List } from '../Picker/VirtualizedList';
+import { AutoSizer, FixedSizeList } from '../Windowing';
 import { DateUtils, useClassNames } from '../utils';
 import MonthDropdownItem from './MonthDropdownItem';
 import { useCalendarContext } from './CalendarContext';
 var monthMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-/**
- * Set the row height.
- * Add 1px to the first and last lines.
- */
-
-function getRowHeight(count) {
-  return function (_ref) {
-    var index = _ref.index;
-
-    if (index === 0 || count - 1 === index) {
-      return 75 + 1;
-    }
-
-    return 75;
-  };
-}
-
 var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
       className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'calendar-month-dropdown' : _props$classPrefix,
+      limitStartYear = props.limitStartYear,
       _props$limitEndYear = props.limitEndYear,
       limitEndYear = _props$limitEndYear === void 0 ? 5 : _props$limitEndYear,
       show = props.show,
@@ -38,7 +22,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$width = props.width,
       defaultWidth = _props$width === void 0 ? 256 : _props$width,
       disabledMonth = props.disabledMonth,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "limitEndYear", "show", "height", "width", "disabledMonth"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "limitStartYear", "limitEndYear", "show", "height", "width", "disabledMonth"]);
 
   var _useCalendarContext = useCalendarContext(),
       _useCalendarContext$d = _useCalendarContext.date,
@@ -49,9 +33,12 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var getRowCount = useCallback(function () {
-    return DateUtils.getYear(new Date()) + limitEndYear;
-  }, [limitEndYear]);
+  var thisYear = DateUtils.getYear(new Date());
+  var startYear = limitStartYear ? thisYear - limitStartYear : 1900;
+  var rowCount = useMemo(function () {
+    var endYear = thisYear + limitEndYear;
+    return endYear - startYear;
+  }, [limitEndYear, startYear, thisYear]);
   var isMonthDisabled = useCallback(function (year, month) {
     if (disabledMonth) {
       var days = DateUtils.getDaysInMonth(new Date(year, month)); // If all dates in a month are disabled, disable the current month
@@ -68,26 +55,23 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return false;
   }, [disabledMonth]);
 
-  var rowRenderer = function rowRenderer(_ref2) {
-    var index = _ref2.index,
-        key = _ref2.key,
-        style = _ref2.style;
+  var rowRenderer = function rowRenderer(_ref) {
+    var index = _ref.index,
+        style = _ref.style;
     var selectedMonth = DateUtils.getMonth(date);
     var selectedYear = DateUtils.getYear(date);
-    var year = index + 1;
+    var year = startYear + index;
     var isSelectedYear = year === selectedYear;
-    var count = getRowCount();
     var titleClassName = prefix('year', {
       'year-active': isSelectedYear
     });
     var rowClassName = merge(prefix('row'), {
       'first-row': index === 0,
-      'last-row': index === count - 1
+      'last-row': index === rowCount - 1
     });
     return /*#__PURE__*/React.createElement("div", {
       className: rowClassName,
       role: "row",
-      key: key,
       style: style
     }, /*#__PURE__*/React.createElement("div", {
       className: titleClassName,
@@ -106,10 +90,12 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })));
   };
 
-  var count = getRowCount();
   var classes = merge(className, withClassPrefix(), {
     show: show
   });
+  var itemSize = 75;
+  var initialItemIndex = DateUtils.getYear(date) - startYear;
+  var initialScrollOffset = itemSize * initialItemIndex;
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "menu"
   }, rest, {
@@ -122,18 +108,17 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, show && /*#__PURE__*/React.createElement(AutoSizer, {
     defaultHeight: defaultHeight,
     defaultWidth: defaultWidth
-  }, function (_ref3) {
-    var height = _ref3.height,
-        width = _ref3.width;
-    return /*#__PURE__*/React.createElement(List, {
+  }, function (_ref2) {
+    var height = _ref2.height,
+        width = _ref2.width;
+    return /*#__PURE__*/React.createElement(FixedSizeList, {
       className: prefix('row-wrapper'),
       width: width || defaultWidth,
       height: height || defaultHeight,
-      rowHeight: getRowHeight(count),
-      rowCount: count,
-      scrollToIndex: DateUtils.getYear(date),
-      rowRenderer: rowRenderer
-    });
+      itemSize: itemSize,
+      itemCount: rowCount,
+      initialScrollOffset: initialScrollOffset
+    }, rowRenderer);
   }))));
 });
 MonthDropdown.displayName = 'MonthDropdown';

package/esm/Cascader/Cascader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerInstance } from '../Picker';
+import { PickerHandle } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 export declare type ValueType = number | string;
 export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType<T>> {
@@ -33,7 +33,7 @@ export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T |
 }
 export interface CascaderComponent {
     <T>(props: CascaderProps<T> & {
-        ref?: React.Ref<PickerInstance>;
+        ref?: React.Ref<PickerHandle>;
     }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<CascaderProps<any>>;

package/esm/Cascader/Cascader.js

@@ -94,6 +94,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       valueToPaths = _usePaths.valueToPaths,
       columnData = _usePaths.columnData,
       addColumn = _usePaths.addColumn,
+      romoveColumnByIndex = _usePaths.romoveColumnByIndex,
       setValueToPaths = _usePaths.setValueToPaths,
       setColumnData = _usePaths.setColumnData,
       setSelectedPaths = _usePaths.setSelectedPaths,
@@ -257,9 +258,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {
     var _node$childrenKey, _node$childrenKey2, _triggerRef$current2;
 
-    var nextValue = node[valueKey];
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
-    setSelectedPaths(cascadePaths); // Lazy load node's children
+    setSelectedPaths(cascadePaths);
+    var nextValue = node[valueKey];
+    var columnIndex = cascadePaths.length; // Lazy load node's children
 
     if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {
       node.loading = true;
@@ -271,16 +273,19 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
           node[childrenKey] = data;
 
           if (targetRef.current) {
-            addColumn(data, cascadePaths.length);
+            addColumn(data, columnIndex);
           }
         });
       } else {
         node.loading = false;
         node[childrenKey] = children;
-        addColumn(children, cascadePaths.length);
+        addColumn(children, columnIndex);
       }
     } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {
-      addColumn(node[childrenKey], cascadePaths.length);
+      addColumn(node[childrenKey], columnIndex);
+    } else {
+      // Removes subsequent columns of the current column when the clicked node is a leaf node.
+      romoveColumnByIndex(columnIndex);
     }
 
     if (isLeafNode) {

package/esm/Cascader/DropdownMenu.js

@@ -45,7 +45,10 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var classes = merge(className, prefix('items'));
   var rootRef = useRef();
-  var rtl = useCustom('DropdownMenu');
+
+  var _useCustom = useCustom('DropdownMenu'),
+      rtl = _useCustom.rtl;
+
   useEffect(function () {
     var _rootRef$current;
 
@@ -96,7 +99,7 @@ var DropdownMenu = /*#__PURE__*/React.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 = node.loading ? SpinnerIcon : rtl ? AngleRightIcon : AngleLeftIcon;
+    var Icon = node.loading ? SpinnerIcon : rtl ? AngleLeftIcon : AngleRightIcon;
     return /*#__PURE__*/React.createElement(DropdownMenuItem, {
       classPrefix: "picker-cascader-menu-item",
       as: 'li',

package/esm/Cascader/utils.d.ts

@@ -14,4 +14,5 @@ export declare function usePaths(props: CascaderProps): {
     setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
     setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
     addColumn: (column: ItemDataType[], index: number) => void;
+    romoveColumnByIndex: (index: number) => void;
 };

package/esm/Cascader/utils.js

@@ -111,6 +111,15 @@ export function usePaths(props) {
   function addColumn(column, index) {
     setColumnData([].concat(slice(columnData, 0, index), [column]));
   }
+  /**
+   * Remove subsequent columns of the specified column
+   * @param index
+   */
+
+
+  function romoveColumnByIndex(index) {
+    setColumnData([].concat(slice(columnData, 0, index)));
+  }
   /**
    * Enforce update of columns and paths.
    * @param nextValue  Selected value
@@ -146,6 +155,7 @@ export function usePaths(props) {
     setValueToPaths: setValueToPaths,
     setColumnData: setColumnData,
     setSelectedPaths: setSelectedPaths,
-    addColumn: addColumn
+    addColumn: addColumn,
+    romoveColumnByIndex: romoveColumnByIndex
   };
 }

package/esm/CheckPicker/CheckPicker.d.ts

@@ -1,6 +1,6 @@
 import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
-import { PickerInstance, PickerToggleProps } from '../Picker';
+import { PickerHandle, PickerToggleProps } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
@@ -12,7 +12,7 @@ export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerL
 }
 export interface CheckPickerComponent {
     <T>(props: CheckPickerProps<T> & {
-        ref?: Ref<PickerInstance>;
+        ref?: Ref<PickerHandle>;
     }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;

package/esm/CheckPicker/CheckPicker.js

@@ -81,6 +81,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var targetRef = useRef(null);
   var overlayRef = useRef(null);
   var searchInputRef = useRef(null);
+  var listRef = useRef(null);
 
   var _useCustom = useCustom('Picker', overrideLocale),
       locale = _useCustom.locale;
@@ -235,7 +236,8 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   usePublicMethods(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
+    targetRef: targetRef,
+    listRef: listRef
   });
   var selectedItems = data.filter(function (item) {
     return value === null || value === void 0 ? void 0 : value.some(function (val) {
@@ -308,6 +310,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
+      listRef: listRef,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -6,19 +6,23 @@ import _omit from "lodash/omit";
 import _isFunction from "lodash/isFunction";
 import _pick from "lodash/pick";
 import _isNil from "lodash/isNil";
-import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { List, AutoSizer } from '../Picker/VirtualizedList';
+import { List, AutoSizer } from '../Windowing';
 import CheckTreeNode from './CheckTreeNode';
 import TreeContext from '../Tree/TreeContext';
 import { getTreeNodeIndent } from '../utils/treeUtils';
-import { createChainedFunction, useCustom, useClassNames, useControlled, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
+import { createChainedFunction, useCustom, useClassNames, useControlled, KEY_VALUES, mergeRefs } from '../utils';
 import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePublicMethods, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes, useToggleKeyDownEvent } from '../Picker';
 import { isEveryChildChecked, isSomeNodeHasChildren, isAllSiblingNodeUncheckable, isEveryFirstLevelNodeUncheckable, getFormattedTree, getDisabledState, getCheckTreePickerDefaultValue, getSelectedItems, isNodeUncheckable } from './utils';
 import { hasVisibleChildren, getExpandWhenSearching, useTreeSearch, useTreeNodeRefs, getDefaultExpandItemValues, useFlattenTreeData, focusNextItem, getFocusableItems, focusPreviousItem, toggleExpand, getActiveItem, useGetTreeNodeChildren, focusToActiveTreeNode, focusTreeNode, leftArrowHandler, rightArrowHandler, isSearching } from '../utils/treeUtils';
-import { maxTreeHeight } from '../TreePicker/TreePicker';
 var emptyArray = [];
+
+var itemSize = function itemSize() {
+  return 36;
+};
+
 var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -60,6 +64,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
       _props$height = props.height,
       height = _props$height === void 0 ? 360 : _props$height,
+      _props$menuMaxHeight = props.menuMaxHeight,
+      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
       menuStyle = props.menuStyle,
       _props$searchable = props.searchable,
       searchable = _props$searchable === void 0 ? true : _props$searchable,
@@ -91,7 +97,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderValue = props.renderValue,
       renderTreeIcon = props.renderTreeIcon,
       renderTreeNode = props.renderTreeNode,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuMaxHeight", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
 
   var _useContext = useContext(TreeContext),
       inline = _useContext.inline;
@@ -221,11 +227,11 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value: node[valueKey],
       label: node[labelKey],
       layer: layer,
-      focus: shallowEqual(focusItemValue, node[valueKey]),
+      focus: focusItemValue === node[valueKey],
       expand: node.expand,
       visible: node.visible,
       loading: loadingNodeValues.some(function (item) {
-        return shallowEqual(item, node[valueKey]);
+        return item === node[valueKey];
       }),
       disabled: getDisabledState(flattenNodes, node, {
         disabledItemValues: disabledItemValues,
@@ -363,18 +369,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, selectedValues, event);
   }, [cascade, valueKey, flattenNodes, isControlled, uncheckableItemValues, setValue, onChange, onSelect, toggleChecked, unSerializeList]);
-
-  var hasValue = function hasValue() {
-    var selectedValues = Object.keys(flattenNodes).map(function (refKey) {
-      return flattenNodes[refKey][valueKey];
-    }).filter(function (item) {
-      return value.some(function (v) {
-        return shallowEqual(v, item);
-      });
-    });
-    return !!selectedValues.length;
-  };
-
   var handleOpen = useCallback(function () {
     var _triggerRef$current, _triggerRef$current$o;
 
@@ -426,22 +420,26 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleClean = useCallback(function (event) {
     var target = event.target; // exclude searchBar
 
-    if (target.matches('div[role="searchbox"] > input')) {
+    if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
       return;
     }
 
     setActiveNode(null);
-    setValue([]);
     setFocusItemValue(null);
-    unSerializeList({
-      nodes: flattenNodes,
-      key: 'check',
-      value: [],
-      cascade: cascade,
-      uncheckableItemValues: uncheckableItemValues
-    });
+
+    if (!isControlled) {
+      setValue([]);
+      unSerializeList({
+        nodes: flattenNodes,
+        key: 'check',
+        value: [],
+        cascade: cascade,
+        uncheckableItemValues: uncheckableItemValues
+      });
+    }
+
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [cascade, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues]);
+  }, [cascade, cleanable, disabled, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues, isControlled]);
   var handleFocusItem = useCallback(function (key) {
     var focusableItems = getFocusableItems(filteredData, {
       disabledItemValues: disabledItemValues,
@@ -567,7 +565,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
       /**
-       * spread operator dont copy unenumerable properties
+       * spread operator don't copy unenumerable properties
        * so we need to copy them manually
        */
       parent: node.parent,
@@ -608,31 +606,33 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, nodeProps));
   };
 
-  var renderVirtualListNode = function renderVirtualListNode(nodes) {
-    return function (_ref3) {
-      var key = _ref3.key,
-          index = _ref3.index,
-          style = _ref3.style;
-      var node = nodes[index];
-      var layer = node.layer,
-          refKey = node.refKey,
-          visible = node.visible;
-      var expand = getExpandWhenSearching(searchKeywordState, expandItemValues.includes(node[valueKey]));
-
-      var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
-        expand: expand
-      }), layer), {
-        hasChildren: node.hasChildren
-      });
+  var renderVirtualListNode = function renderVirtualListNode(_ref3) {
+    var index = _ref3.index,
+        style = _ref3.style,
+        data = _ref3.data;
+    var node = data[index];
+    var layer = node.layer,
+        refKey = node.refKey,
+        visible = node.visible;
+    var expand = getExpandWhenSearching(searchKeywordState, expandItemValues.includes(node[valueKey]));
 
-      return visible && /*#__PURE__*/React.createElement(CheckTreeNode, _extends({
-        style: style,
-        key: key,
-        ref: function ref(_ref4) {
-          return saveTreeNodeRef(_ref4, refKey);
-        }
-      }, nodeProps));
-    };
+    var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
+      /**
+       * spread operator don't copy unenumerable properties
+       * so we need to copy them manually
+       */
+      parent: node.parent,
+      expand: expand
+    }), layer), {
+      hasChildren: node.hasChildren
+    });
+
+    return visible && /*#__PURE__*/React.createElement(CheckTreeNode, _extends({
+      style: style,
+      ref: function ref(_ref4) {
+        return saveTreeNodeRef(_ref4, refKey);
+      }
+    }, nodeProps));
   };
 
   var renderCheckTree = function renderCheckTree() {
@@ -665,7 +665,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: treeNodesClass
     }, virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
-      defaultHeight: inline ? height : maxTreeHeight,
+      defaultHeight: inline ? height : menuMaxHeight,
       style: {
         width: 'auto',
         height: 'auto'
@@ -677,11 +677,10 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         ref: listRef,
         width: width,
         height: height,
-        rowHeight: 36,
-        rowCount: formattedNodes.length,
-        rowRenderer: renderVirtualListNode(formattedNodes),
-        scrollToAlignment: "center"
-      }, listProps));
+        itemSize: itemSize,
+        itemCount: formattedNodes.length,
+        itemData: formattedNodes
+      }, listProps), renderVirtualListNode);
     }) : formattedNodes));
   };
 
@@ -696,13 +695,10 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       top: top
     });
 
-    var styles = virtualized ? _extends({
-      height: height
-    }, mergedMenuStyle) : _extends({}, mergedMenuStyle);
     return /*#__PURE__*/React.createElement(PickerOverlay, {
       autoWidth: menuAutoWidth,
       className: classes,
-      style: styles,
+      style: mergedMenuStyle,
       ref: mergeRefs(overlayRef, speakerRef),
       onKeyDown: onPickerKeydown,
       target: triggerRef
@@ -713,16 +709,18 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inputRef: searchInputRef
     }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
+
+  var selectedItems = useMemo(function () {
+    return getSelectedItems(flattenNodes, value);
+  }, [flattenNodes, value]);
   /**
    * 1.Have a value and the value is valid.
    * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
    */
 
-
-  var hasValidValue = hasValue() || value.length > 0 && _isFunction(renderValue);
+  var hasValidValue = selectedItems.length > 0 || value.length > 0 && _isFunction(renderValue);
 
   var selectedElement = placeholder;
-  var selectedItems = getSelectedItems(flattenNodes, value, valueKey);
 
   if (hasValidValue) {
     selectedElement = /*#__PURE__*/React.createElement(SelectedElement, {

package/esm/CheckTreePicker/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CheckTreePickerProps } from './CheckTreePicker';
+import { CheckTreePickerProps, ValueType } from './CheckTreePicker';
 import { CheckStateType } from '../utils';
 export interface TreeNodeType {
     uncheckable?: boolean;
@@ -40,5 +40,5 @@ export declare function isNodeUncheckable(node: any, props: Required<Pick<CheckT
 export declare function getFormattedTree(data: any[], nodes: TreeNodesType, props: Required<Pick<CheckTreePickerProps, 'childrenKey' | 'cascade'>>): any[];
 export declare function getDisabledState(nodes: TreeNodesType, node: TreeNodeType, props: Required<Pick<CheckTreePickerProps, 'disabledItemValues' | 'valueKey'>>): boolean;
 export declare function getCheckTreePickerDefaultValue(value: any[], uncheckableItemValues: any[]): any[];
-export declare function getSelectedItems(nodes: TreeNodesType, value: (string | number)[], valueKey: string): TreeNodeType[];
+export declare function getSelectedItems(nodes: TreeNodesType, values: ValueType): TreeNodeType[];
 export declare function getNodeCheckState({ nodes, node, cascade, childrenKey }: any): CheckStateType;