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

package/lib/cjs/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/cjs/cascader/index.js

@@ -40,6 +40,10 @@ const resetkey = 0;
 class Cascader extends _baseComponent.default {
   constructor(props) {
     super(props);
+    // ref method
+    this.search = value => {
+      this.handleInputChange(value);
+    };
     this.handleInputChange = value => {
       this.foundation.handleInputChange(value);
     };
@@ -226,12 +230,13 @@ class Cascader extends _baseComponent.default {
       const {
         placeholder,
         filterTreeNode,
-        multiple
+        multiple,
+        searchPosition
       } = this.props;
       const {
         checkedKeys
       } = this.state;
-      const searchable = Boolean(filterTreeNode);
+      const searchable = Boolean(filterTreeNode) && searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER;
       if (!searchable) {
         if (multiple) {
           if (checkedKeys.size === 0) {
@@ -991,7 +996,8 @@ Cascader.propTypes = {
   leafOnly: _propTypes.default.bool,
   enableLeafClick: _propTypes.default.bool,
   preventScroll: _propTypes.default.bool,
-  position: _propTypes.default.string
+  position: _propTypes.default.string,
+  searchPosition: _propTypes.default.string
 };
 Cascader.defaultProps = (0, _utils.getDefaultPropsFromGlobalConfig)(Cascader.__SemiComponentName__, {
   borderless: false,
@@ -1022,7 +1028,8 @@ Cascader.defaultProps = (0, _utils.getDefaultPropsFromGlobalConfig)(Cascader.__S
   onDropdownVisibleChange: _noop2.default,
   onListScroll: _noop2.default,
   enableLeafClick: false,
-  'aria-label': 'Cascader'
+  'aria-label': 'Cascader',
+  searchPosition: _constants.strings.SEARCH_POSITION_TRIGGER
 });
 var _default = Cascader;
 exports.default = _default;

package/lib/cjs/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/cjs/collapsible/index.js

@@ -29,9 +29,8 @@ class Collapsible extends _baseComponent.default {
     this.isChildrenInRenderTree = () => {
       if (this.domRef.current) {
         return this.domRef.current.offsetHeight > 0;
-      } else {
-        return false;
       }
+      return false;
     };
     this.state = {
       domInRenderTree: false,
@@ -115,6 +114,7 @@ class Collapsible extends _baseComponent.default {
     const wrapperCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-wrapper`, {
       [`${_constants.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.default.createElement("div", Object.assign({
       className: wrapperCls,
       style: wrapperStyle,
@@ -133,7 +133,7 @@ class Collapsible extends _baseComponent.default {
         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";
@@ -142,6 +142,7 @@ Collapsible.defaultProps = (0, _utils.getDefaultPropsFromGlobalConfig)(Collapsib
   duration: 250,
   motion: true,
   keepDOM: false,
+  lazyRender: true,
   collapseHeight: 0,
   fade: false
 });

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/descriptions/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/descriptions/constants");
@@ -13,8 +13,8 @@ require("@douyinfe/semi-foundation/lib/cjs/descriptions/descriptions.css");
 var _getDataAttr = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getDataAttr"));
 var _descriptionsContext = _interopRequireDefault(require("./descriptions-context"));
 var _item = _interopRequireDefault(require("./item"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/descriptions/foundation"));
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -25,7 +25,40 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 const prefixCls = _constants.cssClasses.PREFIX;
-class Descriptions extends _react.PureComponent {
+class Descriptions extends _baseComponent.default {
+  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.default.createElement("tr", {
+            key: index
+          }, row.map((item, itemIndex) => (0, _isPlainObject2.default)(item) ? /*#__PURE__*/_react.default.createElement(_item.default, Object.assign({
+            itemKey: item.key
+          }, item, {
+            key: index + '-' + itemIndex
+          }), item.value) : null));
+        });
+      } else {
+        return data && data.length ? data.map((item, index) => (0, _isPlainObject2.default)(item) ? /*#__PURE__*/_react.default.createElement(_item.default, Object.assign({
+          itemKey: item.key
+        }, item, {
+          key: index
+        }), item.value) : null) : children;
+      }
+    };
+    this.foundation = new _foundation.default(this.adapter);
+  }
+  get adapter() {
+    return Object.assign({}, super.adapter);
+  }
   render() {
     const _a = this.props,
       {
@@ -35,27 +68,26 @@ class Descriptions extends _react.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 = (0, _classnames.default)(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) => (0, _isPlainObject2.default)(item) ? /*#__PURE__*/_react.default.createElement(_item.default, Object.assign({
-      itemKey: item.key
-    }, item, {
-      key: index
-    }), item.value) : null) : children;
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({
       className: classNames,
       style: style
     }, (0, _getDataAttr.default)(rest)), /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement(_descriptionsContext.default.Provider, {
       value: {
-        align
+        align,
+        layout
       }
-    }, childrenList))));
+    }, this.renderChildrenList()))));
   }
 }
 Descriptions.Item = _item.default;
@@ -72,13 +104,17 @@ Descriptions.propTypes = {
     hidden: _propTypes.default.bool,
     className: _propTypes.default.string,
     style: _propTypes.default.object
-  }))
+  })),
+  layout: _propTypes.default.oneOf(_constants.strings.LAYOUT_SET),
+  column: _propTypes.default.number
 };
 Descriptions.defaultProps = {
   align: 'center',
   row: false,
   size: 'medium',
-  data: []
+  data: [],
+  layout: 'vertical',
+  column: 3
 };
 var _default = Descriptions;
 exports.default = _default;

package/lib/cjs/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/cjs/descriptions/item.js

@@ -31,38 +31,45 @@ class Item extends _react.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.default.createElement("tr", Object.assign({
-      className: className,
-      style: style
-    }, (0, _getDataAttr.default)(rest)), /*#__PURE__*/_react.default.createElement("td", {
-      className: `${prefixCls}-item`
+    const plainItem = /*#__PURE__*/_react.default.createElement("td", {
+      className: `${prefixCls}-item`,
+      colSpan: span || 1
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: keyCls
     }, itemKey, ":"), /*#__PURE__*/_react.default.createElement("span", {
       className: valCls
-    }, typeof children === 'function' ? children() : children))) : /*#__PURE__*/_react.default.createElement("tr", Object.assign({
-      className: className,
-      style: style
-    }, (0, _getDataAttr.default)(rest)), /*#__PURE__*/_react.default.createElement("th", {
+    }, typeof children === 'function' ? children() : children));
+    const alignItem = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("th", {
       className: `${prefixCls}-item ${prefixCls}-item-th`
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: keyCls
     }, itemKey)), /*#__PURE__*/_react.default.createElement("td", {
-      className: `${prefixCls}-item ${prefixCls}-item-td`
+      className: `${prefixCls}-item ${prefixCls}-item-td`,
+      colSpan: span || 1
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: valCls
     }, typeof children === 'function' ? children() : children)));
-    return item;
+    const item = align === 'plain' ? /*#__PURE__*/_react.default.createElement("tr", Object.assign({
+      className: className,
+      style: style
+    }, (0, _getDataAttr.default)(rest)), plainItem) : /*#__PURE__*/_react.default.createElement("tr", Object.assign({
+      className: className,
+      style: style
+    }, (0, _getDataAttr.default)(rest)), alignItem);
+    const horizontalItem = align === 'plain' ? plainItem : alignItem;
+    return layout === 'horizontal' ? horizontalItem : item;
   }
 }
 exports.default = Item;

package/lib/cjs/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/cjs/image/previewInner.js

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

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

@@ -1,11 +1,11 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import '@douyinfe/semi-foundation/lib/cjs/modal/modal.css';
 import ModalFoundation, { ModalAdapter, ModalProps, ModalState } from '@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation';
 import PropTypes from 'prop-types';
-import '@douyinfe/semi-foundation/lib/cjs/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/cjs/modal/Modal.js

@@ -5,21 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.destroyFns = exports.default = void 0;
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-var _react = _interopRequireDefault(require("react"));
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/modal/constants");
-var _button = _interopRequireDefault(require("../button"));
+require("@douyinfe/semi-foundation/lib/cjs/modal/modal.css");
 var _modalFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation"));
-var _ModalContent = _interopRequireDefault(require("./ModalContent"));
-var _portal = _interopRequireDefault(require("../_portal"));
-var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-require("@douyinfe/semi-foundation/lib/cjs/modal/modal.css");
+var _react = _interopRequireDefault(require("react"));
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-var _confirm = _interopRequireWildcard(require("./confirm"));
-var _useModal = _interopRequireDefault(require("./useModal"));
 var _cssAnimation = _interopRequireDefault(require("../_cssAnimation"));
+var _portal = _interopRequireDefault(require("../_portal"));
 var _utils = require("../_utils");
+var _button = _interopRequireDefault(require("../button"));
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+var _ModalContent = _interopRequireDefault(require("./ModalContent"));
+var _confirm = _interopRequireWildcard(require("./confirm"));
+var _useModal = _interopRequireDefault(require("./useModal"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,7 +31,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-const destroyFns = [];
+let destroyFns = [];
 exports.destroyFns = destroyFns;
 class Modal extends _baseComponent.default {
   constructor(props) {
@@ -359,12 +359,13 @@ Modal.confirm = function (props) {
   return (0, _confirm.default)((0, _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();
     }
   }
+  exports.destroyFns = destroyFns = [];
 };
 var _default = Modal;
 exports.default = _default;

package/lib/cjs/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/cjs/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/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

@@ -433,7 +433,7 @@ class Base extends _react.Component {
       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/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/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;