@douyinfe/semi-foundation 2.89.0-beta.0 → 2.90.0-beta.0

package/aiChatDialogue/foundation.ts

@@ -3,6 +3,9 @@ import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 import { getUuidv4 } from "../utils/uuid";
 import { strings } from "./constants";
 import { Animation } from '@douyinfe/semi-animation';
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 
 export interface DialogueAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getContainerRef: () => HTMLDivElement;

package/chat/foundation.ts

@@ -4,6 +4,10 @@ import { Animation } from '@douyinfe/semi-animation';
 import { debounce } from "lodash";
 import { getUuidv4 } from "../utils/uuid";
 import { handlePrevent } from "../utils/a11y";
+// code's default height type is html/js/css, add jsx & tsx;
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 
 const { PIC_PREFIX, PIC_SUFFIX_ARRAY, ROLE,
     SCROLL_ANIMATION_TIME, SHOW_SCROLL_GAP

package/chat/inputboxFoundation.ts

@@ -60,7 +60,12 @@ export default class InputBoxFoundation <P = Record<string, any>, S = Record<str
 
     getDisableSend = () => {
         const { content, attachment } = this.getStates();
-        const { disableSend: disableSendInProps } = this.getProps();
+        const { disableSend: disableSendInProps, canSend } = this.getProps();
+        // 如果用户设置了 canSend API，则使用 canSend 值
+        // If the user has configured the canSend API, then the canSend value will be used.
+        if (typeof canSend === 'boolean') {
+            return !canSend;
+        }
         /** 不能发送的条件：（满足任1）
          *  1. props 中禁止发送；2. 没有文本输入，且没有上传文件； 3.上传文件中有状态不为 success 的
          *  Conditions under which content cannot be sent: (any one of the following conditions must be met)

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

@@ -1,5 +1,8 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export interface DialogueAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getContainerRef: () => HTMLDivElement;
     setWheelScroll: (flag: boolean) => void;

package/lib/cjs/aiChatDialogue/foundation.js

@@ -9,6 +9,9 @@ var _foundation = _interopRequireDefault(require("../base/foundation"));
 var _uuid = require("../utils/uuid");
 var _constants = require("./constants");
 var _semiAnimation = require("@douyinfe/semi-animation");
+require("prismjs");
+require("prismjs/components/prism-jsx.js");
+require("prismjs/components/prism-tsx.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class DialogueFoundation extends _foundation.default {
   constructor(adapter) {

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

@@ -1,5 +1,8 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export interface Content {
     type: 'text' | 'image_url' | 'file_url';
     text?: string;

package/lib/cjs/chat/foundation.js

@@ -10,7 +10,12 @@ var _constants = require("./constants");
 var _semiAnimation = require("@douyinfe/semi-animation");
 var _uuid = require("../utils/uuid");
 var _a11y = require("../utils/a11y");
+require("prismjs");
+require("prismjs/components/prism-jsx.js");
+require("prismjs/components/prism-tsx.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// code's default height type is html/js/css, add jsx & tsx;
+
 const {
   PIC_PREFIX,
   PIC_SUFFIX_ARRAY,

package/lib/cjs/chat/inputboxFoundation.js

@@ -75,8 +75,14 @@ class InputBoxFoundation extends _foundation.default {
         attachment
       } = this.getStates();
       const {
-        disableSend: disableSendInProps
+        disableSend: disableSendInProps,
+        canSend
       } = this.getProps();
+      // 如果用户设置了 canSend API，则使用 canSend 值
+      // If the user has configured the canSend API, then the canSend value will be used.
+      if (typeof canSend === 'boolean') {
+        return !canSend;
+      }
       /** 不能发送的条件：（满足任1）
        *  1. props 中禁止发送；2. 没有文本输入，且没有上传文件； 3.上传文件中有状态不为 success 的
        *  Conditions under which content cannot be sent: (any one of the following conditions must be met)

package/lib/cjs/table/table.css

@@ -388,36 +388,41 @@
 .semi-table .semi-table-column-filter.on {
   color: var(--semi-color-primary);
 }
-.semi-table-bordered .semi-table-title {
+.semi-table-bordered > .semi-table-title {
   padding-left: 16px;
   padding-right: 16px;
   border-top: 1px solid var(--semi-color-border);
   border-right: 1px solid var(--semi-color-border);
   border-left: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-container {
+.semi-table-bordered > .semi-table-container {
   border: 1px solid var(--semi-color-border);
   border-right: 0;
   border-bottom: 0;
 }
-.semi-table-bordered .semi-table-header::-webkit-scrollbar {
+:where(.semi-table-bordered) > .semi-table-container > .semi-table-header::-webkit-scrollbar {
   border-right: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-footer {
+:where(.semi-table-bordered) > .semi-table-container > .semi-table-footer {
   border-left: 1px solid var(--semi-color-border);
   border-right: 1px solid var(--semi-color-border);
   border-bottom: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
+:where(.semi-table-bordered > .semi-table-container) > .semi-table-body > .semi-table-placeholder {
+  border-right: 1px solid var(--semi-color-border);
+}
+:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
   background-color: transparent;
 }
-.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
-.semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
+:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head, :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   border-right: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-placeholder {
+:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head {
   border-right: 1px solid var(--semi-color-border);
 }
+:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
+  background-color: transparent;
+}
 .semi-table-placeholder {
   position: sticky;
   left: 0px;

package/lib/cjs/table/table.scss

@@ -508,7 +508,7 @@ $module: #{$prefix}-table;
     }
 
     &-bordered {
-        .#{$module}-title {
+        & > .#{$module}-title {
             padding-left: $spacing-table_bordered_titler-paddingLeft;
             padding-right: $spacing-table_bordered_titler-paddingRight;
             border-top: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -516,37 +516,55 @@ $module: #{$prefix}-table;
             border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
         }
 
-        .#{$module}-container {
+        & > .#{$module}-container {
             border: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
             border-right: 0;
             border-bottom: 0;
         }
 
-        .#{$module}-header {
-            &::-webkit-scrollbar {
-                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(&) {
+            & > .#{$module}-container {
+                & >  .#{$module}-header {
+                    &::-webkit-scrollbar {
+                        border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    }
+                }
+
+                & > .#{$module}-footer {
+                    border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                }
             }
         }
 
-        .#{$module}-footer {
-            border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container) {
+            & > .#{$module}-body > .#{$module}-placeholder {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-            .react-resizable-handle {
-                background-color: transparent;
+        :where(& > .#{$module}-container > .#{$module}-body) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
             }
-        }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
-        .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+            & > .#{$module} > .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-placeholder {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container > .#{$module}-header) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
+            }
         }
     }
 

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

@@ -33,6 +33,7 @@ declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
      */
     handleInputChange: (e: TagInputChangeEvent) => void;
     handleInputCompositionStart: (e: any) => void;
+    _splitArray: (originString: string, separators: string | string[] | null) => any;
     handleInputCompositionEnd: (e: any) => void;
     /**
      * check whether the input change is legal

package/lib/cjs/tagInput/foundation.js

@@ -49,6 +49,15 @@ class TagInputFoundation extends _foundation.default {
       }
       this._adapter.setEntering(true);
     };
+    this._splitArray = (originString, separators) => {
+      const {
+        split
+      } = this.getProps();
+      if ((0, _isFunction2.default)(split)) {
+        return split(originString, separators);
+      }
+      return (0, _getSplitedArray.default)(originString, separators);
+    };
     this.handleInputCompositionEnd = e => {
       const {
         value
@@ -63,7 +72,7 @@ class TagInputFoundation extends _foundation.default {
       }
       this._adapter.setEntering(false);
       let allowChange = true;
-      const inputArr = (0, _getSplitedArray.default)(value, separator);
+      const inputArr = this._splitArray(value, separator);
       let index = 0;
       for (; index < inputArr.length; index++) {
         if (inputArr[index].length > maxLength) {
@@ -100,8 +109,8 @@ class TagInputFoundation extends _foundation.default {
       } = this._adapter.getStates();
       let allowChange = true;
       if ((0, _isNumber2.default)(maxLength)) {
-        const valueArr = (0, _getSplitedArray.default)(value, separator);
-        const inputArr = (0, _getSplitedArray.default)(inputValue, separator);
+        const valueArr = this._splitArray(value, separator);
+        const inputArr = this._splitArray(inputValue, separator);
         const maxLen = Math.max(valueArr.length, inputArr.length);
         for (let i = 0; i < maxLen; i++) {
           // When the input length is increasing
@@ -154,7 +163,7 @@ class TagInputFoundation extends _foundation.default {
       inputValue,
       tagsArray
     } = this._adapter.getStates();
-    let addTags = (0, _getSplitedArray.default)(inputValue, separator);
+    let addTags = this._splitArray(inputValue, separator);
     addTags = addTags.filter((item, idx) => {
       // If allowDuplicates is false, then filter duplicates
       if (!allowDuplicates) {

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

@@ -40,6 +40,8 @@ export default class VideoPlayerFoundation<P = Record<string, any>, S = Record<s
     handlePlayOrPause(): void;
     handlePlay(): void;
     handlePause(): void;
+    handleVideoPlay: () => void;
+    handleVideoPause: () => void;
     handleCanPlay: () => void;
     handleWaiting: (locale: any) => void;
     handleStalled: (locale: any) => void;

package/lib/cjs/videoPlayer/foundation.js

@@ -18,6 +18,14 @@ class VideoPlayerFoundation extends _foundation.default {
         this._adapter.setShowControls(false);
       }, 3000);
     }, 200);
+    this.handleVideoPlay = () => {
+      this._adapter.setIsPlaying(true);
+      this._adapter.notifyPlay();
+    };
+    this.handleVideoPause = () => {
+      this._adapter.setIsPlaying(false);
+      this._adapter.notifyPause();
+    };
     this.handleCanPlay = () => {
       this._adapter.setShowNotification(false);
     };
@@ -197,17 +205,17 @@ class VideoPlayerFoundation extends _foundation.default {
   handlePlay() {
     const video = this._adapter.getVideo();
     if (video) {
+      // 触发原生 onPlay 后通过 handleVideoPlay 更新 isPlaying 状态
+      // After triggering the native onPlay, the isPlaying state is updated via handleVideoPlay.
       video.play();
-      this._adapter.setIsPlaying(true);
-      this._adapter.notifyPlay();
     }
   }
   handlePause() {
     const video = this._adapter.getVideo();
     if (video) {
+      // 触发原生 onPause 后通过 handleVideoPause 更新 isPlaying 状态
+      // After triggering the native onPause, the isPlaying state is updated via handleVideoPause.
       video.pause();
-      this._adapter.setIsPlaying(false);
-      this._adapter.notifyPause();
     }
   }
   handleVolumeChange(value) {

package/lib/es/aiChatDialogue/foundation.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export interface DialogueAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getContainerRef: () => HTMLDivElement;
     setWheelScroll: (flag: boolean) => void;

package/lib/es/aiChatDialogue/foundation.js

@@ -3,6 +3,9 @@ import BaseFoundation from "../base/foundation";
 import { getUuidv4 } from "../utils/uuid";
 import { strings } from "./constants";
 import { Animation } from '@douyinfe/semi-animation';
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export default class DialogueFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));

package/lib/es/chat/foundation.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export interface Content {
     type: 'text' | 'image_url' | 'file_url';
     text?: string;

package/lib/es/chat/foundation.js

@@ -4,6 +4,10 @@ import { strings } from "./constants";
 import { Animation } from '@douyinfe/semi-animation';
 import { getUuidv4 } from "../utils/uuid";
 import { handlePrevent } from "../utils/a11y";
+// code's default height type is html/js/css, add jsx & tsx;
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 const {
   PIC_PREFIX,
   PIC_SUFFIX_ARRAY,

package/lib/es/chat/inputboxFoundation.js

@@ -68,8 +68,14 @@ export default class InputBoxFoundation extends BaseFoundation {
         attachment
       } = this.getStates();
       const {
-        disableSend: disableSendInProps
+        disableSend: disableSendInProps,
+        canSend
       } = this.getProps();
+      // 如果用户设置了 canSend API，则使用 canSend 值
+      // If the user has configured the canSend API, then the canSend value will be used.
+      if (typeof canSend === 'boolean') {
+        return !canSend;
+      }
       /** 不能发送的条件：（满足任1）
        *  1. props 中禁止发送；2. 没有文本输入，且没有上传文件； 3.上传文件中有状态不为 success 的
        *  Conditions under which content cannot be sent: (any one of the following conditions must be met)

package/lib/es/table/table.css

@@ -388,36 +388,41 @@
 .semi-table .semi-table-column-filter.on {
   color: var(--semi-color-primary);
 }
-.semi-table-bordered .semi-table-title {
+.semi-table-bordered > .semi-table-title {
   padding-left: 16px;
   padding-right: 16px;
   border-top: 1px solid var(--semi-color-border);
   border-right: 1px solid var(--semi-color-border);
   border-left: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-container {
+.semi-table-bordered > .semi-table-container {
   border: 1px solid var(--semi-color-border);
   border-right: 0;
   border-bottom: 0;
 }
-.semi-table-bordered .semi-table-header::-webkit-scrollbar {
+:where(.semi-table-bordered) > .semi-table-container > .semi-table-header::-webkit-scrollbar {
   border-right: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-footer {
+:where(.semi-table-bordered) > .semi-table-container > .semi-table-footer {
   border-left: 1px solid var(--semi-color-border);
   border-right: 1px solid var(--semi-color-border);
   border-bottom: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
+:where(.semi-table-bordered > .semi-table-container) > .semi-table-body > .semi-table-placeholder {
+  border-right: 1px solid var(--semi-color-border);
+}
+:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
   background-color: transparent;
 }
-.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
-.semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
+:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head, :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   border-right: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-placeholder {
+:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head {
   border-right: 1px solid var(--semi-color-border);
 }
+:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
+  background-color: transparent;
+}
 .semi-table-placeholder {
   position: sticky;
   left: 0px;

package/lib/es/table/table.scss

@@ -508,7 +508,7 @@ $module: #{$prefix}-table;
     }
 
     &-bordered {
-        .#{$module}-title {
+        & > .#{$module}-title {
             padding-left: $spacing-table_bordered_titler-paddingLeft;
             padding-right: $spacing-table_bordered_titler-paddingRight;
             border-top: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -516,37 +516,55 @@ $module: #{$prefix}-table;
             border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
         }
 
-        .#{$module}-container {
+        & > .#{$module}-container {
             border: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
             border-right: 0;
             border-bottom: 0;
         }
 
-        .#{$module}-header {
-            &::-webkit-scrollbar {
-                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(&) {
+            & > .#{$module}-container {
+                & >  .#{$module}-header {
+                    &::-webkit-scrollbar {
+                        border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    }
+                }
+
+                & > .#{$module}-footer {
+                    border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                }
             }
         }
 
-        .#{$module}-footer {
-            border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container) {
+            & > .#{$module}-body > .#{$module}-placeholder {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-            .react-resizable-handle {
-                background-color: transparent;
+        :where(& > .#{$module}-container > .#{$module}-body) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
             }
-        }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
-        .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+            & > .#{$module} > .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-placeholder {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container > .#{$module}-header) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
+            }
         }
     }
 

package/lib/es/tagInput/foundation.d.ts

@@ -33,6 +33,7 @@ declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
      */
     handleInputChange: (e: TagInputChangeEvent) => void;
     handleInputCompositionStart: (e: any) => void;
+    _splitArray: (originString: string, separators: string | string[] | null) => any;
     handleInputCompositionEnd: (e: any) => void;
     /**
      * check whether the input change is legal

package/lib/es/tagInput/foundation.js

@@ -42,6 +42,15 @@ class TagInputFoundation extends BaseFoundation {
       }
       this._adapter.setEntering(true);
     };
+    this._splitArray = (originString, separators) => {
+      const {
+        split
+      } = this.getProps();
+      if (_isFunction(split)) {
+        return split(originString, separators);
+      }
+      return getSplitedArray(originString, separators);
+    };
     this.handleInputCompositionEnd = e => {
       const {
         value
@@ -56,7 +65,7 @@ class TagInputFoundation extends BaseFoundation {
       }
       this._adapter.setEntering(false);
       let allowChange = true;
-      const inputArr = getSplitedArray(value, separator);
+      const inputArr = this._splitArray(value, separator);
       let index = 0;
       for (; index < inputArr.length; index++) {
         if (inputArr[index].length > maxLength) {
@@ -93,8 +102,8 @@ class TagInputFoundation extends BaseFoundation {
       } = this._adapter.getStates();
       let allowChange = true;
       if (_isNumber(maxLength)) {
-        const valueArr = getSplitedArray(value, separator);
-        const inputArr = getSplitedArray(inputValue, separator);
+        const valueArr = this._splitArray(value, separator);
+        const inputArr = this._splitArray(inputValue, separator);
         const maxLen = Math.max(valueArr.length, inputArr.length);
         for (let i = 0; i < maxLen; i++) {
           // When the input length is increasing
@@ -147,7 +156,7 @@ class TagInputFoundation extends BaseFoundation {
       inputValue,
       tagsArray
     } = this._adapter.getStates();
-    let addTags = getSplitedArray(inputValue, separator);
+    let addTags = this._splitArray(inputValue, separator);
     addTags = addTags.filter((item, idx) => {
       // If allowDuplicates is false, then filter duplicates
       if (!allowDuplicates) {

package/lib/es/videoPlayer/foundation.d.ts

@@ -40,6 +40,8 @@ export default class VideoPlayerFoundation<P = Record<string, any>, S = Record<s
     handlePlayOrPause(): void;
     handlePlay(): void;
     handlePause(): void;
+    handleVideoPlay: () => void;
+    handleVideoPause: () => void;
     handleCanPlay: () => void;
     handleWaiting: (locale: any) => void;
     handleStalled: (locale: any) => void;

package/lib/es/videoPlayer/foundation.js

@@ -11,6 +11,14 @@ export default class VideoPlayerFoundation extends BaseFoundation {
         this._adapter.setShowControls(false);
       }, 3000);
     }, 200);
+    this.handleVideoPlay = () => {
+      this._adapter.setIsPlaying(true);
+      this._adapter.notifyPlay();
+    };
+    this.handleVideoPause = () => {
+      this._adapter.setIsPlaying(false);
+      this._adapter.notifyPause();
+    };
     this.handleCanPlay = () => {
       this._adapter.setShowNotification(false);
     };
@@ -190,17 +198,17 @@ export default class VideoPlayerFoundation extends BaseFoundation {
   handlePlay() {
     const video = this._adapter.getVideo();
     if (video) {
+      // 触发原生 onPlay 后通过 handleVideoPlay 更新 isPlaying 状态
+      // After triggering the native onPlay, the isPlaying state is updated via handleVideoPlay.
       video.play();
-      this._adapter.setIsPlaying(true);
-      this._adapter.notifyPlay();
     }
   }
   handlePause() {
     const video = this._adapter.getVideo();
     if (video) {
+      // 触发原生 onPause 后通过 handleVideoPause 更新 isPlaying 状态
+      // After triggering the native onPause, the isPlaying state is updated via handleVideoPause.
       video.pause();
-      this._adapter.setIsPlaying(false);
-      this._adapter.notifyPause();
     }
   }
   handleVolumeChange(value) {

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.89.0-beta.0",
+    "version": "2.90.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.89.0-beta.0",
-        "@douyinfe/semi-json-viewer-core": "2.89.0-beta.0",
+        "@douyinfe/semi-animation": "2.90.0-beta.0",
+        "@douyinfe/semi-json-viewer-core": "2.90.0-beta.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "e0c70c237b5788629d4064ebe4f8d477dc069091",
+    "gitHead": "aa25e1ef1574f7588459cdaadf25a523d6d2f6c5",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/table/table.scss

@@ -508,7 +508,7 @@ $module: #{$prefix}-table;
     }
 
     &-bordered {
-        .#{$module}-title {
+        & > .#{$module}-title {
             padding-left: $spacing-table_bordered_titler-paddingLeft;
             padding-right: $spacing-table_bordered_titler-paddingRight;
             border-top: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -516,37 +516,55 @@ $module: #{$prefix}-table;
             border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
         }
 
-        .#{$module}-container {
+        & > .#{$module}-container {
             border: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
             border-right: 0;
             border-bottom: 0;
         }
 
-        .#{$module}-header {
-            &::-webkit-scrollbar {
-                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(&) {
+            & > .#{$module}-container {
+                & >  .#{$module}-header {
+                    &::-webkit-scrollbar {
+                        border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    }
+                }
+
+                & > .#{$module}-footer {
+                    border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                }
             }
         }
 
-        .#{$module}-footer {
-            border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container) {
+            & > .#{$module}-body > .#{$module}-placeholder {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-            .react-resizable-handle {
-                background-color: transparent;
+        :where(& > .#{$module}-container > .#{$module}-body) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
             }
-        }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
-        .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+            & > .#{$module} > .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-placeholder {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container > .#{$module}-header) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
+            }
         }
     }
 

package/tagInput/foundation.ts

@@ -73,6 +73,14 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         this._adapter.setEntering(true);
     }
 
+    _splitArray = (originString: string, separators: string | string[] | null) => {
+        const { split } = this.getProps();
+        if (isFunction(split)) {
+            return split(originString, separators);
+        }
+        return getSplitedArray(originString, separators);
+    }
+
     handleInputCompositionEnd = (e: any) => {
         const { value } = e.target;
         const {
@@ -85,7 +93,7 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         }
         this._adapter.setEntering(false);
         let allowChange = true;
-        const inputArr = getSplitedArray(value, separator);
+        const inputArr = this._splitArray(value, separator);
         let index = 0;
         for (; index < inputArr.length; index++) {
             if (inputArr[index].length > maxLength) {
@@ -121,8 +129,8 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         const { inputValue } = this._adapter.getStates();
         let allowChange = true;
         if (isNumber(maxLength)) {
-            const valueArr = getSplitedArray(value, separator);
-            const inputArr = getSplitedArray(inputValue, separator);
+            const valueArr = this._splitArray(value, separator);
+            const inputArr = this._splitArray(inputValue, separator);
             const maxLen = Math.max(valueArr.length, inputArr.length);
             for (let i = 0; i < maxLen; i++) {
                 // When the input length is increasing
@@ -174,7 +182,7 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
             inputValue,
             tagsArray
         } = this._adapter.getStates();
-        let addTags = getSplitedArray(inputValue, separator);
+        let addTags = this._splitArray(inputValue, separator);
 
         addTags = addTags.filter((item, idx) => {
             // If allowDuplicates is false, then filter duplicates

package/videoPlayer/foundation.ts

@@ -107,21 +107,31 @@ export default class VideoPlayerFoundation<P = Record<string, any>, S = Record<s
     handlePlay() {
         const video = this._adapter.getVideo();
         if (video) {
+            // 触发原生 onPlay 后通过 handleVideoPlay 更新 isPlaying 状态
+            // After triggering the native onPlay, the isPlaying state is updated via handleVideoPlay.
             video.play();
-            this._adapter.setIsPlaying(true);
-            this._adapter.notifyPlay();
         }
     }
 
     handlePause() {
         const video = this._adapter.getVideo();
         if (video) {
+            // 触发原生 onPause 后通过 handleVideoPause 更新 isPlaying 状态
+            // After triggering the native onPause, the isPlaying state is updated via handleVideoPause.
             video.pause();
-            this._adapter.setIsPlaying(false);
-            this._adapter.notifyPause();
         }
     }
 
+    handleVideoPlay = () => {
+        this._adapter.setIsPlaying(true);
+        this._adapter.notifyPlay();
+    }
+
+    handleVideoPause = () => {
+        this._adapter.setIsPlaying(false);
+        this._adapter.notifyPause();
+    }
+
     handleCanPlay = () => {
         this._adapter.setShowNotification(false);
     }