rsuite 6.1.3 → 6.2.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [6.2.0](https://github.com/rsuite/rsuite/compare/v6.1.3...v6.2.0) (2026-06-12)
+
+
+### Bug Fixes
+
+* **CheckTreePicker,CheckTree:** fix infinite loop with cascade and defaultExpandAll ([#4579](https://github.com/rsuite/rsuite/issues/4579)) ([fc86644](https://github.com/rsuite/rsuite/commit/fc86644b595809c83f4aa453f7a5e07d00367522)), closes [#3973](https://github.com/rsuite/rsuite/issues/3973) [#3973](https://github.com/rsuite/rsuite/issues/3973) [#4541](https://github.com/rsuite/rsuite/issues/4541) [#4404](https://github.com/rsuite/rsuite/issues/4404) [#4424](https://github.com/rsuite/rsuite/issues/4424)
+* **toaster:** prevent duplicate containers when push() is called synchronously in a loop ([#4571](https://github.com/rsuite/rsuite/issues/4571)) ([c507f5f](https://github.com/rsuite/rsuite/commit/c507f5f59a726dc25dce65ab37fad484563e502d))
+* **Uploader:** prevent horizontal overflow and width increase ([#4580](https://github.com/rsuite/rsuite/issues/4580)) ([e064f4c](https://github.com/rsuite/rsuite/commit/e064f4cc27959f94d3354a9177a8ae0a9ad71460)), closes [#4536](https://github.com/rsuite/rsuite/issues/4536)
+
+
+### Features
+
+* **Form:** add `resolver` prop for third-party validation library integration ([#4573](https://github.com/rsuite/rsuite/issues/4573)) ([4a9ff7b](https://github.com/rsuite/rsuite/commit/4a9ff7bef3979764fcf3b12e869ccbf5bf61c3bd))
+* **Timeline:** add `reverse` prop to display items in reverse order ([#4569](https://github.com/rsuite/rsuite/issues/4569)) ([a0dd1f4](https://github.com/rsuite/rsuite/commit/a0dd1f4307756f283c05157cd05f8ea6f7885c36))
+* **Uploader:** add `onCompletion` callback prop ([#4570](https://github.com/rsuite/rsuite/issues/4570)) ([7eb0748](https://github.com/rsuite/rsuite/commit/7eb0748f78d36e1f34ac940b4fac3b6c20bf1a52)), closes [#813](https://github.com/rsuite/rsuite/issues/813)
+
+
+
 ## [6.1.3](https://github.com/rsuite/rsuite/compare/v6.1.2...v6.1.3) (2026-04-22)
 
 

package/Timeline/styles/index.css

@@ -145,6 +145,17 @@
   height:auto;
   min-height:var(--rs-time-line-tail-min-height);
 }
+.rs-timeline-reverse.rs-timeline-endless .rs-timeline-item:first-child .rs-timeline-item-tail{
+  top:0;
+  bottom:0;
+  height:auto;
+}
+
+.rs-timeline-reverse.rs-timeline-endless .rs-timeline-item:last-child .rs-timeline-item-tail{
+  height:calc(var(--rs-time-line-dot-center-gap) + var(--rs-time-line-dot-side-length));
+  min-height:0;
+}
+
 .rs-timeline-item:only-child .rs-timeline-item-tail{
   display:none;
 }

package/Timeline/styles/index.scss

@@ -8,6 +8,8 @@
 // --------------------------------------------------
 
 .rs-timeline {
+  $root: &;
+
   // CSS Variables
   --rs-time-line-tail-min-height: 2.375rem; // 20px + 18px
   --rs-time-line-item-content-margin: 12px;
@@ -87,6 +89,17 @@
     min-height: var(--rs-time-line-tail-min-height);
   }
 
+  @at-root #{$root}-reverse#{$root}-endless #{$root}-item:first-child #{$root}-item-tail {
+    top: 0;
+    bottom: 0;
+    height: auto;
+  }
+
+  @at-root #{$root}-reverse#{$root}-endless #{$root}-item:last-child #{$root}-item-tail {
+    height: calc(var(--rs-time-line-dot-center-gap) + var(--rs-time-line-dot-side-length));
+    min-height: 0;
+  }
+
   &-item:only-child &-item-tail {
     display: none;
   }

package/Uploader/styles/index.css

@@ -1272,6 +1272,7 @@
   text-overflow:ellipsis;
   white-space:nowrap;
   flex:1 1 auto;
+  min-width:0;
 }
 .rs-uploader[data-list-type=text] .rs-uploader-file-item-size{
   flex:0 0 auto;
@@ -1318,6 +1319,7 @@
 .rs-uploader[data-list-type=picture]{
   display:inline-flex;
   flex-direction:row;
+  flex-wrap:wrap;
   gap:var(--rs-uploader-item-spacing);
 }
 .rs-uploader[data-list-type=picture] .rs-uploader-trigger-btn{
@@ -1352,6 +1354,7 @@
 }
 .rs-uploader[data-list-type=picture] .rs-uploader-file-items{
   display:inline-flex;
+  flex-wrap:wrap;
   gap:var(--rs-uploader-item-spacing);
 }
 .rs-uploader[data-list-type=picture] .rs-uploader-file-item{

package/Uploader/styles/index.scss

@@ -109,6 +109,7 @@
       @include utils.ellipsis-basic;
 
       flex: 1 1 auto;
+      min-width: 0;
     }
 
     &-size {
@@ -169,6 +170,7 @@
 .rs-uploader[data-list-type='picture'] {
   display: inline-flex;
   flex-direction: row;
+  flex-wrap: wrap;
   gap: var(--rs-uploader-item-spacing);
 
   .rs-uploader-trigger-btn {
@@ -213,6 +215,7 @@
 
   .rs-uploader-file-items {
     display: inline-flex;
+    flex-wrap: wrap;
     gap: var(--rs-uploader-item-spacing);
   }
 

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -30,6 +30,8 @@ export interface AutoCompleteProps<T = string> extends FormControlPickerProps<T,
     onOpen?: () => void;
     /** Called on close */
     onClose?: () => void;
+    /** Ref to the input element */
+    inputRef?: React.Ref<HTMLInputElement>;
 }
 /**
  * Autocomplete function of input field.

package/cjs/AutoComplete/AutoComplete.js

@@ -57,6 +57,7 @@ const AutoComplete = (0, _utils.forwardRef)((props, ref) => {
     onFocus,
     onBlur,
     onMenuFocus,
+    inputRef,
     ...rest
   } = propsWithDefaults;
   const datalist = (0, _utils2.transformData)(data);
@@ -210,7 +211,8 @@ const AutoComplete = (0, _utils.forwardRef)((props, ref) => {
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     onChange: handleChange,
-    onKeyDown: handleKeyDownEvent
+    onKeyDown: handleKeyDownEvent,
+    inputRef: inputRef
   })));
 });
 AutoComplete.displayName = 'AutoComplete';

package/cjs/CheckTree/utils.js

@@ -227,7 +227,8 @@ function getDisabledState(nodes, node, props) {
  */
 function getCheckTreeDefaultValue(value, uncheckableItemValues) {
   if (Array.isArray(value) && Array.isArray(uncheckableItemValues)) {
-    return value.filter(v => !uncheckableItemValues.includes(v));
+    const filtered = value.filter(v => !uncheckableItemValues.includes(v));
+    return filtered.length === value.length ? value : filtered;
   }
   return value;
 }

package/cjs/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
      */

package/cjs/Form/Form.js

@@ -58,6 +58,7 @@ const Form = (0, _utils.forwardRef)((props, ref) => {
     fluid,
     layout,
     model: formModel = defaultSchema,
+    resolver,
     readOnly,
     plaintext,
     children,
@@ -88,7 +89,8 @@ const Form = (0, _utils.forwardRef)((props, ref) => {
     getCombinedModel,
     onCheck,
     onError,
-    nestedField
+    nestedField,
+    resolver
   };
   const {
     formError,
@@ -104,6 +106,19 @@ const Form = (0, _utils.forwardRef)((props, ref) => {
     cleanErrorForField
   } = (0, _useFormValidate.default)(controlledFormError, formValidateProps);
   const submit = (0, _hooks.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?.(formValue, event);

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

@@ -1,9 +1,11 @@
+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;

package/cjs/Form/hooks/useFormValidate.js

@@ -15,7 +15,8 @@ function useFormValidate(_formError, props) {
     getCombinedModel,
     onCheck,
     onError,
-    nestedField
+    nestedField,
+    resolver
   } = props;
   const [realFormError, setFormError] = (0, _hooks.useControlled)(_formError, {});
   const checkOptions = {
@@ -24,12 +25,64 @@ function useFormValidate(_formError, props) {
   const realFormErrorRef = (0, _react.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 = (0, _hooks.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();
@@ -64,6 +117,35 @@ function useFormValidate(_formError, props) {
     return true;
   });
   const checkFieldForNextValue = (0, _hooks.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 = {
@@ -122,6 +204,22 @@ function useFormValidate(_formError, props) {
    * Check form data asynchronously and return a Promise
    */
   const checkAsync = (0, _hooks.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();
@@ -150,6 +248,24 @@ function useFormValidate(_formError, props) {
     });
   });
   const checkFieldAsyncForNextValue = (0, _hooks.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 = {

package/cjs/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/cjs/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/cjs/Form/resolvers.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

package/cjs/Timeline/Timeline.d.ts

@@ -7,6 +7,11 @@ export interface TimelineProps extends BoxProps {
     align?: 'left' | 'right' | 'alternate';
     /** Timeline endless **/
     endless?: boolean;
+    /**
+     * Reverse the order of Timeline items
+     * @version 6.2.0
+     **/
+    reverse?: boolean;
     /**
      * Whether an item is active (with highlighted dot).
      *

package/cjs/Timeline/Timeline.js

@@ -35,6 +35,7 @@ const Timeline = (0, _utils.forwardRef)((props, ref) => {
     className,
     align = 'left',
     endless,
+    reverse,
     isItemActive = ACTIVE_LAST,
     ...rest
   } = propsWithDefaults;
@@ -46,17 +47,23 @@ const Timeline = (0, _utils.forwardRef)((props, ref) => {
   const withTime = (0, _some.default)(_react.default.Children.toArray(children), item => item?.props?.time);
   const classes = merge(className, withPrefix(`align-${align}`, {
     endless,
-    'with-time': withTime
+    'with-time': withTime,
+    reverse
   }));
+  const childrenArray = _react.default.Children.toArray(children);
+  const orderedChildren = reverse ? [...childrenArray].reverse() : childrenArray;
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
     className: classes
-  }, rest), _utils.rch.mapCloneElement(children, (_child, index) => ({
-    last: index + 1 === count,
-    INTERNAL_active: isItemActive(index, count),
-    align
-  })));
+  }, rest), orderedChildren.map((child, domIndex) => {
+    const logicalIndex = reverse ? count - 1 - domIndex : domIndex;
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      last: logicalIndex + 1 === count,
+      INTERNAL_active: isItemActive(logicalIndex, count),
+      align
+    });
+  }));
 }, SubcomponentsAndStaticMethods);
 Timeline.displayName = 'Timeline';
 var _default = exports.default = Timeline;

package/cjs/Tree/hooks/useFlattenTree.js

@@ -95,23 +95,20 @@ function useFlattenTree(data, options) {
     forceUpdate();
   }, [callback, forceUpdate, valueKey, labelKey, uncheckableItemValues, childrenKey]);
   (0, _react.useEffect)(() => {
-    // when data is changed, should clear the flattenedNodes, avoid duplicate keys
     flattenedNodes.current = {};
     seenValues.current.clear();
     flattenTreeData(data);
+    if (multiple) {
+      updateTreeNodeCheckState(value);
+      forceUpdate();
+    }
   }, [data]);
   (0, _react.useEffect)(() => {
     if (multiple) {
       updateTreeNodeCheckState(value);
       forceUpdate();
     }
-
-    /**
-     * Add a dependency on data, because when loading data asynchronously through getChildren,
-     * data may change and the node status needs to be updated.
-     * @see https://github.com/rsuite/rsuite/issues/3973
-     */
-  }, [value, data]);
+  }, [value]);
   return flattenedNodes.current;
 }
 var _default = exports.default = useFlattenTree;

package/cjs/Uploader/Uploader.d.ts

@@ -99,6 +99,8 @@ export interface UploaderProps extends BaseBoxProps, Omit<UploadTriggerProps, 'o
     onProgress?: (percent: number, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
     /** In the file list, click the callback function to delete a file */
     onRemove?: (file: FileType) => void;
+    /** Callback function called when all files in the current upload batch have finished (succeeded or failed) */
+    onCompletion?: (completedFiles: FileType[], failedFiles: FileType[]) => void;
     /** Custom render file information */
     renderFileInfo?: (file: FileType, fileElement: React.ReactNode) => React.ReactNode;
     /** Custom render thumbnail */