rsuite 5.60.1 → 5.61.0

package/esm/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/esm/CheckTreePicker/hooks/useFocusState.js

@@ -0,0 +1,37 @@
+'use client';
+import { useState } from 'react';
+import { useEventCallback } from '../../utils';
+function useFocusState(props) {
+  var target = props.target;
+  var _useState = useState(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _useState2 = useState(null),
+    focusItemValue = _useState2[0],
+    setFocusItemValue = _useState2[1];
+  var focusTarget = useEventCallback(function () {
+    var _target$current;
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var onEnter = 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 = 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
+    }
+  };
+}
+export default useFocusState;

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/{cjs/DateInput → esm/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/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/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/esm/DatePicker/DatePicker.js

@@ -19,6 +19,7 @@ import { mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEve
 import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, isValid, disableTime, copyTime, calendarOnlyProps } from '../utils/dateUtils';
 import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from '../internals/Picker';
 import { OverlayCloseCause } from '../internals/Overlay/OverlayTrigger';
+import Input from '../Input';
 import DateInput from '../DateInput';
 import InputGroup from '../InputGroup';
 import { splitRanges, deprecatedPropTypes, getRestProps } from './utils';
@@ -88,11 +89,12 @@ var DatePicker = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
@@ -457,6 +459,19 @@ var DatePicker = /*#__PURE__*/React.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 : DateInput;
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     pickerProps: pick(props, pickTriggerPropKeys),
@@ -477,24 +492,24 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, getRestProps(rest, usedClassNamePropKeys), {
     inside: true,
     size: size,
+    disabled: disabled,
     onClick: handleClick
   }), /*#__PURE__*/React.createElement(PickerLabel, {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/React.createElement(DateInput, _extends({
+  }, label), /*#__PURE__*/React.createElement(TargetInput, _extends({
     "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.createElement(PickerIndicator, {
     loading: loading,

package/esm/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/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,