rsuite 5.60.1 → 5.61.0

package/cjs/CheckTreePicker/hooks/useFocusState.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface FocusStateProps {
+    target: React.RefObject<HTMLElement>;
+    onEnter?: (node: HTMLElement) => void;
+    onExit?: (node: HTMLElement) => void;
+}
+declare function useFocusState(props: FocusStateProps): {
+    active: boolean;
+    focusItemValue: string | number | null | undefined;
+    setFocusItemValue: import("react").Dispatch<import("react").SetStateAction<string | number | null | undefined>>;
+    triggerProps: {
+        onEnter: (...args: any[]) => any;
+        onExit: (...args: any[]) => any;
+    };
+};
+export default useFocusState;

package/cjs/CheckTreePicker/hooks/useFocusState.js

@@ -0,0 +1,42 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("../../utils");
+function useFocusState(props) {
+  var target = props.target;
+  var _useState = (0, _react.useState)(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    focusItemValue = _useState2[0],
+    setFocusItemValue = _useState2[1];
+  var focusTarget = (0, _utils.useEventCallback)(function () {
+    var _target$current;
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var onEnter = (0, _utils.useEventCallback)(function (node) {
+    var _props$onEnter;
+    setActive(true);
+    (_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 ? void 0 : _props$onEnter.call(props, node);
+  });
+  var onExit = (0, _utils.useEventCallback)(function (node) {
+    var _props$onExit;
+    setActive(false);
+    focusTarget();
+    (_props$onExit = props.onExit) === null || _props$onExit === void 0 ? void 0 : _props$onExit.call(props, node);
+  });
+  return {
+    active: active,
+    focusItemValue: focusItemValue,
+    setFocusItemValue: setFocusItemValue,
+    triggerProps: {
+      onEnter: onEnter,
+      onExit: onExit
+    }
+  };
+}
+var _default = useFocusState;
+exports.default = _default;

package/cjs/DateInput/DateField.js

@@ -132,7 +132,9 @@ 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/cjs/DateInput/DateInput.js

@@ -12,9 +12,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _utils = require("../utils");
 var _utils2 = require("./utils");
-var _useDateInputState2 = _interopRequireDefault(require("./useDateInputState"));
-var _useKeyboardInputEvent = _interopRequireDefault(require("./useKeyboardInputEvent"));
-var _useIsFocused2 = _interopRequireDefault(require("./useIsFocused"));
+var _useDateInputState2 = _interopRequireDefault(require("./hooks/useDateInputState"));
+var _useKeyboardInputEvent = _interopRequireDefault(require("./hooks/useKeyboardInputEvent"));
+var _useIsFocused2 = _interopRequireDefault(require("./hooks/useIsFocused"));
+var _useFieldCursor2 = _interopRequireDefault(require("./hooks/useFieldCursor"));
+var _useSelectedState2 = _interopRequireDefault(require("./hooks/useSelectedState"));
 /**
  * The DateInput component lets users select a date with the keyboard.
  * @version 5.58.0
@@ -32,13 +34,9 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onFocus = props.onFocus,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"]);
   var inputRef = (0, _react.useRef)();
-  var _useState = (0, _react.useState)({
-      selectedPattern: 'y',
-      selectionStart: 0,
-      selectionEnd: 0
-    }),
-    selectedState = _useState[0],
-    setSelectedState = _useState[1];
+  var _useSelectedState = (0, _useSelectedState2.default)(),
+    selectedState = _useSelectedState.selectedState,
+    setSelectedState = _useSelectedState.setSelectedState;
   var _useCustom = (0, _utils.useCustom)('Calendar'),
     locale = _useCustom.locale;
   var dateLocale = locale.dateLocale;
@@ -58,6 +56,10 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     getDateField = _useDateInputState.getDateField,
     toDateString = _useDateInputState.toDateString,
     isEmptyValue = _useDateInputState.isEmptyValue;
+  var _useFieldCursor = (0, _useFieldCursor2.default)(formatStr, valueProp),
+    isMoveCursor = _useFieldCursor.isMoveCursor,
+    increment = _useFieldCursor.increment,
+    reset = _useFieldCursor.reset;
   var dateString = toDateString();
   var keyPressOptions = (0, _react.useMemo)(function () {
     return {
@@ -80,8 +82,9 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       input: input,
       direction: direction
     }));
-    setSelectionRange(state.selectionStart, state.selectionEnd);
     setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    reset();
   });
   var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
@@ -104,6 +107,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (!pattern) {
       return;
     }
+    increment();
     var field = getDateField(pattern);
     var value = parseInt(key, 10);
     var padValue = parseInt("" + (field.value || '') + key, 10);
@@ -113,10 +117,6 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if ((0, _utils2.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);
     });
@@ -132,7 +132,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
 
     // If the field is full value, move the cursor to the next field
-    if ((0, _utils2.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+    if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {
       onSegmentChange(event, 'right');
     }
   });
@@ -148,6 +148,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setDateField(selectedState.selectedPattern, null, function (date) {
         return handleChange(date, event);
       });
+      reset();
     }
   });
   var handleClick = (0, _utils.useEventCallback)(function (event) {

package/{esm/DateInput → cjs/DateInput/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/cjs/DateInput/{useDateInputState.js → hooks/useDateInputState.js}

@@ -7,8 +7,8 @@ exports.useDateInputState = useDateInputState;
 exports.default = void 0;
 var _react = require("react");
 var _startCase = _interopRequireDefault(require("lodash/startCase"));
-var _dateUtils = require("../utils/dateUtils");
-var _DateField = require("./DateField");
+var _dateUtils = require("../../utils/dateUtils");
+var _DateField = require("../DateField");
 function useDateInputState(_ref) {
   var formatStr = _ref.formatStr,
     locale = _ref.locale,

package/cjs/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/cjs/DateInput/hooks/useFieldCursor.js

@@ -0,0 +1,56 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.useFieldCursor = useFieldCursor;
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
+function useFieldCursor(format, value) {
+  var typeCount = (0, _react.useRef)(0);
+  var increment = function increment() {
+    typeCount.current += 1;
+  };
+  var reset = function reset() {
+    typeCount.current = 0;
+  };
+  var isMoveCursor = (0, _react.useCallback)(function (value, pattern) {
+    var patternGroup = (0, _utils.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]);
+  (0, _useUpdateEffect.default)(function () {
+    if (!value) {
+      reset();
+    }
+  }, [value]);
+  return {
+    increment: increment,
+    reset: reset,
+    isMoveCursor: isMoveCursor
+  };
+}
+var _default = useFieldCursor;
+exports.default = _default;

package/cjs/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/cjs/DateInput/hooks/useSelectedState.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.useSelectedState = useSelectedState;
+exports.default = void 0;
+var _react = require("react");
+var defaultSelectedState = {
+  selectedPattern: 'y',
+  selectionStart: 0,
+  selectionEnd: 0
+};
+function useSelectedState() {
+  var _useState = (0, _react.useState)(defaultSelectedState),
+    selectedState = _useState[0],
+    setSelectedState = _useState[1];
+  return {
+    selectedState: selectedState,
+    setSelectedState: setSelectedState
+  };
+}
+var _default = useSelectedState;
+exports.default = _default;

package/cjs/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/cjs/DateInput/index.js

@@ -6,16 +6,22 @@ exports.__esModule = true;
 var _exportNames = {
   useDateInputState: true,
   useKeyboardInputEvent: true,
-  useIsFocused: true
+  useIsFocused: true,
+  useSelectedState: true,
+  useFieldCursor: true
 };
-exports.default = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;
+exports.default = exports.useFieldCursor = exports.useSelectedState = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;
 var _DateInput = _interopRequireDefault(require("./DateInput"));
-var _useDateInputState = require("./useDateInputState");
+var _useDateInputState = require("./hooks/useDateInputState");
 exports.useDateInputState = _useDateInputState.useDateInputState;
-var _useKeyboardInputEvent = require("./useKeyboardInputEvent");
+var _useKeyboardInputEvent = require("./hooks/useKeyboardInputEvent");
 exports.useKeyboardInputEvent = _useKeyboardInputEvent.useKeyboardInputEvent;
-var _useIsFocused = require("./useIsFocused");
+var _useIsFocused = require("./hooks/useIsFocused");
 exports.useIsFocused = _useIsFocused.useIsFocused;
+var _useSelectedState = require("./hooks/useSelectedState");
+exports.useSelectedState = _useSelectedState.useSelectedState;
+var _useFieldCursor = require("./hooks/useFieldCursor");
+exports.useFieldCursor = _useFieldCursor.useFieldCursor;
 var _utils = require("./utils");
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/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/cjs/DateInput/utils.js

@@ -10,7 +10,6 @@ exports.isCursorAfterMonth = isCursorAfterMonth;
 exports.getInputSelectedState = getInputSelectedState;
 exports.validateDateTime = validateDateTime;
 exports.modifyDate = modifyDate;
-exports.isFieldFullValue = isFieldFullValue;
 exports.useInputSelection = useInputSelection;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _dateUtils = require("../utils/dateUtils");
@@ -228,31 +227,10 @@ function modifyDate(date, type, value) {
   }
   return date;
 }
-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';
 function useInputSelection(input) {
   return function setSelectionRange(selectionStart, selectionEnd) {
-    if (isTestEnvironment) {
+    var isTest = input.current.dataset.test === 'true';
+    if (isTest) {
       (0, _utils.safeSetSelection)(input.current, selectionStart, selectionEnd);
       return;
     }

package/cjs/DatePicker/DatePicker.d.ts

@@ -82,6 +82,10 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
+    /**
+     * Custom rendering of the selected date.
+     */
+    renderValue?: (value: Date, format: string) => string;
     /**
      * Custom rendering calendar cell content.
      *

package/cjs/DatePicker/DatePicker.js

@@ -24,6 +24,7 @@ var _utils = require("../utils");
 var _dateUtils = require("../utils/dateUtils");
 var _Picker = require("../internals/Picker");
 var _OverlayTrigger = require("../internals/Overlay/OverlayTrigger");
+var _Input = _interopRequireDefault(require("../Input"));
 var _DateInput = _interopRequireDefault(require("../DateInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _utils2 = require("./utils");
@@ -94,11 +95,12 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     renderCell = props.renderCell,
+    renderValue = props.renderValue,
     DEPRECATED_disabledDate = props.disabledDate,
     DEPRECATED_disabledHours = props.disabledHours,
     DEPRECATED_disabledMinutes = props.disabledMinutes,
     DEPRECATED_disabledSeconds = props.disabledSeconds,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEntered", "onExited", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"]);
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEntered", "onExited", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"]);
   var id = (0, _utils.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
@@ -463,6 +465,19 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ariaProps = _partitionHTMLProps[0],
     rest = _partitionHTMLProps[1];
   var invalidValue = value && isErrorValue(value);
+
+  // Custom rendering of the selected value
+  var customValue = null;
+
+  // Input box is read-only when the component is uneditable or loading state
+  var inputReadOnly = readOnly || !editable || loading || false;
+  if (typeof renderValue === 'function' && value) {
+    customValue = renderValue(value, formatStr);
+
+    // If the custom rendering value, the input box is read-only
+    inputReadOnly = true;
+  }
+  var TargetInput = customValue ? _Input.default : _DateInput.default;
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
@@ -483,24 +498,24 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils2.getRestProps)(rest, usedClassNamePropKeys), {
     inside: true,
     size: size,
+    disabled: disabled,
     onClick: handleClick
   }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/_react.default.createElement(_DateInput.default, (0, _extends2.default)({
+  }, label), /*#__PURE__*/_react.default.createElement(TargetInput, (0, _extends2.default)({
     "aria-haspopup": "dialog",
     "aria-invalid": invalidValue,
     "aria-labelledby": label ? id + "-label" : undefined
   }, ariaProps, {
     ref: target,
     id: id,
-    value: value,
+    value: customValue || value,
     format: formatStr,
     placeholder: placeholder ? placeholder : formatStr,
     disabled: disabled,
     onChange: handleInputChange,
-    readOnly: readOnly || !editable || loading,
-    plaintext: plaintext,
+    readOnly: inputReadOnly,
     onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {
     loading: loading,

package/cjs/DatePicker/types.d.ts

@@ -41,8 +41,4 @@ export interface DeprecatedProps {
      * @deprecated Use {@link shouldDisableSecond} instead
      */
     disabledSeconds?: (second: number, date: Date) => boolean;
-    /**
-     * @deprecated
-     */
-    renderValue?: (value: Date, format: string) => string;
 }

package/cjs/DateRangeInput/DateRangeInput.js

@@ -40,13 +40,9 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
   var inputRef = (0, _react.useRef)();
-  var _useState = (0, _react.useState)({
-      selectedPattern: 'y',
-      selectionStart: 0,
-      selectionEnd: 0
-    }),
-    selectedState = _useState[0],
-    setSelectedState = _useState[1];
+  var _useSelectedState = (0, _DateInput.useSelectedState)(),
+    selectedState = _useSelectedState.selectedState,
+    setSelectedState = _useSelectedState.setSelectedState;
   var _useCustom = (0, _utils.useCustom)('Calendar'),
     locale = _useCustom.locale;
   var rangeFormatStr = "" + formatStr + character + formatStr;
@@ -55,9 +51,9 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
-  var _useState2 = (0, _react.useState)(_utils2.DateType.Start),
-    dateType = _useState2[0],
-    setDateType = _useState2[1];
+  var _useState = (0, _react.useState)(_utils2.DateType.Start),
+    dateType = _useState[0],
+    setDateType = _useState[1];
   var dateInputOptions = {
     formatStr: formatStr,
     locale: dateLocale,
@@ -69,6 +65,10 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var endDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {
     date: (value === null || value === void 0 ? void 0 : value[1]) || null
   }));
+  var _useFieldCursor = (0, _DateInput.useFieldCursor)(formatStr, valueProp),
+    isMoveCursor = _useFieldCursor.isMoveCursor,
+    increment = _useFieldCursor.increment,
+    reset = _useFieldCursor.reset;
   var getActiveState = function getActiveState(type) {
     if (type === void 0) {
       type = dateType;
@@ -122,8 +122,9 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       input: input,
       direction: direction
     }));
-    setSelectionRange(state.selectionStart, state.selectionEnd);
     setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    reset();
   });
   var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
@@ -146,6 +147,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.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);
@@ -155,10 +157,6 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     if ((0, _DateInput.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);
     });
@@ -174,7 +172,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
 
     // If the field is full value, move the cursor to the next field
-    if ((0, _DateInput.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+    if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {
       onSegmentChange(event, 'right');
     }
   });
@@ -190,6 +188,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       getActiveState().setDateField(selectedState.selectedPattern, null, function (date) {
         return handleChange(date, event);
       });
+      reset();
     }
   });
   var handleClick = (0, _utils.useEventCallback)(function (event) {
@@ -198,7 +197,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       return;
     }
     var cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
-    var dateType = (0, _utils2.getDateType)(renderedValue, character, cursorIndex);
+    var dateType = (0, _utils2.getDateType)(renderedValue || rangeFormatStr, character, cursorIndex);
     var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
       dateType: dateType,
       selectedMonth: getActiveState(dateType).dateField.month,