@douyinfe/semi-foundation 2.102.0 → 2.104.0

package/lib/cjs/modal/modalContentFoundation.js

@@ -7,6 +7,14 @@ exports.default = void 0;
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Stack of `handleKeyDown` handlers for modals that currently listen on
+ * `document`. Every ModalContent registers its own document-level keydown
+ * listener, so `stopPropagation()` cannot stop sibling listeners on the same
+ * node — one ESC used to close every open dialog. Only the most recently
+ * mounted (top-most) listener should respond.
+ */
+const escListenerStack = [];
 class ModalContentFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, ModalContentFoundation.defaultAdapter), adapter));
@@ -15,6 +23,12 @@ class ModalContentFoundation extends _foundation.default {
         closeOnEsc
       } = this.getProps();
       if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
+        // Multiple open modals each registered a document-level keydown
+        // listener; only the top-most (most recently mounted) one may
+        // close, so a single ESC closes dialogs one at a time.
+        if (escListenerStack[escListenerStack.length - 1] !== this.handleKeyDown) {
+          return;
+        }
         e.stopPropagation();
         this.close(e);
         return;
@@ -34,9 +48,16 @@ class ModalContentFoundation extends _foundation.default {
   }
   handleKeyDownEventListenerMount() {
     this._adapter.addKeyDownEventListener();
+    if (this.getProps().closeOnEsc) {
+      escListenerStack.push(this.handleKeyDown);
+    }
   }
   handleKeyDownEventListenerUnmount() {
     this._adapter.removeKeyDownEventListener();
+    const index = escListenerStack.indexOf(this.handleKeyDown);
+    if (index !== -1) {
+      escListenerStack.splice(index, 1);
+    }
   }
   getMouseState() {
     this._adapter.getMouseState();

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/radio/radio.css

@@ -174,6 +174,11 @@
   height: 100%;
   font-size: 14px;
 }
+.semi-radio-inner-display .semi-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 .semi-radio-content {
   display: flex;
   flex-direction: column;

package/lib/cjs/radio/radio.scss

@@ -236,6 +236,15 @@ $inner-width: $width-icon-medium;
                 width: 100%;
                 height: 100%;
                 font-size: 14px;
+
+                // #3350: 显式设置 svg 尺寸并 block 化，替代 svg 自带的 width/height="1em"。
+                // Safari 对以 em 指定尺寸的内联 SVG 存在渲染偏差，会导致 checked 状态
+                // 的白点视觉偏移；100% 让 svg 与图标容器严格同尺寸，无偏移空间。
+                svg {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                }
             }
         }
     }

package/lib/cjs/resizable/group/index.d.ts

@@ -41,7 +41,16 @@ export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<s
     totalMinus: number;
     itemPercentMap: Map<number, number>;
     type?: ResizeEventType;
+    sizeInitialized: boolean;
     init(): void;
+    /**
+     * When the group is initially mounted inside a display:none container, its own size
+     * and the handler sizes are all 0, so item sizes are computed with a `- 0px` handler
+     * offset and never corrected once the container becomes visible. Recalculate the layout
+     * the first time the group becomes measurable. Once it has a valid size, later resizes
+     * must NOT re-run initSpace, otherwise the user's manual drag results would be reset. #3336
+     */
+    handleGroupResize: () => void;
     get window(): Window | null;
     registerEvents: () => void;
     unregisterEvents: () => void;

package/lib/cjs/resizable/group/index.js

@@ -31,6 +31,21 @@ exports.ResizeItemFoundation = ResizeItemFoundation;
 class ResizeGroupFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    // 首次 initSpace 时 group 是否可测量（非 display:none）。
+    // Whether the group was measurable (not inside display:none) on the first initSpace run. #3336
+    this.sizeInitialized = false;
+    /**
+     * When the group is initially mounted inside a display:none container, its own size
+     * and the handler sizes are all 0, so item sizes are computed with a `- 0px` handler
+     * offset and never corrected once the container becomes visible. Recalculate the layout
+     * the first time the group becomes measurable. Once it has a valid size, later resizes
+     * must NOT re-run initSpace, otherwise the user's manual drag results would be reset. #3336
+     */
+    this.handleGroupResize = () => {
+      if (!this.sizeInitialized && this.groupSize > 0) {
+        this.initSpace();
+      }
+    };
     this.registerEvents = () => {
       this._adapter.registerEvents(this.type);
     };
@@ -194,6 +209,9 @@ class ResizeGroupFoundation extends _foundation.default {
       // calculate accurate space for group item
       let handlerSizes = new Array(this._adapter.getHandlerCount()).fill(0);
       let parentSize = this.groupSize;
+      // Mark whether the group is measurable now; if not (e.g. inside display:none),
+      // handleGroupResize will re-run initSpace once it becomes visible. #3336
+      this.sizeInitialized = parentSize > 0;
       this.totalMinus = 0;
       for (let i = 0; i < this._adapter.getHandlerCount(); i++) {
         let handlerSize = direction === 'horizontal' ? this._adapter.getHandler(i).offsetWidth : this._adapter.getHandler(i).offsetHeight;

package/lib/cjs/timePicker/utils/index.js

@@ -125,7 +125,8 @@ const isTimeFormatLike = (time, formatToken) => {
   const hmsReg = /[H|m|s]{1,2}/;
   const formatSplitted = formatToken.split(formatNotSupportChReg); // => ['HH', 'mm'];
   const timeSeparator = formatToken.replace(formatSupportChReg, ''); // => :
-  const timeReg = new RegExp(`[${timeSeparator}]`, 'g'); // => /[:]/g
+  const escapedTimeSeparator = timeSeparator.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); // escape regExp special characters to avoid invalid regExp, e.g. format="HH\\mm"
+  const timeReg = new RegExp(`[${escapedTimeSeparator}]`, 'g'); // => /[:]/g
   const timeSplitted = time.split(timeReg); // => ['12', '0]
   if (formatSplitted.length !== timeSplitted.length) {
     isLike = false;

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/modal/modalContentFoundation.js

@@ -1,5 +1,13 @@
 import BaseFoundation from '../base/foundation';
 import KeyCode from '../utils/keyCode';
+/**
+ * Stack of `handleKeyDown` handlers for modals that currently listen on
+ * `document`. Every ModalContent registers its own document-level keydown
+ * listener, so `stopPropagation()` cannot stop sibling listeners on the same
+ * node — one ESC used to close every open dialog. Only the most recently
+ * mounted (top-most) listener should respond.
+ */
+const escListenerStack = [];
 export default class ModalContentFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, ModalContentFoundation.defaultAdapter), adapter));
@@ -8,6 +16,12 @@ export default class ModalContentFoundation extends BaseFoundation {
         closeOnEsc
       } = this.getProps();
       if (closeOnEsc && e.keyCode === KeyCode.ESC) {
+        // Multiple open modals each registered a document-level keydown
+        // listener; only the top-most (most recently mounted) one may
+        // close, so a single ESC closes dialogs one at a time.
+        if (escListenerStack[escListenerStack.length - 1] !== this.handleKeyDown) {
+          return;
+        }
         e.stopPropagation();
         this.close(e);
         return;
@@ -27,9 +41,16 @@ export default class ModalContentFoundation extends BaseFoundation {
   }
   handleKeyDownEventListenerMount() {
     this._adapter.addKeyDownEventListener();
+    if (this.getProps().closeOnEsc) {
+      escListenerStack.push(this.handleKeyDown);
+    }
   }
   handleKeyDownEventListenerUnmount() {
     this._adapter.removeKeyDownEventListener();
+    const index = escListenerStack.indexOf(this.handleKeyDown);
+    if (index !== -1) {
+      escListenerStack.splice(index, 1);
+    }
   }
   getMouseState() {
     this._adapter.getMouseState();