rsuite 6.1.3 → 6.2.1

package/esm/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/esm/AutoComplete/AutoComplete.js

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

package/esm/CheckTree/utils.js

@@ -213,7 +213,8 @@ export function getDisabledState(nodes, node, props) {
  */
 export 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/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
      */

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,6 +100,19 @@ 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?.(formValue, event);

package/esm/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/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();
@@ -59,6 +112,35 @@ export default function useFormValidate(_formError, props) {
     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 = {
@@ -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();
@@ -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 = {

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/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/esm/Timeline/Timeline.js

@@ -30,6 +30,7 @@ const Timeline = forwardRef((props, ref) => {
     className,
     align = 'left',
     endless,
+    reverse,
     isItemActive = ACTIVE_LAST,
     ...rest
   } = propsWithDefaults;
@@ -41,17 +42,23 @@ const Timeline = forwardRef((props, ref) => {
   const withTime = some(React.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.Children.toArray(children);
+  const orderedChildren = reverse ? [...childrenArray].reverse() : childrenArray;
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
     className: classes
-  }, rest), 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.cloneElement(child, {
+      last: logicalIndex + 1 === count,
+      INTERNAL_active: isItemActive(logicalIndex, count),
+      align
+    });
+  }));
 }, SubcomponentsAndStaticMethods);
 Timeline.displayName = 'Timeline';
 export default Timeline;

package/esm/Tree/hooks/useFlattenTree.js

@@ -90,23 +90,20 @@ function useFlattenTree(data, options) {
     forceUpdate();
   }, [callback, forceUpdate, valueKey, labelKey, uncheckableItemValues, childrenKey]);
   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]);
   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;
 }
 export default useFlattenTree;

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

package/esm/Uploader/Uploader.js

@@ -127,6 +127,7 @@ const Uploader = forwardRef((props, ref) => {
     onError,
     onProgress,
     onReupload,
+    onCompletion,
     ...rest
   } = propsWithDefaults;
   const {
@@ -138,6 +139,11 @@ const Uploader = forwardRef((props, ref) => {
   const rootRef = useRef(null);
   const xhrs = useRef({});
   const trigger = useRef(null);
+  const uploadingCount = useRef(0);
+  const uploadResults = useRef({
+    completed: [],
+    failed: []
+  });
   const [fileList, dispatch] = useFileList(fileListProp || defaultFileList);
   useEffect(() => {
     if (typeof fileListProp !== 'undefined') {
@@ -177,7 +183,16 @@ const Uploader = forwardRef((props, ref) => {
     };
     updateFileStatus(nextFile);
     onSuccess?.(response, nextFile, event, xhr);
-  }, [onSuccess, updateFileStatus]);
+    uploadingCount.current--;
+    uploadResults.current.completed.push(nextFile);
+    if (uploadingCount.current === 0) {
+      onCompletion?.(uploadResults.current.completed, uploadResults.current.failed);
+      uploadResults.current = {
+        completed: [],
+        failed: []
+      };
+    }
+  }, [onCompletion, onSuccess, updateFileStatus]);
 
   /**
    * Callback for file upload error.
@@ -193,7 +208,16 @@ const Uploader = forwardRef((props, ref) => {
     };
     updateFileStatus(nextFile);
     onError?.(status, nextFile, event, xhr);
-  }, [onError, updateFileStatus]);
+    uploadingCount.current--;
+    uploadResults.current.failed.push(nextFile);
+    if (uploadingCount.current === 0) {
+      onCompletion?.(uploadResults.current.completed, uploadResults.current.failed);
+      uploadResults.current = {
+        completed: [],
+        failed: []
+      };
+    }
+  }, [onCompletion, onError, updateFileStatus]);
 
   /**
    * Callback for file upload progress update.
@@ -247,9 +271,19 @@ const Uploader = forwardRef((props, ref) => {
     fileList.current.forEach(file => {
       const checkState = shouldUpload?.(file);
       if (checkState instanceof Promise) {
+        uploadingCount.current++;
         checkState.then(res => {
           if (res) {
             handleUploadFile(file);
+          } else {
+            uploadingCount.current--;
+            if (uploadingCount.current === 0) {
+              onCompletion?.(uploadResults.current.completed, uploadResults.current.failed);
+              uploadResults.current = {
+                completed: [],
+                failed: []
+              };
+            }
           }
         });
         return;
@@ -257,6 +291,7 @@ const Uploader = forwardRef((props, ref) => {
         return;
       }
       if (file.status === 'inited') {
+        uploadingCount.current++;
         handleUploadFile(file);
       }
     });
@@ -303,6 +338,15 @@ const Uploader = forwardRef((props, ref) => {
     const nextFileList = fileList.current.filter(f => f.fileKey !== fileKey);
     if (xhrs.current?.[file.fileKey]?.readyState !== 4) {
       xhrs.current[file.fileKey]?.abort();
+      uploadingCount.current--;
+      uploadResults.current.failed.push(file);
+      if (uploadingCount.current === 0) {
+        onCompletion?.(uploadResults.current.completed, uploadResults.current.failed);
+        uploadResults.current = {
+          completed: [],
+          failed: []
+        };
+      }
     }
     dispatch({
       type: 'remove',
@@ -313,6 +357,7 @@ const Uploader = forwardRef((props, ref) => {
     cleanInputValue();
   });
   const handleReupload = useEventCallback(file => {
+    uploadingCount.current++;
     autoUpload && handleUploadFile(file);
     onReupload?.(file);
   });
@@ -320,6 +365,7 @@ const Uploader = forwardRef((props, ref) => {
   // public API
   const start = useCallback(file => {
     if (file) {
+      uploadingCount.current++;
       handleUploadFile(file);
       return;
     }

package/esm/internals/Picker/PickerIndicator.js

@@ -48,8 +48,11 @@ const PickerIndicator = ({
     });
   };
   const props = Component === InputGroup.Addon ? {
+    className: prefix('toggle-indicator'),
     disabled
-  } : undefined;
+  } : Component === React.Fragment ? undefined : {
+    className: prefix('toggle-indicator')
+  };
   return /*#__PURE__*/React.createElement(Component, props, addon());
 };
 export default PickerIndicator;

package/esm/toaster/toaster.js

@@ -1,8 +1,16 @@
 'use client';
 import ToastContainer, { defaultToasterContainer } from "./ToastContainer.js";
 import { RSUITE_TOASTER_ID } from "../internals/symbols.js";
+import { guid } from "../internals/utils/index.js";
 const containers = new Map();
 
+/**
+ * Track in-progress container creation promises keyed by `${containerId}_${placement}`.
+ * This prevents duplicate containers from being created when `push` is called multiple
+ * times synchronously (e.g. inside a loop) before the first container has mounted.
+ */
+const pendingContainerPromises = new Map();
+
 /**
  * Create a container instance.
  * @param placement
@@ -10,7 +18,9 @@ const containers = new Map();
  */
 async function createContainer(placement, props) {
   const [container, containerId] = await ToastContainer.getInstance(props);
-  containers.set(`${containerId}_${placement}`, container);
+  const key = `${containerId}_${placement}`;
+  containers.set(key, container);
+  pendingContainerPromises.delete(key);
   return container;
 }
 
@@ -30,12 +40,37 @@ toaster.push = (message, options = {}) => {
     ...restOptions
   } = options;
   const containerElement = typeof container === 'function' ? container() : container;
-  const containerElementId = containerElement ? containerElement[RSUITE_TOASTER_ID] : null;
-  if (containerElementId) {
+  if (containerElement) {
+    // Pre-assign the container ID so subsequent synchronous calls can find it
+    // before the async container creation has completed.
+    if (!containerElement[RSUITE_TOASTER_ID]) {
+      containerElement[RSUITE_TOASTER_ID] = guid();
+    }
+    const containerElementId = containerElement[RSUITE_TOASTER_ID];
+    const key = `${containerElementId}_${placement}`;
     const existedContainer = getContainer(containerElementId, placement);
     if (existedContainer) {
       return existedContainer.current?.push(message, restOptions);
     }
+
+    // A container creation for this placement may already be in progress (e.g. when `push`
+    // is called multiple times synchronously in a loop). Reuse that promise instead of
+    // creating a second container.
+    const pendingPromise = pendingContainerPromises.get(key);
+    if (pendingPromise) {
+      return pendingPromise.then(ref => ref.current?.push(message, restOptions));
+    }
+    const newOptions = {
+      ...options,
+      container: containerElement,
+      placement
+    };
+    const containerPromise = createContainer(placement, newOptions);
+
+    // Register the pending promise before any async work begins so that subsequent
+    // synchronous `push` calls for the same placement chain onto it.
+    pendingContainerPromises.set(key, containerPromise);
+    return containerPromise.then(ref => ref.current?.push(message, restOptions));
   }
   const newOptions = {
     ...options,

package/internals/Picker/styles/index.scss

@@ -367,6 +367,9 @@
 
   // Picker clear button
   .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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.1.3",
+  "version": "6.2.1",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",