@douyinfe/semi-ui 2.53.3-alpha.0 → 2.54.0-beta.0

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

@@ -143,19 +143,19 @@ export declare function withWarning(props: ModalReactProps): {
     type: "warning";
 };
 export declare function withError(props: ModalReactProps): {
+    title?: React.ReactNode;
     children?: React.ReactNode;
-    motion?: boolean;
+    size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
     style?: React.CSSProperties;
     className?: string;
+    motion?: boolean;
     getPopupContainer?: () => HTMLElement;
     footer?: React.ReactNode;
     header?: React.ReactNode;
-    title?: React.ReactNode;
     direction?: any;
     mask?: boolean;
     visible?: boolean;
     zIndex?: number;
-    size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
     width?: string | number;
     height?: string | number;
     content?: React.ReactNode;
@@ -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/cjs/modal/modalFoundation").OKType;
     onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     closeIcon?: React.ReactNode;
-    lazyRender?: boolean;
     fullScreen?: boolean;
     footerFill?: boolean;
     type: "error";
@@ -205,12 +205,13 @@ export declare function withError(props: ModalReactProps): {
         onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
         'aria-label'?: string;
+        title?: string;
+        name?: string;
+        value?: string | number | readonly string[];
         onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
         onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
-        value?: string | number | readonly string[];
         form?: string;
         slot?: string;
-        title?: string;
         prefix?: string;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
@@ -379,7 +380,6 @@ export declare function withError(props: ModalReactProps): {
         suppressHydrationWarning?: boolean;
         accessKey?: string;
         autoFocus?: boolean;
-        name?: string;
         contextMenu?: string;
         dir?: string;
         draggable?: boolean | "true" | "false";
@@ -387,7 +387,7 @@ export declare function withError(props: ModalReactProps): {
         translate?: "no" | "yes";
         role?: React.AriaRole;
         contentEditable?: "inherit" | (boolean | "true" | "false");
-        inputMode?: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal";
+        inputMode?: "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal";
         nonce?: string;
         tabIndex?: number;
         content?: string;
@@ -430,7 +430,7 @@ export declare function withError(props: ModalReactProps): {
         'aria-current'?: boolean | "time" | "true" | "false" | "date" | "location" | "page" | "step";
         'aria-details'?: string;
         'aria-disabled'?: boolean | "true" | "false";
-        'aria-dropeffect'?: "none" | "link" | "copy" | "move" | "execute" | "popup";
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup";
         'aria-errormessage'?: string;
         'aria-flowto'?: string;
         'aria-grabbed'?: boolean | "true" | "false";

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

@@ -69,7 +69,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         tooltips: PropTypes.Requireable<string[]>;
         id: PropTypes.Requireable<string>;
         preventScroll: PropTypes.Requireable<boolean>;

package/lib/cjs/rating/item.d.ts

@@ -40,7 +40,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         disabled: PropTypes.Requireable<boolean>;
         count: PropTypes.Requireable<number>;
         ariaLabelPrefix: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         'aria-describedby': PropTypes.Requireable<string>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -45,7 +45,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         id: PropTypes.Requireable<string>;
     };

package/lib/cjs/table/Table.d.ts

@@ -60,7 +60,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         components: PropTypes.Requireable<any>;
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "middle">;
+        size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"center" | "left" | "right">;
@@ -297,7 +297,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showTotal?: boolean;
         pageSize?: number;
         pageSizeOpts?: number[];
-        size?: "small" | "default";
+        size?: "default" | "small";
         currentPage?: number;
         defaultCurrentPage?: number;
         onPageChange?: (currentPage: number) => void;

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<"small" | "default" | "middle">;
+        size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"center" | "left" | "right">;

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

@@ -97,7 +97,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<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "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

@@ -133,7 +133,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         secondStep: PropTypes.Requireable<number>;
         focusOnOpen: PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         stopPropagation: PropTypes.Requireable<boolean>;
         panels: PropTypes.Requireable<PropTypes.InferProps<{
             panelHeader: 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<"small" | "default" | "large">;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
         stopPropagation: import("prop-types").Requireable<boolean>;
         panels: import("prop-types").Requireable<import("prop-types").InferProps<{
             panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;

package/lib/cjs/toast/index.js

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

package/lib/cjs/typography/base.js

@@ -429,11 +429,11 @@ class Base extends _react.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.default.createRef();
@@ -454,10 +454,10 @@ class Base extends _react.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;
+      newState.isTruncated = false;
     }
     return newState;
   }

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

@@ -60,11 +60,11 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
-        heading: PropTypes.Requireable<4 | 2 | 5 | 1 | 3 | 6>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;
-        weight: PropTypes.Requireable<NonNullable<number | "bold" | "default" | "medium" | "light" | "regular" | "semibold">>;
+        weight: PropTypes.Requireable<NonNullable<number | "default" | "bold" | "medium" | "light" | "regular" | "semibold">>;
     };
     static defaultProps: {
         copyable: boolean;

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

@@ -40,7 +40,7 @@ declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
     static contextType: React.Context<ContextValue>;
     static Link: typeof Link;
     static PropTypes: {
-        size: PropTypes.Requireable<"small" | "default">;
+        size: PropTypes.Requireable<"default" | "small">;
         railTheme: PropTypes.Requireable<"primary" | "tertiary" | "muted">;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;

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

@@ -125,7 +125,7 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         showClear: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         style: PropTypes.Requireable<object>;
         stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
         maxHeight: PropTypes.Requireable<NonNullable<string | number>>;

package/lib/es/button/Button.d.ts

@@ -47,7 +47,7 @@ export default class Button extends PureComponent<ButtonProps> {
         disabled: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         type: PropTypes.Requireable<"warning" | "primary" | "secondary" | "danger" | "tertiary">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/button/buttonGroup.d.ts

@@ -18,7 +18,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         'aria-label': PropTypes.Requireable<string>;
     };

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

@@ -23,7 +23,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
         onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<"small" | "default" | "large">;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
         type: import("prop-types").Requireable<"warning" | "primary" | "secondary" | "danger" | "tertiary">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;

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

@@ -59,6 +59,7 @@ export interface CascaderProps extends BasicCascaderProps {
     onFocus?: (e: MouseEvent) => void;
     validateStatus?: ValidateStatus;
     position?: Position;
+    searchPosition?: string;
 }
 export interface CascaderState extends BasicCascaderInnerData {
     keyEntities: Entities;
@@ -143,6 +144,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         enableLeafClick: PropTypes.Requireable<boolean>;
         preventScroll: PropTypes.Requireable<boolean>;
         position: PropTypes.Requireable<string>;
+        searchPosition: PropTypes.Requireable<string>;
     };
     static defaultProps: any;
     options: any;
@@ -161,6 +163,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: CascaderProps): void;
+    search: (value: string) => void;
     handleInputChange: (value: string) => void;
     handleTagRemoveInTrigger: (pos: string) => void;
     handleTagClose: (tagChildren: React.ReactNode, e: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;

package/lib/es/cascader/index.js

@@ -31,6 +31,10 @@ const resetkey = 0;
 class Cascader extends BaseComponent {
   constructor(props) {
     super(props);
+    // ref method
+    this.search = value => {
+      this.handleInputChange(value);
+    };
     this.handleInputChange = value => {
       this.foundation.handleInputChange(value);
     };
@@ -217,12 +221,13 @@ class Cascader extends BaseComponent {
       const {
         placeholder,
         filterTreeNode,
-        multiple
+        multiple,
+        searchPosition
       } = this.props;
       const {
         checkedKeys
       } = this.state;
-      const searchable = Boolean(filterTreeNode);
+      const searchable = Boolean(filterTreeNode) && searchPosition === strings.SEARCH_POSITION_TRIGGER;
       if (!searchable) {
         if (multiple) {
           if (checkedKeys.size === 0) {
@@ -982,7 +987,8 @@ Cascader.propTypes = {
   leafOnly: PropTypes.bool,
   enableLeafClick: PropTypes.bool,
   preventScroll: PropTypes.bool,
-  position: PropTypes.string
+  position: PropTypes.string,
+  searchPosition: PropTypes.string
 };
 Cascader.defaultProps = getDefaultPropsFromGlobalConfig(Cascader.__SemiComponentName__, {
   borderless: false,
@@ -1013,6 +1019,7 @@ Cascader.defaultProps = getDefaultPropsFromGlobalConfig(Cascader.__SemiComponent
   onDropdownVisibleChange: _noop,
   onListScroll: _noop,
   enableLeafClick: false,
-  'aria-label': 'Cascader'
+  'aria-label': 'Cascader',
+  searchPosition: strings.SEARCH_POSITION_TRIGGER
 });
 export default Cascader;

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

@@ -9,6 +9,7 @@ export interface CollapsibleProps extends CollapsibleFoundationProps {
     isOpen?: boolean;
     duration?: number;
     keepDOM?: boolean;
+    lazyRender?: boolean;
     className?: string;
     style?: React.CSSProperties;
     collapseHeight?: number;

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/datePicker/datePicker.d.ts

@@ -59,7 +59,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-required': PropTypes.Requireable<boolean>;
         borderless: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;

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: {