rsuite 5.61.0 → 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,18 +18,20 @@ 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;
 /**
  * A date range picker allows you to select a date range from a calendar.
@@ -64,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,
@@ -92,32 +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,
     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, ["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.
@@ -181,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') {
@@ -229,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;
       }
@@ -244,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;
   };
@@ -270,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,
@@ -280,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);
@@ -299,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);
@@ -307,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;
     }
@@ -332,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]
         })];
@@ -373,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;
@@ -383,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;
@@ -396,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());
@@ -407,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)({
@@ -440,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;
     }
@@ -459,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
     });
@@ -475,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;
     }
@@ -487,16 +495,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 +520,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 +554,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 +604,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 +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", {
@@ -657,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
     })))));
@@ -679,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) {
@@ -692,16 +715,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 +739,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 +768,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 +788,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 +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) {

package/cjs/DateRangePicker/hooks/useDateDisabled.d.ts

@@ -1,4 +1,4 @@
-import { DATERANGE_DISABLED_TARGET as TARGET } from '../../utils';
+import { DATERANGE_DISABLED_TARGET as TARGET } from '@/internals/constants';
 import { DisabledDateFunction, SelectedDatesState } from '../types';
 interface UseDateDisabledProps {
     shouldDisableDate?: DisabledDateFunction;

package/cjs/DateRangePicker/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DATERANGE_DISABLED_TARGET } from '../utils/constants';
+import { DATERANGE_DISABLED_TARGET } from '@/internals/constants';
 export declare type ValueType = [Date?, Date?];
 export declare type DateRange = [Date, Date];
 export interface RangeType<T = DateRange> {

package/cjs/DateRangePicker/utils.d.ts

@@ -1,4 +1,5 @@
 import { DateRange } from './types';
+import type { Locale } from 'date-fns';
 export declare function getSafeCalendarDate({ value, calendarKey, allowSameMonth }: {
     value: [] | [Date] | [Date, Date] | null;
     calendarKey?: 'start' | 'end';
@@ -6,4 +7,8 @@ export declare function getSafeCalendarDate({ value, calendarKey, allowSameMonth
 }): DateRange;
 export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;
 export declare const getMonthHoverRange: (date: Date) => DateRange;
-export declare const getWeekHoverRange: (isoWeek: boolean, date: Date) => DateRange;
+export declare const getWeekHoverRange: (date: Date, options: {
+    isoWeek: boolean;
+    weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    locale?: Locale;
+}) => DateRange;