rsuite 5.60.0 → 5.60.2

package/esm/DateInput/DateField.js

@@ -126,7 +126,9 @@ export var useDateField = function useDateField(format, localize, date) {
         if (typeof value === 'number') {
           value = padNumber(value, pattern.length);
         }
-        str = str.replace(pattern, value);
+        if (typeof value !== 'undefined') {
+          str = str.replace(pattern, value);
+        }
       }
     });
     return str;

package/esm/DateInput/DateInput.js

@@ -1,14 +1,16 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useState, useRef, useMemo } from 'react';
+import React, { useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Input from '../Input';
 import { mergeRefs, useCustom, useControlled, useEventCallback } from '../utils';
-import { getInputSelectedState, validateDateTime, isFieldFullValue, useInputSelection } from './utils';
-import useDateInputState from './useDateInputState';
-import useKeyboardInputEvent from './useKeyboardInputEvent';
-import useIsFocused from './useIsFocused';
+import { getInputSelectedState, validateDateTime, useInputSelection } from './utils';
+import useDateInputState from './hooks/useDateInputState';
+import useKeyboardInputEvent from './hooks/useKeyboardInputEvent';
+import useIsFocused from './hooks/useIsFocused';
+import useFieldCursor from './hooks/useFieldCursor';
+import useSelectedState from './hooks/useSelectedState';
 /**
  * The DateInput component lets users select a date with the keyboard.
  * @version 5.58.0
@@ -26,13 +28,9 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onFocus = props.onFocus,
     rest = _objectWithoutPropertiesLoose(props, ["format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"]);
   var inputRef = useRef();
-  var _useState = useState({
-      selectedPattern: 'y',
-      selectionStart: 0,
-      selectionEnd: 0
-    }),
-    selectedState = _useState[0],
-    setSelectedState = _useState[1];
+  var _useSelectedState = useSelectedState(),
+    selectedState = _useSelectedState.selectedState,
+    setSelectedState = _useSelectedState.setSelectedState;
   var _useCustom = useCustom('Calendar'),
     locale = _useCustom.locale;
   var dateLocale = locale.dateLocale;
@@ -52,6 +50,10 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     getDateField = _useDateInputState.getDateField,
     toDateString = _useDateInputState.toDateString,
     isEmptyValue = _useDateInputState.isEmptyValue;
+  var _useFieldCursor = useFieldCursor(formatStr, valueProp),
+    isMoveCursor = _useFieldCursor.isMoveCursor,
+    increment = _useFieldCursor.increment,
+    reset = _useFieldCursor.reset;
   var dateString = toDateString();
   var keyPressOptions = useMemo(function () {
     return {
@@ -74,8 +76,9 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       input: input,
       direction: direction
     }));
-    setSelectionRange(state.selectionStart, state.selectionEnd);
     setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    reset();
   });
   var onSegmentValueChange = useEventCallback(function (event) {
     var input = event.target;
@@ -98,6 +101,7 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!pattern) {
       return;
     }
+    increment();
     var field = getDateField(pattern);
     var value = parseInt(key, 10);
     var padValue = parseInt("" + (field.value || '') + key, 10);
@@ -107,10 +111,6 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (validateDateTime(field.name, padValue)) {
       newValue = padValue;
     }
-    if (pattern === 'M') {
-      // Month cannot be less than 1.
-      newValue = Math.max(1, newValue);
-    }
     setDateField(pattern, newValue, function (date) {
       return handleChange(date, event);
     });
@@ -126,7 +126,7 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
 
     // If the field is full value, move the cursor to the next field
-    if (isFieldFullValue(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+    if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {
       onSegmentChange(event, 'right');
     }
   });
@@ -142,6 +142,7 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setDateField(selectedState.selectedPattern, null, function (date) {
         return handleChange(date, event);
       });
+      reset();
     }
   });
   var handleClick = useEventCallback(function (event) {

package/esm/DateInput/{useDateInputState.d.ts → hooks/useDateInputState.d.ts}

@@ -1,4 +1,4 @@
-import { format } from '../utils/dateUtils';
+import { format } from '../../utils/dateUtils';
 import type { Locale } from 'date-fns';
 interface DateInputState {
     formatStr: string;

package/esm/DateInput/{useDateInputState.js → hooks/useDateInputState.js}

@@ -1,8 +1,8 @@
 'use client';
 import { useEffect } from 'react';
 import startCase from 'lodash/startCase';
-import { addDays, addMonths, addYears, addHours, addMinutes, addSeconds, format, isLastDayOfMonth, lastDayOfMonth, isValid } from '../utils/dateUtils';
-import { useDateField, patternMap } from './DateField';
+import { addDays, addMonths, addYears, addHours, addMinutes, addSeconds, format, isLastDayOfMonth, lastDayOfMonth, isValid } from '../../utils/dateUtils';
+import { useDateField, patternMap } from '../DateField';
 export function useDateInputState(_ref) {
   var formatStr = _ref.formatStr,
     locale = _ref.locale,

package/esm/DateInput/hooks/useFieldCursor.d.ts

@@ -0,0 +1,6 @@
+export declare function useFieldCursor<V = Date | null>(format: string, value?: V): {
+    increment: () => void;
+    reset: () => void;
+    isMoveCursor: (value: number, pattern: string) => boolean;
+};
+export default useFieldCursor;

package/esm/DateInput/hooks/useFieldCursor.js

@@ -0,0 +1,49 @@
+'use client';
+import { useCallback, useRef } from 'react';
+import { getPatternGroups } from '../utils';
+import useUpdateEffect from '../../utils/useUpdateEffect';
+export function useFieldCursor(format, value) {
+  var typeCount = useRef(0);
+  var increment = function increment() {
+    typeCount.current += 1;
+  };
+  var reset = function reset() {
+    typeCount.current = 0;
+  };
+  var isMoveCursor = useCallback(function (value, pattern) {
+    var patternGroup = getPatternGroups(format, pattern);
+    if (value.toString().length === patternGroup.length) {
+      return true;
+    } else if (pattern === 'y' && typeCount.current === 4) {
+      return true;
+    } else if (pattern !== 'y' && typeCount.current === 2) {
+      return true;
+    }
+    switch (pattern) {
+      case 'M':
+        return parseInt(value + "0") > 12;
+      case 'd':
+        return parseInt(value + "0") > 31;
+      case 'H':
+        return parseInt(value + "0") > 23;
+      case 'h':
+        return parseInt(value + "0") > 12;
+      case 'm':
+      case 's':
+        return parseInt(value + "0") > 59;
+      default:
+        return false;
+    }
+  }, [format]);
+  useUpdateEffect(function () {
+    if (!value) {
+      reset();
+    }
+  }, [value]);
+  return {
+    increment: increment,
+    reset: reset,
+    isMoveCursor: isMoveCursor
+  };
+}
+export default useFieldCursor;

package/esm/DateInput/hooks/useSelectedState.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare function useSelectedState(): {
+    selectedState: {
+        selectedPattern: string;
+        selectionStart: number;
+        selectionEnd: number;
+    };
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<{
+        selectedPattern: string;
+        selectionStart: number;
+        selectionEnd: number;
+    }>>;
+};
+export default useSelectedState;

package/esm/DateInput/hooks/useSelectedState.js

@@ -0,0 +1,17 @@
+'use client';
+import { useState } from 'react';
+var defaultSelectedState = {
+  selectedPattern: 'y',
+  selectionStart: 0,
+  selectionEnd: 0
+};
+export function useSelectedState() {
+  var _useState = useState(defaultSelectedState),
+    selectedState = _useState[0],
+    setSelectedState = _useState[1];
+  return {
+    selectedState: selectedState,
+    setSelectedState: setSelectedState
+  };
+}
+export default useSelectedState;

package/esm/DateInput/index.d.ts

@@ -1,7 +1,9 @@
 import DateInput from './DateInput';
-export { useDateInputState } from './useDateInputState';
-export { useKeyboardInputEvent } from './useKeyboardInputEvent';
-export { useIsFocused } from './useIsFocused';
+export { useDateInputState } from './hooks/useDateInputState';
+export { useKeyboardInputEvent } from './hooks/useKeyboardInputEvent';
+export { useIsFocused } from './hooks/useIsFocused';
+export { useSelectedState } from './hooks/useSelectedState';
+export { useFieldCursor } from './hooks/useFieldCursor';
 export * from './utils';
 export type { DateInputProps } from './DateInput';
 export default DateInput;

package/esm/DateInput/index.js

@@ -1,7 +1,9 @@
 'use client';
 import DateInput from './DateInput';
-export { useDateInputState } from './useDateInputState';
-export { useKeyboardInputEvent } from './useKeyboardInputEvent';
-export { useIsFocused } from './useIsFocused';
+export { useDateInputState } from './hooks/useDateInputState';
+export { useKeyboardInputEvent } from './hooks/useKeyboardInputEvent';
+export { useIsFocused } from './hooks/useIsFocused';
+export { useSelectedState } from './hooks/useSelectedState';
+export { useFieldCursor } from './hooks/useFieldCursor';
 export * from './utils';
 export default DateInput;

package/esm/DateInput/utils.d.ts

@@ -58,6 +58,5 @@ export declare function getInputSelectedState(options: SelectedStateOptions): {
 };
 export declare function validateDateTime(type: string, value: number): boolean;
 export declare function modifyDate(date: Date, type: string, value: number): Date;
-export declare function isFieldFullValue(formatStr: string, value: number, pattern: string): boolean;
 export declare function useInputSelection(input: React.RefObject<any>): (selectionStart: number, selectionEnd: number) => void;
 export {};

package/esm/DateInput/utils.js

@@ -215,31 +215,10 @@ export function modifyDate(date, type, value) {
   }
   return date;
 }
-export function isFieldFullValue(formatStr, value, pattern) {
-  var patternGroup = getPatternGroups(formatStr, pattern);
-  if (value.toString().length === patternGroup.length) {
-    return true;
-  }
-  switch (pattern) {
-    case 'M':
-      return parseInt(value + "0") > 12;
-    case 'd':
-      return parseInt(value + "0") > 31;
-    case 'H':
-      return parseInt(value + "0") > 23;
-    case 'h':
-      return parseInt(value + "0") > 12;
-    case 'm':
-    case 's':
-      return parseInt(value + "0") > 59;
-    default:
-      return false;
-  }
-}
-var isTestEnvironment = typeof process !== 'undefined' && undefined === 'test';
 export function useInputSelection(input) {
   return function setSelectionRange(selectionStart, selectionEnd) {
-    if (isTestEnvironment) {
+    var isTest = input.current.dataset.test === 'true';
+    if (isTest) {
       safeSetSelection(input.current, selectionStart, selectionEnd);
       return;
     }

package/esm/DateRangeInput/DateRangeInput.js

@@ -5,7 +5,7 @@ import React, { useState, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Input from '../Input';
 import { mergeRefs, useClassNames, useCustom, useControlled, useEventCallback } from '../utils';
-import { validateDateTime, isFieldFullValue, useDateInputState, useInputSelection, useKeyboardInputEvent, useIsFocused } from '../DateInput';
+import { validateDateTime, useDateInputState, useInputSelection, useKeyboardInputEvent, useIsFocused, useSelectedState, useFieldCursor } from '../DateInput';
 import { getInputSelectedState, DateType, getDateType, isSwitchDateType } from './utils';
 /**
  * The DateRangeInput component lets users select a date with the keyboard.
@@ -34,13 +34,9 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
   var inputRef = useRef();
-  var _useState = useState({
-      selectedPattern: 'y',
-      selectionStart: 0,
-      selectionEnd: 0
-    }),
-    selectedState = _useState[0],
-    setSelectedState = _useState[1];
+  var _useSelectedState = useSelectedState(),
+    selectedState = _useSelectedState.selectedState,
+    setSelectedState = _useSelectedState.setSelectedState;
   var _useCustom = useCustom('Calendar'),
     locale = _useCustom.locale;
   var rangeFormatStr = "" + formatStr + character + formatStr;
@@ -49,9 +45,9 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
-  var _useState2 = useState(DateType.Start),
-    dateType = _useState2[0],
-    setDateType = _useState2[1];
+  var _useState = useState(DateType.Start),
+    dateType = _useState[0],
+    setDateType = _useState[1];
   var dateInputOptions = {
     formatStr: formatStr,
     locale: dateLocale,
@@ -63,6 +59,10 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var endDateState = useDateInputState(_extends({}, dateInputOptions, {
     date: (value === null || value === void 0 ? void 0 : value[1]) || null
   }));
+  var _useFieldCursor = useFieldCursor(formatStr, valueProp),
+    isMoveCursor = _useFieldCursor.isMoveCursor,
+    increment = _useFieldCursor.increment,
+    reset = _useFieldCursor.reset;
   var getActiveState = function getActiveState(type) {
     if (type === void 0) {
       type = dateType;
@@ -116,8 +116,9 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       input: input,
       direction: direction
     }));
-    setSelectionRange(state.selectionStart, state.selectionEnd);
     setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    reset();
   });
   var onSegmentValueChange = useEventCallback(function (event) {
     var input = event.target;
@@ -140,6 +141,7 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!pattern) {
       return;
     }
+    increment();
     var field = getActiveState().getDateField(pattern);
     var value = parseInt(key, 10);
     var padValue = parseInt("" + (field.value || '') + key, 10);
@@ -149,10 +151,6 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (validateDateTime(field.name, padValue)) {
       newValue = padValue;
     }
-    if (pattern === 'M') {
-      // Month cannot be less than 1.
-      newValue = Math.max(1, newValue);
-    }
     getActiveState().setDateField(pattern, newValue, function (date) {
       return handleChange(date, event);
     });
@@ -168,7 +166,7 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
 
     // If the field is full value, move the cursor to the next field
-    if (isFieldFullValue(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+    if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {
       onSegmentChange(event, 'right');
     }
   });
@@ -184,6 +182,7 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       getActiveState().setDateField(selectedState.selectedPattern, null, function (date) {
         return handleChange(date, event);
       });
+      reset();
     }
   });
   var handleClick = useEventCallback(function (event) {
@@ -192,7 +191,7 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return;
     }
     var cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
-    var dateType = getDateType(renderedValue, character, cursorIndex);
+    var dateType = getDateType(renderedValue || rangeFormatStr, character, cursorIndex);
     var state = getInputSelectedState(_extends({}, keyPressOptions, {
       dateType: dateType,
       selectedMonth: getActiveState(dateType).dateField.month,

package/esm/DateRangePicker/DateRangePicker.js

@@ -102,7 +102,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     prefix = _useClassNames.prefix;
   var _useCustom = useCustom('DateRangePicker', overrideLocale),
     locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate;
+    formatDate = _useCustom.formatDate; // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
+  var calendarGap = showOneCalendar ? 0 : 1;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var _useControlled = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
     value = _useControlled[0],
@@ -129,7 +130,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState2 = useState((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
     selectedDates = _useState2[0],
     setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
-  var _useState3 = useState(null),
+  var _useState3 = useState(value),
     hoverDateRange = _useState3[0],
     setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
   var _useState4 = useState(getSafeCalendarDate({
@@ -165,14 +166,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {
+    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
       var _startDate = copyTime({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
       });
       var _endDate = copyTime({
         from: getCalendarDatetime('end'),
-        to: dateRange.length === 1 ? addMonths(_startDate, 1) : dateRange[1]
+        to: dateRange.length === 1 ? addMonths(_startDate, calendarGap) : dateRange[1]
       });
       nextValue = [_startDate, _endDate];
     } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
@@ -182,7 +183,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextCalendarDate = getSafeCalendarDate({
       value: nextValue,
       calendarKey: calendarKey,
-      allowAameMonth: onlyShowMonth
+      // When only the month is displayed and only one calendar is displayed,
+      // there is no need to add a month and two calendar panels are allowed to display the same month
+      allowSameMonth: onlyShowMonth || showOneCalendar
     });
     setCalendarDate(nextCalendarDate);
     if (onlyShowMonth && eventName === 'changeMonth') {
@@ -331,6 +334,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
+    if (isSelectedIdle) {
+      setActiveCalendarKey('end');
+    } else {
+      setActiveCalendarKey('start');
+    }
     setSelectedDates(nextSelectDates);
     setCalendarDateRange({
       dateRange: nextSelectDates,
@@ -402,7 +410,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (value && value.length) {
       var _startDate3 = value[0],
         endData = value[1];
-      nextCalendarDate = [_startDate3, isSameMonth(_startDate3, endData) ? addMonths(endData, 1) : endData];
+      nextCalendarDate = [_startDate3, isSameMonth(_startDate3, endData) ? addMonths(endData, calendarGap) : endData];
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = getSafeCalendarDate({
@@ -731,11 +739,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     format: formatStr,
     placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
-    onChange: handleInputChange,
     readOnly: readOnly || !editable || loading,
     plaintext: plaintext,
-    onKeyDown: handleInputKeyDown,
-    htmlSize: getInputHtmlSize()
+    htmlSize: getInputHtmlSize(),
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/React.createElement(PickerIndicator, {
     loading: loading,
     caretAs: caretAs,

package/esm/DateRangePicker/utils.d.ts

@@ -1,8 +1,8 @@
 import { DateRange } from './types';
-export declare function getSafeCalendarDate({ value, calendarKey, allowAameMonth }: {
+export declare function getSafeCalendarDate({ value, calendarKey, allowSameMonth }: {
     value: [] | [Date] | [Date, Date] | null;
     calendarKey?: 'start' | 'end';
-    allowAameMonth?: boolean;
+    allowSameMonth?: boolean;
 }): DateRange;
 export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;
 export declare const getMonthHoverRange: (date: Date) => DateRange;

package/esm/DateRangePicker/utils.js

@@ -5,10 +5,10 @@ export function getSafeCalendarDate(_ref) {
   var value = _ref.value,
     _ref$calendarKey = _ref.calendarKey,
     calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,
-    allowAameMonth = _ref.allowAameMonth;
+    allowSameMonth = _ref.allowSameMonth;
   // Update calendarDate if the value is not null
   value = (_value = value) !== null && _value !== void 0 ? _value : [];
-  var gap = allowAameMonth ? 0 : 1;
+  var gap = allowSameMonth ? 0 : 1;
   if (value[0] && value[1]) {
     var diffMonth = differenceInCalendarMonths(value[1], value[0]);
     if (calendarKey === 'start') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.60.0",
+  "version": "5.60.2",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -17,7 +17,7 @@
     "component",
     "react-component"
   ],
-  "author": "HYPERS Team",
+  "author": "React Suite Team",
   "license": "MIT",
   "repository": {
     "type": "git",

package/styles/variables.less

@@ -774,7 +774,6 @@
 @date-range-picker-header-padding-vertical:       8px;
 @date-range-picker-header-font-size:              @font-size-base;
 @date-range-picker-header-line-height:            @line-height-base;
-@date-range-picker-calendar-default-width:        255px;
 
 // Input Picker