rsuite 5.18.0 → 5.18.1-beta.4

package/cjs/Calendar/Calendar.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.default = exports.CalendarState = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,188 +15,109 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _pick = _interopRequireDefault(require("lodash/pick"));
+var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
 
-var _MonthDropdown = _interopRequireDefault(require("./MonthDropdown"));
+var _Button = _interopRequireDefault(require("../Button"));
 
-var _TimeDropdown = _interopRequireDefault(require("./TimeDropdown"));
-
-var _View = _interopRequireDefault(require("./View"));
-
-var _Header = _interopRequireDefault(require("./Header"));
+var _CustomProvider = require("../CustomProvider");
 
 var _utils = require("../utils");
 
-var _CalendarContext = require("./CalendarContext");
-
-var CalendarState;
-exports.CalendarState = CalendarState;
+var _useCalendarDate2 = _interopRequireDefault(require("./useCalendarDate"));
 
-(function (CalendarState) {
-  CalendarState["DROP_TIME"] = "DROP_TIME";
-  CalendarState["DROP_MONTH"] = "DROP_MONTH";
-})(CalendarState || (exports.CalendarState = CalendarState = {}));
-
-var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
+      Component = _props$as === void 0 ? _CalendarContainer.default : _props$as,
+      bordered = props.bordered,
       className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'calendar' : _props$classPrefix,
-      calendarState = props.calendarState,
-      dateRange = props.dateRange,
-      disabledBackward = props.disabledBackward,
-      disabledDate = props.disabledDate,
-      disabledForward = props.disabledForward,
-      format = props.format,
-      hoverRangeValue = props.hoverRangeValue,
-      inSameMonth = props.inSameMonth,
-      _props$isoWeek = props.isoWeek,
-      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
-      limitEndYear = props.limitEndYear,
-      locale = props.locale,
-      onChangePageDate = props.onChangePageDate,
-      onChangePageTime = props.onChangePageTime,
-      onMouseMove = props.onMouseMove,
-      onMoveBackward = props.onMoveBackward,
-      onMoveForward = props.onMoveForward,
+      compact = props.compact,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
+      isoWeek = props.isoWeek,
+      overrideLocale = props.locale,
+      onChange = props.onChange,
       onSelect = props.onSelect,
-      onToggleMeridian = props.onToggleMeridian,
-      onToggleMonthDropdown = props.onToggleMonthDropdown,
-      onToggleTimeDropdown = props.onToggleTimeDropdown,
-      calendarDate = props.calendarDate,
       renderCell = props.renderCell,
-      renderTitle = props.renderTitle,
-      renderToolbar = props.renderToolbar,
-      showMeridian = props.showMeridian,
-      showWeekNumbers = props.showWeekNumbers,
-      inline = props.inline,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarState", "dateRange", "disabledBackward", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "locale", "onChangePageDate", "onChangePageTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+      value = props.value,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onSelect", "renderCell", "value"]);
+
+  var _useCalendarDate = (0, _useCalendarDate2.default)(value, defaultValue),
+      calendarDate = _useCalendarDate.calendarDate,
+      setCalendarDate = _useCalendarDate.setCalendarDate;
+
+  var _useCustom = (0, _utils.useCustom)('Calendar', overrideLocale),
+      locale = _useCustom.locale;
+
+  var handleChange = (0, _react.useCallback)(function (nextValue) {
+    setCalendarDate(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  }, [setCalendarDate, onChange]);
+  var handleClickToday = (0, _react.useCallback)(function () {
+    handleChange(new Date());
+  }, [handleChange]);
+  var handleSelect = (0, _react.useCallback)(function (nextValue) {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
+    handleChange(nextValue);
+  }, [handleChange, onSelect]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge;
-
-  var isDisabledDate = (0, _react.useCallback)(function (date) {
-    var _disabledDate;
-
-    return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
-  }, [disabledDate]);
-
-  var isTimeDisabled = function isTimeDisabled(date) {
-    return _utils.DateUtils.disabledTime(props, date);
-  };
-
-  var handleMoveForward = (0, _react.useCallback)(function () {
-    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(_utils.DateUtils.addMonths(calendarDate, 1));
-  }, [onMoveForward, calendarDate]);
-  var handleMoveBackward = (0, _react.useCallback)(function () {
-    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(_utils.DateUtils.addMonths(calendarDate, -1));
-  }, [onMoveBackward, calendarDate]);
-
-  var showDate = _utils.DateUtils.shouldDate(format);
-
-  var showTime = _utils.DateUtils.shouldTime(format);
-
-  var showMonth = _utils.DateUtils.shouldMonth(format);
-
-  var onlyShowTime = showTime && !showDate && !showMonth;
-  var onlyShowMonth = showMonth && !showDate && !showTime;
-  var dropTime = calendarState === CalendarState.DROP_TIME || onlyShowTime;
-  var dropMonth = calendarState === CalendarState.DROP_MONTH || onlyShowMonth;
-  var inSameThisMonthDate = (0, _react.useCallback)(function (date) {
-    return (0, _utils.composeFunctions)(function (d) {
-      return _utils.DateUtils.setDate(d, 1);
-    }, function (d) {
-      return _utils.DateUtils.isSameMonth(d, date);
-    })(date);
-  }, []);
-  var calendarClasses = merge(className, withClassPrefix({
-    'show-time-dropdown': dropTime,
-    'show-month-dropdown': dropMonth,
-    'show-week-numbers': showWeekNumbers
+      prefix = _useClassNames.prefix,
+      merge = _useClassNames.merge,
+      withClassPrefix = _useClassNames.withClassPrefix;
+
+  var renderToolbar = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react.default.createElement(_Button.default, {
+      className: prefix('btn-today'),
+      size: "sm",
+      onClick: handleClickToday
+    }, locale.today || 'Today');
+  }, [handleClickToday, locale.today, prefix]);
+  var customRenderCell = (0, _react.useCallback)(function (date) {
+    return renderCell === null || renderCell === void 0 ? void 0 : renderCell(date);
+  }, [renderCell]);
+  var classes = merge(className, withClassPrefix('panel', {
+    bordered: bordered,
+    compact: compact
   }));
-  var timeDropdownProps = (0, _pick.default)(rest, _utils.DateUtils.calendarOnlyProps);
-  var contextValue = (0, _react.useMemo)(function () {
-    return {
-      date: calendarDate,
-      dateRange: dateRange,
-      disabledDate: isDisabledDate,
-      format: format,
-      hoverRangeValue: hoverRangeValue,
-      inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
-      isoWeek: isoWeek,
-      locale: locale,
-      onChangePageDate: onChangePageDate,
-      onChangePageTime: onChangePageTime,
-      onMouseMove: onMouseMove,
-      onSelect: onSelect,
-      renderCell: renderCell,
-      showWeekNumbers: showWeekNumbers,
-      inline: inline
-    };
-  }, [calendarDate, dateRange, format, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageDate, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
-  return /*#__PURE__*/_react.default.createElement(_CalendarContext.CalendarProvider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, _utils.DateUtils.omitHideDisabledProps(rest), {
-    className: calendarClasses,
-    ref: ref
-  }), /*#__PURE__*/_react.default.createElement(_Header.default, {
-    showMonth: showMonth,
-    showDate: showDate,
-    showTime: showTime,
-    showMeridian: showMeridian,
-    disabledTime: isTimeDisabled,
-    onMoveForward: handleMoveForward,
-    onMoveBackward: handleMoveBackward,
-    onToggleMonthDropdown: onToggleMonthDropdown,
-    onToggleTimeDropdown: onToggleTimeDropdown,
-    onToggleMeridian: onToggleMeridian,
-    renderTitle: renderTitle,
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    inline: true,
+    className: classes,
+    ref: ref,
+    isoWeek: isoWeek,
+    format: "yyyy-MM-dd",
+    calendarDate: calendarDate,
+    limitEndYear: 1000,
+    locale: locale,
+    renderTitle: function renderTitle(date) {
+      return /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
+        date: date,
+        formatStr: locale.formattedMonthPattern || 'MMMM  yyyy'
+      });
+    },
     renderToolbar: renderToolbar,
-    disabledBackward: disabledBackward,
-    disabledForward: disabledForward
-  }), showDate && /*#__PURE__*/_react.default.createElement(_View.default, null), showMonth && /*#__PURE__*/_react.default.createElement(_MonthDropdown.default, {
-    show: dropMonth,
-    limitEndYear: limitEndYear,
-    disabledMonth: isDisabledDate
-  }), showTime && /*#__PURE__*/_react.default.createElement(_TimeDropdown.default, (0, _extends2.default)({}, timeDropdownProps, {
-    show: dropTime,
-    showMeridian: showMeridian
-  }))));
+    renderCell: customRenderCell,
+    onMoveForward: handleChange,
+    onMoveBackward: handleChange,
+    onChangePageDate: handleChange,
+    onSelect: handleSelect
+  }));
 });
 
-Calendar.displayName = 'Calendar';
-Calendar.propTypes = {
-  calendarState: _propTypes.default.oneOf(Object.values(CalendarState)),
-  className: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  disabledDate: _propTypes.default.func,
-  disabledHours: _propTypes.default.func,
-  disabledMinutes: _propTypes.default.func,
-  disabledSeconds: _propTypes.default.func,
-  format: _propTypes.default.string,
-  hideHours: _propTypes.default.func,
-  hideMinutes: _propTypes.default.func,
-  hideSeconds: _propTypes.default.func,
-  inSameMonth: _propTypes.default.func,
+CalendarPanel.displayName = 'CalendarPanel';
+CalendarPanel.propTypes = {
+  value: _propTypes.default.instanceOf(Date),
+  defaultValue: _propTypes.default.instanceOf(Date),
   isoWeek: _propTypes.default.bool,
-  limitEndYear: _propTypes.default.number,
+  compact: _propTypes.default.bool,
+  bordered: _propTypes.default.bool,
   locale: _propTypes.default.object,
-  onChangePageDate: _propTypes.default.func,
-  onChangePageTime: _propTypes.default.func,
-  onMoveBackward: _propTypes.default.func,
-  onMoveForward: _propTypes.default.func,
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  onChange: _propTypes.default.func,
   onSelect: _propTypes.default.func,
-  onToggleMeridian: _propTypes.default.func,
-  onToggleMonthDropdown: _propTypes.default.func,
-  onToggleTimeDropdown: _propTypes.default.func,
-  calendarDate: _propTypes.default.instanceOf(Date),
-  renderCell: _propTypes.default.func,
-  renderTitle: _propTypes.default.func,
-  renderToolbar: _propTypes.default.func,
-  showMeridian: _propTypes.default.bool,
-  showWeekNumbers: _propTypes.default.bool
+  renderCell: _propTypes.default.func
 };
-var _default = Calendar;
+var _default = CalendarPanel;
 exports.default = _default;

package/cjs/Calendar/CalendarBody.d.ts

@@ -0,0 +1,4 @@
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+export declare type CalendarBodyProps = WithAsProps;
+declare const CalendarBody: RsRefForwardingComponent<'div', CalendarBodyProps>;
+export default CalendarBody;

package/cjs/Calendar/{View.js → CalendarBody.js}

@@ -19,12 +19,12 @@ var _Table = _interopRequireDefault(require("./Table"));
 
 var _CalendarContext = require("./CalendarContext");
 
-var View = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var CalendarBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
       className = props.className,
       _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'calendar-view' : _props$classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'calendar-body' : _props$classPrefix,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix"]);
 
   var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
@@ -53,11 +53,11 @@ var View = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }));
 });
 
-View.displayName = 'View';
-View.propTypes = {
+CalendarBody.displayName = 'CalendarBody';
+CalendarBody.propTypes = {
   as: _propTypes.default.elementType,
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string
 };
-var _default = View;
+var _default = CalendarBody;
 exports.default = _default;

package/cjs/Calendar/CalendarContainer.d.ts

@@ -0,0 +1,61 @@
+import React, { HTMLAttributes } from 'react';
+import { CalendarHeaderProps } from './CalendarHeader';
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+import { CalendarLocale } from '../locales';
+import { CalendarState } from './useCalendarState';
+export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange' | 'onMouseMove'>, CalendarHeaderProps {
+    /** The panel render based on date range */
+    dateRange?: Date[];
+    /** Date displayed on the current page */
+    calendarDate: Date;
+    /** Whether to show week numbers */
+    showWeekNumbers?: boolean;
+    inline?: boolean;
+    defaultState?: CalendarState;
+    /** Disabled date */
+    disabledDate?: (date: Date) => boolean;
+    /** Disabled hours */
+    disabledHours?: (hour: number, date: Date) => boolean;
+    /** Disabled minutes */
+    disabledMinutes?: (minute: number, date: Date) => boolean;
+    /** Hidden seconds */
+    disabledSeconds?: (second: number, date: Date) => boolean;
+    /** Format str */
+    format: string;
+    /** Hidden hours */
+    hideHours?: (hour: number, date: Date) => boolean;
+    /** Hidden minutes */
+    hideMinutes?: (minute: number, date: Date) => boolean;
+    /** Hidden seconds */
+    hideSeconds?: (second: number, date: Date) => boolean;
+    /** The value that mouse hover on in range selection */
+    hoverRangeValue?: [Date, Date];
+    /** Is it in the same month as today */
+    inSameMonth?: (date: Date) => boolean;
+    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
+    isoWeek?: boolean;
+    /** Limit showing how many years in the future */
+    limitEndYear?: number;
+    /** Custom locale */
+    locale: CalendarLocale;
+    /** Callback after the date has changed */
+    onChangePageDate?: (nextPageDate: Date, event: React.MouseEvent) => void;
+    /** Callback after the time has changed */
+    onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
+    /** Callback after mouse enter other date cell */
+    onMouseMove?: (date: Date) => void;
+    /** Switch to the callback triggered after the previous month. */
+    onMoveBackward?: (nextPageDate: Date) => void;
+    /** Switch to the callback triggered after the next month. */
+    onMoveForward?: (nextPageDate: Date) => void;
+    /** Callback fired before the date selected */
+    onSelect?: (date: Date, event: React.MouseEvent) => void;
+    /** Custom rendering cell*/
+    renderCell?: (date: Date) => React.ReactNode;
+    /** Called when opening the month view */
+    onToggleMonthDropdown?: (toggle: boolean) => void;
+    /** Called when opening the time view */
+    onToggleTimeDropdown?: (toggle: boolean) => void;
+}
+declare const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps>;
+export default CalendarContainer;

package/cjs/Calendar/CalendarContainer.js

@@ -0,0 +1,233 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _pick = _interopRequireDefault(require("lodash/pick"));
+
+var _MonthDropdown = _interopRequireDefault(require("./MonthDropdown"));
+
+var _TimeDropdown = _interopRequireDefault(require("./TimeDropdown"));
+
+var _CalendarBody = _interopRequireDefault(require("./CalendarBody"));
+
+var _CalendarHeader = _interopRequireDefault(require("./CalendarHeader"));
+
+var _utils = require("../utils");
+
+var _dateUtils = require("../utils/dateUtils");
+
+var _CalendarContext = require("./CalendarContext");
+
+var _useCalendarState2 = _interopRequireWildcard(require("./useCalendarState"));
+
+var _AngleUp = _interopRequireDefault(require("@rsuite/icons/legacy/AngleUp"));
+
+var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      className = props.className,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'calendar' : _props$classPrefix,
+      dateRange = props.dateRange,
+      disabledBackward = props.disabledBackward,
+      defaultState = props.defaultState,
+      disabledDate = props.disabledDate,
+      disabledForward = props.disabledForward,
+      format = props.format,
+      hoverRangeValue = props.hoverRangeValue,
+      inSameMonth = props.inSameMonth,
+      _props$isoWeek = props.isoWeek,
+      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
+      limitEndYear = props.limitEndYear,
+      locale = props.locale,
+      onChangePageDate = props.onChangePageDate,
+      onChangePageTime = props.onChangePageTime,
+      onMouseMove = props.onMouseMove,
+      onMoveBackward = props.onMoveBackward,
+      onMoveForward = props.onMoveForward,
+      onSelect = props.onSelect,
+      onToggleMeridian = props.onToggleMeridian,
+      onToggleMonthDropdown = props.onToggleMonthDropdown,
+      onToggleTimeDropdown = props.onToggleTimeDropdown,
+      calendarDate = props.calendarDate,
+      renderCell = props.renderCell,
+      renderTitle = props.renderTitle,
+      renderToolbar = props.renderToolbar,
+      showMeridian = props.showMeridian,
+      showWeekNumbers = props.showWeekNumbers,
+      inline = props.inline,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "locale", "onChangePageDate", "onChangePageTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge,
+      prefix = _useClassNames.prefix;
+
+  var _useCalendarState = (0, _useCalendarState2.default)(defaultState),
+      calendarState = _useCalendarState.calendarState,
+      reset = _useCalendarState.reset,
+      openMonth = _useCalendarState.openMonth,
+      openTime = _useCalendarState.openTime;
+
+  var isDisabledDate = (0, _react.useCallback)(function (date) {
+    var _disabledDate;
+
+    return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
+  }, [disabledDate]);
+
+  var isTimeDisabled = function isTimeDisabled(date) {
+    return (0, _dateUtils.disabledTime)(props, date);
+  };
+
+  var handleMoveForward = (0, _react.useCallback)(function () {
+    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward((0, _dateUtils.addMonths)(calendarDate, 1));
+  }, [onMoveForward, calendarDate]);
+  var handleMoveBackward = (0, _react.useCallback)(function () {
+    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _dateUtils.addMonths)(calendarDate, -1));
+  }, [onMoveBackward, calendarDate]); // It is displayed as the month to be selected.
+
+  var toggleMonthView = (0, _react.useCallback)(function () {
+    if (calendarState === _useCalendarState2.CalendarState.MONTH) {
+      reset();
+    } else {
+      openMonth();
+    }
+
+    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(calendarState !== _useCalendarState2.CalendarState.MONTH);
+  }, [calendarState, onToggleMonthDropdown, openMonth, reset]); // It is displayed as a time to be selected.
+
+  var toggleTimeView = (0, _react.useCallback)(function () {
+    if (calendarState === _useCalendarState2.CalendarState.TIME) {
+      reset();
+    } else {
+      openTime();
+    }
+
+    onToggleTimeDropdown === null || onToggleTimeDropdown === void 0 ? void 0 : onToggleTimeDropdown(calendarState !== _useCalendarState2.CalendarState.TIME);
+  }, [calendarState, onToggleTimeDropdown, openTime, reset]);
+  var handleCloseDropdown = (0, _react.useCallback)(function () {
+    return reset();
+  }, [reset]);
+  var renderDate = (0, _dateUtils.shouldRenderDate)(format);
+  var renderTime = (0, _dateUtils.shouldRenderTime)(format);
+  var renderMonth = (0, _dateUtils.shouldRenderMonth)(format);
+  var onlyShowTime = renderTime && !renderDate && !renderMonth;
+  var onlyShowMonth = renderMonth && !renderDate && !renderTime;
+  var showTime = calendarState === _useCalendarState2.CalendarState.TIME || onlyShowTime;
+  var showMonth = calendarState === _useCalendarState2.CalendarState.MONTH || onlyShowMonth;
+  var inSameThisMonthDate = (0, _react.useCallback)(function (date) {
+    return (0, _utils.composeFunctions)(function (d) {
+      return (0, _dateUtils.setDate)(d, 1);
+    }, function (d) {
+      return (0, _dateUtils.isSameMonth)(d, date);
+    })(date);
+  }, []);
+  var calendarClasses = merge(className, withClassPrefix({
+    'time-view': showTime,
+    'month-view': showMonth,
+    'show-week-numbers': showWeekNumbers
+  }));
+  var timeDropdownProps = (0, _pick.default)(rest, _dateUtils.calendarOnlyProps);
+  var handleChangePageDate = (0, _react.useCallback)(function (date, event) {
+    reset();
+    onChangePageDate === null || onChangePageDate === void 0 ? void 0 : onChangePageDate(date, event);
+  }, [onChangePageDate, reset]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      date: calendarDate,
+      dateRange: dateRange,
+      disabledDate: isDisabledDate,
+      format: format,
+      hoverRangeValue: hoverRangeValue,
+      inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
+      isoWeek: isoWeek,
+      locale: locale,
+      onChangePageDate: handleChangePageDate,
+      onChangePageTime: onChangePageTime,
+      onMouseMove: onMouseMove,
+      onSelect: onSelect,
+      renderCell: renderCell,
+      showWeekNumbers: showWeekNumbers,
+      inline: inline
+    };
+  }, [calendarDate, dateRange, format, handleChangePageDate, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
+  return /*#__PURE__*/_react.default.createElement(_CalendarContext.CalendarProvider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {
+    className: calendarClasses,
+    ref: ref
+  }), /*#__PURE__*/_react.default.createElement(_CalendarHeader.default, {
+    showMonth: renderMonth,
+    showDate: renderDate,
+    showTime: renderTime,
+    showMeridian: showMeridian,
+    disabledTime: isTimeDisabled,
+    onMoveForward: handleMoveForward,
+    onMoveBackward: handleMoveBackward,
+    onToggleMonthDropdown: toggleMonthView,
+    onToggleTimeDropdown: toggleTimeView,
+    onToggleMeridian: onToggleMeridian,
+    renderTitle: renderTitle,
+    renderToolbar: renderToolbar,
+    disabledBackward: disabledBackward,
+    disabledForward: disabledForward
+  }), renderDate && /*#__PURE__*/_react.default.createElement(_CalendarBody.default, null), renderMonth && /*#__PURE__*/_react.default.createElement(_MonthDropdown.default, {
+    show: showMonth,
+    limitEndYear: limitEndYear,
+    disabledMonth: isDisabledDate
+  }), renderTime && /*#__PURE__*/_react.default.createElement(_TimeDropdown.default, (0, _extends2.default)({}, timeDropdownProps, {
+    show: showTime,
+    showMeridian: showMeridian
+  })), (showMonth || showTime) && renderDate && /*#__PURE__*/_react.default.createElement("button", {
+    className: prefix('btn-close'),
+    onClick: handleCloseDropdown,
+    "aria-label": "Collapse " + (showMonth ? 'month' : 'time') + " view"
+  }, /*#__PURE__*/_react.default.createElement(_AngleUp.default, null))));
+});
+
+CalendarContainer.displayName = 'CalendarContainer';
+CalendarContainer.propTypes = {
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  disabledDate: _propTypes.default.func,
+  disabledHours: _propTypes.default.func,
+  disabledMinutes: _propTypes.default.func,
+  disabledSeconds: _propTypes.default.func,
+  format: _propTypes.default.string,
+  hideHours: _propTypes.default.func,
+  hideMinutes: _propTypes.default.func,
+  hideSeconds: _propTypes.default.func,
+  inSameMonth: _propTypes.default.func,
+  isoWeek: _propTypes.default.bool,
+  limitEndYear: _propTypes.default.number,
+  locale: _propTypes.default.object,
+  onChangePageDate: _propTypes.default.func,
+  onChangePageTime: _propTypes.default.func,
+  onMoveBackward: _propTypes.default.func,
+  onMoveForward: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
+  onToggleMeridian: _propTypes.default.func,
+  onToggleMonthDropdown: _propTypes.default.func,
+  onToggleTimeDropdown: _propTypes.default.func,
+  calendarDate: _propTypes.default.instanceOf(Date),
+  renderCell: _propTypes.default.func,
+  renderTitle: _propTypes.default.func,
+  renderToolbar: _propTypes.default.func,
+  showMeridian: _propTypes.default.bool,
+  showWeekNumbers: _propTypes.default.bool
+};
+var _default = CalendarContainer;
+exports.default = _default;

package/{esm/Calendar/Header.d.ts → cjs/Calendar/CalendarHeader.d.ts}

@@ -1,20 +1,22 @@
 import React from 'react';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
-export interface HeaderProps extends WithAsProps {
+export interface CalendarHeaderProps {
     disabledBackward?: boolean;
     disabledForward?: boolean;
-    showDate?: boolean;
     showMeridian?: boolean;
+    onToggleMeridian?: (event: React.MouseEvent) => void;
+    renderTitle?: (date: Date) => React.ReactNode;
+    renderToolbar?: (date: Date) => React.ReactNode;
+}
+interface CalendarHeaderPrivateProps extends CalendarHeaderProps, WithAsProps {
+    showDate?: boolean;
     showMonth?: boolean;
     showTime?: boolean;
     disabledTime?: (date: Date) => boolean;
     onMoveBackward?: () => void;
     onMoveForward?: () => void;
-    onToggleMeridian?: (event: React.MouseEvent) => void;
     onToggleMonthDropdown?: (event: React.MouseEvent) => void;
     onToggleTimeDropdown?: (event: React.MouseEvent) => void;
-    renderTitle?: (date: Date) => React.ReactNode;
-    renderToolbar?: (date: Date) => React.ReactNode;
 }
-declare const Header: RsRefForwardingComponent<'div', HeaderProps>;
-export default Header;
+declare const CalendarHeader: RsRefForwardingComponent<'div', CalendarHeaderPrivateProps>;
+export default CalendarHeader;