@douyinfe/semi-ui 2.42.2 → 2.42.4

package/lib/cjs/dropdown/dropdownItem.js

@@ -44,7 +44,11 @@ class DropdownItem extends _baseComponent.default {
     const events = {};
     if (!disabled) {
       ['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
-        events[eventName] = this.props[eventName];
+        if (eventName === "onClick") {
+          events["onMouseDown"] = this.props[eventName];
+        } else {
+          events[eventName] = this.props[eventName];
+        }
       });
     }
     let tick = null;

package/lib/cjs/table/Body/BaseRow.js

@@ -66,14 +66,14 @@ class TableRow extends _baseComponent.default {
     this.handleMouseEnter = e => {
       this.foundation.handleMouseEnter(e);
       const customRowProps = this.adapter.getCache('customRowProps');
-      if (typeof customRowProps.onMouseEnter === 'function') {
+      if (typeof (customRowProps === null || customRowProps === void 0 ? void 0 : customRowProps.onMouseEnter) === 'function') {
         customRowProps.onMouseEnter(e);
       }
     };
     this.handleMouseLeave = e => {
       this.foundation.handleMouseLeave(e);
       const customRowProps = this.adapter.getCache('customRowProps');
-      if (typeof customRowProps.onMouseLeave === 'function') {
+      if (typeof (customRowProps === null || customRowProps === void 0 ? void 0 : customRowProps.onMouseLeave) === 'function') {
         customRowProps.onMouseLeave(e);
       }
     };

package/lib/cjs/table/ResizableTable.js

@@ -123,20 +123,25 @@ const ResizableTable = function () {
   };
   const resizableRender = function (col, index) {
     let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let originalHeaderCellProps = arguments.length > 3 ? arguments[3] : undefined;
     return Object.assign(Object.assign({}, col), {
-      onHeaderCell: column => ({
-        width: column.width,
-        onResize: handleResize(column),
-        onResizeStart: handleResizeStart(column),
-        onResizeStop: handleResizeStop(column)
-      })
+      onHeaderCell: column => {
+        return Object.assign(Object.assign({}, originalHeaderCellProps), {
+          width: column.width,
+          onResize: handleResize(column),
+          onResizeStart: handleResizeStart(column),
+          onResizeStop: handleResizeStop(column)
+        });
+      }
     });
   };
   const assignResizableRender = function () {
     let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     return Array.isArray(columns) && columns.length ? columns.map((col, index) => {
-      Object.assign(col, resizableRender(col, index, level));
+      var _a, _b;
+      const originalHeaderCellProps = (_b = (_a = col.onHeaderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, index, level)) !== null && _b !== void 0 ? _b : {};
+      Object.assign(col, resizableRender(col, index, level, originalHeaderCellProps));
       const children = col[childrenColumnName];
       if (Array.isArray(children) && children.length) {
         col[childrenColumnName] = assignResizableRender(children, level + 1);

package/lib/cjs/typography/base.d.ts

@@ -8,6 +8,27 @@ export interface BaseTypographyProps extends BaseProps {
     delete?: boolean;
     disabled?: boolean;
     icon?: React.ReactNode;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     mark?: boolean;
     underline?: boolean;
@@ -125,8 +146,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
      * 获取文本的缩略class和style
      *
      * 截断类型：
-     *  - CSS 截断，仅在 rows=1 且没有 expandable、pos、suffix 时生效
-     *  - JS 截断，应对 CSS 无法阶段的场景
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - 非以上场景，启用 CSS 截断策略
      * 相关变量
      *  props:
      *      - ellipsis:
@@ -142,8 +163,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
      * Get the abbreviated class and style of the text
      *
      * Truncation type:
-     *  -CSS truncation, which only takes effect when rows = 1 and there is no expandable, pos, suffix
-     *  -JS truncation, dealing with scenarios where CSS cannot stage
+     *  -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
+     *  -Otherwise, enable the CSS ellipsis strategy
      * related variables
      *  props:
      *      -ellipsis:

package/lib/cjs/typography/base.js

@@ -218,8 +218,8 @@ class Base extends _react.Component {
      * 获取文本的缩略class和style
      *
      * 截断类型：
-     *  - CSS 截断，仅在 rows=1 且没有 expandable、pos、suffix 时生效
-     *  - JS 截断，应对 CSS 无法阶段的场景
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - 非以上场景，启用 CSS 截断策略
      * 相关变量
      *  props:
      *      - ellipsis:
@@ -235,8 +235,8 @@ class Base extends _react.Component {
      * Get the abbreviated class and style of the text
      *
      * Truncation type:
-     *  -CSS truncation, which only takes effect when rows = 1 and there is no expandable, pos, suffix
-     *  -JS truncation, dealing with scenarios where CSS cannot stage
+     *  -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
+     *  -Otherwise, enable the CSS ellipsis strategy
      * related variables
      *  props:
      *      -ellipsis:

package/lib/cjs/typography/paragraph.d.ts

@@ -9,6 +9,27 @@ export interface ParagraphProps extends Omit<React.HTMLAttributes<HTMLParagraphE
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
     disabled?: boolean;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     link?: LinkType;
     mark?: boolean;

package/lib/cjs/typography/text.d.ts

@@ -11,6 +11,27 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, O
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
     disabled?: boolean;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     icon?: React.ReactNode | string;
     link?: LinkType;

package/lib/cjs/typography/title.d.ts

@@ -18,6 +18,27 @@ export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
     disabled?: boolean;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     heading?: ArrayElement<typeof strings.HEADING>;
     link?: LinkType;

package/lib/es/dropdown/dropdownItem.js

@@ -37,7 +37,11 @@ class DropdownItem extends BaseComponent {
     const events = {};
     if (!disabled) {
       ['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
-        events[eventName] = this.props[eventName];
+        if (eventName === "onClick") {
+          events["onMouseDown"] = this.props[eventName];
+        } else {
+          events[eventName] = this.props[eventName];
+        }
       });
     }
     let tick = null;

package/lib/es/table/Body/BaseRow.js

@@ -57,14 +57,14 @@ export default class TableRow extends BaseComponent {
     this.handleMouseEnter = e => {
       this.foundation.handleMouseEnter(e);
       const customRowProps = this.adapter.getCache('customRowProps');
-      if (typeof customRowProps.onMouseEnter === 'function') {
+      if (typeof (customRowProps === null || customRowProps === void 0 ? void 0 : customRowProps.onMouseEnter) === 'function') {
         customRowProps.onMouseEnter(e);
       }
     };
     this.handleMouseLeave = e => {
       this.foundation.handleMouseLeave(e);
       const customRowProps = this.adapter.getCache('customRowProps');
-      if (typeof customRowProps.onMouseLeave === 'function') {
+      if (typeof (customRowProps === null || customRowProps === void 0 ? void 0 : customRowProps.onMouseLeave) === 'function') {
         customRowProps.onMouseLeave(e);
       }
     };

package/lib/es/table/ResizableTable.js

@@ -113,20 +113,25 @@ const ResizableTable = function () {
   };
   const resizableRender = function (col, index) {
     let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let originalHeaderCellProps = arguments.length > 3 ? arguments[3] : undefined;
     return Object.assign(Object.assign({}, col), {
-      onHeaderCell: column => ({
-        width: column.width,
-        onResize: handleResize(column),
-        onResizeStart: handleResizeStart(column),
-        onResizeStop: handleResizeStop(column)
-      })
+      onHeaderCell: column => {
+        return Object.assign(Object.assign({}, originalHeaderCellProps), {
+          width: column.width,
+          onResize: handleResize(column),
+          onResizeStart: handleResizeStart(column),
+          onResizeStop: handleResizeStop(column)
+        });
+      }
     });
   };
   const assignResizableRender = function () {
     let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     return Array.isArray(columns) && columns.length ? columns.map((col, index) => {
-      Object.assign(col, resizableRender(col, index, level));
+      var _a, _b;
+      const originalHeaderCellProps = (_b = (_a = col.onHeaderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, index, level)) !== null && _b !== void 0 ? _b : {};
+      Object.assign(col, resizableRender(col, index, level, originalHeaderCellProps));
       const children = col[childrenColumnName];
       if (Array.isArray(children) && children.length) {
         col[childrenColumnName] = assignResizableRender(children, level + 1);

package/lib/es/typography/base.d.ts

@@ -8,6 +8,27 @@ export interface BaseTypographyProps extends BaseProps {
     delete?: boolean;
     disabled?: boolean;
     icon?: React.ReactNode;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     mark?: boolean;
     underline?: boolean;
@@ -125,8 +146,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
      * 获取文本的缩略class和style
      *
      * 截断类型：
-     *  - CSS 截断，仅在 rows=1 且没有 expandable、pos、suffix 时生效
-     *  - JS 截断，应对 CSS 无法阶段的场景
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - 非以上场景，启用 CSS 截断策略
      * 相关变量
      *  props:
      *      - ellipsis:
@@ -142,8 +163,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
      * Get the abbreviated class and style of the text
      *
      * Truncation type:
-     *  -CSS truncation, which only takes effect when rows = 1 and there is no expandable, pos, suffix
-     *  -JS truncation, dealing with scenarios where CSS cannot stage
+     *  -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
+     *  -Otherwise, enable the CSS ellipsis strategy
      * related variables
      *  props:
      *      -ellipsis:

package/lib/es/typography/base.js

@@ -209,8 +209,8 @@ export default class Base extends Component {
      * 获取文本的缩略class和style
      *
      * 截断类型：
-     *  - CSS 截断，仅在 rows=1 且没有 expandable、pos、suffix 时生效
-     *  - JS 截断，应对 CSS 无法阶段的场景
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - 非以上场景，启用 CSS 截断策略
      * 相关变量
      *  props:
      *      - ellipsis:
@@ -226,8 +226,8 @@ export default class Base extends Component {
      * Get the abbreviated class and style of the text
      *
      * Truncation type:
-     *  -CSS truncation, which only takes effect when rows = 1 and there is no expandable, pos, suffix
-     *  -JS truncation, dealing with scenarios where CSS cannot stage
+     *  -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
+     *  -Otherwise, enable the CSS ellipsis strategy
      * related variables
      *  props:
      *      -ellipsis:

package/lib/es/typography/paragraph.d.ts

@@ -9,6 +9,27 @@ export interface ParagraphProps extends Omit<React.HTMLAttributes<HTMLParagraphE
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
     disabled?: boolean;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     link?: LinkType;
     mark?: boolean;

package/lib/es/typography/text.d.ts

@@ -11,6 +11,27 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, O
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
     disabled?: boolean;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     icon?: React.ReactNode | string;
     link?: LinkType;

package/lib/es/typography/title.d.ts

@@ -18,6 +18,27 @@ export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
     disabled?: boolean;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     heading?: ArrayElement<typeof strings.HEADING>;
     link?: LinkType;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.42.2",
+    "version": "2.42.4",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.42.2",
-        "@douyinfe/semi-animation-react": "2.42.2",
-        "@douyinfe/semi-foundation": "2.42.2",
-        "@douyinfe/semi-icons": "2.42.2",
-        "@douyinfe/semi-illustrations": "2.42.2",
-        "@douyinfe/semi-theme-default": "2.42.2",
+        "@douyinfe/semi-animation": "2.42.4",
+        "@douyinfe/semi-animation-react": "2.42.4",
+        "@douyinfe/semi-foundation": "2.42.4",
+        "@douyinfe/semi-icons": "2.42.4",
+        "@douyinfe/semi-illustrations": "2.42.4",
+        "@douyinfe/semi-theme-default": "2.42.4",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "b3f0c8dcfe99018798e64505557fdc5cf3ccf4c3",
+    "gitHead": "97b2682be0dc724811ddb918f36415692a23c89f",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",