@douyinfe/semi-foundation 2.103.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/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/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();

package/lib/es/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/es/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/es/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/es/resizable/group/index.js

@@ -23,6 +23,21 @@ export class ResizeItemFoundation extends BaseFoundation {
 export class ResizeGroupFoundation extends BaseFoundation {
   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);
     };
@@ -186,6 +201,9 @@ export class ResizeGroupFoundation extends BaseFoundation {
       // 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/es/timePicker/utils/index.js

@@ -111,7 +111,8 @@ export 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/modal/modalContentFoundation.ts

@@ -30,6 +30,15 @@ export interface ModalContentAdapter extends DefaultAdapter<ModalContentProps, M
     prevFocusElementReFocus: () => void
 }
 
+/**
+ * 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: Array<(e: any) => void> = [];
+
 export default class ModalContentFoundation extends BaseFoundation<ModalContentAdapter> {
 
     constructor(adapter: ModalContentAdapter) {
@@ -53,6 +62,12 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
     handleKeyDown = (e: any) => {
         const { 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;
@@ -61,10 +76,17 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
 
     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() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.103.0",
+    "version": "2.104.0",
     "description": "",
     "scripts": {
         "clean": "rimraf lib",
@@ -14225,8 +14225,8 @@
         }
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.103.0",
-        "@douyinfe/semi-json-viewer-core": "2.103.0",
+        "@douyinfe/semi-animation": "2.104.0",
+        "@douyinfe/semi-json-viewer-core": "2.104.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -14247,7 +14247,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "c1e3632b90b242defdfe4bfb267bcfaffbb23295",
+    "gitHead": "c69b9e013ab7b45cc617ed32f1ed548e96058bcd",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/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/resizable/group/index.ts

@@ -73,6 +73,9 @@ export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, a
     totalMinus: number;
     itemPercentMap: Map<number, number>; // 内部维护一个百分比数组，消除浮点计算误差
     type?: ResizeEventType;
+    // 首次 initSpace 时 group 是否可测量（非 display:none）。
+    // Whether the group was measurable (not inside display:none) on the first initSpace run. #3336
+    sizeInitialized: boolean = false;
 
 
     init(): void {
@@ -81,6 +84,19 @@ export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, a
         this.itemPercentMap = new Map();
         this.initSpace();
     }
+
+    /**
+     * 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 = () => {
+        if (!this.sizeInitialized && this.groupSize > 0) {
+            this.initSpace();
+        }
+    }
     get window(): Window | null {
         return this.groupRef.ownerDocument.defaultView as Window ?? null;
     }
@@ -231,6 +247,9 @@ export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, a
         // 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/timePicker/utils/index.ts

@@ -131,7 +131,8 @@ export const isTimeFormatLike = (time: string, formatToken: string) => {
     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) {