rsuite 5.61.0 → 5.62.0

package/cjs/DatePicker/DatePicker.js

@@ -20,16 +20,17 @@ 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;
 /**
  * A date picker allows users to select a date from a calendar.
@@ -56,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,
@@ -85,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,
@@ -100,19 +103,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, ["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),
@@ -125,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,
@@ -153,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);
   };
 
   /**
@@ -171,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;
@@ -188,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);
@@ -197,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);
@@ -206,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);
   });
@@ -214,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);
   });
@@ -222,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);
   });
@@ -230,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) {
@@ -256,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);
@@ -266,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();
@@ -276,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
@@ -291,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;
     }
@@ -301,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
     }));
@@ -321,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();
@@ -334,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() {
@@ -348,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();
           }
@@ -359,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;
@@ -410,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,
@@ -431,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',
@@ -445,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
@@ -465,27 +469,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 +507,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 +518,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 +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;

package/cjs/DatePicker/hooks/useCustomizedInput.js

@@ -0,0 +1,60 @@
+'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 = useCustomizedInput;
+exports.default = _default;

package/cjs/DatePicker/hooks/useFocus.js

@@ -7,16 +7,15 @@ 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;
   /**
@@ -54,19 +53,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;
       },

package/cjs/DatePicker/hooks/useMonthView.js

@@ -1,11 +1,10 @@
 '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),
@@ -14,7 +13,7 @@ function useMonthView(props) {
   /**
    * 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);
   });

package/cjs/DatePicker/utils.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _propTypes2 = require("../internals/propTypes");
 var _Picker = require("../internals/Picker");
-var _dateUtils = require("../utils/dateUtils");
+var _date = require("../internals/utils/date");
 function getDefaultRanges(value) {
   var today = new Date();
 
@@ -23,13 +23,13 @@ function getDefaultRanges(value) {
   if (value instanceof Array) {
     return [{
       label: 'today',
-      value: [(0, _dateUtils.startOfDay)(today), (0, _dateUtils.endOfDay)(today)]
+      value: [(0, _date.startOfDay)(today), (0, _date.endOfDay)(today)]
     }, {
       label: 'yesterday',
-      value: [(0, _dateUtils.startOfDay)((0, _dateUtils.subDays)(today, 1)), (0, _dateUtils.endOfDay)((0, _dateUtils.subDays)(today, 1))]
+      value: [(0, _date.startOfDay)((0, _date.subDays)(today, 1)), (0, _date.endOfDay)((0, _date.subDays)(today, 1))]
     }, {
       label: 'last7Days',
-      value: [(0, _dateUtils.startOfDay)((0, _dateUtils.subDays)(today, 6)), (0, _dateUtils.endOfDay)(today)]
+      value: [(0, _date.startOfDay)((0, _date.subDays)(today, 6)), (0, _date.endOfDay)(today)]
     }];
   }
   return [{
@@ -37,7 +37,7 @@ function getDefaultRanges(value) {
     value: today
   }, {
     label: 'yesterday',
-    value: (0, _dateUtils.subDays)(today, 1)
+    value: (0, _date.subDays)(today, 1)
   }];
 }
 var generateRangesIterator = function generateRangesIterator(_ref) {
@@ -90,6 +90,6 @@ var getRestProps = function getRestProps(props, omitProps) {
   if (omitProps === void 0) {
     omitProps = [];
   }
-  return (0, _omit.default)(props, [].concat(_Picker.omitTriggerPropKeys, _dateUtils.calendarOnlyProps, omitProps));
+  return (0, _omit.default)(props, [].concat(_Picker.omitTriggerPropKeys, _date.calendarOnlyProps, omitProps));
 };
 exports.getRestProps = getRestProps;

package/cjs/DateRangeInput/DateRangeInput.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InputProps } from '../Input';
-import { FormControlBaseProps } from '../@types/common';
+import { FormControlBaseProps } from '@/internals/types';
 declare type ValueType = [Date | null, Date | null] | null;
 export interface DateRangeInputProps extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>, FormControlBaseProps<ValueType> {
     /**