rsuite 5.70.3 → 5.72.0

package/esm/Calendar/TimeDropdown/utils/scrollToTime.js

@@ -0,0 +1,23 @@
+'use client';
+import getPosition from 'dom-lib/getPosition';
+import scrollTop from 'dom-lib/scrollTop';
+export function scrollToTime(time, row) {
+  if (!row) return;
+  var scrollToPosition = function scrollToPosition(container, value, type) {
+    var node = container.querySelector("[data-key=\"" + type + "-" + value + "\"]");
+    if (node) {
+      var position = getPosition(node, container);
+      if (position) {
+        scrollTop(container, position.top);
+      }
+    }
+  };
+  Object.entries(time).forEach(function (_ref) {
+    var type = _ref[0],
+      value = _ref[1];
+    var container = row.querySelector("[data-type=\"" + type + "\"]");
+    if (container) {
+      scrollToPosition(container, value, type);
+    }
+  });
+}

package/esm/Calendar/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useCalendarState';
+export * from './useCalendarDate';
+export { useCalendar } from './useCalendar';

package/esm/Calendar/hooks/index.js

@@ -0,0 +1,4 @@
+'use client';
+export * from "./useCalendarState.js";
+export * from "./useCalendarDate.js";
+export { useCalendar } from "./useCalendar.js";

package/esm/Calendar/hooks/useCalendar.d.ts

@@ -0,0 +1,2 @@
+import { CalendarContextValue } from '../CalendarProvider';
+export declare const useCalendar: () => CalendarContextValue;

package/esm/Calendar/hooks/useCalendar.js

@@ -0,0 +1,6 @@
+'use client';
+import { useContext } from 'react';
+import { CalendarContext } from "../CalendarProvider.js";
+export var useCalendar = function useCalendar() {
+  return useContext(CalendarContext);
+};

package/esm/Calendar/{useCalendarDate.d.ts → hooks/useCalendarDate.d.ts}

@@ -1,6 +1,5 @@
-declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
+export declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
     calendarDate: Date;
     setCalendarDate: (date: React.SetStateAction<Date> | undefined) => void;
     resetCalendarDate: (nextValue?: any) => void;
 };
-export default useCalendarDate;

package/esm/Calendar/{useCalendarDate.js → hooks/useCalendarDate.js}

@@ -1,10 +1,11 @@
 'use client';
 import { useState, useCallback, useRef } from 'react';
-import { useUpdateEffect } from "../internals/hooks/index.js";
-var useCalendarDate = function useCalendarDate(value, defaultDate) {
+import { useUpdateEffect } from "../../internals/hooks/index.js";
+import { startOfToday } from "../../internals/utils/date/index.js";
+export var useCalendarDate = function useCalendarDate(value, defaultDate) {
   var _ref;
   var valueRef = useRef(value);
-  var _useState = useState((_ref = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref !== void 0 ? _ref : new Date()),
+  var _useState = useState((_ref = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref !== void 0 ? _ref : startOfToday()),
     calendarDate = _useState[0],
     setValue = _useState[1];
   var setCalendarDate = useCallback(function (date) {
@@ -17,13 +18,13 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
     if (nextValue === void 0) {
       nextValue = value;
     }
-    setValue((_ref2 = (_nextValue = nextValue) !== null && _nextValue !== void 0 ? _nextValue : defaultDate) !== null && _ref2 !== void 0 ? _ref2 : new Date());
+    setValue((_ref2 = (_nextValue = nextValue) !== null && _nextValue !== void 0 ? _nextValue : defaultDate) !== null && _ref2 !== void 0 ? _ref2 : startOfToday());
   }, [defaultDate, value]);
   useUpdateEffect(function () {
     var _valueRef$current;
     if ((value === null || value === void 0 ? void 0 : value.valueOf()) !== ((_valueRef$current = valueRef.current) === null || _valueRef$current === void 0 ? void 0 : _valueRef$current.valueOf())) {
       var _ref3;
-      setCalendarDate((_ref3 = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref3 !== void 0 ? _ref3 : new Date());
+      setCalendarDate((_ref3 = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref3 !== void 0 ? _ref3 : startOfToday());
       valueRef.current = value;
     }
   }, [value, defaultDate]);
@@ -32,5 +33,4 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
     setCalendarDate: setCalendarDate,
     resetCalendarDate: resetCalendarDate
   };
-};
-export default useCalendarDate;
+};

package/esm/Calendar/hooks/useCalendarState.d.ts

@@ -0,0 +1,22 @@
+export declare enum CalendarState {
+    'TIME' = "TIME",
+    'MONTH' = "MONTH"
+}
+export interface CalendarStateProps {
+    defaultState?: CalendarState;
+    calendarDate: Date;
+    onMoveForward?: (date: Date) => void;
+    onMoveBackward?: (date: Date) => void;
+    onToggleTimeDropdown?: (toggle: boolean) => void;
+    onToggleMonthDropdown?: (toggle: boolean) => void;
+}
+export declare const useCalendarState: (props: CalendarStateProps) => {
+    calendarState: CalendarState | undefined;
+    handlers: {
+        onMoveForward: (...args: any[]) => any;
+        onMoveBackward: (...args: any[]) => any;
+        onToggleTimeDropdown: (...args: any[]) => any;
+        onToggleMonthDropdown: (...args: any[]) => any;
+    };
+    reset: () => void;
+};

package/esm/Calendar/hooks/useCalendarState.js

@@ -0,0 +1,56 @@
+'use client';
+import { useCallback, useMemo, useState } from 'react';
+import { addMonths } from "../../internals/utils/date/index.js";
+import { useEventCallback } from "../../internals/hooks/index.js";
+export var CalendarState = /*#__PURE__*/function (CalendarState) {
+  CalendarState["TIME"] = "TIME";
+  CalendarState["MONTH"] = "MONTH";
+  return CalendarState;
+}({});
+export var useCalendarState = function useCalendarState(props) {
+  var _useState = useState(props.defaultState),
+    calendarState = _useState[0],
+    setCalendarState = _useState[1];
+  var reset = useCallback(function () {
+    setCalendarState(undefined);
+  }, []);
+  var onMoveForward = useEventCallback(function () {
+    var _props$onMoveForward;
+    (_props$onMoveForward = props.onMoveForward) === null || _props$onMoveForward === void 0 ? void 0 : _props$onMoveForward.call(props, addMonths(props.calendarDate, 1));
+  });
+  var onMoveBackward = useEventCallback(function () {
+    var _props$onMoveBackward;
+    (_props$onMoveBackward = props.onMoveBackward) === null || _props$onMoveBackward === void 0 ? void 0 : _props$onMoveBackward.call(props, addMonths(props.calendarDate, -1));
+  });
+  var onToggleTimeDropdown = useEventCallback(function () {
+    var _props$onToggleTimeDr;
+    if (calendarState === CalendarState.TIME) {
+      reset();
+    } else {
+      setCalendarState(CalendarState.TIME);
+    }
+    (_props$onToggleTimeDr = props.onToggleTimeDropdown) === null || _props$onToggleTimeDr === void 0 ? void 0 : _props$onToggleTimeDr.call(props, calendarState !== CalendarState.TIME);
+  });
+  var onToggleMonthDropdown = useEventCallback(function () {
+    var _props$onToggleMonthD;
+    if (calendarState === CalendarState.MONTH) {
+      reset();
+    } else {
+      setCalendarState(CalendarState.MONTH);
+    }
+    (_props$onToggleMonthD = props.onToggleMonthDropdown) === null || _props$onToggleMonthD === void 0 ? void 0 : _props$onToggleMonthD.call(props, calendarState !== CalendarState.MONTH);
+  });
+  var handlers = useMemo(function () {
+    return {
+      onMoveForward: onMoveForward,
+      onMoveBackward: onMoveBackward,
+      onToggleTimeDropdown: onToggleTimeDropdown,
+      onToggleMonthDropdown: onToggleMonthDropdown
+    };
+  }, [onMoveBackward, onMoveForward, onToggleMonthDropdown, onToggleTimeDropdown]);
+  return {
+    calendarState: calendarState,
+    handlers: handlers,
+    reset: reset
+  };
+};

package/esm/Calendar/index.d.ts

@@ -1,8 +1,6 @@
 import Calendar from './Calendar';
 import CalendarContainer from './CalendarContainer';
-import { CalendarState } from './useCalendarState';
-import CalendarContext, { CalendarContextValue } from './CalendarContext';
-export { CalendarContainer, CalendarContext, CalendarState };
-export type { CalendarContextValue };
+import { CalendarState } from './hooks';
+export { CalendarContainer, CalendarState };
 export type { CalendarProps } from './Calendar';
 export default Calendar;

package/esm/Calendar/index.js

@@ -1,7 +1,6 @@
 'use client';
 import Calendar from "./Calendar.js";
 import CalendarContainer from "./CalendarContainer.js";
-import { CalendarState } from "./useCalendarState.js";
-import CalendarContext from "./CalendarContext.js";
-export { CalendarContainer, CalendarContext, CalendarState };
+import { CalendarState } from "./hooks/index.js";
+export { CalendarContainer, CalendarState };
 export default Calendar;

package/esm/Calendar/types.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { FixedSizeListProps } from '../internals/Windowing';
+/**
+ * Props for the MonthDropdown component.
+ */
+export interface MonthDropdownProps extends Partial<FixedSizeListProps> {
+    /**
+     * The HTML element or React component to render as the root element of the MonthDropdown.
+     */
+    as?: React.ElementType;
+    /**
+     * The HTML element or React component to render as each item in the MonthDropdown.
+     */
+    itemAs?: React.ElementType;
+    /**
+     * The CSS class name to apply to each item in the MonthDropdown.
+     */
+    itemClassName?: string;
+}

package/esm/Calendar/types.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/Calendar/{utils.js → utils/getAriaLabel.js}

@@ -1,5 +1,5 @@
 'use client';
-import { format as formatDate } from "../internals/utils/date/index.js";
+import { format as formatDate } from "../../internals/utils/date/index.js";
 
 /**
  * Get aria-label for the date.

package/esm/Calendar/utils/index.d.ts

@@ -0,0 +1 @@
+export { getAriaLabel } from './getAriaLabel';

package/esm/Calendar/utils/index.js

@@ -0,0 +1,2 @@
+'use client';
+export { getAriaLabel } from "./getAriaLabel.js";

package/esm/CustomProvider/CustomProvider.d.ts

@@ -112,6 +112,7 @@ export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>>
     toastContainer?: HTMLElement | (() => HTMLElement | null) | null;
 }
 declare const CustomContext: React.Context<CustomProviderProps<{
+    code?: string | undefined;
     common?: {
         loading: string;
         emptyMessage: string;
@@ -144,11 +145,16 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         ok: string;
         today: string;
         yesterday: string;
+        now: string;
         hours: string;
         minutes: string;
         seconds: string;
-        formattedMonthPattern: string;
+        formattedMonthPattern: string; /**
+         * The locale object that contains the language and formatting rules for the date.
+         */
         formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     DatePicker?: {
@@ -162,11 +168,16 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         ok: string;
         today: string;
         yesterday: string;
+        now: string;
         hours: string;
         minutes: string;
         seconds: string;
-        formattedMonthPattern: string;
+        formattedMonthPattern: string; /**
+         * The locale object that contains the language and formatting rules for the date.
+         */
         formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     DateRangePicker?: {
@@ -181,11 +192,16 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         ok: string;
         today: string;
         yesterday: string;
+        now: string;
         hours: string;
         minutes: string;
         seconds: string;
-        formattedMonthPattern: string;
+        formattedMonthPattern: string; /**
+         * The locale object that contains the language and formatting rules for the date.
+         */
         formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     Picker?: {

package/esm/DateInput/DateField.js

@@ -13,7 +13,7 @@ export var patternMap = {
   h: 'hour',
   m: 'minute',
   s: 'second',
-  a: 'meridian'
+  a: 'meridiem'
 };
 export var DateField = /*#__PURE__*/function (_Object) {
   function DateField(format, value) {
@@ -183,7 +183,7 @@ export var useDateField = function useDateField(format, localize, date) {
       // Invalid Date. If the type is day and the value is 0, it is considered an invalid date.
       return new Date('');
     }
-    if (type === 'meridian' && typeof hour === 'number') {
+    if (type === 'meridiem' && typeof hour === 'number') {
       var newHour = hour > 12 ? hour - 12 : hour + 12;
       type = 'hour';
       value = newHour;

package/esm/DateInput/DateInput.js

@@ -20,8 +20,11 @@ import useSelectedState from "./hooks/useSelectedState.js";
  * @see https://rsuitejs.com/components/date-input/
  */
 var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useCustom = useCustom('Calendar'),
+    locale = _useCustom.locale,
+    parseDate = _useCustom.parseDate;
   var _props$format = props.format,
-    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    formatStr = _props$format === void 0 ? locale.shortDateFormat : _props$format,
     valueProp = props.value,
     defaultValue = props.defaultValue,
     placeholder = props.placeholder,
@@ -35,9 +38,6 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useSelectedState = useSelectedState(),
     selectedState = _useSelectedState.selectedState,
     setSelectedState = _useSelectedState.setSelectedState;
-  var _useCustom = useCustom('Calendar'),
-    locale = _useCustom.locale,
-    parseDate = _useCustom.parseDate;
   var dateLocale = locale.dateLocale;
   var _useControlled = useControlled(valueProp, defaultValue),
     value = _useControlled[0],
@@ -70,11 +70,17 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dateString: dateString
     };
   }, [dateField, dateString, formatStr, dateLocale]);
+  var setSelectionRange = useInputSelection(inputRef);
   var handleChange = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
     setValue(value);
   });
-  var setSelectionRange = useInputSelection(inputRef);
+  var handleClear = useEventCallback(function (event) {
+    handleChange(null, event);
+    setNewDate(null);
+    setSelectionRange(0, 0);
+    reset();
+  });
   var onSegmentChange = useEventCallback(function (event, nextDirection) {
     var input = event.target;
     var key = event.key;
@@ -142,7 +148,12 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var onSegmentValueRemove = useEventCallback(function (event) {
     var input = event.target;
-    if (selectedState.selectedPattern) {
+    var value = input.value;
+
+    // If the text is all selected, clear the value
+    if (input.selectionStart === 0 && value && input.selectionEnd === value.length) {
+      handleClear(event);
+    } else if (selectedState.selectedPattern) {
       var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
         input: input,
         valueOffset: null

package/esm/DateInput/hooks/useDateInputState.js

@@ -64,7 +64,7 @@ export function useDateInputState(_ref) {
         value = hour >= 12 ? hour - 12 : hour + 12;
         break;
     }
-    if (actionName && value) {
+    if (actionName && typeof value === 'number') {
       dispatch({
         type: actionName,
         value: value

package/esm/DatePicker/DatePicker.d.ts

@@ -3,7 +3,7 @@ import { RangeType } from './Toolbar';
 import type { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../internals/types';
 import type { DatePickerLocale } from '../locales';
 import type { DeprecatedProps } from './types';
-import type { MonthDropdownProps } from '../Calendar/CalendarContext';
+import type { MonthDropdownProps } from '../Calendar/types';
 export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, DeprecatedProps {
     /**
      * Custom caret component
@@ -75,9 +75,13 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      */
     showWeekNumbers?: boolean;
     /**
-     * Meridian format for 12-hour time
+     * @deprecated Use `showMeridiem` instead
      */
     showMeridian?: boolean;
+    /**
+     * Meridiem format for 12-hour time
+     */
+    showMeridiem?: boolean;
     /**
      * The props for the Month Dropdown component.
      */
@@ -101,15 +105,15 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      */
     shouldDisableSecond?: (second: number, date: Date) => boolean;
     /**
-     * Hidden hours on the time view
+     * Hide specific hour options
      */
     hideHours?: (hour: number, date: Date) => boolean;
     /**
-     * Hidden minutes on the time view
+     * Hide specific minute options
      */
     hideMinutes?: (minute: number, date: Date) => boolean;
     /**
-     * Hidden seconds on the time view
+     * Hide specific second options
      */
     hideSeconds?: (second: number, date: Date) => boolean;
     /**

package/esm/DatePicker/DatePicker.js

@@ -3,15 +3,15 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject, _templateObject2;
-var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "caretAs", "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", "monthDropdownProps", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
+var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "caretAs", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showMeridiem", "showWeekNumbers", "style", "size", "monthDropdownProps", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import mapValues from 'lodash/mapValues';
 import pick from 'lodash/pick';
 import IconCalendar from '@rsuite/icons/legacy/Calendar';
-import IconClockO from '@rsuite/icons/legacy/ClockO';
+import TimeIcon from '@rsuite/icons/Time';
 import CalendarContainer from "../Calendar/CalendarContainer.js";
-import useCalendarDate from "../Calendar/useCalendarDate.js";
+import { useCalendarDate } from "../Calendar/hooks/index.js";
 import Toolbar from "./Toolbar.js";
 import Stack from "../Stack/index.js";
 import PredefinedRanges from "./PredefinedRanges.js";
@@ -23,10 +23,11 @@ import useCustomizedInput from "./hooks/useCustomizedInput.js";
 import { isEveryDateInMonth } from "../Calendar/MonthDropdown.js";
 import { mergeRefs, partitionHTMLProps, createChainedFunction } from "../internals/utils/index.js";
 import { useClassNames, useControlled, useCustom, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
-import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, isValid, copyTime, disableTime, calendarOnlyProps } from "../internals/utils/date/index.js";
+import { isValid, copyTime, disableTime, DateMode, useDateMode, calendarOnlyProps } from "../internals/utils/date/index.js";
 import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { OverlayCloseCause } from "../internals/Overlay/OverlayTrigger.js";
 import { splitRanges, deprecatedPropTypes, getRestProps } from "./utils.js";
+import { startOfToday } from "../internals/utils/date/index.js";
 /**
  * A date picker allows users to select a date from a calendar.
  *
@@ -49,8 +50,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled = props.disabled,
     readOnly = props.readOnly,
     plaintext = props.plaintext,
-    _props$format = props.format,
-    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    format = props.format,
     idProp = props.id,
     isoWeek = props.isoWeek,
     _props$weekStart = props.weekStart,
@@ -72,7 +72,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
     ranges = props.ranges,
     valueProp = props.value,
-    showMeridian = props.showMeridian,
+    DEPRECATED_showMeridian = props.showMeridian,
+    _props$showMeridiem = props.showMeridiem,
+    showMeridiem = _props$showMeridiem === void 0 ? DEPRECATED_showMeridian : _props$showMeridiem,
     showWeekNumbers = props.showWeekNumbers,
     style = props.style,
     size = props.size,
@@ -108,6 +110,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     overlay = _usePickerRef.overlay;
   var _useCustom = useCustom('DatePicker', overrideLocale),
     locale = _useCustom.locale;
+  var formatStr = format || locale.shortDateFormat || 'yyyy-MM-dd';
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -124,10 +127,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setMonthView = _useMonthView.setMonthView,
     monthView = _useMonthView.monthView,
     toggleMonthView = _useMonthView.toggleMonthView;
+  var _useDateMode = useDateMode(formatStr),
+    mode = _useDateMode.mode;
 
   // Show only the calendar month panel. formatStr = 'yyyy-MM'
-  var onlyShowMonth = shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr);
-  var showMonth = onlyShowMonth || monthView;
+  var showMonth = mode === DateMode.Month || monthView;
   var _useFocus = useFocus({
       target: target,
       showMonth: showMonth,
@@ -173,7 +177,7 @@ var DatePicker = /*#__PURE__*/React.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 (shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr)) {
+    if (mode === DateMode.Month) {
       return isMonthDisabled(selectedDate);
     }
     return isDatetimeDisabled(selectedDate);
@@ -228,22 +232,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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 = useEventCallback(function () {
-    var hours = getHours(calendarDate);
-    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    var nextDate = setHours(calendarDate, nextHours);
-    handleChangeTime(nextDate);
-  });
   var updateValue = function updateValue(event, date, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
     var nextValue = typeof date !== 'undefined' ? date : calendarDate;
-    setCalendarDate(nextValue || new Date());
+    setCalendarDate(nextValue || startOfToday());
     setValue(nextValue);
     if (nextValue !== value) {
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
@@ -303,16 +297,15 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Callback after the date is selected.
    */
-  var handleSelect = useEventCallback(function (nextValue, event, updatableValue) {
+  var handleCalendarSelect = useEventCallback(function (date, event, updatableValue) {
     if (updatableValue === void 0) {
       updatableValue = true;
     }
-    setCalendarDate(
-    // Determine whether the current value contains time, if not, use calendarDate.
-    shouldRenderTime(formatStr) ? nextValue : copyTime({
+    var nextValue = copyTime({
       from: calendarDate,
-      to: nextValue
-    }));
+      to: date
+    });
+    setCalendarDate(nextValue);
     handleDateChange(nextValue);
     if (oneTap && updatableValue) {
       updateValue(event, nextValue);
@@ -327,7 +320,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
     focusSelectedDate();
-    if (oneTap && onlyShowMonth) {
+    if (oneTap && mode === DateMode.Month) {
       updateValue(event, nextPageDate);
       focusInput();
     }
@@ -338,7 +331,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
   var handleInputChange = useEventCallback(function (value, event) {
     if (!isErrorValue(value)) {
-      handleSelect(value, event);
+      handleCalendarSelect(value, event);
     }
     updateValue(event, value, false);
   });
@@ -403,7 +396,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       targetId: id,
       locale: locale,
       showWeekNumbers: showWeekNumbers,
-      showMeridian: showMeridian,
+      showMeridiem: showMeridiem,
       disabledDate: isDateDisabled,
       disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,
       disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,
@@ -418,12 +411,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
       onMoveBackward: handleMoveBackward,
-      onSelect: handleSelect,
+      onSelect: handleCalendarSelect,
       onToggleMonthDropdown: toggleMonthView,
       onToggleTimeDropdown: onToggleTimeDropdown,
       onChangeMonth: handleChangeMonth,
-      onChangeTime: handleChangeTime,
-      onToggleMeridian: handleToggleMeridian
+      onChangeTime: handleChangeTime
     })), /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
       ranges: bottomRanges,
@@ -449,8 +441,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (caretAsProp === null) {
       return null;
     }
-    return caretAsProp || (shouldOnlyRenderTime(formatStr) ? IconClockO : IconCalendar);
-  }, [caretAsProp, formatStr]);
+    return caretAsProp || (mode === DateMode.Time ? TimeIcon : IconCalendar);
+  }, [caretAsProp, mode]);
   var handleTriggerClose = useEventCallback(function (cause) {
     var _props$onClose;
     // Unless overlay is closing on user clicking "OK" button,
@@ -555,7 +547,7 @@ DatePicker.propTypes = _extends({}, pickerPropTypes, deprecatedPropTypes, {
   onToggleTimeDropdown: PropTypes.func,
   oneTap: PropTypes.bool,
   ranges: PropTypes.array,
-  showMeridian: PropTypes.bool,
+  showMeridiem: PropTypes.bool,
   showWeekNumbers: PropTypes.bool,
   value: PropTypes.instanceOf(Date)
 });

package/esm/DatePicker/hooks/useFocus.js

@@ -3,7 +3,7 @@ import delay from 'lodash/delay';
 import addMonths from 'date-fns/addMonths';
 import addDays from 'date-fns/addDays';
 import { useEventCallback, useCustom } from "../../internals/hooks/index.js";
-import { getAriaLabel } from "../../Calendar/utils.js";
+import { getAriaLabel } from "../../Calendar/utils/index.js";
 import { onMenuKeyDown } from "../../internals/Picker/utils.js";
 function useFocus(props) {
   var target = props.target,

package/esm/DatePicker/utils.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import { deprecatePropTypeNew } from "../internals/propTypes/index.js";
 import { omitTriggerPropKeys } from "../internals/Picker/index.js";
-import { subDays, startOfDay, endOfDay, calendarOnlyProps } from "../internals/utils/date/index.js";
+import { subDays, startOfDay, endOfDay, calendarOnlyProps, startOfToday } from "../internals/utils/date/index.js";
 export function getDefaultRanges(value) {
-  var today = new Date();
+  var today = startOfToday();
 
   /**
    * If it is an array type, it returns the default shortcut key suitable for DateRangePicker Toolbar,