rsuite 5.47.0 → 5.48.0

package/esm/CustomProvider/CustomProvider.js

@@ -8,6 +8,12 @@ import ToastContainer, { toastPlacements } from '../toaster/ToastContainer';
 import { usePortal } from '../utils';
 var CustomContext = /*#__PURE__*/React.createContext({});
 var themes = ['light', 'dark', 'high-contrast'];
+
+/**
+ * CustomProvider is used to provide global configuration, such as language, theme, etc.
+ *
+ * @see https://rsuitejs.com/components/custom-provider
+ */
 var CustomProvider = function CustomProvider(props) {
   var children = props.children,
     _props$classPrefix = props.classPrefix,

package/esm/DOMHelper/index.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="node" />
 import * as helpers from 'dom-lib';
 export * from 'dom-lib';
+/**
+ * a wrapper of dom-lib with some custom methods.
+ * @see https://rsuitejs.com/components/dom-helper/
+ */
 declare const DOMHelper: {
     isElement: (value: any) => value is HTMLElement;
     on: typeof helpers.on;

package/esm/DOMHelper/index.js

@@ -3,6 +3,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as helpers from 'dom-lib';
 import isElement from './isElement';
 export * from 'dom-lib';
+
+/**
+ * a wrapper of dom-lib with some custom methods.
+ * @see https://rsuitejs.com/components/dom-helper/
+ */
 var DOMHelper = _extends({}, helpers, {
   isElement: isElement
 });

package/esm/DateInput/DateField.d.ts

@@ -0,0 +1,180 @@
+/// <reference types="react" />
+import { type Locale } from 'date-fns';
+export declare const patternMap: {
+    y: string;
+    M: string;
+    d: string;
+    H: string;
+    h: string;
+    m: string;
+    s: string;
+    a: string;
+};
+export declare class DateField extends Object {
+    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;
+    meridian: 'AM' | 'PM' | null;
+    constructor(format: string, value?: Date | null);
+}
+export declare const useDateField: (format: string, localize: Locale['localize'], date?: Date | null) => {
+    dateField: {
+        year: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        month: number | null;
+        day: number | null;
+        hour: number | null;
+        minute: number | null;
+        second: 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;
+    } | {
+        month: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        day: number | null;
+        hour: number | null;
+        minute: number | null;
+        second: 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;
+    } | {
+        day: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        month: number | null;
+        hour: number | null;
+        minute: number | null;
+        second: 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;
+    } | {
+        hour: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        month: number | null;
+        day: number | null;
+        minute: number | null;
+        second: 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;
+    } | {
+        minute: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        month: number | null;
+        day: number | null;
+        hour: number | null;
+        second: 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;
+    } | {
+        second: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        month: number | null;
+        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;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        should: Chai.Assertion;
+    };
+    dispatch: import("react").Dispatch<any>;
+    toDate: (type: string, value: number | null) => Date;
+    toDateString: () => string;
+};

package/esm/DateInput/DateField.js

@@ -0,0 +1,144 @@
+'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 { modifyDate } from './utils';
+export var patternMap = {
+  y: 'year',
+  M: 'month',
+  d: 'day',
+  H: 'hour',
+  h: 'hour',
+  m: 'minute',
+  s: 'second',
+  a: 'meridian'
+};
+export var DateField = /*#__PURE__*/function (_Object) {
+  _inheritsLoose(DateField, _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.meridian = 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) {
+      return {
+        pattern: pattern,
+        key: patternMap[pattern[0]]
+      };
+    });
+    if (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.meridian = value.getHours() > 12 ? 'PM' : 'AM';
+    }
+    return _this;
+  }
+  return DateField;
+}( /*#__PURE__*/_wrapNativeSuper(Object));
+
+/**
+ * Pad a number with zeros to the left.
+ */
+function padNumber(number, length) {
+  var numberString = String(number);
+  if (numberString.length >= length) {
+    return numberString;
+  }
+  var paddingCount = length - numberString.length;
+  for (var 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 'setMeridian':
+          return _extends({}, state, {
+            meridian: 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 value = dateField[key];
+      if (value !== null) {
+        if (pattern === 'MMM' && typeof value === 'number') {
+          value = localize === null || localize === void 0 ? void 0 : localize.month(value - 1, {
+            width: 'abbreviated'
+          });
+        } else if (pattern === 'MMMM' && typeof value === 'number') {
+          value = localize === null || localize === void 0 ? void 0 : localize.month(value - 1, {
+            width: 'wide'
+          });
+        } else if (pattern === 'aa' && typeof value === 'number') {
+          value = value === 0 ? 'AM' : 'PM';
+        } else if (pattern === 'hh' && typeof value === 'number') {
+          value = value === 0 ? 12 : value > 12 ? value - 12 : value;
+        }
+        if (typeof value === 'number') {
+          value = padNumber(value, pattern.length);
+        }
+        str = str.replace(pattern, value);
+      }
+    });
+    return str;
+  };
+  var toDate = function toDate(type, value) {
+    if (value === null) {
+      return new Date('');
+    }
+    return modifyDate(new Date(dateField.year, dateField.month ? dateField.month - 1 : 0, dateField.day, dateField.hour, dateField.minute, dateField.second), type, value);
+  };
+  return {
+    dateField: dateField,
+    dispatch: dispatch,
+    toDate: toDate,
+    toDateString: toDateString
+  };
+};

package/esm/DateInput/DateInput.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputProps } from '../Input';
+import { FormControlBaseProps } from '../@types/common';
+export interface DateInputProps extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>, FormControlBaseProps<Date | null> {
+    /**
+     * Format of the date when rendered in the input.
+     * Format of the string is based on Unicode Technical Standard: https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     * @default 'yyyy-MM-dd'
+     **/
+    format?: string;
+}
+/**
+ * The DateInput component lets users select a date with the keyboard.
+ * @version 5.58.0
+ * @see https://rsuitejs.com/components/date-input/
+ */
+declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<unknown>>;
+export default DateInput;

package/esm/DateInput/DateInput.js

@@ -0,0 +1,215 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useState, useCallback, useRef, useMemo } from 'react';
+import Input from '../Input';
+import { mergeRefs, useCustom, useControlled, safeSetSelection } from '../utils';
+import { getInputSelectedState, validateDateTime, getPatternGroups } from './utils';
+import useDateInputState from './useDateInputState';
+var isTestEnvironment = process.env.RUN_ENV === 'test';
+/**
+ * The DateInput component lets users select a date with the keyboard.
+ * @version 5.58.0
+ * @see https://rsuitejs.com/components/date-input/
+ */
+var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$format = props.format,
+    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    valueProp = props.value,
+    defaultValue = props.defaultValue,
+    onChange = props.onChange,
+    onKeyDown = props.onKeyDown,
+    rest = _objectWithoutPropertiesLoose(props, ["format", "value", "defaultValue", "onChange", "onKeyDown"]);
+  var inputRef = useRef();
+  var _useState = useState({
+      selectedPattern: 'y',
+      selectionStart: 0,
+      selectionEnd: 0
+    }),
+    selectedState = _useState[0],
+    setSelectedState = _useState[1];
+  var _useCustom = useCustom('Calendar'),
+    locale = _useCustom.locale;
+  var localize = locale.dateLocale.localize;
+  var _useControlled = useControlled(valueProp, defaultValue),
+    value = _useControlled[0],
+    setValue = _useControlled[1],
+    isControlled = _useControlled[2];
+  var _useDateInputState = useDateInputState({
+      formatStr: formatStr,
+      localize: localize,
+      date: value,
+      isControlledDate: isControlled
+    }),
+    dateField = _useDateInputState.dateField,
+    setDateOffset = _useDateInputState.setDateOffset,
+    setDateField = _useDateInputState.setDateField,
+    getDateField = _useDateInputState.getDateField,
+    toDateString = _useDateInputState.toDateString;
+  var dateString = toDateString();
+  var keyPressOptions = useMemo(function () {
+    return {
+      formatStr: formatStr,
+      localize: localize,
+      selectedMonth: dateField.month,
+      dateString: dateString
+    };
+  }, [dateField, dateString, formatStr, localize]);
+  var setSelectionRange = 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) {
+      safeSetSelection(input, selectionStart, selectionEnd);
+      return;
+    }
+    requestAnimationFrame(function () {
+      safeSetSelection(input, selectionStart, selectionEnd);
+    });
+  }, [selectedState]);
+  var handleChange = useCallback(function (value, event) {
+    setValue(value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+  }, [onChange, setValue]);
+  var handleChangeField = useCallback(function (event, nextDirection) {
+    var input = event.target;
+    var direction = nextDirection || (event.key === 'ArrowRight' ? 'right' : 'left');
+    var state = getInputSelectedState(_extends({}, keyPressOptions, {
+      input: input,
+      direction: direction
+    }));
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    setSelectedState(state);
+  }, [keyPressOptions, setSelectionRange]);
+  var handleChangeFieldValue = useCallback(function (event) {
+    var key = event.key;
+    var input = event.target;
+    var offset = key === 'ArrowUp' ? 1 : -1;
+    var state = getInputSelectedState(_extends({}, keyPressOptions, {
+      input: input,
+      valueOffset: offset
+    }));
+    setSelectedState(state);
+    setDateOffset(state.selectedPattern, offset, function (date) {
+      return handleChange(date, event);
+    });
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  }, [handleChange, keyPressOptions, setDateOffset, setSelectionRange]);
+  var isFieldFullValue = useCallback(function (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;
+    }
+  }, [formatStr]);
+  var handleChangeFieldValueWithNumericKeys = useCallback(function (event) {
+    var key = event.key;
+    var input = event.target;
+    var 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;
+
+    // Check if the value entered by the user is a valid date
+    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);
+    });
+
+    // 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
+    }));
+    setSelectedState(nextState);
+    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');
+    }
+  }, [dateField, getDateField, handleChange, handleChangeField, isFieldFullValue, keyPressOptions, selectedState.selectedPattern, setDateField, setSelectionRange]);
+  var handleRemoveFieldValue = useCallback(function (event) {
+    if (selectedState.selectedPattern) {
+      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 = useCallback(function (event) {
+    var input = event.target;
+    var state = getInputSelectedState(_extends({}, keyPressOptions, {
+      input: input
+    }));
+    setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  }, [keyPressOptions, setSelectionRange]);
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    inputMode: "text",
+    autoComplete: "off",
+    autoCorrect: "off",
+    spellCheck: false,
+    ref: mergeRefs(inputRef, ref),
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    value: dateString
+  }, rest));
+});
+DateInput.displayName = 'DateInput';
+export default DateInput;

package/esm/DateInput/index.d.ts

@@ -0,0 +1,3 @@
+import DateInput from './DateInput';
+export type { DateInputProps } from './DateInput';
+export default DateInput;

package/esm/DateInput/index.js

@@ -0,0 +1,3 @@
+'use client';
+import DateInput from './DateInput';
+export default DateInput;