rsuite 5.48.1 → 5.49.0

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 {};

package/cjs/DateInput/utils.js

@@ -4,15 +4,99 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.getPatternGroups = getPatternGroups;
+exports.getSelectIndexGap = getSelectIndexGap;
+exports.getDatePattern = getDatePattern;
+exports.isCursorAfterMonth = isCursorAfterMonth;
 exports.getInputSelectedState = getInputSelectedState;
 exports.validateDateTime = validateDateTime;
 exports.modifyDate = modifyDate;
+exports.isFieldFullValue = isFieldFullValue;
+exports.useInputSelection = useInputSelection;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _dateUtils = require("../utils/dateUtils");
+var _utils = require("../utils");
 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]) || '';
 }
+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;
+}
+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((0, _extends2.default)({}, 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.
+function isCursorAfterMonth(cursorIndex, formatStr) {
+  return cursorIndex > formatStr.indexOf('M');
+}
 function getInputSelectedState(options) {
   var input = options.input,
     direction = options.direction,
@@ -22,74 +106,61 @@ 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 (0, _extends2.default)({
       selectedPattern: datePattern
@@ -156,4 +227,37 @@ function modifyDate(date, type, value) {
       return (0, _dateUtils.setSeconds)(date, value);
   }
   return date;
+}
+function isFieldFullValue(formatStr, value, pattern) {
+  var patternGroup = getPatternGroups(formatStr, pattern);
+  if (value.toString().length === patternGroup.length) {
+    return true;
+  }
+  switch (pattern) {
+    case 'M':
+      return parseInt(value + "0") > 12;
+    case 'd':
+      return parseInt(value + "0") > 31;
+    case 'H':
+      return parseInt(value + "0") > 23;
+    case 'h':
+      return parseInt(value + "0") > 12;
+    case 'm':
+    case 's':
+      return parseInt(value + "0") > 59;
+    default:
+      return false;
+  }
+}
+var isTestEnvironment = undefined === 'test';
+function useInputSelection(input) {
+  return function setSelectionRange(selectionStart, selectionEnd) {
+    if (isTestEnvironment) {
+      (0, _utils.safeSetSelection)(input.current, selectionStart, selectionEnd);
+      return;
+    }
+    requestAnimationFrame(function () {
+      (0, _utils.safeSetSelection)(input.current, selectionStart, selectionEnd);
+    });
+  };
 }

package/cjs/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 */
@@ -21,16 +22,26 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     inline?: boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
     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 +109,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;
 }
 /**