@douyinfe/semi-ui 2.42.3 → 2.43.0-alpha.0

package/lib/cjs/cascader/index.js

@@ -125,7 +125,8 @@ class Cascader extends _baseComponent.default {
         bottomSlot,
         showNext,
         multiple,
-        filterRender
+        filterRender,
+        virtualizeInSearch
       } = this.props;
       const searchable = Boolean(filterTreeNode) && isSearching;
       const popoverCls = (0, _classnames.default)(dropdownClassName, `${prefixcls}-popover`);
@@ -153,7 +154,8 @@ class Cascader extends _baseComponent.default {
         multiple: multiple,
         checkedKeys: checkedKeys,
         halfCheckedKeys: halfCheckedKeys,
-        filterRender: filterRender
+        filterRender: filterRender,
+        virtualize: virtualizeInSearch
       }), bottomSlot);
       return content;
     };

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

@@ -2,7 +2,7 @@ import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { ContextValue } from '../configProvider/context';
 import { CheckboxEvent } from '../checkbox';
-import { BasicCascaderData, BasicEntity, ShowNextType, BasicData } from '@douyinfe/semi-foundation/lib/cjs/cascader/foundation';
+import { BasicCascaderData, BasicEntity, ShowNextType, BasicData, Virtualize } from '@douyinfe/semi-foundation/lib/cjs/cascader/foundation';
 export interface CascaderData extends BasicCascaderData {
     label: React.ReactNode;
 }
@@ -52,6 +52,7 @@ export interface CascaderItemProps {
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
     filterRender?: (props: FilterRenderProps) => ReactNode;
+    virtualize?: Virtualize;
 }
 export default class Item extends PureComponent<CascaderItemProps> {
     static contextType: React.Context<ContextValue>;
@@ -68,6 +69,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;
         separator: PropTypes.Requireable<string>;
         keyword: PropTypes.Requireable<string>;
+        virtualize: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         empty: boolean;
@@ -87,7 +89,9 @@ export default class Item extends PureComponent<CascaderItemProps> {
     };
     renderIcon: (type: string, haveMarginLeft?: boolean) => JSX.Element;
     highlight: (searchText: React.ReactNode[]) => React.ReactNode[];
+    renderFlattenOptionItem: (data: Data, index?: number, style?: any) => JSX.Element;
     renderFlattenOption: (data: Data[]) => JSX.Element;
+    renderVirtualizeList: (visibleOptions: any) => JSX.Element;
     renderItem(renderData: Array<Entity>, content?: Array<React.ReactNode>): React.ReactNode[];
     renderEmpty(): JSX.Element;
     render(): JSX.Element;

package/lib/cjs/cascader/item.js

@@ -15,6 +15,8 @@ var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer")
 var _semiIcons = require("@douyinfe/semi-icons");
 var _spin = _interopRequireDefault(require("../spin"));
 var _checkbox = _interopRequireDefault(require("../checkbox"));
+var _reactWindow = require("react-window");
+var _virtualRow = _interopRequireDefault(require("./virtualRow"));
 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 }; }
@@ -138,72 +140,106 @@ class Item extends _react.PureComponent {
       });
       return content;
     };
-    this.renderFlattenOption = data => {
+    this.renderFlattenOptionItem = (data, index, style) => {
+      var _a;
       const {
         multiple,
         selectedKeys,
         checkedKeys,
         halfCheckedKeys,
         keyword,
-        filterRender
+        filterRender,
+        virtualize
+      } = this.props;
+      const {
+        searchText,
+        key,
+        disabled,
+        pathData
+      } = data;
+      const selected = selectedKeys.has(key);
+      const className = (0, _classnames.default)(prefixcls, {
+        [`${prefixcls}-flatten`]: true && !filterRender,
+        [`${prefixcls}-disabled`]: disabled,
+        [`${prefixcls}-select`]: selected && !multiple
+      });
+      const onClick = e => {
+        this.onClick(e, data);
+      };
+      const onKeyPress = e => this.handleItemEnterPress(e, data);
+      const onCheck = e => this.onCheckboxChange(e, data);
+      if (filterRender) {
+        const props = {
+          className,
+          inputValue: keyword,
+          disabled,
+          data: pathData,
+          checkStatus: {
+            checked: checkedKeys.has(data.key),
+            halfChecked: halfCheckedKeys.has(data.key)
+          },
+          selected,
+          onClick,
+          onCheck
+        };
+        const item = filterRender(props);
+        const otherProps = virtualize ? {
+          key,
+          style: Object.assign(Object.assign({}, (_a = item.props.style) !== null && _a !== void 0 ? _a : {}), style)
+        } : {
+          key
+        };
+        return /*#__PURE__*/_react.default.cloneElement(item, otherProps);
+      }
+      return /*#__PURE__*/_react.default.createElement("li", {
+        role: 'menuitem',
+        className: className,
+        style: style,
+        key: key,
+        onClick: onClick,
+        onKeyPress: onKeyPress
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: `${prefixcls}-label`
+      }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+        onChange: onCheck,
+        disabled: disabled,
+        indeterminate: halfCheckedKeys.has(data.key),
+        checked: checkedKeys.has(data.key),
+        className: `${prefixcls}-label-checkbox`
+      }), this.highlight(searchText)));
+    };
+    this.renderFlattenOption = data => {
+      const {
+        virtualize
       } = this.props;
       const content = /*#__PURE__*/_react.default.createElement("ul", {
         className: `${prefixcls}-list`,
         key: 'flatten-list'
-      }, data.map(item => {
-        const {
-          searchText,
-          key,
-          disabled,
-          pathData
-        } = item;
-        const selected = selectedKeys.has(key);
-        const className = (0, _classnames.default)(prefixcls, {
-          [`${prefixcls}-flatten`]: true && !filterRender,
-          [`${prefixcls}-disabled`]: disabled,
-          [`${prefixcls}-select`]: selected && !multiple
-        });
-        const onClick = e => {
-          this.onClick(e, item);
-        };
-        const onKeyPress = e => this.handleItemEnterPress(e, item);
-        const onCheck = e => this.onCheckboxChange(e, item);
-        if (filterRender) {
-          const props = {
-            className,
-            inputValue: keyword,
-            disabled,
-            data: pathData,
-            checkStatus: {
-              checked: checkedKeys.has(item.key),
-              halfChecked: halfCheckedKeys.has(item.key)
-            },
-            selected,
-            onClick,
-            onCheck
-          };
-          return /*#__PURE__*/_react.default.cloneElement(filterRender(props), {
-            key
-          });
-        }
-        return /*#__PURE__*/_react.default.createElement("li", {
-          role: 'menuitem',
-          className: className,
-          key: key,
-          onClick: onClick,
-          onKeyPress: onKeyPress
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: `${prefixcls}-label`
-        }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
-          onChange: onCheck,
-          disabled: disabled,
-          indeterminate: halfCheckedKeys.has(item.key),
-          checked: checkedKeys.has(item.key),
-          className: `${prefixcls}-label-checkbox`
-        }), this.highlight(searchText)));
-      }));
+      }, virtualize ? this.renderVirtualizeList(data) : data.map(item => this.renderFlattenOptionItem(item)));
       return content;
     };
+    this.renderVirtualizeList = visibleOptions => {
+      var _a;
+      const {
+        direction
+      } = this.context;
+      const {
+        virtualize
+      } = this.props;
+      return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
+        height: virtualize.height,
+        itemCount: visibleOptions.length,
+        itemSize: virtualize.itemSize,
+        itemData: {
+          visibleOptions,
+          renderOption: this.renderFlattenOptionItem
+        },
+        width: (_a = virtualize.width) !== null && _a !== void 0 ? _a : '100%',
+        style: {
+          direction
+        }
+      }, _virtualRow.default);
+    };
   }
   renderItem(renderData) {
     let content = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -333,7 +369,8 @@ Item.propTypes = {
   halfCheckedKeys: _propTypes.default.object,
   onItemCheckboxClick: _propTypes.default.func,
   separator: _propTypes.default.string,
-  keyword: _propTypes.default.string
+  keyword: _propTypes.default.string,
+  virtualize: _propTypes.default.object
 };
 Item.defaultProps = {
   empty: false

package/lib/cjs/cascader/virtualRow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface VirtualRowProps {
+    index: number;
+    data: Record<string, any>;
+    style?: React.CSSProperties;
+}
+declare const VirtualRow: ({ index, data, style }: VirtualRowProps) => any;
+export default VirtualRow;

package/lib/cjs/cascader/virtualRow.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const VirtualRow = _ref => {
+  let {
+    index,
+    data,
+    style
+  } = _ref;
+  const {
+    visibleOptions,
+    renderOption
+  } = data;
+  const option = visibleOptions[index];
+  return renderOption(option, index, style);
+};
+var _default = VirtualRow;
+exports.default = _default;

package/lib/cjs/dropdown/dropdownItem.js

@@ -44,7 +44,11 @@ class DropdownItem extends _baseComponent.default {
     const events = {};
     if (!disabled) {
       ['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
-        events[eventName] = this.props[eventName];
+        if (eventName === "onClick") {
+          events["onMouseDown"] = this.props[eventName];
+        } else {
+          events[eventName] = this.props[eventName];
+        }
       });
     }
     let tick = null;

package/lib/cjs/form/baseForm.d.ts

@@ -140,7 +140,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         preventScroll?: boolean;
         showRestTagsPopover?: boolean;
         restTagsPopoverProps?: import("../popover").PopoverProps;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/cjs/form/field.d.ts

@@ -86,7 +86,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     preventScroll?: boolean;
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: import("../popover").PopoverProps;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;

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

@@ -145,11 +145,11 @@ export declare function withError(props: ModalReactProps): {
     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;
     direction?: any;
+    motion?: boolean;
     mask?: boolean;
     visible?: boolean;
     zIndex?: number;
@@ -204,10 +204,10 @@ export declare function withError(props: ModalReactProps): {
         title?: string;
         name?: string;
         value?: string | number | readonly string[];
-        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         form?: string;
         slot?: string;
+        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         prefix?: string;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;

package/lib/cjs/table/ResizableTable.js

@@ -123,20 +123,25 @@ const ResizableTable = function () {
   };
   const resizableRender = function (col, index) {
     let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let originalHeaderCellProps = arguments.length > 3 ? arguments[3] : undefined;
     return Object.assign(Object.assign({}, col), {
-      onHeaderCell: column => ({
-        width: column.width,
-        onResize: handleResize(column),
-        onResizeStart: handleResizeStart(column),
-        onResizeStop: handleResizeStop(column)
-      })
+      onHeaderCell: column => {
+        return Object.assign(Object.assign({}, originalHeaderCellProps), {
+          width: column.width,
+          onResize: handleResize(column),
+          onResizeStart: handleResizeStart(column),
+          onResizeStop: handleResizeStop(column)
+        });
+      }
     });
   };
   const assignResizableRender = function () {
     let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     return Array.isArray(columns) && columns.length ? columns.map((col, index) => {
-      Object.assign(col, resizableRender(col, index, level));
+      var _a, _b;
+      const originalHeaderCellProps = (_b = (_a = col.onHeaderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, index, level)) !== null && _b !== void 0 ? _b : {};
+      Object.assign(col, resizableRender(col, index, level, originalHeaderCellProps));
       const children = col[childrenColumnName];
       if (Array.isArray(children) && children.length) {
         col[childrenColumnName] = assignResizableRender(children, level + 1);

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

@@ -61,7 +61,7 @@ export interface TreeProps extends BasicTreeProps {
     onExpand?: (expandedKeys: string[], expandedOtherProps: ExpandedOtherProps) => void;
     onLoad?: (loadedKeys?: Set<string>, treeNode?: TreeNodeData) => void;
     onContextMenu?: (e: MouseEvent, node: TreeNodeData) => void;
-    onSelect?: (selectedKeys: string, selected: boolean, selectedNode: TreeNodeData) => void;
+    onSelect?: (selectedKey: string, selected: boolean, selectedNode: TreeNodeData) => void;
     renderDraggingNode?: (nodeInstance: HTMLElement, node: TreeNodeData) => HTMLElement;
     renderFullLabel?: (renderFullLabelProps: RenderFullLabelProps) => ReactNode;
     renderLabel?: (label?: ReactNode, treeNode?: TreeNodeData) => ReactNode;

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

@@ -74,7 +74,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     stopPropagation?: boolean | string;
     restTagsPopoverProps?: PopoverProps;
     searchRender?: boolean | ((inputProps: InputProps) => React.ReactNode);
-    onSelect?: (selectedKeys: string, selected: boolean, selectedNode: TreeNodeData) => void;
+    onSelect?: (selectedKey: string, selected: boolean, selectedNode: TreeNodeData) => void;
     renderSelectedItem?: RenderSelectedItem;
     getPopupContainer?: () => HTMLElement;
     triggerRender?: (props?: TriggerRenderProps) => React.ReactNode;

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

@@ -8,6 +8,27 @@ export interface BaseTypographyProps extends BaseProps {
     delete?: boolean;
     disabled?: boolean;
     icon?: React.ReactNode;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     mark?: boolean;
     underline?: boolean;
@@ -125,8 +146,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
      * 获取文本的缩略class和style
      *
      * 截断类型：
-     *  - CSS 截断，仅在 rows=1 且没有 expandable、pos、suffix 时生效
-     *  - JS 截断，应对 CSS 无法阶段的场景
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - 非以上场景，启用 CSS 截断策略
      * 相关变量
      *  props:
      *      - ellipsis:
@@ -142,8 +163,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
      * Get the abbreviated class and style of the text
      *
      * Truncation type:
-     *  -CSS truncation, which only takes effect when rows = 1 and there is no expandable, pos, suffix
-     *  -JS truncation, dealing with scenarios where CSS cannot stage
+     *  -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
+     *  -Otherwise, enable the CSS ellipsis strategy
      * related variables
      *  props:
      *      -ellipsis:

package/lib/cjs/typography/base.js

@@ -218,8 +218,8 @@ class Base extends _react.Component {
      * 获取文本的缩略class和style
      *
      * 截断类型：
-     *  - CSS 截断，仅在 rows=1 且没有 expandable、pos、suffix 时生效
-     *  - JS 截断，应对 CSS 无法阶段的场景
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - 非以上场景，启用 CSS 截断策略
      * 相关变量
      *  props:
      *      - ellipsis:
@@ -235,8 +235,8 @@ class Base extends _react.Component {
      * Get the abbreviated class and style of the text
      *
      * Truncation type:
-     *  -CSS truncation, which only takes effect when rows = 1 and there is no expandable, pos, suffix
-     *  -JS truncation, dealing with scenarios where CSS cannot stage
+     *  -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
+     *  -Otherwise, enable the CSS ellipsis strategy
      * related variables
      *  props:
      *      -ellipsis:

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

@@ -9,6 +9,27 @@ export interface ParagraphProps extends Omit<React.HTMLAttributes<HTMLParagraphE
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
     disabled?: boolean;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     link?: LinkType;
     mark?: boolean;

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

@@ -11,6 +11,27 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, O
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
     disabled?: boolean;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     icon?: React.ReactNode | string;
     link?: LinkType;

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

@@ -18,6 +18,27 @@ export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement
     copyable?: CopyableConfig | boolean;
     delete?: boolean;
     disabled?: boolean;
+    /**
+     * ellipsis 用于设置截断相关参数.
+     * Ellipsis is used to set ellipsis related parameters.
+     * ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string.
+     * Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
+     * Please ensure that the content type of children is string.
+     * Semi 截断有两种策略， CSS 截断和 JS 截断。
+     * Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
+     *  - 当设置中间截断（pos='middle')、可展开（expandable)、有后缀（suffix 非空）、可复制（copyable），启用 JS 截断策略
+     *  - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
+     * the JS ellipsis strategy is enabled
+     *  - 非以上场景，启用 CSS 截断策略
+     *  - Otherwise, enable the CSS ellipsis strategy
+     *
+     * 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变， 容器尺寸不变的情况下，CSS 截断只涉及 1-2 次计算，js 截断基于二分法，可能涉及多次计算。
+     * In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
+     * CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
+     * 同时使用大量带有截断功能的 Typography 需注意性能消耗，如在 Table 中，可通过设置合理的页容量进行分页减少性能损耗
+     * Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
+     * you can reduce performance loss by setting a reasonable pageSize for paging
+     */
     ellipsis?: Ellipsis | boolean;
     heading?: ArrayElement<typeof strings.HEADING>;
     link?: LinkType;

package/lib/es/cascader/index.js

@@ -116,7 +116,8 @@ class Cascader extends BaseComponent {
         bottomSlot,
         showNext,
         multiple,
-        filterRender
+        filterRender,
+        virtualizeInSearch
       } = this.props;
       const searchable = Boolean(filterTreeNode) && isSearching;
       const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
@@ -144,7 +145,8 @@ class Cascader extends BaseComponent {
         multiple: multiple,
         checkedKeys: checkedKeys,
         halfCheckedKeys: halfCheckedKeys,
-        filterRender: filterRender
+        filterRender: filterRender,
+        virtualize: virtualizeInSearch
       }), bottomSlot);
       return content;
     };

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

@@ -2,7 +2,7 @@ import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { ContextValue } from '../configProvider/context';
 import { CheckboxEvent } from '../checkbox';
-import { BasicCascaderData, BasicEntity, ShowNextType, BasicData } from '@douyinfe/semi-foundation/lib/es/cascader/foundation';
+import { BasicCascaderData, BasicEntity, ShowNextType, BasicData, Virtualize } from '@douyinfe/semi-foundation/lib/es/cascader/foundation';
 export interface CascaderData extends BasicCascaderData {
     label: React.ReactNode;
 }
@@ -52,6 +52,7 @@ export interface CascaderItemProps {
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
     filterRender?: (props: FilterRenderProps) => ReactNode;
+    virtualize?: Virtualize;
 }
 export default class Item extends PureComponent<CascaderItemProps> {
     static contextType: React.Context<ContextValue>;
@@ -68,6 +69,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;
         separator: PropTypes.Requireable<string>;
         keyword: PropTypes.Requireable<string>;
+        virtualize: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         empty: boolean;
@@ -87,7 +89,9 @@ export default class Item extends PureComponent<CascaderItemProps> {
     };
     renderIcon: (type: string, haveMarginLeft?: boolean) => JSX.Element;
     highlight: (searchText: React.ReactNode[]) => React.ReactNode[];
+    renderFlattenOptionItem: (data: Data, index?: number, style?: any) => JSX.Element;
     renderFlattenOption: (data: Data[]) => JSX.Element;
+    renderVirtualizeList: (visibleOptions: any) => JSX.Element;
     renderItem(renderData: Array<Entity>, content?: Array<React.ReactNode>): React.ReactNode[];
     renderEmpty(): JSX.Element;
     render(): JSX.Element;