rsuite 5.61.0 → 5.62.1

package/cjs/DatePicker/DatePicker.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"));
@@ -20,17 +19,21 @@ 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 _Input = _interopRequireDefault(require("../Input"));
 var _DateInput = _interopRequireDefault(require("../DateInput"));
 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;
+var _excluded = ["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"];
+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 picker allows users to select a date from a calendar.
  *
@@ -56,6 +59,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,
@@ -85,8 +90,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,
@@ -100,19 +105,19 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     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", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"]);
-  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 _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),
@@ -124,8 +129,10 @@ 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);
+    toggleMonthView = _useMonthView.toggleMonthView;
+
+  // Show only the calendar month panel. formatStr = 'yyyy-MM'
+  var onlyShowMonth = (0, _date.shouldRenderMonth)(formatStr) && !(0, _date.shouldRenderDate)(formatStr);
   var showMonth = onlyShowMonth || monthView;
   var _useFocus = (0, _useFocus2.default)({
       target: target,
@@ -136,6 +143,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     focusInput = _useFocus.focusInput,
     focusSelectedDate = _useFocus.focusSelectedDate,
     onKeyFocusEvent = _useFocus.onKeyFocusEvent;
+
   /**
    * Check whether the date is disabled.
    */
@@ -153,7 +161,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);
   };
 
   /**
@@ -171,13 +179,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;
@@ -188,7 +196,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);
@@ -197,7 +205,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);
@@ -206,7 +214,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);
   });
@@ -214,7 +222,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);
   });
@@ -222,7 +230,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);
   });
@@ -230,10 +238,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) {
@@ -256,7 +264,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);
@@ -266,7 +274,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();
@@ -276,13 +284,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
@@ -291,7 +299,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;
     }
@@ -301,13 +309,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
     }));
@@ -321,7 +329,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();
@@ -334,13 +342,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() {
@@ -348,7 +356,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();
           }
@@ -359,7 +367,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;
@@ -410,6 +418,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       limitStartYear: limitStartYear,
       format: formatStr,
       isoWeek: isoWeek,
+      weekStart: weekStart,
       calendarDate: calendarDate,
       renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
@@ -431,7 +440,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',
@@ -445,9 +454,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
@@ -465,27 +474,27 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ariaProps = _partitionHTMLProps[0],
     rest = _partitionHTMLProps[1];
   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 : _DateInput.default;
+  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)),
@@ -503,7 +512,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__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
@@ -514,8 +523,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     format: formatStr,
     placeholder: placeholder ? placeholder : formatStr,
     disabled: disabled,
-    onChange: handleInputChange,
     readOnly: inputReadOnly,
+    onChange: handleInputChange,
     onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {
     loading: loading,
@@ -537,6 +546,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,
@@ -553,5 +563,4 @@ DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, _util
   showWeekNumbers: _propTypes.default.bool,
   value: _propTypes.default.instanceOf(Date)
 });
-var _default = DatePicker;
-exports.default = _default;
+var _default = exports.default = DatePicker;

package/cjs/DatePicker/PredefinedRanges.js

@@ -1,7 +1,6 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
@@ -10,8 +9,12 @@ 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 _excluded = ["className", "disableShortcut", "onShortcutClick", "calendarDate", "ranges", "locale"],
+  _excluded2 = ["value", "closeOverlay", "label"];
+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 PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var className = props.className,
     disableShortcut = props.disableShortcut,
@@ -19,18 +22,18 @@ var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, r
     calendarDate = props.calendarDate,
     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)),
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  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]);
@@ -46,7 +49,7 @@ var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, r
     var value = range.value,
       closeOverlay = range.closeOverlay,
       label = range.label,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(range, ["value", "closeOverlay", "label"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(range, _excluded2);
     var disabled = disableShortcut === null || disableShortcut === void 0 ? void 0 : disableShortcut(value);
     var handleClickShortcut = function handleClickShortcut(event) {
       if (disabled) {
@@ -63,5 +66,4 @@ var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, r
     }, rest), hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);
   }));
 });
-var _default = PredefinedRanges;
-exports.default = _default;
+var _default = exports.default = PredefinedRanges;

package/cjs/DatePicker/Toolbar.d.ts

@@ -6,7 +6,7 @@ export interface ToolbarProps<T = any, Shortcut = T> extends PredefinedRangesPro
     disableOkBtn?: (value: T) => boolean;
     onOk?: (event: React.MouseEvent) => void;
 }
-declare type ToolbarComponent = React.ForwardRefExoticComponent<ToolbarProps> & {
+type ToolbarComponent = React.ForwardRefExoticComponent<ToolbarProps> & {
     <T = any, Shortcut = T>(props: ToolbarProps<T, Shortcut>): React.ReactElement | null;
 };
 /**

package/cjs/DatePicker/Toolbar.js

@@ -8,9 +8,10 @@ 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 _excluded = ["className", "classPrefix", "calendarDate", "ranges", "locale", "hideOkBtn", "disableOkBtn", "disableShortcut", "onOk", "onShortcutClick"];
 var OkButton = function OkButton(_ref) {
   var disableOkBtn = _ref.disableOkBtn,
     calendarDate = _ref.calendarDate,
@@ -40,8 +41,8 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function Toolbar(props, ref
     disableShortcut = props.disableShortcut,
     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),
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;
@@ -72,5 +73,4 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function Toolbar(props, ref
   }, locale === null || locale === void 0 ? void 0 : locale.ok)));
 });
 Toolbar.displayName = 'Toolbar';
-var _default = Toolbar;
-exports.default = _default;
+var _default = exports.default = Toolbar;

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;

package/cjs/DatePicker/hooks/useCustomizedInput.js

@@ -0,0 +1,59 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _date = require("../../internals/utils/date");
+var _Input = _interopRequireDefault(require("../../Input"));
+var _DateInput = _interopRequireDefault(require("../../DateInput"));
+var _DateRangeInput = _interopRequireDefault(require("../../DateRangeInput"));
+function useCustomizedInput(props) {
+  var value = props.value,
+    formatStr = props.formatStr,
+    readOnly = props.readOnly,
+    editable = props.editable,
+    loading = props.loading,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'date' : _props$mode,
+    renderValue = props.renderValue;
+  var _useState = (0, _react.useState)(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var onActive = (0, _react.useCallback)(function () {
+    return setActive(true);
+  }, []);
+  var onInactive = (0, _react.useCallback)(function () {
+    return setActive(false);
+  }, []);
+
+  // 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 the component is not active or editable, the custom rendering value is displayed
+  var customized = !active || !editable;
+  if (typeof renderValue === 'function' && value && customized) {
+    if (Array.isArray(value) ? value.every(_date.isValid) : (0, _date.isValid)(value)) {
+      customValue = renderValue(value, formatStr);
+
+      // If the custom rendering value, the input box is read-only
+      inputReadOnly = true;
+    }
+  }
+  var TargetInput = mode === 'dateRange' ? _DateRangeInput.default : _DateInput.default;
+  var CustomizedInput = customValue ? _Input.default : TargetInput;
+  return {
+    customValue: customValue,
+    Input: CustomizedInput,
+    inputReadOnly: inputReadOnly,
+    events: {
+      onActive: onActive,
+      onInactive: onInactive
+    }
+  };
+}
+var _default = exports.default = useCustomizedInput;

package/cjs/DatePicker/hooks/useFocus.js

@@ -7,18 +7,18 @@ exports.default = void 0;
 var _delay = _interopRequireDefault(require("lodash/delay"));
 var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
 var _addDays = _interopRequireDefault(require("date-fns/addDays"));
-var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
+var _hooks = require("../../internals/hooks");
 var _utils = require("../../Calendar/utils");
-var _utils2 = require("../../utils");
-var _utils3 = require("../../internals/Picker/utils");
+var _utils2 = require("../../internals/Picker/utils");
 function useFocus(props) {
   var target = props.target,
     showMonth = props.showMonth,
     id = props.id,
     localeProp = props.locale;
-  var _useCustom = (0, _utils2.useCustom)('DatePicker', localeProp),
+  var _useCustom = (0, _hooks.useCustom)('DatePicker', localeProp),
     locale = _useCustom.locale,
     formatDate = _useCustom.formatDate;
+
   /**
    * Get the corresponding container based on date selection and month selection
    */
@@ -54,19 +54,19 @@ function useFocus(props) {
   /**
    * Focus on the input element
    */
-  var focusInput = (0, _useEventCallback.default)(function () {
+  var focusInput = (0, _hooks.useEventCallback)(function () {
     (0, _delay.default)(function () {
       var _target$current;
       return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
     }, 1);
   });
-  var onKeyFocusEvent = (0, _useEventCallback.default)(function (event, options) {
+  var onKeyFocusEvent = (0, _hooks.useEventCallback)(function (event, options) {
     var date = options.date,
       callback = options.callback;
     var delta = 0;
     var step = showMonth ? 6 : 7;
     var changeDateFunc = showMonth ? _addMonths.default : _addDays.default;
-    (0, _utils3.onMenuKeyDown)(event, {
+    (0, _utils2.onMenuKeyDown)(event, {
       down: function down() {
         delta = step;
       },
@@ -92,5 +92,4 @@ function useFocus(props) {
     onKeyFocusEvent: onKeyFocusEvent
   };
 }
-var _default = useFocus;
-exports.default = _default;
+var _default = exports.default = useFocus;

package/cjs/DatePicker/hooks/useMonthView.js

@@ -1,20 +1,20 @@
 'use client';
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
-var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
+var _hooks = require("../../internals/hooks");
 function useMonthView(props) {
   var onToggleMonthDropdown = props.onToggleMonthDropdown;
   var _useState = (0, _react.useState)(false),
     monthView = _useState[0],
     setMonthView = _useState[1];
+
   /**
    * The callback triggered after the month selection box is opened or closed.
    */
-  var toggleMonthView = (0, _useEventCallback.default)(function (show) {
+  var toggleMonthView = (0, _hooks.useEventCallback)(function (show) {
     onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(show);
     setMonthView(show);
   });
@@ -24,5 +24,4 @@ function useMonthView(props) {
     toggleMonthView: toggleMonthView
   };
 }
-var _default = useMonthView;
-exports.default = _default;
+var _default = exports.default = useMonthView;