rsuite 5.18.0 → 5.18.1-beta.4

package/esm/Calendar/CalendarContainer.js

@@ -0,0 +1,208 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import pick from 'lodash/pick';
+import MonthDropdown from './MonthDropdown';
+import TimeDropdown from './TimeDropdown';
+import CalendarBody from './CalendarBody';
+import CalendarHeader from './CalendarHeader';
+import { useClassNames, composeFunctions } from '../utils';
+import { disabledTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, setDate, isSameMonth, calendarOnlyProps, omitHideDisabledProps } from '../utils/dateUtils';
+import { CalendarProvider } from './CalendarContext';
+import useCalendarState, { CalendarState } from './useCalendarState';
+import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
+var CalendarContainer = /*#__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' : _props$classPrefix,
+      dateRange = props.dateRange,
+      disabledBackward = props.disabledBackward,
+      defaultState = props.defaultState,
+      disabledDate = props.disabledDate,
+      disabledForward = props.disabledForward,
+      format = props.format,
+      hoverRangeValue = props.hoverRangeValue,
+      inSameMonth = props.inSameMonth,
+      _props$isoWeek = props.isoWeek,
+      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
+      limitEndYear = props.limitEndYear,
+      locale = props.locale,
+      onChangePageDate = props.onChangePageDate,
+      onChangePageTime = props.onChangePageTime,
+      onMouseMove = props.onMouseMove,
+      onMoveBackward = props.onMoveBackward,
+      onMoveForward = props.onMoveForward,
+      onSelect = props.onSelect,
+      onToggleMeridian = props.onToggleMeridian,
+      onToggleMonthDropdown = props.onToggleMonthDropdown,
+      onToggleTimeDropdown = props.onToggleTimeDropdown,
+      calendarDate = props.calendarDate,
+      renderCell = props.renderCell,
+      renderTitle = props.renderTitle,
+      renderToolbar = props.renderToolbar,
+      showMeridian = props.showMeridian,
+      showWeekNumbers = props.showWeekNumbers,
+      inline = props.inline,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "locale", "onChangePageDate", "onChangePageTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+
+  var _useClassNames = useClassNames(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge,
+      prefix = _useClassNames.prefix;
+
+  var _useCalendarState = useCalendarState(defaultState),
+      calendarState = _useCalendarState.calendarState,
+      reset = _useCalendarState.reset,
+      openMonth = _useCalendarState.openMonth,
+      openTime = _useCalendarState.openTime;
+
+  var isDisabledDate = useCallback(function (date) {
+    var _disabledDate;
+
+    return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
+  }, [disabledDate]);
+
+  var isTimeDisabled = function isTimeDisabled(date) {
+    return disabledTime(props, date);
+  };
+
+  var handleMoveForward = useCallback(function () {
+    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(addMonths(calendarDate, 1));
+  }, [onMoveForward, calendarDate]);
+  var handleMoveBackward = useCallback(function () {
+    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(calendarDate, -1));
+  }, [onMoveBackward, calendarDate]); // It is displayed as the month to be selected.
+
+  var toggleMonthView = useCallback(function () {
+    if (calendarState === CalendarState.MONTH) {
+      reset();
+    } else {
+      openMonth();
+    }
+
+    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(calendarState !== CalendarState.MONTH);
+  }, [calendarState, onToggleMonthDropdown, openMonth, reset]); // It is displayed as a time to be selected.
+
+  var toggleTimeView = useCallback(function () {
+    if (calendarState === CalendarState.TIME) {
+      reset();
+    } else {
+      openTime();
+    }
+
+    onToggleTimeDropdown === null || onToggleTimeDropdown === void 0 ? void 0 : onToggleTimeDropdown(calendarState !== CalendarState.TIME);
+  }, [calendarState, onToggleTimeDropdown, openTime, reset]);
+  var handleCloseDropdown = useCallback(function () {
+    return reset();
+  }, [reset]);
+  var renderDate = shouldRenderDate(format);
+  var renderTime = shouldRenderTime(format);
+  var renderMonth = shouldRenderMonth(format);
+  var onlyShowTime = renderTime && !renderDate && !renderMonth;
+  var onlyShowMonth = renderMonth && !renderDate && !renderTime;
+  var showTime = calendarState === CalendarState.TIME || onlyShowTime;
+  var showMonth = calendarState === CalendarState.MONTH || onlyShowMonth;
+  var inSameThisMonthDate = useCallback(function (date) {
+    return composeFunctions(function (d) {
+      return setDate(d, 1);
+    }, function (d) {
+      return isSameMonth(d, date);
+    })(date);
+  }, []);
+  var calendarClasses = merge(className, withClassPrefix({
+    'time-view': showTime,
+    'month-view': showMonth,
+    'show-week-numbers': showWeekNumbers
+  }));
+  var timeDropdownProps = pick(rest, calendarOnlyProps);
+  var handleChangePageDate = useCallback(function (date, event) {
+    reset();
+    onChangePageDate === null || onChangePageDate === void 0 ? void 0 : onChangePageDate(date, event);
+  }, [onChangePageDate, reset]);
+  var contextValue = useMemo(function () {
+    return {
+      date: calendarDate,
+      dateRange: dateRange,
+      disabledDate: isDisabledDate,
+      format: format,
+      hoverRangeValue: hoverRangeValue,
+      inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
+      isoWeek: isoWeek,
+      locale: locale,
+      onChangePageDate: handleChangePageDate,
+      onChangePageTime: onChangePageTime,
+      onMouseMove: onMouseMove,
+      onSelect: onSelect,
+      renderCell: renderCell,
+      showWeekNumbers: showWeekNumbers,
+      inline: inline
+    };
+  }, [calendarDate, dateRange, format, handleChangePageDate, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
+  return /*#__PURE__*/React.createElement(CalendarProvider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, omitHideDisabledProps(rest), {
+    className: calendarClasses,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(CalendarHeader, {
+    showMonth: renderMonth,
+    showDate: renderDate,
+    showTime: renderTime,
+    showMeridian: showMeridian,
+    disabledTime: isTimeDisabled,
+    onMoveForward: handleMoveForward,
+    onMoveBackward: handleMoveBackward,
+    onToggleMonthDropdown: toggleMonthView,
+    onToggleTimeDropdown: toggleTimeView,
+    onToggleMeridian: onToggleMeridian,
+    renderTitle: renderTitle,
+    renderToolbar: renderToolbar,
+    disabledBackward: disabledBackward,
+    disabledForward: disabledForward
+  }), renderDate && /*#__PURE__*/React.createElement(CalendarBody, null), renderMonth && /*#__PURE__*/React.createElement(MonthDropdown, {
+    show: showMonth,
+    limitEndYear: limitEndYear,
+    disabledMonth: isDisabledDate
+  }), renderTime && /*#__PURE__*/React.createElement(TimeDropdown, _extends({}, timeDropdownProps, {
+    show: showTime,
+    showMeridian: showMeridian
+  })), (showMonth || showTime) && renderDate && /*#__PURE__*/React.createElement("button", {
+    className: prefix('btn-close'),
+    onClick: handleCloseDropdown,
+    "aria-label": "Collapse " + (showMonth ? 'month' : 'time') + " view"
+  }, /*#__PURE__*/React.createElement(AngleUpIcon, null))));
+});
+CalendarContainer.displayName = 'CalendarContainer';
+CalendarContainer.propTypes = {
+  className: PropTypes.string,
+  classPrefix: PropTypes.string,
+  disabledDate: PropTypes.func,
+  disabledHours: PropTypes.func,
+  disabledMinutes: PropTypes.func,
+  disabledSeconds: PropTypes.func,
+  format: PropTypes.string,
+  hideHours: PropTypes.func,
+  hideMinutes: PropTypes.func,
+  hideSeconds: PropTypes.func,
+  inSameMonth: PropTypes.func,
+  isoWeek: PropTypes.bool,
+  limitEndYear: PropTypes.number,
+  locale: PropTypes.object,
+  onChangePageDate: PropTypes.func,
+  onChangePageTime: PropTypes.func,
+  onMoveBackward: PropTypes.func,
+  onMoveForward: PropTypes.func,
+  onSelect: PropTypes.func,
+  onToggleMeridian: PropTypes.func,
+  onToggleMonthDropdown: PropTypes.func,
+  onToggleTimeDropdown: PropTypes.func,
+  calendarDate: PropTypes.instanceOf(Date),
+  renderCell: PropTypes.func,
+  renderTitle: PropTypes.func,
+  renderToolbar: PropTypes.func,
+  showMeridian: PropTypes.bool,
+  showWeekNumbers: PropTypes.bool
+};
+export default CalendarContainer;

package/{cjs/Calendar/Header.d.ts → esm/Calendar/CalendarHeader.d.ts}

@@ -1,20 +1,22 @@
 import React from 'react';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
-export interface HeaderProps extends WithAsProps {
+export interface CalendarHeaderProps {
     disabledBackward?: boolean;
     disabledForward?: boolean;
-    showDate?: boolean;
     showMeridian?: boolean;
+    onToggleMeridian?: (event: React.MouseEvent) => void;
+    renderTitle?: (date: Date) => React.ReactNode;
+    renderToolbar?: (date: Date) => React.ReactNode;
+}
+interface CalendarHeaderPrivateProps extends CalendarHeaderProps, WithAsProps {
+    showDate?: boolean;
     showMonth?: boolean;
     showTime?: boolean;
     disabledTime?: (date: Date) => boolean;
     onMoveBackward?: () => void;
     onMoveForward?: () => void;
-    onToggleMeridian?: (event: React.MouseEvent) => void;
     onToggleMonthDropdown?: (event: React.MouseEvent) => void;
     onToggleTimeDropdown?: (event: React.MouseEvent) => void;
-    renderTitle?: (date: Date) => React.ReactNode;
-    renderToolbar?: (date: Date) => React.ReactNode;
 }
-declare const Header: RsRefForwardingComponent<'div', HeaderProps>;
-export default Header;
+declare const CalendarHeader: RsRefForwardingComponent<'div', CalendarHeaderPrivateProps>;
+export default CalendarHeader;

package/esm/Calendar/{Header.js → CalendarHeader.js}

@@ -9,7 +9,7 @@ import Button from '../Button';
 import { useClassNames } from '../utils';
 import { FormattedDate } from '../CustomProvider';
 import { useCalendarContext } from './CalendarContext';
-var Header = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
       className = props.className,
@@ -134,8 +134,8 @@ var Header = /*#__PURE__*/React.forwardRef(function (props, ref) {
     formatStr: "a"
   }))), renderToolbar === null || renderToolbar === void 0 ? void 0 : renderToolbar(date));
 });
-Header.displayName = 'Header';
-Header.propTypes = {
+CalendarHeader.displayName = 'CalendarHeader';
+CalendarHeader.propTypes = {
   className: PropTypes.string,
   classPrefix: PropTypes.string,
   disabledBackward: PropTypes.bool,
@@ -153,4 +153,4 @@ Header.propTypes = {
   showMonth: PropTypes.bool,
   showTime: PropTypes.bool
 };
-export default Header;
+export default CalendarHeader;

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/Calendar/Table.js

@@ -32,7 +32,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   }));
 });
-Table.displayName = 'Table';
+Table.displayName = 'CalendarTable';
 Table.propTypes = {
   rows: PropTypes.array,
   className: PropTypes.string,

package/esm/Calendar/TableHeaderRow.js

@@ -50,7 +50,7 @@ var TableHeaderRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, locale === null || locale === void 0 ? void 0 : locale[key]));
   }));
 });
-TableHeaderRow.displayName = 'TableHeaderRow';
+TableHeaderRow.displayName = 'CalendarTableHeaderRow';
 TableHeaderRow.propTypes = {
   as: PropTypes.elementType,
   className: PropTypes.string,

package/esm/Calendar/TableRow.js

@@ -133,7 +133,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     role: "rowheader"
   }, DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
 });
-TableRow.displayName = 'TableRow';
+TableRow.displayName = 'CalendarTableRow';
 TableRow.propTypes = {
   weekendDate: PropTypes.instanceOf(Date),
   className: PropTypes.string,

package/esm/Calendar/index.d.ts

@@ -1,8 +1,9 @@
-import CalendarPanel from './CalendarPanel';
-import Calendar, { CalendarState } from './Calendar';
+import Calendar from './Calendar';
+import CalendarContainer from './CalendarContainer';
+import { CalendarState } from './useCalendarState';
 import CalendarContext from './CalendarContext';
 import { CalendarContextValue } from './types';
-export { Calendar, CalendarContext, CalendarState };
+export { CalendarContainer, CalendarContext, CalendarState };
 export type { CalendarContextValue };
-export type { CalendarPanelProps } from './CalendarPanel';
-export default CalendarPanel;
+export type { CalendarProps } from './Calendar';
+export default Calendar;

package/esm/Calendar/index.js

@@ -1,5 +1,6 @@
-import CalendarPanel from './CalendarPanel';
-import Calendar, { CalendarState } from './Calendar';
+import Calendar from './Calendar';
+import CalendarContainer from './CalendarContainer';
+import { CalendarState } from './useCalendarState';
 import CalendarContext from './CalendarContext';
-export { Calendar, CalendarContext, CalendarState };
-export default CalendarPanel;
+export { CalendarContainer, CalendarContext, CalendarState };
+export default Calendar;

package/esm/Calendar/useCalendarState.d.ts

@@ -0,0 +1,11 @@
+export declare enum CalendarState {
+    'TIME' = "TIME",
+    'MONTH' = "MONTH"
+}
+declare const useCalendarState: (defaultState?: CalendarState) => {
+    calendarState: CalendarState | undefined;
+    reset: () => void;
+    openMonth: () => void;
+    openTime: () => void;
+};
+export default useCalendarState;

package/esm/Calendar/useCalendarState.js

@@ -0,0 +1,31 @@
+import { useCallback, useState } from 'react';
+export var CalendarState;
+
+(function (CalendarState) {
+  CalendarState["TIME"] = "TIME";
+  CalendarState["MONTH"] = "MONTH";
+})(CalendarState || (CalendarState = {}));
+
+var useCalendarState = function useCalendarState(defaultState) {
+  var _useState = useState(defaultState),
+      calendarState = _useState[0],
+      setCalendarState = _useState[1];
+
+  var reset = useCallback(function () {
+    setCalendarState(undefined);
+  }, []);
+  var openMonth = useCallback(function () {
+    setCalendarState(CalendarState.MONTH);
+  }, []);
+  var openTime = useCallback(function () {
+    setCalendarState(CalendarState.TIME);
+  }, []);
+  return {
+    calendarState: calendarState,
+    reset: reset,
+    openMonth: openMonth,
+    openTime: openTime
+  };
+};
+
+export default useCalendarState;

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/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/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,