rsuite 5.71.0 → 5.73.0

package/esm/Calendar/Calendar.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import CalendarContainer from './CalendarContainer';
 import type { CalendarLocale } from '../locales';
 import type { RsRefForwardingComponent, WithAsProps } from '../internals/types';
-import type { MonthDropdownProps } from './CalendarContext';
+import type { MonthDropdownProps } from './types';
 export interface CalendarProps extends WithAsProps {
     /**
      * Controlled value

package/esm/Calendar/Calendar.js

@@ -2,14 +2,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "weekStart", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value", "cellClassName"];
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import isSameMonth from 'date-fns/isSameMonth';
+import { isSameMonth, startOfDay } from "../internals/utils/date/index.js";
 import CalendarContainer from "./CalendarContainer.js";
-import useCalendarDate from "./useCalendarDate.js";
 import Button from "../Button/index.js";
 import { FormattedDate } from "../CustomProvider/index.js";
-import { useClassNames, useCustom } from "../internals/hooks/index.js";
+import { useClassNames, useCustom, useEventCallback } from "../internals/hooks/index.js";
+import { useCalendarDate } from "./hooks/index.js";
 /**
  * The Calendar component is used to select dates.
  * @see https://rsuitejs.com/components/calendar
@@ -23,7 +23,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classPrefix = _props$classPrefix === void 0 ? 'calendar' : _props$classPrefix,
     compact = props.compact,
     _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? startOfDay(new Date()) : _props$defaultValue,
     isoWeek = props.isoWeek,
     _props$weekStart = props.weekStart,
     weekStart = _props$weekStart === void 0 ? 0 : _props$weekStart,
@@ -40,34 +40,37 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setCalendarDate = _useCalendarDate.setCalendarDate;
   var _useCustom = useCustom('Calendar', overrideLocale),
     locale = _useCustom.locale;
-  var handleChange = useCallback(function (nextValue) {
+  var handleChange = useEventCallback(function (nextValue) {
     setCalendarDate(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
     if (!isSameMonth(nextValue, calendarDate)) {
       onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
     }
-  }, [setCalendarDate, onChange, calendarDate, onMonthChange]);
-  var handleClickToday = useCallback(function () {
+  });
+  var handleClickToday = useEventCallback(function () {
     handleChange(new Date());
-  }, [handleChange]);
-  var handleSelect = useCallback(function (nextValue) {
+  });
+  var handleSelect = useEventCallback(function (nextValue) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
     handleChange(nextValue);
-  }, [handleChange, onSelect]);
+  });
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var renderToolbar = useCallback(function () {
+  var renderToolbar = function renderToolbar() {
     return /*#__PURE__*/React.createElement(Button, {
       className: prefix('btn-today'),
       size: "sm",
       onClick: handleClickToday
     }, locale.today || 'Today');
-  }, [handleClickToday, locale.today, prefix]);
-  var customRenderCell = useCallback(function (date) {
-    return renderCell === null || renderCell === void 0 ? void 0 : renderCell(date);
-  }, [renderCell]);
+  };
+  var renderTitle = function renderTitle(date) {
+    return /*#__PURE__*/React.createElement(FormattedDate, {
+      date: date,
+      formatStr: locale.formattedMonthPattern || 'MMMM  yyyy'
+    });
+  };
   var classes = merge(className, withClassPrefix('panel', {
     bordered: bordered,
     compact: compact
@@ -82,14 +85,9 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     calendarDate: calendarDate,
     limitEndYear: 1000,
     locale: locale,
-    renderTitle: function renderTitle(date) {
-      return /*#__PURE__*/React.createElement(FormattedDate, {
-        date: date,
-        formatStr: locale.formattedMonthPattern || 'MMMM  yyyy'
-      });
-    },
+    renderTitle: renderTitle,
     renderToolbar: renderToolbar,
-    renderCell: customRenderCell,
+    renderCell: renderCell,
     cellClassName: cellClassName,
     onMoveForward: handleChange,
     onMoveBackward: handleChange,

package/esm/Calendar/CalendarBody.js

@@ -5,8 +5,8 @@ var _excluded = ["as", "className", "classPrefix"];
 import React from 'react';
 import { getWeekStartDates, setDate } from "../internals/utils/date/index.js";
 import { useClassNames, useCustom } from "../internals/hooks/index.js";
-import Table from "./Table.js";
-import { useCalendarContext } from "./CalendarContext.js";
+import Grid from "./Grid/index.js";
+import { useCalendar } from "./hooks/index.js";
 var CalendarBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -14,12 +14,12 @@ var CalendarBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'calendar-body' : _props$classPrefix,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useCalendarContext = useCalendarContext(),
-    _useCalendarContext$d = _useCalendarContext.date,
-    date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-    isoWeek = _useCalendarContext.isoWeek,
-    overrideLocale = _useCalendarContext.locale,
-    weekStart = _useCalendarContext.weekStart;
+  var _useCalendar = useCalendar(),
+    _useCalendar$date = _useCalendar.date,
+    date = _useCalendar$date === void 0 ? new Date() : _useCalendar$date,
+    isoWeek = _useCalendar.isoWeek,
+    overrideLocale = _useCalendar.locale,
+    weekStart = _useCalendar.weekStart;
   var _useCustom = useCustom('Calendar', overrideLocale),
     locale = _useCustom.locale,
     formatDate = _useCustom.formatDate;
@@ -31,7 +31,7 @@ var CalendarBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
-  }), /*#__PURE__*/React.createElement(Table, {
+  }), /*#__PURE__*/React.createElement(Grid, {
     rows: getWeekStartDates(thisMonthDate, {
       isoWeek: isoWeek,
       weekStart: weekStart,

package/esm/Calendar/CalendarContainer.d.ts

@@ -2,8 +2,8 @@ import React, { HTMLAttributes } from 'react';
 import { CalendarHeaderProps } from './CalendarHeader';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 import { CalendarLocale } from '../locales';
-import { MonthDropdownProps } from './CalendarContext';
-import { CalendarState } from './useCalendarState';
+import { CalendarState } from './hooks';
+import { MonthDropdownProps } from './types';
 export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange' | 'onMouseMove'>, CalendarHeaderProps {
     /**
      * The panel render based on date range
@@ -21,6 +21,10 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
      * Whether to show week numbers
      */
     showWeekNumbers?: boolean;
+    /**
+     * Whether to show meridiem
+     */
+    showMeridiem?: boolean;
     /**
      * Whether inline mode
      */
@@ -71,6 +75,10 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
      * @see https://en.wikipedia.org/wiki/ISO_week_date
      */
     isoWeek?: boolean;
+    /**
+     * The index of the calendar
+     */
+    index?: number;
     /**
      * the index of the first day of the week (0 - Sunday)
      * If `isoWeek` is `true`, the value of `weekStart` is ignored.

package/esm/Calendar/CalendarContainer.js

@@ -1,18 +1,18 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "className", "classPrefix", "calendarDate", "dateRange", "disabledBackward", "defaultState", "disabledForward", "format", "hoverRangeValue", "inline", "isoWeek", "weekStart", "targetId", "limitEndYear", "limitStartYear", "locale", "monthDropdownProps", "showMeridian", "showWeekNumbers", "cellClassName", "disabledDate", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "renderCell", "renderCellOnPicker", "renderTitle", "renderToolbar"];
+var _excluded = ["as", "className", "classPrefix", "calendarDate", "dateRange", "disabledBackward", "defaultState", "disabledForward", "format", "hoverRangeValue", "inline", "isoWeek", "weekStart", "targetId", "limitEndYear", "limitStartYear", "locale", "monthDropdownProps", "showMeridiem", "showWeekNumbers", "cellClassName", "disabledDate", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "renderCell", "renderCellOnPicker", "renderTitle", "renderToolbar"];
 import React, { useMemo } from 'react';
 import pick from 'lodash/pick';
-import MonthDropdown from "./MonthDropdown.js";
-import TimeDropdown from "./TimeDropdown.js";
+import MonthDropdown from "./MonthDropdown/index.js";
+import TimeDropdown from "./TimeDropdown/index.js";
 import CalendarBody from "./CalendarBody.js";
 import CalendarHeader from "./CalendarHeader.js";
 import { useClassNames, useEventCallback } from "../internals/hooks/index.js";
-import { disableTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, isSameMonth, calendarOnlyProps, omitHideDisabledProps, isValid } from "../internals/utils/date/index.js";
-import { CalendarProvider } from "./CalendarContext.js";
-import useCalendarState, { CalendarState } from "./useCalendarState.js";
-import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
+import { startOfToday, disableTime, isSameMonth, calendarOnlyProps, omitHideDisabledProps, DateMode, useDateMode, isValid } from "../internals/utils/date/index.js";
+import { CalendarProvider } from "./CalendarProvider.js";
+import { useCalendarState, CalendarState } from "./hooks/index.js";
+import ArrowUpIcon from '@rsuite/icons/ArrowUp';
 var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -36,7 +36,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     limitStartYear = props.limitStartYear,
     locale = props.locale,
     monthDropdownProps = props.monthDropdownProps,
-    showMeridian = props.showMeridian,
+    showMeridiem = props.showMeridiem,
     showWeekNumbers = props.showWeekNumbers,
     cellClassName = props.cellClassName,
     disabledDate = props.disabledDate,
@@ -46,7 +46,6 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMoveBackward = props.onMoveBackward,
     onMoveForward = props.onMoveForward,
     onSelect = props.onSelect,
-    onToggleMeridian = props.onToggleMeridian,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     renderCell = props.renderCell,
@@ -58,63 +57,42 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
-  var _useCalendarState = useCalendarState(defaultState),
-    calendarState = _useCalendarState.calendarState,
-    reset = _useCalendarState.reset,
-    openMonth = _useCalendarState.openMonth,
-    openTime = _useCalendarState.openTime;
   var calendarDate = useMemo(function () {
-    return isValid(calendarDateProp) ? calendarDateProp : new Date();
+    return isValid(calendarDateProp) ? calendarDateProp : startOfToday();
   }, [calendarDateProp]);
-  var isDateDisabled = useEventCallback(function (date) {
+  var _useCalendarState = useCalendarState({
+      defaultState: defaultState,
+      calendarDate: calendarDate,
+      onMoveForward: onMoveForward,
+      onMoveBackward: onMoveBackward,
+      onToggleTimeDropdown: onToggleTimeDropdown,
+      onToggleMonthDropdown: onToggleMonthDropdown
+    }),
+    calendarState = _useCalendarState.calendarState,
+    reset = _useCalendarState.reset,
+    handlers = _useCalendarState.handlers;
+  var isDateDisabled = function isDateDisabled(date) {
     var _disabledDate;
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
-  });
+  };
   var isTimeDisabled = function isTimeDisabled(date) {
     return disableTime(props, date);
   };
-  var handleMoveForward = useEventCallback(function () {
-    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(addMonths(calendarDate, 1));
-  });
-  var handleMoveBackward = useEventCallback(function () {
-    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(calendarDate, -1));
-  });
-
-  // It is displayed as the month to be selected.
-  var toggleMonthView = useEventCallback(function () {
-    if (calendarState === CalendarState.MONTH) {
-      reset();
-    } else {
-      openMonth();
-    }
-    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(calendarState !== CalendarState.MONTH);
-  });
-
-  // It is displayed as a time to be selected.
-  var toggleTimeView = useEventCallback(function () {
-    if (calendarState === CalendarState.TIME) {
-      reset();
-    } else {
-      openTime();
-    }
-    onToggleTimeDropdown === null || onToggleTimeDropdown === void 0 ? void 0 : onToggleTimeDropdown(calendarState !== CalendarState.TIME);
-  });
   var handleCloseDropdown = useEventCallback(function () {
     return reset();
   });
-  var renderDate = shouldRenderDate(format);
-  var renderTime = shouldRenderTime(format);
-  var renderMonth = shouldRenderMonth(format);
-  var onlyShowTime = renderTime && !renderDate && !renderMonth;
-  var onlyShowMonth = renderMonth && !renderDate && !renderTime;
-  var showTime = calendarState === CalendarState.TIME || onlyShowTime;
-  var showMonth = calendarState === CalendarState.MONTH || onlyShowMonth;
+  var _useDateMode = useDateMode(format),
+    mode = _useDateMode.mode,
+    has = _useDateMode.has;
+  var timeMode = calendarState === CalendarState.TIME || mode === DateMode.Time;
+  var monthMode = calendarState === CalendarState.MONTH || mode === DateMode.Month;
   var inSameThisMonthDate = function inSameThisMonthDate(date) {
     return isSameMonth(calendarDate, date);
   };
   var calendarClasses = merge(className, withClassPrefix({
-    'time-view': showTime,
-    'month-view': showMonth,
+    'time-view': timeMode,
+    'month-view': monthMode,
+    'only-time': mode === DateMode.Time,
     'show-week-numbers': showWeekNumbers
   }));
   var timeDropdownProps = pick(rest, calendarOnlyProps);
@@ -151,34 +129,28 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, omitHideDisabledProps(rest), {
     className: calendarClasses,
     ref: ref
-  }), /*#__PURE__*/React.createElement(CalendarHeader, {
-    showMonth: renderMonth,
-    showDate: renderDate,
-    showTime: renderTime,
-    showMeridian: showMeridian,
+  }), mode !== DateMode.Time && /*#__PURE__*/React.createElement(CalendarHeader, _extends({}, handlers, {
+    showMonth: has('month'),
+    showDate: has('day'),
+    showTime: has('time'),
     disabledTime: isTimeDisabled,
-    onMoveForward: handleMoveForward,
-    onMoveBackward: handleMoveBackward,
-    onToggleMonthDropdown: toggleMonthView,
-    onToggleTimeDropdown: toggleTimeView,
-    onToggleMeridian: onToggleMeridian,
     renderTitle: renderTitle,
     renderToolbar: renderToolbar,
     disabledBackward: disabledBackward,
     disabledForward: disabledForward
-  }), renderDate && /*#__PURE__*/React.createElement(CalendarBody, null), renderMonth && /*#__PURE__*/React.createElement(MonthDropdown, {
-    show: showMonth,
+  })), has('day') && /*#__PURE__*/React.createElement(CalendarBody, null), has('month') && /*#__PURE__*/React.createElement(MonthDropdown, {
+    show: monthMode,
     limitEndYear: limitEndYear,
     limitStartYear: limitStartYear,
     disabledMonth: isDateDisabled
-  }), renderTime && /*#__PURE__*/React.createElement(TimeDropdown, _extends({}, timeDropdownProps, {
-    show: showTime,
-    showMeridian: showMeridian
-  })), (showMonth || showTime) && renderDate && /*#__PURE__*/React.createElement("button", {
+  }), has('time') && /*#__PURE__*/React.createElement(TimeDropdown, _extends({}, timeDropdownProps, {
+    show: timeMode,
+    showMeridiem: showMeridiem
+  })), (monthMode || timeMode) && has('day') && /*#__PURE__*/React.createElement("button", {
     className: prefix('btn-close'),
     onClick: handleCloseDropdown,
-    "aria-label": "Collapse " + (showMonth ? 'month' : 'time') + " view"
-  }, /*#__PURE__*/React.createElement(AngleUpIcon, null))));
+    "aria-label": "Collapse " + (monthMode ? 'month' : 'time') + " view"
+  }, /*#__PURE__*/React.createElement(ArrowUpIcon, null))));
 });
 CalendarContainer.displayName = 'CalendarContainer';
 export default CalendarContainer;

package/esm/Calendar/CalendarHeader.d.ts

@@ -3,8 +3,6 @@ import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 export interface CalendarHeaderProps {
     disabledBackward?: boolean;
     disabledForward?: boolean;
-    showMeridian?: boolean;
-    onToggleMeridian?: (event: React.MouseEvent) => void;
     renderTitle?: (date: Date) => React.ReactNode;
     renderToolbar?: (date: Date) => React.ReactNode;
 }

package/esm/Calendar/CalendarHeader.js

@@ -1,16 +1,17 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "className", "classPrefix", "disabledBackward", "disabledForward", "showDate", "showMeridian", "showMonth", "showTime", "disabledTime", "onMoveBackward", "onMoveForward", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "renderTitle", "renderToolbar"];
-import React, { useCallback } from 'react';
-import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
-import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
+var _excluded = ["as", "className", "classPrefix", "disabledBackward", "disabledForward", "showDate", "showMonth", "showTime", "disabledTime", "onMoveBackward", "onMoveForward", "onToggleMonthDropdown", "onToggleTimeDropdown", "renderTitle", "renderToolbar"];
+import React, { useMemo } from 'react';
+import PagePreviousIcon from '@rsuite/icons/PagePrevious';
+import PageNextIcon from '@rsuite/icons/PageNext';
 import IconButton from "../IconButton/index.js";
 import Button from "../Button/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
+import { extractTimeFormat } from "../internals/utils/date/index.js";
 import { FormattedDate } from "../CustomProvider/index.js";
-import { useCalendarContext } from "./CalendarContext.js";
-import { useDateRangePickerContext } from "../DateRangePicker/DateRangePickerContext.js";
+import { useCalendar } from "./hooks/index.js";
+import { useDateRangePicker } from "../DateRangePicker/hooks/index.js";
 var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -20,28 +21,26 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabledBackward = props.disabledBackward,
     disabledForward = props.disabledForward,
     showDate = props.showDate,
-    showMeridian = props.showMeridian,
     showMonth = props.showMonth,
     showTime = props.showTime,
     disabledTime = props.disabledTime,
     onMoveBackward = props.onMoveBackward,
     onMoveForward = props.onMoveForward,
-    onToggleMeridian = props.onToggleMeridian,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     renderTitleProp = props.renderTitle,
     renderToolbar = props.renderToolbar,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useCalendarContext = useCalendarContext(),
-    locale = _useCalendarContext.locale,
-    _useCalendarContext$d = _useCalendarContext.date,
-    date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-    format = _useCalendarContext.format,
-    inline = _useCalendarContext.inline,
-    disabledDate = _useCalendarContext.disabledDate,
-    targetId = _useCalendarContext.targetId;
-  var _useDateRangePickerCo = useDateRangePickerContext(),
-    isSelectedIdle = _useDateRangePickerCo.isSelectedIdle;
+  var _useCalendar = useCalendar(),
+    locale = _useCalendar.locale,
+    _useCalendar$date = _useCalendar.date,
+    date = _useCalendar$date === void 0 ? new Date() : _useCalendar$date,
+    format = _useCalendar.format,
+    inline = _useCalendar.inline,
+    disabledDate = _useCalendar.disabledDate,
+    targetId = _useCalendar.targetId;
+  var _useDateRangePicker = useDateRangePicker(),
+    isSelectedIdle = _useDateRangePicker.isSelectedIdle;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix,
@@ -50,35 +49,26 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     appearance: 'subtle',
     size: inline ? 'sm' : 'xs'
   };
-  var getTimeFormat = useCallback(function () {
-    var timeFormat = [];
+  var timeFormat = useMemo(function () {
+    var defaultTimeFormat = (locale === null || locale === void 0 ? void 0 : locale.shortTimeFormat) || 'HH:mm';
     if (!format) {
-      return '';
+      return defaultTimeFormat;
     }
-    if (/([Hh])/.test(format)) {
-      timeFormat.push(showMeridian ? 'hh' : 'HH');
-    }
-    if (/m/.test(format)) {
-      timeFormat.push('mm');
-    }
-    if (/s/.test(format)) {
-      timeFormat.push('ss');
-    }
-    return timeFormat.join(':');
-  }, [format, showMeridian]);
-  var getDateFormat = useCallback(function () {
+    return extractTimeFormat(format) || defaultTimeFormat;
+  }, [format, locale]);
+  var dateFormat = useMemo(function () {
     if (showMonth) {
       return (locale === null || locale === void 0 ? void 0 : locale.formattedMonthPattern) || 'yyyy-MM';
     }
     return 'yyyy';
   }, [locale, showMonth]);
-  var renderTitle = useCallback(function () {
+  var renderTitle = function renderTitle() {
     var _renderTitleProp;
     return (_renderTitleProp = renderTitleProp === null || renderTitleProp === void 0 ? void 0 : renderTitleProp(date)) !== null && _renderTitleProp !== void 0 ? _renderTitleProp : date && /*#__PURE__*/React.createElement(FormattedDate, {
       date: date,
-      formatStr: getDateFormat()
+      formatStr: dateFormat
     });
-  }, [date, getDateFormat, renderTitleProp]);
+  };
   var dateTitleClasses = prefix('title', 'title-date', {
     error: disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)
   });
@@ -98,7 +88,7 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-label": "Previous month",
     className: backwardClass,
     onClick: disabledBackward ? undefined : onMoveBackward,
-    icon: /*#__PURE__*/React.createElement(AngleLeftIcon, null)
+    icon: /*#__PURE__*/React.createElement(PagePreviousIcon, null)
   })), /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
     "aria-label": "Select month",
     id: targetId ? targetId + "-grid-label" : undefined,
@@ -108,7 +98,7 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-label": "Next month",
     className: forwardClass,
     onClick: disabledForward ? undefined : onMoveForward,
-    icon: /*#__PURE__*/React.createElement(AngleRightIcon, null)
+    icon: /*#__PURE__*/React.createElement(PageNextIcon, null)
   })));
   var hasMonth = showDate || showMonth;
   var classes = merge(className, withClassPrefix({
@@ -130,15 +120,7 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disableSelectTime
   }), date && /*#__PURE__*/React.createElement(FormattedDate, {
     date: date,
-    formatStr: getTimeFormat()
-  })), showMeridian && /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
-    "aria-label": "Toggle meridian",
-    className: prefix('meridian'),
-    onClick: onToggleMeridian,
-    disabled: disableSelectTime
-  }), date && /*#__PURE__*/React.createElement(FormattedDate, {
-    date: date,
-    formatStr: "a"
+    formatStr: timeFormat
   }))), renderToolbar === null || renderToolbar === void 0 ? void 0 : renderToolbar(date));
 });
 CalendarHeader.displayName = 'CalendarHeader';

package/esm/Calendar/{CalendarContext.d.ts → CalendarProvider.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CalendarLocale } from '../locales';
 import { format } from '../internals/utils/date';
-import type { FixedSizeListProps } from '../internals/Windowing';
+import type { MonthDropdownProps } from './types';
 /**
  * Represents the inner context value for the Calendar component.
  */
@@ -9,7 +9,7 @@ export interface CalendarInnerContextValue {
     /**
      * The current date of the calendar.
      */
-    date: Date;
+    date?: Date;
     /**
      * The date range selected in the calendar.
      */
@@ -103,28 +103,9 @@ export interface CalendarInnerContextValue {
      */
     cellClassName?: (date: Date) => string | undefined;
 }
-/**
- * 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;
-}
 export interface CalendarContextValue extends CalendarInnerContextValue {
     locale: CalendarLocale;
     formatDate?: typeof format;
 }
-declare const CalendarContext: React.Context<CalendarContextValue>;
+export declare const CalendarContext: React.Context<CalendarContextValue>;
 export declare const CalendarProvider: React.Provider<CalendarContextValue>;
-export declare const useCalendarContext: () => CalendarContextValue;
-export default CalendarContext;

package/esm/Calendar/CalendarProvider.js

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+
+/**
+ * Represents the inner context value for the Calendar component.
+ */
+
+export var CalendarContext = /*#__PURE__*/React.createContext({});
+export var CalendarProvider = CalendarContext.Provider;

package/esm/Calendar/Grid/Grid.d.ts

@@ -0,0 +1,6 @@
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
+export interface GridProps extends WithAsProps {
+    rows: any[];
+}
+declare const Grid: RsRefForwardingComponent<'div', GridProps>;
+export default Grid;

package/esm/Calendar/{Table.js → Grid/Grid.js}

@@ -3,12 +3,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["as", "className", "classPrefix", "rows"];
 import React from 'react';
-import PropTypes from 'prop-types';
-import TableRow from "./TableRow.js";
-import TableHeaderRow from "./TableHeaderRow.js";
-import { useClassNames } from "../internals/hooks/index.js";
-import { useCalendarContext } from "./CalendarContext.js";
-var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import GridRow from "./GridRow.js";
+import GridHeaderRow from "./GridHeaderRow.js";
+import { useClassNames } from "../../internals/hooks/index.js";
+import { useCalendar } from "../hooks/index.js";
+var Grid = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     className = props.className,
@@ -21,8 +20,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
   var classes = merge(className, withClassPrefix());
-  var _useCalendarContext = useCalendarContext(),
-    targetId = _useCalendarContext.targetId;
+  var _useCalendar = useCalendar(),
+    targetId = _useCalendar.targetId;
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "grid",
     tabIndex: -1,
@@ -30,18 +29,13 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, rest, {
     ref: ref,
     className: classes
-  }), /*#__PURE__*/React.createElement(TableHeaderRow, null), rows.map(function (week, index) {
-    return /*#__PURE__*/React.createElement(TableRow, {
+  }), /*#__PURE__*/React.createElement(GridHeaderRow, null), rows.map(function (week, index) {
+    return /*#__PURE__*/React.createElement(GridRow, {
       key: index,
       weekendDate: week,
       rowIndex: index + 1
     });
   }));
 });
-Table.displayName = 'CalendarTable';
-Table.propTypes = {
-  rows: PropTypes.array,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string
-};
-export default Table;
+Grid.displayName = 'CalendarGrid';
+export default Grid;

package/{cjs/Calendar/TableCell.d.ts → esm/Calendar/Grid/GridCell.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
-import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
-export interface TableCellProps extends WithAsProps {
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
+export interface GridCellProps extends WithAsProps {
     date: Date;
     disabled?: boolean;
     selected?: boolean;
@@ -10,5 +10,5 @@ export interface TableCellProps extends WithAsProps {
     inRange?: boolean;
     onSelect?: (date: Date, disabled: boolean | void, event: React.MouseEvent) => void;
 }
-declare const TableCell: RsRefForwardingComponent<'div', TableCellProps>;
-export default TableCell;
+declare const GridCell: RsRefForwardingComponent<'div', GridCellProps>;
+export default GridCell;