@douyinfe/semi-ui 2.54.0-beta.0 → 2.54.1

package/lib/cjs/avatar/index.js

@@ -284,8 +284,8 @@ class Avatar extends _baseComponent.default {
     }
   }
   render() {
-    var _a, _b;
-    const _c = this.props,
+    var _a;
+    const _b = this.props,
       {
         shape,
         children,
@@ -304,8 +304,8 @@ class Avatar extends _baseComponent.default {
         topSlot,
         border,
         contentMotion
-      } = _c,
-      others = __rest(_c, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap", "bottomSlot", "topSlot", "border", "contentMotion"]);
+      } = _b,
+      others = __rest(_b, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap", "bottomSlot", "topSlot", "border", "contentMotion"]);
     const {
       isImgExist,
       hoverContent,
@@ -335,8 +335,8 @@ class Avatar extends _baseComponent.default {
     }), this.getContent(), hoverRender);
     if (border) {
       const borderStyle = {};
-      if (border === null || border === void 0 ? void 0 : border.color) {
-        borderStyle['borderColor'] = border.color;
+      if (typeof border === 'object' && (border === null || border === void 0 ? void 0 : border.color)) {
+        borderStyle['borderColor'] = border === null || border === void 0 ? void 0 : border.color;
       }
       avatar = /*#__PURE__*/_react.default.createElement("div", {
         style: Object.assign({
@@ -347,11 +347,11 @@ class Avatar extends _baseComponent.default {
         className: (0, _classnames.default)([`${prefixCls}-additionalBorder`, `${prefixCls}-additionalBorder-${size}`, {
           [`${prefixCls}-${shape}`]: shape
         }])
-      }), ((_a = this.props.border) === null || _a === void 0 ? void 0 : _a.motion) && /*#__PURE__*/_react.default.createElement("span", {
+      }), typeof this.props.border === 'object' && this.props.border.motion && /*#__PURE__*/_react.default.createElement("span", {
         style: borderStyle,
         className: (0, _classnames.default)([`${prefixCls}-additionalBorder`, `${prefixCls}-additionalBorder-${size}`, {
           [`${prefixCls}-${shape}`]: shape,
-          [`${prefixCls}-additionalBorder-animated`]: (_b = this.props.border) === null || _b === void 0 ? void 0 : _b.motion
+          [`${prefixCls}-additionalBorder-animated`]: typeof this.props.border === 'object' && ((_a = this.props.border) === null || _a === void 0 ? void 0 : _a.motion)
         }])
       }));
     }

package/lib/cjs/avatar/interface.d.ts

@@ -39,7 +39,7 @@ export interface AvatarProps extends BaseProps {
     border?: {
         color?: string;
         motion?: boolean;
-    } & boolean;
+    } | boolean;
     contentMotion?: boolean;
 }
 export type AvatarGroupShape = 'circle' | 'square';

package/lib/cjs/navigation/index.d.ts

@@ -125,7 +125,7 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
     constructor(props: NavProps);
     static getDerivedStateFromProps(props: NavProps, state: NavState): Partial<NavState>;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: NavProps, prevState: NavState): void;
+    componentDidUpdate(prevProps: NavProps): void;
     get adapter(): NavigationAdapter<NavProps, NavState>;
     /**
      * Render navigation items recursively

package/lib/cjs/navigation/index.js

@@ -97,24 +97,19 @@ class Nav extends _baseComponent.default {
   componentDidMount() {
     // override BaseComponent
   }
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (prevProps.items !== this.props.items || prevProps.children !== this.props.children) {
       this.foundation.init();
     } else {
       this.foundation.handleItemsChange(false);
-      const {
-        selectedKeys
-      } = this.state;
       if (this.props.selectedKeys && !(0, _isEqual2.default)(prevProps.selectedKeys, this.props.selectedKeys)) {
         this.adapter.updateSelectedKeys(this.props.selectedKeys);
+        const willOpenKeys = this.foundation.getWillOpenKeys(this.state.itemKeysMap);
+        this.adapter.updateOpenKeys(willOpenKeys);
       }
       if (this.props.openKeys && !(0, _isEqual2.default)(prevProps.openKeys, this.props.openKeys)) {
         this.adapter.updateOpenKeys(this.props.openKeys);
       }
-      if (!(0, _isEqual2.default)(selectedKeys, prevState.selectedKeys)) {
-        const parentSelectKeys = this.foundation.selectLevelZeroParentKeys(null, ...selectedKeys);
-        this.adapter.addSelectedKeys(...parentSelectKeys);
-      }
     }
   }
   get adapter() {
@@ -140,9 +135,20 @@ class Nav extends _baseComponent.default {
       }),
       addSelectedKeys: createAddKeysFn(this, 'selectedKeys'),
       removeSelectedKeys: createRemoveKeysFn(this, 'selectedKeys'),
-      updateSelectedKeys: selectedKeys => this.setState({
-        selectedKeys: [...selectedKeys]
-      }),
+      /**
+       * when `includeParentKeys` is `true`, select a nested nav item will select parent nav sub
+       */
+      updateSelectedKeys: function (selectedKeys) {
+        let includeParentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        let willUpdateSelectedKeys = selectedKeys;
+        if (includeParentKeys) {
+          const parentSelectKeys = _this.foundation.selectLevelZeroParentKeys(null, selectedKeys);
+          willUpdateSelectedKeys = Array.from(new Set(selectedKeys.concat(parentSelectKeys)));
+        }
+        _this.setState({
+          selectedKeys: willUpdateSelectedKeys
+        });
+      },
       updateOpenKeys: openKeys => this.setState({
         openKeys: [...openKeys]
       }),

package/lib/cjs/typography/base.js

@@ -147,7 +147,9 @@ class Base extends _react.Component {
         expandable,
         expandText
       } = this.getEllipsisOpt();
-      const overflowed = !expanded && (isOverflowed || isTruncated);
+      const canUseCSSEllipsis = this.canUseCSSEllipsis();
+      // If the css is truncated, use isOverflowed to judge. If the css is truncated, use isTruncated to judge.
+      const overflowed = !expanded && (canUseCSSEllipsis ? isOverflowed : isTruncated);
       const noExpandText = !expandable && (0, _isUndefined2.default)(expandText);
       const show = noExpandText && overflowed && showTooltip;
       if (!show) {
@@ -457,7 +459,7 @@ class Base extends _react.Component {
       newState.isOverflowed = false;
       newState.ellipsisContent = props.children;
       newState.expanded = false;
-      newState.isTruncated = false;
+      newState.isTruncated = true;
     }
     return newState;
   }

package/lib/cjs/upload/index.d.ts

@@ -6,9 +6,9 @@ import BaseComponent from '../_base/baseComponent';
 import type { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
 import { Locale } from '../locale/interface';
 import '@douyinfe/semi-foundation/lib/cjs/upload/upload.css';
-import type { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
+import type { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult, FileItemStatus } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
 import type { ValidateStatus } from '../_base/baseComponent';
-export type { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult, };
+export type { FileItem, FileItemStatus, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult, };
 export interface UploadProps {
     accept?: string;
     action: string;

package/lib/es/avatar/index.js

@@ -265,8 +265,8 @@ export default class Avatar extends BaseComponent {
     }
   }
   render() {
-    var _a, _b;
-    const _c = this.props,
+    var _a;
+    const _b = this.props,
       {
         shape,
         children,
@@ -285,8 +285,8 @@ export default class Avatar extends BaseComponent {
         topSlot,
         border,
         contentMotion
-      } = _c,
-      others = __rest(_c, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap", "bottomSlot", "topSlot", "border", "contentMotion"]);
+      } = _b,
+      others = __rest(_b, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap", "bottomSlot", "topSlot", "border", "contentMotion"]);
     const {
       isImgExist,
       hoverContent,
@@ -316,8 +316,8 @@ export default class Avatar extends BaseComponent {
     }), this.getContent(), hoverRender);
     if (border) {
       const borderStyle = {};
-      if (border === null || border === void 0 ? void 0 : border.color) {
-        borderStyle['borderColor'] = border.color;
+      if (typeof border === 'object' && (border === null || border === void 0 ? void 0 : border.color)) {
+        borderStyle['borderColor'] = border === null || border === void 0 ? void 0 : border.color;
       }
       avatar = /*#__PURE__*/React.createElement("div", {
         style: Object.assign({
@@ -328,11 +328,11 @@ export default class Avatar extends BaseComponent {
         className: cls([`${prefixCls}-additionalBorder`, `${prefixCls}-additionalBorder-${size}`, {
           [`${prefixCls}-${shape}`]: shape
         }])
-      }), ((_a = this.props.border) === null || _a === void 0 ? void 0 : _a.motion) && /*#__PURE__*/React.createElement("span", {
+      }), typeof this.props.border === 'object' && this.props.border.motion && /*#__PURE__*/React.createElement("span", {
         style: borderStyle,
         className: cls([`${prefixCls}-additionalBorder`, `${prefixCls}-additionalBorder-${size}`, {
           [`${prefixCls}-${shape}`]: shape,
-          [`${prefixCls}-additionalBorder-animated`]: (_b = this.props.border) === null || _b === void 0 ? void 0 : _b.motion
+          [`${prefixCls}-additionalBorder-animated`]: typeof this.props.border === 'object' && ((_a = this.props.border) === null || _a === void 0 ? void 0 : _a.motion)
         }])
       }));
     }

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

@@ -39,7 +39,7 @@ export interface AvatarProps extends BaseProps {
     border?: {
         color?: string;
         motion?: boolean;
-    } & boolean;
+    } | boolean;
     contentMotion?: boolean;
 }
 export type AvatarGroupShape = 'circle' | 'square';

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

@@ -125,7 +125,7 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
     constructor(props: NavProps);
     static getDerivedStateFromProps(props: NavProps, state: NavState): Partial<NavState>;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: NavProps, prevState: NavState): void;
+    componentDidUpdate(prevProps: NavProps): void;
     get adapter(): NavigationAdapter<NavProps, NavState>;
     /**
      * Render navigation items recursively

package/lib/es/navigation/index.js

@@ -88,24 +88,19 @@ class Nav extends BaseComponent {
   componentDidMount() {
     // override BaseComponent
   }
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (prevProps.items !== this.props.items || prevProps.children !== this.props.children) {
       this.foundation.init();
     } else {
       this.foundation.handleItemsChange(false);
-      const {
-        selectedKeys
-      } = this.state;
       if (this.props.selectedKeys && !_isEqual(prevProps.selectedKeys, this.props.selectedKeys)) {
         this.adapter.updateSelectedKeys(this.props.selectedKeys);
+        const willOpenKeys = this.foundation.getWillOpenKeys(this.state.itemKeysMap);
+        this.adapter.updateOpenKeys(willOpenKeys);
       }
       if (this.props.openKeys && !_isEqual(prevProps.openKeys, this.props.openKeys)) {
         this.adapter.updateOpenKeys(this.props.openKeys);
       }
-      if (!_isEqual(selectedKeys, prevState.selectedKeys)) {
-        const parentSelectKeys = this.foundation.selectLevelZeroParentKeys(null, ...selectedKeys);
-        this.adapter.addSelectedKeys(...parentSelectKeys);
-      }
     }
   }
   get adapter() {
@@ -131,9 +126,20 @@ class Nav extends BaseComponent {
       }),
       addSelectedKeys: createAddKeysFn(this, 'selectedKeys'),
       removeSelectedKeys: createRemoveKeysFn(this, 'selectedKeys'),
-      updateSelectedKeys: selectedKeys => this.setState({
-        selectedKeys: [...selectedKeys]
-      }),
+      /**
+       * when `includeParentKeys` is `true`, select a nested nav item will select parent nav sub
+       */
+      updateSelectedKeys: function (selectedKeys) {
+        let includeParentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        let willUpdateSelectedKeys = selectedKeys;
+        if (includeParentKeys) {
+          const parentSelectKeys = _this.foundation.selectLevelZeroParentKeys(null, selectedKeys);
+          willUpdateSelectedKeys = Array.from(new Set(selectedKeys.concat(parentSelectKeys)));
+        }
+        _this.setState({
+          selectedKeys: willUpdateSelectedKeys
+        });
+      },
       updateOpenKeys: openKeys => this.setState({
         openKeys: [...openKeys]
       }),

package/lib/es/typography/base.js

@@ -138,7 +138,9 @@ export default class Base extends Component {
         expandable,
         expandText
       } = this.getEllipsisOpt();
-      const overflowed = !expanded && (isOverflowed || isTruncated);
+      const canUseCSSEllipsis = this.canUseCSSEllipsis();
+      // If the css is truncated, use isOverflowed to judge. If the css is truncated, use isTruncated to judge.
+      const overflowed = !expanded && (canUseCSSEllipsis ? isOverflowed : isTruncated);
       const noExpandText = !expandable && _isUndefined(expandText);
       const show = noExpandText && overflowed && showTooltip;
       if (!show) {
@@ -448,7 +450,7 @@ export default class Base extends Component {
       newState.isOverflowed = false;
       newState.ellipsisContent = props.children;
       newState.expanded = false;
-      newState.isTruncated = false;
+      newState.isTruncated = true;
     }
     return newState;
   }

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

@@ -6,9 +6,9 @@ import BaseComponent from '../_base/baseComponent';
 import type { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
 import { Locale } from '../locale/interface';
 import '@douyinfe/semi-foundation/lib/es/upload/upload.css';
-import type { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/es/upload/foundation';
+import type { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult, FileItemStatus } from '@douyinfe/semi-foundation/lib/es/upload/foundation';
 import type { ValidateStatus } from '../_base/baseComponent';
-export type { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult, };
+export type { FileItem, FileItemStatus, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult, };
 export interface UploadProps {
     accept?: string;
     action: string;

package/package.json

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