@douyinfe/semi-ui 2.52.3 → 2.53.0

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

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Ellipsis, ShowTooltip, TypographyBaseSize, TypographyBaseType } from './interface';
+import type { Ellipsis, ShowTooltip, TypographyBaseSize, TypographyBaseType } from './interface';
 import { CopyableConfig, LinkType } from './title';
 import { BaseProps } from '../_base/baseComponent';
+import { ResizeEntry } from '../resizeObserver';
 export interface BaseTypographyProps extends BaseProps {
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
@@ -85,7 +86,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         spacing: PropTypes.Requireable<"normal" | "extended">;
         strong: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<"small" | "normal">;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
@@ -115,12 +116,13 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
     rafId: ReturnType<typeof requestAnimationFrame>;
     expandStr: string;
     collapseStr: string;
+    observerTakingEffect: boolean;
     constructor(props: BaseTypographyProps);
     componentDidMount(): void;
     static getDerivedStateFromProps(props: BaseTypographyProps, prevState: BaseTypographyState): Partial<BaseTypographyState>;
     componentDidUpdate(prevProps: BaseTypographyProps): void;
     componentWillUnmount(): void;
-    onResize: () => void;
+    onResize: (entries?: ResizeEntry[]) => Promise<void>;
     canUseCSSEllipsis: () => boolean;
     /**
      * whether truncated
@@ -133,7 +135,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
     showTooltip: () => boolean | ShowTooltip | {
         type: string;
     };
-    getEllipsisState(): boolean;
+    onHover: () => any;
+    getEllipsisState: () => Promise<void>;
     /**
      * Triggered when the fold button is clicked to save the latest expanded state
      * @param {Event} e

package/lib/es/typography/base.js

@@ -4,6 +4,33 @@ import _isString from "lodash/isString";
 import _merge from "lodash/merge";
 import _omit from "lodash/omit";
 import _isUndefined from "lodash/isUndefined";
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -24,8 +51,8 @@ import getRenderText from './util';
 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';
+import { isSemiIcon, runAfterTicks } from '../_utils';
+import ResizeObserver, { ObserverProperty } from '../resizeObserver';
 const prefixCls = cssClasses.PREFIX;
 const ELLIPSIS_STR = '...';
 const wrapperDecorations = (props, content) => {
@@ -59,12 +86,18 @@ const wrapperDecorations = (props, content) => {
 export default class Base extends Component {
   constructor(props) {
     super(props);
-    this.onResize = () => {
+    this.observerTakingEffect = false;
+    this.onResize = entries => __awaiter(this, void 0, void 0, function* () {
       if (this.rafId) {
         window.cancelAnimationFrame(this.rafId);
       }
-      this.rafId = window.requestAnimationFrame(this.getEllipsisState.bind(this));
-    };
+      return new Promise(resolve => {
+        this.rafId = window.requestAnimationFrame(() => __awaiter(this, void 0, void 0, function* () {
+          yield this.getEllipsisState();
+          resolve();
+        }));
+      });
+    });
     // if it needs to use js overflowed:
     // 1. text is expandable 2. expandText need to be shown  3. has extra operation 4. text need to ellipse from mid
     this.canUseCSSEllipsis = () => {
@@ -134,6 +167,80 @@ export default class Base extends Component {
       }
       return defaultOpts;
     };
+    this.onHover = () => {
+      const canUseCSSEllipsis = this.canUseCSSEllipsis();
+      if (canUseCSSEllipsis) {
+        const {
+          rows,
+          suffix,
+          pos
+        } = this.getEllipsisOpt();
+        const updateOverflow = this.shouldTruncated(rows);
+        // isOverflowed needs to be updated to show tooltip when using css ellipsis
+        this.setState({
+          isOverflowed: updateOverflow,
+          isTruncated: false
+        });
+        return undefined;
+      }
+    };
+    this.getEllipsisState = () => __awaiter(this, void 0, void 0, function* () {
+      const {
+        rows,
+        suffix,
+        pos
+      } = this.getEllipsisOpt();
+      const {
+        children
+      } = this.props;
+      // wait until element mounted
+      if (!this.wrapperRef || !this.wrapperRef.current) {
+        yield this.onResize();
+        return;
+      }
+      const {
+        expanded
+      } = this.state;
+      const canUseCSSEllipsis = this.canUseCSSEllipsis();
+      if (canUseCSSEllipsis) {
+        // const updateOverflow = this.shouldTruncated(rows);
+        // // isOverflowed needs to be updated to show tooltip when using css ellipsis
+        // this.setState({
+        //     isOverflowed: updateOverflow,
+        //     isTruncated: false
+        // });
+        return;
+      }
+      // If children is null, css/js truncated flag isTruncate is false
+      if (_isNull(children)) {
+        return new Promise(resolve => {
+          this.setState({
+            isTruncated: false,
+            isOverflowed: false
+          }, resolve);
+        });
+      }
+      // 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 (!rows || rows < 0 || expanded) {
+        return;
+      }
+      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);
+      return new Promise(resolve => {
+        this.setState({
+          isOverflowed: false,
+          ellipsisContent: content,
+          isTruncated: children !== content
+        }, resolve);
+      });
+    });
     /**
      * Triggered when the fold button is clicked to save the latest expanded state
      * @param {Event} e
@@ -300,9 +407,13 @@ export default class Base extends Component {
         ellipsisContent
       } = this.state;
       if (expanded || !isTruncated) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, children, suffix && suffix.length ? suffix : null);
+        return /*#__PURE__*/React.createElement("span", {
+          onMouseEnter: this.onHover
+        }, children, suffix && suffix.length ? suffix : null);
       }
-      return /*#__PURE__*/React.createElement("span", null, ellipsisContent, suffix);
+      return /*#__PURE__*/React.createElement("span", {
+        onMouseEnter: this.onHover
+      }, ellipsisContent, suffix);
     };
     this.state = {
       editable: false,
@@ -322,7 +433,8 @@ export default class Base extends Component {
   }
   componentDidMount() {
     if (this.props.ellipsis) {
-      this.onResize();
+      // runAfterTicks: make sure start observer on the next tick
+      this.onResize().then(() => runAfterTicks(() => this.observerTakingEffect = true, 1));
     }
   }
   static getDerivedStateFromProps(props, prevState) {
@@ -354,61 +466,6 @@ export default class Base extends Component {
       window.cancelAnimationFrame(this.rafId);
     }
   }
-  getEllipsisState() {
-    const {
-      rows,
-      suffix,
-      pos
-    } = this.getEllipsisOpt();
-    const {
-      children
-    } = this.props;
-    // wait until element mounted
-    if (!this.wrapperRef || !this.wrapperRef.current) {
-      this.onResize();
-      return false;
-    }
-    const {
-      expanded
-    } = this.state;
-    const canUseCSSEllipsis = this.canUseCSSEllipsis();
-    // If children is null, css/js truncated flag isTruncate is false
-    if (_isNull(children)) {
-      this.setState({
-        isTruncated: false,
-        isOverflowed: false
-      });
-      return undefined;
-    }
-    // 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 (!rows || rows < 0 || expanded) {
-      return undefined;
-    }
-    if (canUseCSSEllipsis) {
-      const updateOverflow = this.shouldTruncated(rows);
-      // isOverflowed needs to be updated to show tooltip when using css ellipsis
-      this.setState({
-        isOverflowed: updateOverflow,
-        isTruncated: false
-      });
-      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({
-      isOverflowed: false,
-      ellipsisContent: content,
-      isTruncated: children !== content
-    });
-    return undefined;
-  }
   renderOperations() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderExpandable(), this.renderCopy());
   }
@@ -550,6 +607,7 @@ export default class Base extends Component {
     }
   }
   render() {
+    var _this = this;
     const content = /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Typography"
     }, locale => {
@@ -559,8 +617,13 @@ export default class Base extends Component {
     });
     if (this.props.ellipsis) {
       return /*#__PURE__*/React.createElement(ResizeObserver, {
-        onResize: this.onResize,
-        observeParent: true
+        onResize: function () {
+          if (_this.observerTakingEffect) {
+            _this.onResize(...arguments);
+          }
+        },
+        observeParent: true,
+        observerProperty: ObserverProperty.Width
       }, content);
     }
     return content;

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

@@ -38,7 +38,7 @@ export default class Numeral extends PureComponent<NumeralProps> {
         underline: PropTypes.Requireable<boolean>;
         link: PropTypes.Requireable<NonNullable<boolean | object>>;
         strong: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
         size: PropTypes.Requireable<"small" | "normal">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

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

@@ -50,7 +50,7 @@ export default class Paragraph extends PureComponent<ParagraphProps> {
         link: PropTypes.Requireable<NonNullable<boolean | object>>;
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
         size: PropTypes.Requireable<"small" | "normal">;
         spacing: PropTypes.Requireable<"normal" | "extended">;
         style: PropTypes.Requireable<object>;

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

@@ -53,7 +53,7 @@ export default class Text extends PureComponent<TextProps> {
         underline: PropTypes.Requireable<boolean>;
         link: PropTypes.Requireable<NonNullable<boolean | object>>;
         strong: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
         size: PropTypes.Requireable<"small" | "normal">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.52.3",
+    "version": "2.53.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,17 +20,18 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.52.3",
-        "@douyinfe/semi-animation-react": "2.52.3",
-        "@douyinfe/semi-foundation": "2.52.3",
-        "@douyinfe/semi-icons": "2.52.3",
-        "@douyinfe/semi-illustrations": "2.52.3",
-        "@douyinfe/semi-theme-default": "2.52.3",
+        "@douyinfe/semi-animation": "2.53.0",
+        "@douyinfe/semi-animation-react": "2.53.0",
+        "@douyinfe/semi-foundation": "2.53.0",
+        "@douyinfe/semi-icons": "2.53.0",
+        "@douyinfe/semi-illustrations": "2.53.0",
+        "@douyinfe/semi-theme-default": "2.53.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
         "date-fns": "^2.29.3",
         "date-fns-tz": "^1.3.8",
+        "fast-copy": "^3.0.1 ",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-resizable": "^3.0.5",
@@ -74,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "5afe84d312e3360ccf514ab19d7e1e70517a4731",
+    "gitHead": "fee0675e56fb72e6ff06083c36d8c5564ca26eef",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",