rsuite 5.60.1 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.60.1",
+  "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",