rsuite 5.17.0-beta.1 → 5.17.0-beta.2

package/cjs/DatePicker/Toolbar.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -11,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,11 +17,34 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _utils = require("../utils");
 
-var _utils2 = require("./utils");
+var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
+
+var _Stack = _interopRequireDefault(require("../Stack"));
+
+var SubmitButton = function SubmitButton(_ref) {
+  var hide = _ref.hide,
+      disabledOkBtn = _ref.disabledOkBtn,
+      calendarDate = _ref.calendarDate,
+      onOk = _ref.onOk,
+      children = _ref.children;
+
+  if (hide) {
+    return null;
+  }
 
+  var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "primary",
+    size: "sm",
+    disabled: disabled,
+    onClick: disabled ? undefined : onOk
+  }, children);
+};
 /**
  * Toolbar for DatePicker and DateRangePicker
  */
+
+
 var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var className = props.className,
       _props$classPrefix = props.classPrefix,
@@ -34,78 +55,40 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onOk = props.onOk,
       onClickShortcut = props.onClickShortcut,
       calendarDate = props.calendarDate,
-      rangesProp = props.ranges,
+      ranges = props.ranges,
       locale = props.locale,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onClickShortcut", "calendarDate", "ranges", "locale"]);
 
-  var _useState = (0, _react.useState)((0, _utils2.getRanges)(props)),
-      ranges = _useState[0],
-      setRanges = _useState[1];
-
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  (0, _utils.useUpdateEffect)(function () {
-    setRanges((0, _utils2.getRanges)({
-      ranges: rangesProp,
-      calendarDate: calendarDate
-    }));
-  }, [calendarDate, rangesProp]);
-  var hasLocaleKey = (0, _react.useCallback)(function (key) {
-    return (0, _utils2.getDefaultRanges)(calendarDate).some(function (item) {
-      return item.label === key;
-    });
-  }, [calendarDate]);
-  var renderOkButton = (0, _react.useCallback)(function () {
-    if (hideOkBtn) {
-      return null;
-    }
-
-    var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: prefix('right')
-    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      appearance: "primary",
-      size: "sm",
-      disabled: disabled,
-      onClick: disabled ? undefined : onOk
-    }, locale === null || locale === void 0 ? void 0 : locale.ok));
-  }, [disabledOkBtn, hideOkBtn, locale, onOk, calendarDate, prefix]);
-
-  if (hideOkBtn && ranges.length === 0) {
+  if (hideOkBtn && (ranges === null || ranges === void 0 ? void 0 : ranges.length) === 0) {
     return null;
   }
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
     ref: ref,
-    className: classes
+    className: classes,
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  }, rest), /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
+    className: prefix('ranges'),
+    ranges: ranges,
+    calendarDate: calendarDate,
+    locale: locale,
+    disabledShortcut: disabledShortcut,
+    onClickShortcut: onClickShortcut
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('ranges')
-  }, ranges.map(function (_ref, index) {
-    var value = _ref.value,
-        closeOverlay = _ref.closeOverlay,
-        label = _ref.label;
-    var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);
-
-    var handleClickShortcut = function handleClickShortcut(event) {
-      if (disabled) {
-        return;
-      }
-
-      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
-    };
-
-    return /*#__PURE__*/_react.default.createElement(_Button.default, {
-      appearance: "link",
-      size: "sm",
-      key: index,
-      disabled: disabled,
-      onClick: handleClickShortcut
-    }, hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);
-  })), renderOkButton());
+    className: prefix('right')
+  }, /*#__PURE__*/_react.default.createElement(SubmitButton, {
+    disabledOkBtn: disabledOkBtn,
+    hide: hideOkBtn,
+    calendarDate: calendarDate,
+    onOk: onOk
+  }, locale === null || locale === void 0 ? void 0 : locale.ok)));
 });
 
 Toolbar.displayName = 'Toolbar';

package/cjs/DateRangePicker/DateRangePicker.js

@@ -29,6 +29,10 @@ var _CustomProvider = require("../CustomProvider");
 
 var _Toolbar = _interopRequireDefault(require("../DatePicker/Toolbar"));
 
+var _PredefinedRanges = _interopRequireDefault(require("../DatePicker/PredefinedRanges"));
+
+var _Stack = _interopRequireDefault(require("../Stack"));
+
 var _Picker = require("../Picker");
 
 var _utils = require("../utils");
@@ -161,11 +165,31 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
   var updateCalendarDateRange = (0, _react.useCallback)(function (value, calendarKey) {
+    var nextValue = value;
+    var shouldTime = _utils.DateUtils.shouldTime,
+        getHours = _utils.DateUtils.getHours,
+        getMinutes = _utils.DateUtils.getMinutes,
+        getSeconds = _utils.DateUtils.getSeconds,
+        set = _utils.DateUtils.set;
+
+    if (shouldTime(formatStr) && calendarKey === undefined && (value === null || value === void 0 ? void 0 : value.length) === 1 && (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue.length) === 2) {
+      var calendarEndDate = (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[1]) || defaultCalendarValue[1];
+      var _startDate = value[0]; // When updating the start date, the time of the end date should keep the time set by the user by default.
+
+      var _endDate = set((0, _dateUtils.addMonths)(_startDate, 1), {
+        hours: getHours(calendarEndDate),
+        minutes: getMinutes(calendarEndDate),
+        seconds: getSeconds(calendarEndDate)
+      });
+
+      nextValue = [_startDate, _endDate];
+    }
+
     setCalendarDate((0, _utils2.getCalendarDate)({
-      value: value,
+      value: nextValue,
       calendarKey: calendarKey
     }));
-  }, []); // if valueProp changed then update selectValue/hoverValue
+  }, [calendarDate, defaultCalendarValue, formatStr]); // if valueProp changed then update selectValue/hoverValue
 
   (0, _react.useEffect)(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
@@ -399,10 +423,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       closeOverlay = false;
     }
 
-    handleValueUpdate(event, value, closeOverlay); // End unfinished selections.
+    updateCalendarDateRange(value);
+
+    if (closeOverlay) {
+      handleValueUpdate(event, value, closeOverlay);
+    } else {
+      setSelectedDates(value !== null && value !== void 0 ? value : []);
+    } // End unfinished selections.
+
 
     hasDoneSelect.current = true;
-  }, [handleValueUpdate]);
+  }, [handleValueUpdate, updateCalendarDateRange]);
   var handleOK = (0, _react.useCallback)(function (event) {
     handleValueUpdate(event, selectedDates);
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
@@ -463,10 +494,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextCalendarDate;
 
     if (value && value.length) {
-      var _startDate = value[0],
+      var _startDate2 = value[0],
           endData = value[1];
-      nextCalendarDate = [_startDate, (0, _dateUtils.isSameMonth)(_startDate, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
+      nextCalendarDate = [_startDate2, (0, _dateUtils.isSameMonth)(_startDate2, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
     } else {
+      // Reset the date on the calendar to the default date
       nextCalendarDate = (0, _utils2.getCalendarDate)({
         value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
       });
@@ -568,13 +600,27 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       renderTitle: renderTitle
     };
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+      role: "dialog",
       className: classes,
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       target: triggerRef,
       style: styles
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: panelClasses
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
+      alignItems: "flex-start"
+    }, /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
+      direction: "column",
+      spacing: 0,
+      className: prefix('daterange-predefined'),
+      ranges: (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+        return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+      })) || [],
+      calendarDate: calendarDate,
+      locale: locale,
+      disabledShortcut: disabledShortcutButton,
+      onClickShortcut: handleShortcutPageDate
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-content')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-header')
@@ -592,8 +638,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       hideOkBtn: oneTap,
       onOk: handleOK,
       onClickShortcut: handleShortcutPageDate,
-      ranges: ranges
-    })));
+      ranges: ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+        return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
+      })
+    })))));
   };
 
   var hasValue = !(0, _isNil.default)(value) && value.length > 1;

package/cjs/DateRangePicker/types.d.ts

@@ -4,8 +4,9 @@ export declare type ValueType = [Date?, Date?];
 export declare type DateRange = [Date, Date];
 export interface RangeType {
     label: React.ReactNode;
-    closeOverlay?: boolean;
     value: DateRange | ((value?: ValueType) => DateRange);
+    closeOverlay?: boolean;
+    placement?: 'bottom' | 'left';
 }
 export declare type DisabledDateFunction = (
 /** Date used to determine if disabling is required. */

package/cjs/FormControl/FormControl.js

@@ -58,7 +58,6 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       AccepterComponent = _props$accepter === void 0 ? _Input.default : _props$accepter,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'form-control' : _props$classPrefix,
-      className = props.className,
       checkAsync = props.checkAsync,
       checkTrigger = props.checkTrigger,
       _props$errorPlacement = props.errorPlacement,
@@ -78,7 +77,7 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$shouldResetWit = props.shouldResetWithUnmount,
       shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,
       rule = props.rule,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "accepter", "classPrefix", "className", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "accepter", "classPrefix", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule"]);
 
   var _useContext2 = (0, _react.useContext)(_FormGroup.FormGroupContext),
       controlId = _useContext2.controlId;
@@ -100,10 +99,9 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
+      prefix = _useClassNames.prefix;
 
-  var classes = merge(className, withClassPrefix('wrapper'));
+  var classes = withClassPrefix('wrapper');
 
   var handleFieldChange = function handleFieldChange(value, event) {
     handleFieldCheck(value, trigger === 'change');

package/cjs/InputPicker/InputPicker.js

@@ -145,6 +145,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var targetRef = (0, _react.useRef)(null);
   var triggerRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)();
+  var listRef = (0, _react.useRef)(null);
 
   var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),
       locale = _useCustom.locale;
@@ -436,7 +437,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   (0, _Picker.usePublicMethods)(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
+    targetRef: targetRef,
+    listRef: listRef
   });
   /**
    * Remove the last item, after pressing the back key on the keyboard.
@@ -635,6 +637,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
+      listRef: listRef,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,

package/cjs/MultiCascader/DropdownMenu.js

@@ -69,7 +69,10 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       prefix = _useClassNames.prefix;
 
   var classes = merge(className, prefix('items'));
-  var rtl = (0, _utils.useCustom)('DropdownMenu');
+
+  var _useCustom = (0, _utils.useCustom)('DropdownMenu'),
+      rtl = _useCustom.rtl;
+
   var getCascadePaths = (0, _react.useCallback)(function (layer, node) {
     var paths = [];
 
@@ -96,7 +99,7 @@ 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 = node.loading ? _Spinner.default : rtl ? _AngleRight.default : _AngleLeft.default;
+    var Icon = node.loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;
     var active = value.some(function (v) {
       return v === nodeValue;
     });

package/cjs/Overlay/OverlayTrigger.d.ts

@@ -63,11 +63,11 @@ export interface OverlayTriggerProps extends StandardProps, AnimationEventProps
     /** Whether speaker to follow the cursor */
     followCursor?: boolean;
 }
-export interface OverlayTriggerInstance {
+export interface OverlayTriggerHandle {
     root: HTMLElement | undefined;
     updatePosition: () => void;
     open: (delay?: number) => void;
     close: (delay?: number) => void;
 }
-declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<OverlayTriggerInstance>>;
+declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<OverlayTriggerHandle>>;
 export default OverlayTrigger;

package/cjs/Picker/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ListProps } from './VirtualizedList';
+import { ListProps, ListHandle } from '../Windowing';
 import { StandardProps, ItemDataType } from '../@types/common';
 export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     classPrefix: string;
@@ -20,6 +20,7 @@ export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit
     rowGroupHeight?: number;
     virtualized?: boolean;
     listProps?: Partial<ListProps>;
+    listRef?: React.Ref<ListHandle>;
     /** Custom selected option */
     renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
     renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;

package/cjs/Picker/DropdownMenu.js

@@ -31,7 +31,7 @@ var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _VirtualizedList = require("./VirtualizedList");
+var _Windowing = require("../Windowing");
 
 var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
 
@@ -61,6 +61,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
       virtualized = props.virtualized,
       listProps = props.listProps,
+      virtualizedListRef = props.listRef,
       className = props.className,
       style = props.style,
       focusItemValue = props.focusItemValue,
@@ -74,7 +75,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       renderMenuItem = props.renderMenuItem,
       onGroupTitleClick = props.onGroupTitleClick,
       onSelect = props.onSelect,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["data", "group", "maxHeight", "activeItemValues", "disabledItemValues", "classPrefix", "valueKey", "labelKey", "virtualized", "listProps", "className", "style", "focusItemValue", "dropdownMenuItemClassPrefix", "dropdownMenuItemAs", "rowHeight", "rowGroupHeight", "renderMenuGroup", "renderMenuItem", "onGroupTitleClick", "onSelect"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["data", "group", "maxHeight", "activeItemValues", "disabledItemValues", "classPrefix", "valueKey", "labelKey", "virtualized", "listProps", "listRef", "className", "style", "focusItemValue", "dropdownMenuItemClassPrefix", "dropdownMenuItemAs", "rowHeight", "rowGroupHeight", "renderMenuGroup", "renderMenuItem", "onGroupTitleClick", "onSelect"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -84,10 +85,8 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var classes = merge(className, withClassPrefix('items', {
     grouped: group
   }));
-  var styles = (0, _extends2.default)({}, style, {
-    maxHeight: maxHeight
-  });
   var menuBodyContainerRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)([]),
       foldedGroupKeys = _useState[0],
@@ -109,8 +108,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event, checked);
   }, [onSelect]);
 
-  var getRowHeight = function getRowHeight(list, _ref) {
-    var index = _ref.index;
+  var getRowHeight = function getRowHeight(list, index) {
     var item = list[index];
 
     if (group && item[_getDataGroupBy.KEY_GROUP] && index !== 0) {
@@ -148,10 +146,13 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   }, [focusItemValue, menuBodyContainerRef, prefix]);
 
-  var renderItem = function renderItem(list, _ref2) {
-    var index = _ref2.index,
-        style = _ref2.style;
-    var item = list[index];
+  var renderItem = function renderItem(_ref) {
+    var _ref$index = _ref.index,
+        index = _ref$index === void 0 ? 0 : _ref$index,
+        style = _ref.style,
+        data = _ref.data,
+        itemData = _ref.item;
+    var item = itemData || data[index];
     var value = item[valueKey];
     var label = item[labelKey];
 
@@ -210,40 +211,45 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       return key === ((_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[_getDataGroupBy.KEY_GROUP_TITLE]);
     }));
   }) : data;
-  var rowCount = filteredItems.length; // Check whether the height of the data exceeds the height of the container.
+  var rowCount = filteredItems.length;
+  (0, _utils.useMount)(function () {
+    var _listRef$current, _listRef$current$scro;
 
-  var useVirtualized = virtualized && rowCount * rowHeight > maxHeight;
+    var itemIndex = (0, _findIndex.default)(filteredItems, function (item) {
+      return item[valueKey] === (activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues[0]);
+    });
+    (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : (_listRef$current$scro = _listRef$current.scrollToItem) === null || _listRef$current$scro === void 0 ? void 0 : _listRef$current$scro.call(_listRef$current, itemIndex);
+  });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    role: !useVirtualized ? 'listbox' : undefined
+    role: "listbox"
   }, rest, {
     className: classes,
     ref: (0, _utils.mergeRefs)(menuBodyContainerRef, ref),
-    style: styles
-  }), useVirtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {
+    style: (0, _extends2.default)({}, style, {
+      maxHeight: maxHeight
+    })
+  }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
     defaultHeight: maxHeight,
     style: {
       width: 'auto',
       height: 'auto'
     }
-  }, function (_ref3) {
-    var height = _ref3.height,
-        width = _ref3.width;
-    return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, (0, _extends2.default)({
-      role: "listbox",
-      containerRole: '',
-      "aria-readonly": undefined,
+  }, function (_ref2) {
+    var height = _ref2.height,
+        width = _ref2.width;
+    return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({
+      as: _Windowing.VariableSizeList,
+      ref: (0, _utils.mergeRefs)(listRef, virtualizedListRef),
       width: width,
       height: height || maxHeight,
-      scrollToIndex: (0, _findIndex.default)(data, function (item) {
-        return item[valueKey] === (activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues[0]);
-      }),
-      rowCount: rowCount,
-      rowHeight: getRowHeight.bind(_this, filteredItems),
-      rowRenderer: renderItem.bind(null, filteredItems)
-    }, listProps));
-  }) : filteredItems.map(function (_item, index) {
-    return renderItem(filteredItems, {
-      index: index
+      itemCount: rowCount,
+      itemData: filteredItems,
+      itemSize: getRowHeight.bind(_this, filteredItems)
+    }, listProps), renderItem);
+  }) : filteredItems.map(function (item, index) {
+    return renderItem({
+      index: index,
+      item: item
     });
   }));
 });

package/cjs/Picker/PickerOverlay.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-import { OverlayTriggerInstance } from '../Picker';
+import { OverlayTriggerHandle } from '../Picker';
 export interface PickerOverlayProps extends WithAsProps {
     placement?: string;
     autoWidth?: boolean;
     children?: React.ReactNode;
-    target?: React.RefObject<OverlayTriggerInstance>;
+    target?: React.RefObject<OverlayTriggerHandle>;
     onKeyDown?: (event: React.KeyboardEvent) => void;
 }
 declare const PickerOverlay: RsRefForwardingComponent<'div', PickerOverlayProps>;

package/cjs/Picker/PickerToggleTrigger.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { OverlayTriggerInstance, OverlayTriggerProps, OverlayTriggerType } from '../Overlay/OverlayTrigger';
+import { OverlayTriggerHandle, OverlayTriggerProps, OverlayTriggerType } from '../Overlay/OverlayTrigger';
 import { PositionChildProps } from '../Overlay/Position';
 import { TypeAttributes, AnimationEventProps } from '../@types/common';
-export type { OverlayTriggerInstance, PositionChildProps };
+export type { OverlayTriggerHandle, PositionChildProps };
 export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'speaker'> {
     placement?: TypeAttributes.Placement;
     pickerProps: any;

package/cjs/Picker/index.d.ts

@@ -1,6 +1,6 @@
-import { pickTriggerPropKeys, omitTriggerPropKeys, OverlayTriggerInstance, PositionChildProps } from './PickerToggleTrigger';
+import { pickTriggerPropKeys, omitTriggerPropKeys, OverlayTriggerHandle, PositionChildProps } from './PickerToggleTrigger';
 import { PickerToggleProps } from './PickerToggle';
-import { PickerInstance, PickerComponent } from './types';
+import { PickerHandle, PickerComponent } from './types';
 export { default as DropdownMenu } from './DropdownMenu';
 export { default as DropdownMenuCheckItem } from './DropdownMenuCheckItem';
 export { default as DropdownMenuGroup } from './DropdownMenuGroup';
@@ -11,6 +11,6 @@ export { default as PickerToggleTrigger } from './PickerToggleTrigger';
 export { default as SearchBar } from './SearchBar';
 export { default as SelectedElement } from './SelectedElement';
 export { pickTriggerPropKeys, omitTriggerPropKeys };
-export type { OverlayTriggerInstance, PositionChildProps, PickerInstance, PickerComponent, PickerToggleProps };
+export type { OverlayTriggerHandle, PositionChildProps, PickerHandle, PickerComponent, PickerToggleProps };
 export * from './utils';
 export * from './propTypes';

package/cjs/Picker/types.d.ts

@@ -1,13 +1,15 @@
 /// <reference types="react" />
 import { RsRefForwardingComponent } from '../@types/common';
-export interface PickerInstance {
-    root?: Element;
-    overlay?: Element;
-    target?: HTMLElement;
+import type { ListHandle } from '../Windowing';
+export interface PickerHandle {
+    root: HTMLElement | null;
+    list?: ListHandle;
+    overlay?: HTMLElement | null;
+    target?: HTMLElement | null;
     updatePosition?: () => void;
     open?: () => void;
     close?: () => void;
 }
 export declare type PickerComponent<P> = RsRefForwardingComponent<'div', P & {
-    ref?: React.Ref<PickerInstance>;
+    ref?: React.Ref<PickerHandle>;
 }>;