@douyinfe/semi-ui 2.34.0 → 2.34.1-alpha.3

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

package/lib/es/table/Table.js

@@ -1,7 +1,7 @@
-import _isPlainObject from "lodash/isPlainObject";
 import _isObject from "lodash/isObject";
 import _isFunction from "lodash/isFunction";
 import _difference from "lodash/difference";
+import _isNull from "lodash/isNull";
 import _omit from "lodash/omit";
 import _each from "lodash/each";
 import _flattenDeep from "lodash/flattenDeep";
@@ -45,7 +45,7 @@ var __rest = this && this.__rest || function (s, e) {
 import React, { createRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { mergeQueries, equalWith, assignColumnKeys, flattenColumns, getAllDisabledRowKeys, shouldShowEllipsisTitle } from '@douyinfe/semi-foundation/lib/es/table/utils';
+import { mergeQueries, equalWith, assignColumnKeys, flattenColumns, getAllDisabledRowKeys } from '@douyinfe/semi-foundation/lib/es/table/utils';
 import Store from '@douyinfe/semi-foundation/lib/es/utils/Store';
 import TableFoundation from '@douyinfe/semi-foundation/lib/es/table/foundation';
 import { strings, cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/table/constants';
@@ -457,12 +457,8 @@ class Table extends BaseComponent {
 
     this.addFnsInColumn = function () {
       let column = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      const {
-        prefixCls
-      } = _this.props;
 
       if (column && (column.sorter || column.filters || column.useFullRender)) {
-        let hasSorterOrFilter = false;
         const {
           dataIndex,
           title: rawTitle,
@@ -483,11 +479,8 @@ class Table extends BaseComponent {
         const defaultSortOrder = _get(curQuery, 'defaultSortOrder', false);
 
         const sortOrder = _this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
-        const showEllipsisTitle = shouldShowEllipsisTitle(column.ellipsis);
-        const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/React.createElement("span", {
-          className: `${prefixCls}-row-head-title`,
-          key: strings.DEFAULT_KEY_COLUMN_TITLE,
-          title: showEllipsisTitle && typeof rawTitle === 'string' ? rawTitle : undefined
+        const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/React.createElement(React.Fragment, {
+          key: strings.DEFAULT_KEY_COLUMN_TITLE
         }, rawTitle);
 
         if (typeof column.sorter === 'function' || column.sorter === true) {
@@ -500,7 +493,6 @@ class Table extends BaseComponent {
             title: TitleNode
           });
           useFullRender && (titleMap.sorter = sorter);
-          hasSorterOrFilter = true;
           titleArr.push(sorter);
         } else {
           titleArr.push(TitleNode);
@@ -521,13 +513,10 @@ class Table extends BaseComponent {
             onSelect: data => _this.foundation.handleFilterSelect(dataIndex, data)
           }));
           useFullRender && (titleMap.filter = filter);
-          hasSorterOrFilter = true;
           titleArr.push(filter);
         }
 
-        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : hasSorterOrFilter ? /*#__PURE__*/React.createElement("div", {
-          className: `${prefixCls}-operate-wrapper`
-        }, titleArr) : titleArr;
+        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr;
         column = Object.assign(Object.assign({}, column), {
           title: newTitle
         });
@@ -674,10 +663,9 @@ class Table extends BaseComponent {
 
       const selectedRowKeysSet = _get(rowSelection, 'selectedRowKeysSet', new Set());
 
-      const tableLayout = this.adapter.getTableLayout();
       const headTable = fixed || useFixedHeader ? /*#__PURE__*/React.createElement(HeadTable, {
         key: "head",
-        tableLayout: tableLayout,
+        anyColumnFixed: anyColumnFixed,
         ref: headerRef,
         columns: filteredColumns,
         prefixCls: prefixCls,
@@ -701,7 +689,6 @@ class Table extends BaseComponent {
         handleWheel: this.handleWheel,
         handleBodyScroll: this.handleBodyScroll,
         anyColumnFixed: anyColumnFixed,
-        tableLayout: tableLayout,
         includeHeader: includeHeader,
         showHeader: showHeader,
         scroll: scroll,
@@ -835,9 +822,6 @@ class Table extends BaseComponent {
     const columns = this.getColumns(props.columns, props.children);
     const cachedflattenColumns = flattenColumns(columns);
     const queries = TableFoundation.initColumnsFilteredValueAndSorterOrder(cloneDeep(cachedflattenColumns));
-    const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(this.props.dataSource, queries);
-    const newPagination = _isPlainObject(this.props.pagination) ? this.props.pagination : {};
-    const pageData = this.foundation.getCurrentPageData(filteredSortedDataSource, newPagination, queries);
     this.state = {
       /**
        * Cached props
@@ -851,11 +835,11 @@ class Table extends BaseComponent {
        * State calculated based on prop
        */
       queries,
-      dataSource: pageData.dataSource,
+      dataSource: [],
       flattenData: [],
       expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
       rowSelection: props.rowSelection ? _isObject(props.rowSelection) ? Object.assign({}, props.rowSelection) : {} : null,
-      pagination: pageData.pagination,
+      pagination: props.pagination && typeof props.pagination === 'object' ? Object.assign({}, props.pagination) : props.pagination || false,
 
       /**
        * Internal state
@@ -1039,18 +1023,6 @@ class Table extends BaseComponent {
 
         return false;
       },
-      getTableLayout: () => {
-        let isFixed = false;
-        const {
-          flattenColumns
-        } = this.state;
-
-        if (Array.isArray(flattenColumns)) {
-          isFixed = flattenColumns.some(column => Boolean(column.ellipsis) || Boolean(column.fixed));
-        }
-
-        return isFixed ? 'fixed' : 'auto';
-      },
       setHeadWidths: function (headWidths) {
         let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
@@ -1439,11 +1411,12 @@ class Table extends BaseComponent {
      * TODO: After merging issue 1007, you can place it in the constructor to complete
      * The reason is that #1007 exposes the parameters required by getCurrentPageData in the constructor
      */
-    // if (isNull(dataSource)) {
-    //     const pageData: BasePageData<RecordType> = this.foundation.getCurrentPageData(this.props.dataSource);
-    //     dataSource = pageData.dataSource;
-    //     pagination = pageData.pagination;
-    // }
+
+    if (_isNull(dataSource)) {
+      const pageData = this.foundation.getCurrentPageData(this.props.dataSource);
+      dataSource = pageData.dataSource;
+      pagination = pageData.pagination;
+    }
 
     const props = Object.assign(Object.assign(Object.assign({}, rest), this.state), {
       // props not in rest

package/lib/es/table/TableCell.js

@@ -13,7 +13,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import TableCellFoundation from '@douyinfe/semi-foundation/lib/es/table/cellFoundation';
-import { isSelectionColumn, isExpandedColumn, getRTLAlign, shouldShowEllipsisTitle } from '@douyinfe/semi-foundation/lib/es/table/utils';
+import { isSelectionColumn, isExpandedColumn, getRTLAlign } from '@douyinfe/semi-foundation/lib/es/table/utils';
 import BaseComponent from '../_base/baseComponent';
 import Context from './table-context';
 import { amendTableWidth } from './utils';
@@ -296,8 +296,7 @@ export default class TableCell extends BaseComponent {
     } = this.context;
     const isRTL = direction === 'rtl';
     const {
-      className,
-      ellipsis
+      className
     } = column;
     const fixedLeftFlag = fixedLeft || typeof fixedLeft === 'number';
     const fixedRightFlag = fixedRight || typeof fixedRight === 'number';
@@ -316,14 +315,6 @@ export default class TableCell extends BaseComponent {
       realExpandIcon,
       tdProps: newTdProps
     } = renderTextResult;
-    let title;
-    const shouldShowTitle = shouldShowEllipsisTitle(ellipsis);
-
-    if (shouldShowTitle) {
-      if (typeof text === 'string') {
-        title = text;
-      }
-    }
 
     if (rowSpan === 0 || colSpan === 0) {
       return null;
@@ -352,15 +343,13 @@ export default class TableCell extends BaseComponent {
       [`${prefixCls}-cell-fixed-left`]: isFixedLeft,
       [`${prefixCls}-cell-fixed-left-last`]: isFixedLeftLast,
       [`${prefixCls}-cell-fixed-right`]: isFixedRight,
-      [`${prefixCls}-cell-fixed-right-first`]: isFixedRightFirst,
-      [`${prefixCls}-row-cell-ellipsis`]: ellipsis
+      [`${prefixCls}-cell-fixed-right-first`]: isFixedRightFirst
     });
     return /*#__PURE__*/React.createElement(BodyCell, Object.assign({
       role: "gridcell",
       "aria-colindex": colIndex + 1,
       className: columnCls,
-      onClick: this.handleClick,
-      title: title
+      onClick: this.handleClick
     }, newTdProps, {
       ref: this.setRef
     }), inner);

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

@@ -23,7 +23,6 @@ export interface TableHeaderCell {
     rowSpan?: number;
     colSpan?: number;
     colEnd?: number;
-    title?: string;
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<TableHeaderProps, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/lib/es/table/TableHeader.js

@@ -3,10 +3,9 @@ import _noop from "lodash/noop";
 
 /* eslint-disable max-len */
 import React from 'react';
-import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
+import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
-import { shouldShowEllipsisTitle } from '@douyinfe/semi-foundation/lib/es/table/utils';
 import TableHeaderRow from './TableHeaderRow';
 
 function parseHeaderRows(columns) {
@@ -61,13 +60,6 @@ function parseHeaderRows(columns) {
       cell.colEnd = cell.colStart + colSpan - 1;
       rows[rowIndex].push(cell);
       currentColIndex += colSpan;
-      const ellipsis = column === null || column === void 0 ? void 0 : column.ellipsis;
-      const shouldShowTitle = shouldShowEllipsisTitle(ellipsis);
-
-      if (shouldShowTitle && typeof cell.children === 'string') {
-        cell.title = cell.children;
-      }
-
       return colSpan;
     });
     return colSpans;

package/lib/es/table/TableHeaderRow.js

@@ -134,8 +134,7 @@ export default class TableHeaderRow extends BaseComponent {
         [`${prefixCls}-cell-fixed-left`]: fixedLeft,
         [`${prefixCls}-cell-fixed-left-last`]: fixedLeftLast,
         [`${prefixCls}-cell-fixed-right`]: fixedRight,
-        [`${prefixCls}-cell-fixed-right-first`]: fixedRightFirst,
-        [`${prefixCls}-row-head-ellipsis`]: column.ellipsis
+        [`${prefixCls}-cell-fixed-right-first`]: fixedRightFirst
       });
 
       if (headWidths.length && slicedColumns.length) {

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<"default" | "small" | "middle">;
+        size: PropTypes.Requireable<"small" | "default" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"left" | "right" | "center">;

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

@@ -6,7 +6,7 @@ import { DropdownProps } from '../dropdown';
 import { Locale } from '../locale/interface';
 import { ArrayElement } from '../_base/base';
 import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
-import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/es/table/foundation';
+import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord } from '@douyinfe/semi-foundation/lib/es/table/foundation';
 import { ScrollDirection, CSSDirection } from 'react-window';
 export interface TableProps<RecordType extends Record<string, any> = any> extends BaseProps {
     bordered?: boolean;
@@ -89,7 +89,6 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     onFilter?: OnFilter<RecordType>;
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
     onHeaderCell?: OnHeaderCell<RecordType>;
-    ellipsis?: BaseEllipsis;
 }
 export declare type Align = BaseAlign;
 export declare type SortOrder = BaseSortOrder;

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

@@ -96,7 +96,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<"default" | "small" | "large">;
+        size: PropTypes.Requireable<"small" | "default" | "large">;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         prefix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         suffix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

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

@@ -132,7 +132,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         secondStep: PropTypes.Requireable<number>;
         focusOnOpen: PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"default" | "small" | "large">;
+        size: PropTypes.Requireable<"small" | "default" | "large">;
         panels: PropTypes.Requireable<PropTypes.InferProps<{
             panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

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<"default" | "small" | "large">;
+        size: import("prop-types").Requireable<"small" | "default" | "large">;
         panels: import("prop-types").Requireable<import("prop-types").InferProps<{
             panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
             panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;

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

@@ -27,9 +27,10 @@ interface BaseTypographyState {
     editable: boolean;
     copied: boolean;
     isOverflowed: boolean;
-    ellipsisContent: React.ReactNode;
+    ellipsisContent: string;
     expanded: boolean;
     isTruncated: boolean;
+    first: boolean;
     prevChildren: React.ReactNode;
 }
 export default class Base extends Component<BaseTypographyProps, BaseTypographyState> {

package/lib/es/typography/base.js

@@ -1,4 +1,3 @@
-import _isNull from "lodash/isNull";
 import _isString from "lodash/isString";
 import _merge from "lodash/merge";
 import _omit from "lodash/omit";
@@ -16,6 +15,7 @@ var __rest = this && this.__rest || function (s, e) {
 };
 
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/typography/constants';
@@ -28,7 +28,6 @@ import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
 import LocaleConsumer from '../locale/localeConsumer';
 import { isSemiIcon } from '../_utils';
-import ResizeObserver from '../resizeObserver';
 const prefixCls = cssClasses.PREFIX;
 const ELLIPSIS_STR = '...';
 
@@ -106,7 +105,7 @@ export default class Base extends Component {
         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.wrapperRef.current.scrollWidth > this.wrapperRef.current.clientWidth : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
       return updateOverflow;
     };
 
@@ -172,7 +171,8 @@ export default class Base extends Component {
 
       if (expandable && !expanded || collapsible && expanded) {
         this.setState({
-          expanded: !expanded
+          expanded: !expanded,
+          first: false
         });
       }
     };
@@ -200,17 +200,16 @@ export default class Base extends Component {
     };
 
     this.renderExpandable = () => {
-      const {
-        expanded,
-        isTruncated
-      } = this.state;
-      if (!isTruncated) return null;
       const {
         expandText,
         expandable,
         collapseText,
         collapsible
       } = this.getEllipsisOpt();
+      const {
+        expanded,
+        first
+      } = this.state;
 
       const noExpandText = !expandable && _isUndefined(expandText);
 
@@ -220,7 +219,8 @@ export default class Base extends Component {
 
       if (!expanded && !noExpandText) {
         text = expandText;
-      } else if (expanded && !noCollapseText) {
+      } else if (expanded && !first && !noCollapseText) {
+        // if expanded is true but the text is initally mounted, we dont show collapseText
         text = collapseText;
       }
 
@@ -285,9 +285,11 @@ export default class Base extends Component {
 
     this.getEllipsisStyle = () => {
       const {
-        ellipsis,
-        component
+        ellipsis
       } = this.props;
+      const {
+        expandable
+      } = this.getEllipsisOpt();
 
       if (!ellipsis) {
         return {
@@ -301,25 +303,23 @@ export default class Base extends Component {
         rows
       } = this.getEllipsisOpt();
       const {
-        expanded
+        isOverflowed,
+        expanded,
+        isTruncated
       } = this.state;
       const useCSS = !expanded && this.canUseCSSEllipsis();
       const ellipsisCls = cls({
         [`${prefixCls}-ellipsis`]: true,
         [`${prefixCls}-ellipsis-single-line`]: rows === 1,
         [`${prefixCls}-ellipsis-multiple-line`]: rows > 1,
-        // component === 'span', Text component, It should be externally displayed inline
-        [`${prefixCls}-ellipsis-multiple-line-text`]: rows > 1 && component === 'span',
-        [`${prefixCls}-ellipsis-overflow-ellipsis`]: rows === 1 && useCSS,
-        // component === 'span', Text component, It should be externally displayed inline
-        [`${prefixCls}-ellipsis-overflow-ellipsis-text`]: rows === 1 && useCSS && component === 'span'
+        [`${prefixCls}-ellipsis-overflow-ellipsis`]: rows === 1 && useCSS
       });
       const ellipsisStyle = useCSS && rows > 1 ? {
         WebkitLineClamp: rows
       } : {};
       return {
         ellipsisCls,
-        ellipsisStyle
+        ellipsisStyle: isOverflowed ? ellipsisStyle : {}
       };
     };
 
@@ -333,6 +333,7 @@ export default class Base extends Component {
       const {
         isTruncated,
         expanded,
+        isOverflowed,
         ellipsisContent
       } = this.state;
 
@@ -349,10 +350,12 @@ export default class Base extends Component {
       // ellipsis
       // if text is overflow in container
       isOverflowed: true,
-      ellipsisContent: props.children,
+      ellipsisContent: null,
       expanded: false,
       // if text is truncated with js
-      isTruncated: true,
+      isTruncated: false,
+      // record if has click expanded
+      first: true,
       prevChildren: null
     };
     this.wrapperRef = /*#__PURE__*/React.createRef();
@@ -362,7 +365,8 @@ export default class Base extends Component {
 
   componentDidMount() {
     if (this.props.ellipsis) {
-      this.onResize();
+      this.getEllipsisState();
+      window.addEventListener('resize', this.onResize);
     }
   }
 
@@ -376,9 +380,10 @@ export default class Base extends Component {
     if (props.ellipsis && prevChildren !== props.children) {
       // reset ellipsis state if children update
       newState.isOverflowed = true;
-      newState.ellipsisContent = props.children;
+      newState.ellipsisContent = null;
       newState.expanded = false;
-      newState.isTruncated = true;
+      newState.isTruncated = false;
+      newState.first = true;
     }
 
     return newState;
@@ -390,12 +395,16 @@ export default class Base extends Component {
       this.forceUpdate();
 
       if (this.props.ellipsis) {
-        this.onResize();
+        this.getEllipsisState();
       }
     }
   }
 
   componentWillUnmount() {
+    if (this.props.ellipsis) {
+      window.removeEventListener('resize', this.onResize);
+    }
+
     if (this.rafId) {
       window.cancelAnimationFrame(this.rafId);
     }
@@ -417,45 +426,45 @@ export default class Base extends Component {
     }
 
     const {
+      ellipsisContent,
+      isOverflowed,
+      isTruncated,
       expanded
     } = this.state;
-    const canUseCSSEllipsis = this.canUseCSSEllipsis(); // Currently only text truncation is supported, if there is non-text, 
-    // both css truncation and js truncation should throw a warning
-
-    warning('children' in this.props && typeof children !== 'string', "[Semi Typography] 'Only children with pure text could be used with ellipsis at this moment."); // If children is null, css/js truncated flag isTruncate is false
+    const updateOverflow = this.shouldTruncated(rows);
+    const canUseCSSEllipsis = this.canUseCSSEllipsis();
+    const needUpdate = updateOverflow !== isOverflowed;
 
-    if (_isNull(children)) {
-      this.setState({
-        isTruncated: false,
-        isOverflowed: false
-      });
+    if (!rows || rows < 0 || expanded) {
       return undefined;
     }
 
-    if (!rows || rows < 0 || expanded) {
+    if (canUseCSSEllipsis) {
+      if (needUpdate) {
+        this.setState({
+          expanded: !updateOverflow
+        });
+      }
+
       return undefined;
     }
 
-    if (canUseCSSEllipsis) {
-      const updateOverflow = this.shouldTruncated(rows); // isOverflowed needs to be updated to show tooltip when using css ellipsis
+    const extraNode = [this.expandRef.current, this.copyRef && this.copyRef.current];
+    warning('children' in this.props && typeof children !== 'string', "[Semi Typography] 'Only children with pure text could be used with ellipsis at this moment.");
+    const content = getRenderText(ReactDOM.findDOMNode(this.wrapperRef.current), rows, children, extraNode, ELLIPSIS_STR, suffix, pos);
 
+    if (children === content) {
       this.setState({
+        expanded: true
+      });
+    } else if (ellipsisContent !== content || isOverflowed !== updateOverflow) {
+      this.setState({
+        ellipsisContent: content,
         isOverflowed: updateOverflow,
-        isTruncated: false
+        isTruncated: children !== content
       });
-      return undefined;
     }
 
-    const extraNode = {
-      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);
-    this.setState({
-      ellipsisContent: content,
-      isTruncated: children !== content
-    });
     return undefined;
   }
 
@@ -464,8 +473,6 @@ export default class Base extends Component {
   }
 
   renderCopy() {
-    var _a;
-
     const {
       copyable,
       children
@@ -473,30 +480,28 @@ export default class Base extends Component {
 
     if (!copyable) {
       return null;
-    } // If it is configured in the content of copyable, the copied content will be the content in copyable
-
+    }
 
-    const willCopyContent = (_a = copyable === null || copyable === void 0 ? void 0 : copyable.content) !== null && _a !== void 0 ? _a : children;
     let copyContent;
     let hasObject = false;
 
-    if (Array.isArray(willCopyContent)) {
+    if (Array.isArray(children)) {
       copyContent = '';
-      willCopyContent.forEach(value => {
+      children.forEach(value => {
         if (typeof value === 'object') {
           hasObject = true;
         }
 
         copyContent += String(value);
       });
-    } else if (typeof willCopyContent !== 'object') {
-      copyContent = String(willCopyContent);
+    } else if (typeof children !== 'object') {
+      copyContent = String(children);
     } else {
       hasObject = true;
-      copyContent = String(willCopyContent);
+      copyContent = String(children);
     }
 
-    warning(hasObject, 'Content to be copied in Typography is a object, it will case a [object Object] mistake when copy to clipboard.');
+    warning(hasObject, 'Children in Typography is a object, it will case a [object Object] mistake when copy to clipboard.');
     const copyConfig = Object.assign({
       content: copyContent,
       duration: 3
@@ -608,15 +613,13 @@ export default class Base extends Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ResizeObserver, {
-      onResize: this.onResize
-    }, /*#__PURE__*/React.createElement(LocaleConsumer, {
+    return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Typography"
     }, locale => {
       this.expandStr = locale.expand;
       this.collapseStr = locale.collapse;
       return this.renderTipWrapper();
-    }));
+    });
   }
 
 }

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

@@ -38,7 +38,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 6 | 3 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

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

@@ -1,5 +1,2 @@
-declare const getRenderText: (originEle: HTMLElement, rows: number, content: string, fixedContent: {
-    expand: Node;
-    copy: Node;
-}, ellipsisStr: string, suffix: string, ellipsisPos: string) => string;
+declare const getRenderText: (originEle: HTMLElement, rows: number, content: string, fixedContent: any[], ellipsisStr: string, suffix: string, ellipsisPos: string) => string;
 export default getRenderText;