rsuite 5.60.2 → 5.62.0

package/cjs/DateRangePicker/DateRangePicker.js

@@ -11,7 +11,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _partial = _interopRequireDefault(require("lodash/partial"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
@@ -19,9 +18,11 @@ var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
 var _Toolbar = _interopRequireDefault(require("../DatePicker/Toolbar"));
 var _PredefinedRanges = _interopRequireDefault(require("../DatePicker/PredefinedRanges"));
 var _Stack = _interopRequireDefault(require("../Stack"));
+var _constants = require("../internals/constants");
 var _Picker = require("../internals/Picker");
-var _utils = require("../utils");
-var _dateUtils = require("../utils/dateUtils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
+var _date = require("../internals/utils/date");
 var _Calendar2 = _interopRequireDefault(require("./Calendar"));
 var _utils2 = require("./utils");
 var _propTypes2 = require("../internals/propTypes");
@@ -29,6 +30,8 @@ var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerC
 var _DateRangeInput = _interopRequireDefault(require("../DateRangeInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _Header = _interopRequireDefault(require("./Header"));
+var _useDateDisabled = _interopRequireDefault(require("./hooks/useDateDisabled"));
+var _useCustomizedInput2 = _interopRequireDefault(require("../DatePicker/hooks/useCustomizedInput"));
 var _templateObject;
 /**
  * A date range picker allows you to select a date range from a calendar.
@@ -54,7 +57,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     defaultValue = props.defaultValue,
     plaintext = props.plaintext,
     disabled = props.disabled,
-    DEPRECATED_disabledDateProp = props.disabledDate,
+    DEPRECATED_disabledDate = props.disabledDate,
     shouldDisableDate = props.shouldDisableDate,
     _props$format = props.format,
     formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
@@ -62,6 +65,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     idProp = props.id,
     _props$isoWeek = props.isoWeek,
     isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
+    _props$weekStart = props.weekStart,
+    weekStart = _props$weekStart === void 0 ? 0 : _props$weekStart,
     _props$limitEndYear = props.limitEndYear,
     limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
     limitStartYear = props.limitStartYear,
@@ -90,31 +95,31 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onChange = props.onChange,
     onClean = props.onClean,
     onEnter = props.onEnter,
-    onEntered = props.onEntered,
-    onExited = props.onExited,
+    onExit = props.onExit,
     onOk = props.onOk,
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onEnter", "onEntered", "onExited", "onOk", "onSelect", "onShortcutClick", "renderTitle"]);
-  var id = (0, _utils.useUniqueId)('rs-', idProp);
+    renderValue = props.renderValue,
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onEnter", "onExit", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue"]);
+  var id = (0, _hooks.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
     overlay = _usePickerRef.overlay;
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
-  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),
+  var _useCustom = (0, _hooks.useCustom)('DateRangePicker', overrideLocale),
     locale = _useCustom.locale,
     formatDate = _useCustom.formatDate; // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
   var calendarGap = showOneCalendar ? 0 : 1;
   var rangeFormatStr = "" + formatStr + character + formatStr;
-  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
+  var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
     value = _useControlled[0],
     setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
-  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);
+  var onlyShowMonth = (0, _date.shouldRenderMonth)(formatStr) && !(0, _date.shouldRenderDate)(formatStr);
 
   /**
    * Whether to complete the selection.
@@ -150,6 +155,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * so declare a Ref to temporarily store the `selectValue` of the first click.
    */
   var selectRangeValueRef = (0, _react.useRef)(null);
+
+  /**
+   *
+   * The key of the currently active calendar panel.
+   * Used to switch when only one calendar panel is displayed.
+   */
   var _useState5 = (0, _react.useState)(),
     activeCalendarKey = _useState5[0],
     setActiveCalendarKey = _useState5[1];
@@ -172,14 +183,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
-      var _startDate = (0, _dateUtils.copyTime)({
+    if ((0, _date.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
+      var _startDate = (0, _date.copyTime)({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
       });
-      var _endDate = (0, _dateUtils.copyTime)({
+      var _endDate = (0, _date.copyTime)({
         from: getCalendarDatetime('end'),
-        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, calendarGap) : dateRange[1]
+        to: dateRange.length === 1 ? (0, _date.addMonths)(_startDate, calendarGap) : dateRange[1]
       });
       nextValue = [_startDate, _endDate];
     } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
@@ -198,9 +209,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       setSelectedDates(nextCalendarDate);
     }
   };
-
-  // if valueProp changed then update selectValue/hoverValue
   (0, _react.useEffect)(function () {
+    // If value changes, update the selected and hover date values on the calendar panel.
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
@@ -221,7 +231,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var getHoverRangeValue = function getHoverRangeValue(date) {
     function getHoverRangeFunc() {
       if (hoverRange === 'week') {
-        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);
+        return function (date) {
+          return (0, _utils2.getWeekHoverRange)(date, {
+            isoWeek: isoWeek,
+            weekStart: weekStart,
+            locale: locale === null || locale === void 0 ? void 0 : locale.dateLocale
+          });
+        };
       } else if (hoverRange === 'month') {
         return _utils2.getMonthHoverRange;
       }
@@ -236,8 +252,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (!isHoverRangeValid) {
       return null;
     }
-    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {
-      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);
+    if ((0, _date.isAfter)(hoverValues[0], hoverValues[1])) {
+      hoverValues = (0, _date.reverseDateRangeOmitTime)(hoverValues);
     }
     return hoverValues;
   };
@@ -262,7 +278,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * 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.
    */
-  var onMouseMove = (0, _utils.useEventCallback)(function (date) {
+  var onMouseMove = (0, _hooks.useEventCallback)(function (date) {
     var nextHoverDateRange = getHoverRangeValue(date);
 
     // If hasDoneSelect is false,
@@ -272,7 +288,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules
       if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {
         var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
-        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
+        if ((0, _date.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
           nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];
         }
         setSelectedDates(nextSelectedDates);
@@ -291,7 +307,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   /**
    * Callback for selecting a date cell in the calendar grid
    */
-  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {
+  var handleSelectDate = (0, _hooks.useEventCallback)(function (index, date, event) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
@@ -299,7 +315,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     // in `oneTap` mode
     if (oneTap) {
-      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);
+      setDateRange(event, noHoverRangeValid ? [(0, _date.startOfDay)(date), (0, _date.endOfDay)(date)] : hoverRangeValue);
       onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
       return;
     }
@@ -324,14 +340,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
     if (nextSelectDates.length === 2) {
       // If user have completed the selection, then sort the selected dates.
-      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {
-        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);
+      if ((0, _date.isAfter)(nextSelectDates[0], nextSelectDates[1])) {
+        nextSelectDates = (0, _date.reverseDateRangeOmitTime)(nextSelectDates);
       }
-      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {
-        nextSelectDates = [(0, _dateUtils.copyTime)({
+      if ((0, _date.shouldRenderTime)(formatStr)) {
+        nextSelectDates = [(0, _date.copyTime)({
           from: getCalendarDatetime('start'),
           to: nextSelectDates[0]
-        }), (0, _dateUtils.copyTime)({
+        }), (0, _date.copyTime)({
           from: getCalendarDatetime('end'),
           to: nextSelectDates[1]
         })];
@@ -365,7 +381,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var onChangeCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {
+  var onChangeCalendarMonth = (0, _hooks.useEventCallback)(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
@@ -375,7 +391,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       eventName: 'changeMonth'
     });
   });
-  var onChangeCalendarTime = (0, _utils.useEventCallback)(function (index, date) {
+  var onChangeCalendarTime = (0, _hooks.useEventCallback)(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
@@ -388,7 +404,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       var next = [].concat(prev);
 
       // if next[index] is not empty, only update the time after aligning the year, month and day
-      next[index] = next[index] ? (0, _dateUtils.copyTime)({
+      next[index] = next[index] ? (0, _date.copyTime)({
         from: date,
         to: next[index]
       }) : new Date(date.valueOf());
@@ -399,24 +415,24 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   /**
    * The callback triggered when PM/AM is switched.
    */
-  var onToggleMeridian = (0, _utils.useEventCallback)(function (index) {
+  var onToggleMeridian = (0, _hooks.useEventCallback)(function (index) {
     var nextCalendarDate = Array.from(calendarDate);
-    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);
+    nextCalendarDate[index] = (0, _date.getReversedTimeMeridian)(nextCalendarDate[index]);
     setCalendarDate(nextCalendarDate);
 
     // If the value already exists, update the value again.
     if (selectedDates.length === 2) {
       var nextSelectedDates = Array.from(selectedDates);
-      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);
+      nextSelectedDates[index] = (0, _date.getReversedTimeMeridian)(nextSelectedDates[index]);
       setSelectedDates(nextSelectedDates);
     }
   });
-  var handleEnter = (0, _utils.useEventCallback)(function () {
+  var handleEnter = (0, _hooks.useEventCallback)(function () {
     var nextCalendarDate;
     if (value && value.length) {
       var _startDate3 = value[0],
         endData = value[1];
-      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, calendarGap) : endData];
+      nextCalendarDate = [_startDate3, (0, _date.isSameMonth)(_startDate3, endData) ? (0, _date.addMonths)(endData, calendarGap) : endData];
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = (0, _utils2.getSafeCalendarDate)({
@@ -432,7 +448,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   /**
    * Toolbar operation callback function
    */
-  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {
+  var handleShortcutPageDate = (0, _hooks.useEventCallback)(function (range, closeOverlay, event) {
     if (closeOverlay === void 0) {
       closeOverlay = false;
     }
@@ -451,11 +467,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     // End unfinished selections.
     setSelectedIdle(true);
   });
-  var handleOK = (0, _utils.useEventCallback)(function (event) {
+  var handleClickOK = (0, _hooks.useEventCallback)(function (event) {
     setDateRange(event, selectedDates);
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
   });
-  var handleClean = (0, _utils.useEventCallback)(function (event) {
+  var handleClean = (0, _hooks.useEventCallback)(function (event) {
     setCalendarDateRange({
       dateRange: null
     });
@@ -467,7 +483,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   /**
    * Callback after the input box value is changed.
    */
-  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {
+  var handleInputChange = (0, _hooks.useEventCallback)(function (value, event) {
     if (!value) {
       return;
     }
@@ -479,44 +495,56 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     setCalendarDateRange({
       dateRange: selectValue
     });
-    setDateRange(event, selectValue);
+    setDateRange(event, selectValue, false);
   });
-  var isDateDisabled = function isDateDisabled(date, options) {
-    var selectDate = options.selectDate,
-      selectedDone = options.selectedDone,
-      target = options.target;
-    if (typeof shouldDisableDate === 'function') {
-      return shouldDisableDate(date, selectDate, selectedDone, target);
-    }
-    if (typeof DEPRECATED_disabledDateProp === 'function') {
-      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);
-    }
-    return false;
-  };
-  var disableByBetween = function disableByBetween(start, end, type) {
-    // If the date is between the start and the end
-    // the button is disabled
-    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {
-      if (isDateDisabled(start, {
-        selectDate: selectedDates,
-        selectedDone: isSelectedIdle,
-        target: type
-      })) {
-        return true;
+
+  /**
+   * Check if the date is disabled
+   */
+  var isDateDisabled = (0, _useDateDisabled.default)({
+    shouldDisableDate: shouldDisableDate,
+    DEPRECATED_disabledDate: DEPRECATED_disabledDate
+  });
+
+  /**
+   * Check if a date range is disabled
+   */
+  var isRangeDisabled = function isRangeDisabled(start, end, target) {
+    if (isDateDisabled) {
+      // If the date is between the start and the end the button is disabled
+      while ((0, _date.isBefore)(start, end) || (0, _date.isSameDay)(start, end)) {
+        if (isDateDisabled(start, {
+          selectDate: selectedDates,
+          selectedDone: isSelectedIdle,
+          target: target
+        })) {
+          return true;
+        }
+        start = (0, _date.addDays)(start, 1);
       }
-      start = (0, _dateUtils.addDays)(start, 1);
     }
     return false;
   };
-  var disableOkButton = function disableOkButton() {
+
+  /**
+   * Check if the OK button is disabled
+   */
+  var isOkButtonDisabled = function isOkButtonDisabled() {
     var start = selectedDates[0],
       end = selectedDates[1];
     if (!start || !end || !isSelectedIdle) {
       return true;
     }
-    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
+    if (isErrorValue([start, end])) {
+      return true;
+    }
+    return false;
   };
-  var disableShortcut = function disableShortcut(value) {
+
+  /**
+   * Check if the shortcut button is disabled
+   */
+  var isShortcutDisabled = function isShortcutDisabled(value) {
     if (value === void 0) {
       value = [];
     }
@@ -526,13 +554,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (!start || !end) {
       return true;
     }
-    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
+    return isRangeDisabled(start, end, _constants.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   };
-  var handleClose = (0, _utils.useEventCallback)(function () {
+  var handleClose = (0, _hooks.useEventCallback)(function () {
     var _trigger$current, _trigger$current$clos;
     (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
   });
-  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {
+  var handleInputKeyDown = (0, _hooks.useEventCallback)(function (event) {
     (0, _Picker.onMenuKeyDown)(event, {
       esc: handleClose,
       enter: function enter() {
@@ -546,6 +574,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       }
     });
   });
+  var disableCalendarDate = isDateDisabled ? function (date, values, type) {
+    return isDateDisabled(date, {
+      selectDate: values,
+      selectedDone: isSelectedIdle,
+      target: type
+    });
+  } : undefined;
   var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
@@ -566,16 +601,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       left: left,
       top: top
     });
-    var disabledDate = function disabledDate(date, values, type) {
-      return isDateDisabled(date, {
-        selectDate: values,
-        selectedDone: isSelectedIdle,
-        target: type
-      });
-    };
     var calendarProps = {
       locale: locale,
       isoWeek: isoWeek,
+      weekStart: weekStart,
       limitEndYear: limitEndYear,
       showMeridian: showMeridian,
       calendarDate: calendarDate,
@@ -584,12 +613,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       format: formatStr,
       value: selectedDates,
       hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
+      disabledDate: disableCalendarDate,
       onSelect: handleSelectDate,
       onChangeCalendarMonth: onChangeCalendarMonth,
       onChangeCalendarTime: onChangeCalendarTime,
       onToggleMeridian: onToggleMeridian,
       onMouseMove: onMouseMove,
-      disabledDate: disabledDate,
       renderTitle: renderTitle
     };
     var getCalendars = function getCalendars() {
@@ -630,7 +659,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       ranges: sideRanges,
       calendarDate: calendarDate,
       locale: locale,
-      disableShortcut: disableShortcut,
+      disableShortcut: isShortcutDisabled,
       onShortcutClick: handleShortcutPageDate,
       "data-testid": "daterange-predefined-side"
     }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -651,10 +680,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, getCalendars()))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
       calendarDate: selectedDates,
-      disableOkBtn: disableOkButton,
-      disableShortcut: disableShortcut,
+      disableOkBtn: isOkButtonDisabled,
+      disableShortcut: isShortcutDisabled,
       hideOkBtn: oneTap,
-      onOk: handleOK,
+      onOk: handleClickOK,
       onShortcutClick: handleShortcutPageDate,
       ranges: bottomRanges
     })))));
@@ -673,7 +702,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (caretAsProp === null) {
       return null;
     }
-    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);
+    return caretAsProp || ((0, _date.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);
   }, [caretAsProp, formatStr]);
   var isErrorValue = function isErrorValue(value) {
     if (!value) {
@@ -686,18 +715,18 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
     var startDate = value[0],
       endDate = value[1];
-    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {
+    if (!(0, _date.isValid)(startDate) || !(0, _date.isValid)(endDate)) {
       return true;
     }
-    if ((0, _dateUtils.isBefore)(endDate, startDate)) {
+    if ((0, _date.isBefore)(endDate, startDate)) {
       return true;
     }
     var disabledOptions = {
       selectDate: value,
       selectedDone: isSelectedIdle,
-      target: _utils.DATERANGE_DISABLED_TARGET.INPUT
+      target: _constants.DATERANGE_DISABLED_TARGET.INPUT
     };
-    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {
+    if (isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(startDate, disabledOptions) || isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(endDate, disabledOptions)) {
       return true;
     }
     return false;
@@ -710,14 +739,26 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     rest = _partitionHTMLProps[1];
   var showCleanButton = cleanable && hasValue && !readOnly;
   var invalidValue = value && isErrorValue(value);
+  var _useCustomizedInput = (0, _useCustomizedInput2.default)({
+      mode: 'dateRange',
+      value: value,
+      formatStr: formatStr,
+      renderValue: renderValue,
+      readOnly: readOnly,
+      editable: editable,
+      loading: loading
+    }),
+    customValue = _useCustomizedInput.customValue,
+    inputReadOnly = _useCustomizedInput.inputReadOnly,
+    Input = _useCustomizedInput.Input,
+    events = _useCustomizedInput.events;
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     ref: trigger,
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     placement: placement,
-    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),
-    onEntered: onEntered,
-    onExited: onExited,
+    onEnter: (0, _utils.createChainedFunction)(events.onActive, handleEnter, onEnter),
+    onExit: (0, _utils.createChainedFunction)(events.onInactive, onExit),
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/_react.default.createElement(Component, {
     ref: root,
@@ -727,26 +768,26 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     value: value,
     format: formatStr,
     plaintext: plaintext
-  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {
+  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _date.calendarOnlyProps)), {
     inside: true,
+    disabled: disabled,
     size: size
   }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({
+  }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({
     "aria-haspopup": "dialog",
     "aria-invalid": invalidValue,
     "aria-labelledby": label ? id + "-label" : undefined
   }, ariaProps, {
     ref: target,
     id: id,
-    value: value,
+    value: customValue || value,
     character: character,
     format: formatStr,
     placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
-    readOnly: readOnly || !editable || loading,
-    plaintext: plaintext,
+    readOnly: inputReadOnly,
     htmlSize: getInputHtmlSize(),
     onChange: handleInputChange,
     onKeyDown: handleInputKeyDown
@@ -766,6 +807,7 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   hoverRange: _propTypes.default.oneOfType([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),
   format: _propTypes.default.string,
   isoWeek: _propTypes.default.bool,
+  weekStart: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6]),
   oneTap: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
   limitStartYear: _propTypes.default.number,

package/cjs/DateRangePicker/Header.js

@@ -5,13 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _utils = require("../utils");
-var _dateUtils = require("../utils/dateUtils");
+var _hooks = require("../internals/hooks");
+var _date = require("../internals/utils/date");
 var _CustomProvider = require("../CustomProvider");
 var _Button = _interopRequireDefault(require("../Button"));
 function Header(props) {
   var _prefix;
-  var _useClassNames = (0, _utils.useClassNames)('picker'),
+  var _useClassNames = (0, _hooks.useClassNames)('picker'),
     prefix = _useClassNames.prefix;
   var formatStr = props.formatStr,
     character = props.character,
@@ -23,7 +23,7 @@ function Header(props) {
   var _ref = value !== null && value !== void 0 ? value : [null, null],
     startDate = _ref[0],
     endDate = _ref[1];
-  var v = startDate && endDate ? [startDate, endDate].sort(_dateUtils.compareAsc) : [startDate, endDate];
+  var v = startDate && endDate ? [startDate, endDate].sort(_date.compareAsc) : [startDate, endDate];
   var start = v[0] ? /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
     date: v[0],
     formatStr: formatStr

package/cjs/DateRangePicker/disabledDateUtils.js

@@ -1,6 +1,7 @@
 'use client';
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
 exports.allowedMaxDays = allowedMaxDays;
 exports.allowedDays = allowedDays;
@@ -10,12 +11,13 @@ exports.after = after;
 exports.beforeToday = beforeToday;
 exports.afterToday = afterToday;
 exports.combine = combine;
-var _utils = require("../utils");
+var _utils = require("../internals/utils");
+var DateUtils = _interopRequireWildcard(require("../internals/utils/date"));
 function isAfterDay(date1, date2) {
-  return _utils.DateUtils.isAfter(new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()), new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+  return DateUtils.isAfter(new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()), new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
 }
 function isBeforeDay(date1, date2) {
-  return _utils.DateUtils.isBefore(new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()), new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+  return DateUtils.isBefore(new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()), new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
 }
 
 /**
@@ -28,12 +30,12 @@ function allowedMaxDays(days) {
     if (selectValue !== null && selectValue !== void 0 && selectValue[0]) {
       var startDate = selectValue[0];
       beforeLimit = (0, _utils.composeFunctions)(function (f) {
-        return _utils.DateUtils.addDays(f, -days + 1);
+        return DateUtils.addDays(f, -days + 1);
       }, function (f) {
         return isAfterDay(f, date);
       })(startDate);
       afterLimit = (0, _utils.composeFunctions)(function (f) {
-        return _utils.DateUtils.addDays(f, days - 1);
+        return DateUtils.addDays(f, days - 1);
       }, function (f) {
         return isBeforeDay(f, date);
       })(startDate);
@@ -55,14 +57,14 @@ function allowedDays(days) {
     if (selectValue !== null && selectValue !== void 0 && selectValue[0]) {
       var startDate = selectValue[0];
       beforeLimit = (0, _utils.composeFunctions)(function (f) {
-        return _utils.DateUtils.addDays(f, -days + 1);
+        return DateUtils.addDays(f, -days + 1);
       }, function (f) {
-        return !_utils.DateUtils.isSameDay(f, date);
+        return !DateUtils.isSameDay(f, date);
       })(startDate);
       afterLimit = (0, _utils.composeFunctions)(function (f) {
-        return _utils.DateUtils.addDays(f, days - 1);
+        return DateUtils.addDays(f, days - 1);
       }, function (f) {
-        return !_utils.DateUtils.isSameDay(f, date);
+        return !DateUtils.isSameDay(f, date);
       })(startDate);
     }
     if (target === 'CALENDAR' && !selectedDone && beforeLimit && afterLimit) {