rsuite 5.48.1 → 5.50.0

package/esm/DateInput/useDateInputState.js

@@ -1,19 +1,20 @@
 'use client';
-import { useCallback } from 'react';
+import { useEffect } from 'react';
 import startCase from 'lodash/startCase';
-import { addDays, addMonths, addYears, addHours, addMinutes, addSeconds, format, isLastDayOfMonth, lastDayOfMonth } from '../utils/dateUtils';
+import { addDays, addMonths, addYears, addHours, addMinutes, addSeconds, format, isLastDayOfMonth, lastDayOfMonth, isValid } from '../utils/dateUtils';
 import { useDateField, patternMap } from './DateField';
-function useDateInputState(_ref) {
+export function useDateInputState(_ref) {
   var formatStr = _ref.formatStr,
-    localize = _ref.localize,
+    locale = _ref.locale,
     date = _ref.date,
     isControlledDate = _ref.isControlledDate;
-  var _useDateField = useDateField(formatStr, localize, date),
+  var _useDateField = useDateField(formatStr, locale.localize, date),
     dateField = _useDateField.dateField,
     dispatch = _useDateField.dispatch,
     toDateString = _useDateField.toDateString,
-    toDate = _useDateField.toDate;
-  var setDateOffset = 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();
@@ -56,8 +57,8 @@ function useDateInputState(_ref) {
         value = 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) {
@@ -68,8 +69,8 @@ function useDateInputState(_ref) {
       var field = patternMap[pattern];
       callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
     }
-  }, [dateField, toDate, dispatch]);
-  var setDateField = useCallback(function (pattern, value, callback) {
+  };
+  var setDateField = function setDateField(pattern, value, callback) {
     var field = patternMap[pattern];
     var actionName = "set" + startCase(field);
     dispatch({
@@ -77,23 +78,45 @@ function useDateInputState(_ref) {
       value: value
     });
     callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
-  }, [toDate, dispatch]);
-  var getDateField = useCallback(function (pattern) {
+  };
+  var getDateField = function getDateField(pattern) {
     var fieldName = patternMap[pattern];
     return {
       name: fieldName,
       value: dateField[fieldName]
     };
-  }, [dateField]);
-  var toControlledDateString = useCallback(function () {
-    return format(date || new Date(), formatStr);
-  }, [date, formatStr]);
+  };
+  var toControlledDateString = function toControlledDateString() {
+    if (date && isValid(date)) {
+      return format(date, formatStr, {
+        locale: locale
+      });
+    }
+    // if date is not valid, return uncontrolled date string
+    return toDateString();
+  };
+  useEffect(function () {
+    if (isControlledDate) {
+      if (date && 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
   };
 }
 export default useDateInputState;

package/esm/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/esm/DateInput/useIsFocused.js

@@ -0,0 +1,22 @@
+'use client';
+import { useState, useCallback } from 'react';
+export function useIsFocused(_ref) {
+  var onFocusProp = _ref.onFocus,
+    onBlurProp = _ref.onBlur;
+  var _useState = useState(false),
+    isFocused = _useState[0],
+    setIsFocused = _useState[1];
+  var onFocus = useCallback(function (event) {
+    setIsFocused(true);
+    onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
+  }, [onFocusProp]);
+  var onBlur = useCallback(function (event) {
+    setIsFocused(false);
+    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);
+  }, [onBlurProp]);
+  return [isFocused, {
+    onFocus: onFocus,
+    onBlur: onBlur
+  }];
+}
+export default useIsFocused;

package/esm/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/esm/DateInput/useKeyboardInputEvent.js

@@ -0,0 +1,38 @@
+'use client';
+export 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);
+  };
+}
+export default useKeyboardInputEvent;

package/esm/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 {};

package/esm/DateInput/utils.js

@@ -1,10 +1,89 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { setYear, setMonth, setDate, setHours, setMinutes, setSeconds } from '../utils/dateUtils';
+import { safeSetSelection } from '../utils';
 export function getPatternGroups(format, pattern) {
   var _format$match;
   return ((_format$match = format.match(new RegExp("(" + pattern + ")+"))) === null || _format$match === void 0 ? void 0 : _format$match[0]) || '';
 }
+export function getSelectIndexGap(options) {
+  var pattern = options.pattern,
+    formatStr = options.formatStr,
+    valueOffset = options.valueOffset,
+    selectedMonth = options.selectedMonth,
+    localize = options.localize;
+  var gap = 0;
+  var monthIsAbbreviated = formatStr.includes('MMM');
+  var monthIsFull = formatStr.includes('MMMM');
+
+  // If the month is abbreviated or full, the gap needs to be adjusted.
+  if (monthIsAbbreviated || monthIsFull) {
+    var isSelectedMonth = pattern === 'M';
+
+    // If the selected is the month, and the valueOffset is null,
+    // it means that the delete key is pressed, and the default pattern is displayed, and the gap is 0 at this time.
+    if (isSelectedMonth && valueOffset === null) {
+      return 0;
+    }
+
+    // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.
+    if (selectedMonth === null && valueOffset === 0) {
+      return 0;
+    }
+    var month = selectedMonth ? selectedMonth + (isSelectedMonth ? valueOffset || 0 : 0) : 1;
+    if (month > 12) {
+      month = 1;
+    } else if (month === 0) {
+      month = 12;
+    }
+    var monthStr = localize === null || localize === void 0 ? void 0 : localize.month(month - 1, {
+      width: monthIsFull ? 'wide' : 'abbreviated'
+    });
+    gap = monthStr.length - (monthIsFull ? 4 : 3);
+  }
+  return gap;
+}
+export function getDatePattern(options) {
+  var selectionIndex = options.selectionIndex,
+    _options$positionOffs = options.positionOffset,
+    positionOffset = _options$positionOffs === void 0 ? -1 : _options$positionOffs,
+    formatStr = options.formatStr,
+    dateString = options.dateString,
+    valueOffset = options.valueOffset,
+    selectedMonth = options.selectedMonth,
+    localize = options.localize;
+  var pattern = formatStr.charAt(selectionIndex || 0);
+  if (selectionIndex < 0 || selectionIndex > dateString.length - 1) {
+    pattern = formatStr.trim().charAt(0);
+    return pattern;
+  }
+  var gap = 0;
+  if (isCursorAfterMonth(selectionIndex, formatStr)) {
+    gap = getSelectIndexGap({
+      pattern: pattern,
+      formatStr: formatStr,
+      valueOffset: valueOffset,
+      selectedMonth: selectedMonth,
+      localize: localize
+    });
+  }
+  pattern = formatStr.charAt(selectionIndex - gap);
+
+  // If the pattern is not a letter, then get the pattern from the previous or next letter.
+  if (!pattern.match(/[y|d|M|H|h|m|s|a]/)) {
+    var nextIndex = selectionIndex + positionOffset;
+    pattern = getDatePattern(_extends({}, options, {
+      selectionIndex: nextIndex
+    }));
+  }
+  return pattern;
+}
+
+// Determine whether the cursor is after the month.
+// If the currently operated field is after the month, the selected field needs to be moved backward.
+export function isCursorAfterMonth(cursorIndex, formatStr) {
+  return cursorIndex > formatStr.indexOf('M');
+}
 export function getInputSelectedState(options) {
   var input = options.input,
     direction = options.direction,
@@ -14,74 +93,61 @@ export function getInputSelectedState(options) {
     dateString = options.dateString,
     _options$valueOffset = options.valueOffset,
     valueOffset = _options$valueOffset === void 0 ? 0 : _options$valueOffset;
-  var getSelectIndexGap = function getSelectIndexGap(pattern) {
-    var gap = 0;
-    var monthIsAbbreviated = formatStr.includes('MMM');
-    var monthIsFull = formatStr.includes('MMMM');
-
-    // If the month is abbreviated or full, the gap needs to be adjusted.
-    if (monthIsAbbreviated || monthIsFull) {
-      var isSelected = pattern === 'M';
-      if (selectedMonth === null && valueOffset === 0) {
-        return gap;
-      }
-      var month = selectedMonth ? selectedMonth + (isSelected ? valueOffset : 0) : 1;
-      if (month > 12) {
-        month = 1;
-      } else if (month === 0) {
-        month = 12;
-      }
-      var monthStr = localize === null || localize === void 0 ? void 0 : localize.month(month - 1, {
-        width: monthIsFull ? 'wide' : 'abbreviated'
-      });
-      gap = monthStr.length - (monthIsFull ? 4 : 3);
-    }
-    return gap;
-  };
-  var getDatePattern = function getDatePattern(selectionIndex, positionOffset) {
-    if (positionOffset === void 0) {
-      positionOffset = -1;
-    }
-    var pattern = formatStr.charAt((input === null || input === void 0 ? void 0 : input.selectionStart) || 0);
-    if (selectionIndex < 0 || selectionIndex > dateString.length - 1) {
-      pattern = formatStr.trim().charAt(0);
-      return pattern;
-    }
-    var gap = getSelectIndexGap(pattern);
-    pattern = formatStr.charAt(selectionIndex - gap);
-
-    // If the pattern is not a letter, then get the pattern from the previous or next letter.
-    if (!pattern.match(/[y|d|M|H|h|m|s|a]/)) {
-      var nextIndex = selectionIndex + positionOffset;
-      pattern = getDatePattern(nextIndex, positionOffset);
-    }
-    return pattern;
-  };
   var getPatternSelectedIndexes = function getPatternSelectedIndexes(pattern) {
     var selectionStart = formatStr.indexOf(pattern);
     var selectionEnd = formatStr.lastIndexOf(pattern) + 1;
-    var gap = getSelectIndexGap(pattern);
-    if (pattern === 'M') {
+    var gap = getSelectIndexGap({
+      pattern: pattern,
+      formatStr: formatStr,
+      valueOffset: valueOffset,
+      selectedMonth: selectedMonth,
+      localize: localize
+    });
+    var isSelectedMonth = pattern === 'M';
+    var isNullMonth = selectedMonth === null && !(isSelectedMonth && valueOffset !== 0);
+
+    // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.
+    if (isNullMonth) {
+      return {
+        selectionStart: selectionStart,
+        selectionEnd: selectionEnd
+      };
+    }
+    if (isSelectedMonth) {
       return {
         selectionStart: selectionStart,
         selectionEnd: selectionEnd + gap
       };
     }
+    if (isCursorAfterMonth(selectionStart, formatStr)) {
+      return {
+        selectionStart: selectionStart + gap,
+        selectionEnd: selectionEnd + gap
+      };
+    }
     return {
-      selectionStart: selectionStart + gap,
-      selectionEnd: selectionEnd + gap
+      selectionStart: selectionStart,
+      selectionEnd: selectionEnd
     };
   };
   if (typeof input.selectionEnd === 'number' && typeof input.selectionStart === 'number') {
-    var index = input.selectionStart;
+    var selectionIndex = input.selectionStart;
     var positionOffset = -1;
     if (direction === 'left') {
-      index = input.selectionStart - 1;
+      selectionIndex = input.selectionStart - 1;
     } else if (direction === 'right') {
-      index = input.selectionEnd + 1;
+      selectionIndex = input.selectionEnd + 1;
       positionOffset = 1;
     }
-    var datePattern = getDatePattern(index, positionOffset);
+    var datePattern = getDatePattern({
+      selectionIndex: selectionIndex,
+      positionOffset: positionOffset,
+      formatStr: formatStr,
+      dateString: dateString,
+      valueOffset: valueOffset,
+      selectedMonth: selectedMonth,
+      localize: localize
+    });
     var indexes = getPatternSelectedIndexes(datePattern);
     return _extends({
       selectedPattern: datePattern
@@ -148,4 +214,37 @@ export function modifyDate(date, type, value) {
       return setSeconds(date, 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 = undefined === 'test';
+export function useInputSelection(input) {
+  return function setSelectionRange(selectionStart, selectionEnd) {
+    if (isTestEnvironment) {
+      safeSetSelection(input.current, selectionStart, selectionEnd);
+      return;
+    }
+    requestAnimationFrame(function () {
+      safeSetSelection(input.current, selectionStart, selectionEnd);
+    });
+  };
 }

package/esm/DatePicker/DatePicker.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 import { RangeType } from './Toolbar';
 import { DatePickerLocale } from '../locales';
-import { PickerToggleProps } from '../Picker';
 import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
 export type { RangeType } from './Toolbar';
-export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext' | 'loading'> {
-    /** Predefined date Ranges */
-    ranges?: RangeType<Date>[];
+export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null> {
+    /** Custom caret component */
+    caretAs?: React.ElementType | null;
     /** Calendar panel default presentation date and time */
     calendarDefaultDate?: Date;
+    /** Whether disabled the component */
+    disabled?: boolean;
     /** Rendered as an input, the date can be entered via the keyboard */
     editable?: boolean;
     /** Format date */
@@ -19,18 +20,32 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      * @deprecated use <Calendar> instead
      **/
     inline?: boolean;
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
+    /**
+     * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_week_date
+     */
     isoWeek?: boolean;
+    /** A label displayed at the beginning of toggle button */
+    label?: React.ReactNode;
     /** Set the upper limit of the available year relative to the current selection date */
     limitEndYear?: number;
     /** Set the lower limit of the available year relative to the current selection date */
     limitStartYear?: number;
+    /** Whether to display a loading state indicator */
+    loading?: boolean;
+    /** one tap to select */
+    oneTap?: boolean;
+    /** Whether plaintext the component */
+    plaintext?: boolean;
+    /** Whether read only the component */
+    readOnly?: boolean;
+    /** Predefined date Ranges */
+    ranges?: RangeType<Date>[];
     /** Whether to show week numbers */
     showWeekNumbers?: boolean;
     /** Meridian format */
     showMeridian?: boolean;
-    /** one tap to select */
-    oneTap?: boolean;
     /**
      * Whether to disable a date on the calendar view
      *
@@ -98,7 +113,9 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
-    /** Custom render value */
+    /**
+     * @deprecated
+     */
     renderValue?: (value: Date, format: string) => string;
 }
 /**