rsuite 5.48.1 → 5.50.0

package/cjs/DateInput/DateInput.js

@@ -8,11 +8,13 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
+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 isTestEnvironment = undefined === 'test';
+var _useKeyboardInputEvent = _interopRequireDefault(require("./useKeyboardInputEvent"));
+var _useIsFocused2 = _interopRequireDefault(require("./useIsFocused"));
 /**
  * The DateInput component lets users select a date with the keyboard.
  * @version 5.58.0
@@ -23,9 +25,12 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
     valueProp = props.value,
     defaultValue = props.defaultValue,
+    placeholder = props.placeholder,
     onChange = props.onChange,
     onKeyDown = props.onKeyDown,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["format", "value", "defaultValue", "onChange", "onKeyDown"]);
+    onBlur = props.onBlur,
+    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',
@@ -36,14 +41,14 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setSelectedState = _useState[1];
   var _useCustom = (0, _utils.useCustom)('Calendar'),
     locale = _useCustom.locale;
-  var localize = locale.dateLocale.localize;
+  var dateLocale = locale.dateLocale;
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
   var _useDateInputState = (0, _useDateInputState2.default)({
       formatStr: formatStr,
-      localize: localize,
+      locale: dateLocale,
       date: value,
       isControlledDate: isControlled
     }),
@@ -51,49 +56,36 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setDateOffset = _useDateInputState.setDateOffset,
     setDateField = _useDateInputState.setDateField,
     getDateField = _useDateInputState.getDateField,
-    toDateString = _useDateInputState.toDateString;
+    toDateString = _useDateInputState.toDateString,
+    isEmptyValue = _useDateInputState.isEmptyValue;
   var dateString = toDateString();
   var keyPressOptions = (0, _react.useMemo)(function () {
     return {
       formatStr: formatStr,
-      localize: localize,
+      localize: dateLocale.localize,
       selectedMonth: dateField.month,
       dateString: dateString
     };
-  }, [dateField, dateString, formatStr, localize]);
-  var setSelectionRange = (0, _react.useCallback)(function (selectionStart, selectionEnd) {
-    if (selectionStart === void 0) {
-      selectionStart = selectedState.selectionStart;
-    }
-    if (selectionEnd === void 0) {
-      selectionEnd = selectedState.selectionEnd;
-    }
-    var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-    if (isTestEnvironment) {
-      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);
-      return;
-    }
-    requestAnimationFrame(function () {
-      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);
-    });
-  }, [selectedState]);
-  var handleChange = (0, _react.useCallback)(function (value, event) {
-    setValue(value);
+  }, [dateField, dateString, formatStr, dateLocale]);
+  var handleChange = (0, _utils.useEventCallback)(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange, setValue]);
-  var handleChangeField = (0, _react.useCallback)(function (event, nextDirection) {
+    setValue(value);
+  });
+  var setSelectionRange = (0, _utils2.useInputSelection)(inputRef);
+  var onSegmentChange = (0, _utils.useEventCallback)(function (event, nextDirection) {
     var input = event.target;
-    var direction = nextDirection || (event.key === 'ArrowRight' ? 'right' : 'left');
+    var key = event.key;
+    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
     var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
       input: input,
       direction: direction
     }));
     setSelectionRange(state.selectionStart, state.selectionEnd);
     setSelectedState(state);
-  }, [keyPressOptions, setSelectionRange]);
-  var handleChangeFieldValue = (0, _react.useCallback)(function (event) {
-    var key = event.key;
+  });
+  var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
+    var key = event.key;
     var offset = key === 'ArrowUp' ? 1 : -1;
     var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
       input: input,
@@ -104,31 +96,10 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return handleChange(date, event);
     });
     setSelectionRange(state.selectionStart, state.selectionEnd);
-  }, [handleChange, keyPressOptions, setDateOffset, setSelectionRange]);
-  var isFieldFullValue = (0, _react.useCallback)(function (value, pattern) {
-    var patternGroup = (0, _utils2.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;
-    }
-  }, [formatStr]);
-  var handleChangeFieldValueWithNumericKeys = (0, _react.useCallback)(function (event) {
-    var key = event.key;
+  });
+  var onSegmentValueChangeWithNumericKeys = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
+    var key = event.key;
     var pattern = selectedState.selectedPattern;
     if (!pattern) {
       return;
@@ -161,62 +132,73 @@ 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 (isFieldFullValue(newValue, pattern) && input.selectionEnd !== input.value.length) {
-      handleChangeField(event, 'right');
+    if ((0, _utils2.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+      onSegmentChange(event, 'right');
     }
-  }, [dateField, getDateField, handleChange, handleChangeField, isFieldFullValue, keyPressOptions, selectedState.selectedPattern, setDateField, setSelectionRange]);
-  var handleRemoveFieldValue = (0, _react.useCallback)(function (event) {
+  });
+  var onSegmentValueRemove = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
     if (selectedState.selectedPattern) {
+      var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+        input: input,
+        valueOffset: null
+      }));
+      setSelectedState(nextState);
+      setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
       setDateField(selectedState.selectedPattern, null, function (date) {
         return handleChange(date, event);
       });
-      setSelectionRange();
     }
-  }, [handleChange, selectedState, setDateField, setSelectionRange]);
-  var handleKeyDown = function handleKeyDown(event) {
-    var _key$match;
-    var key = event.key;
-    switch (key) {
-      case 'ArrowRight':
-      case 'ArrowLeft':
-        handleChangeField(event);
-        event.preventDefault();
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        handleChangeFieldValue(event);
-        event.preventDefault();
-        break;
-      case 'Backspace':
-        handleRemoveFieldValue(event);
-        event.preventDefault();
-        break;
-      case (_key$match = key.match(/\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:
-        handleChangeFieldValueWithNumericKeys(event);
-        event.preventDefault();
-        break;
-    }
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  };
-  var handleClick = (0, _react.useCallback)(function (event) {
+  });
+  var handleClick = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
     var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
       input: input
     }));
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
-  }, [keyPressOptions, setSelectionRange]);
+  });
+  var onKeyboardInput = (0, _useKeyboardInputEvent.default)({
+    onSegmentChange: onSegmentChange,
+    onSegmentValueChange: onSegmentValueChange,
+    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,
+    onSegmentValueRemove: onSegmentValueRemove,
+    onKeyDown: onKeyDown
+  });
+  var _useIsFocused = (0, _useIsFocused2.default)({
+      onBlur: onBlur,
+      onFocus: onFocus
+    }),
+    focused = _useIsFocused[0],
+    focusEventProps = _useIsFocused[1];
+  var renderedValue = (0, _react.useMemo)(function () {
+    if (!isEmptyValue()) {
+      return dateString;
+    }
+    return !focused ? '' : dateString;
+  }, [dateString, focused, isEmptyValue]);
   return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
-    inputMode: "text",
+    inputMode: focused ? 'numeric' : 'text',
     autoComplete: "off",
     autoCorrect: "off",
     spellCheck: false,
     ref: (0, _utils.mergeRefs)(inputRef, ref),
-    onKeyDown: handleKeyDown,
+    onKeyDown: onKeyboardInput,
     onClick: handleClick,
-    value: dateString
-  }, rest));
+    value: renderedValue,
+    placeholder: placeholder || formatStr
+  }, focusEventProps, rest));
 });
 DateInput.displayName = 'DateInput';
+DateInput.propTypes = {
+  defaultValue: _propTypes.default.instanceOf(Date),
+  format: _propTypes.default.string,
+  value: _propTypes.default.instanceOf(Date),
+  placeholder: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func
+};
 var _default = DateInput;
 exports.default = _default;

package/cjs/DateInput/index.d.ts

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

package/cjs/DateInput/index.js

@@ -3,7 +3,25 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = void 0;
+var _exportNames = {
+  useDateInputState: true,
+  useKeyboardInputEvent: true,
+  useIsFocused: true
+};
+exports.default = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;
 var _DateInput = _interopRequireDefault(require("./DateInput"));
+var _useDateInputState = require("./useDateInputState");
+exports.useDateInputState = _useDateInputState.useDateInputState;
+var _useKeyboardInputEvent = require("./useKeyboardInputEvent");
+exports.useKeyboardInputEvent = _useKeyboardInputEvent.useKeyboardInputEvent;
+var _useIsFocused = require("./useIsFocused");
+exports.useIsFocused = _useIsFocused.useIsFocused;
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  exports[key] = _utils[key];
+});
 var _default = _DateInput.default;
 exports.default = _default;

package/cjs/DateInput/useDateInputState.d.ts

@@ -1,11 +1,13 @@
+import { format } from '../utils/dateUtils';
 import type { Locale } from 'date-fns';
 interface DateInputState {
     formatStr: string;
-    localize: Locale['localize'];
+    formatDate?: typeof format;
+    locale: Locale;
     date?: Date | null;
     isControlledDate?: boolean;
 }
-declare function useDateInputState({ formatStr, localize, date, isControlledDate }: DateInputState): {
+export declare function useDateInputState({ formatStr, locale, date, isControlledDate }: DateInputState): {
     dateField: {
         year: any;
         format: string;
@@ -18,7 +20,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -39,7 +40,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -60,7 +60,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -81,7 +80,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         day: number | null;
         minute: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -102,7 +100,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         day: number | null;
         hour: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -123,28 +120,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         day: number | null;
         hour: number | null;
         minute: number | null;
-        meridian: "AM" | "PM" | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        meridian: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        day: number | null;
-        hour: number | null;
-        minute: number | null;
-        second: number | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -154,12 +129,13 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         propertyIsEnumerable(v: PropertyKey): boolean;
         should: Chai.Assertion;
     };
-    setDateOffset: (pattern: string, offset: number, callback?: ((newDate: Date) => void) | undefined) => void;
-    setDateField: (pattern: string, value: number | null, callback?: ((newDate: Date) => void) | undefined) => void;
+    setDateOffset: (pattern: string, offset: number, callback?: ((newDate: Date | null) => void) | undefined) => void;
+    setDateField: (pattern: string, value: number | null, callback?: ((newDate: Date | null) => void) | undefined) => void;
     getDateField: (pattern: string) => {
         name: any;
         value: any;
     };
     toDateString: () => string;
+    isEmptyValue: (type?: string | undefined, value?: number | null | undefined) => boolean | undefined;
 };
 export default useDateInputState;

package/cjs/DateInput/useDateInputState.js

@@ -3,6 +3,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
+exports.useDateInputState = useDateInputState;
 exports.default = void 0;
 var _react = require("react");
 var _startCase = _interopRequireDefault(require("lodash/startCase"));
@@ -10,15 +11,16 @@ var _dateUtils = require("../utils/dateUtils");
 var _DateField = require("./DateField");
 function useDateInputState(_ref) {
   var formatStr = _ref.formatStr,
-    localize = _ref.localize,
+    locale = _ref.locale,
     date = _ref.date,
     isControlledDate = _ref.isControlledDate;
-  var _useDateField = (0, _DateField.useDateField)(formatStr, localize, date),
+  var _useDateField = (0, _DateField.useDateField)(formatStr, locale.localize, date),
     dateField = _useDateField.dateField,
     dispatch = _useDateField.dispatch,
     toDateString = _useDateField.toDateString,
-    toDate = _useDateField.toDate;
-  var setDateOffset = (0, _react.useCallback)(function (pattern, offset, callback) {
+    toDate = _useDateField.toDate,
+    isEmptyValue = _useDateField.isEmptyValue;
+  var setDateOffset = function setDateOffset(pattern, offset, callback) {
     var currentDate = new Date();
     var year = dateField.year || currentDate.getFullYear();
     var month = dateField.month ? dateField.month - 1 : currentDate.getMonth();
@@ -61,8 +63,8 @@ function useDateInputState(_ref) {
         value = (0, _dateUtils.addSeconds)(new Date(year, month, day, hour, minute, second), offset).getSeconds();
         break;
       case 'a':
-        actionName = 'setMeridian';
-        value = dateField.meridian === 'AM' ? 'PM' : 'AM';
+        actionName = 'setHour';
+        value = hour >= 12 ? hour - 12 : hour + 12;
         break;
     }
     if (actionName && value) {
@@ -73,8 +75,8 @@ function useDateInputState(_ref) {
       var field = _DateField.patternMap[pattern];
       callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
     }
-  }, [dateField, toDate, dispatch]);
-  var setDateField = (0, _react.useCallback)(function (pattern, value, callback) {
+  };
+  var setDateField = function setDateField(pattern, value, callback) {
     var field = _DateField.patternMap[pattern];
     var actionName = "set" + (0, _startCase.default)(field);
     dispatch({
@@ -82,23 +84,45 @@ function useDateInputState(_ref) {
       value: value
     });
     callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
-  }, [toDate, dispatch]);
-  var getDateField = (0, _react.useCallback)(function (pattern) {
+  };
+  var getDateField = function getDateField(pattern) {
     var fieldName = _DateField.patternMap[pattern];
     return {
       name: fieldName,
       value: dateField[fieldName]
     };
-  }, [dateField]);
-  var toControlledDateString = (0, _react.useCallback)(function () {
-    return (0, _dateUtils.format)(date || new Date(), formatStr);
-  }, [date, formatStr]);
+  };
+  var toControlledDateString = function toControlledDateString() {
+    if (date && (0, _dateUtils.isValid)(date)) {
+      return (0, _dateUtils.format)(date, formatStr, {
+        locale: locale
+      });
+    }
+    // if date is not valid, return uncontrolled date string
+    return toDateString();
+  };
+  (0, _react.useEffect)(function () {
+    if (isControlledDate) {
+      if (date && (0, _dateUtils.isValid)(date)) {
+        dispatch({
+          type: 'setNewDate',
+          value: date
+        });
+      } else if (date === null) {
+        dispatch({
+          type: 'setNewDate',
+          value: null
+        });
+      }
+    }
+  }, [date, dispatch, isControlledDate]);
   return {
     dateField: dateField,
     setDateOffset: setDateOffset,
     setDateField: setDateField,
     getDateField: getDateField,
-    toDateString: isControlledDate ? toControlledDateString : toDateString
+    toDateString: isControlledDate ? toControlledDateString : toDateString,
+    isEmptyValue: isEmptyValue
   };
 }
 var _default = useDateInputState;

package/cjs/DateInput/useIsFocused.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FocusEventOptions {
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+export declare function useIsFocused({ onFocus: onFocusProp, onBlur: onBlurProp }: FocusEventOptions): [boolean, FocusEventOptions];
+export default useIsFocused;

package/cjs/DateInput/useIsFocused.js

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.useIsFocused = useIsFocused;
+exports.default = void 0;
+var _react = require("react");
+function useIsFocused(_ref) {
+  var onFocusProp = _ref.onFocus,
+    onBlurProp = _ref.onBlur;
+  var _useState = (0, _react.useState)(false),
+    isFocused = _useState[0],
+    setIsFocused = _useState[1];
+  var onFocus = (0, _react.useCallback)(function (event) {
+    setIsFocused(true);
+    onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
+  }, [onFocusProp]);
+  var onBlur = (0, _react.useCallback)(function (event) {
+    setIsFocused(false);
+    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);
+  }, [onBlurProp]);
+  return [isFocused, {
+    onFocus: onFocus,
+    onBlur: onBlur
+  }];
+}
+var _default = useIsFocused;
+exports.default = _default;

package/cjs/DateInput/useKeyboardInputEvent.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface KeyboardEventOptions {
+    onSegmentChange?: (kevent: React.KeyboardEvent<HTMLInputElement>) => void;
+    onSegmentValueChange?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onSegmentValueChangeWithNumericKeys?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onSegmentValueRemove?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export declare function useKeyboardInputEvent({ onSegmentChange, onSegmentValueChange, onSegmentValueChangeWithNumericKeys, onSegmentValueRemove, onKeyDown }: KeyboardEventOptions): (event: React.KeyboardEvent<HTMLInputElement>) => void;
+export default useKeyboardInputEvent;

package/cjs/DateInput/useKeyboardInputEvent.js

@@ -0,0 +1,44 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.useKeyboardInputEvent = useKeyboardInputEvent;
+exports.default = void 0;
+function useKeyboardInputEvent(_ref) {
+  var onSegmentChange = _ref.onSegmentChange,
+    onSegmentValueChange = _ref.onSegmentValueChange,
+    onSegmentValueChangeWithNumericKeys = _ref.onSegmentValueChangeWithNumericKeys,
+    onSegmentValueRemove = _ref.onSegmentValueRemove,
+    onKeyDown = _ref.onKeyDown;
+  return function (event) {
+    var _key$match, _key$match2;
+    var key = event.key;
+    switch (key) {
+      case 'ArrowRight':
+      case 'ArrowLeft':
+        onSegmentChange === null || onSegmentChange === void 0 ? void 0 : onSegmentChange(event);
+        event.preventDefault();
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        onSegmentValueChange === null || onSegmentValueChange === void 0 ? void 0 : onSegmentValueChange(event);
+        event.preventDefault();
+        break;
+      case 'Backspace':
+        onSegmentValueRemove === null || onSegmentValueRemove === void 0 ? void 0 : onSegmentValueRemove(event);
+        event.preventDefault();
+        break;
+      case (_key$match = key.match(/\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:
+        // Allow numeric keys to be entered
+        onSegmentValueChangeWithNumericKeys === null || onSegmentValueChangeWithNumericKeys === void 0 ? void 0 : onSegmentValueChangeWithNumericKeys(event);
+        event.preventDefault();
+      case (_key$match2 = key.match(/[a-z]/)) === null || _key$match2 === void 0 ? void 0 : _key$match2[0]:
+        // Prevent letters from being entered
+        event.preventDefault();
+        break;
+    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  };
+}
+var _default = useKeyboardInputEvent;
+exports.default = _default;

package/cjs/DateInput/utils.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type Locale } from 'date-fns';
 interface SelectedStateOptions {
     /**
@@ -24,13 +25,32 @@ interface SelectedStateOptions {
      * The offset of the value, which is used to calculate the month.
      * This value will be changed when pressing the up and down arrow keys.
      */
-    valueOffset?: number;
+    valueOffset?: number | null;
     /**
      * The date is rendered in string format according to format
      */
     dateString: string;
 }
 export declare function getPatternGroups(format: string, pattern: string): string;
+interface SelectIndexGapOptions {
+    pattern: string;
+    formatStr: string;
+    valueOffset: number | null;
+    selectedMonth: number | null;
+    localize: Locale['localize'];
+}
+export declare function getSelectIndexGap(options: SelectIndexGapOptions): number;
+interface DatePatternOptions {
+    selectionIndex: number;
+    positionOffset?: number;
+    formatStr: string;
+    dateString: string;
+    valueOffset: number | null;
+    selectedMonth: number | null;
+    localize: Locale['localize'];
+}
+export declare function getDatePattern(options: DatePatternOptions): string;
+export declare function isCursorAfterMonth(cursorIndex: number, formatStr: string): boolean;
 export declare function getInputSelectedState(options: SelectedStateOptions): {
     selectionStart: number;
     selectionEnd: number;
@@ -38,4 +58,6 @@ 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 {};