rsuite 6.1.3 → 6.2.1

package/AutoComplete/styles/index.css

@@ -2223,6 +2223,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [6.2.1](https://github.com/rsuite/rsuite/compare/v6.2.0...v6.2.1) (2026-06-12)
+
+
+### Bug Fixes
+
+* **picker:** hide caret when clear button is shown ([#4581](https://github.com/rsuite/rsuite/issues/4581)) ([d52842b](https://github.com/rsuite/rsuite/commit/d52842b0c6444bc6765595899e3f9917de52af7a))
+
+
+
+# [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/Cascader/styles/index.css

@@ -2384,6 +2384,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/CheckPicker/styles/index.css

@@ -2411,6 +2411,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/CheckTree/styles/index.css

@@ -2242,6 +2242,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/CheckTreePicker/styles/index.css

@@ -2243,6 +2243,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/DatePicker/styles/index.css

@@ -2275,6 +2275,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/DateRangePicker/styles/index.css

@@ -2277,6 +2277,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/InputPicker/styles/index.css

@@ -2244,6 +2244,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/MultiCascadeTree/styles/index.css

@@ -2564,6 +2564,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/MultiCascader/styles/index.css

@@ -2564,6 +2564,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/Pagination/styles/index.css

@@ -2309,6 +2309,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/SelectPicker/styles/index.css

@@ -2244,6 +2244,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/TagInput/styles/index.css

@@ -2256,6 +2256,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/TagPicker/styles/index.css

@@ -2256,6 +2256,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/TimePicker/styles/index.css

@@ -2275,6 +2275,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/TimeRangePicker/styles/index.css

@@ -2277,6 +2277,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

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/Tree/styles/index.css

@@ -2242,6 +2242,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

package/TreePicker/styles/index.css

@@ -2242,6 +2242,9 @@
   align-items:center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   color:var(--rs-text-secondary);
   transition:0.2s color linear;
   cursor:pointer;

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;