@douyinfe/semi-ui 2.53.3 → 2.54.0

package/lib/es/collapsible/index.js

@@ -22,9 +22,8 @@ class Collapsible extends BaseComponent {
     this.isChildrenInRenderTree = () => {
       if (this.domRef.current) {
         return this.domRef.current.offsetHeight > 0;
-      } else {
-        return false;
       }
+      return false;
     };
     this.state = {
       domInRenderTree: false,
@@ -108,6 +107,7 @@ class Collapsible extends BaseComponent {
     const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, {
       [`${cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
     }, this.props.className);
+    const shouldRender = this.props.keepDOM && !this.props.lazyRender || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
     return /*#__PURE__*/React.createElement("div", Object.assign({
       className: wrapperCls,
       style: wrapperStyle,
@@ -126,7 +126,7 @@ class Collapsible extends BaseComponent {
         overflow: 'hidden'
       },
       id: this.props.id
-    }, (this.props.keepDOM || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen) && this.props.children));
+    }, shouldRender && this.props.children));
   }
 }
 Collapsible.__SemiComponentName__ = "Collapsible";
@@ -135,6 +135,7 @@ Collapsible.defaultProps = getDefaultPropsFromGlobalConfig(Collapsible.__SemiCom
   duration: 250,
   motion: true,
   keepDOM: false,
+  lazyRender: true,
   collapseHeight: 0,
   fade: false
 });

package/lib/es/descriptions/descriptions-context.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 export type DescriptionsAlign = 'center' | 'justify' | 'left' | 'plain';
+export type DescriptionLayout = 'horizontal' | 'vertical';
 export interface DescriptionsContextValue {
     align?: DescriptionsAlign;
+    layout?: DescriptionLayout;
 }
 declare const DescriptionsContext: React.Context<DescriptionsContextValue>;
 export default DescriptionsContext;

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

@@ -1,14 +1,17 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/descriptions/descriptions.css';
-import { DescriptionsAlign, DescriptionsContextValue } from './descriptions-context';
+import { DescriptionsAlign, DescriptionLayout } from './descriptions-context';
 import Item from './item';
+import DescriptionsFoundation, { DescriptionsAdapter } from '@douyinfe/semi-foundation/lib/es/descriptions/foundation';
+import BaseComponent from '../_base/baseComponent';
 export type { DescriptionsItemProps } from './item';
 export type DescriptionsSize = 'small' | 'medium' | 'large';
 export interface Data {
     key?: React.ReactNode;
     value?: (() => React.ReactNode) | React.ReactNode;
     hidden?: boolean;
+    span?: number;
 }
 export interface DescriptionsProps {
     align?: DescriptionsAlign;
@@ -18,10 +21,12 @@ export interface DescriptionsProps {
     className?: string;
     children?: React.ReactNode;
     data?: Data[];
+    layout?: DescriptionLayout;
+    column?: number;
 }
-declare class Descriptions extends PureComponent<DescriptionsProps> {
+declare class Descriptions extends BaseComponent<DescriptionsProps> {
     static Item: typeof Item;
-    static contextType: React.Context<DescriptionsContextValue>;
+    static contextType: React.Context<import("./descriptions-context").DescriptionsContextValue>;
     static propTypes: {
         align: PropTypes.Requireable<string>;
         row: PropTypes.Requireable<boolean>;
@@ -35,13 +40,21 @@ declare class Descriptions extends PureComponent<DescriptionsProps> {
             className: PropTypes.Requireable<string>;
             style: PropTypes.Requireable<object>;
         }>[]>;
+        layout: PropTypes.Requireable<string>;
+        column: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         align: string;
         row: boolean;
         size: string;
         data: Data[];
+        layout: string;
+        column: number;
     };
+    foundation: DescriptionsFoundation;
+    constructor(props: DescriptionsProps);
+    get adapter(): DescriptionsAdapter<DescriptionsProps>;
+    renderChildrenList: () => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | JSX.Element[];
     render(): JSX.Element;
 }
 export default Descriptions;

package/lib/es/descriptions/index.js

@@ -7,7 +7,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React, { PureComponent } from 'react';
+import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/descriptions/constants';
@@ -15,8 +15,43 @@ import '@douyinfe/semi-foundation/lib/es/descriptions/descriptions.css';
 import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import DescriptionsContext from './descriptions-context';
 import Item from './item';
+import DescriptionsFoundation from '@douyinfe/semi-foundation/lib/es/descriptions/foundation';
+import BaseComponent from '../_base/baseComponent';
 const prefixCls = cssClasses.PREFIX;
-class Descriptions extends PureComponent {
+class Descriptions extends BaseComponent {
+  constructor(props) {
+    super(props);
+    this.renderChildrenList = () => {
+      const props = this.props;
+      const {
+        layout,
+        data,
+        children
+      } = props;
+      if (layout === 'horizontal') {
+        const horizontalList = this.foundation.getHorizontalList();
+        return horizontalList.map((row, index) => {
+          return /*#__PURE__*/React.createElement("tr", {
+            key: index
+          }, row.map((item, itemIndex) => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, Object.assign({
+            itemKey: item.key
+          }, item, {
+            key: index + '-' + itemIndex
+          }), item.value) : null));
+        });
+      } else {
+        return data && data.length ? data.map((item, index) => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, Object.assign({
+          itemKey: item.key
+        }, item, {
+          key: index
+        }), item.value) : null) : children;
+      }
+    };
+    this.foundation = new DescriptionsFoundation(this.adapter);
+  }
+  get adapter() {
+    return Object.assign({}, super.adapter);
+  }
   render() {
     const _a = this.props,
       {
@@ -26,27 +61,26 @@ class Descriptions extends PureComponent {
         className,
         style,
         children,
-        data
+        data,
+        layout
       } = _a,
-      rest = __rest(_a, ["align", "row", "size", "className", "style", "children", "data"]);
+      rest = __rest(_a, ["align", "row", "size", "className", "style", "children", "data", "layout"]);
     const classNames = cls(prefixCls, className, {
       [`${prefixCls}-${align}`]: !row,
       [`${prefixCls}-double`]: row,
-      [`${prefixCls}-double-${size}`]: row
+      [`${prefixCls}-double-${size}`]: row,
+      [`${prefixCls}-horizontal`]: layout === 'horizontal',
+      [`${prefixCls}-vertical`]: layout === 'vertical'
     });
-    const childrenList = data && data.length ? data.map((item, index) => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, Object.assign({
-      itemKey: item.key
-    }, item, {
-      key: index
-    }), item.value) : null) : children;
     return /*#__PURE__*/React.createElement("div", Object.assign({
       className: classNames,
       style: style
     }, getDataAttr(rest)), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(DescriptionsContext.Provider, {
       value: {
-        align
+        align,
+        layout
       }
-    }, childrenList))));
+    }, this.renderChildrenList()))));
   }
 }
 Descriptions.Item = Item;
@@ -63,12 +97,16 @@ Descriptions.propTypes = {
     hidden: PropTypes.bool,
     className: PropTypes.string,
     style: PropTypes.object
-  }))
+  })),
+  layout: PropTypes.oneOf(strings.LAYOUT_SET),
+  column: PropTypes.number
 };
 Descriptions.defaultProps = {
   align: 'center',
   row: false,
   size: 'medium',
-  data: []
+  data: [],
+  layout: 'vertical',
+  column: 3
 };
 export default Descriptions;

package/lib/es/descriptions/item.d.ts

@@ -8,6 +8,7 @@ export interface DescriptionsItemProps {
     children?: React.ReactNode | (() => React.ReactNode);
     style?: React.CSSProperties;
     itemKey?: React.ReactNode;
+    span?: number;
 }
 export default class Item extends PureComponent<DescriptionsItemProps> {
     static propTypes: {

package/lib/es/descriptions/item.js

@@ -22,38 +22,45 @@ export default class Item extends PureComponent {
         itemKey,
         hidden,
         className,
+        span,
         style,
         children
       } = _a,
-      rest = __rest(_a, ["itemKey", "hidden", "className", "style", "children"]);
+      rest = __rest(_a, ["itemKey", "hidden", "className", "span", "style", "children"]);
     const {
-      align
+      align,
+      layout
     } = this.context;
     if (hidden) {
       return null;
     }
-    const item = align === 'plain' ? /*#__PURE__*/React.createElement("tr", Object.assign({
-      className: className,
-      style: style
-    }, getDataAttr(rest)), /*#__PURE__*/React.createElement("td", {
-      className: `${prefixCls}-item`
+    const plainItem = /*#__PURE__*/React.createElement("td", {
+      className: `${prefixCls}-item`,
+      colSpan: span || 1
     }, /*#__PURE__*/React.createElement("span", {
       className: keyCls
     }, itemKey, ":"), /*#__PURE__*/React.createElement("span", {
       className: valCls
-    }, typeof children === 'function' ? children() : children))) : /*#__PURE__*/React.createElement("tr", Object.assign({
-      className: className,
-      style: style
-    }, getDataAttr(rest)), /*#__PURE__*/React.createElement("th", {
+    }, typeof children === 'function' ? children() : children));
+    const alignItem = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", {
       className: `${prefixCls}-item ${prefixCls}-item-th`
     }, /*#__PURE__*/React.createElement("span", {
       className: keyCls
     }, itemKey)), /*#__PURE__*/React.createElement("td", {
-      className: `${prefixCls}-item ${prefixCls}-item-td`
+      className: `${prefixCls}-item ${prefixCls}-item-td`,
+      colSpan: span || 1
     }, /*#__PURE__*/React.createElement("span", {
       className: valCls
     }, typeof children === 'function' ? children() : children)));
-    return item;
+    const item = align === 'plain' ? /*#__PURE__*/React.createElement("tr", Object.assign({
+      className: className,
+      style: style
+    }, getDataAttr(rest)), plainItem) : /*#__PURE__*/React.createElement("tr", Object.assign({
+      className: className,
+      style: style
+    }, getDataAttr(rest)), alignItem);
+    const horizontalItem = align === 'plain' ? plainItem : alignItem;
+    return layout === 'horizontal' ? horizontalItem : item;
   }
 }
 Item.propTypes = {

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

@@ -71,6 +71,7 @@ export interface PreviewProps extends BaseProps {
     onRatioChange?: (type: RatioType) => void;
     onRotateLeft?: (angle: number) => void;
     onDownload?: (src: string, index: number) => void;
+    onDownloadError?: (src: string) => void;
     setDownloadName?: (src: string) => string;
 }
 export interface PreviewInnerProps extends Omit<PreviewProps, "previewCls" | "previewStyle"> {

package/lib/es/image/previewInner.js

@@ -91,6 +91,12 @@ export default class PreviewInner extends BaseComponent {
         } = this.props;
         _isFunction(onDownload) && onDownload(src, index);
       },
+      notifyDownloadError: src => {
+        const {
+          onDownloadError
+        } = this.props;
+        _isFunction(onDownloadError) && onDownloadError(src);
+      },
       registerKeyDownListener: () => {
         window && window.addEventListener("keydown", this.handleKeyDown);
       },

package/lib/es/modal/Modal.d.ts

@@ -1,11 +1,11 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
 import ModalFoundation, { ModalAdapter, ModalProps, ModalState } from '@douyinfe/semi-foundation/lib/es/modal/modalFoundation';
 import PropTypes from 'prop-types';
-import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
+import React, { CSSProperties, ReactNode } from 'react';
 import BaseComponent from '../_base/baseComponent';
-import useModal from './useModal';
 import { ButtonProps } from '../button/Button';
-export declare const destroyFns: any[];
+import useModal from './useModal';
+export declare let destroyFns: any[];
 export type ConfirmType = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 export type Directions = 'ltr' | 'rtl';
 export type { ModalState };

package/lib/es/modal/Modal.js

@@ -7,22 +7,22 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React from 'react';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/modal/constants';
-import Button from '../button';
+import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
 import ModalFoundation from '@douyinfe/semi-foundation/lib/es/modal/modalFoundation';
-import ModalContent from './ModalContent';
-import Portal from '../_portal';
-import LocaleConsumer from '../locale/localeConsumer';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
+import React from 'react';
 import BaseComponent from '../_base/baseComponent';
-import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
-import useModal from './useModal';
 import CSSAnimation from "../_cssAnimation";
+import Portal from '../_portal';
 import { getDefaultPropsFromGlobalConfig, getScrollbarWidth } from '../_utils';
-export const destroyFns = [];
+import Button from '../button';
+import LocaleConsumer from '../locale/localeConsumer';
+import ModalContent from './ModalContent';
+import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
+import useModal from './useModal';
+export let destroyFns = [];
 class Modal extends BaseComponent {
   constructor(props) {
     super(props);
@@ -349,11 +349,12 @@ Modal.confirm = function (props) {
   return confirm(withConfirm(props));
 };
 Modal.destroyAll = function destroyAllFn() {
-  while (destroyFns.length) {
-    const close = destroyFns.pop();
+  for (let i = 0, len = destroyFns.length; i < len; i++) {
+    const close = destroyFns[i];
     if (close) {
       close();
     }
   }
+  destroyFns = [];
 };
 export default Modal;

package/lib/es/modal/confirm.d.ts

@@ -166,6 +166,7 @@ export declare function withError(props: ModalReactProps): {
     icon: string | number | boolean | React.ReactFragment | JSX.Element;
     closable?: boolean;
     onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    lazyRender?: boolean;
     bodyStyle?: React.CSSProperties;
     cancelButtonProps?: import("../button").BaseButtonProps;
     cancelText?: string;
@@ -180,7 +181,6 @@ export declare function withError(props: ModalReactProps): {
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     closeIcon?: React.ReactNode;
-    lazyRender?: boolean;
     fullScreen?: boolean;
     footerFill?: boolean;
     type: "error";

package/lib/es/toast/index.js

@@ -178,6 +178,9 @@ const createBaseToast = () => {
           ToastList.defaultOpts[pos] = opts[pos];
         }
       });
+      if (typeof opts.theme === 'string' && strings.themes.includes(opts.theme)) {
+        ToastList.defaultOpts.theme = opts.theme;
+      }
       if (typeof opts.zIndex === 'number') {
         ToastList.defaultOpts.zIndex = opts.zIndex;
       }

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) {
@@ -420,11 +422,11 @@ export default class Base extends Component {
       copied: false,
       // ellipsis
       // if text is overflow in container
-      isOverflowed: true,
+      isOverflowed: false,
       ellipsisContent: props.children,
       expanded: false,
       // if text is truncated with js
-      isTruncated: true,
+      isTruncated: false,
       prevChildren: null
     };
     this.wrapperRef = /*#__PURE__*/React.createRef();
@@ -445,7 +447,7 @@ export default class Base extends Component {
     newState.prevChildren = props.children;
     if (props.ellipsis && prevChildren !== props.children) {
       // reset ellipsis state if children update
-      newState.isOverflowed = true;
+      newState.isOverflowed = false;
       newState.ellipsisContent = props.children;
       newState.expanded = false;
       newState.isTruncated = true;

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.53.3",
+    "version": "2.54.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.53.3",
-        "@douyinfe/semi-animation-react": "2.53.3",
-        "@douyinfe/semi-foundation": "2.53.3",
-        "@douyinfe/semi-icons": "2.53.3",
-        "@douyinfe/semi-illustrations": "2.53.3",
-        "@douyinfe/semi-theme-default": "2.53.3",
+        "@douyinfe/semi-animation": "2.54.0",
+        "@douyinfe/semi-animation-react": "2.54.0",
+        "@douyinfe/semi-foundation": "2.54.0",
+        "@douyinfe/semi-icons": "2.54.0",
+        "@douyinfe/semi-illustrations": "2.54.0",
+        "@douyinfe/semi-theme-default": "2.54.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": "185222a3eca3ca40b81f143de74d980c12565406",
+    "gitHead": "30c24d26549ecb166625ef4f0a731235b71968fc",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",