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

package/lib/cjs/table/Table.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
-
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _difference2 = _interopRequireDefault(require("lodash/difference"));
 
+var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
+
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
 
 var _each2 = _interopRequireDefault(require("lodash/each"));
@@ -504,12 +504,8 @@ class Table extends _baseComponent.default {
 
     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,
@@ -528,12 +524,9 @@ class Table extends _baseComponent.default {
         const stateSortOrder = (0, _get2.default)(curQuery, 'sortOrder');
         const defaultSortOrder = (0, _get2.default)(curQuery, 'defaultSortOrder', false);
         const sortOrder = _this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
-        const showEllipsisTitle = (0, _utils.shouldShowEllipsisTitle)(column.ellipsis);
 
-        const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/_react.default.createElement("span", {
-          className: `${prefixCls}-row-head-title`,
-          key: _constants.strings.DEFAULT_KEY_COLUMN_TITLE,
-          title: showEllipsisTitle && typeof rawTitle === 'string' ? rawTitle : undefined
+        const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: _constants.strings.DEFAULT_KEY_COLUMN_TITLE
         }, rawTitle);
 
         if (typeof column.sorter === 'function' || column.sorter === true) {
@@ -547,7 +540,6 @@ class Table extends _baseComponent.default {
           });
 
           useFullRender && (titleMap.sorter = sorter);
-          hasSorterOrFilter = true;
           titleArr.push(sorter);
         } else {
           titleArr.push(TitleNode);
@@ -567,13 +559,10 @@ class Table extends _baseComponent.default {
           }));
 
           useFullRender && (titleMap.filter = filter);
-          hasSorterOrFilter = true;
           titleArr.push(filter);
         }
 
-        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : hasSorterOrFilter ? /*#__PURE__*/_react.default.createElement("div", {
-          className: `${prefixCls}-operate-wrapper`
-        }, titleArr) : titleArr;
+        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr;
         column = Object.assign(Object.assign({}, column), {
           title: newTitle
         });
@@ -718,10 +707,9 @@ class Table extends _baseComponent.default {
         sticky
       } = props;
       const selectedRowKeysSet = (0, _get2.default)(rowSelection, 'selectedRowKeysSet', new Set());
-      const tableLayout = this.adapter.getTableLayout();
       const headTable = fixed || useFixedHeader ? /*#__PURE__*/_react.default.createElement(_HeadTable.default, {
         key: "head",
-        tableLayout: tableLayout,
+        anyColumnFixed: anyColumnFixed,
         ref: headerRef,
         columns: filteredColumns,
         prefixCls: prefixCls,
@@ -746,7 +734,6 @@ class Table extends _baseComponent.default {
         handleWheel: this.handleWheel,
         handleBodyScroll: this.handleBodyScroll,
         anyColumnFixed: anyColumnFixed,
-        tableLayout: tableLayout,
         includeHeader: includeHeader,
         showHeader: showHeader,
         scroll: scroll,
@@ -881,9 +868,6 @@ class Table extends _baseComponent.default {
 
     const queries = _foundation.default.initColumnsFilteredValueAndSorterOrder((0, _utils2.cloneDeep)(cachedflattenColumns));
 
-    const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(this.props.dataSource, queries);
-    const newPagination = (0, _isPlainObject2.default)(this.props.pagination) ? this.props.pagination : {};
-    const pageData = this.foundation.getCurrentPageData(filteredSortedDataSource, newPagination, queries);
     this.state = {
       /**
        * Cached props
@@ -897,11 +881,11 @@ class Table extends _baseComponent.default {
        * State calculated based on prop
        */
       queries,
-      dataSource: pageData.dataSource,
+      dataSource: [],
       flattenData: [],
       expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
       rowSelection: props.rowSelection ? (0, _isObject2.default)(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
@@ -1085,18 +1069,6 @@ class Table extends _baseComponent.default {
 
         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;
 
@@ -1482,11 +1454,12 @@ class Table extends _baseComponent.default {
      * 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 ((0, _isNull2.default)(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/cjs/table/TableCell.js

@@ -320,8 +320,7 @@ class TableCell extends _baseComponent.default {
     } = this.context;
     const isRTL = direction === 'rtl';
     const {
-      className,
-      ellipsis
+      className
     } = column;
     const fixedLeftFlag = fixedLeft || typeof fixedLeft === 'number';
     const fixedRightFlag = fixedRight || typeof fixedRight === 'number';
@@ -340,14 +339,6 @@ class TableCell extends _baseComponent.default {
       realExpandIcon,
       tdProps: newTdProps
     } = renderTextResult;
-    let title;
-    const shouldShowTitle = (0, _utils.shouldShowEllipsisTitle)(ellipsis);
-
-    if (shouldShowTitle) {
-      if (typeof text === 'string') {
-        title = text;
-      }
-    }
 
     if (rowSpan === 0 || colSpan === 0) {
       return null;
@@ -376,15 +367,13 @@ class TableCell extends _baseComponent.default {
       [`${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.default.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/cjs/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/cjs/table/TableHeader.js

@@ -11,13 +11,11 @@ var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
 
 var _TableHeaderRow = _interopRequireDefault(require("./TableHeaderRow"));
 
@@ -76,13 +74,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 = (0, _utils.shouldShowEllipsisTitle)(ellipsis);
-
-      if (shouldShowTitle && typeof cell.children === 'string') {
-        cell.title = cell.children;
-      }
-
       return colSpan;
     });
     return colSpans;

package/lib/cjs/table/TableHeaderRow.js

@@ -149,8 +149,7 @@ class TableHeaderRow extends _baseComponent.default {
         [`${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/cjs/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/cjs/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/cjs/table/constants';
-import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/cjs/table/foundation';
+import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/typography/base.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
-
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
 
 var _merge2 = _interopRequireDefault(require("lodash/merge"));
@@ -17,6 +15,8 @@ var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -41,8 +41,6 @@ var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer")
 
 var _utils = require("../_utils");
 
-var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -137,7 +135,7 @@ class Base extends _react.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;
     };
 
@@ -201,7 +199,8 @@ class Base extends _react.Component {
 
       if (expandable && !expanded || collapsible && expanded) {
         this.setState({
-          expanded: !expanded
+          expanded: !expanded,
+          first: false
         });
       }
     };
@@ -229,24 +228,24 @@ class Base extends _react.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 && (0, _isUndefined2.default)(expandText);
       const noCollapseText = !collapsible && (0, _isUndefined2.default)(collapseText);
       let text;
 
       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;
       }
 
@@ -311,9 +310,11 @@ class Base extends _react.Component {
 
     this.getEllipsisStyle = () => {
       const {
-        ellipsis,
-        component
+        ellipsis
       } = this.props;
+      const {
+        expandable
+      } = this.getEllipsisOpt();
 
       if (!ellipsis) {
         return {
@@ -327,25 +328,23 @@ class Base extends _react.Component {
         rows
       } = this.getEllipsisOpt();
       const {
-        expanded
+        isOverflowed,
+        expanded,
+        isTruncated
       } = this.state;
       const useCSS = !expanded && this.canUseCSSEllipsis();
       const ellipsisCls = (0, _classnames.default)({
         [`${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 : {}
       };
     };
 
@@ -359,6 +358,7 @@ class Base extends _react.Component {
       const {
         isTruncated,
         expanded,
+        isOverflowed,
         ellipsisContent
       } = this.state;
 
@@ -375,10 +375,12 @@ class Base extends _react.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.default.createRef();
@@ -388,7 +390,8 @@ class Base extends _react.Component {
 
   componentDidMount() {
     if (this.props.ellipsis) {
-      this.onResize();
+      this.getEllipsisState();
+      window.addEventListener('resize', this.onResize);
     }
   }
 
@@ -402,9 +405,10 @@ class Base extends _react.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;
@@ -416,12 +420,16 @@ class Base extends _react.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);
     }
@@ -443,45 +451,45 @@ class Base extends _react.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
+    const updateOverflow = this.shouldTruncated(rows);
+    const canUseCSSEllipsis = this.canUseCSSEllipsis();
+    const needUpdate = updateOverflow !== isOverflowed;
 
-    (0, _warning.default)('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
-
-    if ((0, _isNull2.default)(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];
+    (0, _warning.default)('children' in this.props && typeof children !== 'string', "[Semi Typography] 'Only children with pure text could be used with ellipsis at this moment.");
+    const content = (0, _util.default)(_reactDom.default.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 = (0, _util.default)(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;
   }
 
@@ -490,8 +498,6 @@ class Base extends _react.Component {
   }
 
   renderCopy() {
-    var _a;
-
     const {
       copyable,
       children
@@ -499,30 +505,28 @@ class Base extends _react.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);
     }
 
-    (0, _warning.default)(hasObject, 'Content to be copied in Typography is a object, it will case a [object Object] mistake when copy to clipboard.');
+    (0, _warning.default)(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
@@ -633,15 +637,13 @@ class Base extends _react.Component {
   }
 
   render() {
-    return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
-      onResize: this.onResize
-    }, /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Typography"
     }, locale => {
       this.expandStr = locale.expand;
       this.collapseStr = locale.collapse;
       return this.renderTipWrapper();
-    }));
+    });
   }
 
 }

package/lib/cjs/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/cjs/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;