rsuite 5.20.0 → 5.22.0

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

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -9,7 +9,7 @@ import _isNil from "lodash/isNil";
 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';
@@ -18,6 +18,11 @@ import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar
 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';
 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,
@@ -601,36 +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, {
-        /**
-         * spread operator don't copy unenumerable properties
-         * so we need to copy them manually
-         */
-        parent: node.parent,
-        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() {
@@ -669,17 +671,14 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         height: 'auto'
       }
     }, function (_ref5) {
-      var height = _ref5.height,
-          width = _ref5.width;
+      var height = _ref5.height;
       return /*#__PURE__*/React.createElement(List, _extends({
         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));
   };
 

package/esm/CustomProvider/CustomProvider.d.ts

@@ -156,113 +156,6 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         off: string;
     } | undefined;
 }>>;
-declare const Consumer: React.Consumer<CustomProviderProps<{
-    common?: {
-        loading: string;
-        emptyMessage: string;
-    } | undefined;
-    Plaintext?: {
-        unfilled: string;
-        notSelected: string;
-        notUploaded: string;
-    } | undefined;
-    Pagination?: {
-        more: string;
-        prev: string;
-        next: string;
-        first: string;
-        last: string;
-        limit: string;
-        total: string;
-        skip: string;
-    } | undefined;
-    Calendar?: {
-        sunday: string;
-        monday: string;
-        tuesday: string;
-        wednesday: string;
-        thursday: string;
-        friday: string;
-        saturday: string;
-        ok: string;
-        today: string;
-        yesterday: string;
-        hours: string;
-        minutes: string;
-        seconds: string;
-        formattedMonthPattern: string;
-        formattedDayPattern: string;
-        dateLocale: any;
-    } | undefined;
-    DatePicker?: {
-        sunday: string;
-        monday: string;
-        tuesday: string;
-        wednesday: string;
-        thursday: string;
-        friday: string;
-        saturday: string;
-        ok: string;
-        today: string;
-        yesterday: string;
-        hours: string;
-        minutes: string;
-        seconds: string;
-        formattedMonthPattern: string;
-        formattedDayPattern: string;
-        dateLocale: any;
-    } | undefined;
-    DateRangePicker?: {
-        last7Days: string;
-        sunday: string;
-        monday: string;
-        tuesday: string;
-        wednesday: string;
-        thursday: string;
-        friday: string;
-        saturday: string;
-        ok: string;
-        today: string;
-        yesterday: string;
-        hours: string;
-        minutes: string;
-        seconds: string;
-        formattedMonthPattern: string;
-        formattedDayPattern: string;
-        dateLocale: any;
-    } | undefined;
-    Picker?: {
-        noResultsText: string;
-        placeholder: string;
-        searchPlaceholder: string;
-        checkAll: string;
-    } | undefined;
-    InputPicker?: {
-        newItem: string;
-        /**
-         * A Map of toast containers
-         */
-        createOption: string;
-    } | undefined;
-    Uploader?: {
-        inited: string;
-        progress: string;
-        error: string;
-        complete: string;
-        emptyFile: string;
-        upload: string;
-    } | undefined;
-    CloseButton?: {
-        closeLabel: string;
-    } | undefined;
-    Breadcrumb?: {
-        expandText: string;
-    } | undefined;
-    Toggle?: {
-        on: string;
-        off: string;
-    } | undefined;
-}>>;
 declare const CustomProvider: (props: Omit<CustomProviderProps, 'toasters'>) => JSX.Element;
-export { CustomContext, Consumer as CustomConsumer };
+export { CustomContext };
 export default CustomProvider;

package/esm/CustomProvider/CustomProvider.js

@@ -6,8 +6,6 @@ import { addClass, removeClass, canUseDOM } from '../DOMHelper';
 import ToastContainer, { toastPlacements } from '../toaster/ToastContainer';
 import { usePortal } from '../utils';
 var CustomContext = /*#__PURE__*/React.createContext({});
-var Consumer = CustomContext.Consumer,
-    Provider = CustomContext.Provider;
 var themes = ['light', 'dark', 'high-contrast'];
 
 var CustomProvider = function CustomProvider(props) {
@@ -44,7 +42,7 @@ var CustomProvider = function CustomProvider(props) {
       });
     }
   }, [classPrefix, theme]);
-  return /*#__PURE__*/React.createElement(Provider, {
+  return /*#__PURE__*/React.createElement(CustomContext.Provider, {
     value: value
   }, children, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
     className: "rs-toast-provider"
@@ -59,5 +57,5 @@ var CustomProvider = function CustomProvider(props) {
   }))));
 };
 
-export { CustomContext, Consumer as CustomConsumer };
+export { CustomContext };
 export default CustomProvider;

package/esm/CustomProvider/index.d.ts

@@ -1,5 +1,5 @@
-import CustomProvider, { CustomContext, CustomConsumer } from './CustomProvider';
+import CustomProvider, { CustomContext } from './CustomProvider';
 import FormattedDate from './FormattedDate';
-export { CustomContext, CustomConsumer, FormattedDate };
+export { CustomContext, FormattedDate };
 export type { CustomProviderProps } from './CustomProvider';
 export default CustomProvider;

package/esm/CustomProvider/index.js

@@ -1,4 +1,4 @@
-import CustomProvider, { CustomContext, CustomConsumer } from './CustomProvider';
+import CustomProvider, { CustomContext } from './CustomProvider';
 import FormattedDate from './FormattedDate';
-export { CustomContext, CustomConsumer, FormattedDate };
+export { CustomContext, FormattedDate };
 export default CustomProvider;

package/esm/DatePicker/DatePicker.js

@@ -10,6 +10,8 @@ import IconClockO from '@rsuite/icons/legacy/ClockO';
 import CalendarContainer from '../Calendar/CalendarContainer';
 import useCalendarDate from '../Calendar/useCalendarDate';
 import Toolbar from './Toolbar';
+import Stack from '../Stack';
+import PredefinedRanges from './PredefinedRanges';
 import { composeFunctions, createChainedFunction, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
 import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
 import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
@@ -334,6 +336,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChangePageTime: handleChangePageTime,
     onToggleMeridian: handleToggleMeridian
   }));
+  var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+  })) || [];
+  var bottomRanges = (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 renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
@@ -350,16 +358,27 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: mergeRefs(overlayRef, speakerRef),
       style: styles,
       target: triggerRef
-    }, calendar, /*#__PURE__*/React.createElement(Toolbar, {
+    }, /*#__PURE__*/React.createElement(Stack, {
+      alignItems: "flex-start"
+    }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
+      direction: "column",
+      spacing: 0,
+      className: prefix('date-predefined'),
+      ranges: sideRanges,
+      calendarDate: calendarDate,
+      locale: locale,
+      disabledShortcut: disabledToolbarHandle,
+      onClickShortcut: handleShortcutPageDate
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, calendar, /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
-      ranges: ranges,
+      ranges: bottomRanges,
       calendarDate: calendarDate,
       disabledOkBtn: disabledToolbarHandle,
       disabledShortcut: disabledToolbarHandle,
       onClickShortcut: handleShortcutPageDate,
       onOk: handleOK,
       hideOkBtn: oneTap
-    }));
+    }))));
   };
 
   var hasValue = !!value;

package/esm/DatePicker/types.d.ts

@@ -4,6 +4,7 @@ export interface RangeType<T> {
     label: ReactNode;
     closeOverlay?: boolean;
     value: T | ((value: T) => T);
+    placement?: 'bottom' | 'left';
 }
 export interface InnerRange<T> extends Omit<RangeType<T>, 'value'> {
     value: T;

package/esm/DateRangePicker/DateRangePicker.js

@@ -134,27 +134,34 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var selectRangeValueRef = useRef(null);
   /**
-   * Call this function to update the calendar panel rendering benchmark value.
-   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].
+   * Get the time on the second calendar as the end of the date range.
    */
 
-  var updateCalendarDateRange = useCallback(function (value, calendarKey) {
-    var nextValue = value;
-    var shouldRenderTime = DateUtils.shouldRenderTime,
-        getHours = DateUtils.getHours,
+  var getCalendarEndDatetime = useCallback(function (date) {
+    var getHours = DateUtils.getHours,
         getMinutes = DateUtils.getMinutes,
         getSeconds = DateUtils.getSeconds,
         set = DateUtils.set;
+    var calendarEndDate = (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[1]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[1]);
+    return set(date, {
+      hours: getHours(calendarEndDate),
+      minutes: getMinutes(calendarEndDate),
+      seconds: getSeconds(calendarEndDate)
+    });
+  }, [calendarDate, defaultCalendarValue]);
+  /**
+   * Call this function to update the calendar panel rendering benchmark value.
+   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].
+   */
 
-    if (shouldRenderTime(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 updateCalendarDateRange = useCallback(function (selectedDate, calendarKey) {
+    var nextValue = selectedDate;
+    var shouldRenderTime = DateUtils.shouldRenderTime;
 
-      var _endDate = set(addMonths(_startDate, 1), {
-        hours: getHours(calendarEndDate),
-        minutes: getMinutes(calendarEndDate),
-        seconds: getSeconds(calendarEndDate)
-      });
+    if (shouldRenderTime(formatStr) && calendarKey === undefined && selectedDate !== null && selectedDate !== void 0 && selectedDate.length) {
+      var _startDate = selectedDate[0];
+
+      var _endDate = getCalendarEndDatetime(addMonths(_startDate, 1));
 
       nextValue = [_startDate, _endDate];
     }
@@ -163,7 +170,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value: nextValue,
       calendarKey: calendarKey
     }));
-  }, [calendarDate, defaultCalendarValue, formatStr]); // if valueProp changed then update selectValue/hoverValue
+  }, [getCalendarEndDatetime, formatStr]); // if valueProp changed then update selectValue/hoverValue
 
   useEffect(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
@@ -327,19 +334,31 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         nextSelectDates = hoverRangeValue;
         selectRangeValueRef.current = hoverRangeValue;
       }
-    } // If user have completed the selection, then sort
+    }
+
+    var shouldRenderTime = DateUtils.shouldRenderTime,
+        isAfter = DateUtils.isAfter;
+
+    if (nextSelectDates.length === 2) {
+      // If user have completed the selection, then sort the selected dates.
+      if (isAfter(nextSelectDates[0], nextSelectDates[1])) {
+        nextSelectDates.reverse();
+      }
 
+      if (shouldRenderTime(formatStr)) {
+        nextSelectDates[1] = getCalendarEndDatetime(nextSelectDates[1]);
+      }
 
-    if (nextSelectDates.length === 2 && DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {
-      nextSelectDates.reverse();
+      setHoverDateRange(nextSelectDates);
+    } else {
+      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
 
-    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
     setSelectedDates(nextSelectDates);
     updateCalendarDateRange(nextSelectDates);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
     hasDoneSelect.current = !hasDoneSelect.current;
-  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
+  }, [formatStr, getCalendarEndDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.

package/esm/Disclosure/Disclosure.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
-export declare type DisclosureTrigger = 'click' | 'mouseover';
-export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseOver' | 'onMouseOut'> {
+export declare type DisclosureTrigger = 'click' | 'hover';
+export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseEnter' | 'onMouseLeave'> {
     open: boolean;
 }
 export interface DisclosureProps {