rsuite 6.1.3 → 6.2.1

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

package/cjs/Uploader/Uploader.js

@@ -132,6 +132,7 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
     onError,
     onProgress,
     onReupload,
+    onCompletion,
     ...rest
   } = propsWithDefaults;
   const {
@@ -143,6 +144,11 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
   const rootRef = (0, _react.useRef)(null);
   const xhrs = (0, _react.useRef)({});
   const trigger = (0, _react.useRef)(null);
+  const uploadingCount = (0, _react.useRef)(0);
+  const uploadResults = (0, _react.useRef)({
+    completed: [],
+    failed: []
+  });
   const [fileList, dispatch] = useFileList(fileListProp || defaultFileList);
   (0, _react.useEffect)(() => {
     if (typeof fileListProp !== 'undefined') {
@@ -182,7 +188,16 @@ const Uploader = (0, _utils.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.
@@ -198,7 +213,16 @@ const Uploader = (0, _utils.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.
@@ -252,9 +276,19 @@ const Uploader = (0, _utils.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;
@@ -262,6 +296,7 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
         return;
       }
       if (file.status === 'inited') {
+        uploadingCount.current++;
         handleUploadFile(file);
       }
     });
@@ -308,6 +343,15 @@ const Uploader = (0, _utils.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',
@@ -318,6 +362,7 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
     cleanInputValue();
   });
   const handleReupload = (0, _hooks.useEventCallback)(file => {
+    uploadingCount.current++;
     autoUpload && handleUploadFile(file);
     onReupload?.(file);
   });
@@ -325,6 +370,7 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
   // public API
   const start = (0, _react.useCallback)(file => {
     if (file) {
+      uploadingCount.current++;
       handleUploadFile(file);
       return;
     }

package/cjs/internals/Picker/PickerIndicator.js

@@ -53,8 +53,11 @@ const PickerIndicator = ({
     });
   };
   const props = Component === _InputGroup.default.Addon ? {
+    className: prefix('toggle-indicator'),
     disabled
-  } : undefined;
+  } : Component === _react.default.Fragment ? undefined : {
+    className: prefix('toggle-indicator')
+  };
   return /*#__PURE__*/_react.default.createElement(Component, props, addon());
 };
 var _default = exports.default = PickerIndicator;

package/cjs/toaster/toaster.js

@@ -5,9 +5,17 @@ exports.__esModule = true;
 exports.default = void 0;
 var _ToastContainer = _interopRequireWildcard(require("./ToastContainer"));
 var _symbols = require("../internals/symbols");
+var _utils = require("../internals/utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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
@@ -15,7 +23,9 @@ const containers = new Map();
  */
 async function createContainer(placement, props) {
   const [container, containerId] = await _ToastContainer.default.getInstance(props);
-  containers.set(`${containerId}_${placement}`, container);
+  const key = `${containerId}_${placement}`;
+  containers.set(key, container);
+  pendingContainerPromises.delete(key);
   return container;
 }
 
@@ -35,12 +45,37 @@ toaster.push = (message, options = {}) => {
     ...restOptions
   } = options;
   const containerElement = typeof container === 'function' ? container() : container;
-  const containerElementId = containerElement ? containerElement[_symbols.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[_symbols.RSUITE_TOASTER_ID]) {
+      containerElement[_symbols.RSUITE_TOASTER_ID] = (0, _utils.guid)();
+    }
+    const containerElementId = containerElement[_symbols.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/dist/rsuite-no-reset.css

@@ -3480,6 +3480,9 @@ tbody.rs-anim-collapse.rs-anim-in{
   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;
@@ -14642,6 +14645,17 @@ blockquote.rs-text{
   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;
 }
@@ -15351,6 +15365,7 @@ blockquote.rs-text{
   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;
@@ -15397,6 +15412,7 @@ blockquote.rs-text{
 .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{
@@ -15431,6 +15447,7 @@ blockquote.rs-text{
 }
 .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{