rsuite 5.76.0 → 6.0.0-canary-20241227

package/esm/ButtonToolbar/ButtonToolbar.js

@@ -1,9 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["className", "classPrefix", "as", "role"];
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useClassNames } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import Stack from "../Stack/index.js";
@@ -11,26 +8,27 @@ import Stack from "../Stack/index.js";
  * The ButtonToolbar component is used to group a series of buttons together in a single line.
  * @see https://rsuitejs.com/components/button/#button-toolbar
  */
-var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = useCustom('ButtonToolbar', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var className = propsWithDefaults.className,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'btn-toolbar' : _propsWithDefaults$cl,
-    _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? Stack : _propsWithDefaults$as,
-    _propsWithDefaults$ro = propsWithDefaults.role,
-    role = _propsWithDefaults$ro === void 0 ? 'toolbar' : _propsWithDefaults$ro,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var stackProps = Component === Stack ? {
+const ButtonToolbar = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('ButtonToolbar', props);
+  const {
+    className,
+    classPrefix = 'btn-toolbar',
+    as: Component = Stack,
+    role = 'toolbar',
+    ...rest
+  } = propsWithDefaults;
+  const stackProps = Component === Stack ? {
     wrap: true,
     spacing: 10,
     childrenRenderMode: 'clone'
   } : null;
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix());
+  const {
+    withClassPrefix,
+    merge
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({}, stackProps, rest, {
     role: role,
     ref: ref,
@@ -38,8 +36,4 @@ var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 ButtonToolbar.displayName = 'ButtonToolbar';
-ButtonToolbar.propTypes = {
-  as: PropTypes.elementType,
-  classPrefix: PropTypes.string
-};
 export default ButtonToolbar;

package/esm/Calendar/Calendar.js

@@ -1,9 +1,6 @@
 'use client';
 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 from 'react';
-import PropTypes from 'prop-types';
 import CalendarContainer from "./CalendarContainer.js";
 import Button from "../Button/index.js";
 import { isSameMonth, startOfDay } from "../internals/utils/date/index.js";
@@ -15,66 +12,63 @@ import { useCustom } from "../CustomProvider/index.js";
  * The Calendar component is used to select dates.
  * @see https://rsuitejs.com/components/calendar
  */
-var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = useCustom('Calendar', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? CalendarContainer : _propsWithDefaults$as,
-    bordered = propsWithDefaults.bordered,
-    className = propsWithDefaults.className,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'calendar' : _propsWithDefaults$cl,
-    compact = propsWithDefaults.compact,
-    _propsWithDefaults$de = propsWithDefaults.defaultValue,
-    defaultValue = _propsWithDefaults$de === void 0 ? startOfDay(new Date()) : _propsWithDefaults$de,
-    isoWeek = propsWithDefaults.isoWeek,
-    _propsWithDefaults$we = propsWithDefaults.weekStart,
-    weekStart = _propsWithDefaults$we === void 0 ? 0 : _propsWithDefaults$we,
-    locale = propsWithDefaults.locale,
-    onChange = propsWithDefaults.onChange,
-    onMonthChange = propsWithDefaults.onMonthChange,
-    onSelect = propsWithDefaults.onSelect,
-    renderCell = propsWithDefaults.renderCell,
-    value = propsWithDefaults.value,
-    cellClassName = propsWithDefaults.cellClassName,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _useCalendarDate = useCalendarDate(value, defaultValue),
-    calendarDate = _useCalendarDate.calendarDate,
-    setCalendarDate = _useCalendarDate.setCalendarDate;
-  var handleChange = useEventCallback(function (nextValue) {
+const Calendar = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('Calendar', props);
+  const {
+    as: Component = CalendarContainer,
+    bordered,
+    className,
+    classPrefix = 'calendar',
+    compact,
+    defaultValue = startOfDay(new Date()),
+    isoWeek,
+    weekStart = 0,
+    locale,
+    onChange,
+    onMonthChange,
+    onSelect,
+    renderCell,
+    value,
+    cellClassName,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    calendarDate,
+    setCalendarDate
+  } = useCalendarDate(value, defaultValue);
+  const handleChange = useEventCallback(nextValue => {
     setCalendarDate(nextValue);
     onChange === null || onChange === void 0 || onChange(nextValue);
     if (!isSameMonth(nextValue, calendarDate)) {
       onMonthChange === null || onMonthChange === void 0 || onMonthChange(nextValue);
     }
   });
-  var handleClickToday = useEventCallback(function () {
+  const handleClickToday = useEventCallback(() => {
     handleChange(new Date());
   });
-  var handleSelect = useEventCallback(function (nextValue) {
+  const handleSelect = useEventCallback(nextValue => {
     onSelect === null || onSelect === void 0 || onSelect(nextValue);
     handleChange(nextValue);
   });
-  var _useClassNames = useClassNames(classPrefix),
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix;
-  var renderToolbar = function renderToolbar() {
-    return /*#__PURE__*/React.createElement(Button, {
-      className: prefix('btn-today'),
-      size: "sm",
-      onClick: handleClickToday
-    }, (locale === null || locale === void 0 ? void 0 : locale.today) || 'Today');
-  };
-  var renderTitle = function renderTitle(date) {
-    return /*#__PURE__*/React.createElement(FormattedDate, {
-      date: date,
-      formatStr: (locale === null || locale === void 0 ? void 0 : locale.formattedMonthPattern) || 'MMMM  yyyy'
-    });
-  };
-  var classes = merge(className, withClassPrefix('panel', {
-    bordered: bordered,
-    compact: compact
+  const {
+    prefix,
+    merge,
+    withClassPrefix
+  } = useClassNames(classPrefix);
+  const renderToolbar = () => /*#__PURE__*/React.createElement(Button, {
+    className: prefix('btn-today'),
+    size: "sm",
+    onClick: handleClickToday
+  }, (locale === null || locale === void 0 ? void 0 : locale.today) || 'Today');
+  const renderTitle = date => /*#__PURE__*/React.createElement(FormattedDate, {
+    date: date,
+    formatStr: (locale === null || locale === void 0 ? void 0 : locale.formattedMonthPattern) || 'MMMM  yyyy'
+  });
+  const classes = merge(className, withClassPrefix('panel', {
+    bordered,
+    compact
   }));
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     inline: true,
@@ -97,18 +91,4 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 Calendar.displayName = 'Calendar';
-Calendar.propTypes = {
-  value: PropTypes.instanceOf(Date),
-  defaultValue: PropTypes.instanceOf(Date),
-  isoWeek: PropTypes.bool,
-  weekStart: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
-  compact: PropTypes.bool,
-  bordered: PropTypes.bool,
-  locale: PropTypes.object,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  onChange: PropTypes.func,
-  onSelect: PropTypes.func,
-  renderCell: PropTypes.func
-};
 export default Calendar;

package/esm/Calendar/CalendarBody.js

@@ -1,42 +1,42 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "className", "classPrefix"];
 import React from 'react';
 import Grid from "./Grid/index.js";
 import { getWeekStartDates, setDate } from "../internals/utils/date/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { useCalendar } from "./hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-var CalendarBody = /*#__PURE__*/React.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-body' : _props$classPrefix,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  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(),
-    getLocale = _useCustom.getLocale,
-    formatDate = _useCustom.formatDate;
-  var locale = getLocale('Calendar', overrideLocale);
-  var thisMonthDate = setDate(date, 1);
-  var _useClassNames = useClassNames(classPrefix),
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix;
-  var classes = merge(className, withClassPrefix());
+const CalendarBody = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as: Component = 'div',
+    className,
+    classPrefix = 'calendar-body',
+    ...rest
+  } = props;
+  const {
+    date = new Date(),
+    isoWeek,
+    locale: overrideLocale,
+    weekStart
+  } = useCalendar();
+  const {
+    getLocale,
+    formatDate
+  } = useCustom();
+  const locale = getLocale('Calendar', overrideLocale);
+  const thisMonthDate = setDate(date, 1);
+  const {
+    merge,
+    withClassPrefix
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/React.createElement(Grid, {
     rows: getWeekStartDates(thisMonthDate, {
-      isoWeek: isoWeek,
-      weekStart: weekStart,
+      isoWeek,
+      weekStart,
       locale: locale === null || locale === void 0 ? void 0 : locale.dateLocale
     }),
     "aria-label": formatDate(thisMonthDate, locale.formattedMonthPattern)

package/esm/Calendar/CalendarContainer.js

@@ -1,7 +1,5 @@
 '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", "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/index.js";
@@ -13,114 +11,109 @@ import { startOfToday, disableTime, isSameMonth, calendarOnlyProps, omitHideDisa
 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,
-    className = props.className,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'calendar' : _props$classPrefix,
-    calendarDateProp = props.calendarDate,
-    dateRange = props.dateRange,
-    disabledBackward = props.disabledBackward,
-    defaultState = props.defaultState,
-    disabledForward = props.disabledForward,
-    format = props.format,
-    hoverRangeValue = props.hoverRangeValue,
-    inline = props.inline,
-    _props$isoWeek = props.isoWeek,
-    isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
-    _props$weekStart = props.weekStart,
-    weekStart = _props$weekStart === void 0 ? 0 : _props$weekStart,
-    targetId = props.targetId,
-    limitEndYear = props.limitEndYear,
-    limitStartYear = props.limitStartYear,
-    locale = props.locale,
-    monthDropdownProps = props.monthDropdownProps,
-    showMeridiem = props.showMeridiem,
-    showWeekNumbers = props.showWeekNumbers,
-    cellClassName = props.cellClassName,
-    disabledDate = props.disabledDate,
-    onChangeMonth = props.onChangeMonth,
-    onChangeTime = props.onChangeTime,
-    onMouseMove = props.onMouseMove,
-    onMoveBackward = props.onMoveBackward,
-    onMoveForward = props.onMoveForward,
-    onSelect = props.onSelect,
-    onToggleMonthDropdown = props.onToggleMonthDropdown,
-    onToggleTimeDropdown = props.onToggleTimeDropdown,
-    renderCell = props.renderCell,
-    renderCellOnPicker = props.renderCellOnPicker,
-    renderTitle = props.renderTitle,
-    renderToolbar = props.renderToolbar,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge,
-    prefix = _useClassNames.prefix;
-  var calendarDate = useMemo(function () {
+const CalendarContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as: Component = 'div',
+    className,
+    classPrefix = 'calendar',
+    calendarDate: calendarDateProp,
+    dateRange,
+    disabledBackward,
+    defaultState,
+    disabledForward,
+    format,
+    hoverRangeValue,
+    inline,
+    isoWeek = false,
+    weekStart = 0,
+    targetId,
+    limitEndYear,
+    limitStartYear,
+    locale,
+    monthDropdownProps,
+    showMeridiem,
+    showWeekNumbers,
+    cellClassName,
+    disabledDate,
+    onChangeMonth,
+    onChangeTime,
+    onMouseMove,
+    onMoveBackward,
+    onMoveForward,
+    onSelect,
+    onToggleMonthDropdown,
+    onToggleTimeDropdown,
+    renderCell,
+    renderCellOnPicker,
+    renderTitle,
+    renderToolbar,
+    ...rest
+  } = props;
+  const {
+    withClassPrefix,
+    merge,
+    prefix
+  } = useClassNames(classPrefix);
+  const calendarDate = useMemo(() => {
     return isValid(calendarDateProp) ? calendarDateProp : startOfToday();
   }, [calendarDateProp]);
-  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) {
+  const {
+    calendarState,
+    reset,
+    handlers
+  } = useCalendarState({
+    defaultState,
+    calendarDate,
+    onMoveForward,
+    onMoveBackward,
+    onToggleTimeDropdown,
+    onToggleMonthDropdown
+  });
+  const 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 handleCloseDropdown = useEventCallback(function () {
-    return reset();
-  });
-  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({
+  const isTimeDisabled = date => disableTime(props, date);
+  const handleCloseDropdown = useEventCallback(() => reset());
+  const {
+    mode,
+    has
+  } = useDateMode(format);
+  const timeMode = calendarState === CalendarState.TIME || mode === DateMode.Time;
+  const monthMode = calendarState === CalendarState.MONTH || mode === DateMode.Month;
+  const inSameThisMonthDate = date => isSameMonth(calendarDate, date);
+  const calendarClasses = merge(className, withClassPrefix({
     'time-view': timeMode,
     'month-view': monthMode,
     'only-time': mode === DateMode.Time,
     'show-week-numbers': showWeekNumbers
   }));
-  var timeDropdownProps = pick(rest, calendarOnlyProps);
-  var handleChangeMonth = useEventCallback(function (date, event) {
+  const timeDropdownProps = pick(rest, calendarOnlyProps);
+  const handleChangeMonth = useEventCallback((date, event) => {
     reset();
     onChangeMonth === null || onChangeMonth === void 0 || onChangeMonth(date, event);
   });
-  var contextValue = {
+  const contextValue = {
     date: calendarDate,
-    dateRange: dateRange,
-    format: format,
-    hoverRangeValue: hoverRangeValue,
-    inline: inline,
-    isoWeek: isoWeek,
-    weekStart: weekStart,
-    targetId: targetId,
-    locale: locale,
-    showWeekNumbers: showWeekNumbers,
-    monthDropdownProps: monthDropdownProps,
-    cellClassName: cellClassName,
+    dateRange,
+    format,
+    hoverRangeValue,
+    inline,
+    isoWeek,
+    weekStart,
+    targetId,
+    locale,
+    showWeekNumbers,
+    monthDropdownProps,
+    cellClassName,
     disabledDate: isDateDisabled,
     inSameMonth: inSameThisMonthDate,
     onChangeMonth: handleChangeMonth,
-    onChangeTime: onChangeTime,
-    onMouseMove: onMouseMove,
-    onSelect: onSelect,
-    renderCell: renderCell,
-    renderCellOnPicker: renderCellOnPicker
+    onChangeTime,
+    onMouseMove,
+    onSelect,
+    renderCell,
+    renderCellOnPicker
   };
   return /*#__PURE__*/React.createElement(CalendarProvider, {
     value: contextValue
@@ -149,7 +142,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })), (monthMode || timeMode) && has('day') && /*#__PURE__*/React.createElement("button", {
     className: prefix('btn-close'),
     onClick: handleCloseDropdown,
-    "aria-label": "Collapse " + (monthMode ? 'month' : 'time') + " view"
+    "aria-label": `Collapse ${monthMode ? 'month' : 'time'} view`
   }, /*#__PURE__*/React.createElement(ArrowUpIcon, null))));
 });
 CalendarContainer.displayName = 'CalendarContainer';

package/esm/Calendar/CalendarHeader.js

@@ -1,7 +1,5 @@
 '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", "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';
@@ -12,76 +10,78 @@ import { extractTimeFormat } from "../internals/utils/date/index.js";
 import { FormattedDate } from "../CustomProvider/index.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,
-    className = props.className,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'calendar-header' : _props$classPrefix,
-    disabledBackward = props.disabledBackward,
-    disabledForward = props.disabledForward,
-    showDate = props.showDate,
-    showMonth = props.showMonth,
-    showTime = props.showTime,
-    disabledTime = props.disabledTime,
-    onMoveBackward = props.onMoveBackward,
-    onMoveForward = props.onMoveForward,
-    onToggleMonthDropdown = props.onToggleMonthDropdown,
-    onToggleTimeDropdown = props.onToggleTimeDropdown,
-    renderTitleProp = props.renderTitle,
-    renderToolbar = props.renderToolbar,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  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,
-    merge = _useClassNames.merge;
-  var btnProps = {
+const CalendarHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as: Component = 'div',
+    className,
+    classPrefix = 'calendar-header',
+    disabledBackward,
+    disabledForward,
+    showDate,
+    showMonth,
+    showTime,
+    disabledTime,
+    onMoveBackward,
+    onMoveForward,
+    onToggleMonthDropdown,
+    onToggleTimeDropdown,
+    renderTitle: renderTitleProp,
+    renderToolbar,
+    ...rest
+  } = props;
+  const {
+    locale,
+    date = new Date(),
+    format,
+    inline,
+    disabledDate,
+    targetId
+  } = useCalendar();
+  const {
+    isSelectedIdle
+  } = useDateRangePicker();
+  const {
+    prefix,
+    withClassPrefix,
+    merge
+  } = useClassNames(classPrefix);
+  const btnProps = {
     appearance: 'subtle',
     size: inline ? 'sm' : 'xs'
   };
-  var timeFormat = useMemo(function () {
-    var defaultTimeFormat = (locale === null || locale === void 0 ? void 0 : locale.shortTimeFormat) || 'HH:mm';
+  const timeFormat = useMemo(() => {
+    const defaultTimeFormat = (locale === null || locale === void 0 ? void 0 : locale.shortTimeFormat) || 'HH:mm';
     if (!format) {
       return defaultTimeFormat;
     }
     return extractTimeFormat(format) || defaultTimeFormat;
   }, [format, locale]);
-  var dateFormat = useMemo(function () {
+  const dateFormat = useMemo(() => {
     if (showMonth) {
       return (locale === null || locale === void 0 ? void 0 : locale.formattedMonthPattern) || 'yyyy-MM';
     }
     return 'yyyy';
   }, [locale, showMonth]);
-  var renderTitle = function renderTitle() {
+  const 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: dateFormat
     });
   };
-  var dateTitleClasses = prefix('title', 'title-date', {
+  const dateTitleClasses = prefix('title', 'title-date', {
     error: disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)
   });
-  var timeTitleClasses = prefix('title', 'title-time', {
+  const timeTitleClasses = prefix('title', 'title-time', {
     error: disabledTime === null || disabledTime === void 0 ? void 0 : disabledTime(date)
   });
-  var backwardClass = prefix('backward', {
+  const backwardClass = prefix('backward', {
     'btn-disabled': disabledBackward
   });
-  var forwardClass = prefix('forward', {
+  const forwardClass = prefix('forward', {
     'btn-disabled': disabledForward
   });
-  var monthToolbar = /*#__PURE__*/React.createElement("div", {
+  const monthToolbar = /*#__PURE__*/React.createElement("div", {
     className: prefix('month-toolbar')
   }, /*#__PURE__*/React.createElement(IconButton, _extends({}, btnProps, {
     // TODO: aria-label should be translated by i18n
@@ -91,7 +91,7 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     icon: /*#__PURE__*/React.createElement(PagePreviousIcon, null)
   })), /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
     "aria-label": "Select month",
-    id: targetId ? targetId + "-grid-label" : undefined,
+    id: targetId ? `${targetId}-grid-label` : undefined,
     className: dateTitleClasses,
     onClick: onToggleMonthDropdown
   }), renderTitle()), /*#__PURE__*/React.createElement(IconButton, _extends({}, btnProps, {
@@ -100,14 +100,14 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: disabledForward ? undefined : onMoveForward,
     icon: /*#__PURE__*/React.createElement(PageNextIcon, null)
   })));
-  var hasMonth = showDate || showMonth;
-  var classes = merge(className, withClassPrefix({
+  const hasMonth = showDate || showMonth;
+  const classes = merge(className, withClassPrefix({
     'has-month': hasMonth,
     'has-time': showTime
   }));
 
   // If the date is not selected, the time cannot be selected (it only works in DateRangePicker).
-  var disableSelectTime = typeof isSelectedIdle === 'undefined' ? false : !isSelectedIdle;
+  const disableSelectTime = typeof isSelectedIdle === 'undefined' ? false : !isSelectedIdle;
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes