rsuite 5.48.1 → 5.50.0

package/esm/DatePicker/DatePicker.js

@@ -1,13 +1,14 @@
 'use client';
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+var _templateObject;
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import mapValues from 'lodash/mapValues';
 import pick from 'lodash/pick';
-import omit from 'lodash/omit';
 import delay from 'lodash/delay';
-import debounce from 'lodash/debounce';
+import omit from 'lodash/omit';
 import IconCalendar from '@rsuite/icons/legacy/Calendar';
 import IconClockO from '@rsuite/icons/legacy/ClockO';
 import CalendarContainer from '../Calendar/CalendarContainer';
@@ -16,18 +17,23 @@ import { isEveryDateInMonth } from '../Calendar/MonthDropdown';
 import Toolbar from './Toolbar';
 import Stack from '../Stack';
 import PredefinedRanges from './PredefinedRanges';
-import { composeFunctions, createChainedFunction, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
-import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, addMonths, addDays, setMinutes, getMinutes, setSeconds, getSeconds, isValid, format, getDateMask, disabledTime, isMatch, calendarOnlyProps } from '../utils/dateUtils';
-import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent, onMenuKeyDown } from '../Picker';
+import { createChainedFunction, mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps } from '../utils';
+import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, addMonths, addDays, isValid, disabledTime, copyTime, calendarOnlyProps } from '../utils/dateUtils';
+import { PickerOverlay, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, onMenuKeyDown } from '../Picker';
+import usePickerRef from '../Picker/usePickerRef';
+import DateInput from '../DateInput';
+import InputGroup from '../InputGroup';
 import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
 import { deprecatePropTypeNew } from '../utils/deprecatePropType';
 import { getAriaLabel } from '../Calendar/utils';
+import { splitRanges } from './utils';
 /**
  * A date picker allows users to select a date from a calendar.
  *
  * @see https://rsuitejs.com/components/date-picker
  */
 var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _merge;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     className = props.className,
@@ -40,13 +46,18 @@ var DatePicker = /*#__PURE__*/React.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,
@@ -61,7 +72,7 @@ var DatePicker = /*#__PURE__*/React.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,
@@ -71,7 +82,6 @@ var DatePicker = /*#__PURE__*/React.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,
@@ -86,11 +96,16 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "menuStyle", "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 = _objectWithoutPropertiesLoose(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 = useUniqueId(classPrefix + "-", idProp);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay;
   var _useCustom = useCustom('DatePicker', overrideLocale),
     locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate,
-    parseDate = _useCustom.parseDate;
+    formatDate = _useCustom.formatDate;
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -106,71 +121,72 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
   var onlyShowMonth = shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr);
   var showMonth = onlyShowMonth || showMonthDropdown;
-  var _useState2 = useState(),
-    inputState = _useState2[0],
-    setInputState = _useState2[1];
-  var _useState3 = useState(false),
-    active = _useState3[0],
-    setActive = _useState3[1];
-  var triggerRef = useRef(null);
-  var rootRef = useRef(null);
-  var targetRef = useRef(null);
-  var overlayRef = useRef(null);
-  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 (!isValid(value)) {
+      return true;
+    } else if (value && isDateDisabled(value)) {
+      return true;
+    }
+    return false;
+  };
 
   /**
    * Switch to the callback triggered after the next month.
    */
-  var handleMoveForward = useCallback(function (nextPageDate) {
+  var handleMoveForward = 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 = useCallback(function (nextPageDate) {
+  var handleMoveBackward = 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 = useCallback(function (nextValue, event) {
+  var handleDateChange = 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 = useCallback(function (nextPageTime) {
+  var handleChangeTime = useEventCallback(function (nextPageTime) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
-  }, [handleDateChange, setCalendarDate]);
-  var handleClose = 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 = 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 = useCallback(function () {
+  var handleToggleMeridian = useEventCallback(function () {
     var hours = getHours(calendarDate);
     var nextHours = hours >= 12 ? hours - 12 : hours + 12;
     var nextDate = setHours(calendarDate, nextHours);
     handleChangeTime(nextDate);
-  }, [calendarDate, handleChangeTime]);
-  var updateValue = useCallback(function (event, nextPageDate, closeOverlay) {
+  });
+  var updateValue = function updateValue(event, nextPageDate, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
@@ -185,91 +201,80 @@ var DatePicker = /*#__PURE__*/React.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 = useCallback(function (range, closeOverlay, event) {
+  var handleShortcutPageDate = 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 = 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 = useCallback(function (date) {
+  var checkFocusable = function checkFocusable(date) {
     var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;
     var ariaLabel = 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 = useCallback(function () {
+  var focusSelectedDate = function focusSelectedDate() {
     delay(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 = useCallback(function () {
+  var focusTargetInput = useEventCallback(function () {
     delay(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 = useCallback(function (event) {
+  var handleOK = 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 = useCallback(function (event) {
+
+  var handleClean = useEventCallback(function (event) {
     updateValue(event, null);
     resetCalendarDate(null);
-  }, [resetCalendarDate, updateValue]);
-  var handlePickerToggleKeyDown = 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 = useCallback(function (event) {
+    onClean === null || onClean === void 0 ? void 0 : onClean(event);
+    event.stopPropagation();
+  });
+  var handlePickerOverlayKeyDown = useEventCallback(function (event) {
     var delta = 0;
     var step = showMonth ? 6 : 7;
     var changeDateFunc = showMonth ? addMonths : addDays;
@@ -295,135 +300,91 @@ var DatePicker = /*#__PURE__*/React.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 = useCallback(function (toggle) {
+  var handleToggleMonthDropdown = useEventCallback(function (toggle) {
     onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);
     setShowMonthDropdown(toggle);
-  }, [onToggleMonthDropdown]);
-
-  /**
-   * Handle keyboard events.
-   */
-  var onPickerKeyDown = useToggleKeyDownEvent(_extends({
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    active: active,
-    onExit: handleClean,
-    onKeyDown: handlePickerToggleKeyDown
-  }, rest));
+  });
+  var handleClick = useEventCallback(function () {
+    if (editable) {
+      return;
+    }
+    focusSelectedDate();
+  });
 
   /**
    * Callback after the date is selected.
    */
-  var handleSelect = useCallback(function (nextValue, event, updatableValue) {
+  var handleSelect = useEventCallback(function (nextValue, event, updatableValue) {
     if (updatableValue === void 0) {
       updatableValue = true;
     }
     setCalendarDate(
     // Determine whether the current value contains time, if not, use calendarDate.
-    shouldRenderTime(formatStr) ? nextValue : composeFunctions(function (d) {
-      return setHours(d, getHours(calendarDate));
-    }, function (d) {
-      return setMinutes(d, getMinutes(calendarDate));
-    }, function (d) {
-      return setSeconds(d, getSeconds(calendarDate));
-    })(nextValue));
+    shouldRenderTime(formatStr) ? nextValue : 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 = useCallback(function (nextPageDate, event) {
+  var handleChangeMonth = useEventCallback(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
     focusSelectedDate();
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
+      focusTargetInput();
     }
-  }, [focusSelectedDate, handleDateChange, oneTap, onlyShowMonth, setCalendarDate, updateValue]);
-  var isDateDisabled = 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 = useCallback(function (value, event) {
-    setInputState('Typing');
-
-    // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
-    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
-    if (!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 (shouldOnlyRenderTime(formatStr)) {
-      date = new Date(format(new Date(), 'yyyy-MM-dd') + " " + value);
-    }
-    if (!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 = useCallback(function (event) {
-    if (inputState === 'Typing') {
-      updateValue(event, calendarDate);
-    }
-    setInputState('Initial');
-  }, [inputState, calendarDate, updateValue]);
-  var handleInputBackspace = useCallback(function (event) {
-    var value = event.target.value;
-
-    // When the input box is empty, the date is cleared.
-    if (value === '') {
-      handleClean(event);
+  var handleInputChange = useEventCallback(function (value, event) {
+    if (!isErrorValue(value)) {
+      handleSelect(value, event);
     }
-  }, [handleClean]);
-  var handleEntered = useCallback(function () {
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    setActive(true);
-  }, [onOpen]);
-  var handleExited = useCallback(function () {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-    setActive(false);
-  }, [onClose]);
+    updateValue(event, value, false);
+  });
+  var handleInputKeyDown = useEventCallback(function (event) {
+    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 (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 = 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 = disabledTime(props, date);
     return allowDate || allowTime;
-  }, [DEPRECATED_disabledDate, props]);
+  };
 
   /**
    * Whether "OK" button is disabled
@@ -431,12 +392,12 @@ var DatePicker = /*#__PURE__*/React.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 = useCallback(function (selectedDate) {
+  var isOKButtonDisabled = function isOKButtonDisabled(selectedDate) {
     if (shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr)) {
       return isEveryDateInMonth(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
     }
     return disabledToolbarHandle(selectedDate);
-  }, [disabledToolbarHandle, formatStr]);
+  };
   var calendarProps = useMemo(function () {
     return mapValues(pick(props, calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
@@ -445,53 +406,26 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       };
     });
   }, [props]);
-  var calendar = /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, 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 _splitRanges = 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 classes = merge(menuClassName, className);
     var styles = _extends({}, menuStyle, {
       left: left,
       top: top
     });
     return /*#__PURE__*/React.createElement(PickerOverlay, {
       role: "dialog",
+      "aria-labelledby": label ? id + "-label" : undefined,
+      tabIndex: -1,
       className: classes,
-      ref: mergeRefs(overlayRef, speakerRef),
+      ref: mergeRefs(overlay, speakerRef),
       style: styles,
-      target: triggerRef,
+      target: trigger,
       onKeyDown: handlePickerOverlayKeyDown
     }, /*#__PURE__*/React.createElement(Stack, {
       alignItems: "flex-start"
@@ -504,7 +438,29 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       locale: locale,
       disabledShortcut: disabledToolbarHandle,
       onShortcutClick: handleShortcutPageDate
-    }), /*#__PURE__*/React.createElement(React.Fragment, null, calendar, /*#__PURE__*/React.createElement(Toolbar, {
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, 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.createElement(Toolbar, {
       locale: locale,
       ranges: bottomRanges,
       calendarDate: calendarDate,
@@ -515,7 +471,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hideOkBtn: oneTap
     }))));
   };
-  var hasValue = !!value;
+  var hasValue = isValid(value);
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
       classPrefix: classPrefix,
       name: 'date',
@@ -525,62 +481,73 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })),
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
-  var renderDate = 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 = useMemo(function () {
+    if (caretAsProp === null) {
+      return null;
+    }
     return caretAsProp || (shouldOnlyRenderTime(formatStr) ? IconClockO : IconCalendar);
   }, [caretAsProp, formatStr]);
-  var handleTriggerClose = useCallback(function (cause) {
+  var handleTriggerClose = useEventCallback(function (cause) {
     // Unless overlay is closing on user clicking "OK" button,
     // reset the selected date on calendar panel
     if (cause !== OverlayCloseCause.ImperativeHandle) {
       resetCalendarDate();
     }
     setShowMonthDropdown(false);
-  }, [resetCalendarDate]);
+  });
+  var showCleanButton = cleanable && hasValue && !readOnly;
+  var _partitionHTMLProps = partitionHTMLProps(restProps, {
+      htmlProps: [],
+      includeAria: true
+    }),
+    ariaProps = _partitionHTMLProps[0],
+    rest = _partitionHTMLProps[1];
+  var invalidValue = value && isErrorValue(value);
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onClose: handleTriggerClose,
-    onEntered: createChainedFunction(handleEntered, onEntered),
-    onExited: createChainedFunction(handleExited, onExited),
+    onEntered: createChainedFunction(onOpen, onEntered),
+    onExited: createChainedFunction(onClose, onExited),
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/React.createElement(Component, {
-    className: merge(className, classes),
+    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
     style: style,
-    ref: rootRef
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, 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: getDateMask(formatStr),
-    onInputChange: handleInputChange,
-    onInputBlur: handleInputPressEnd,
-    onInputPressEnter: handleInputPressEnd,
-    onInputBackspace: debounce(handleInputBackspace, 10),
-    onKeyDown: onPickerKeyDown,
-    onClean: createChainedFunction(handleClean, onClean),
-    cleanable: cleanable && !disabled,
-    hasValue: hasValue,
-    active: active,
-    placement: placement,
+    ref: root
+  }, plaintext ? /*#__PURE__*/React.createElement(DateInput, {
+    value: value,
+    format: formatStr,
+    plaintext: plaintext
+  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
+    inside: true,
+    size: size,
+    onClick: handleClick
+  }), /*#__PURE__*/React.createElement(PickerLabel, {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["label"]))),
+    id: id + "-label"
+  }, label), /*#__PURE__*/React.createElement(DateInput, _extends({
+    "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.createElement(PickerIndicator, {
+    loading: loading,
     caretAs: caretAs,
-    "aria-haspopup": "dialog"
-  }), renderDate())));
+    onClose: handleClean,
+    showCleanButton: showCleanButton
+  }))));
 });
 DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = _extends({}, pickerPropTypes, {