rsuite 6.1.2 → 6.2.0

package/esm/Form/hooks/useFormValidate.js

@@ -10,7 +10,8 @@ export default function useFormValidate(_formError, props) {
     getCombinedModel,
     onCheck,
     onError,
-    nestedField
+    nestedField,
+    resolver
   } = props;
   const [realFormError, setFormError] = useControlled(_formError, {});
   const checkOptions = {
@@ -19,12 +20,64 @@ export default function useFormValidate(_formError, props) {
   const realFormErrorRef = useRef(realFormError);
   realFormErrorRef.current = realFormError;
 
+  /**
+   * Returns true when an error value is considered non-empty (i.e. the field has an error).
+   */
+  const isValidError = error => error !== undefined && error !== null && error !== '';
+
+  /**
+   * Merges resolver errors into the current form error state, removing entries that
+   * are no longer invalid according to the latest resolver result.
+   */
+  const mergeResolverErrors = (current, resolverErrors) => {
+    const next = {
+      ...current
+    };
+    Object.keys({
+      ...current,
+      ...resolverErrors
+    }).forEach(key => {
+      if (isValidError(resolverErrors[key])) {
+        next[key] = resolverErrors[key];
+      } else {
+        delete next[key];
+      }
+    });
+    return next;
+  };
+
   /**
    * Validate the form data and return a boolean.
    * The error message after verification is returned in the callback.
+   *
+   * When a `resolver` is provided and the resolver returns a Promise (async resolver),
+   * this method cannot resolve the result synchronously. In that case it returns `false`
+   * immediately and you should use `checkAsync()` instead.
    * @param callback
    */
   const check = useEventCallback(callback => {
+    if (resolver) {
+      const result = resolver(formValue || {});
+
+      // Async resolver: cannot handle synchronously
+      if (result instanceof Promise) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn('[rsuite] The `resolver` provided to <Form> returns a Promise. ' + 'Use `checkAsync()` or rely on `onSubmit` for async validation.');
+        }
+        return false;
+      }
+      const {
+        errors
+      } = result;
+      const hasError = Object.keys(errors).length > 0;
+      setFormError(errors);
+      onCheck?.(errors);
+      callback?.(errors);
+      if (hasError) {
+        onError?.(errors);
+      }
+      return !hasError;
+    }
     const formError = {};
     let errorCount = 0;
     const model = getCombinedModel();
@@ -33,16 +86,16 @@ export default function useFormValidate(_formError, props) {
       const checkResult = type.check(value, formValue, key);
       if (checkResult.hasError === true) {
         errorCount += 1;
-        formErrorObj[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;
+        formErrorObj[key] = checkResult?.errorMessage || checkResult;
       }
 
       // Check nested object
-      if (type !== null && type !== void 0 && type.objectTypeSchemaSpec) {
+      if (type?.objectTypeSchemaSpec) {
         Object.entries(type.objectTypeSchemaSpec).forEach(([nestedKey, nestedType]) => {
           formErrorObj[key] = formErrorObj[key] || {
             object: {}
           };
-          checkField(nestedKey, nestedType, value === null || value === void 0 ? void 0 : value[nestedKey], formErrorObj[key].object);
+          checkField(nestedKey, nestedType, value?.[nestedKey], formErrorObj[key].object);
         });
       }
     };
@@ -50,15 +103,44 @@ export default function useFormValidate(_formError, props) {
       checkField(key, type, formValue[key], formError);
     });
     setFormError(formError);
-    onCheck === null || onCheck === void 0 || onCheck(formError);
-    callback === null || callback === void 0 || callback(formError);
+    onCheck?.(formError);
+    callback?.(formError);
     if (errorCount > 0) {
-      onError === null || onError === void 0 || onError(formError);
+      onError?.(formError);
       return false;
     }
     return true;
   });
   const checkFieldForNextValue = useEventCallback((fieldName, nextValue, callback) => {
+    if (resolver) {
+      const result = resolver(nextValue);
+      if (result instanceof Promise) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn('[rsuite] The `resolver` provided to <Form> returns a Promise. ' + 'Use `checkAsync()` or `checkForFieldAsync()` for async validation.');
+        }
+        return false;
+      }
+      const {
+        errors
+      } = result;
+      const fieldError = errors[fieldName];
+      const hasFieldError = isValidError(fieldError);
+      // Merge resolver errors with existing errors, clearing fields that now pass
+      const nextFormError = mergeResolverErrors(realFormError, errors);
+      setFormError(nextFormError);
+      onCheck?.(nextFormError);
+      const callbackResult = {
+        hasError: hasFieldError,
+        errorMessage: fieldError
+      };
+      callback?.(hasFieldError ? callbackResult : {
+        hasError: false
+      });
+      if (Object.keys(nextFormError).length > 0) {
+        onError?.(nextFormError);
+      }
+      return !hasFieldError;
+    }
     const model = getCombinedModel();
     const resultOfCurrentField = model.checkForField(fieldName, nextValue, checkOptions);
     let nextFormError = {
@@ -72,10 +154,10 @@ export default function useFormValidate(_formError, props) {
     if (nestedField) {
       nextFormError = set(nextFormError, nameToPath(fieldName), resultOfCurrentField);
       setFormError(nextFormError);
-      onCheck === null || onCheck === void 0 || onCheck(nextFormError);
-      callback === null || callback === void 0 || callback(resultOfCurrentField);
+      onCheck?.(nextFormError);
+      callback?.(resultOfCurrentField);
       if (resultOfCurrentField.hasError) {
-        onError === null || onError === void 0 || onError(nextFormError);
+        onError?.(nextFormError);
       }
       return !resultOfCurrentField.hasError;
     } else {
@@ -96,10 +178,10 @@ export default function useFormValidate(_formError, props) {
         }
       });
       setFormError(nextFormError);
-      onCheck === null || onCheck === void 0 || onCheck(nextFormError);
-      callback === null || callback === void 0 || callback(resultOfCurrentField);
+      onCheck?.(nextFormError);
+      callback?.(resultOfCurrentField);
       if (hasError) {
-        onError === null || onError === void 0 || onError(nextFormError);
+        onError?.(nextFormError);
       }
       return !hasError;
     }
@@ -117,6 +199,22 @@ export default function useFormValidate(_formError, props) {
    * Check form data asynchronously and return a Promise
    */
   const checkAsync = useEventCallback(() => {
+    if (resolver) {
+      return Promise.resolve(resolver(formValue || {})).then(({
+        errors
+      }) => {
+        const hasError = Object.keys(errors).length > 0;
+        onCheck?.(errors);
+        setFormError(errors);
+        if (hasError) {
+          onError?.(errors);
+        }
+        return {
+          hasError,
+          formError: errors
+        };
+      });
+    }
     const promises = [];
     const keys = [];
     const model = getCombinedModel();
@@ -133,10 +231,10 @@ export default function useFormValidate(_formError, props) {
           formError[keys[i]] = values[i].errorMessage;
         }
       }
-      onCheck === null || onCheck === void 0 || onCheck(formError);
+      onCheck?.(formError);
       setFormError(formError);
       if (errorCount > 0) {
-        onError === null || onError === void 0 || onError(formError);
+        onError?.(formError);
       }
       return {
         hasError: errorCount > 0,
@@ -145,6 +243,24 @@ export default function useFormValidate(_formError, props) {
     });
   });
   const checkFieldAsyncForNextValue = useEventCallback((fieldName, nextValue) => {
+    if (resolver) {
+      return Promise.resolve(resolver(nextValue)).then(({
+        errors
+      }) => {
+        const fieldError = errors[fieldName];
+        const hasFieldError = isValidError(fieldError);
+        const nextFormError = mergeResolverErrors(realFormError, errors);
+        onCheck?.(nextFormError);
+        setFormError(nextFormError);
+        if (Object.keys(nextFormError).length > 0) {
+          onError?.(nextFormError);
+        }
+        return {
+          hasError: hasFieldError,
+          errorMessage: fieldError
+        };
+      });
+    }
     const model = getCombinedModel();
     return model.checkForFieldAsync(fieldName, nextValue, checkOptions).then(resultOfCurrentField => {
       let nextFormError = {
@@ -158,10 +274,10 @@ export default function useFormValidate(_formError, props) {
 
       if (nestedField) {
         nextFormError = set(nextFormError, nameToPath(fieldName), resultOfCurrentField);
-        onCheck === null || onCheck === void 0 || onCheck(nextFormError);
+        onCheck?.(nextFormError);
         setFormError(nextFormError);
         if (resultOfCurrentField.hasError) {
-          onError === null || onError === void 0 || onError(nextFormError);
+          onError?.(nextFormError);
         }
         return resultOfCurrentField;
       } else {
@@ -182,9 +298,9 @@ export default function useFormValidate(_formError, props) {
           }
         });
         setFormError(nextFormError);
-        onCheck === null || onCheck === void 0 || onCheck(nextFormError);
+        onCheck?.(nextFormError);
         if (hasError) {
-          onError === null || onError === void 0 || onError(nextFormError);
+          onError?.(nextFormError);
         }
         return resultOfCurrentField;
       }
@@ -206,7 +322,7 @@ export default function useFormValidate(_formError, props) {
     const formError = omit(realFormErrorRef.current, [nestedField ? nameToPath(name) : name]);
     realFormErrorRef.current = formError;
     setFormError(formError);
-    onCheck === null || onCheck === void 0 || onCheck(formError);
+    onCheck?.(formError);
     return formError;
   }, [nestedField, onCheck, setFormError]);
   const cleanErrors = useEventCallback(() => {

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

@@ -1,4 +1,3 @@
-/// <reference types="lodash" />
 type RecordAny = Record<string, any>;
 interface UseFormValueProps<V = RecordAny> {
     formDefaultValue: V;

package/esm/Form/index.d.ts

@@ -1,5 +1,6 @@
 import Form from './Form';
 export type { FormProps } from './Form';
 export type { FormInstance } from './hooks/useFormRef';
+export type { Resolver, ResolverResult } from './resolvers';
 export { Form };
 export default Form;

package/esm/Form/resolvers.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The result returned by a validation resolver.
+ *
+ * @template E - The type of the form error map. Defaults to a record of string keys to any.
+ */
+export interface ResolverResult<E = Record<string, any>> {
+    errors: E;
+}
+/**
+ * A resolver is a function that integrates third-party validation libraries
+ * (e.g. Yup, Zod, AJV, Joi, Valibot…) with the rsuite `Form` component.
+ *
+ * The resolver receives the current form values and an optional context object,
+ * and must return (or resolve to) a `ResolverResult` whose `errors` property is
+ * a plain object that maps field names to error messages / error objects.
+ *
+ * An **empty** `errors` object means the form is valid.
+ *
+ * @template V - The shape of the form values. Defaults to `Record<string, any>`.
+ * @template E - The shape of the error map. Defaults to `Record<string, any>`.
+ *
+ * @example
+ * ```tsx
+ * // Yup example
+ * import * as yup from 'yup';
+ * import type { Resolver } from 'rsuite';
+ *
+ * const schema = yup.object({ name: yup.string().email('Invalid email').required() });
+ *
+ * const resolver: Resolver = async (formValue) => {
+ *   try {
+ *     await schema.validate(formValue, { abortEarly: false });
+ *     return { errors: {} };
+ *   } catch (e: any) {
+ *     const errors: Record<string, string> = {};
+ *     e.inner.forEach((err: yup.ValidationError) => {
+ *       if (err.path) errors[err.path] = err.message;
+ *     });
+ *     return { errors };
+ *   }
+ * };
+ *
+ * // Zod example
+ * import { z } from 'zod';
+ *
+ * const schema = z.object({ name: z.string().email('Invalid email') });
+ *
+ * const resolver: Resolver = (formValue) => {
+ *   const result = schema.safeParse(formValue);
+ *   if (result.success) return { errors: {} };
+ *   const errors: Record<string, string> = {};
+ *   result.error.issues.forEach(err => {
+ *     if (err.path.length) errors[err.path[0]] = err.message;
+ *   });
+ *   return { errors };
+ * };
+ * ```
+ */
+export type Resolver<V = Record<string, any>, E = Record<string, any>> = (formValue: V, context?: any) => ResolverResult<E> | Promise<ResolverResult<E>>;

package/esm/Form/resolvers.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/FormControl/FormControl.js

@@ -70,9 +70,9 @@ const FormControl = forwardRef((props, ref) => {
   });
 
   // Combine props and context values
-  const resolvedReadOnly = readOnly !== null && readOnly !== void 0 ? readOnly : contextReadOnly;
-  const resolvedPlaintext = plaintext !== null && plaintext !== void 0 ? plaintext : contextPlaintext;
-  const resolvedDisabled = disabled !== null && disabled !== void 0 ? disabled : contextDisabled;
+  const resolvedReadOnly = readOnly ?? contextReadOnly;
+  const resolvedPlaintext = plaintext ?? contextPlaintext;
+  const resolvedDisabled = disabled ?? contextDisabled;
   const {
     withPrefix,
     prefix
@@ -82,13 +82,13 @@ const FormControl = forwardRef((props, ref) => {
   // Handle onChange with both hook's implementation and prop callback
   const handleChange = (value, event) => {
     handleFieldChange(value, event);
-    propsOnChange === null || propsOnChange === void 0 || propsOnChange(value, event);
+    propsOnChange?.(value, event);
   };
 
   // Handle onBlur with both hook's implementation and prop callback
   const handleBlur = event => {
     handleFieldBlur(); // onBlur doesn't take parameters in the hook
-    propsOnBlur === null || propsOnBlur === void 0 || propsOnBlur(event);
+    propsOnBlur?.(event);
   };
 
   // Toggle component is a special case that uses `checked` and `defaultChecked` instead of `value` and `defaultValue` props.

package/esm/FormGroup/FormGroupContext.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const FormGroupContext: React.Context<{
-    controlId?: string | undefined;
+    controlId?: string;
 }>;

package/esm/Highlight/utils/highlightText.js

@@ -17,7 +17,7 @@ export function highlightText(text, props) {
     if (strArr[i]) {
       texts.push(strArr[i]);
     }
-    if (highStrArr !== null && highStrArr !== void 0 && highStrArr[i]) {
+    if (highStrArr?.[i]) {
       texts.push(renderMark(highStrArr[i], i));
     }
   }

package/esm/InlineEdit/renderChildren.js

@@ -10,11 +10,10 @@ export function defaultRenderInput(props, ref) {
 }
 const pickers = ['DatePicker', 'DateRangePicker', 'TimePicker', 'TimeRangePicker', 'InputPicker', 'TagPicker', 'Cascader', 'MultiCascader', 'SelectPicker', 'CheckPicker', 'CheckTreePicker', 'TreePicker'];
 function getDisplayName(Component) {
-  var _Component$type;
-  if (typeof (Component === null || Component === void 0 ? void 0 : Component.type) === 'string') {
-    return Component === null || Component === void 0 ? void 0 : Component.type;
+  if (typeof Component?.type === 'string') {
+    return Component?.type;
   }
-  return (Component === null || Component === void 0 || (_Component$type = Component.type) === null || _Component$type === void 0 ? void 0 : _Component$type.displayName) || '';
+  return Component?.type?.displayName || '';
 }
 export function renderChildren(children, props, ref) {
   if (typeof children === 'function') {
@@ -34,8 +33,8 @@ export function renderChildren(children, props, ref) {
       ...rest,
       // Pass onBlur to the child component to automatically save or cancel after the focus event is processed.
       // Special handling in the Picker component, call onBlur when onExit and onClean
-      onExit: createChainedFunction(() => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onExit),
-      onClean: createChainedFunction(() => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onClean),
+      onExit: createChainedFunction(() => onBlur?.(), onExit),
+      onClean: createChainedFunction(() => onBlur?.(), onClean),
       ref
     });
   }

package/esm/InlineEdit/useEditState.js

@@ -23,40 +23,37 @@ const useEditState = props => {
     if (disabled) {
       return;
     }
-    onClick === null || onClick === void 0 || onClick(event);
-    onEdit === null || onEdit === void 0 || onEdit(event);
+    onClick?.(event);
+    onEdit?.(event);
     setIsEditing(true);
     setResetValue(value);
   });
   const handleFocus = useEventCallback(event => {
     if (disabled || isEditing) return;
-    onFocus === null || onFocus === void 0 || onFocus(event);
+    onFocus?.(event);
     setIsEditing(true);
     setResetValue(value);
   });
   const handleChange = useEventCallback((value, event) => {
     setValue(value);
-    onChange === null || onChange === void 0 || onChange(value, event);
+    onChange?.(value, event);
   });
   const handleCancel = useEventCallback(event => {
-    var _event$stopPropagatio;
     setIsEditing(false);
     setValue(resetValue);
-    onCancel === null || onCancel === void 0 || onCancel(event);
-    event === null || event === void 0 || (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 || _event$stopPropagatio.call(event);
+    onCancel?.(event);
+    event?.stopPropagation?.();
   });
   const handleSave = useEventCallback(event => {
-    var _event$stopPropagatio2;
     setIsEditing(false);
-    onSave === null || onSave === void 0 || onSave(event);
-    event === null || event === void 0 || (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 || _event$stopPropagatio2.call(event);
+    onSave?.(event);
+    event?.stopPropagation?.();
   });
   const handleKeyDown = useEventCallback(event => {
-    var _event$target;
     if (isEditing) {
       switch (event.key) {
         case 'Enter':
-          if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) === 'INPUT') {
+          if (event.target?.tagName === 'INPUT') {
             handleSave(event);
           }
           break;

package/esm/InlineEdit/useFocusEvent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PickerHandle } from '../internals/Picker/types';
 interface FocusEventProps {
     isEditing: boolean;

package/esm/InlineEdit/useFocusEvent.js

@@ -9,38 +9,34 @@ const useFocusEvent = ({
   onSave,
   onCancel
 }) => {
-  var _ref$current;
   const ref = useRef(null);
   const rootRef = useRef(null);
-  const isPicker = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.type) === RSUITE_PICKER_TYPE;
+  const isPicker = ref.current?.type === RSUITE_PICKER_TYPE;
   const focus = () => {
     if (isPicker) {
       setTimeout(() => {
-        var _picker$target, _picker$target$focus, _picker$open;
         const picker = ref.current;
         // Auto focus the search input
-        picker === null || picker === void 0 || (_picker$target = picker.target) === null || _picker$target === void 0 || (_picker$target$focus = _picker$target.focus) === null || _picker$target$focus === void 0 || _picker$target$focus.call(_picker$target);
+        picker?.target?.focus?.();
 
         // Open the picker
-        picker === null || picker === void 0 || (_picker$open = picker.open) === null || _picker$open === void 0 || _picker$open.call(picker);
+        picker?.open?.();
       }, 100);
     } else {
-      var _ref$current2, _ref$current2$focus;
-      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || (_ref$current2$focus = _ref$current2.focus) === null || _ref$current2$focus === void 0 || _ref$current2$focus.call(_ref$current2);
+      ref.current?.focus?.();
     }
   };
   const handleBlur = useEventCallback(event => {
     if (event) {
-      var _event$relatedTarget;
-      const relatedTarget = (_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 ? _event$relatedTarget : ownerDocument(event.currentTarget).activeElement;
+      const relatedTarget = event.relatedTarget ?? ownerDocument(event.currentTarget).activeElement;
       if (rootRef.current && contains(rootRef.current, relatedTarget)) {
         return;
       }
     }
     if (stateOnBlur === 'save') {
-      onSave === null || onSave === void 0 || onSave(event);
+      onSave?.(event);
     } else if (stateOnBlur === 'cancel') {
-      onCancel === null || onCancel === void 0 || onCancel(event);
+      onCancel?.(event);
     }
   });
   useIsomorphicLayoutEffect(() => {

package/esm/Input/Input.js

@@ -18,7 +18,7 @@ const Input = forwardRef((props, ref) => {
   const {
     type = 'text',
     htmlSize,
-    size = (inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.size) || 'md',
+    size = inputGroup?.size || 'md',
     classPrefix = 'input',
     ...rest
   } = propsWithDefaults;

package/esm/InputGroup/InputGroupContext.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { Size } from '../internals/types';
 export declare const InputGroupContext: React.Context<{
     onFocus: () => void;
     onBlur: () => void;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    size?: Size;
 } | null>;

package/esm/InputNumber/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NumberInputProps as InputNumberProps } from '../NumberInput';
 /**
  * The `InputNumber` component is used to enter a numerical value.

package/esm/InputPicker/InputAutosize.js

@@ -50,7 +50,7 @@ const useInputWidth = (props, sizerRef, placeholderRef) => {
     }
     if (width !== inputWidth) {
       setInputWidth(width);
-      onAutosize === null || onAutosize === void 0 || onAutosize(width);
+      onAutosize?.(width);
     }
   }, [minWidth, placeholder, inputWidth, value, placeholderRef, sizerRef, onAutosize]);
   return inputWidth;