rsuite 5.60.2 → 5.62.0

package/cjs/DatePicker/DatePicker.d.ts

@@ -1,18 +1,28 @@
 import React from 'react';
 import { RangeType } from './Toolbar';
 import { DatePickerLocale } from '../locales';
-import type { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
+import type { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '@/internals/types';
 import type { DeprecatedProps } from './types';
 export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, DeprecatedProps {
-    /** Custom caret component */
+    /**
+     * Custom caret component
+     */
     caretAs?: React.ElementType | null;
-    /** Calendar panel default presentation date and time */
+    /**
+     * Calendar panel default presentation date and time
+     */
     calendarDefaultDate?: Date;
-    /** Whether disabled the component */
+    /**
+     * Whether disabled the component
+     */
     disabled?: boolean;
-    /** Rendered as an input, the date can be entered via the keyboard */
+    /**
+     * Rendered as an input, the date can be entered via the keyboard
+     */
     editable?: boolean;
-    /** Format date */
+    /**
+     * Format date string
+     */
     format?: string;
     /**
      * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
@@ -20,25 +30,52 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      * @see https://en.wikipedia.org/wiki/ISO_week_date
      */
     isoWeek?: boolean;
-    /** A label displayed at the beginning of toggle button */
+    /**
+     * The index of the first day of the week (0 - Sunday)
+     * If `isoWeek` is `true`, the value of `weekStart` is ignored.
+     *
+     * @default 0
+     */
+    weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * A label displayed at the beginning of toggle button
+     */
     label?: React.ReactNode;
-    /** Set the upper limit of the available year relative to the current selection date */
+    /**
+     * Set the upper limit of the available year relative to the current selection date
+     */
     limitEndYear?: number;
-    /** Set the lower limit of the available year relative to the current selection date */
+    /**
+     * Set the lower limit of the available year relative to the current selection date
+     */
     limitStartYear?: number;
-    /** Whether to display a loading state indicator */
+    /**
+     * Whether to display a loading state indicator
+     */
     loading?: boolean;
-    /** one tap to select */
+    /**
+     * One-click selection date
+     */
     oneTap?: boolean;
-    /** Whether plaintext the component */
+    /**
+     * Whether plaintext the component
+     */
     plaintext?: boolean;
-    /** Whether read only the component */
+    /**
+     * Whether read only the component
+     */
     readOnly?: boolean;
-    /** Predefined date Ranges */
+    /**
+     * Predefined date Ranges
+     */
     ranges?: RangeType<Date>[];
-    /** Whether to show week numbers */
+    /**
+     * Whether to show week numbers
+     */
     showWeekNumbers?: boolean;
-    /** Meridian format */
+    /**
+     * Meridian format for 12-hour time
+     */
     showMeridian?: boolean;
     /**
      * Whether a date on the calendar view should be disabled
@@ -47,41 +84,67 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      */
     shouldDisableDate?: (date: Date) => boolean;
     /**
-     * Disabled hours
+     * Disabled hours on the time view
      */
     shouldDisableHour?: (hour: number, date: Date) => boolean;
     /**
-     * Disabled minutes
+     * Disabled minutes on the time view
      */
     shouldDisableMinute?: (minute: number, date: Date) => boolean;
     /**
-     * Disabled seconds
+     * Disabled seconds on the time view
      */
     shouldDisableSecond?: (second: number, date: Date) => boolean;
-    /** Hidden hours */
+    /**
+     * Hidden hours on the time view
+     */
     hideHours?: (hour: number, date: Date) => boolean;
-    /** Hidden minutes */
+    /**
+     * Hidden minutes on the time view
+     */
     hideMinutes?: (minute: number, date: Date) => boolean;
-    /** Hidden seconds */
+    /**
+     * Hidden seconds on the time view
+     */
     hideSeconds?: (second: number, date: Date) => boolean;
-    /** Called when the calendar panel date changes */
+    /**
+     * Called when the calendar panel date changes
+     */
     onChangeCalendarDate?: (date: Date, event?: React.SyntheticEvent) => void;
-    /** Called when opening the month view */
+    /**
+     * Called when opening the month view
+     */
     onToggleMonthDropdown?: (toggle: boolean) => void;
-    /** Called when opening the time view */
+    /**
+     * Called when opening the time view
+     */
     onToggleTimeDropdown?: (toggle: boolean) => void;
-    /** Called when the option is selected */
+    /**
+     * Called when the option is selected
+     */
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after the prev month */
     onPrevMonth?: (date: Date) => void;
-    /** Called after the next month */
+    /**
+     * Called after the next month
+     */
     onNextMonth?: (date: Date) => void;
-    /** Called after clicking the OK button */
+    /**
+     * Called after clicking the OK button
+     */
     onOk?: (date: Date, event: React.SyntheticEvent) => void;
-    /** Called after clicking the shortcut button */
+    /**
+     * Called after clicking the shortcut button
+     */
     onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;
-    /** Called when clean */
+    /**
+     * Called when clean
+     */
     onClean?: (event: React.MouseEvent) => void;
+    /**
+     * Custom rendering of the selected date.
+     */
+    renderValue?: (value: Date, format: string) => string;
     /**
      * Custom rendering calendar cell content.
      *

package/cjs/DatePicker/DatePicker.js

@@ -20,8 +20,9 @@ var _MonthDropdown = require("../Calendar/MonthDropdown");
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _Stack = _interopRequireDefault(require("../Stack"));
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
-var _utils = require("../utils");
-var _dateUtils = require("../utils/dateUtils");
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _date = require("../internals/utils/date");
 var _Picker = require("../internals/Picker");
 var _OverlayTrigger = require("../internals/Overlay/OverlayTrigger");
 var _DateInput = _interopRequireDefault(require("../DateInput"));
@@ -29,6 +30,7 @@ var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _utils2 = require("./utils");
 var _useMonthView2 = _interopRequireDefault(require("./hooks/useMonthView"));
 var _useFocus2 = _interopRequireDefault(require("./hooks/useFocus"));
+var _useCustomizedInput2 = _interopRequireDefault(require("./hooks/useCustomizedInput"));
 var _templateObject;
 /**
  * A date picker allows users to select a date from a calendar.
@@ -55,6 +57,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
     idProp = props.id,
     isoWeek = 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,
@@ -84,8 +88,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onChange = props.onChange,
     onChangeCalendarDate = props.onChangeCalendarDate,
     onClean = props.onClean,
-    onEntered = props.onEntered,
-    onExited = props.onExited,
+    onEnter = props.onEnter,
+    onExit = props.onExit,
     onNextMonth = props.onNextMonth,
     onOk = props.onOk,
     onPrevMonth = props.onPrevMonth,
@@ -94,23 +98,24 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     renderCell = props.renderCell,
+    renderValue = props.renderValue,
     DEPRECATED_disabledDate = props.disabledDate,
     DEPRECATED_disabledHours = props.disabledHours,
     DEPRECATED_disabledMinutes = props.disabledMinutes,
     DEPRECATED_disabledSeconds = props.disabledSeconds,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEntered", "onExited", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"]);
-  var id = (0, _utils.useUniqueId)('rs-', idProp);
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"]);
+  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 _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),
+  var _useCustom = (0, _hooks.useCustom)('DatePicker', overrideLocale),
     locale = _useCustom.locale;
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
-  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
+  var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1];
   var _useCalendarDate = (0, _useCalendarDate2.default)(value, calendarDefaultDate),
@@ -123,7 +128,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setMonthView = _useMonthView.setMonthView,
     monthView = _useMonthView.monthView,
     toggleMonthView = _useMonthView.toggleMonthView; // 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);
   var showMonth = onlyShowMonth || monthView;
   var _useFocus = (0, _useFocus2.default)({
       target: target,
@@ -151,7 +156,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * Check whether the time is within the time range of the shortcut option in the toolbar.
    */
   var isDatetimeDisabled = function isDatetimeDisabled(date) {
-    return (isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(date)) || (0, _dateUtils.disableTime)(props, date);
+    return (isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(date)) || (0, _date.disableTime)(props, date);
   };
 
   /**
@@ -169,13 +174,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * - If format is month, disable ok button if all dates in the month of selected date are disabled
    */
   var isOkButtonDisabled = function isOkButtonDisabled(selectedDate) {
-    if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {
+    if ((0, _date.shouldRenderMonth)(formatStr) && !(0, _date.shouldRenderDate)(formatStr)) {
       return isMonthDisabled(selectedDate);
     }
     return isDatetimeDisabled(selectedDate);
   };
   var isErrorValue = function isErrorValue(value) {
-    if (!(0, _dateUtils.isValid)(value)) {
+    if (!(0, _date.isValid)(value)) {
       return true;
     } else if (value && isDateDisabled(value)) {
       return true;
@@ -186,7 +191,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Switch to the callback triggered after the next month.
    */
-  var handleMoveForward = (0, _utils.useEventCallback)(function (nextPageDate) {
+  var handleMoveForward = (0, _hooks.useEventCallback)(function (nextPageDate) {
     setCalendarDate(nextPageDate);
     onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);
@@ -195,7 +200,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Switch to the callback triggered after the previous month.
    */
-  var handleMoveBackward = (0, _utils.useEventCallback)(function (nextPageDate) {
+  var handleMoveBackward = (0, _hooks.useEventCallback)(function (nextPageDate) {
     setCalendarDate(nextPageDate);
     onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);
@@ -204,7 +209,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * The callback triggered when the date changes.
    */
-  var handleDateChange = (0, _utils.useEventCallback)(function (nextValue, event) {
+  var handleDateChange = (0, _hooks.useEventCallback)(function (nextValue, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);
   });
@@ -212,7 +217,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    *  A callback triggered when the time on the calendar changes.
    */
-  var handleChangeTime = (0, _utils.useEventCallback)(function (nextPageTime) {
+  var handleChangeTime = (0, _hooks.useEventCallback)(function (nextPageTime) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
   });
@@ -220,7 +225,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Close the calendar panel.
    */
-  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);
   });
@@ -228,10 +233,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * The callback triggered when PM/AM is switched.
    */
-  var handleToggleMeridian = (0, _utils.useEventCallback)(function () {
-    var hours = (0, _dateUtils.getHours)(calendarDate);
+  var handleToggleMeridian = (0, _hooks.useEventCallback)(function () {
+    var hours = (0, _date.getHours)(calendarDate);
     var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    var nextDate = (0, _dateUtils.setHours)(calendarDate, nextHours);
+    var nextDate = (0, _date.setHours)(calendarDate, nextHours);
     handleChangeTime(nextDate);
   });
   var updateValue = function updateValue(event, date, closeOverlay) {
@@ -254,7 +259,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * The callback triggered after the date in the shortcut area is clicked.
    */
-  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {
+  var handleShortcutPageDate = (0, _hooks.useEventCallback)(function (range, closeOverlay, event) {
     var value = range.value;
     updateValue(event, value, closeOverlay);
     handleDateChange(value, event);
@@ -264,7 +269,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * The callback triggered after clicking the OK button.
    */
-  var handleOK = (0, _utils.useEventCallback)(function (event) {
+  var handleOK = (0, _hooks.useEventCallback)(function (event) {
     updateValue(event);
     onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);
     focusInput();
@@ -274,13 +279,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * Callback after clicking the clear button.
    */
 
-  var handleClean = (0, _utils.useEventCallback)(function (event) {
+  var handleClean = (0, _hooks.useEventCallback)(function (event) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     updateValue(event, null);
     resetCalendarDate(null);
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
   });
-  var handlePickerPopupKeyDown = (0, _utils.useEventCallback)(function (event) {
+  var handlePickerPopupKeyDown = (0, _hooks.useEventCallback)(function (event) {
     onKeyFocusEvent(event, {
       date: calendarDate,
       callback: setCalendarDate
@@ -289,7 +294,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       handleOK(event);
     }
   });
-  var handleClick = (0, _utils.useEventCallback)(function () {
+  var handleClick = (0, _hooks.useEventCallback)(function () {
     if (editable) {
       return;
     }
@@ -299,13 +304,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Callback after the date is selected.
    */
-  var handleSelect = (0, _utils.useEventCallback)(function (nextValue, event, updatableValue) {
+  var handleSelect = (0, _hooks.useEventCallback)(function (nextValue, event, updatableValue) {
     if (updatableValue === void 0) {
       updatableValue = true;
     }
     setCalendarDate(
     // Determine whether the current value contains time, if not, use calendarDate.
-    (0, _dateUtils.shouldRenderTime)(formatStr) ? nextValue : (0, _dateUtils.copyTime)({
+    (0, _date.shouldRenderTime)(formatStr) ? nextValue : (0, _date.copyTime)({
       from: calendarDate,
       to: nextValue
     }));
@@ -319,7 +324,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    *  A callback triggered when the date on the calendar changes.
    */
-  var handleChangeMonth = (0, _utils.useEventCallback)(function (nextPageDate, event) {
+  var handleChangeMonth = (0, _hooks.useEventCallback)(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
     focusSelectedDate();
@@ -332,13 +337,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * 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 (!isErrorValue(value)) {
       handleSelect(value, event);
     }
     updateValue(event, value, false);
   });
-  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {
+  var handleInputKeyDown = (0, _hooks.useEventCallback)(function (event) {
     (0, _Picker.onMenuKeyDown)(event, {
       esc: handleClose,
       enter: function enter() {
@@ -346,7 +351,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         var _ref = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
           open = _ref.open;
         if (open) {
-          if ((0, _dateUtils.isValid)(calendarDate) && !isDateDisabled(calendarDate)) {
+          if ((0, _date.isValid)(calendarDate) && !isDateDisabled(calendarDate)) {
             updateValue(event);
             focusInput();
           }
@@ -357,7 +362,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }
     });
   });
-  var calendarProps = (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.calendarOnlyProps), function (func) {
+  var calendarProps = (0, _mapValues.default)((0, _pick.default)(props, _date.calendarOnlyProps), function (func) {
     return function (next, date) {
       var _func;
       return (_func = func === null || func === void 0 ? void 0 : func(next, date)) !== null && _func !== void 0 ? _func : false;
@@ -408,6 +413,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       limitStartYear: limitStartYear,
       format: formatStr,
       isoWeek: isoWeek,
+      weekStart: weekStart,
       calendarDate: calendarDate,
       renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
@@ -429,7 +435,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       hideOkBtn: oneTap
     }))));
   };
-  var hasValue = (0, _dateUtils.isValid)(value);
+  var hasValue = (0, _date.isValid)(value);
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
       classPrefix: classPrefix,
       name: 'date',
@@ -443,9 +449,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     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 handleTriggerClose = (0, _utils.useEventCallback)(function (cause) {
+  var handleTriggerClose = (0, _hooks.useEventCallback)(function (cause) {
     var _props$onClose;
     // Unless overlay is closing on user clicking "OK" button,
     // reset the selected date on calendar panel
@@ -463,14 +469,27 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ariaProps = _partitionHTMLProps[0],
     rest = _partitionHTMLProps[1];
   var invalidValue = value && isErrorValue(value);
+  var customizedProps = {
+    value: value,
+    formatStr: formatStr,
+    renderValue: renderValue,
+    readOnly: readOnly,
+    editable: editable,
+    loading: loading
+  };
+  var _useCustomizedInput = (0, _useCustomizedInput2.default)(customizedProps),
+    customValue = _useCustomizedInput.customValue,
+    inputReadOnly = _useCustomizedInput.inputReadOnly,
+    Input = _useCustomizedInput.Input,
+    events = _useCustomizedInput.events;
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
     onClose: handleTriggerClose,
-    onEntered: onEntered,
-    onExited: onExited,
+    onEnter: (0, _utils.createChainedFunction)(events.onActive, onEnter),
+    onExit: (0, _utils.createChainedFunction)(events.onInactive, onExit),
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
@@ -483,24 +502,24 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils2.getRestProps)(rest, usedClassNamePropKeys), {
     inside: true,
     size: size,
+    disabled: disabled,
     onClick: handleClick
   }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/_react.default.createElement(_DateInput.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,
     format: formatStr,
     placeholder: placeholder ? placeholder : formatStr,
     disabled: disabled,
+    readOnly: inputReadOnly,
     onChange: handleInputChange,
-    readOnly: readOnly || !editable || loading,
-    plaintext: plaintext,
     onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {
     loading: loading,
@@ -522,6 +541,7 @@ DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, _util
   hideMinutes: _propTypes.default.func,
   hideSeconds: _propTypes.default.func,
   isoWeek: _propTypes.default.bool,
+  weekStart: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6]),
   limitEndYear: _propTypes.default.number,
   limitStartYear: _propTypes.default.number,
   onChange: _propTypes.default.func,

package/cjs/DatePicker/PredefinedRanges.js

@@ -10,8 +10,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Stack = _interopRequireDefault(require("../Stack"));
-var _utils = require("../utils");
-var _utils2 = require("./utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("./utils");
 var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var className = props.className,
     disableShortcut = props.disableShortcut,
@@ -20,17 +20,17 @@ var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, r
     rangesProp = props.ranges,
     locale = props.locale,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "disableShortcut", "onShortcutClick", "calendarDate", "ranges", "locale"]);
-  var _useState = (0, _react.useState)((0, _utils2.getRanges)(props)),
+  var _useState = (0, _react.useState)((0, _utils.getRanges)(props)),
     ranges = _useState[0],
     setRanges = _useState[1];
-  (0, _utils.useUpdateEffect)(function () {
-    setRanges((0, _utils2.getRanges)({
+  (0, _hooks.useUpdateEffect)(function () {
+    setRanges((0, _utils.getRanges)({
       ranges: rangesProp,
       calendarDate: calendarDate
     }));
   }, [calendarDate, rangesProp]);
   var hasLocaleKey = (0, _react.useCallback)(function (key) {
-    return (0, _utils2.getDefaultRanges)(calendarDate).some(function (item) {
+    return (0, _utils.getDefaultRanges)(calendarDate).some(function (item) {
       return item.label === key;
     });
   }, [calendarDate]);

package/cjs/DatePicker/Toolbar.js

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _Stack = _interopRequireDefault(require("../Stack"));
 var OkButton = function OkButton(_ref) {
@@ -41,7 +41,7 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function Toolbar(props, ref
     onOk = props.onOk,
     onShortcutClick = props.onShortcutClick,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "calendarDate", "ranges", "locale", "hideOkBtn", "disableOkBtn", "disableShortcut", "onOk", "onShortcutClick"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;

package/cjs/DatePicker/hooks/useCustomizedInput.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+interface UseCustomizedInputProps<T> {
+    value?: T | null;
+    formatStr: string;
+    readOnly?: boolean;
+    editable?: boolean;
+    loading?: boolean;
+    mode?: 'date' | 'dateRange';
+    renderValue?: (value: T, format: string) => string;
+}
+declare function useCustomizedInput<T>(props: UseCustomizedInputProps<T>): {
+    customValue: string | null;
+    Input: import("../../internals/types").RsRefForwardingComponent<"input", import("../../Input").InputProps> | import("react").ForwardRefExoticComponent<import("../../DateInput").DateInputProps & import("react").RefAttributes<unknown>> | import("react").ForwardRefExoticComponent<import("../../DateRangeInput").DateRangeInputProps & import("react").RefAttributes<unknown>>;
+    inputReadOnly: boolean;
+    events: {
+        onActive: () => void;
+        onInactive: () => void;
+    };
+};
+export default useCustomizedInput;