rsuite 6.1.2 → 6.2.0

package/esm/DateRangePicker/DateRangePicker.js

@@ -31,7 +31,6 @@ import { addMonths, addDays, copyTime, calendarOnlyProps, endOfDay, isValid, isB
  * @see https://rsuitejs.com/components/date-range-picker
  */
 const DateRangePicker = forwardRef((props, ref) => {
-  var _ref, _ref2;
   const {
     formatDate,
     propsWithDefaults
@@ -106,9 +105,9 @@ const DateRangePicker = forwardRef((props, ref) => {
     merge,
     prefix
   } = useStyles(classPrefix);
-  const formatStr = format || (locale === null || locale === void 0 ? void 0 : locale.shortDateFormat) || 'yyyy-MM-dd';
+  const formatStr = format || locale?.shortDateFormat || 'yyyy-MM-dd';
   const rangeFormatStr = `${formatStr}${character}${formatStr}`;
-  const [value, setValue] = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+  const [value, setValue] = useControlled(valueProp, defaultValue ?? null);
   const {
     mode,
     has
@@ -142,14 +141,14 @@ const DateRangePicker = forwardRef((props, ref) => {
    * the second click to determine the end date of the date range.
    *
    */
-  const [selectedDates, setSelectedDates] = useState((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []);
+  const [selectedDates, setSelectedDates] = useState(valueProp ?? defaultValue ?? []);
 
   // The date of the current hover, used to reduce the calculation of `handleMouseMove`
   const [hoverDateRange, setHoverDateRange] = useState(value);
 
   // The displayed calendar panel is rendered based on this value.
   const [calendarDateRange, setCalendarDateRangeValue] = useState(getSafeCalendarDate({
-    value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null,
+    value: value ?? defaultCalendarValue ?? null,
     allowSameMonth
   }));
 
@@ -172,7 +171,7 @@ const DateRangePicker = forwardRef((props, ref) => {
    */
   const getCalendarDatetime = calendarKey => {
     const index = calendarKey === 'start' ? 0 : 1;
-    return (calendarDateRange === null || calendarDateRange === void 0 ? void 0 : calendarDateRange[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);
+    return calendarDateRange?.[index] || defaultCalendarValue?.[index];
   };
 
   /**
@@ -187,7 +186,7 @@ const DateRangePicker = forwardRef((props, ref) => {
     let nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if (has('time') && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
+    if (has('time') && dateRange?.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
       const startDate = copyTime({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
@@ -213,8 +212,8 @@ const DateRangePicker = forwardRef((props, ref) => {
   };
   useEffect(() => {
     // If value changes, update the selected and hover date values on the calendar panel.
-    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
-    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
+    setSelectedDates(valueProp ?? []);
+    setHoverDateRange(valueProp ?? null);
   }, [valueProp]);
   const getInputHtmlSize = () => {
     const padding = 4;
@@ -235,7 +234,7 @@ const DateRangePicker = forwardRef((props, ref) => {
         return date => getWeekHoverRange(date, {
           isoWeek,
           weekStart,
-          locale: locale === null || locale === void 0 ? void 0 : locale.dateLocale
+          locale: locale?.dateLocale
         });
       } else if (hoverRange === 'month') {
         return getMonthHoverRange;
@@ -258,10 +257,10 @@ const DateRangePicker = forwardRef((props, ref) => {
   };
   const setDateRange = (event, nextValue, closeOverlay = true) => {
     // If nextValue is null, it means that the user is erasing the selected dates.
-    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);
+    setSelectedDates(nextValue ?? []);
     setValue(nextValue);
     if (!isSameRange(nextValue, value, formatStr)) {
-      onChange === null || onChange === void 0 || onChange(nextValue, event);
+      onChange?.(nextValue, event);
     }
 
     // `closeOverlay` default value is `true`
@@ -303,14 +302,14 @@ const DateRangePicker = forwardRef((props, ref) => {
    */
   const handleSelectDate = useEventCallback((index, date, event) => {
     const calendarKey = index === 0 ? 'start' : 'end';
-    let nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
+    let nextSelectDates = hoverDateRange ?? [];
     const hoverRangeValue = getHoverRangeValue(date);
     const noHoverRangeValid = isNil(hoverRangeValue);
 
     // in `oneTap` mode
     if (oneTap) {
       setDateRange(event, noHoverRangeValid ? [startOfDay(date), endOfDay(date)] : hoverRangeValue);
-      onSelect === null || onSelect === void 0 || onSelect(date, event);
+      onSelect?.(date, event);
       return;
     }
 
@@ -363,7 +362,7 @@ const DateRangePicker = forwardRef((props, ref) => {
         eventName: 'changeDate'
       });
     }
-    onSelect === null || onSelect === void 0 || onSelect(date, event);
+    onSelect?.(date, event);
     setSelectedIdle(!isSelectedIdle);
   });
 
@@ -421,11 +420,11 @@ const DateRangePicker = forwardRef((props, ref) => {
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = getSafeCalendarDate({
-        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null,
+        value: defaultCalendarValue ?? null,
         allowSameMonth
       });
     }
-    setSelectedDates(value !== null && value !== void 0 ? value : []);
+    setSelectedDates(value ?? []);
     setCalendarDateRange({
       dateRange: nextCalendarDate
     });
@@ -446,9 +445,9 @@ const DateRangePicker = forwardRef((props, ref) => {
     if (closeOverlay) {
       setDateRange(event, value, closeOverlay);
     } else {
-      setSelectedDates(value !== null && value !== void 0 ? value : []);
+      setSelectedDates(value ?? []);
     }
-    onShortcutClick === null || onShortcutClick === void 0 || onShortcutClick(range, event);
+    onShortcutClick?.(range, event);
 
     // End unfinished selections.
     setSelectedIdle(true);
@@ -463,14 +462,14 @@ const DateRangePicker = forwardRef((props, ref) => {
   const handleClickOK = useEventCallback(event => {
     const nextValue = calculateDateRange();
     setDateRange(event, nextValue);
-    onOk === null || onOk === void 0 || onOk(nextValue, event);
+    onOk?.(nextValue, event);
   });
   const handleClean = useEventCallback(event => {
     setCalendarDateRange({
       dateRange: null
     });
     setDateRange(event, null);
-    onClean === null || onClean === void 0 || onClean(event);
+    onClean?.(event);
     event.stopPropagation();
   });
 
@@ -559,20 +558,17 @@ const DateRangePicker = forwardRef((props, ref) => {
     return isRangeDisabled(startDate, endDate, TARGET.TOOLBAR_SHORTCUT);
   };
   const handleClose = useEventCallback(() => {
-    var _trigger$current, _trigger$current$clos;
-    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);
+    trigger.current?.close?.();
   });
   const handleInputKeyDown = useEventCallback(event => {
     onMenuKeyDown(event, {
       esc: handleClose,
       enter: () => {
-        var _trigger$current2;
         const {
           open
-        } = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {};
+        } = trigger.current?.getState() || {};
         if (!open) {
-          var _trigger$current3;
-          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 || _trigger$current3.open();
+          trigger.current?.open();
         }
       }
     });
@@ -613,7 +609,7 @@ const DateRangePicker = forwardRef((props, ref) => {
       format: formatStr,
       value: selectedDates,
       monthDropdownProps,
-      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
+      hoverRangeValue: hoverDateRange ?? undefined,
       hideHours,
       hideMinutes,
       hideSeconds,
@@ -724,7 +720,7 @@ const DateRangePicker = forwardRef((props, ref) => {
       selectedDone: isSelectedIdle,
       target: TARGET.INPUT
     };
-    if (isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(startDate, disabledOptions) || isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(endDate, disabledOptions)) {
+    if (isDateDisabled?.(startDate, disabledOptions) || isDateDisabled?.(endDate, disabledOptions)) {
       return true;
     }
     return false;

package/esm/DateRangePicker/Header.js

@@ -16,7 +16,7 @@ function Header(props) {
     clickable,
     onSelect
   } = props;
-  const [startDate, endDate] = value !== null && value !== void 0 ? value : [null, null];
+  const [startDate, endDate] = value ?? [null, null];
   const v = startDate && endDate ? [startDate, endDate].sort(compareAsc) : [startDate, endDate];
   const start = v[0] ? /*#__PURE__*/React.createElement(FormattedDate, {
     date: v[0],
@@ -35,7 +35,7 @@ function Header(props) {
     size: "xs",
     appearance: "subtle",
     className: prefix('header-date'),
-    onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect('start'),
+    onClick: () => onSelect?.('start'),
     "aria-label": "Select start date"
   }, start), /*#__PURE__*/React.createElement("span", {
     className: prefix('header-character')
@@ -43,7 +43,7 @@ function Header(props) {
     size: "xs",
     appearance: "subtle",
     className: prefix('header-date'),
-    onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect('end'),
+    onClick: () => onSelect?.('end'),
     "aria-label": "Select end date"
   }, end)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: prefix('header-date')

package/esm/DateRangePicker/disabledDateUtils.js

@@ -15,7 +15,7 @@ export function allowedMaxDays(days) {
   return (date, selectValue, selectedDone, target) => {
     let beforeLimit = false;
     let afterLimit = false;
-    if (selectValue !== null && selectValue !== void 0 && selectValue[0]) {
+    if (selectValue?.[0]) {
       const startDate = selectValue[0];
       beforeLimit = composeFunctions(f => DateUtils.addDays(f, -days + 1), f => isAfterDay(f, date))(startDate);
       afterLimit = composeFunctions(f => DateUtils.addDays(f, days - 1), f => isBeforeDay(f, date))(startDate);
@@ -34,7 +34,7 @@ export function allowedDays(days) {
   return (date, selectValue, selectedDone, target) => {
     let beforeLimit = false;
     let afterLimit = false;
-    if (selectValue !== null && selectValue !== void 0 && selectValue[0]) {
+    if (selectValue?.[0]) {
       const startDate = selectValue[0];
       beforeLimit = composeFunctions(f => DateUtils.addDays(f, -days + 1), f => !DateUtils.isSameDay(f, date))(startDate);
       afterLimit = composeFunctions(f => DateUtils.addDays(f, days - 1), f => !DateUtils.isSameDay(f, date))(startDate);

package/esm/DateRangePicker/hooks/useCalendarHandlers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface CalendarHandlerProps {
     index: number;
     calendarDateRange: Date[];

package/esm/DateRangePicker/hooks/useCalendarHandlers.js

@@ -11,19 +11,19 @@ export function useCalendarHandlers({
 }) {
   const calendarDate = useMemo(() => calendarDateRange[index], [calendarDateRange, index]);
   const handleSelect = useEventCallback((date, event) => {
-    onSelect === null || onSelect === void 0 || onSelect(index, date, event);
+    onSelect?.(index, date, event);
   });
   const handleChangeMonth = useEventCallback(nextPageDate => {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 || onChangeCalendarMonth(index, nextPageDate);
+    onChangeCalendarMonth?.(index, nextPageDate);
   });
   const handleChangeTime = useEventCallback(nextPageDate => {
-    onChangeCalendarTime === null || onChangeCalendarTime === void 0 || onChangeCalendarTime(index, nextPageDate);
+    onChangeCalendarTime?.(index, nextPageDate);
   });
   const handleMoveForward = useEventCallback(() => {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 || onChangeCalendarMonth(index, addMonths(calendarDate, 1));
+    onChangeCalendarMonth?.(index, addMonths(calendarDate, 1));
   });
   const handleMoveBackward = useEventCallback(() => {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 || onChangeCalendarMonth(index, addMonths(calendarDate, -1));
+    onChangeCalendarMonth?.(index, addMonths(calendarDate, -1));
   });
   return {
     calendarDate,

package/esm/DateRangePicker/utils.js

@@ -5,9 +5,8 @@ export function getSafeCalendarDate({
   calendarKey = 'start',
   allowSameMonth
 }) {
-  var _value;
   // Update calendarDate if the value is not null
-  value = (_value = value) !== null && _value !== void 0 ? _value : [];
+  value = value ?? [];
   const gap = allowSameMonth ? 0 : 1;
   if (value[0] && value[1]) {
     const diffMonth = differenceInCalendarMonths(value[1], value[0]);

package/esm/Dropdown/Dropdown.js

@@ -128,11 +128,11 @@ const Dropdown = forwardRef((props, ref) => {
       }, popupProps), children);
     },
     onToggleMenu: open => {
-      onToggle === null || onToggle === void 0 || onToggle(open);
+      onToggle?.(open);
       if (open) {
-        onOpen === null || onOpen === void 0 || onOpen();
+        onOpen?.();
       } else {
-        onClose === null || onClose === void 0 || onClose();
+        onClose?.();
       }
     }
   }, ({

package/esm/Dropdown/DropdownItem.js

@@ -45,12 +45,11 @@ const DropdownItem = forwardRef((props, ref) => {
     prefix
   } = useStyles(classPrefix);
   const handleSelectItem = useCallback(event => {
-    var _dropdown$onSelect;
-    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
-    dropdown === null || dropdown === void 0 || (_dropdown$onSelect = dropdown.onSelect) === null || _dropdown$onSelect === void 0 || _dropdown$onSelect.call(dropdown, eventKey, event);
+    onSelect?.(eventKey, event);
+    dropdown?.onSelect?.(eventKey, event);
   }, [onSelect, eventKey, dropdown]);
-  const selected = activeProp || !isNil(eventKey) && shallowEqual(dropdown === null || dropdown === void 0 ? void 0 : dropdown.activeKey, eventKey);
-  const dispatch = dropdown === null || dropdown === void 0 ? void 0 : dropdown.dispatch;
+  const selected = activeProp || !isNil(eventKey) && shallowEqual(dropdown?.activeKey, eventKey);
+  const dispatch = dropdown?.dispatch;
   useEffect(() => {
     if (dispatch) {
       dispatch({

package/esm/Dropdown/DropdownMenu.d.ts

@@ -39,5 +39,5 @@ export interface DropdownMenuProps<T = string | number> extends StandardProps {
  *   </Dropdown.Menu>
  * </Dropdown>
  */
-declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps<string | number> & SanitizedHTMListProps<HTMLElement, React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
+declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps<string | number> & SanitizedHTMListProps & React.RefAttributes<HTMLElement>>;
 export default DropdownMenu;

package/esm/Dropdown/DropdownMenu.js

@@ -48,7 +48,7 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     rtl
   } = useCustom();
   const handleToggleSubmenu = useCallback((_, event) => {
-    onToggle === null || onToggle === void 0 || onToggle(eventKey, event);
+    onToggle?.(eventKey, event);
   }, [eventKey, onToggle]);
   const {
     merge,

package/esm/Form/Form.d.ts

@@ -3,6 +3,7 @@ import { FormControlComponent } from '../FormControl';
 import { FormInstance } from './hooks/useFormRef';
 import { Schema } from 'schema-typed';
 import type { WithAsProps, CheckTriggerType } from '../internals/types';
+import type { Resolver } from './resolvers';
 export interface FormProps<V = Record<string, any>, M = any, E = {
     [P in keyof V]?: M;
 }> extends WithAsProps, Omit<FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit' | 'onError' | 'onReset'> {
@@ -40,6 +41,42 @@ export interface FormProps<V = Record<string, any>, M = any, E = {
      * @see https://github.com/rsuite/schema-typed
      */
     model?: Schema;
+    /**
+     * A resolver function for integrating third-party validation libraries such as
+     * Yup, Zod, AJV, Joi, Valibot, etc.
+     *
+     * When provided, the `resolver` takes precedence over the `model` prop for
+     * form-level validation (`check` / `checkAsync`).  Field-level inline `rule`
+     * props on `<Form.Control>` components are still respected.
+     *
+     * The resolver receives the current form values and must return (or resolve to)
+     * a `{ errors }` object where each key is a field name and each value is an
+     * error message or error object.  An empty `errors` object means the form is valid.
+     *
+     * **Note:** If the resolver is asynchronous, form-level sync validation
+     * (`check()`) will return `false` and log a warning. Use `checkAsync()` or
+     * rely on the `onSubmit` callback (which always awaits the resolver).
+     *
+     * @example
+     * ```tsx
+     * import * as yup from 'yup';
+     *
+     * const schema = yup.object({ name: yup.string().email().required() });
+     * const resolver = async (formValue) => {
+     *   try {
+     *     await schema.validate(formValue, { abortEarly: false });
+     *     return { errors: {} };
+     *   } catch (e) {
+     *     const errors = {};
+     *     e.inner.forEach(err => { if (err.path) errors[err.path] = err.message; });
+     *     return { errors };
+     *   }
+     * };
+     *
+     * <Form resolver={resolver} onSubmit={handleSubmit}>…</Form>
+     * ```
+     */
+    resolver?: Resolver<V>;
     /**
      * Make the form readonly
      */
@@ -98,9 +135,7 @@ export interface FormProps<V = Record<string, any>, M = any, E = {
 declare const Form: import("../internals/types").InternalRefForwardingComponent<"form", FormProps<Record<string, any>, any, {
     [x: string]: any;
 }> & {
-    ref?: React.Ref<FormInstance<Record<string, any>, string, {
-        [x: string]: string | undefined;
-    }>> | undefined;
+    ref?: React.Ref<FormInstance>;
 }, never> & {
     Stack: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormStack").FormStackProps, never> & Record<string, never>;
     Control: FormControlComponent;

package/esm/Form/Form.js

@@ -52,6 +52,7 @@ const Form = forwardRef((props, ref) => {
     fluid,
     layout,
     model: formModel = defaultSchema,
+    resolver,
     readOnly,
     plaintext,
     children,
@@ -82,7 +83,8 @@ const Form = forwardRef((props, ref) => {
     getCombinedModel,
     onCheck,
     onError,
-    nestedField
+    nestedField,
+    resolver
   };
   const {
     formError,
@@ -98,23 +100,35 @@ const Form = forwardRef((props, ref) => {
     cleanErrorForField
   } = useFormValidate(controlledFormError, formValidateProps);
   const submit = useEventCallback(event => {
+    if (resolver) {
+      // When a resolver is provided, always use the async validation path so that
+      // both sync and async resolvers are handled correctly.
+      checkAsync().then(({
+        hasError
+      }) => {
+        if (!hasError) {
+          onSubmit?.(formValue, event);
+        }
+      });
+      return;
+    }
+
     // Check the form before submitting
     if (check()) {
-      onSubmit === null || onSubmit === void 0 || onSubmit(formValue, event);
+      onSubmit?.(formValue, event);
     }
   });
   const reset = useEventCallback(event => {
     resetErrors();
     const resetValue = resetFormValue();
     if (resetValue) {
-      onChange === null || onChange === void 0 || onChange(resetValue);
+      onChange?.(resetValue);
     }
-    onReset === null || onReset === void 0 || onReset(resetValue, event);
+    onReset?.(resetValue, event);
   });
   const handleSubmit = useEventCallback(event => {
-    var _event$preventDefault, _event$stopPropagatio;
-    event === null || event === void 0 || (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 || _event$preventDefault.call(event);
-    event === null || event === void 0 || (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 || _event$stopPropagatio.call(event);
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
 
     // Prevent submission when the form is disabled, readOnly, or plaintext
     if (disabled || readOnly || plaintext) {
@@ -123,9 +137,8 @@ const Form = forwardRef((props, ref) => {
     submit(event);
   });
   const handleReset = useEventCallback(event => {
-    var _event$preventDefault2, _event$stopPropagatio2;
-    event === null || event === void 0 || (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 || _event$preventDefault2.call(event);
-    event === null || event === void 0 || (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 || _event$stopPropagatio2.call(event);
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
 
     // Prevent reset when the form is disabled, readOnly, or plaintext
     if (disabled || readOnly || plaintext) {
@@ -149,14 +162,14 @@ const Form = forwardRef((props, ref) => {
   });
   const removeFieldValue = useEventCallback(name => {
     const formValue = onRemoveValue(name);
-    onChange === null || onChange === void 0 || onChange(formValue);
+    onChange?.(formValue);
   });
   const removeFieldError = useEventCallback(name => {
     onRemoveError(name);
   });
   const onFieldChange = useEventCallback((name, value, event) => {
     const nextFormValue = setFieldValue(name, value);
-    onChange === null || onChange === void 0 || onChange(nextFormValue, event);
+    onChange?.(nextFormValue, event);
   });
   const formContextValue = {
     errorFromContext,

package/esm/Form/hooks/useFormRef.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CheckResult } from 'schema-typed';
 export interface FormImperativeMethods<T = Record<string, any>, M = string, E = {
     [P in keyof T]?: M;

package/esm/Form/hooks/useFormValidate.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="lodash" />
+import type { Resolver } from '../resolvers';
 export interface FormErrorProps {
     formValue: any;
     getCombinedModel: () => any;
     onCheck?: (formError: any) => void;
     onError?: (formError: any) => void;
     nestedField?: boolean;
+    resolver?: Resolver;
 }
 export default function useFormValidate(_formError: any, props: FormErrorProps): {
     formError: any;