@douyinfe/semi-ui 2.56.0-alpha.0 → 2.56.0

package/lib/es/locale/source/ro.d.ts

@@ -1,170 +1,3 @@
-/**
- * [i18n-Romanian]
- */
-declare const _default: {
-    code: string;
-    dateFnsLocale: Locale;
-    Pagination: {
-        pageSize: string;
-        total: string;
-        jumpTo: string;
-        page: string;
-    };
-    Modal: {
-        confirm: string;
-        cancel: string;
-    };
-    TimePicker: {
-        placeholder: {
-            time: string;
-            timeRange: string;
-        };
-        begin: string;
-        end: string;
-        hour: string;
-        minute: string;
-        second: string;
-        AM: string;
-        PM: string;
-    };
-    DatePicker: {
-        placeholder: {
-            date: string;
-            dateTime: string;
-            dateRange: string[];
-            dateTimeRange: string[];
-            monthRange: string[];
-        };
-        presets: string;
-        footer: {
-            confirm: string;
-            cancel: string;
-        };
-        selectDate: string;
-        selectTime: string;
-        year: string;
-        month: string;
-        day: string;
-        monthText: string;
-        months: {
-            1: string;
-            2: string;
-            3: string;
-            4: string;
-            5: string;
-            6: string;
-            7: string;
-            8: string;
-            9: string;
-            10: string;
-            11: string;
-            12: string;
-        };
-        fullMonths: {
-            1: string;
-            2: string;
-            3: string;
-            4: string;
-            5: string;
-            6: string;
-            7: string;
-            8: string;
-            9: string;
-            10: string;
-            11: string;
-            12: string;
-        };
-        weeks: {
-            Mon: string;
-            Tue: string;
-            Wed: string;
-            Thu: string;
-            Fri: string;
-            Sat: string;
-            Sun: string;
-        };
-        localeFormatToken: {
-            FORMAT_SWITCH_DATE: string;
-        };
-    };
-    Popconfirm: {
-        confirm: string;
-        cancel: string;
-    };
-    Navigation: {
-        collapseText: string;
-        expandText: string;
-    };
-    Table: {
-        emptyText: string;
-        pageText: string;
-    };
-    Select: {
-        emptyText: string;
-        createText: string;
-    };
-    Tree: {
-        emptyText: string;
-    };
-    Cascader: {
-        emptyText: string;
-    };
-    List: {
-        emptyText: string;
-    };
-    Calendar: {
-        allDay: string;
-        AM: string;
-        PM: string;
-        datestring: string;
-        remaining: string;
-    };
-    Upload: {
-        mainText: string;
-        illegalTips: string;
-        legalTips: string;
-        retry: string;
-        replace: string;
-        clear: string;
-        selectedFiles: string;
-        illegalSize: string;
-        fail: string;
-    };
-    TreeSelect: {
-        searchPlaceholder: string;
-    };
-    Typography: {
-        copy: string;
-        copied: string;
-        expand: string;
-        collapse: string;
-    };
-    Transfer: {
-        emptyLeft: string;
-        emptySearch: string;
-        emptyRight: string;
-        placeholder: string;
-        clear: string;
-        selectAll: string;
-        clearSelectAll: string;
-        total: string;
-        selected: string;
-    };
-    Form: {
-        optional: string;
-    };
-    Image: {
-        preview: string;
-        loading: string;
-        loadError: string;
-        prevTip: string;
-        nextTip: string;
-        zoomInTip: string;
-        zoomOutTip: string;
-        rotateTip: string;
-        downloadTip: string;
-        adaptiveTip: string;
-        originTip: string;
-    };
-};
-export default _default;
+import { Locale } from '../interface';
+declare const local: Locale;
+export default local;

package/lib/es/locale/source/ro.js

@@ -1,8 +1,5 @@
 import { ro } from 'date-fns/locale';
-/**
- * [i18n-Romanian]
- */
-export default {
+const local = {
   code: 'ro',
   dateFnsLocale: ro,
   Pagination: {
@@ -105,7 +102,8 @@ export default {
     createText: 'Creează'
   },
   Tree: {
-    emptyText: 'Nici un rezultat'
+    emptyText: 'Nici un rezultat',
+    searchPlaceholder: 'Căutare'
   },
   Cascader: {
     emptyText: 'Nici un rezultat'
@@ -167,4 +165,6 @@ export default {
     adaptiveTip: 'Afișaj adaptabil',
     originTip: 'Afișaj implicit'
   }
-};
+};
+// [i18n-Romanian] 罗马尼亚语
+export default local;

package/lib/es/modal/confirm.d.ts

@@ -143,19 +143,19 @@ export declare function withWarning(props: ModalReactProps): {
     type: "warning";
 };
 export declare function withError(props: ModalReactProps): {
+    title?: React.ReactNode;
     children?: React.ReactNode;
+    size?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").Size;
+    style?: React.CSSProperties;
+    className?: string;
+    motion?: boolean;
+    getPopupContainer?: () => HTMLElement;
     footer?: React.ReactNode;
     header?: React.ReactNode;
-    style?: React.CSSProperties;
-    title?: React.ReactNode;
+    direction?: any;
     mask?: boolean;
     visible?: boolean;
-    className?: string;
     zIndex?: number;
-    getPopupContainer?: () => HTMLElement;
-    direction?: any;
-    size?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").Size;
-    motion?: boolean;
     width?: string | number;
     height?: string | number;
     content?: React.ReactNode;
@@ -205,6 +205,13 @@ export declare function withError(props: ModalReactProps): {
         onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
         'aria-label'?: string;
+        title?: string;
+        name?: string;
+        value?: string | number | readonly string[];
+        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
+        form?: string;
+        slot?: string;
         prefix?: string;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
@@ -359,17 +366,12 @@ export declare function withError(props: ModalReactProps): {
         onScrollCapture?: React.UIEventHandler<HTMLButtonElement>;
         onWheel?: React.WheelEventHandler<HTMLButtonElement>;
         onWheelCapture?: React.WheelEventHandler<HTMLButtonElement>;
-        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
         onAnimationStartCapture?: React.AnimationEventHandler<HTMLButtonElement>;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement>;
         onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement>;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement>;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement>;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement>;
-        form?: string;
-        slot?: string;
-        title?: string;
         hidden?: boolean;
         color?: string;
         defaultChecked?: boolean;
@@ -378,8 +380,6 @@ export declare function withError(props: ModalReactProps): {
         suppressHydrationWarning?: boolean;
         accessKey?: string;
         autoFocus?: boolean;
-        value?: string | number | readonly string[];
-        name?: string;
         contextMenu?: string;
         dir?: string;
         draggable?: boolean | "true" | "false";
@@ -387,7 +387,7 @@ export declare function withError(props: ModalReactProps): {
         translate?: "no" | "yes";
         role?: React.AriaRole;
         contentEditable?: "inherit" | (boolean | "true" | "false");
-        inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal";
+        inputMode?: "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal";
         nonce?: string;
         tabIndex?: number;
         content?: string;
@@ -421,7 +421,7 @@ export declare function withError(props: ModalReactProps): {
         is?: string;
         'aria-activedescendant'?: string;
         'aria-atomic'?: boolean | "true" | "false";
-        'aria-autocomplete'?: "none" | "list" | "both" | "inline";
+        'aria-autocomplete'?: "both" | "none" | "list" | "inline";
         'aria-busy'?: boolean | "true" | "false";
         'aria-checked'?: boolean | "true" | "false" | "mixed";
         'aria-colcount'?: number;

package/lib/es/radio/radio.d.ts

@@ -61,7 +61,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         addonStyle: PropTypes.Requireable<object>;
         addonClassName: PropTypes.Requireable<string>;
-        type: PropTypes.Requireable<"button" | "default" | "card" | "pureCard">;
+        type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         'aria-label': PropTypes.Requireable<string>;
         preventScroll: PropTypes.Requireable<boolean>;
     };

package/lib/es/radio/radioGroup.d.ts

@@ -49,7 +49,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
         buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
-        type: PropTypes.Requireable<"button" | "default" | "card" | "pureCard">;
+        type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/es/rating/index.d.ts

@@ -69,7 +69,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         tooltips: PropTypes.Requireable<string[]>;
         id: PropTypes.Requireable<string>;
         preventScroll: PropTypes.Requireable<boolean>;

package/lib/es/rating/item.d.ts

@@ -40,7 +40,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         disabled: PropTypes.Requireable<boolean>;
         count: PropTypes.Requireable<number>;
         ariaLabelPrefix: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         'aria-describedby': PropTypes.Requireable<string>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/select/index.js

@@ -187,9 +187,9 @@ class Select extends BaseComponent {
           const optionInstance = this.optionsRef && this.optionsRef.current;
           const triggerDom = this.triggerRef && this.triggerRef.current;
           const optionsDom = ReactDOM.findDOMNode(optionInstance);
-          // let isInPanel = optionsDom && optionsDom.contains(e.target);
-          // let isInTrigger = triggerDom && triggerDom.contains(e.target);
-          if (optionsDom && !optionsDom.contains(e.target) && triggerDom && !triggerDom.contains(e.target)) {
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (!(optionsDom && optionsDom.contains(target)) && !(triggerDom && triggerDom.contains(target)) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };

package/lib/es/switch/index.d.ts

@@ -45,7 +45,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         id: PropTypes.Requireable<string>;
     };

package/lib/es/table/Table.d.ts

@@ -60,7 +60,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         components: PropTypes.Requireable<any>;
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "middle" | "default">;
+        size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"center" | "left" | "right">;
@@ -297,7 +297,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showTotal?: boolean;
         pageSize?: number;
         pageSizeOpts?: number[];
-        size?: "small" | "default";
+        size?: "default" | "small";
         currentPage?: number;
         defaultCurrentPage?: number;
         onPageChange?: (currentPage: number) => void;

package/lib/es/table/index.d.ts

@@ -16,7 +16,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
         components: PropTypes.Requireable<any>;
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "middle" | "default">;
+        size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"center" | "left" | "right">;

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

@@ -97,7 +97,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onAdd: PropTypes.Requireable<(...args: any[]) => any>;
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         prefix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         suffix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

package/lib/es/tagInput/index.js

@@ -263,7 +263,8 @@ class TagInput extends BaseComponent {
         const clickOutsideHandler = e => {
           const tagInputDom = this.tagInputRef && this.tagInputRef.current;
           const target = e.target;
-          if (tagInputDom && !tagInputDom.contains(target)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (tagInputDom && !tagInputDom.contains(target) && !path.includes(tagInputDom)) {
             cb(e);
           }
         };

package/lib/es/timePicker/TimePicker.d.ts

@@ -133,7 +133,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         secondStep: PropTypes.Requireable<number>;
         focusOnOpen: PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         stopPropagation: PropTypes.Requireable<boolean>;
         panels: PropTypes.Requireable<PropTypes.InferProps<{
             panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
@@ -193,6 +193,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
     foundation: TimePickerFoundation;
     timePickerRef: React.MutableRefObject<HTMLDivElement>;
     savePanelRef: React.RefObject<HTMLDivElement>;
+    useCustomTrigger: boolean;
     clickOutSideHandler: (e: MouseEvent) => void;
     constructor(props: TimePickerProps);
     get adapter(): TimePickerAdapter<TimePickerProps, TimePickerState>;

package/lib/es/timePicker/TimePicker.js

@@ -85,6 +85,7 @@ export default class TimePicker extends BaseComponent {
     this.foundation = new TimePickerFoundation(this.adapter);
     this.timePickerRef = /*#__PURE__*/React.createRef();
     this.savePanelRef = /*#__PURE__*/React.createRef();
+    this.useCustomTrigger = typeof this.props.triggerRender === 'function';
   }
   get adapter() {
     var _this2 = this;
@@ -100,11 +101,11 @@ export default class TimePicker extends BaseComponent {
         }
         this.clickOutSideHandler = e => {
           const panel = this.savePanelRef && this.savePanelRef.current;
-          const isInPanel = e.target && panel && panel.contains(e.target);
-          const isInTimepicker = this.timePickerRef && this.timePickerRef.current && this.timePickerRef.current.contains(e.target);
-          if (!isInTimepicker && !isInPanel) {
-            const clickedOutside = true;
-            this.foundation.handlePanelClose(clickedOutside, e);
+          const trigger = this.timePickerRef && this.timePickerRef.current;
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (!(panel && panel.contains(target)) && !(trigger && trigger.contains(target)) && !(path.includes(trigger) || path.includes(panel))) {
+            this.foundation.handlePanelClose(true, e);
           }
         };
         document.addEventListener('mousedown', this.clickOutSideHandler);
@@ -268,7 +269,6 @@ export default class TimePicker extends BaseComponent {
       rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "dropdownMargin", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "onChangeWithDateFirst", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow", "stopPropagation"]);
     const format = this.foundation.getDefaultFormatIfNeed();
     const position = this.foundation.getPosition();
-    const useCustomTrigger = typeof triggerRender === 'function';
     const {
       open,
       inputValue,
@@ -302,7 +302,7 @@ export default class TimePicker extends BaseComponent {
       onBlur: this.handleBlur
     });
     const outerProps = {};
-    if (useCustomTrigger) {
+    if (this.useCustomTrigger) {
       outerProps.onClick = this.openPanel;
     }
     return /*#__PURE__*/React.createElement("div", Object.assign({
@@ -325,7 +325,7 @@ export default class TimePicker extends BaseComponent {
       margin: dropdownMargin,
       autoAdjustOverflow: autoAdjustOverflow,
       stopPropagation: stopPropagation
-    }, useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
+    }, this.useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
       triggerRender: triggerRender,
       disabled: disabled,
       value: value,

package/lib/es/timePicker/index.d.ts

@@ -49,7 +49,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         secondStep: import("prop-types").Requireable<number>;
         focusOnOpen: import("prop-types").Requireable<boolean>;
         autoFocus: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<"small" | "default" | "large">;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
         stopPropagation: import("prop-types").Requireable<boolean>;
         panels: import("prop-types").Requireable<import("prop-types").InferProps<{
             panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;

package/lib/es/tooltip/index.js

@@ -423,7 +423,10 @@ export default class Tooltip extends BaseComponent {
           let popupEl = this.containerEl && this.containerEl.current;
           el = ReactDOM.findDOMNode(el);
           popupEl = ReactDOM.findDOMNode(popupEl);
-          if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide && el && el.contains(e.target)) {
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          const isClickTriggerToHide = this.props.clickTriggerToHide ? el && el.contains(target) || path.includes(el) : false;
+          if (el && !el.contains(target) && popupEl && !popupEl.contains(target) && !(path.includes(popupEl) || path.includes(el)) || isClickTriggerToHide) {
             this.props.onClickOutSide(e);
             cb();
           }

package/lib/es/treeSelect/index.js

@@ -1105,7 +1105,8 @@ class TreeSelect extends BaseComponent {
           const triggerDom = this.triggerRef && this.triggerRef.current;
           const optionsDom = ReactDOM.findDOMNode(optionInstance);
           const target = e.target;
-          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };
@@ -1133,8 +1134,8 @@ class TreeSelect extends BaseComponent {
       notifySelect: (selectKey, bool, node) => {
         this.props.onSelect && this.props.onSelect(selectKey, bool, node);
       },
-      notifySearch: (input, filteredExpandedKeys, filteredNodes) => {
-        this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys, filteredNodes);
+      notifySearch: (input, filteredExpandedKeys) => {
+        this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
         this.setState({

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

@@ -132,6 +132,14 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
      * @returns {Boolean}
      */
     shouldTruncated: (rows: number) => boolean;
+    /**
+     * 通过将 content 给到 Range 对象，借助 Range 的 getBoundingClientRect 拿到 content 的准确 width
+     * 不受 css ellipsis 与否的影响
+     * By giving the content to the Range object, get the exact width of the content with the help of Range's getBoundingClientRect
+     * Not affected by css ellipsis or not
+     * https://github.com/DouyinFE/semi-design/issues/1731
+     */
+    compareSingleRow: () => boolean;
     showTooltip: () => boolean | ShowTooltip | {
         type: string;
     };

package/lib/es/typography/base.js

@@ -123,9 +123,32 @@ export default class Base extends Component {
       if (!rows || rows < 1) {
         return false;
       }
-      const updateOverflow = rows <= 1 ? this.wrapperRef.current.scrollWidth > this.wrapperRef.current.offsetWidth : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
+      const updateOverflow = rows <= 1 ? this.compareSingleRow() : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
       return updateOverflow;
     };
+    /**
+     * 通过将 content 给到 Range 对象，借助 Range 的 getBoundingClientRect 拿到 content 的准确 width
+     * 不受 css ellipsis 与否的影响
+     * By giving the content to the Range object, get the exact width of the content with the help of Range's getBoundingClientRect
+     * Not affected by css ellipsis or not
+     * https://github.com/DouyinFE/semi-design/issues/1731
+     */
+    this.compareSingleRow = () => {
+      if (!(document && document.createRange)) {
+        return false;
+      }
+      const containerNode = this.wrapperRef.current;
+      const containerWidth = containerNode.getBoundingClientRect().width;
+      const childNodes = Array.from(containerNode.childNodes);
+      const range = document.createRange();
+      const contentWidth = childNodes.reduce((acc, node) => {
+        var _a;
+        range.selectNodeContents(node);
+        return acc + ((_a = range.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0);
+      }, 0);
+      range.detach();
+      return contentWidth > containerWidth;
+    };
     this.showTooltip = () => {
       var _a, _b;
       const {
@@ -232,14 +255,15 @@ export default class Base extends Component {
         expand: this.expandRef.current,
         copy: this.copyRef && this.copyRef.current
       };
-      const content = getRenderText(this.wrapperRef.current, rows,
       // Perform type conversion on children to prevent component crash due to non-string type of children
-      String(children), extraNode, ELLIPSIS_STR, suffix, pos);
+      // https://github.com/DouyinFE/semi-design/issues/2167
+      const realChildren = Array.isArray(children) ? children.join('') : String(children);
+      const content = getRenderText(this.wrapperRef.current, rows, realChildren, extraNode, ELLIPSIS_STR, suffix, pos);
       return new Promise(resolve => {
         this.setState({
           isOverflowed: false,
           ellipsisContent: content,
-          isTruncated: children !== content
+          isTruncated: realChildren !== content
         }, resolve);
       });
     });

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

@@ -60,11 +60,11 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
-        heading: PropTypes.Requireable<2 | 1 | 4 | 3 | 5 | 6>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;
-        weight: PropTypes.Requireable<NonNullable<number | "bold" | "default" | "medium" | "light" | "regular" | "semibold">>;
+        weight: PropTypes.Requireable<NonNullable<number | "default" | "bold" | "medium" | "light" | "regular" | "semibold">>;
     };
     static defaultProps: {
         copyable: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.56.0-alpha.0",
+    "version": "2.56.0",
     "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.56.0-alpha.0",
-        "@douyinfe/semi-animation-react": "2.56.0-alpha.0",
-        "@douyinfe/semi-foundation": "2.56.0-alpha.0",
-        "@douyinfe/semi-icons": "2.56.0-alpha.0",
-        "@douyinfe/semi-illustrations": "2.56.0-alpha.0",
-        "@douyinfe/semi-theme-default": "2.56.0-alpha.0",
+        "@douyinfe/semi-animation": "2.56.0",
+        "@douyinfe/semi-animation-react": "2.56.0",
+        "@douyinfe/semi-foundation": "2.56.0",
+        "@douyinfe/semi-icons": "2.56.0",
+        "@douyinfe/semi-illustrations": "2.56.0",
+        "@douyinfe/semi-theme-default": "2.56.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "c66a7f2315110d6af211d6edb6163c71a4d8aaa8",
+    "gitHead": "df0bd1db35dc3e9fc6b78202ea2eb5d5d60e2256",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",