@douyinfe/semi-foundation 2.93.0 → 2.94.1

package/lib/es/upload/foundation.js

@@ -50,6 +50,11 @@ class UploadFoundation extends BaseFoundation {
      * when _createURL is called multiple times in a sync loop.
      */
     this._localUrls = {};
+    /**
+     * Flag to prevent duplicate handling of paste events.
+     * When paste event is successfully handled, we ignore the subsequent keydown event.
+     */
+    this._pasteHandled = false;
   }
   init() {
     // make sure state reset, otherwise may cause upload abort in React StrictMode, like https://github.com/DouyinFE/semi-design/pull/843
@@ -1074,40 +1079,83 @@ class UploadFoundation extends BaseFoundation {
     }
   }
   handlePasting(e) {
-    const isMac = this._adapter.isMac();
-    const isCombineKeydown = isMac ? e.metaKey : e.ctrlKey;
     const {
       addOnPasting
     } = this.getProps();
-    if (addOnPasting) {
-      if (isCombineKeydown && e.code === 'KeyV') {
-        // https://github.com/microsoft/TypeScript/issues/33923
-        const permissionName = 'clipboard-read';
-        // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
-        navigator.permissions.query({
-          name: permissionName
-        }).then(result => {
-          if (result.state === 'granted' || result.state === 'prompt') {
-            // user has authorized or will authorize
-            navigator.clipboard.read().then(clipboardItems => {
-              // Process the data read from the pasteboard
-              // Check the returned data type to determine if it is image data, and process accordingly
-              this.readFileFromClipboard(clipboardItems);
-            });
-          } else {
-            this._adapter.notifyPastingError(result);
+    if (!addOnPasting) {
+      return;
+    }
+    // Try to read from native paste event (clipboardData) first as fallback
+    if (e.type === 'paste' && e.clipboardData && e.clipboardData.items) {
+      const items = e.clipboardData.items;
+      const files = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        // Check if the item is a file (image, etc.)
+        if (item.kind === 'file') {
+          const file = item.getAsFile();
+          if (file) {
+            files.push(file);
           }
-        }).catch(error => {
-          this._adapter.notifyPastingError(error);
-        });
+        }
+      }
+      if (files.length > 0) {
+        e.preventDefault();
+        this.handleChange(files);
+        // Mark that paste event has been handled to prevent duplicate handling by keydown event
+        this._pasteHandled = true;
+        // Reset the flag after a short delay to allow future paste operations
+        setTimeout(() => {
+          this._pasteHandled = false;
+        }, 100);
+        return;
       }
     }
+    // Fallback to navigator.clipboard for keyboard events (keydown with Ctrl/Cmd+V)
+    // Skip if paste event has already been handled
+    if (this._pasteHandled) {
+      this._pasteHandled = false;
+      return;
+    }
+    const isMac = this._adapter.isMac();
+    const isCombineKeydown = isMac ? e.metaKey : e.ctrlKey;
+    if (isCombineKeydown && e.code === 'KeyV') {
+      // Check if navigator.clipboard is available
+      if (!navigator.clipboard || typeof navigator.clipboard.read !== 'function') {
+        return;
+      }
+      // https://github.com/microsoft/TypeScript/issues/33923
+      const permissionName = 'clipboard-read';
+      // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
+      navigator.permissions.query({
+        name: permissionName
+      }).then(result => {
+        if (result.state === 'granted' || result.state === 'prompt') {
+          // user has authorized or will authorize
+          navigator.clipboard.read().then(clipboardItems => {
+            // Process the data read from the pasteboard
+            // Check the returned data type to determine if it is image data, and process accordingly
+            this.readFileFromClipboard(clipboardItems);
+          }).catch(error => {
+            this._adapter.notifyPastingError(error);
+          });
+        } else {
+          this._adapter.notifyPastingError(result);
+        }
+      }).catch(error => {
+        this._adapter.notifyPastingError(error);
+      });
+    }
   }
   bindPastingHandler() {
+    // Register keyboard event handler (keydown with Ctrl/Cmd+V)
     this._adapter.registerPastingHandler(event => this.handlePasting(event));
+    // Register native paste event handler as fallback
+    this._adapter.registerPasteEventHandler(event => this.handlePasting(event));
   }
   unbindPastingHandler() {
     this._adapter.unRegisterPastingHandler();
+    this._adapter.unRegisterPasteEventHandler();
   }
 }
 export default UploadFoundation;

package/lib/es/utils/escapeHtml.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Escape HTML angle brackets in markdown text, preserving code blocks and inline code.
+ *
+ * In `format='md'` mode, @mdx-js/mdx uses `rehypeRemoveRaw` which strips all raw HTML nodes.
+ * This causes user-typed HTML-like content (e.g. `<AgentChat />`) to silently disappear.
+ * By escaping `<` to `&lt;` outside of code spans/blocks, the markdown parser treats them
+ * as literal text instead of HTML tags.
+ */
+export declare function escapeHtmlInMarkdown(text: string): string;

package/lib/es/utils/escapeHtml.js

@@ -0,0 +1,84 @@
+/**
+ * Escape HTML angle brackets in markdown text, preserving code blocks and inline code.
+ *
+ * In `format='md'` mode, @mdx-js/mdx uses `rehypeRemoveRaw` which strips all raw HTML nodes.
+ * This causes user-typed HTML-like content (e.g. `<AgentChat />`) to silently disappear.
+ * By escaping `<` to `&lt;` outside of code spans/blocks, the markdown parser treats them
+ * as literal text instead of HTML tags.
+ */
+export function escapeHtmlInMarkdown(text) {
+  const lines = text.split('\n');
+  const result = [];
+  let fenceChar = null;
+  let fenceLen = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (fenceChar !== null) {
+      // Inside a fenced code block — check for closing fence
+      result.push(line);
+      const trimmed = line.trimEnd();
+      if (trimmed.length >= fenceLen && trimmed[0] === fenceChar && trimmed === fenceChar.repeat(trimmed.length)) {
+        fenceChar = null;
+      }
+    } else {
+      // Check if this line opens a fenced code block
+      const fenceMatch = line.match(/^(`{3,}|~{3,})/);
+      if (fenceMatch) {
+        fenceChar = fenceMatch[1][0];
+        fenceLen = fenceMatch[1].length;
+        result.push(line);
+      } else {
+        result.push(escapeAngleBracketsOutsideInlineCode(line));
+      }
+    }
+  }
+  return result.join('\n');
+}
+/**
+ * Escape `<` to `&lt;` in a single line, but preserve content inside inline code spans.
+ */
+function escapeAngleBracketsOutsideInlineCode(line) {
+  const parts = [];
+  let i = 0;
+  while (i < line.length) {
+    if (line[i] === '`') {
+      // Count opening backticks
+      let count = 0;
+      const start = i;
+      while (i < line.length && line[i] === '`') {
+        count++;
+        i++;
+      }
+      // Find matching closing backticks (exact same count)
+      const closer = '`'.repeat(count);
+      const closeIdx = line.indexOf(closer, i);
+      if (closeIdx !== -1) {
+        parts.push(line.slice(start, closeIdx + count));
+        i = closeIdx + count;
+      } else {
+        // No matching close — treat backticks as regular text, escape any `<`
+        parts.push(line.slice(start, i).replace(/</g, '&lt;'));
+      }
+    } else if (line[i] === '<') {
+      parts.push('&lt;');
+      i++;
+    } else {
+      // Collect a run of non-special characters at once
+      const next = line.indexOf('<', i);
+      const nextBt = line.indexOf('`', i);
+      let end;
+      if (next === -1 && nextBt === -1) {
+        end = line.length;
+      } else if (next === -1) {
+        end = nextBt;
+      } else if (nextBt === -1) {
+        end = next;
+      } else {
+        end = Math.min(next, nextBt);
+      }
+      parts.push(line.slice(i, end));
+      i = end;
+    }
+  }
+  return parts.join('');
+}

package/lib/es/utils/object.js

@@ -52,7 +52,9 @@ function cleanup(obj, path) {
   //     lodashRemove(target, (value, index, array) => index > lastIndex);
   // }
   // Delete object if its empty
-  if (Array.isArray(target) && target.every(e => e == null)) {
+  // Only delete array if it's not empty AND all elements are null/undefined
+  // This prevents empty arrays from being deleted (issue #2834)
+  if (Array.isArray(target) && target.length > 0 && target.every(e => e == null)) {
     _unset(obj, path);
   } else if (isEmptyObject(target)) {
     _unset(obj, path);

package/modal/modalFoundation.ts

@@ -1,5 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import isPromise from "../utils/isPromise";
+import { debounce } from 'lodash';
 
 export type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 export type Size = 'small' | 'medium' | 'large' | 'full-width';
@@ -67,6 +68,17 @@ export interface ModalState {
 
 export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
 
+    private _debouncedOk = debounce((e: any) => {
+        this._invokeOk(e);
+    }, 100, { leading: true, trailing: false });
+
+    private _debouncedCancel = debounce((e: any) => {
+        this._invokeCancel(e);
+    }, 100, { leading: true, trailing: false });
+
+    private _lastCancelTarget: EventTarget | null = null;
+    private _lastOkTarget: EventTarget | null = null;
+
     constructor(adapter: ModalAdapter) {
         super({
             ...adapter,
@@ -74,10 +86,30 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     }
 
     destroy() {
+        this._debouncedOk.cancel();
+        this._debouncedCancel.cancel();
         this.afterHide();
     }
 
     handleCancel(e: any) {
+        const target = e?.currentTarget ?? e?.target ?? null;
+        if (target !== this._lastCancelTarget) {
+            this._debouncedCancel.cancel();
+        }
+        this._lastCancelTarget = target;
+        this._debouncedCancel(e);
+    }
+
+    handleOk(e: any) {
+        const target = e?.currentTarget ?? e?.target ?? null;
+        if (target !== this._lastOkTarget) {
+            this._debouncedOk.cancel();
+        }
+        this._lastOkTarget = target;
+        this._debouncedOk(e);
+    }
+
+    private _invokeCancel(e: any) {
         const result = this._adapter.notifyCancel(e);
         if (isPromise(result)) {
             this._adapter.setState({ onCancelReturnPromiseStatus: "pending" });
@@ -90,7 +122,7 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
         }
     }
 
-    handleOk(e: any) {
+    private _invokeOk(e: any) {
         const result = this._adapter.notifyOk(e);
         if (isPromise(result)) {
             this._adapter.setState({ onOKReturnPromiseStatus: "pending" });
@@ -116,38 +148,7 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
         this._adapter.enabledBodyScroll();
     }
 
-    // afterClose() {
-    //     this._adapter.notifyClose();
-    // }
-
-
     toggleDisplayNone = (displayNone: boolean, callback?: (displayNone: boolean) => void) => {
         this._adapter.toggleDisplayNone(displayNone, callback);
     };
-
-
-    // mergeMotionProp = (motion: Motion, prop: string, cb: () => void) => {
-    //     const mergedMotion = typeof (motion) === 'undefined' || motion ? {
-    //         ...(motion as { [key: string]: (() => void) | boolean }),
-    //         [prop]: (...args: any) => {
-    //             const curr = get(motion, prop);
-    //             if (typeof curr === 'function') {
-    //                 curr(...args);
-    //             }
-    //             cb();
-    //         }
-    //     } : false;
-    //     return mergedMotion;
-    // };
-    //
-    // getMergedMotion() {
-    //     let { motion } = this._adapter.getProps();
-    //     const { keepDOM } = this._adapter.getProps();
-    //     motion = this.mergeMotionProp(motion, 'didLeave', this.afterClose.bind(this));
-    //     if (!keepDOM) {
-    //         return motion;
-    //     }
-    //     const mergedMotion = this.mergeMotionProp(motion, 'didLeave', this.toggleHidden.bind(this, true));
-    //     return mergedMotion;
-    // }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.93.0",
+    "version": "2.94.1",
     "description": "",
     "scripts": {
         "clean": "rimraf lib",
@@ -13278,6 +13278,36 @@
             "import": "./lib/es/utils/dom.js",
             "require": "./lib/cjs/utils/dom.js"
         },
+        "./lib/es/utils/escapeHtml.js": {
+            "types": "./lib/es/utils/escapeHtml.d.ts",
+            "import": "./lib/es/utils/escapeHtml.js",
+            "require": "./lib/cjs/utils/escapeHtml.js"
+        },
+        "./lib/es/utils/escapeHtml": {
+            "types": "./lib/es/utils/escapeHtml.d.ts",
+            "import": "./lib/es/utils/escapeHtml.js",
+            "require": "./lib/cjs/utils/escapeHtml.js"
+        },
+        "./lib/cjs/utils/escapeHtml.js": {
+            "types": "./lib/es/utils/escapeHtml.d.ts",
+            "import": "./lib/es/utils/escapeHtml.js",
+            "require": "./lib/cjs/utils/escapeHtml.js"
+        },
+        "./lib/cjs/utils/escapeHtml": {
+            "types": "./lib/es/utils/escapeHtml.d.ts",
+            "import": "./lib/es/utils/escapeHtml.js",
+            "require": "./lib/cjs/utils/escapeHtml.js"
+        },
+        "./utils/escapeHtml.js": {
+            "types": "./lib/es/utils/escapeHtml.d.ts",
+            "import": "./lib/es/utils/escapeHtml.js",
+            "require": "./lib/cjs/utils/escapeHtml.js"
+        },
+        "./utils/escapeHtml": {
+            "types": "./lib/es/utils/escapeHtml.d.ts",
+            "import": "./lib/es/utils/escapeHtml.js",
+            "require": "./lib/cjs/utils/escapeHtml.js"
+        },
         "./lib/es/utils/function.js": {
             "types": "./lib/es/utils/function.d.ts",
             "import": "./lib/es/utils/function.js",
@@ -14180,8 +14210,8 @@
         }
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.93.0",
-        "@douyinfe/semi-json-viewer-core": "2.93.0",
+        "@douyinfe/semi-animation": "2.94.1",
+        "@douyinfe/semi-json-viewer-core": "2.94.1",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -14189,7 +14219,7 @@
         "date-fns-tz": "^1.3.8",
         "fast-copy": "^3.0.1 ",
         "lodash": "^4.17.21",
-        "lottie-web": "^5.12.2",
+        "lottie-web": "^5.13.0",
         "memoize-one": "^5.2.1",
         "prismjs": "^1.29.0",
         "remark-gfm": "^4.0.0",
@@ -14202,7 +14232,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "e1959fe97f095b4b92f9a6c9a96afd83f2b60487",
+    "gitHead": "9d324c236709af72bc2b18166bcc738b3d7f9d91",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/pagination/foundation.ts

@@ -64,7 +64,10 @@ class PaginationFoundation<P = Record<string, any>, S = Record<string, any>> ext
             prevIsDisabled = false;
             nextIsDisabled = true;
         }
-        this._adapter.setDisabled(prevIsDisabled, nextIsDisabled);
+        const { prevDisabled: currentPrevDisabled, nextDisabled: currentNextDisabled } = this.getStates();
+        if (prevIsDisabled !== currentPrevDisabled || nextIsDisabled !== currentNextDisabled) {
+            this._adapter.setDisabled(prevIsDisabled, nextIsDisabled);
+        }
     }
 
     goPage(targetPageIndex: number | '...') {
@@ -98,9 +101,17 @@ class PaginationFoundation<P = Record<string, any>, S = Record<string, any>> ext
         }
         this._updateDisabled({ currentPage: targetPageIndex, total, pageSize });
         this._updatePageList({ currentPage: targetPageIndex, total, pageSize });
-        this._adapter.updateTotal(total);
-        this._adapter.setCurrentPage(targetPageIndex);
-        this._adapter.updatePageSize(pageSize);
+        // Only call setState when value actually changed to avoid unnecessary re-renders
+        // that can cause infinite loops in React 18's concurrent batching
+        if (total !== this.getState('total')) {
+            this._adapter.updateTotal(total);
+        }
+        if (targetPageIndex !== this.getState('currentPage')) {
+            this._adapter.setCurrentPage(targetPageIndex);
+        }
+        if (pageSize !== this.getState('pageSize')) {
+            this._adapter.updatePageSize(pageSize);
+        }
     }
 
     updateAllPageNumbers(total: number, pageSize: number) {
@@ -203,9 +214,16 @@ class PaginationFoundation<P = Record<string, any>, S = Record<string, any>> ext
         this._adapter.notifyPageSizeChange(newPageSize);
         const { total, currentPage } = this.getStates();
 
-        // After converting the switching page capacity, which page is the current page
-        const currentPageFirstItemIndex = (currentPage - 1) * pageSize + 1;
-        const newCurrentPage = Math.ceil(currentPageFirstItemIndex / newPageSize);
+        // Check if we should prevent page change when pageSize changes
+        const { preventPageChangeOnPageSizeChange } = this.getProps();
+        
+        let newCurrentPage = currentPage;
+        if (!preventPageChangeOnPageSizeChange) {
+            // After converting the switching page capacity, which page is the current page
+            const currentPageFirstItemIndex = (currentPage - 1) * pageSize + 1;
+            newCurrentPage = Math.ceil(currentPageFirstItemIndex / newPageSize);
+        }
+        
         this.updatePage(newCurrentPage, total, newPageSize);
         if (currentPage !== newCurrentPage) {
             this._adapter.notifyPageChange(newCurrentPage);

package/pincode/foundation.ts

@@ -5,7 +5,7 @@ export interface PinCodeBaseProps {
     disabled?: boolean;
     value?: string;
     format?: "number" | "mixed" | RegExp | ((value: string) => boolean);
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
     defaultValue?: string;
     count?: number;
     autoFocus?: boolean;

package/resizable/variables.scss

@@ -1,5 +1,5 @@
-$z-resizable_handler: 2000 !default; // 伸缩框组件中handler的z-index
-$z-resizable_background: 2010; // 伸缩框组件中背景的z-index
+$z-resizable_handler: 10 !default; // 伸缩框组件中handler的z-index，保持较低层级避免覆盖弹出层组件
+$z-resizable_background: 20; // 伸缩框组件中背景的z-index，保持略高于handler
 
 $height-row-handler: 10px; // 单个伸缩框中上下handler的高度
 $width-col-handler: 10px;  // 单个伸缩框中左右handler的宽度

package/select/foundation.ts

@@ -81,21 +81,32 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
         const autoFocus = this.getProp('autoFocus');
         if (autoFocus) {
-            this.focus();
+            this.focus(originalOptions);
         }
     }
 
-    focus() {
+    focus(optionsForOpen?: BasicOptionProps[]) {
         const isFilterable = this._isFilterable();
         const isMultiple = this._isMultiple();
+        const { isOpen } = this.getStates();
+
         this._adapter.updateFocusState(true);
         this._adapter.setIsFocusInContainer(false);
-        if (isFilterable && isMultiple) {
-            // when filter and multiple, only focus input
-            this.focusInput();
-        } else if (isFilterable && !isMultiple) {
-            // when filter and not multiple, only show input and focus input
-            this.toggle2SearchInput(true);
+
+        if (isFilterable) {
+            if (isMultiple) {
+                // when filter and multiple, focus input and open dropdown
+                this.focusInput();
+                if (!isOpen) {
+                    this.open(undefined, optionsForOpen);
+                }
+            } else {
+                // when filter and not multiple, show input, focus it and open dropdown
+                this.toggle2SearchInput(true);
+                if (!isOpen) {
+                    this.open(undefined, optionsForOpen);
+                }
+            }
         } else {
             this._focusTrigger();
         }

package/steps/bacisSteps.scss

@@ -69,11 +69,17 @@ $basicType: #{$module}-basic;
 
             .#{$item}-title {
                 max-width: $width-steps_basic_item_title-maxWidth;
+                min-height: $height-steps_basic_item_left-icon;
+                display: inline-flex;
+                align-items: center;
                 
                 .#{$item}-title-text {
                     @include text-overflow-hidden;
-                    transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
-                       
+                    transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text;
+
+                    &-empty {
+                        width: 0;
+                    }
                 }
             }