rsuite 5.0.0-beta.8 → 5.0.0

package/README.md

@@ -1,4 +1,3 @@
-
 <p align="center">
   <a href="https://rsuitejs.com" target="_blank" rel="noopener noreferrer">
    <img src="https://user-images.githubusercontent.com/1203827/65102389-7be3f100-d9fd-11e9-859e-ae9617ed2f91.png" alt="React Suite logo">
@@ -47,13 +46,13 @@ React Suite supports server side rendering. Support [Next.js](https://github.com
 React Suite is available as an [npm package][npm-home].
 
 ```bash
-npm i rsuite@next --save
+npm i rsuite --save
 ```
 
 or if you prefer Yarn
 
 ```bash
-yarn add rsuite@next
+yarn add rsuite
 ```
 
 ## Usage
@@ -79,8 +78,9 @@ You can go through [full documentation][rsuite-doc-guide] or start with followin
 - [Right-to-left][rsuite-doc-guide-rtl]
 - [Components][rsuite-components-overview]
 
-**Previous old version**
+**Historic version**
 
+- [Version 4.\*](https://v3.rsuitejs.com/)
 - [Version 3.\*](https://v3.rsuitejs.com/)
 - [Version 2.\*](https://v2.rsuitejs.com/)
 

package/Sidenav/styles/index.less

@@ -1,6 +1,6 @@
 @import '../../styles/common';
+@import '../../styles//mixins/menu';
 @import '../../Ripple/styles/mixins';
-@import '../../Navbar/styles/index';
 @import 'mixin';
 
 //
@@ -20,11 +20,16 @@
 
   > .rs-sidenav-item,
   > .rs-dropdown .rs-dropdown-toggle,
-  .rs-dropdown-item {
+  .rs-dropdown-item,
+  .rs-dropdown-item-toggle {
     padding: @sidenav-padding-vertical @sidenav-padding-horizontal;
     transition: @nav-item-transition;
     border-radius: 0;
     color: inherit;
+
+    .high-contrast-mode({
+      transition: none;
+    });
   }
 
   > .rs-sidenav-item,
@@ -396,7 +401,33 @@
 
 // Default Sidenav
 .rs-sidenav-default {
-  .rs-navbar-default();
+  background-color: var(--rs-sidenav-default-bg);
+  color: var(--rs-sidenav-default-text);
+
+  .rs-sidenav-item,
+  .rs-dropdown-toggle {
+    background-color: var(--rs-sidenav-default-bg);
+  }
+
+  .rs-sidenav-item:hover,
+  .rs-dropdown .rs-dropdown-toggle:hover,
+  .rs-dropdown.rs-dropdown-open .rs-dropdown-toggle {
+    background-color: var(--rs-sidenav-default-hover-bg);
+    color: var(--rs-sidenav-default-hover-text);
+  }
+
+  .rs-sidenav-item.rs-sidenav-item-active,
+  .rs-dropdown-item.rs-dropdown-item-active,
+  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
+    color: var(--rs-sidenav-default-selected-text);
+  }
+
+  // Collapsed
+  &.rs-sidenav-collapse-out {
+    .rs-dropdown-item.rs-dropdown-item-active {
+      .menuitem-active();
+    }
+  }
 }
 
 .rs-sidenav-default.rs-sidenav-collapse-in,
@@ -404,20 +435,20 @@
   .rs-dropdown-item:not(.rs-dropdown-item-submenu),
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle {
-    color: var(--rs-navbar-default-text);
+    color: var(--rs-sidenav-default-text);
 
     &:hover,
     &:focus,
     &.rs-dropdown-item-focus {
-      background-color: var(--rs-navbar-default-hover-bg);
-      color: var(--rs-navbar-default-hover-text);
+      background-color: var(--rs-sidenav-default-hover-bg);
+      color: var(--rs-sidenav-default-hover-text);
     }
   }
 
   // Reset active dropdown-item style
   .rs-sidenav-item.rs-sidenav-item-active,
   .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active {
-    color: var(--rs-navbar-default-selected-text);
+    color: var(--rs-sidenav-default-selected-text);
 
     .high-contrast-mode({
       text-decoration: underline;
@@ -429,33 +460,51 @@
 .rs-sidenav-default.rs-sidenav-collapsing,
 .rs-sidenav-default.rs-sidenav-collapse-out {
   // Set active Level1 style
-  .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle {
-    > .rs-icon {
-      color: var(--rs-navbar-default-selected-text);
-    }
+  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
+    color: var(--rs-sidenav-default-selected-text);
   }
 }
 
 // Inverse Sidenav
 .rs-sidenav-inverse {
-  .rs-navbar-inverse();
+  background-color: var(--rs-sidenav-inverse-bg);
+  color: var(--rs-sidenav-inverse-text);
+
+  .rs-sidenav-item,
+  .rs-dropdown .rs-dropdown-toggle,
+  .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle {
+    background-color: var(--rs-sidenav-inverse-bg);
+
+    &:hover,
+    &:focus {
+      background-color: var(--rs-sidenav-inverse-hover-bg);
+    }
+  }
+
+  // Active
+  .rs-sidenav-item.rs-sidenav-item-active,
+  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
+    .high-contrast-mode({
+      color: var(--rs-sidenav-inverse-selected-text);
+    });
+  }
 
   // Active
-  .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle,
+  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle,
   .rs-sidenav-item,
   .rs-dropdown .rs-dropdown-toggle {
-    color: var(--rs-navbar-inverse-text);
+    color: var(--rs-sidenav-inverse-text);
 
     &:hover,
     &:focus,
     &.rs-dropdown-item-focus {
-      color: var(--rs-navbar-inverse-text);
+      color: var(--rs-sidenav-inverse-text);
     }
   }
 
-  .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle,
-  .rs-sidenav-item.rs-sidenav-item-active {
-    background-color: var(--rs-navbar-inverse-selected-bg);
+  .rs-sidenav-item.rs-sidenav-item-active,
+  .rs-dropdown-item.rs-dropdown-item-active {
+    background-color: var(--rs-sidenav-inverse-selected-bg);
   }
 }
 
@@ -464,32 +513,45 @@
   .rs-dropdown-item:not(.rs-dropdown-item-submenu),
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle {
-    color: var(--rs-navbar-inverse-text);
+    color: var(--rs-sidenav-inverse-text);
 
     &:hover,
     &:focus,
     &.rs-dropdown-item-focus {
-      background-color: var(--rs-navbar-inverse-hover-bg);
-      color: var(--rs-navbar-inverse-text);
+      background-color: var(--rs-sidenav-inverse-hover-bg);
+      color: var(--rs-sidenav-inverse-text);
     }
   }
-
-  // Reset active dropdown-item style
-  .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active:not(.rs-dropdown-item-submenu) {
-    background-color: var(--rs-navbar-inverse-hover-bg);
-  }
 }
 
 // Subtle Sidenav
 .rs-sidenav-subtle {
-  .rs-navbar-subtle();
+  background-color: transparent;
+  color: var(--rs-sidenav-subtle-text);
+
+  .rs-sidenav-item,
+  .rs-dropdown .rs-dropdown-toggle {
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      color: var(--rs-sidenav-subtle-hover-text);
+    }
+  }
+
+  // Active
+  .rs-sidenav-item.rs-sidenav-item-active,
+  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
+    color: var(--rs-sidenav-subtle-selected-text);
+  }
 
   .rs-dropdown-open > .rs-dropdown-toggle.btn {
     background-color: transparent;
 
     &:hover,
     &:focus {
-      background-color: var(--rs-navbar-subtle-hover-bg);
+      background-color: var(--rs-sidenav-subtle-hover-bg);
     }
   }
 }
@@ -499,18 +561,18 @@
   .rs-dropdown-item:not(.rs-dropdown-item-submenu),
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle {
-    color: var(--rs-navbar-subtle-text);
+    color: var(--rs-sidenav-subtle-text);
 
     &:hover,
     &:focus {
-      background-color: var(--rs-navbar-subtle-hover-bg);
-      color: var(--rs-navbar-subtle-hover-text);
+      background-color: var(--rs-sidenav-subtle-hover-bg);
+      color: var(--rs-sidenav-subtle-hover-text);
     }
   }
 
   // Reset active dropdown-item style
   .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active {
-    color: var(--rs-navbar-subtle-selected-text);
+    color: var(--rs-sidenav-subtle-selected-text);
   }
 }
 
@@ -518,15 +580,15 @@
 .rs-sidenav-subtle.rs-sidenav-collapsing,
 .rs-sidenav-subtle.rs-sidenav-collapse-out {
   // Set active Level1 style
-  .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle {
-    color: var(--rs-navbar-subtle-text);
+  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
+    color: var(--rs-sidenav-subtle-text);
 
     &:hover {
-      background-color: var(--rs-navbar-subtle-hover-bg);
+      background-color: var(--rs-sidenav-subtle-hover-bg);
     }
 
-    > .rs-icon {
-      color: var(--rs-navbar-subtle-selected-text);
+    &-icon {
+      color: var(--rs-sidenav-subtle-selected-text);
     }
   }
 }

package/cjs/@types/common.d.ts

@@ -72,6 +72,8 @@ export interface PickerBaseProps<LocaleType = any> extends WithAsProps, Animatio
     defaultOpen?: boolean;
     /** A picker that can clear values */
     cleanable?: boolean;
+    /** A picker can have different sizes */
+    size?: TypeAttributes.Size;
     /** Called when Modal is displayed */
     onOpen?: () => void;
     /** Called when Modal is closed */

package/cjs/DateRangePicker/Calendar.d.ts

@@ -13,7 +13,8 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     isoWeek?: boolean;
     limitEndYear?: number;
     locale?: DatePickerLocale;
-    onChangeCalendarDate?: (index: number, nextPageDate: Date) => void;
+    onChangeCalendarDate?: (index: number, date: Date) => void;
+    onChangeCalendarTime?: (index: number, date: Date) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event?: React.SyntheticEvent<any>) => void;
     showOneCalendar?: boolean;

package/cjs/DateRangePicker/Calendar.js

@@ -36,9 +36,10 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       index = props.index,
       limitEndYear = props.limitEndYear,
       onChangeCalendarDate = props.onChangeCalendarDate,
+      onChangeCalendarTime = props.onChangeCalendarTime,
       showOneCalendar = props.showOneCalendar,
       value = props.value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "showOneCalendar", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "showOneCalendar", "value"]);
 
   var _useState = (0, _react.useState)(),
       calendarState = _useState[0],
@@ -55,8 +56,8 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setCalendarState(undefined);
   }, [index, onChangeCalendarDate]);
   var handleChangePageTime = (0, _react.useCallback)(function (nextPageDate) {
-    onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
+    onChangeCalendarTime(index, nextPageDate);
+  }, [index, onChangeCalendarTime]);
   var toggleMonthDropdown = (0, _react.useCallback)(function () {
     setCalendarState(calendarState === _Calendar.CalendarState.DROP_MONTH ? undefined : _Calendar.CalendarState.DROP_MONTH);
   }, [calendarState]);

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { PickerComponent } from '../Picker';
 import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
+import { PickerComponent } from '../Picker';
 import { DisabledDateFunction, RangeType, ValueType } from './types';
 export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<ValueType> {
     /** Configure shortcut options */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -11,35 +11,35 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
-var _pick = _interopRequireDefault(require("lodash/pick"));
+var _partial = _interopRequireDefault(require("lodash/partial"));
 
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _pick = _interopRequireDefault(require("lodash/pick"));
 
-var _dateUtils = require("../utils/dateUtils");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _CustomProvider = require("../CustomProvider");
 
 var _Toolbar = _interopRequireDefault(require("../DatePicker/Toolbar"));
 
-var _Calendar = _interopRequireDefault(require("./Calendar"));
+var _Picker = require("../Picker");
 
-var _utils = require("./utils");
+var _utils = require("../utils");
 
-var _utils2 = require("../utils");
+var _dateUtils = require("../utils/dateUtils");
 
-var _Picker = require("../Picker");
+var _Calendar2 = _interopRequireDefault(require("./Calendar"));
 
-var _partial = _interopRequireDefault(require("lodash/partial"));
+var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
 
-var _Calendar2 = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
+var _utils2 = require("./utils");
 
 var defaultProps = (0, _extends2.default)({}, _Picker.pickerDefaultProps, {
   as: 'div',
@@ -94,17 +94,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onSelect = props.onSelect,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
 
-  var _useClassNames = (0, _utils2.useClassNames)(classPrefix),
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
       prefix = _useClassNames.prefix;
 
-  var _useCustom = (0, _utils2.useCustom)('DateRangePicker', overrideLocale),
+  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),
       locale = _useCustom.locale,
       formatDate = _useCustom.formatDate;
 
   var rangeFormatStr = "" + formatStr + character + formatStr;
 
-  var _useControlled = (0, _utils2.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : []),
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : []),
       value = _useControlled[0],
       setValue = _useControlled[1];
   /**
@@ -135,7 +135,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       setHoverValue = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
 
-  var _useState3 = (0, _react.useState)((0, _utils.getCalendarDate)({
+  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({
     value: valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue
   })),
       calendarDate = _useState3[0],
@@ -158,7 +158,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
   var updateCalendarDate = (0, _react.useCallback)(function (value) {
-    setCalendarDate((0, _utils.getCalendarDate)({
+    setCalendarDate((0, _utils2.getCalendarDate)({
       value: value
     }));
   }, []); // if valueProp changed then update selectValue/hoverValue
@@ -227,11 +227,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var hoverRangeFunc = hoverRange;
 
     if (hoverRange === 'week') {
-      hoverRangeFunc = (0, _partial.default)(_utils.getWeekHoverRange, isoWeek);
+      hoverRangeFunc = (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);
     }
 
     if (hoverRangeFunc === 'month') {
-      hoverRangeFunc = _utils.getMonthHoverRange;
+      hoverRangeFunc = _utils2.getMonthHoverRange;
     }
 
     if (typeof hoverRangeFunc !== 'function') {
@@ -245,7 +245,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return [];
     }
 
-    if (_utils2.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
+    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
       hoverValues.reverse();
     }
 
@@ -259,7 +259,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextValue = !(0, _isUndefined.default)(nextSelectValue) ? nextSelectValue : selectValue;
     setSelectValue(nextValue || []);
 
-    if (!(0, _dateUtils.isSameDay)(nextValue[0], value[0]) || !(0, _dateUtils.isSameDay)(nextValue[1], value[1])) {
+    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {
       setValue(nextValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     } // `closeOverlay` default value is `true`
@@ -268,7 +268,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (closeOverlay !== false) {
       handleCloseDropdown();
     }
-  }, [handleCloseDropdown, onChange, selectValue, setSelectValue, setValue, value]);
+  }, [formatStr, handleCloseDropdown, onChange, selectValue, setValue, value]);
   /**
    * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
    * The MouseMove event is called between the first click and the second click to update the selection state.
@@ -282,7 +282,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       if (hoverRange) {
         var nextHoverValue = [selectRangeValueRef.current[0], hoverRangeValue[1]];
 
-        if (_utils2.DateUtils.isBefore(hoverRangeValue[0], selectRangeValueRef.current[0])) {
+        if (_utils.DateUtils.isBefore(hoverRangeValue[0], selectRangeValueRef.current[0])) {
           nextHoverValue[0] = hoverRangeValue[0];
           nextHoverValue[1] = selectRangeValueRef.current[1];
         }
@@ -304,7 +304,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var noHoverRangeValid = hoverRangeValue.length !== 2; // in `oneTap` mode
 
     if (hasDoneSelect.current && oneTap) {
-      handleValueUpdate(event, noHoverRangeValid ? [(0, _utils.setTimingMargin)(date), (0, _utils.setTimingMargin)(date, 'right')] : hoverRangeValue);
+      handleValueUpdate(event, noHoverRangeValid ? [(0, _utils2.setTimingMargin)(date), (0, _utils2.setTimingMargin)(date, 'right')] : hoverRangeValue);
       hasDoneSelect.current = false;
       return;
     } // no preset hover range can use
@@ -329,7 +329,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } // If user have completed the selection, then sort
 
 
-    if (nextSelectValue.length === 2 && _utils2.DateUtils.isAfter(nextSelectValue[0], nextSelectValue[1])) {
+    if (nextSelectValue.length === 2 && _utils.DateUtils.isAfter(nextSelectValue[0], nextSelectValue[1])) {
       nextSelectValue.reverse();
     }
 
@@ -357,6 +357,20 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     nextCalendarDate[index] = date;
     updateCalendarDate(nextCalendarDate);
   }, [calendarDate, updateCalendarDate]);
+  var handleChangeCalendarTime = (0, _react.useCallback)(function (index, date) {
+    setSelectValue(function (prev) {
+      var next = [].concat(prev);
+      var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day
+
+      if (next[index]) {
+        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());
+      }
+
+      next[index] = clonedDate;
+      return next;
+    });
+    handleChangeCalendarDate(index, date);
+  }, [handleChangeCalendarDate]);
   /**
    * Toolbar operation callback function
    */
@@ -381,7 +395,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
     // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
 
-    if (!_utils2.DateUtils.isMatch(rangeValue[0], formatStr) || !_utils2.DateUtils.isMatch(rangeValue[1], formatStr)) {
+    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr)) {
       setInputState('Error');
       return;
     }
@@ -390,12 +404,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var endDate = new Date(rangeValue[1]);
     var selectValue = [startDate, endDate];
 
-    if (!_utils2.DateUtils.isValid(startDate) || !_utils2.DateUtils.isValid(endDate)) {
+    if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {
       setInputState('Error');
       return;
     }
 
-    if (disabledDate(startDate, selectValue, true, _utils2.DATERANGE_DISABLED_TARGET.CALENDAR)) {
+    if (disabledDate(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {
       setInputState('Error');
       return;
     }
@@ -424,7 +438,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
           endData = value[1];
       nextCalendarDate = [_startDate, (0, _dateUtils.isSameMonth)(_startDate, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
     } else {
-      nextCalendarDate = (0, _utils.getCalendarDate)({
+      nextCalendarDate = (0, _utils2.getCalendarDate)({
         value: defaultCalendarValue
       });
     }
@@ -450,12 +464,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextSelectValue = [selectStartDate, selectEndDate]; // If the date is between the start and the end
     // the button is disabled
 
-    while (_utils2.DateUtils.isBefore(start, end) || _utils2.DateUtils.isSameDay(start, end)) {
+    while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {
       if (disabledDate(start, nextSelectValue, hasDoneSelect.current, type)) {
         return true;
       }
 
-      start = _utils2.DateUtils.addDays(start, 1);
+      start = _utils.DateUtils.addDays(start, 1);
     }
 
     return false;
@@ -468,7 +482,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return true;
     }
 
-    return disabledByBetween(start, end, _utils2.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
+    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
   }, [disabledByBetween, selectValue]);
   var disabledShortcutButton = (0, _react.useCallback)(function (value) {
     if (value === void 0) {
@@ -483,7 +497,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return true;
     }
 
-    return disabledByBetween(start, end, _utils2.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
+    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   }, [disabledByBetween]);
   var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {
     return disabledDate(date, values, hasDoneSelect.current, type);
@@ -519,12 +533,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       showWeekNumbers: showWeekNumbers,
       value: selectValue,
       onChangeCalendarDate: handleChangeCalendarDate,
+      onChangeCalendarTime: handleChangeCalendarTime,
       onMouseMove: handleMouseMove,
       onSelect: handleSelectValueChange
     };
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       className: classes,
-      ref: (0, _utils2.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       target: triggerRef,
       style: styles
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -535,9 +550,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className: prefix('daterange-header')
     }, getDisplayString(selectValue)), /*#__PURE__*/_react.default.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
-    }, /*#__PURE__*/_react.default.createElement(_Calendar.default, (0, _extends2.default)({
+    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 0
-    }, panelProps)), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar.default, (0, _extends2.default)({
+    }, panelProps)), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 1
     }, panelProps)))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
@@ -564,30 +579,30 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: triggerRef,
     placement: placement,
-    onEnter: (0, _utils2.createChainedFunction)(handleEnter, onEnter),
-    onEntered: (0, _utils2.createChainedFunction)(handleEntered, onEntered),
-    onExited: (0, _utils2.createChainedFunction)(handleExited, onExited),
+    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),
+    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
+    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, {
     ref: rootRef,
     className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = inputState === 'Error', _merge)),
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils2.DateUtils.calendarOnlyProps)), {
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {
     as: toggleAs,
     ref: targetRef,
     input: true,
-    inputMask: _utils2.DateUtils.getDateMask(rangeFormatStr),
+    inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),
     inputValue: value ? getDisplayString(value, true) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,
     onInputChange: handleInputChange,
     onInputBlur: handleInputBlur,
     onKeyDown: onPickerKeyDown,
-    onClean: (0, _utils2.createChainedFunction)(handleClean, onClean),
+    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
     active: isPickerToggleActive,
     placement: placement,
-    caretComponent: _Calendar2.default,
+    caretComponent: _Calendar.default,
     disabled: disabled
   }), getDisplayString())));
 });

package/cjs/DateRangePicker/utils.d.ts

@@ -4,6 +4,6 @@ export declare function getCalendarDate({ value }: {
     value?: ValueType;
 }): ValueType;
 export declare const getDefaultRanges: () => RangeType[];
-export declare const isSameValueType: (source: ValueType, dest: ValueType) => boolean;
+export declare const isSameRange: (source: ValueType, dest: ValueType, format: string) => boolean;
 export declare const getMonthHoverRange: (date: Date) => ValueType;
 export declare const getWeekHoverRange: (isoWeek: boolean, date: Date) => ValueType;