rsuite 5.39.0 → 5.41.0

package/esm/CustomProvider/CustomProvider.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useEffect } from 'react';
@@ -7,24 +8,20 @@ import ToastContainer, { toastPlacements } from '../toaster/ToastContainer';
 import { usePortal } from '../utils';
 var CustomContext = /*#__PURE__*/React.createContext({});
 var themes = ['light', 'dark', 'high-contrast'];
-
 var CustomProvider = function CustomProvider(props) {
   var children = props.children,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? getClassNamePrefix() : _props$classPrefix,
-      theme = props.theme,
-      container = props.toastContainer,
-      disableRipple = props.disableRipple,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "classPrefix", "theme", "toastContainer", "disableRipple"]);
-
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? getClassNamePrefix() : _props$classPrefix,
+    theme = props.theme,
+    container = props.toastContainer,
+    disableRipple = props.disableRipple,
+    rest = _objectWithoutPropertiesLoose(props, ["children", "classPrefix", "theme", "toastContainer", "disableRipple"]);
   var toasters = React.useRef(new Map());
-
   var _usePortal = usePortal({
-    container: container,
-    waitMount: true
-  }),
-      Portal = _usePortal.Portal;
-
+      container: container,
+      waitMount: true
+    }),
+    Portal = _usePortal.Portal;
   var value = React.useMemo(function () {
     return _extends({
       classPrefix: classPrefix,
@@ -35,8 +32,9 @@ var CustomProvider = function CustomProvider(props) {
   }, [classPrefix, theme, disableRipple, rest]);
   useEffect(function () {
     if (canUseDOM && theme) {
-      addClass(document.body, prefix(classPrefix, "theme-" + theme)); // Remove the className that will cause style conflicts
+      addClass(document.body, prefix(classPrefix, "theme-" + theme));
 
+      // Remove the className that will cause style conflicts
       themes.forEach(function (t) {
         if (t !== theme) {
           removeClass(document.body, prefix(classPrefix, "theme-" + t));
@@ -58,6 +56,5 @@ var CustomProvider = function CustomProvider(props) {
     });
   }))));
 };
-
 export { CustomContext };
 export default CustomProvider;

package/esm/CustomProvider/FormattedDate.js

@@ -1,14 +1,11 @@
+'use client';
 import React from 'react';
 import { useCustom } from '../utils';
-
 function FormattedDate(_ref) {
   var date = _ref.date,
-      formatStr = _ref.formatStr;
-
+    formatStr = _ref.formatStr;
   var _useCustom = useCustom('Calendar'),
-      formatDate = _useCustom.formatDate;
-
+    formatDate = _useCustom.formatDate;
   return /*#__PURE__*/React.createElement(React.Fragment, null, formatDate(date, formatStr));
 }
-
 export default FormattedDate;

package/esm/CustomProvider/index.js

@@ -1,3 +1,4 @@
+'use client';
 import CustomProvider, { CustomContext } from './CustomProvider';
 import FormattedDate from './FormattedDate';
 export { CustomContext, FormattedDate };

package/esm/DOMHelper/index.js

@@ -1,10 +1,9 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as helpers from 'dom-lib';
 import isElement from './isElement';
 export * from 'dom-lib';
-
 var DOMHelper = _extends({}, helpers, {
   isElement: isElement
 });
-
 export default DOMHelper;

package/esm/DOMHelper/isElement.js

@@ -1,5 +1,5 @@
+'use client';
 var isElement = function isElement(value) {
   return (value === null || value === void 0 ? void 0 : value.nodeType) === 1 && typeof (value === null || value === void 0 ? void 0 : value.nodeName) === 'string';
 };
-
 export default isElement;

package/esm/DatePicker/DatePicker.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useMemo, useRef, useState } from 'react';
@@ -19,89 +20,82 @@ import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
 import { deprecatePropTypeNew } from '../utils/deprecatePropType';
 var DatePicker = /*#__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 ? 'picker' : _props$classPrefix,
-      calendarDefaultDate = props.calendarDefaultDate,
-      _props$cleanable = props.cleanable,
-      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
-      _props$editable = props.editable,
-      editable = _props$editable === void 0 ? true : _props$editable,
-      defaultValue = props.defaultValue,
-      disabled = props.disabled,
-      _props$format = props.format,
-      formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
-      isoWeek = props.isoWeek,
-      _props$limitEndYear = props.limitEndYear,
-      limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
-      limitStartYear = props.limitStartYear,
-      overrideLocale = props.locale,
-      menuClassName = props.menuClassName,
-      _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      oneTap = props.oneTap,
-      _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
-      ranges = props.ranges,
-      valueProp = props.value,
-      showMeridian = props.showMeridian,
-      showWeekNumbers = props.showWeekNumbers,
-      style = props.style,
-      toggleAs = props.toggleAs,
-      caretAsProp = props.caretAs,
-      DEPRECATED_disabledDate = props.disabledDate,
-      DEPRECATED_disabledHours = props.disabledHours,
-      DEPRECATED_disabledMinutes = props.disabledMinutes,
-      DEPRECATED_disabledSeconds = props.disabledSeconds,
-      shouldDisableDate = props.shouldDisableDate,
-      shouldDisableHour = props.shouldDisableHour,
-      shouldDisableMinute = props.shouldDisableMinute,
-      shouldDisableSecond = props.shouldDisableSecond,
-      renderValue = props.renderValue,
-      onChange = props.onChange,
-      onChangeCalendarDate = props.onChangeCalendarDate,
-      onClean = props.onClean,
-      onClose = props.onClose,
-      onEntered = props.onEntered,
-      onExited = props.onExited,
-      onNextMonth = props.onNextMonth,
-      onOk = props.onOk,
-      onOpen = props.onOpen,
-      onPrevMonth = props.onPrevMonth,
-      onSelect = props.onSelect,
-      onToggleMonthDropdown = props.onToggleMonthDropdown,
-      onToggleTimeDropdown = props.onToggleTimeDropdown,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
+    calendarDefaultDate = props.calendarDefaultDate,
+    _props$cleanable = props.cleanable,
+    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+    _props$editable = props.editable,
+    editable = _props$editable === void 0 ? true : _props$editable,
+    defaultValue = props.defaultValue,
+    disabled = props.disabled,
+    _props$format = props.format,
+    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    isoWeek = props.isoWeek,
+    _props$limitEndYear = props.limitEndYear,
+    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
+    limitStartYear = props.limitStartYear,
+    overrideLocale = props.locale,
+    menuClassName = props.menuClassName,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    oneTap = props.oneTap,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
+    ranges = props.ranges,
+    valueProp = props.value,
+    showMeridian = props.showMeridian,
+    showWeekNumbers = props.showWeekNumbers,
+    style = props.style,
+    toggleAs = props.toggleAs,
+    caretAsProp = props.caretAs,
+    DEPRECATED_disabledDate = props.disabledDate,
+    DEPRECATED_disabledHours = props.disabledHours,
+    DEPRECATED_disabledMinutes = props.disabledMinutes,
+    DEPRECATED_disabledSeconds = props.disabledSeconds,
+    shouldDisableDate = props.shouldDisableDate,
+    shouldDisableHour = props.shouldDisableHour,
+    shouldDisableMinute = props.shouldDisableMinute,
+    shouldDisableSecond = props.shouldDisableSecond,
+    renderValue = props.renderValue,
+    onChange = props.onChange,
+    onChangeCalendarDate = props.onChangeCalendarDate,
+    onClean = props.onClean,
+    onClose = props.onClose,
+    onEntered = props.onEntered,
+    onExited = props.onExited,
+    onNextMonth = props.onNextMonth,
+    onOk = props.onOk,
+    onOpen = props.onOpen,
+    onPrevMonth = props.onPrevMonth,
+    onSelect = props.onSelect,
+    onToggleMonthDropdown = props.onToggleMonthDropdown,
+    onToggleTimeDropdown = props.onToggleTimeDropdown,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
   var _useCustom = useCustom('DatePicker', overrideLocale),
-      locale = _useCustom.locale,
-      formatDate = _useCustom.formatDate,
-      parseDate = _useCustom.parseDate;
-
+    locale = _useCustom.locale,
+    formatDate = _useCustom.formatDate,
+    parseDate = _useCustom.parseDate;
   var _useClassNames = useClassNames(classPrefix),
-      merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix;
-
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
   var _useControlled = useControlled(valueProp, defaultValue),
-      value = _useControlled[0],
-      setValue = _useControlled[1];
-
+    value = _useControlled[0],
+    setValue = _useControlled[1];
   var _useCalendarDate = useCalendarDate(value, calendarDefaultDate),
-      calendarDate = _useCalendarDate.calendarDate,
-      setCalendarDate = _useCalendarDate.setCalendarDate,
-      resetCalendarDate = _useCalendarDate.resetCalendarDate;
-
+    calendarDate = _useCalendarDate.calendarDate,
+    setCalendarDate = _useCalendarDate.setCalendarDate,
+    resetCalendarDate = _useCalendarDate.resetCalendarDate;
   var _useState = useState(),
-      inputState = _useState[0],
-      setInputState = _useState[1];
-
+    inputState = _useState[0],
+    setInputState = _useState[1];
   var _useState2 = useState(false),
-      active = _useState2[0],
-      setActive = _useState2[1];
-
+    active = _useState2[0],
+    setActive = _useState2[1];
   var triggerRef = useRef(null);
   var rootRef = useRef(null);
   var targetRef = useRef(null);
@@ -112,49 +106,48 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     overlayRef: overlayRef,
     targetRef: targetRef
   });
+
   /**
    * Switch to the callback triggered after the next month.
    */
-
   var handleMoveForward = useCallback(function (nextPageDate) {
     setCalendarDate(nextPageDate);
     onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);
   }, [onChangeCalendarDate, onNextMonth, setCalendarDate]);
+
   /**
    * Switch to the callback triggered after the previous month.
    */
-
   var handleMoveBackward = useCallback(function (nextPageDate) {
     setCalendarDate(nextPageDate);
     onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);
   }, [onChangeCalendarDate, onPrevMonth, setCalendarDate]);
+
   /**
    * The callback triggered when the date changes.
    */
-
   var handleDateChange = useCallback(function (nextValue, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);
   }, [onChangeCalendarDate, onSelect]);
+
   /**
    *  A callback triggered when the time on the calendar changes.
    */
-
   var handleChangeTime = useCallback(function (nextPageTime) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
   }, [handleDateChange, setCalendarDate]);
   var handleClose = useCallback(function () {
     var _triggerRef$current, _triggerRef$current$c;
-
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
   }, []);
+
   /**
    * The callback triggered when PM/AM is switched.
    */
-
   var handleToggleMeridian = useCallback(function () {
     var hours = DateUtils.getHours(calendarDate);
     var nextHours = hours >= 12 ? hours - 12 : hours + 12;
@@ -165,64 +158,62 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
-
     var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;
     setCalendarDate(nextValue || new Date());
     setValue(nextValue);
-
     if (nextValue !== value) {
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-    } // `closeOverlay` default value is `true`
-
+    }
 
+    // `closeOverlay` default value is `true`
     if (closeOverlay !== false) {
       handleClose();
     }
   }, [handleClose, onChange, calendarDate, setCalendarDate, setValue, value]);
+
   /**
    * The callback triggered after the date in the shortcut area is clicked.
    */
-
   var handleShortcutPageDate = useCallback(function (value, closeOverlay, event) {
     updateValue(event, value, closeOverlay);
     handleDateChange(value, event);
   }, [handleDateChange, updateValue]);
+
   /**
    * The callback triggered after clicking the OK button.
    */
-
   var handleOK = useCallback(function (event) {
     updateValue(event);
     onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);
   }, [updateValue, onOk, calendarDate]);
+
   /**
    * Callback after clicking the clear button.
    */
-
   var handleClean = useCallback(function (event) {
     updateValue(event, null);
     resetCalendarDate(null);
   }, [resetCalendarDate, updateValue]);
+
   /**
    * Handle keyboard events.
    */
-
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     triggerRef: triggerRef,
     targetRef: targetRef,
     active: active,
     onExit: handleClean
   }, rest));
+
   /**
    * Callback after the date is selected.
    */
-
   var handleSelect = useCallback(function (nextValue, event, updatableValue) {
     if (updatableValue === void 0) {
       updatableValue = true;
     }
-
-    setCalendarDate( // Determine whether the current value contains time, if not, use calendarDate.
+    setCalendarDate(
+    // Determine whether the current value contains time, if not, use calendarDate.
     DateUtils.shouldRenderTime(formatStr) ? nextValue : composeFunctions(function (d) {
       return DateUtils.setHours(d, DateUtils.getHours(calendarDate));
     }, function (d) {
@@ -231,21 +222,20 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return DateUtils.setSeconds(d, DateUtils.getSeconds(calendarDate));
     })(nextValue));
     handleDateChange(nextValue);
-
     if (oneTap && updatableValue) {
       updateValue(event, nextValue);
     }
   }, [formatStr, handleDateChange, oneTap, calendarDate, setCalendarDate, updateValue]);
+
   /**
    *  A callback triggered when the date on the calendar changes.
    */
-
   var handleChangeMonth = useCallback(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
-    handleDateChange(nextPageDate); // Show only the calendar month panel. formatStr = 'yyyy-MM'
+    handleDateChange(nextPageDate);
 
+    // Show only the calendar month panel. formatStr = 'yyyy-MM'
     var onlyShowMonth = DateUtils.shouldRenderMonth(formatStr) && !DateUtils.shouldRenderDate(formatStr);
-
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
     }
@@ -254,55 +244,50 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date);
     }
-
     if (typeof DEPRECATED_disabledDate === 'function') {
       return DEPRECATED_disabledDate(date);
     }
-
     return false;
   }, [DEPRECATED_disabledDate, shouldDisableDate]);
+
   /**
    * Callback after the input box value is changed.
    */
-
   var handleInputChange = useCallback(function (value, event) {
-    setInputState('Typing'); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
-    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
+    setInputState('Typing');
 
+    // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
+    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
     if (!DateUtils.isMatch(value, formatStr, {
       locale: locale.dateLocale
     })) {
       setInputState('Error');
       return;
     }
+    var date = parseDate(value, formatStr);
 
-    var date = parseDate(value, formatStr); // If only the time is included in the characters, it will default to today.
-
+    // If only the time is included in the characters, it will default to today.
     if (DateUtils.shouldOnlyRenderTime(formatStr)) {
       date = new Date(DateUtils.format(new Date(), 'yyyy-MM-dd') + " " + value);
     }
-
     if (!DateUtils.isValid(date)) {
       setInputState('Error');
       return;
     }
-
     if (isDateDisabled(date)) {
       setInputState('Error');
       return;
     }
-
     handleSelect(date, event, false);
   }, [formatStr, locale, parseDate, isDateDisabled, handleSelect]);
+
   /**
    * The callback after the enter key is triggered on the input
    */
-
   var handleInputPressEnd = useCallback(function (event) {
     if (inputState === 'Typing') {
       updateValue(event, calendarDate);
     }
-
     setInputState('Initial');
   }, [inputState, calendarDate, updateValue]);
   var handleEntered = useCallback(function () {
@@ -312,34 +297,32 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleExited = useCallback(function () {
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setActive(false);
-  }, [onClose]); // 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 = useCallback(function (date) {
     var _DEPRECATED_disabledD;
-
     var allowDate = (_DEPRECATED_disabledD = DEPRECATED_disabledDate === null || DEPRECATED_disabledDate === void 0 ? void 0 : DEPRECATED_disabledDate(date)) !== null && _DEPRECATED_disabledD !== void 0 ? _DEPRECATED_disabledD : false;
     var allowTime = DateUtils.disabledTime(props, date);
     return allowDate || allowTime;
   }, [DEPRECATED_disabledDate, props]);
+
   /**
    * Whether "OK" button is disabled
    *
    * - If format is date, disable ok button if selected date is disabled
    * - If format is month, disable ok button if all dates in the month of selected date are disabled
    */
-
   var isOKButtonDisabled = useCallback(function (selectedDate) {
     if (DateUtils.shouldRenderMonth(formatStr) && !DateUtils.shouldRenderDate(formatStr)) {
       return isEveryDateInMonth(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
     }
-
     return disabledToolbarHandle(selectedDate);
   }, [disabledToolbarHandle, formatStr]);
   var calendarProps = useMemo(function () {
     return mapValues(pick(props, DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
         var _disabledOrHiddenTime;
-
         return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;
       };
     });
@@ -372,11 +355,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
     return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
   })) || [];
-
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
-        top = positionProps.top,
-        className = positionProps.className;
+      top = positionProps.top,
+      className = positionProps.className;
     var classes = merge(menuClassName, className, prefix('date-menu'));
     var styles = {
       left: left,
@@ -410,26 +392,21 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hideOkBtn: oneTap
     }))));
   };
-
   var hasValue = !!value;
-
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
-    classPrefix: classPrefix,
-    name: 'date',
-    appearance: appearance,
-    hasValue: hasValue,
-    cleanable: cleanable
-  })),
-      classes = _usePickerClassName[0],
-      usedClassNamePropKeys = _usePickerClassName[1];
-
+      classPrefix: classPrefix,
+      name: 'date',
+      appearance: appearance,
+      hasValue: hasValue,
+      cleanable: cleanable
+    })),
+    classes = _usePickerClassName[0],
+    usedClassNamePropKeys = _usePickerClassName[1];
   var renderDate = useCallback(function () {
     var _renderValue;
-
     if (!value) {
       return placeholder || formatStr;
     }
-
     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 = useMemo(function () {

package/esm/DatePicker/PredefinedRanges.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useState } from 'react';
@@ -7,17 +8,15 @@ import { useUpdateEffect } from '../utils';
 import { getDefaultRanges, getRanges } from './utils';
 var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
-      disabledShortcut = props.disabledShortcut,
-      onClickShortcut = props.onClickShortcut,
-      calendarDate = props.calendarDate,
-      rangesProp = props.ranges,
-      locale = props.locale,
-      rest = _objectWithoutPropertiesLoose(props, ["className", "disabledShortcut", "onClickShortcut", "calendarDate", "ranges", "locale"]);
-
+    disabledShortcut = props.disabledShortcut,
+    onClickShortcut = props.onClickShortcut,
+    calendarDate = props.calendarDate,
+    rangesProp = props.ranges,
+    locale = props.locale,
+    rest = _objectWithoutPropertiesLoose(props, ["className", "disabledShortcut", "onClickShortcut", "calendarDate", "ranges", "locale"]);
   var _useState = useState(getRanges(props)),
-      ranges = _useState[0],
-      setRanges = _useState[1];
-
+    ranges = _useState[0],
+    setRanges = _useState[1];
   useUpdateEffect(function () {
     setRanges(getRanges({
       ranges: rangesProp,
@@ -29,11 +28,9 @@ var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return item.label === key;
     });
   }, [calendarDate]);
-
   if (ranges.length === 0) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement(Stack, _extends({
     className: className,
     ref: ref,
@@ -41,20 +38,16 @@ var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
     spacing: 4
   }, rest), ranges.map(function (_ref, index) {
     var value = _ref.value,
-        closeOverlay = _ref.closeOverlay,
-        label = _ref.label,
-        rest = _objectWithoutPropertiesLoose(_ref, ["value", "closeOverlay", "label"]);
-
+      closeOverlay = _ref.closeOverlay,
+      label = _ref.label,
+      rest = _objectWithoutPropertiesLoose(_ref, ["value", "closeOverlay", "label"]);
     var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);
-
     var handleClickShortcut = function handleClickShortcut(event) {
       if (disabled) {
         return;
       }
-
       onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
     };
-
     return /*#__PURE__*/React.createElement(Button, _extends({
       appearance: "link",
       size: "sm",