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

package/lib/cjs/cascader/index.js

@@ -741,9 +741,9 @@ class Cascader extends _baseComponent.default {
       }, []);
       return formatKeys;
     };
-    const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
-    const needUpdateValue = needUpdate('value') || (0, _isEmpty2.default)(prevProps) && defaultValue;
     if (multiple) {
+      const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
+      const needUpdateValue = needUpdate('value') || (0, _isEmpty2.default)(prevProps) && defaultValue;
       // when value and treedata need updated
       if (needUpdateTreeData || needUpdateValue) {
         // update state.keyEntities
@@ -791,8 +791,11 @@ class Cascader extends _baseComponent.default {
     this.foundation.destroy();
   }
   componentDidUpdate(prevProps) {
+    if (this.props.multiple) {
+      return;
+    }
     let isOptionsChanged = false;
-    if (!(0, _isEqual2.default)(prevProps.treeData, this.props.treeData) && !this.props.multiple) {
+    if (!(0, _isEqual2.default)(prevProps.treeData, this.props.treeData)) {
       isOptionsChanged = true;
       this.foundation.collectOptions();
     }

package/lib/cjs/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/cjs/locale/source/ro.js

@@ -5,10 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _locale = require("date-fns/locale");
-/**
- * [i18n-Romanian]
- */
-var _default = {
+const local = {
   code: 'ro',
   dateFnsLocale: _locale.ro,
   Pagination: {
@@ -111,7 +108,8 @@ var _default = {
     createText: 'Creează'
   },
   Tree: {
-    emptyText: 'Nici un rezultat'
+    emptyText: 'Nici un rezultat',
+    searchPlaceholder: 'Căutare'
   },
   Cascader: {
     emptyText: 'Nici un rezultat'
@@ -174,4 +172,6 @@ var _default = {
     originTip: 'Afișaj implicit'
   }
 };
+// [i18n-Romanian] 罗马尼亚语
+var _default = local;
 exports.default = _default;

package/lib/cjs/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/cjs/typography/base.js

@@ -132,9 +132,32 @@ class Base extends _react.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 {
@@ -241,14 +264,15 @@ class Base extends _react.Component {
         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);
+      // https://github.com/DouyinFE/semi-design/issues/2167
+      const realChildren = Array.isArray(children) ? children.join('') : String(children);
+      const content = (0, _util.default)(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/cascader/index.js

@@ -732,9 +732,9 @@ class Cascader extends BaseComponent {
       }, []);
       return formatKeys;
     };
-    const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
-    const needUpdateValue = needUpdate('value') || _isEmpty(prevProps) && defaultValue;
     if (multiple) {
+      const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
+      const needUpdateValue = needUpdate('value') || _isEmpty(prevProps) && defaultValue;
       // when value and treedata need updated
       if (needUpdateTreeData || needUpdateValue) {
         // update state.keyEntities
@@ -782,8 +782,11 @@ class Cascader extends BaseComponent {
     this.foundation.destroy();
   }
   componentDidUpdate(prevProps) {
+    if (this.props.multiple) {
+      return;
+    }
     let isOptionsChanged = false;
-    if (!_isEqual(prevProps.treeData, this.props.treeData) && !this.props.multiple) {
+    if (!_isEqual(prevProps.treeData, this.props.treeData)) {
       isOptionsChanged = true;
       this.foundation.collectOptions();
     }

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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.56.0-beta.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-beta.0",
-        "@douyinfe/semi-animation-react": "2.56.0-beta.0",
-        "@douyinfe/semi-foundation": "2.56.0-beta.0",
-        "@douyinfe/semi-icons": "2.56.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.56.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.56.0-beta.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": "ae4502e3075a19370e9f4ed32fbfb1292acd06c2",
+    "gitHead": "df0bd1db35dc3e9fc6b78202ea2eb5d5d60e2256",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",