rsuite 5.61.0 → 5.62.1

package/cjs/DateRangePicker/DateRangePicker.js

@@ -2,7 +2,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
 exports.default = void 0;
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
@@ -11,7 +10,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,19 +17,24 @@ 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");
 var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
 var _DateRangeInput = _interopRequireDefault(require("../DateRangeInput"));
-var _Input = _interopRequireDefault(require("../Input"));
 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;
+var _excluded = ["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"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
@@ -64,6 +67,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,
@@ -92,32 +97,35 @@ 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,
     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", "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", "renderValue"]);
-  var id = (0, _utils.useUniqueId)('rs-', idProp);
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  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
+    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);
+    setValue = _useControlled[1];
+
+  // Show only the calendar month panel. formatStr = 'yyyy-MM'
+  var onlyShowMonth = (0, _date.shouldRenderMonth)(formatStr) && !(0, _date.shouldRenderDate)(formatStr);
 
   /**
    * Whether to complete the selection.
@@ -128,6 +136,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var _useState = (0, _react.useState)(true),
     isSelectedIdle = _useState[0],
     setSelectedIdle = _useState[1];
+
   /**
    * The currently selected date range.
    *
@@ -138,15 +147,20 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
   var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
     selectedDates = _useState2[0],
-    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
+    setSelectedDates = _useState2[1];
+
+  // The date of the current hover, used to reduce the calculation of `handleMouseMove`
   var _useState3 = (0, _react.useState)(value),
     hoverDateRange = _useState3[0],
-    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
+    setHoverDateRange = _useState3[1];
+
+  // The displayed calendar panel is rendered based on this value.
   var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
       value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
     })),
     calendarDate = _useState4[0],
     setCalendarDate = _useState4[1];
+
   /**
    * When hoverRange is set, `selectValue` will be updated during the hover process,
    * which will cause the `selectValue` to be updated after the first click,
@@ -162,6 +176,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var _useState5 = (0, _react.useState)(),
     activeCalendarKey = _useState5[0],
     setActiveCalendarKey = _useState5[1];
+
   /**
    * Get the time on the calendar.
    */
@@ -181,16 +196,16 @@ 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];
+      nextValue = [startDate, endDate];
     } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
       // Make the calendar render the value of defaultCalendarValue after clearing the value.
       nextValue = defaultCalendarValue;
@@ -216,9 +231,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var padding = 4;
     var strings = rangeFormatStr;
     if (value) {
-      var _startDate2 = value[0],
-        _endDate2 = value[1];
-      strings = "" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);
+      var startDate = value[0],
+        endDate = value[1];
+      strings = "" + formatDate(startDate, formatStr) + character + formatDate(endDate, formatStr);
     }
     return (0, _utils.getStringLength)(strings) + padding;
   };
@@ -229,7 +244,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;
       }
@@ -244,8 +265,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;
   };
@@ -270,7 +291,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,
@@ -280,7 +301,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);
@@ -299,7 +320,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);
@@ -307,7 +328,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;
     }
@@ -332,14 +353,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]
         })];
@@ -373,7 +394,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;
@@ -383,7 +404,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;
@@ -396,7 +417,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());
@@ -407,24 +428,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],
+      var startDate = value[0],
         endData = value[1];
-      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, calendarGap) : endData];
+      nextCalendarDate = [startDate, (0, _date.isSameMonth)(startDate, endData) ? (0, _date.addMonths)(endData, calendarGap) : endData];
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = (0, _utils2.getSafeCalendarDate)({
@@ -440,7 +461,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;
     }
@@ -459,11 +480,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
     });
@@ -475,7 +496,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;
     }
@@ -487,16 +508,24 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     setCalendarDateRange({
       dateRange: selectValue
     });
-    setDateRange(event, selectValue);
+    setDateRange(event, selectValue, false);
   });
+
+  /**
+   * Check if the date is disabled
+   */
   var isDateDisabled = (0, _useDateDisabled.default)({
     shouldDisableDate: shouldDisableDate,
     DEPRECATED_disabledDate: DEPRECATED_disabledDate
   });
-  var disableByRange = function disableByRange(start, end, target) {
+
+  /**
+   * 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, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {
+      while ((0, _date.isBefore)(start, end) || (0, _date.isSameDay)(start, end)) {
         if (isDateDisabled(start, {
           selectDate: selectedDates,
           selectedDone: isSelectedIdle,
@@ -504,25 +533,31 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         })) {
           return true;
         }
-        start = (0, _dateUtils.addDays)(start, 1);
+        start = (0, _date.addDays)(start, 1);
       }
     }
     return false;
   };
-  var disableOkButton = function disableOkButton() {
-    var _trigger$current;
-    var _ref4 = ((_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.getState()) || {},
-      open = _ref4.open;
-    if (open) {
-      var start = selectedDates[0],
-        end = selectedDates[1];
-      if (!start || !end || !isSelectedIdle) {
-        return true;
-      }
+
+  /**
+   * Check if the OK button is disabled
+   */
+  var isOkButtonDisabled = function isOkButtonDisabled() {
+    var start = selectedDates[0],
+      end = selectedDates[1];
+    if (!start || !end || !isSelectedIdle) {
+      return true;
+    }
+    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 = [];
     }
@@ -532,22 +567,22 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (!start || !end) {
       return true;
     }
-    return disableByRange(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 _trigger$current2, _trigger$current2$clo;
-    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$clo = _trigger$current2.close) === null || _trigger$current2$clo === void 0 ? void 0 : _trigger$current2$clo.call(_trigger$current2);
+  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() {
-        var _trigger$current3;
-        var _ref5 = ((_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.getState()) || {},
-          open = _ref5.open;
+        var _trigger$current2;
+        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
+          open = _ref4.open;
         if (!open) {
-          var _trigger$current4;
-          (_trigger$current4 = trigger.current) === null || _trigger$current4 === void 0 ? void 0 : _trigger$current4.open();
+          var _trigger$current3;
+          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();
         }
       }
     });
@@ -582,6 +617,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var calendarProps = {
       locale: locale,
       isoWeek: isoWeek,
+      weekStart: weekStart,
       limitEndYear: limitEndYear,
       showMeridian: showMeridian,
       calendarDate: calendarDate,
@@ -636,7 +672,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", {
@@ -657,10 +693,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
     })))));
@@ -679,7 +715,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) {
@@ -692,16 +728,16 @@ 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 !== null && isDateDisabled !== void 0 && isDateDisabled(startDate, disabledOptions) || isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(endDate, disabledOptions)) {
       return true;
@@ -716,27 +752,26 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     rest = _partitionHTMLProps[1];
   var showCleanButton = cleanable && hasValue && !readOnly;
   var invalidValue = value && isErrorValue(value);
-
-  // Custom rendering of the selected value
-  var customValue = null;
-
-  // Input box is read-only when the component is uneditable or loading state
-  var inputReadOnly = readOnly || !editable || loading || false;
-  if (typeof renderValue === 'function' && value) {
-    customValue = renderValue(value, formatStr);
-
-    // If the custom rendering value, the input box is read-only
-    inputReadOnly = true;
-  }
-  var TargetInput = customValue ? _Input.default : _DateRangeInput.default;
+  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,
@@ -746,14 +781,14 @@ 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(TargetInput, (0, _extends2.default)({
+  }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({
     "aria-haspopup": "dialog",
     "aria-invalid": invalidValue,
     "aria-labelledby": label ? id + "-label" : undefined
@@ -766,7 +801,6 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
     readOnly: inputReadOnly,
-    plaintext: plaintext,
     htmlSize: getInputHtmlSize(),
     onChange: handleInputChange,
     onKeyDown: handleInputKeyDown
@@ -786,6 +820,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,
@@ -798,5 +833,4 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   showMeridian: _propTypes.default.bool,
   showOneCalendar: _propTypes.default.bool
 });
-var _default = DateRangePicker;
-exports.default = _default;
+var _default = exports.default = DateRangePicker;

package/cjs/DateRangePicker/DateRangePickerContext.js

@@ -1,14 +1,13 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
-exports.default = exports.useDateRangePickerContext = void 0;
+exports.useDateRangePickerContext = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var DateRangePickerContext = /*#__PURE__*/_react.default.createContext({});
-var useDateRangePickerContext = function useDateRangePickerContext() {
+var useDateRangePickerContext = exports.useDateRangePickerContext = function useDateRangePickerContext() {
   return (0, _react.useContext)(DateRangePickerContext) || {};
 };
-exports.useDateRangePickerContext = useDateRangePickerContext;
-var _default = DateRangePickerContext;
-exports.default = _default;
+var _default = exports.default = DateRangePickerContext;

package/cjs/DateRangePicker/Header.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface HeaderProps {
     formatStr: string;
     character: string;
@@ -7,5 +7,5 @@ interface HeaderProps {
     onSelect?: (eventKey: 'start' | 'end') => void;
     clickable?: boolean;
 }
-declare function Header(props: HeaderProps): JSX.Element;
+declare function Header(props: HeaderProps): React.JSX.Element;
 export default Header;

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
@@ -61,5 +61,4 @@ function Header(props) {
     className: prefix('header-date')
   }, end)));
 }
-var _default = Header;
-exports.default = _default;
+var _default = exports.default = Header;