rsuite 5.18.0 → 5.18.1

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/cjs/Calendar/{Header.d.ts → 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;

package/cjs/Calendar/{Header.js → CalendarHeader.js}

@@ -29,7 +29,7 @@ var _CustomProvider = require("../CustomProvider");
 
 var _CalendarContext = require("./CalendarContext");
 
-var Header = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
       className = props.className,
@@ -157,8 +157,8 @@ var Header = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }))), renderToolbar === null || renderToolbar === void 0 ? void 0 : renderToolbar(date));
 });
 
-Header.displayName = 'Header';
-Header.propTypes = {
+CalendarHeader.displayName = 'CalendarHeader';
+CalendarHeader.propTypes = {
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string,
   disabledBackward: _propTypes.default.bool,
@@ -176,5 +176,5 @@ Header.propTypes = {
   showMonth: _propTypes.default.bool,
   showTime: _propTypes.default.bool
 };
-var _default = Header;
+var _default = CalendarHeader;
 exports.default = _default;

package/cjs/Calendar/Table.js

@@ -47,7 +47,7 @@ var Table = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }));
 });
 
-Table.displayName = 'Table';
+Table.displayName = 'CalendarTable';
 Table.propTypes = {
   rows: _propTypes.default.array,
   className: _propTypes.default.string,

package/cjs/Calendar/TableHeaderRow.js

@@ -65,7 +65,7 @@ var TableHeaderRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   }));
 });
 
-TableHeaderRow.displayName = 'TableHeaderRow';
+TableHeaderRow.displayName = 'CalendarTableHeaderRow';
 TableHeaderRow.propTypes = {
   as: _propTypes.default.elementType,
   className: _propTypes.default.string,

package/cjs/Calendar/TableRow.js

@@ -156,7 +156,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, _utils.DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
 });
 
-TableRow.displayName = 'TableRow';
+TableRow.displayName = 'CalendarTableRow';
 TableRow.propTypes = {
   weekendDate: _propTypes.default.instanceOf(Date),
   className: _propTypes.default.string,

package/cjs/Calendar/index.d.ts

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

package/cjs/Calendar/index.js

@@ -1,21 +1,22 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports.default = void 0;
 
-var _CalendarPanel = _interopRequireDefault(require("./CalendarPanel"));
+var _Calendar = _interopRequireDefault(require("./Calendar"));
+
+var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
+
+exports.CalendarContainer = _CalendarContainer.default;
 
-var _Calendar = _interopRequireWildcard(require("./Calendar"));
+var _useCalendarState = require("./useCalendarState");
 
-exports.Calendar = _Calendar.default;
-exports.CalendarState = _Calendar.CalendarState;
+exports.CalendarState = _useCalendarState.CalendarState;
 
 var _CalendarContext = _interopRequireDefault(require("./CalendarContext"));
 
 exports.CalendarContext = _CalendarContext.default;
-var _default = _CalendarPanel.default;
+var _default = _Calendar.default;
 exports.default = _default;

package/cjs/Calendar/useCalendarState.d.ts

@@ -0,0 +1,11 @@
+export declare enum CalendarState {
+    'TIME' = "TIME",
+    'MONTH' = "MONTH"
+}
+declare const useCalendarState: (defaultState?: CalendarState) => {
+    calendarState: CalendarState | undefined;
+    reset: () => void;
+    openMonth: () => void;
+    openTime: () => void;
+};
+export default useCalendarState;

package/cjs/Calendar/useCalendarState.js

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.CalendarState = void 0;
+
+var _react = require("react");
+
+var CalendarState;
+exports.CalendarState = CalendarState;
+
+(function (CalendarState) {
+  CalendarState["TIME"] = "TIME";
+  CalendarState["MONTH"] = "MONTH";
+})(CalendarState || (exports.CalendarState = CalendarState = {}));
+
+var useCalendarState = function useCalendarState(defaultState) {
+  var _useState = (0, _react.useState)(defaultState),
+      calendarState = _useState[0],
+      setCalendarState = _useState[1];
+
+  var reset = (0, _react.useCallback)(function () {
+    setCalendarState(undefined);
+  }, []);
+  var openMonth = (0, _react.useCallback)(function () {
+    setCalendarState(CalendarState.MONTH);
+  }, []);
+  var openTime = (0, _react.useCallback)(function () {
+    setCalendarState(CalendarState.TIME);
+  }, []);
+  return {
+    calendarState: calendarState,
+    reset: reset,
+    openMonth: openMonth,
+    openTime: openTime
+  };
+};
+
+var _default = useCalendarState;
+exports.default = _default;

package/cjs/DatePicker/DatePicker.js

@@ -25,7 +25,7 @@ var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"))
 
 var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
 
-var _Calendar2 = require("../Calendar");
+var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarContainer"));
 
 var _useCalendarDate2 = _interopRequireDefault(require("../Calendar/useCalendarDate"));
 
@@ -35,8 +35,6 @@ var _utils = require("../utils");
 
 var _Picker = require("../Picker");
 
-var _utils2 = require("./utils");
-
 var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -110,12 +108,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       inputState = _useState[0],
       setInputState = _useState[1];
 
-  var _useCalendarState = (0, _utils2.useCalendarState)(),
-      calendarState = _useCalendarState.calendarState,
-      reset = _useCalendarState.reset,
-      openMonth = _useCalendarState.openMonth,
-      openTime = _useCalendarState.openTime;
-
   var _useState2 = (0, _react.useState)(false),
       active = _useState2[0],
       setActive = _useState2[1];
@@ -216,32 +208,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     updateValue(event);
     onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);
   }, [updateValue, onOk, calendarDate]);
-  /**
-   * Toggle month selection panel
-   */
-
-  var handleMonthDropdown = (0, _react.useCallback)(function () {
-    if (calendarState === _Calendar2.CalendarState.DROP_MONTH) {
-      reset();
-    } else {
-      openMonth();
-    }
-
-    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(calendarState !== _Calendar2.CalendarState.DROP_MONTH);
-  }, [calendarState, onToggleMonthDropdown, openMonth, reset]);
-  /**
-   * Switch time selection panel
-   */
-
-  var handleTimeDropdown = (0, _react.useCallback)(function () {
-    if (calendarState === _Calendar2.CalendarState.DROP_TIME) {
-      reset();
-    } else {
-      openTime();
-    }
-
-    onToggleTimeDropdown === null || onToggleTimeDropdown === void 0 ? void 0 : onToggleTimeDropdown(calendarState !== _Calendar2.CalendarState.DROP_TIME);
-  }, [calendarState, onToggleTimeDropdown, openTime, reset]);
   /**
    * Callback after clicking the clear button.
    */
@@ -270,7 +236,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     setCalendarDate( // Determine whether the current value contains time, if not, use calendarDate.
-    _utils.DateUtils.shouldTime(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {
+    _utils.DateUtils.shouldRenderTime(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {
       return _utils.DateUtils.setHours(d, _utils.DateUtils.getHours(calendarDate));
     }, function (d) {
       return _utils.DateUtils.setMinutes(d, _utils.DateUtils.getMinutes(calendarDate));
@@ -289,15 +255,14 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var handleChangePageDate = (0, _react.useCallback)(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
-    reset();
     handleDateChange(nextPageDate); // Show only the calendar month panel. formatStr = 'yyyy-MM'
 
-    var onlyShowMonth = _utils.DateUtils.shouldMonth(formatStr) && !_utils.DateUtils.shouldDate(formatStr);
+    var onlyShowMonth = _utils.DateUtils.shouldRenderMonth(formatStr) && !_utils.DateUtils.shouldRenderDate(formatStr);
 
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
     }
-  }, [formatStr, handleDateChange, oneTap, reset, setCalendarDate, updateValue]);
+  }, [formatStr, handleDateChange, oneTap, setCalendarDate, updateValue]);
   var disabledDate = (0, _react.useCallback)(function (date) {
     var _disabledDateProp;
 
@@ -320,7 +285,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     var date = parseDate(value, formatStr); // If only the time is included in the characters, it will default to today.
 
-    if (_utils.DateUtils.shouldOnlyTime(formatStr)) {
+    if (_utils.DateUtils.shouldOnlyRenderTime(formatStr)) {
       date = new Date(_utils.DateUtils.format(new Date(), 'yyyy-MM-dd') + " " + value);
     }
 
@@ -353,9 +318,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [onOpen]);
   var handleExited = (0, _react.useCallback)(function () {
     onClose === null || onClose === void 0 ? void 0 : onClose();
-    reset();
     setActive(false);
-  }, [onClose, reset]); // Check whether the time is within the time range of the shortcut option in the toolbar.
+  }, [onClose]); // Check whether the time is within the time range of the shortcut option in the toolbar.
 
   var disabledToolbarHandle = (0, _react.useCallback)(function (date) {
     var _disabledDateProp2;
@@ -379,7 +343,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return _utils.DateUtils.isSameMonth(date, calendarDate);
   }, [calendarDate]);
 
-  var calendar = /*#__PURE__*/_react.default.createElement(_Calendar2.Calendar, (0, _extends2.default)({}, calendarProps, {
+  var calendar = /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
     locale: locale,
     showWeekNumbers: showWeekNumbers,
     showMeridian: showMeridian,
@@ -388,13 +352,12 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     format: formatStr,
     isoWeek: isoWeek,
     inSameMonth: inSameMonth,
-    calendarState: calendarState,
     calendarDate: calendarDate,
     onMoveForward: handleMoveForward,
     onMoveBackward: handleMoveBackward,
     onSelect: handleSelect,
-    onToggleMonthDropdown: handleMonthDropdown,
-    onToggleTimeDropdown: handleTimeDropdown,
+    onToggleMonthDropdown: onToggleMonthDropdown,
+    onToggleTimeDropdown: onToggleTimeDropdown,
     onChangePageDate: handleChangePageDate,
     onChangePageTime: handleChangePageTime,
     onToggleMeridian: handleToggleMeridian
@@ -449,7 +412,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
   }, [formatStr, formatDate, placeholder, renderValue, value]);
   var caretAs = (0, _react.useMemo)(function () {
-    return caretAsProp || (_utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default);
+    return caretAsProp || (_utils.DateUtils.shouldOnlyRenderTime(formatStr) ? _ClockO.default : _Calendar.default);
   }, [caretAsProp, formatStr]);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",

package/cjs/DatePicker/utils.d.ts

@@ -1,17 +1,10 @@
 import { ToolbarProps } from './Toolbar';
 import { InnerRange } from './types';
-import { CalendarState } from '../Calendar';
 import { DateRange } from '../DateRangePicker/types';
-export declare function getDefaultRanges<T extends Date | DateRange>(date: T): InnerRange<T>[];
+export declare function getDefaultRanges<T extends Date | DateRange>(value: T): InnerRange<T>[];
 /**
  * get Toolbar ranges from Toolbar props
  * @param ranges
  * @param calendarDate
  */
 export declare const getRanges: <T extends Date | DateRange>({ ranges, calendarDate }: Pick<ToolbarProps<T, T>, "calendarDate" | "ranges">) => InnerRange<T>[];
-export declare const useCalendarState: () => {
-    calendarState: CalendarState | undefined;
-    reset: () => void;
-    openMonth: () => void;
-    openTime: () => void;
-};