@douyinfe/semi-foundation 2.101.1 → 2.103.0

package/button/button.scss

@@ -19,6 +19,7 @@ $module: #{$prefix}-button;
     padding-right: $spacing-button_default-paddingRight;
     padding-top: $spacing-button_default-paddingTop;
     padding-bottom: $spacing-button_default-paddingTop;
+    font-family: inherit;
     font-size: $font-button-fontSize;
     line-height: $font-button-lineHeight;
     font-weight: $font-button-fontWeight;

package/dragMove/foundation.ts

@@ -25,6 +25,10 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     yMin: number;
     startOffsetX: number;
     startOffsetY: number;
+    startClientX: number;
+    startClientY: number;
+    startLeft: number;
+    startTop: number;
 
     get constrainer() {
         return this._adapter.getConstrainer();
@@ -44,11 +48,15 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
             throw new Error('drag element must be a valid element');
         }
         this.element = element;
-        this.element.style.position = 'absolute';
+        this.updatePositionStrategy();
         this.handler.style.cursor = 'move';
         this._registerStartEvent();
     }
 
+    updatePositionStrategy = () => {
+        this.element.style.position = this.getProp('positionStrategy') === 'relative' ? 'relative' : 'absolute';
+    }
+
     _registerStartEvent = () => {
         this.handler.addEventListener('mousedown', this.onMouseDown);
         this.handler.addEventListener('touchstart', this.onTouchStart);
@@ -95,6 +103,18 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     _calcMoveRange() {
         // Calculate the range within which an element can move
         if (this.constrainer) {
+            if (this.getProp('positionStrategy') === 'relative') {
+                const elementRect = this.element.getBoundingClientRect();
+                const constrainerRect = this.constrainer.getBoundingClientRect();
+                const style = window.getComputedStyle(this.element);
+                const currentLeft = parseFloat(style.left) || 0;
+                const currentTop = parseFloat(style.top) || 0;
+                this.xMin = currentLeft + constrainerRect.left - elementRect.left;
+                this.xMax = currentLeft + constrainerRect.right - elementRect.right;
+                this.yMin = currentTop + constrainerRect.top - elementRect.top;
+                this.yMax = currentTop + constrainerRect.bottom - elementRect.bottom;
+                return;
+            }
             let node = this.element.offsetParent as HTMLElement;
             let startX = 0;
             let startY = 0;
@@ -126,6 +146,14 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     }
 
     _calcOffset = (e: Touch | MouseEvent) => {
+        if (this.getProp('positionStrategy') === 'relative') {
+            const style = window.getComputedStyle(this.element);
+            this.startClientX = e.clientX;
+            this.startClientY = e.clientY;
+            this.startLeft = parseFloat(style.left) || 0;
+            this.startTop = parseFloat(style.top) || 0;
+            return;
+        }
         this.startOffsetX = e.clientX - this.element.offsetLeft;
         this.startOffsetY = e.clientY - this.element.offsetTop;
     }
@@ -161,8 +189,13 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
 
     _changePos = (e: Touch | MouseEvent) => {
         const { customMove } = this.getProps();
-        let newLeft = e.clientX - this.startOffsetX;
-        let newTop = e.clientY - this.startOffsetY;
+        const useRelativePosition = this.getProp('positionStrategy') === 'relative';
+        let newLeft = useRelativePosition ?
+            this.startLeft + e.clientX - this.startClientX :
+            e.clientX - this.startOffsetX;
+        let newTop = useRelativePosition ?
+            this.startTop + e.clientY - this.startClientY :
+            e.clientY - this.startOffsetY;
         if (this.constrainer) {
             newLeft = clampValueInRange(newLeft, this.xMin, this.xMax);
             newTop = clampValueInRange(newTop, this.yMin, this.yMax); 

package/lib/cjs/button/button.css

@@ -45,6 +45,7 @@
   padding-right: 12px;
   padding-top: 6px;
   padding-bottom: 6px;
+  font-family: inherit;
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;

package/lib/cjs/button/button.scss

@@ -19,6 +19,7 @@ $module: #{$prefix}-button;
     padding-right: $spacing-button_default-paddingRight;
     padding-top: $spacing-button_default-paddingTop;
     padding-bottom: $spacing-button_default-paddingTop;
+    font-family: inherit;
     font-size: $font-button-fontSize;
     line-height: $font-button-lineHeight;
     font-weight: $font-button-fontWeight;

package/lib/cjs/dragMove/foundation.d.ts

@@ -20,10 +20,15 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     yMin: number;
     startOffsetX: number;
     startOffsetY: number;
+    startClientX: number;
+    startClientY: number;
+    startLeft: number;
+    startTop: number;
     get constrainer(): HTMLElement;
     get handler(): HTMLElement;
     constructor(adapter: DragMoveAdapter<P, S>);
     init(): void;
+    updatePositionStrategy: () => void;
     _registerStartEvent: () => void;
     _unRegisterStartEvent: () => void;
     destroy(): void;

package/lib/cjs/dragMove/foundation.js

@@ -19,6 +19,9 @@ class DragMoveFoundation extends _foundation.default {
   }
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this.updatePositionStrategy = () => {
+      this.element.style.position = this.getProp('positionStrategy') === 'relative' ? 'relative' : 'absolute';
+    };
     this._registerStartEvent = () => {
       this.handler.addEventListener('mousedown', this.onMouseDown);
       this.handler.addEventListener('touchstart', this.onTouchStart);
@@ -46,6 +49,14 @@ class DragMoveFoundation extends _foundation.default {
       document.removeEventListener('touchcancel', this._onTouchCancel);
     };
     this._calcOffset = e => {
+      if (this.getProp('positionStrategy') === 'relative') {
+        const style = window.getComputedStyle(this.element);
+        this.startClientX = e.clientX;
+        this.startClientY = e.clientY;
+        this.startLeft = parseFloat(style.left) || 0;
+        this.startTop = parseFloat(style.top) || 0;
+        return;
+      }
       this.startOffsetX = e.clientX - this.element.offsetLeft;
       this.startOffsetY = e.clientY - this.element.offsetTop;
     };
@@ -79,8 +90,9 @@ class DragMoveFoundation extends _foundation.default {
       const {
         customMove
       } = this.getProps();
-      let newLeft = e.clientX - this.startOffsetX;
-      let newTop = e.clientY - this.startOffsetY;
+      const useRelativePosition = this.getProp('positionStrategy') === 'relative';
+      let newLeft = useRelativePosition ? this.startLeft + e.clientX - this.startClientX : e.clientX - this.startOffsetX;
+      let newTop = useRelativePosition ? this.startTop + e.clientY - this.startClientY : e.clientY - this.startOffsetY;
       if (this.constrainer) {
         newLeft = clampValueInRange(newLeft, this.xMin, this.xMax);
         newTop = clampValueInRange(newTop, this.yMin, this.yMax);
@@ -122,7 +134,7 @@ class DragMoveFoundation extends _foundation.default {
       throw new Error('drag element must be a valid element');
     }
     this.element = element;
-    this.element.style.position = 'absolute';
+    this.updatePositionStrategy();
     this.handler.style.cursor = 'move';
     this._registerStartEvent();
   }
@@ -137,6 +149,18 @@ class DragMoveFoundation extends _foundation.default {
   _calcMoveRange() {
     // Calculate the range within which an element can move
     if (this.constrainer) {
+      if (this.getProp('positionStrategy') === 'relative') {
+        const elementRect = this.element.getBoundingClientRect();
+        const constrainerRect = this.constrainer.getBoundingClientRect();
+        const style = window.getComputedStyle(this.element);
+        const currentLeft = parseFloat(style.left) || 0;
+        const currentTop = parseFloat(style.top) || 0;
+        this.xMin = currentLeft + constrainerRect.left - elementRect.left;
+        this.xMax = currentLeft + constrainerRect.right - elementRect.right;
+        this.yMin = currentTop + constrainerRect.top - elementRect.top;
+        this.yMax = currentTop + constrainerRect.bottom - elementRect.bottom;
+        return;
+      }
       let node = this.element.offsetParent;
       let startX = 0;
       let startY = 0;

package/lib/cjs/progress/progress.css

@@ -20,6 +20,7 @@
 .semi-progress-horizontal .semi-progress-track {
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 .semi-progress-horizontal .semi-progress-track-inner {
   height: 100%;
@@ -28,6 +29,11 @@
   transition: width 0.3s;
   transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
 }
+.semi-progress-horizontal .semi-progress-track-inner-indeterminate {
+  width: 35%;
+  transition: none;
+  animation: semi-progress-indeterminate-slide 1.6s ease-in-out infinite;
+}
 .semi-progress-horizontal .semi-progress-line-text {
   min-width: 45px;
   font-weight: 600;
@@ -48,6 +54,7 @@
 .semi-progress-vertical .semi-progress-track {
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 .semi-progress-vertical .semi-progress-track-inner {
   background-color: var(--semi-color-success);
@@ -56,6 +63,12 @@
   transition: height 0.3s;
   transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
 }
+.semi-progress-vertical .semi-progress-track-inner-indeterminate {
+  height: 35%;
+  width: 100%;
+  transition: none;
+  animation: semi-progress-indeterminate-slide-vertical 1.6s ease-in-out infinite;
+}
 .semi-progress-vertical .semi-progress-line-text {
   font-weight: 600;
   margin-top: 8px;
@@ -77,6 +90,11 @@
   transform-origin: 50% 50%;
   stroke: var(--semi-color-success);
 }
+.semi-progress-circle-ring-inner-indeterminate {
+  transform: rotate(0deg);
+  transform-origin: 50% 50%;
+  animation: semi-progress-indeterminate-rotate 1.2s linear infinite;
+}
 .semi-progress-circle-text {
   position: absolute;
   top: 50%;
@@ -88,6 +106,36 @@
   color: var(--semi-color-mode-minor-text);
 }
 
+@keyframes semi-progress-indeterminate-slide {
+  0% {
+    transform: translateX(-120%);
+  }
+  55% {
+    transform: translateX(300%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+@keyframes semi-progress-indeterminate-slide-vertical {
+  0% {
+    transform: translateY(-120%);
+  }
+  55% {
+    transform: translateY(300%);
+  }
+  100% {
+    transform: translateY(300%);
+  }
+}
+@keyframes semi-progress-indeterminate-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .semi-rtl .semi-progress,
 .semi-portal-rtl .semi-progress {
   direction: rtl;

package/lib/cjs/progress/progress.scss

@@ -23,6 +23,7 @@ $module: #{$prefix}-progress;
         .#{$module}-track {
             height: 100%;
             width: 100%;
+            overflow: hidden;
         }
 
         .#{$module}-track-inner {
@@ -33,6 +34,12 @@ $module: #{$prefix}-progress;
             transition-timing-function: $motion-progress-transition_timing_function;
         }
 
+        .#{$module}-track-inner-indeterminate {
+            width: 35%;
+            transition: none;
+            animation: semi-progress-indeterminate-slide 1.6s ease-in-out infinite;
+        }
+
         .#{$module}-line-text {
             min-width: $width-progress_line_text;
             font-weight: $font-progress_line_text-fontWeight;
@@ -57,6 +64,7 @@ $module: #{$prefix}-progress;
         .#{$module}-track {
             height: 100%;
             width: 100%;
+            overflow: hidden;
         }
 
         .#{$module}-track-inner {
@@ -67,6 +75,13 @@ $module: #{$prefix}-progress;
             transition-timing-function: $motion-progress-transition_timing_function;
         }
 
+        .#{$module}-track-inner-indeterminate {
+            height: 35%;
+            width: 100%;
+            transition: none;
+            animation: semi-progress-indeterminate-slide-vertical 1.6s ease-in-out infinite;
+        }
+
         .#{$module}-line-text {
             font-weight: $font-progress_line_text-fontWeight;
             margin-top: $spacing-progress_vertical_line_text-marginTop;
@@ -95,6 +110,12 @@ $module: #{$prefix}-progress;
             stroke: $color-progress_track_inner-bg;
         }
 
+        &-ring-inner-indeterminate {
+            transform: rotate(0deg);
+            transform-origin: 50% 50%;
+            animation: semi-progress-indeterminate-rotate 1.2s linear infinite;
+        }
+
         &-text {
             position: absolute;
             top: 50%;
@@ -108,4 +129,42 @@ $module: #{$prefix}-progress;
     }
 }
 
-@import './rtl.scss';
+@keyframes semi-progress-indeterminate-slide {
+    0% {
+        transform: translateX(-120%);
+    }
+
+    55% {
+        transform: translateX(300%);
+    }
+
+    100% {
+        transform: translateX(300%);
+    }
+}
+
+@keyframes semi-progress-indeterminate-slide-vertical {
+    0% {
+        transform: translateY(-120%);
+    }
+
+    55% {
+        transform: translateY(300%);
+    }
+
+    100% {
+        transform: translateY(300%);
+    }
+}
+
+@keyframes semi-progress-indeterminate-rotate {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@import './rtl.scss';

package/lib/cjs/tree/foundation.js

@@ -440,7 +440,10 @@ class TreeFoundation extends _foundation.default {
     this._adapter.cacheFlattenNodes(motionType === 'hide' && this._isAnimated());
     if (!this._isExpandControlled()) {
       const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys, keyMaps, isSearching && showFilteredOnly && filteredShownKeys);
-      const motionKeys = this._isAnimated() ? (0, _treeUtil.getMotionKeys)(eventKey, expandedKeys, keyEntities) : [];
+      let motionKeys = this._isAnimated() ? (0, _treeUtil.getMotionKeys)(eventKey, expandedKeys, keyEntities) : [];
+      if (isSearching && showFilteredOnly) {
+        motionKeys = motionKeys.filter(key => filteredShownKeys.has(key));
+      }
       const newState = {
         [expandedStateKey]: expandedKeys,
         flattenNodes,

package/lib/cjs/upload/foundation.d.ts

@@ -94,6 +94,33 @@ declare class UploadFoundation<P = Record<string, any>, S = Record<string, any>>
      * When paste event is successfully handled, we ignore the subsequent keydown event.
      */
     _pasteHandled: boolean;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /** Keep the synchronous snapshot aligned with an externally controlled fileList. */
+    syncLatestFileList(fileList: Array<BaseFileItem>): void;
+    getLatestFileList(): Array<BaseFileItem>;
     constructor(adapter: UploadAdapter<P, S>);
     init(): void;
     /**

package/lib/cjs/upload/foundation.js

@@ -48,6 +48,25 @@ const {
   TRIGGER_AUTO
 } = _constants.strings;
 class UploadFoundation extends _foundation.default {
+  /**
+   * 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, callback) {
+    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) {
+    this._latestFileList = fileList.slice();
+  }
+  getLatestFileList() {
+    return this._batchFileList || this._latestFileList || this.getState('fileList');
+  }
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.destroyState = false;
@@ -62,10 +81,29 @@ class UploadFoundation extends _foundation.default {
      * When paste event is successfully handled, we ignore the subsequent keydown event.
      */
     this._pasteHandled = 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.
+     */
+    this._batchFileList = 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).
+     */
+    this._latestFileList = null;
   }
   init() {
     // 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();
@@ -115,6 +153,8 @@ class UploadFoundation extends _foundation.default {
     if (!disabled) {
       this.unbindPastingHandler();
     }
+    this._batchFileList = null;
+    this._latestFileList = null;
     this.destroyState = true;
   }
   /**
@@ -331,7 +371,7 @@ class UploadFoundation extends _foundation.default {
       currentFile: newFileItem,
       fileList: newFileList
     });
-    this._adapter.updateFileList(newFileList, () => {
+    this.updateFileListInternal(newFileList, () => {
       this._adapter.resetReplaceInput();
       if (!newFileItem._sizeInvalid) {
         this.upload(newFileItem);
@@ -375,7 +415,7 @@ class UploadFoundation extends _foundation.default {
       fileList: currentFiles,
       currentFile: currentFiles[0]
     });
-    this._adapter.updateFileList(currentFiles, () => {
+    this.updateFileListInternal(currentFiles, () => {
       if (uploadTrigger === TRIGGER_AUTO) {
         this.startUpload(currentFiles);
       }
@@ -399,7 +439,7 @@ class UploadFoundation extends _foundation.default {
         });
       }
     });
-    this._adapter.updateFileList(fileList, () => {
+    this.updateFileListInternal(fileList, () => {
       if (uploadTrigger === TRIGGER_AUTO) {
         this.startUpload(currentFiles);
       }
@@ -483,7 +523,7 @@ class UploadFoundation extends _foundation.default {
       fileList: newFileList,
       currentFile: null
     });
-    this._adapter.updateFileList(newFileList, () => {
+    this.updateFileListInternal(newFileList, () => {
       if (uploadTrigger === TRIGGER_AUTO) {
         this.startUpload(fileItemList);
       }
@@ -492,15 +532,24 @@ class UploadFoundation extends _foundation.default {
   /* istanbul ignore next */
   manualUpload() {
     // find the list of files that have not been uploaded
-    const waitToUploadFileList = this.getState('fileList').filter(item => item.status === FILE_STATUS_WAIT_UPLOAD);
+    const waitToUploadFileList = this.getLatestFileList().filter(item => item.status === FILE_STATUS_WAIT_UPLOAD);
     this.startUpload(waitToUploadFileList);
   }
   startUpload(fileList) {
-    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) {
     const {
@@ -511,9 +560,7 @@ class UploadFoundation extends _foundation.default {
       return;
     }
     if (typeof beforeUpload === 'function') {
-      const {
-        fileList
-      } = this.getStates();
+      const fileList = this.getLatestFileList();
       const buResult = this._adapter.notifyBeforeUpload({
         file,
         fileList
@@ -578,7 +625,11 @@ class UploadFoundation extends _foundation.default {
       validateMessage,
       fileInstance
     } = buResult;
-    let newFileList = 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 = this.getLatestFileList().slice();
     if (autoRemove) {
       this._releaseFileUrl(file.uid);
       newFileList = newFileList.filter(item => item.uid !== file.uid);
@@ -600,7 +651,7 @@ class UploadFoundation extends _foundation.default {
       }
       newFileList[index].shouldUpload = shouldUpload;
     }
-    this._adapter.updateFileList(newFileList);
+    this.updateFileListInternal(newFileList);
     this._adapter.notifyChange({
       fileList: newFileList,
       currentFile: file
@@ -714,10 +765,7 @@ class UploadFoundation extends _foundation.default {
       e,
       fileInstance
     } = _ref2;
-    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 * _constants.numbers.PROGRESS_COEFFICIENT).toFixed(0)) || 0;
@@ -729,7 +777,7 @@ class UploadFoundation extends _foundation.default {
     newFileList[index].percent = percent;
     newFileList[index].status = FILE_STATUS_UPLOADING;
     this._adapter.notifyProgress(percent, fileInstance, newFileList);
-    this._adapter.updateFileList(newFileList);
+    this.updateFileListInternal(newFileList);
     this._adapter.notifyChange({
       fileList: newFileList,
       currentFile: newFileList[index]
@@ -741,9 +789,7 @@ class UploadFoundation extends _foundation.default {
       xhr,
       fileInstance
     } = _ref3;
-    const {
-      fileList
-    } = this.getStates();
+    const fileList = this.getLatestFileList();
     const index = this._getFileIndex(fileInstance, fileList);
     if (index < 0) {
       return;
@@ -771,9 +817,7 @@ class UploadFoundation extends _foundation.default {
       xhr,
       response
     } = _ref4;
-    const {
-      fileList
-    } = this.getStates();
+    const fileList = this.getLatestFileList();
     let body = null;
     const index = this._getFileIndex(fileInstance, fileList);
     if (index < 0) {
@@ -824,7 +868,7 @@ class UploadFoundation extends _foundation.default {
       fileList: newFileList,
       currentFile: newFileList[index]
     });
-    this._adapter.updateFileList(newFileList);
+    this.updateFileListInternal(newFileList);
   }
   _getFileIndex(file, fileList) {
     return fileList.findIndex(item => item.uid === file.uid);
@@ -852,7 +896,7 @@ class UploadFoundation extends _foundation.default {
       newFileList.splice(index, 1);
       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
@@ -865,9 +909,7 @@ class UploadFoundation extends _foundation.default {
       xhr,
       fileInstance
     } = _ref5;
-    const {
-      fileList
-    } = this.getStates();
+    const fileList = this.getLatestFileList();
     const index = this._getFileIndex(fileInstance, fileList);
     if (index < 0) {
       return;
@@ -885,7 +927,7 @@ class UploadFoundation extends _foundation.default {
     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
@@ -906,7 +948,7 @@ class UploadFoundation extends _foundation.default {
         return;
       }
       this._releaseAllFileUrls();
-      this._adapter.updateFileList([]);
+      this.updateFileListInternal([]);
       this._adapter.notifyClear();
       this._adapter.notifyChange({
         fileList: []

package/lib/es/button/button.css

@@ -45,6 +45,7 @@
   padding-right: 12px;
   padding-top: 6px;
   padding-bottom: 6px;
+  font-family: inherit;
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;

package/lib/es/button/button.scss

@@ -19,6 +19,7 @@ $module: #{$prefix}-button;
     padding-right: $spacing-button_default-paddingRight;
     padding-top: $spacing-button_default-paddingTop;
     padding-bottom: $spacing-button_default-paddingTop;
+    font-family: inherit;
     font-size: $font-button-fontSize;
     line-height: $font-button-lineHeight;
     font-weight: $font-button-fontWeight;