@douyinfe/semi-foundation 2.101.1 → 2.103.0

package/tree/foundation.ts

@@ -711,7 +711,10 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
                 keyMaps,
                 isSearching && showFilteredOnly && filteredShownKeys
             );
-            const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
+            let motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
+            if (isSearching && showFilteredOnly) {
+                motionKeys = motionKeys.filter(key => filteredShownKeys.has(key));
+            }
             const newState = {
                 [expandedStateKey]: expandedKeys,
                 flattenNodes,

package/upload/foundation.ts

@@ -110,6 +110,45 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
      * When paste event is successfully handled, we ignore the subsequent keydown event.
      */
     _pasteHandled: boolean = false;
+    /**
+     * Working copy of fileList used during a synchronous startUpload batch.
+     * Do NOT rely on React state fileList here: setState is async (batched in React 18),
+     * so reading getState('fileList') between iterations of a sync loop returns a stale
+     * snapshot and earlier removals get overwritten by later ones (see #3335).
+     * Seeded at the start of startUpload and cleared when the sync loop finishes (see
+     * try/finally in startUpload); async (promise) results fall back to _latestFileList
+     * then React state.
+     */
+    _batchFileList: Array<BaseFileItem> | null = null;
+    /**
+     * The most recent fileList produced by handleBeforeUploadResultInObject.
+     * Unlike React state (which is flushed asynchronously under React 18 automatic
+     * batching), this is updated synchronously, so a later async beforeUpload result
+     * composes with earlier sync removals of the same batch instead of reading a stale
+     * snapshot (mixed sync + async beforeUpload results, see #3335).
+     */
+    _latestFileList: Array<BaseFileItem> | null = null;
+    /**
+     * Unify all fileList commits: keep _latestFileList in sync synchronously so async
+     * beforeUpload results compose with recent mutations even before React flushes
+     * setState (React 18 automatic batching). (#3335)
+     */
+    updateFileListInternal(newFileList: Array<BaseFileItem>, callback?: () => void): void {
+        if (this._batchFileList) {
+            this._batchFileList = newFileList;
+        }
+        this._latestFileList = newFileList;
+        this._adapter.updateFileList(newFileList, callback);
+    }
+
+    /** Keep the synchronous snapshot aligned with an externally controlled fileList. */
+    syncLatestFileList(fileList: Array<BaseFileItem>): void {
+        this._latestFileList = fileList.slice();
+    }
+
+    getLatestFileList(): Array<BaseFileItem> {
+        return this._batchFileList || this._latestFileList || this.getState('fileList');
+    }
     constructor(adapter: UploadAdapter<P, S>) {
         super({ ...adapter });
     }
@@ -117,6 +156,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     init(): void {
         // make sure state reset, otherwise may cause upload abort in React StrictMode, like https://github.com/DouyinFE/semi-design/pull/843
         this.destroyState = false;
+        this.syncLatestFileList(this.getState('fileList'));
         // In controlled mode, parent may keep and pass back fileList with blob url.
         // Sync them into internal map so later remove/clear can revoke correctly.
         this._syncLocalUrlsFromFileList();
@@ -160,6 +200,8 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         if (!disabled) {
             this.unbindPastingHandler();
         }
+        this._batchFileList = null;
+        this._latestFileList = null;
         this.destroyState = true;
     }
 
@@ -363,7 +405,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         }
         newFileList.splice(replaceIdx, 1, newFileItem);
         this._adapter.notifyChange({ currentFile: newFileItem, fileList: newFileList });
-        this._adapter.updateFileList(newFileList, () => {
+        this.updateFileListInternal(newFileList, () => {
             this._adapter.resetReplaceInput();
             if (!newFileItem._sizeInvalid) {
                 this.upload(newFileItem);
@@ -405,7 +447,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         const { uploadTrigger } = this.getProps();
         const currentFiles = files.map(item => this.buildFileItem(item, uploadTrigger));
         this._adapter.notifyChange({ fileList: currentFiles, currentFile: currentFiles[0] });
-        this._adapter.updateFileList(currentFiles, () => {
+        this.updateFileListInternal(currentFiles, () => {
             if (uploadTrigger === TRIGGER_AUTO) {
                 this.startUpload(currentFiles);
             }
@@ -425,7 +467,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
                 this._adapter.notifyChange({ fileList, currentFile: file });
             }
         });
-        this._adapter.updateFileList(fileList, () => {
+        this.updateFileListInternal(fileList, () => {
             if (uploadTrigger === TRIGGER_AUTO) {
                 this.startUpload(currentFiles);
             }
@@ -506,7 +548,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
 
         this._adapter.notifyFileSelect(currentFileList);
         this._adapter.notifyChange({ fileList: newFileList, currentFile: null });
-        this._adapter.updateFileList(newFileList, () => {
+        this.updateFileListInternal(newFileList, () => {
             if (uploadTrigger === TRIGGER_AUTO) {
                 this.startUpload(fileItemList);
             }
@@ -516,16 +558,25 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     /* istanbul ignore next */
     manualUpload(): void {
         // find the list of files that have not been uploaded
-        const waitToUploadFileList = this.getState('fileList').filter((item: BaseFileItem) => item.status === FILE_STATUS_WAIT_UPLOAD);
+        const waitToUploadFileList = this.getLatestFileList().filter((item: BaseFileItem) => item.status === FILE_STATUS_WAIT_UPLOAD);
         this.startUpload(waitToUploadFileList);
     }
 
     startUpload(fileList: Array<BaseFileItem>): void {
-        fileList.forEach(file => {
-            if (!file._sizeInvalid) {
-                this.upload(file);
-            }
-        });
+        // Seed a working copy so multiple synchronous beforeUpload results
+        // (e.g. several files returning autoRemove) compose correctly instead of each
+        // reading a stale React state snapshot and overwriting earlier removals. (#3335)
+        // try/finally guarantees the working copy is cleared even if beforeUpload throws.
+        this._batchFileList = this.getLatestFileList().slice();
+        try {
+            fileList.forEach(file => {
+                if (!file._sizeInvalid) {
+                    this.upload(file);
+                }
+            });
+        } finally {
+            this._batchFileList = null;
+        }
     }
 
     upload(file: BaseFileItem): void {
@@ -535,7 +586,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
             return;
         }
         if (typeof beforeUpload === 'function') {
-            const { fileList } = this.getStates();
+            const fileList = this.getLatestFileList();
             const buResult = this._adapter.notifyBeforeUpload({ file, fileList });
             switch (true) {
                 // sync validate - boolean
@@ -584,7 +635,11 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     // handle beforeUpload result when it's an object
     handleBeforeUploadResultInObject(buResult: Partial<BeforeUploadObjectResult>, file: BaseFileItem): void {
         const { shouldUpload, status, autoRemove, validateMessage, fileInstance } = buResult;
-        let newFileList: Array<BaseFileItem> = this.getState('fileList').slice();
+        // During a synchronous startUpload batch, read from the working copy; for async
+        // (promise) results read from the most recent synchronous snapshot, falling back
+        // to React state. This keeps mixed sync + async beforeUpload results composing
+        // correctly under React 18 automatic batching. (#3335)
+        let newFileList: Array<BaseFileItem> = this.getLatestFileList().slice();
         if (autoRemove) {
             this._releaseFileUrl(file.uid);
             newFileList = newFileList.filter(item => item.uid !== file.uid);
@@ -607,7 +662,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
             newFileList[index].shouldUpload = shouldUpload;
         }
 
-        this._adapter.updateFileList(newFileList);
+        this.updateFileListInternal(newFileList);
         this._adapter.notifyChange({ fileList: newFileList, currentFile: file });
 
         if (shouldUpload) {
@@ -703,8 +758,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     }
 
     handleProgress({ e, fileInstance }: { e?: ProgressEvent; fileInstance: File }): void {
-        const { fileList } = this.getStates();
-        const newFileList = fileList.slice();
+        const newFileList = this.getLatestFileList().slice();
         let percent = 0;
         if (e.total > 0) {
             percent = Number(((e.loaded / e.total) * 100 * numbers.PROGRESS_COEFFICIENT).toFixed(0)) || 0;
@@ -714,15 +768,15 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
             return;
         }
         newFileList[index].percent = percent;
-        newFileList[index].status = FILE_STATUS_UPLOADING;
+        newFileList[index].status = FILE_STATUS_UPLOADING as FileItemStatus;
 
         this._adapter.notifyProgress(percent, fileInstance, newFileList);
-        this._adapter.updateFileList(newFileList);
+        this.updateFileListInternal(newFileList);
         this._adapter.notifyChange({ fileList: newFileList, currentFile: newFileList[index] });
     }
 
     handleOnLoad({ e, xhr, fileInstance }: { e?: ProgressEvent; xhr: XMLHttpRequest; fileInstance: File }): void {
-        const { fileList } = this.getStates();
+        const fileList = this.getLatestFileList();
         const index = this._getFileIndex(fileInstance, fileList);
         if (index < 0) {
             return;
@@ -735,7 +789,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     }
 
     handleSuccess({ e, fileInstance, isCustomRequest = false, xhr, response }: { e?: ProgressEvent; fileInstance: CustomFile; isCustomRequest?: boolean; xhr?: XMLHttpRequest; response?: any }): void {
-        const { fileList } = this.getStates();
+        const fileList = this.getLatestFileList();
         let body: any = null;
         const index = this._getFileIndex(fileInstance, fileList);
         if (index < 0) {
@@ -750,7 +804,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         const newFileList = fileList.slice();
         const { afterUpload } = this.getProps();
 
-        newFileList[index].status = FILE_STATUS_SUCCESS;
+        newFileList[index].status = FILE_STATUS_SUCCESS as FileItemStatus;
         newFileList[index].percent = 100;
         this._adapter.notifyProgress(100, fileInstance, newFileList);
         newFileList[index].response = body;
@@ -763,7 +817,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
                     file: newFileList[index],
                     fileList: newFileList,
                 }) || {};
-            status ? (newFileList[index].status = status) : null;
+            status ? (newFileList[index].status = status as FileItemStatus) : null;
             validateMessage ? (newFileList[index].validateMessage = validateMessage) : null;
             name ? (newFileList[index].name = name) : null;
             if (url) {
@@ -778,7 +832,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         }
         this._adapter.notifySuccess(body, fileInstance, newFileList);
         this._adapter.notifyChange({ fileList: newFileList, currentFile: newFileList[index] });
-        this._adapter.updateFileList(newFileList);
+        this.updateFileListInternal(newFileList);
     }
 
     _getFileIndex(file: CustomFile | BaseFileItem, fileList: Array<BaseFileItem>): number {
@@ -808,13 +862,13 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
             this._releaseFileUrl(file.uid);
 
             this._adapter.notifyRemove(file.fileInstance, newFileList, file);
-            this._adapter.updateFileList(newFileList);
+            this.updateFileListInternal(newFileList);
             this._adapter.notifyChange({ fileList: newFileList, currentFile: file });
         });
     }
 
     handleError({ e, xhr, fileInstance }: { e?: ProgressEvent;xhr: XMLHttpRequest;fileInstance: CustomFile }): void {
-        const { fileList } = this.getStates();
+        const fileList = this.getLatestFileList();
         const index = this._getFileIndex(fileInstance, fileList);
         if (index < 0) {
             return;
@@ -823,12 +877,12 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         const newFileList = fileList.slice();
         const error = this.getError({ action, xhr, fileName: fileInstance.name });
 
-        newFileList[index].status = FILE_STATUS_UPLOAD_FAIL;
+        newFileList[index].status = FILE_STATUS_UPLOAD_FAIL as FileItemStatus;
         newFileList[index].response = error;
         newFileList[index].event = e;
 
         this._adapter.notifyError(error, fileInstance, newFileList, xhr);
-        this._adapter.updateFileList(newFileList);
+        this.updateFileListInternal(newFileList);
         this._adapter.notifyChange({ currentFile: newFileList[index], fileList: newFileList });
     }
 
@@ -844,7 +898,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
                 return;
             }
             this._releaseAllFileUrls();
-            this._adapter.updateFileList([]);
+            this.updateFileListInternal([]);
             this._adapter.notifyClear();
             this._adapter.notifyChange({ fileList: [] } as any);
         }).catch(error => {