rsuite 5.76.2 → 6.0.0-canary-20250103

package/esm/DateInput/DateField.js

@@ -1,11 +1,8 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _wrapNativeSuper from "@babel/runtime/helpers/esm/wrapNativeSuper";
 import { useReducer } from 'react';
-import isValid from 'date-fns/isValid';
+import { isValid } from 'date-fns/isValid';
 import { modifyDate } from "./utils.js";
-export var patternMap = {
+export const patternMap = {
   y: 'year',
   M: 'month',
   d: 'day',
@@ -15,96 +12,98 @@ export var patternMap = {
   s: 'second',
   a: 'meridiem'
 };
-export var DateField = /*#__PURE__*/function (_Object) {
-  function DateField(format, value) {
-    var _this;
-    _this = _Object.call(this) || this;
-    _this.format = void 0;
-    _this.patternArray = [];
-    _this.year = null;
-    _this.month = null;
-    _this.day = null;
-    _this.hour = null;
-    _this.minute = null;
-    _this.second = null;
-    _this.format = format;
-    var formatArray = format.match(new RegExp('([y|d|M|H|h|m|s|a])+', 'ig')) || [];
-    _this.patternArray = formatArray.map(function (pattern) {
+export class DateField extends Object {
+  constructor(format, value) {
+    super();
+    this.format = void 0;
+    this.patternArray = [];
+    this.year = null;
+    this.month = null;
+    this.day = null;
+    this.hour = null;
+    this.minute = null;
+    this.second = null;
+    this.format = format;
+    const formatArray = format.match(new RegExp('([y|d|M|H|h|m|s|a])+', 'ig')) || [];
+    this.patternArray = formatArray.map(pattern => {
       return {
-        pattern: pattern,
+        pattern,
         key: patternMap[pattern[0]]
       };
     });
     if (value && isValid(value)) {
-      _this.year = value.getFullYear();
-      _this.month = value.getMonth() + 1;
-      _this.day = value.getDate();
-      _this.hour = value.getHours();
-      _this.minute = value.getMinutes();
-      _this.second = value.getSeconds();
+      this.year = value.getFullYear();
+      this.month = value.getMonth() + 1;
+      this.day = value.getDate();
+      this.hour = value.getHours();
+      this.minute = value.getMinutes();
+      this.second = value.getSeconds();
     }
-    return _this;
   }
-  _inheritsLoose(DateField, _Object);
-  return DateField;
-}(/*#__PURE__*/_wrapNativeSuper(Object));
+}
 
 /**
  * Pad a number with zeros to the left.
  */
 function padNumber(number, length) {
-  var numberString = String(number);
+  let numberString = String(number);
   if (numberString.length >= length) {
     return numberString;
   }
-  var paddingCount = length - numberString.length;
-  for (var i = 0; i < paddingCount; i++) {
+  const paddingCount = length - numberString.length;
+  for (let i = 0; i < paddingCount; i++) {
     numberString = '0' + numberString;
   }
   return numberString;
 }
-export var useDateField = function useDateField(format, localize, date) {
-  var _useReducer = useReducer(function (state, action) {
-      switch (action.type) {
-        case 'setYear':
-          return _extends({}, state, {
-            year: action.value
-          });
-        case 'setMonth':
-          return _extends({}, state, {
-            month: action.value
-          });
-        case 'setDay':
-          return _extends({}, state, {
-            day: action.value
-          });
-        case 'setHour':
-          return _extends({}, state, {
-            hour: action.value
-          });
-        case 'setMinute':
-          return _extends({}, state, {
-            minute: action.value
-          });
-        case 'setSecond':
-          return _extends({}, state, {
-            second: action.value
-          });
-        case 'setNewDate':
-          return new DateField(format, action.value);
-        default:
-          return state;
-      }
-    }, new DateField(format, date)),
-    dateField = _useReducer[0],
-    dispatch = _useReducer[1];
-  var toDateString = function toDateString() {
-    var str = format;
-    dateField.patternArray.forEach(function (item) {
-      var key = item.key,
-        pattern = item.pattern;
-      var hour = dateField.hour;
-      var value = dateField[key];
+export const useDateField = (format, localize, date) => {
+  const [dateField, dispatch] = useReducer((state, action) => {
+    switch (action.type) {
+      case 'setYear':
+        return {
+          ...state,
+          year: action.value
+        };
+      case 'setMonth':
+        return {
+          ...state,
+          month: action.value
+        };
+      case 'setDay':
+        return {
+          ...state,
+          day: action.value
+        };
+      case 'setHour':
+        return {
+          ...state,
+          hour: action.value
+        };
+      case 'setMinute':
+        return {
+          ...state,
+          minute: action.value
+        };
+      case 'setSecond':
+        return {
+          ...state,
+          second: action.value
+        };
+      case 'setNewDate':
+        return new DateField(format, action.value);
+      default:
+        return state;
+    }
+  }, new DateField(format, date));
+  const toDateString = () => {
+    let str = format;
+    dateField.patternArray.forEach(item => {
+      const {
+        key,
+        pattern
+      } = item;
+      const hour = dateField.hour;
+      let value = dateField[key];
       if (value !== null) {
         if (pattern === 'MMM' && typeof value === 'number') {
           value = localize === null || localize === void 0 ? void 0 : localize.month(value - 1, {
@@ -135,12 +134,12 @@ export var useDateField = function useDateField(format, localize, date) {
   };
 
   // Check if the field value is valid.
-  var validFieldValue = function validFieldValue(type, value) {
+  const validFieldValue = (type, value) => {
     var _format$match;
-    var isValid = true;
-    (_format$match = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match === void 0 || _format$match.forEach(function (pattern) {
-      var key = patternMap[pattern[0]];
-      var fieldValue = type === key ? value : dateField[key];
+    let isValid = true;
+    (_format$match = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match === void 0 || _format$match.forEach(pattern => {
+      const key = patternMap[pattern[0]];
+      const fieldValue = type === key ? value : dateField[key];
       if (fieldValue === null) {
         isValid = false;
         return;
@@ -148,25 +147,25 @@ export var useDateField = function useDateField(format, localize, date) {
     });
     return isValid;
   };
-  var isEmptyValue = function isEmptyValue(type, value) {
+  const isEmptyValue = (type, value) => {
     var _format$match2;
-    var checkValueArray = (_format$match2 = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match2 === void 0 ? void 0 : _format$match2.map(function (pattern) {
-      var key = patternMap[pattern[0]];
-      var fieldValue = type === key ? value : dateField[key];
+    const checkValueArray = (_format$match2 = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match2 === void 0 ? void 0 : _format$match2.map(pattern => {
+      const key = patternMap[pattern[0]];
+      const fieldValue = type === key ? value : dateField[key];
       return fieldValue !== null;
     });
-    return checkValueArray === null || checkValueArray === void 0 ? void 0 : checkValueArray.every(function (item) {
-      return item === false;
-    });
+    return checkValueArray === null || checkValueArray === void 0 ? void 0 : checkValueArray.every(item => item === false);
   };
-  var toDate = function toDate(type, value) {
-    var year = dateField.year,
-      month = dateField.month,
-      day = dateField.day,
-      hour = dateField.hour,
-      minute = dateField.minute,
-      second = dateField.second;
-    var date = new Date(year || 0, typeof month === 'number' ? Math.max(month - 1, 0) : 0,
+  const toDate = (type, value) => {
+    const {
+      year,
+      month,
+      day,
+      hour,
+      minute,
+      second
+    } = dateField;
+    const date = new Date(year || 0, typeof month === 'number' ? Math.max(month - 1, 0) : 0,
     // The default day is 1 when the value is null, otherwise it becomes the last day of the month.
     day || 1, hour || 0, minute || 0, second || 0);
     if (typeof type === 'undefined' || typeof value === 'undefined') {
@@ -184,17 +183,17 @@ export var useDateField = function useDateField(format, localize, date) {
       return new Date('');
     }
     if (type === 'meridiem' && typeof hour === 'number') {
-      var newHour = hour > 12 ? hour - 12 : hour + 12;
+      const newHour = hour > 12 ? hour - 12 : hour + 12;
       type = 'hour';
       value = newHour;
     }
     return modifyDate(date, type, value);
   };
   return {
-    dateField: dateField,
-    dispatch: dispatch,
-    toDate: toDate,
-    toDateString: toDateString,
-    isEmptyValue: isEmptyValue
+    dateField,
+    dispatch,
+    toDate,
+    toDateString,
+    isEmptyValue
   };
 };

package/esm/DateInput/DateInput.js

@@ -1,9 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus", "onPaste"];
 import React, { useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import Input from "../Input/index.js";
 import { useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
@@ -20,79 +17,81 @@ import useSelectedState from "./hooks/useSelectedState.js";
  * @version 5.58.0
  * @see https://rsuitejs.com/components/date-input/
  */
-var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = useCustom('DateInput', props),
-    propsWithDefaults = _useCustom.propsWithDefaults,
-    parseDate = _useCustom.parseDate,
-    getLocale = _useCustom.getLocale;
-  var _getLocale = getLocale('DateTimeFormats'),
-    dateLocale = _getLocale.dateLocale,
-    shortDateFormat = _getLocale.shortDateFormat;
-  var _propsWithDefaults$fo = propsWithDefaults.format,
-    formatStr = _propsWithDefaults$fo === void 0 ? shortDateFormat : _propsWithDefaults$fo,
-    valueProp = propsWithDefaults.value,
-    defaultValue = propsWithDefaults.defaultValue,
-    placeholder = propsWithDefaults.placeholder,
-    onChange = propsWithDefaults.onChange,
-    onKeyDown = propsWithDefaults.onKeyDown,
-    onBlur = propsWithDefaults.onBlur,
-    onFocus = propsWithDefaults.onFocus,
-    onPaste = propsWithDefaults.onPaste,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var inputRef = useRef();
-  var _useSelectedState = useSelectedState(),
-    selectedState = _useSelectedState.selectedState,
-    setSelectedState = _useSelectedState.setSelectedState;
-  var _useControlled = useControlled(valueProp, defaultValue),
-    value = _useControlled[0],
-    setValue = _useControlled[1],
-    isControlled = _useControlled[2];
-  var _useDateInputState = useDateInputState({
-      formatStr: formatStr,
-      locale: dateLocale,
-      date: value,
-      isControlledDate: isControlled
-    }),
-    dateField = _useDateInputState.dateField,
-    setDateOffset = _useDateInputState.setDateOffset,
-    setDateField = _useDateInputState.setDateField,
-    setNewDate = _useDateInputState.setNewDate,
-    getDateField = _useDateInputState.getDateField,
-    toDateString = _useDateInputState.toDateString,
-    isEmptyValue = _useDateInputState.isEmptyValue;
-  var _useFieldCursor = useFieldCursor(formatStr, valueProp),
-    isMoveCursor = _useFieldCursor.isMoveCursor,
-    isResetValue = _useFieldCursor.isResetValue,
-    increment = _useFieldCursor.increment,
-    reset = _useFieldCursor.reset;
-  var dateString = toDateString();
-  var keyPressOptions = useMemo(function () {
-    return {
-      formatStr: formatStr,
-      localize: dateLocale.localize,
-      selectedMonth: dateField.month,
-      dateString: dateString
-    };
-  }, [dateField, dateString, formatStr, dateLocale]);
-  var setSelectionRange = useInputSelection(inputRef);
-  var handleChange = useEventCallback(function (value, event) {
+const DateInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults,
+    parseDate,
+    getLocale
+  } = useCustom('DateInput', props);
+  const {
+    dateLocale,
+    shortDateFormat
+  } = getLocale('DateTimeFormats');
+  const {
+    format: formatStr = shortDateFormat,
+    value: valueProp,
+    defaultValue,
+    placeholder,
+    onChange,
+    onKeyDown,
+    onBlur,
+    onFocus,
+    onPaste,
+    ...rest
+  } = propsWithDefaults;
+  const inputRef = useRef();
+  const {
+    selectedState,
+    setSelectedState
+  } = useSelectedState();
+  const [value, setValue, isControlled] = useControlled(valueProp, defaultValue);
+  const {
+    dateField,
+    setDateOffset,
+    setDateField,
+    setNewDate,
+    getDateField,
+    toDateString,
+    isEmptyValue
+  } = useDateInputState({
+    formatStr,
+    locale: dateLocale,
+    date: value,
+    isControlledDate: isControlled
+  });
+  const {
+    isMoveCursor,
+    isResetValue,
+    increment,
+    reset
+  } = useFieldCursor(formatStr, valueProp);
+  const dateString = toDateString();
+  const keyPressOptions = useMemo(() => ({
+    formatStr,
+    localize: dateLocale.localize,
+    selectedMonth: dateField.month,
+    dateString
+  }), [dateField, dateString, formatStr, dateLocale]);
+  const setSelectionRange = useInputSelection(inputRef);
+  const handleChange = useEventCallback((value, event) => {
     onChange === null || onChange === void 0 || onChange(value, event);
     setValue(value);
   });
-  var handleClear = useEventCallback(function (event) {
+  const handleClear = useEventCallback(event => {
     handleChange(null, event);
     setNewDate(null);
     setSelectionRange(0, 0);
     reset();
   });
-  var onSegmentChange = useEventCallback(function (event, nextDirection) {
-    var input = event.target;
-    var key = event.key;
-    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
-    var state = getInputSelectedState(_extends({}, keyPressOptions, {
-      input: input,
-      direction: direction
-    }));
+  const onSegmentChange = useEventCallback((event, nextDirection) => {
+    const input = event.target;
+    const key = event.key;
+    const direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
+    const state = getInputSelectedState({
+      ...keyPressOptions,
+      input,
+      direction
+    });
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
 
@@ -101,46 +100,44 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       reset();
     }
   });
-  var onSegmentValueChange = useEventCallback(function (event) {
-    var input = event.target;
-    var key = event.key;
-    var offset = key === 'ArrowUp' ? 1 : -1;
-    var state = getInputSelectedState(_extends({}, keyPressOptions, {
-      input: input,
+  const onSegmentValueChange = useEventCallback(event => {
+    const input = event.target;
+    const key = event.key;
+    const offset = key === 'ArrowUp' ? 1 : -1;
+    const state = getInputSelectedState({
+      ...keyPressOptions,
+      input,
       valueOffset: offset
-    }));
-    setSelectedState(state);
-    setDateOffset(state.selectedPattern, offset, function (date) {
-      return handleChange(date, event);
     });
+    setSelectedState(state);
+    setDateOffset(state.selectedPattern, offset, date => handleChange(date, event));
     setSelectionRange(state.selectionStart, state.selectionEnd);
   });
-  var onSegmentValueChangeWithNumericKeys = useEventCallback(function (event) {
-    var input = event.target;
-    var key = event.key;
-    var pattern = selectedState.selectedPattern;
+  const onSegmentValueChangeWithNumericKeys = useEventCallback(event => {
+    const input = event.target;
+    const key = event.key;
+    const pattern = selectedState.selectedPattern;
     if (!pattern) {
       return;
     }
-    var field = getDateField(pattern);
-    var value = parseInt(key, 10);
-    var padValue = parseInt("" + (field.value || '') + key, 10);
-    var newValue = value;
+    const field = getDateField(pattern);
+    const value = parseInt(key, 10);
+    const padValue = parseInt(`${field.value || ''}${key}`, 10);
+    let newValue = value;
     if (validateDateTime(field.name, padValue) && !isResetValue()) {
       // Check if the value entered by the user is a valid date
       newValue = padValue;
     }
-    setDateField(pattern, newValue, function (date) {
-      return handleChange(date, event);
-    });
+    setDateField(pattern, newValue, date => handleChange(date, event));
 
     // The currently selected month will be retained as a parameter of getInputSelectedState,
     // but if the user enters a month, the month value will be replaced with the value entered by the user.
-    var selectedMonth = pattern === 'M' ? newValue : dateField.month;
-    var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
-      input: input,
-      selectedMonth: selectedMonth
-    }));
+    const selectedMonth = pattern === 'M' ? newValue : dateField.month;
+    const nextState = getInputSelectedState({
+      ...keyPressOptions,
+      input,
+      selectedMonth
+    });
     setSelectedState(nextState);
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
     increment();
@@ -150,62 +147,60 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSegmentChange(event, 'right');
     }
   });
-  var onSegmentValueRemove = useEventCallback(function (event) {
-    var input = event.target;
-    var value = input.value;
+  const onSegmentValueRemove = useEventCallback(event => {
+    const input = event.target;
+    const value = input.value;
 
     // If the text is all selected, clear the value
     if (input.selectionStart === 0 && value && input.selectionEnd === value.length) {
       handleClear(event);
     } else if (selectedState.selectedPattern) {
-      var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
-        input: input,
+      const nextState = getInputSelectedState({
+        ...keyPressOptions,
+        input,
         valueOffset: null
-      }));
+      });
       setSelectedState(nextState);
       setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
-      setDateField(selectedState.selectedPattern, null, function (date) {
-        return handleChange(date, event);
-      });
+      setDateField(selectedState.selectedPattern, null, date => handleChange(date, event));
       reset();
     }
   });
-  var handleClick = useEventCallback(function (event) {
-    var input = event.target;
-    var state = getInputSelectedState(_extends({}, keyPressOptions, {
-      input: input
-    }));
+  const handleClick = useEventCallback(event => {
+    const input = event.target;
+    const state = getInputSelectedState({
+      ...keyPressOptions,
+      input
+    });
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
     if (selectedState.selectedPattern !== state.selectedPattern) {
       reset();
     }
   });
-  var handlePaste = useEventCallback(function (event) {
+  const handlePaste = useEventCallback(event => {
     var _event$clipboardData;
     event.preventDefault();
-    var pasteText = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text');
-    var nextDate = parseDate(pasteText, formatStr);
+    const pasteText = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text');
+    const nextDate = parseDate(pasteText, formatStr);
     if (isValid(nextDate)) {
       handleChange(nextDate, event);
       setNewDate(nextDate);
     }
     onPaste === null || onPaste === void 0 || onPaste(event);
   });
-  var onKeyboardInput = useKeyboardInputEvent({
-    onSegmentChange: onSegmentChange,
-    onSegmentValueChange: onSegmentValueChange,
-    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,
-    onSegmentValueRemove: onSegmentValueRemove,
-    onKeyDown: onKeyDown
+  const onKeyboardInput = useKeyboardInputEvent({
+    onSegmentChange,
+    onSegmentValueChange,
+    onSegmentValueChangeWithNumericKeys,
+    onSegmentValueRemove,
+    onKeyDown
+  });
+  const [focused, focusEventProps] = useIsFocused({
+    onBlur,
+    onFocus
   });
-  var _useIsFocused = useIsFocused({
-      onBlur: onBlur,
-      onFocus: onFocus
-    }),
-    focused = _useIsFocused[0],
-    focusEventProps = _useIsFocused[1];
-  var renderedValue = useMemo(function () {
+  const renderedValue = useMemo(() => {
     if (!isEmptyValue()) {
       return dateString;
     }
@@ -225,14 +220,4 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, focusEventProps, rest));
 });
 DateInput.displayName = 'DateInput';
-DateInput.propTypes = {
-  defaultValue: PropTypes.instanceOf(Date),
-  format: PropTypes.string,
-  value: PropTypes.instanceOf(Date),
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func
-};
 export default DateInput;