rsuite 5.76.0 → 6.0.0-canary-20241227

package/esm/DateRangeInput/DateRangeInput.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", "character", "format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus", "onPaste"];
 import React, { useState, useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import Input from "../Input/index.js";
 import { isValid } from "../internals/utils/date/index.js";
 import { useClassNames, useControlled, useEventCallback } from "../internals/hooks/index.js";
@@ -16,98 +13,96 @@ import { getInputSelectedState, DateType, getDateType, isSwitchDateType } from "
  * @version 5.59.0
  * @see https://rsuitejs.com/components/date-range-input/
  */
-var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = useCustom('Calendar', props),
-    propsWithDefaults = _useCustom.propsWithDefaults,
-    parseDate = _useCustom.parseDate,
-    getLocale = _useCustom.getLocale;
-  var _getLocale = getLocale('DateTimeFormats'),
-    shortDateFormat = _getLocale.shortDateFormat,
-    dateLocale = _getLocale.dateLocale;
-  var className = propsWithDefaults.className,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'date-range-input' : _propsWithDefaults$cl,
-    _propsWithDefaults$ch = propsWithDefaults.character,
-    character = _propsWithDefaults$ch === void 0 ? ' ~ ' : _propsWithDefaults$ch,
-    _propsWithDefaults$fo = propsWithDefaults.format,
-    formatStr = _propsWithDefaults$fo === void 0 ? shortDateFormat : _propsWithDefaults$fo,
-    valueProp = propsWithDefaults.value,
-    _propsWithDefaults$de = propsWithDefaults.defaultValue,
-    defaultValue = _propsWithDefaults$de === void 0 ? [] : _propsWithDefaults$de,
-    placeholder = propsWithDefaults.placeholder,
-    onChange = propsWithDefaults.onChange,
-    onKeyDown = propsWithDefaults.onKeyDown,
-    onBlur = propsWithDefaults.onBlur,
-    onFocus = propsWithDefaults.onFocus,
-    onPaste = propsWithDefaults.onPaste,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix());
-  var inputRef = useRef();
-  var _useSelectedState = useSelectedState(),
-    selectedState = _useSelectedState.selectedState,
-    setSelectedState = _useSelectedState.setSelectedState;
-  var rangeFormatStr = "" + formatStr + character + formatStr;
-  var _useControlled = useControlled(valueProp, defaultValue),
-    value = _useControlled[0],
-    setValue = _useControlled[1],
-    isControlled = _useControlled[2];
-  var _useState = useState(DateType.Start),
-    dateType = _useState[0],
-    setDateType = _useState[1];
-  var dateInputOptions = {
-    formatStr: formatStr,
+const DateRangeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults,
+    parseDate,
+    getLocale
+  } = useCustom('Calendar', props);
+  const {
+    shortDateFormat,
+    dateLocale
+  } = getLocale('DateTimeFormats');
+  const {
+    className,
+    classPrefix = 'date-range-input',
+    character = ' ~ ',
+    format: formatStr = shortDateFormat,
+    value: valueProp,
+    defaultValue = [],
+    placeholder,
+    onChange,
+    onKeyDown,
+    onBlur,
+    onFocus,
+    onPaste,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withClassPrefix,
+    merge
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix());
+  const inputRef = useRef();
+  const {
+    selectedState,
+    setSelectedState
+  } = useSelectedState();
+  const rangeFormatStr = `${formatStr}${character}${formatStr}`;
+  const [value, setValue, isControlled] = useControlled(valueProp, defaultValue);
+  const [dateType, setDateType] = useState(DateType.Start);
+  const dateInputOptions = {
+    formatStr,
     locale: dateLocale,
     isControlledDate: isControlled
   };
-  var startDateState = useDateInputState(_extends({}, dateInputOptions, {
+  const startDateState = useDateInputState({
+    ...dateInputOptions,
     date: (value === null || value === void 0 ? void 0 : value[0]) || null
-  }));
-  var endDateState = useDateInputState(_extends({}, dateInputOptions, {
+  });
+  const endDateState = useDateInputState({
+    ...dateInputOptions,
     date: (value === null || value === void 0 ? void 0 : value[1]) || null
-  }));
-  var _useFieldCursor = useFieldCursor(formatStr, valueProp),
-    isMoveCursor = _useFieldCursor.isMoveCursor,
-    isResetValue = _useFieldCursor.isResetValue,
-    increment = _useFieldCursor.increment,
-    reset = _useFieldCursor.reset;
-  var getActiveState = function getActiveState(type) {
+  });
+  const {
+    isMoveCursor,
+    isResetValue,
+    increment,
+    reset
+  } = useFieldCursor(formatStr, valueProp);
+  const getActiveState = function (type) {
     if (type === void 0) {
       type = dateType;
     }
     return type === DateType.Start ? startDateState : endDateState;
   };
-  var _useIsFocused = useIsFocused({
-      onBlur: onBlur,
-      onFocus: onFocus
-    }),
-    focused = _useIsFocused[0],
-    focusEventProps = _useIsFocused[1];
-  var renderedValue = useMemo(function () {
-    var dateString = startDateState.toDateString() + character + endDateState.toDateString();
+  const [focused, focusEventProps] = useIsFocused({
+    onBlur,
+    onFocus
+  });
+  const renderedValue = useMemo(() => {
+    const dateString = startDateState.toDateString() + character + endDateState.toDateString();
     if (!startDateState.isEmptyValue() || !endDateState.isEmptyValue()) {
       return dateString;
     }
     return !focused ? '' : dateString;
   }, [character, endDateState, focused, startDateState]);
-  var keyPressOptions = {
-    formatStr: formatStr,
-    rangeFormatStr: rangeFormatStr,
+  const keyPressOptions = {
+    formatStr,
+    rangeFormatStr,
     localize: dateLocale.localize,
     selectedMonth: getActiveState().dateField.month,
     dateString: renderedValue,
-    dateType: dateType,
-    character: character
+    dateType,
+    character
   };
-  var setSelectionRange = useInputSelection(inputRef);
-  var handleChange = useEventCallback(function (date, event) {
-    var nextValue = dateType === DateType.Start ? [date, value === null || value === void 0 ? void 0 : value[1]] : [value === null || value === void 0 ? void 0 : value[0], date];
+  const setSelectionRange = useInputSelection(inputRef);
+  const handleChange = useEventCallback((date, event) => {
+    const nextValue = dateType === DateType.Start ? [date, value === null || value === void 0 ? void 0 : value[1]] : [value === null || value === void 0 ? void 0 : value[0], date];
     onChange === null || onChange === void 0 || onChange(nextValue, event);
     setValue(nextValue);
   });
-  var handleClear = useEventCallback(function (event) {
+  const handleClear = useEventCallback(event => {
     startDateState.setNewDate(null);
     endDateState.setNewDate(null);
     setSelectionRange(0, 0);
@@ -115,25 +110,26 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setValue(null);
     onChange === null || onChange === void 0 || onChange(null, event);
   });
-  var onSegmentChange = useEventCallback(function (event, nextDirection) {
-    var input = event.target;
-    var key = event.key;
-    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
+  const onSegmentChange = useEventCallback((event, nextDirection) => {
+    const input = event.target;
+    const key = event.key;
+    const direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
     if (input.selectionEnd === null || input.selectionStart === null) {
       return;
     }
-    var cursorIndex = direction === 'right' ? input.selectionEnd : input.selectionStart;
-    var nextDateType = dateType;
+    const cursorIndex = direction === 'right' ? input.selectionEnd : input.selectionStart;
+    let nextDateType = dateType;
     if (isSwitchDateType(renderedValue, character, cursorIndex, direction)) {
       nextDateType = dateType === DateType.Start ? DateType.End : DateType.Start;
       setDateType(nextDateType);
     }
-    var state = getInputSelectedState(_extends({}, keyPressOptions, {
+    const state = getInputSelectedState({
+      ...keyPressOptions,
       dateType: nextDateType,
       selectedMonth: getActiveState(nextDateType).dateField.month,
-      input: input,
-      direction: direction
-    }));
+      input,
+      direction
+    });
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
 
@@ -142,47 +138,45 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       reset();
     }
   });
-  var onSegmentValueChange = useEventCallback(function (event) {
-    var input = event.target;
-    var key = event.key;
-    var offset = key === 'ArrowUp' ? 1 : -1;
-    var state = getInputSelectedState(_extends({}, keyPressOptions, {
-      input: input,
+  const onSegmentValueChange = useEventCallback(event => {
+    const input = event.target;
+    const key = event.key;
+    const offset = key === 'ArrowUp' ? 1 : -1;
+    const state = getInputSelectedState({
+      ...keyPressOptions,
+      input,
       valueOffset: offset
-    }));
-    setSelectedState(state);
-    getActiveState().setDateOffset(state.selectedPattern, offset, function (date) {
-      return handleChange(date, event);
     });
+    setSelectedState(state);
+    getActiveState().setDateOffset(state.selectedPattern, offset, date => handleChange(date, event));
     setSelectionRange(state.selectionStart, state.selectionEnd);
   });
-  var onSegmentValueChangeWithNumericKeys = useEventCallback(function (event) {
-    var input = event.target;
-    var key = event.key;
-    var pattern = selectedState.selectedPattern;
+  const onSegmentValueChangeWithNumericKeys = useEventCallback(event => {
+    const input = event.target;
+    const key = event.key;
+    const pattern = selectedState.selectedPattern;
     if (!pattern) {
       return;
     }
-    var field = getActiveState().getDateField(pattern);
-    var value = parseInt(key, 10);
-    var padValue = parseInt("" + (field.value || '') + key, 10);
-    var newValue = value;
+    const field = getActiveState().getDateField(pattern);
+    const value = parseInt(key, 10);
+    const padValue = parseInt(`${field.value || ''}${key}`, 10);
+    let newValue = value;
 
     // Check if the value entered by the user is a valid date
     if (validateDateTime(field.name, padValue) && !isResetValue()) {
       newValue = padValue;
     }
-    getActiveState().setDateField(pattern, newValue, function (date) {
-      return handleChange(date, event);
-    });
+    getActiveState().setDateField(pattern, newValue, date => handleChange(date, event));
 
     // The currently selected month will be retained as a parameter of getInputSelectedState,
     // but if the user enters a month, the month value will be replaced with the value entered by the user.
-    var selectedMonth = pattern === 'M' ? newValue : getActiveState().dateField.month;
-    var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
-      input: input,
-      selectedMonth: selectedMonth
-    }));
+    const selectedMonth = pattern === 'M' ? newValue : getActiveState().dateField.month;
+    const nextState = getInputSelectedState({
+      ...keyPressOptions,
+      input,
+      selectedMonth
+    });
     setSelectedState(nextState);
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
     increment();
@@ -192,36 +186,36 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSegmentChange(event, 'right');
     }
   });
-  var onSegmentValueRemove = useEventCallback(function (event) {
-    var input = event.target;
-    var value = input.value;
+  const onSegmentValueRemove = useEventCallback(event => {
+    const input = event.target;
+    const value = input.value;
     if (input.selectionStart === 0 && value && input.selectionEnd === value.length) {
       handleClear(event);
     } else if (selectedState.selectedPattern) {
-      var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
-        input: input,
+      const nextState = getInputSelectedState({
+        ...keyPressOptions,
+        input,
         valueOffset: null
-      }));
+      });
       setSelectedState(nextState);
       setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
-      getActiveState().setDateField(selectedState.selectedPattern, null, function (date) {
-        return handleChange(date, event);
-      });
+      getActiveState().setDateField(selectedState.selectedPattern, null, date => handleChange(date, event));
       reset();
     }
   });
-  var handleClick = useEventCallback(function (event) {
-    var input = event.target;
+  const handleClick = useEventCallback(event => {
+    const input = event.target;
     if (input.selectionStart === null) {
       return;
     }
-    var cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
-    var dateType = getDateType(renderedValue || rangeFormatStr, character, cursorIndex);
-    var state = getInputSelectedState(_extends({}, keyPressOptions, {
-      dateType: dateType,
+    const cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
+    const dateType = getDateType(renderedValue || rangeFormatStr, character, cursorIndex);
+    const state = getInputSelectedState({
+      ...keyPressOptions,
+      dateType,
       selectedMonth: getActiveState(dateType).dateField.month,
-      input: input
-    }));
+      input
+    });
     setDateType(dateType);
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
@@ -229,17 +223,13 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       reset();
     }
   });
-  var handlePaste = useEventCallback(function (event) {
+  const handlePaste = useEventCallback(event => {
     var _event$clipboardData;
     event.preventDefault();
-    var pasteText = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text');
-    var _ref = pasteText.split(character).map(function (date) {
-        return parseDate(date, formatStr);
-      }),
-      start = _ref[0],
-      end = _ref[1];
+    const pasteText = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text');
+    const [start, end] = pasteText.split(character).map(date => parseDate(date, formatStr));
     if (isValid(start) && isValid(end)) {
-      var nextValue = [start, end];
+      const nextValue = [start, end];
       onChange === null || onChange === void 0 || onChange(nextValue, event);
       setValue(nextValue);
       startDateState.setNewDate(start);
@@ -247,12 +237,12 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     onPaste === null || onPaste === void 0 || onPaste(event);
   });
-  var onKeyboardInput = useKeyboardInputEvent({
-    onSegmentChange: onSegmentChange,
-    onSegmentValueChange: onSegmentValueChange,
-    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,
-    onSegmentValueRemove: onSegmentValueRemove,
-    onKeyDown: onKeyDown
+  const onKeyboardInput = useKeyboardInputEvent({
+    onSegmentChange,
+    onSegmentValueChange,
+    onSegmentValueChangeWithNumericKeys,
+    onSegmentValueRemove,
+    onKeyDown
   });
   return /*#__PURE__*/React.createElement(Input, _extends({
     inputMode: focused ? 'numeric' : 'text',
@@ -269,15 +259,4 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, focusEventProps, rest));
 });
 DateRangeInput.displayName = 'DateRangeInput';
-DateRangeInput.propTypes = {
-  character: PropTypes.string,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  format: PropTypes.string,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func
-};
 export default DateRangeInput;

package/esm/DateRangeInput/utils.js

@@ -1,61 +1,61 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { getSelectIndexGap, isCursorAfterMonth, getDatePattern } from "../DateInput/index.js";
-export var DateType = /*#__PURE__*/function (DateType) {
+export let DateType = /*#__PURE__*/function (DateType) {
   DateType["Start"] = "Start";
   DateType["End"] = "End";
   return DateType;
 }({});
 export function getInputSelectedState(options) {
-  var input = options.input,
-    direction = options.direction,
-    formatStr = options.formatStr,
-    rangeFormatStr = options.rangeFormatStr,
-    localize = options.localize,
-    selectedMonth = options.selectedMonth,
-    _options$valueOffset = options.valueOffset,
-    valueOffset = _options$valueOffset === void 0 ? 0 : _options$valueOffset,
-    character = options.character,
-    dateType = options.dateType,
-    dateString = options.dateString;
-  var getPatternSelectedIndexes = function getPatternSelectedIndexes(pattern) {
-    var selectionStart = 0;
-    var selectionEnd = 0;
+  const {
+    input,
+    direction,
+    formatStr,
+    rangeFormatStr,
+    localize,
+    selectedMonth,
+    valueOffset = 0,
+    character,
+    dateType,
+    dateString
+  } = options;
+  const getPatternSelectedIndexes = pattern => {
+    let selectionStart = 0;
+    let selectionEnd = 0;
     if (dateType === DateType.Start) {
       selectionStart = rangeFormatStr.indexOf(pattern);
       selectionEnd = rangeFormatStr.split(character)[0].lastIndexOf(pattern) + 1;
     } else if (dateType === DateType.End) {
-      var position = rangeFormatStr.indexOf(character) + character.length;
+      const position = rangeFormatStr.indexOf(character) + character.length;
       selectionStart = rangeFormatStr.indexOf(pattern, position);
       selectionEnd = rangeFormatStr.lastIndexOf(pattern) + 1;
     }
-    var endDateGap = dateString.indexOf(character) - rangeFormatStr.indexOf(character);
+    const endDateGap = dateString.indexOf(character) - rangeFormatStr.indexOf(character);
 
     // If the date type is end, and the end date is not selected, the selection range needs to be adjusted.
     if (dateType === DateType.End && endDateGap > 0) {
       selectionStart += endDateGap;
       selectionEnd += endDateGap;
     }
-    var gap = getSelectIndexGap({
-      pattern: pattern,
-      formatStr: formatStr,
-      valueOffset: valueOffset,
-      selectedMonth: selectedMonth,
-      localize: localize
+    const gap = getSelectIndexGap({
+      pattern,
+      formatStr,
+      valueOffset,
+      selectedMonth,
+      localize
     });
-    var isSelectedMonth = pattern === 'M';
-    var isNullMonth = selectedMonth === null && !(isSelectedMonth && valueOffset !== 0);
+    const isSelectedMonth = pattern === 'M';
+    const isNullMonth = selectedMonth === null && !(isSelectedMonth && valueOffset !== 0);
 
     // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.
     if (isNullMonth) {
       return {
-        selectionStart: selectionStart,
-        selectionEnd: selectionEnd
+        selectionStart,
+        selectionEnd
       };
     }
     if (isSelectedMonth) {
       return {
-        selectionStart: selectionStart,
+        selectionStart,
         selectionEnd: selectionEnd + gap
       };
     }
@@ -66,13 +66,13 @@ export function getInputSelectedState(options) {
       };
     }
     return {
-      selectionStart: selectionStart,
-      selectionEnd: selectionEnd
+      selectionStart,
+      selectionEnd
     };
   };
   if (typeof input.selectionEnd === 'number' && typeof input.selectionStart === 'number') {
-    var index = input.selectionStart;
-    var positionOffset = -1;
+    let index = input.selectionStart;
+    let positionOffset = -1;
     if (direction === 'left') {
       index = input.selectionStart - 1;
     } else if (direction === 'right') {
@@ -81,20 +81,21 @@ export function getInputSelectedState(options) {
     }
 
     // The start position of the index of the end date
-    var endDateIndex = dateString.indexOf(character) + character.length;
-    var datePattern = getDatePattern({
+    const endDateIndex = dateString.indexOf(character) + character.length;
+    const datePattern = getDatePattern({
       selectionIndex: dateType === DateType.End ? index - endDateIndex : index,
-      positionOffset: positionOffset,
-      formatStr: formatStr,
-      dateString: dateString,
-      valueOffset: valueOffset,
-      selectedMonth: selectedMonth,
-      localize: localize
+      positionOffset,
+      formatStr,
+      dateString,
+      valueOffset,
+      selectedMonth,
+      localize
     });
-    var indexes = getPatternSelectedIndexes(datePattern);
-    return _extends({
-      selectedPattern: datePattern
-    }, indexes);
+    const indexes = getPatternSelectedIndexes(datePattern);
+    return {
+      selectedPattern: datePattern,
+      ...indexes
+    };
   }
   return {
     selectedPattern: 'y',
@@ -103,16 +104,16 @@ export function getInputSelectedState(options) {
   };
 }
 export function getDateType(dateString, character, cursorIndex) {
-  var splitIndex = dateString.indexOf(character);
+  const splitIndex = dateString.indexOf(character);
   if (cursorIndex > splitIndex) {
     return DateType.End;
   }
   return DateType.Start;
 }
 export function isSwitchDateType(dateString, character, cursorIndex, direction) {
-  var characterIndex = dateString.indexOf(character);
-  var startIndex = cursorIndex;
-  var endIndex = startIndex + character.length;
+  const characterIndex = dateString.indexOf(character);
+  let startIndex = cursorIndex;
+  let endIndex = startIndex + character.length;
   if (direction === 'left') {
     endIndex = cursorIndex;
     startIndex = endIndex - character.length;

package/esm/DateRangePicker/Calendar.js

@@ -1,42 +1,37 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "calendarDateRange", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onSelect", "value"];
 import React, { useCallback } from 'react';
 import CalendarContainer from "../Calendar/CalendarContainer.js";
 import { addMonths, startOfToday } from "../internals/utils/date/index.js";
 import { DATERANGE_DISABLED_TARGET } from "../internals/constants/index.js";
 import { useCalendarHandlers } from "./hooks/index.js";
-var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? CalendarContainer : _props$as,
-    _props$calendarDateRa = props.calendarDateRange,
-    calendarDateRange = _props$calendarDateRa === void 0 ? [startOfToday(), addMonths(startOfToday(), 1)] : _props$calendarDateRa,
-    _props$format = props.format,
-    format = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
-    disabledDate = props.disabledDate,
-    _props$index = props.index,
-    index = _props$index === void 0 ? 0 : _props$index,
-    limitEndYear = props.limitEndYear,
-    limitStartYear = props.limitStartYear,
-    onChangeCalendarMonth = props.onChangeCalendarMonth,
-    onChangeCalendarTime = props.onChangeCalendarTime,
-    onSelect = props.onSelect,
-    _props$value = props.value,
-    value = _props$value === void 0 ? [] : _props$value,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var calendarHandlers = useCalendarHandlers({
-    index: index,
-    calendarDateRange: calendarDateRange,
-    onChangeCalendarMonth: onChangeCalendarMonth,
-    onChangeCalendarTime: onChangeCalendarTime,
-    onSelect: onSelect
+const Calendar = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as: Component = CalendarContainer,
+    calendarDateRange = [startOfToday(), addMonths(startOfToday(), 1)],
+    format = 'yyyy-MM-dd',
+    disabledDate,
+    index = 0,
+    limitEndYear,
+    limitStartYear,
+    onChangeCalendarMonth,
+    onChangeCalendarTime,
+    onSelect,
+    value = [],
+    ...rest
+  } = props;
+  const calendarHandlers = useCalendarHandlers({
+    index,
+    calendarDateRange,
+    onChangeCalendarMonth,
+    onChangeCalendarTime,
+    onSelect
   });
-  var disableCalendarDate = useCallback(function (date) {
+  const disableCalendarDate = useCallback(date => {
     return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, DATERANGE_DISABLED_TARGET.CALENDAR);
   }, [disabledDate, value]);
   return /*#__PURE__*/React.createElement(Component, _extends({
-    "data-testid": "calendar-" + (index === 0 ? 'start' : 'end')
+    "data-testid": `calendar-${index === 0 ? 'start' : 'end'}`
   }, rest, calendarHandlers, {
     index: index,
     format: format,