rsuite 5.48.0 → 5.49.0

package/cjs/DatePicker/DatePicker.js

@@ -1,19 +1,19 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 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"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
 var _delay = _interopRequireDefault(require("lodash/delay"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
 var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarContainer"));
@@ -25,15 +25,23 @@ var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _utils = require("../utils");
 var _dateUtils = require("../utils/dateUtils");
 var _Picker = require("../Picker");
+var _usePickerRef2 = _interopRequireDefault(require("../Picker/usePickerRef"));
+var _DateInput = _interopRequireDefault(require("../DateInput"));
+var _InputGroup = _interopRequireDefault(require("../InputGroup"));
+var _PickerLabel = _interopRequireDefault(require("./PickerLabel"));
+var _PickerIndicator = _interopRequireDefault(require("./PickerIndicator"));
 var _OverlayTrigger = require("../Overlay/OverlayTrigger");
 var _deprecatePropType = require("../utils/deprecatePropType");
 var _utils2 = require("../Calendar/utils");
+var _utils3 = require("./utils");
+var _templateObject;
 /**
  * A date picker allows users to select a date from a calendar.
  *
  * @see https://rsuitejs.com/components/date-picker
  */
 var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _merge;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     className = props.className,
@@ -46,14 +54,20 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     editable = _props$editable === void 0 ? true : _props$editable,
     defaultValue = props.defaultValue,
     disabled = props.disabled,
+    readOnly = props.readOnly,
+    plaintext = props.plaintext,
     _props$format = props.format,
     formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    idProp = props.id,
     isoWeek = props.isoWeek,
     _props$limitEndYear = props.limitEndYear,
     limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
     limitStartYear = props.limitStartYear,
     overrideLocale = props.locale,
+    loading = props.loading,
+    label = props.label,
     menuClassName = props.menuClassName,
+    menuStyle = props.menuStyle,
     _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$placement = props.placement,
@@ -66,7 +80,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     showMeridian = props.showMeridian,
     showWeekNumbers = props.showWeekNumbers,
     style = props.style,
-    toggleAs = props.toggleAs,
+    size = props.size,
     caretAsProp = props.caretAs,
     DEPRECATED_disabledDate = props.disabledDate,
     DEPRECATED_disabledHours = props.disabledHours,
@@ -76,7 +90,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     shouldDisableHour = props.shouldDisableHour,
     shouldDisableMinute = props.shouldDisableMinute,
     shouldDisableSecond = props.shouldDisableSecond,
-    renderValue = props.renderValue,
     onChange = props.onChange,
     onChangeCalendarDate = props.onChangeCalendarDate,
     onClean = props.onClean,
@@ -91,11 +104,16 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick"]);
+    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", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick"]);
+  var id = (0, _utils.useUniqueId)(classPrefix + "-", idProp);
+  var _usePickerRef = (0, _usePickerRef2.default)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay;
   var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),
     locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate,
-    parseDate = _useCustom.parseDate;
+    formatDate = _useCustom.formatDate;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -111,71 +129,72 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
   var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);
   var showMonth = onlyShowMonth || showMonthDropdown;
-  var _useState2 = (0, _react.useState)(),
-    inputState = _useState2[0],
-    setInputState = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    active = _useState3[0],
-    setActive = _useState3[1];
-  var triggerRef = (0, _react.useRef)(null);
-  var rootRef = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  (0, _Picker.usePublicMethods)(ref, {
-    rootRef: rootRef,
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef
-  });
+  var isDateDisabled = function isDateDisabled(date) {
+    if (typeof shouldDisableDate === 'function') {
+      return shouldDisableDate(date);
+    }
+    if (typeof DEPRECATED_disabledDate === 'function') {
+      return DEPRECATED_disabledDate(date);
+    }
+    return false;
+  };
+  var isErrorValue = function isErrorValue(value) {
+    if (!(0, _dateUtils.isValid)(value)) {
+      return true;
+    } else if (value && isDateDisabled(value)) {
+      return true;
+    }
+    return false;
+  };
 
   /**
    * Switch to the callback triggered after the next month.
    */
-  var handleMoveForward = (0, _react.useCallback)(function (nextPageDate) {
+  var handleMoveForward = (0, _utils.useEventCallback)(function (nextPageDate) {
     setCalendarDate(nextPageDate);
     onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);
-  }, [onChangeCalendarDate, onNextMonth, setCalendarDate]);
+  });
 
   /**
    * Switch to the callback triggered after the previous month.
    */
-  var handleMoveBackward = (0, _react.useCallback)(function (nextPageDate) {
+  var handleMoveBackward = (0, _utils.useEventCallback)(function (nextPageDate) {
     setCalendarDate(nextPageDate);
     onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);
-  }, [onChangeCalendarDate, onPrevMonth, setCalendarDate]);
+  });
 
   /**
    * The callback triggered when the date changes.
    */
-  var handleDateChange = (0, _react.useCallback)(function (nextValue, event) {
+  var handleDateChange = (0, _utils.useEventCallback)(function (nextValue, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);
-  }, [onChangeCalendarDate, onSelect]);
+  });
 
   /**
    *  A callback triggered when the time on the calendar changes.
    */
-  var handleChangeTime = (0, _react.useCallback)(function (nextPageTime) {
+  var handleChangeTime = (0, _utils.useEventCallback)(function (nextPageTime) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
-  }, [handleDateChange, setCalendarDate]);
-  var handleClose = (0, _react.useCallback)(function () {
-    var _triggerRef$current, _triggerRef$current$c;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
-  }, []);
+  });
+  var handleClose = (0, _utils.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);
+  });
 
   /**
    * The callback triggered when PM/AM is switched.
    */
-  var handleToggleMeridian = (0, _react.useCallback)(function () {
+  var handleToggleMeridian = (0, _utils.useEventCallback)(function () {
     var hours = (0, _dateUtils.getHours)(calendarDate);
     var nextHours = hours >= 12 ? hours - 12 : hours + 12;
     var nextDate = (0, _dateUtils.setHours)(calendarDate, nextHours);
     handleChangeTime(nextDate);
-  }, [calendarDate, handleChangeTime]);
-  var updateValue = (0, _react.useCallback)(function (event, nextPageDate, closeOverlay) {
+  });
+  var updateValue = function updateValue(event, nextPageDate, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
@@ -190,91 +209,80 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (closeOverlay !== false) {
       handleClose();
     }
-  }, [handleClose, onChange, calendarDate, setCalendarDate, setValue, value]);
+  };
 
   /**
    * The callback triggered after the date in the shortcut area is clicked.
    */
-  var handleShortcutPageDate = (0, _react.useCallback)(function (range, closeOverlay, event) {
+  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {
     var value = range.value;
     updateValue(event, value, closeOverlay);
     handleDateChange(value, event);
     onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);
-  }, [handleDateChange, onShortcutClick, updateValue]);
+  });
 
   /**
    * Get the corresponding container based on date selection and month selection
    */
-  var getOverlayContainer = (0, _react.useCallback)(function () {
-    var _overlayRef$current;
-    return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector(showMonth ? '[role="menu"]' : '[role="grid"]');
-  }, [showMonth]);
+  var getOverlayContainer = function getOverlayContainer() {
+    return showMonth ? document.getElementById(id + "-calendar-month-dropdown") : document.getElementById(id + "-calendar-table");
+  };
 
   /**
    * Check whether the date is focusable
    */
-  var checkFocusable = (0, _react.useCallback)(function (date) {
+  var checkFocusable = function checkFocusable(date) {
     var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;
     var ariaLabel = (0, _utils2.getAriaLabel)(date, formatStr, formatDate);
     var container = getOverlayContainer();
-    var dateElement = container.querySelector("[aria-label=\"" + ariaLabel + "\"]");
-    if (dateElement !== null && dateElement !== void 0 && dateElement.hasAttribute('aria-disabled')) {
+    var dateElement = container === null || container === void 0 ? void 0 : container.querySelector("[aria-label=\"" + ariaLabel + "\"]");
+    if ((dateElement === null || dateElement === void 0 ? void 0 : dateElement.getAttribute('aria-disabled')) === 'true') {
       return false;
     }
     return true;
-  }, [formatDate, getOverlayContainer, locale, showMonth]);
+  };
 
   /**
    * Focus on the currently selected date element
    */
-  var focusSelectedDate = (0, _react.useCallback)(function () {
+  var focusSelectedDate = function focusSelectedDate() {
     (0, _delay.default)(function () {
       var container = getOverlayContainer();
       var selectedElement = container === null || container === void 0 ? void 0 : container.querySelector('[aria-selected="true"]');
       selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.focus();
     }, 1);
-  }, [getOverlayContainer]);
+  };
 
   /**
    * Focus on the input element
    */
-  var focusTargetButton = (0, _react.useCallback)(function () {
+  var focusTargetInput = (0, _utils.useEventCallback)(function () {
     (0, _delay.default)(function () {
-      var _targetRef$current, _targetRef$current$qu;
-      (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$qu = _targetRef$current.querySelector('input')) === null || _targetRef$current$qu === void 0 ? void 0 : _targetRef$current$qu.focus();
-    }, 100);
-  }, []);
+      var _target$current;
+      return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+    }, 1);
+  });
 
   /**
    * The callback triggered after clicking the OK button.
    */
-  var handleOK = (0, _react.useCallback)(function (event) {
+  var handleOK = (0, _utils.useEventCallback)(function (event) {
     updateValue(event);
     onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);
-    focusTargetButton();
-  }, [updateValue, onOk, calendarDate, focusTargetButton]);
+    focusTargetInput();
+  });
 
   /**
    * Callback after clicking the clear button.
    */
-  var handleClean = (0, _react.useCallback)(function (event) {
+
+  var handleClean = (0, _utils.useEventCallback)(function (event) {
     updateValue(event, null);
     resetCalendarDate(null);
-  }, [resetCalendarDate, updateValue]);
-  var handlePickerToggleKeyDown = (0, _react.useCallback)(function (event) {
-    var _event$target;
-    var tagName = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName;
-    if (tagName === 'INPUT') {
-      if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        focusSelectedDate();
-      } else if (event.key === 'Enter') {
-        var _triggerRef$current2, _triggerRef$current2$;
-        (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
-      }
-    }
-  }, [focusSelectedDate]);
-  var handlePickerOverlayKeyDown = (0, _react.useCallback)(function (event) {
+    onClean === null || onClean === void 0 ? void 0 : onClean(event);
+    event.stopPropagation();
+  });
+  var handlePickerOverlayKeyDown = (0, _utils.useEventCallback)(function (event) {
     var delta = 0;
     var step = showMonth ? 6 : 7;
     var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;
@@ -300,135 +308,91 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setCalendarDate(nextDate);
       focusSelectedDate();
     }
-  }, [showMonth, calendarDate, checkFocusable, handleOK, setCalendarDate, focusSelectedDate]);
+  });
 
   /**
    * The callback triggered after the month selection box is opened or closed.
    */
-  var handleToggleMonthDropdown = (0, _react.useCallback)(function (toggle) {
+  var handleToggleMonthDropdown = (0, _utils.useEventCallback)(function (toggle) {
     onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);
     setShowMonthDropdown(toggle);
-  }, [onToggleMonthDropdown]);
-
-  /**
-   * Handle keyboard events.
-   */
-  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    active: active,
-    onExit: handleClean,
-    onKeyDown: handlePickerToggleKeyDown
-  }, rest));
+  });
+  var handleClick = (0, _utils.useEventCallback)(function () {
+    if (editable) {
+      return;
+    }
+    focusSelectedDate();
+  });
 
   /**
    * Callback after the date is selected.
    */
-  var handleSelect = (0, _react.useCallback)(function (nextValue, event, updatableValue) {
+  var handleSelect = (0, _utils.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, _utils.composeFunctions)(function (d) {
-      return (0, _dateUtils.setHours)(d, (0, _dateUtils.getHours)(calendarDate));
-    }, function (d) {
-      return (0, _dateUtils.setMinutes)(d, (0, _dateUtils.getMinutes)(calendarDate));
-    }, function (d) {
-      return (0, _dateUtils.setSeconds)(d, (0, _dateUtils.getSeconds)(calendarDate));
-    })(nextValue));
+    (0, _dateUtils.shouldRenderTime)(formatStr) ? nextValue : (0, _dateUtils.copyTime)({
+      from: calendarDate,
+      to: nextValue
+    }));
     handleDateChange(nextValue);
     if (oneTap && updatableValue) {
       updateValue(event, nextValue);
+      focusTargetInput();
     }
-  }, [setCalendarDate, formatStr, handleDateChange, oneTap, calendarDate, updateValue]);
+  });
 
   /**
    *  A callback triggered when the date on the calendar changes.
    */
-  var handleChangeMonth = (0, _react.useCallback)(function (nextPageDate, event) {
+  var handleChangeMonth = (0, _utils.useEventCallback)(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
     focusSelectedDate();
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
+      focusTargetInput();
     }
-  }, [focusSelectedDate, handleDateChange, oneTap, onlyShowMonth, setCalendarDate, updateValue]);
-  var isDateDisabled = (0, _react.useCallback)(function (date) {
-    if (typeof shouldDisableDate === 'function') {
-      return shouldDisableDate(date);
-    }
-    if (typeof DEPRECATED_disabledDate === 'function') {
-      return DEPRECATED_disabledDate(date);
-    }
-    return false;
-  }, [DEPRECATED_disabledDate, shouldDisableDate]);
+  });
 
   /**
    * Callback after the input box value is changed.
    */
-  var handleInputChange = (0, _react.useCallback)(function (value, event) {
-    setInputState('Typing');
-
-    // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
-    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
-    if (!(0, _dateUtils.isMatch)(value, formatStr, {
-      locale: locale.dateLocale
-    })) {
-      setInputState('Error');
-      return;
-    }
-    var date = parseDate(value, formatStr);
-
-    // If only the time is included in the characters, it will default to today.
-    if ((0, _dateUtils.shouldOnlyRenderTime)(formatStr)) {
-      date = new Date((0, _dateUtils.format)(new Date(), 'yyyy-MM-dd') + " " + value);
-    }
-    if (!(0, _dateUtils.isValid)(date)) {
-      setInputState('Error');
-      return;
-    }
-    if (isDateDisabled(date)) {
-      setInputState('Error');
-      return;
-    }
-    handleSelect(date, event, false);
-  }, [formatStr, locale, parseDate, isDateDisabled, handleSelect]);
-
-  /**
-   * The callback after the enter key is triggered on the input
-   */
-  var handleInputPressEnd = (0, _react.useCallback)(function (event) {
-    if (inputState === 'Typing') {
-      updateValue(event, calendarDate);
-    }
-    setInputState('Initial');
-  }, [inputState, calendarDate, updateValue]);
-  var handleInputBackspace = (0, _react.useCallback)(function (event) {
-    var value = event.target.value;
-
-    // When the input box is empty, the date is cleared.
-    if (value === '') {
-      handleClean(event);
+  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {
+    if (!isErrorValue(value)) {
+      handleSelect(value, event);
     }
-  }, [handleClean]);
-  var handleEntered = (0, _react.useCallback)(function () {
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    setActive(true);
-  }, [onOpen]);
-  var handleExited = (0, _react.useCallback)(function () {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-    setActive(false);
-  }, [onClose]);
+    updateValue(event, value, false);
+  });
+  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {
+    (0, _Picker.onMenuKeyDown)(event, {
+      esc: handleClose,
+      enter: function enter() {
+        var _trigger$current2;
+        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)) {
+            updateValue(event);
+            focusTargetInput();
+          }
+        } else {
+          var _trigger$current3;
+          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();
+        }
+      }
+    });
+  });
 
   // Check whether the time is within the time range of the shortcut option in the toolbar.
-  var disabledToolbarHandle = (0, _react.useCallback)(function (date) {
+  var disabledToolbarHandle = function disabledToolbarHandle(date) {
     var _DEPRECATED_disabledD;
     var allowDate = (_DEPRECATED_disabledD = DEPRECATED_disabledDate === null || DEPRECATED_disabledDate === void 0 ? void 0 : DEPRECATED_disabledDate(date)) !== null && _DEPRECATED_disabledD !== void 0 ? _DEPRECATED_disabledD : false;
     var allowTime = (0, _dateUtils.disabledTime)(props, date);
     return allowDate || allowTime;
-  }, [DEPRECATED_disabledDate, props]);
+  };
 
   /**
    * Whether "OK" button is disabled
@@ -436,12 +400,12 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * - If format is date, disable ok button if selected date is disabled
    * - If format is month, disable ok button if all dates in the month of selected date are disabled
    */
-  var isOKButtonDisabled = (0, _react.useCallback)(function (selectedDate) {
+  var isOKButtonDisabled = function isOKButtonDisabled(selectedDate) {
     if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {
       return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
     }
     return disabledToolbarHandle(selectedDate);
-  }, [disabledToolbarHandle, formatStr]);
+  };
   var calendarProps = (0, _react.useMemo)(function () {
     return (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
@@ -450,53 +414,26 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       };
     });
   }, [props]);
-  var calendar = /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
-    locale: locale,
-    showWeekNumbers: showWeekNumbers,
-    showMeridian: showMeridian,
-    disabledDate: isDateDisabled,
-    disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,
-    disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,
-    disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,
-    limitEndYear: limitEndYear,
-    limitStartYear: limitStartYear,
-    format: formatStr,
-    isoWeek: isoWeek,
-    calendarDate: calendarDate,
-    onMoveForward: handleMoveForward,
-    onMoveBackward: handleMoveBackward,
-    onSelect: handleSelect,
-    onToggleMonthDropdown: handleToggleMonthDropdown,
-    onToggleTimeDropdown: onToggleTimeDropdown,
-    onChangeMonth: handleChangeMonth,
-    onChangeTime: handleChangeTime,
-    onToggleMeridian: handleToggleMeridian
-  }));
-
-  // The shortcut option on the left side of the calendar panel
-  var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
-    return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
-  })) || [];
-
-  // The shortcut option on the bottom of the calendar panel
-  var bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
-    return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
-  })) || [];
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var _splitRanges = (0, _utils3.splitRanges)(ranges),
+    sideRanges = _splitRanges.sideRanges,
+    bottomRanges = _splitRanges.bottomRanges;
+  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
-    var classes = merge(menuClassName, className, prefix('date-menu'));
-    var styles = {
+    var classes = merge(menuClassName, className);
+    var styles = (0, _extends2.default)({}, menuStyle, {
       left: left,
       top: top
-    };
+    });
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       role: "dialog",
+      "aria-labelledby": label ? id + "-label" : undefined,
+      tabIndex: -1,
       className: classes,
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       style: styles,
-      target: triggerRef,
+      target: trigger,
       onKeyDown: handlePickerOverlayKeyDown
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
       alignItems: "flex-start"
@@ -509,7 +446,29 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       locale: locale,
       disabledShortcut: disabledToolbarHandle,
       onShortcutClick: handleShortcutPageDate
-    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, calendar, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
+      targetId: id,
+      locale: locale,
+      showWeekNumbers: showWeekNumbers,
+      showMeridian: showMeridian,
+      disabledDate: isDateDisabled,
+      disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,
+      disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,
+      disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,
+      limitEndYear: limitEndYear,
+      limitStartYear: limitStartYear,
+      format: formatStr,
+      isoWeek: isoWeek,
+      calendarDate: calendarDate,
+      onMoveForward: handleMoveForward,
+      onMoveBackward: handleMoveBackward,
+      onSelect: handleSelect,
+      onToggleMonthDropdown: handleToggleMonthDropdown,
+      onToggleTimeDropdown: onToggleTimeDropdown,
+      onChangeMonth: handleChangeMonth,
+      onChangeTime: handleChangeTime,
+      onToggleMeridian: handleToggleMeridian
+    })), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
       ranges: bottomRanges,
       calendarDate: calendarDate,
@@ -520,7 +479,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       hideOkBtn: oneTap
     }))));
   };
-  var hasValue = !!value;
+  var hasValue = (0, _dateUtils.isValid)(value);
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
       classPrefix: classPrefix,
       name: 'date',
@@ -530,62 +489,73 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     })),
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
-  var renderDate = (0, _react.useCallback)(function () {
-    var _renderValue;
-    if (!value) {
-      return placeholder || formatStr;
-    }
-    return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
-  }, [formatStr, formatDate, placeholder, renderValue, value]);
   var caretAs = (0, _react.useMemo)(function () {
+    if (caretAsProp === null) {
+      return null;
+    }
     return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);
   }, [caretAsProp, formatStr]);
-  var handleTriggerClose = (0, _react.useCallback)(function (cause) {
+  var handleTriggerClose = (0, _utils.useEventCallback)(function (cause) {
     // Unless overlay is closing on user clicking "OK" button,
     // reset the selected date on calendar panel
     if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {
       resetCalendarDate();
     }
     setShowMonthDropdown(false);
-  }, [resetCalendarDate]);
+  });
+  var showCleanButton = cleanable && hasValue && !readOnly;
+  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {
+      htmlProps: [],
+      includeAria: true
+    }),
+    ariaProps = _partitionHTMLProps[0],
+    rest = _partitionHTMLProps[1];
+  var invalidValue = value && isErrorValue(value);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onClose: handleTriggerClose,
-    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
-    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
-    speaker: renderDropdownMenu
+    onEntered: (0, _utils.createChainedFunction)(onOpen, onEntered),
+    onExited: (0, _utils.createChainedFunction)(onClose, onExited),
+    speaker: renderCalendarOverlay
   }, /*#__PURE__*/_react.default.createElement(Component, {
-    className: merge(className, classes),
+    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
     style: style,
-    ref: rootRef
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {
-    className: prefix({
-      error: inputState === 'Error'
-    }),
-    as: toggleAs,
-    ref: targetRef,
-    appearance: appearance,
-    editable: editable,
-    inputValue: value ? formatDate(value, formatStr) : '',
-    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,
-    inputMask: (0, _dateUtils.getDateMask)(formatStr),
-    onInputChange: handleInputChange,
-    onInputBlur: handleInputPressEnd,
-    onInputPressEnter: handleInputPressEnd,
-    onInputBackspace: (0, _debounce.default)(handleInputBackspace, 10),
-    onKeyDown: onPickerKeyDown,
-    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
-    cleanable: cleanable && !disabled,
-    hasValue: hasValue,
-    active: active,
-    placement: placement,
+    ref: root
+  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateInput.default, {
+    value: value,
+    format: formatStr,
+    plaintext: plaintext
+  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {
+    inside: true,
+    size: size,
+    onClick: handleClick
+  }), /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
+    id: id + "-label"
+  }, label), /*#__PURE__*/_react.default.createElement(_DateInput.default, (0, _extends2.default)({
+    "aria-haspopup": "dialog",
+    "aria-invalid": invalidValue,
+    "aria-labelledby": label ? id + "-label" : undefined
+  }, ariaProps, {
+    ref: target,
+    id: id,
+    value: value,
+    format: formatStr,
+    placeholder: placeholder ? placeholder : formatStr,
     disabled: disabled,
+    onChange: handleInputChange,
+    readOnly: readOnly || !editable || loading,
+    plaintext: plaintext,
+    onKeyDown: handleInputKeyDown
+  })), /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {
+    loading: loading,
     caretAs: caretAs,
-    "aria-haspopup": "dialog"
-  }), renderDate())));
+    onClose: handleClean,
+    showCleanButton: showCleanButton
+  }))));
 });
 DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {