@douyinfe/semi-ui 2.43.1 → 2.44.0-beta.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/popconfirm/index.js

@@ -58,6 +58,11 @@ class Popconfirm extends _baseComponent.default {
       });
       const showTitle = title !== null && typeof title !== 'undefined';
       const showContent = !(content === null || typeof content === 'undefined');
+      const hasIcon = /*#__PURE__*/_react.default.isValidElement(icon);
+      const bodyCls = (0, _classnames.default)({
+        [`${prefixCls}-body`]: true,
+        [`${prefixCls}-body-withIcon`]: hasIcon
+      });
       return (
         /*#__PURE__*/
         /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
@@ -69,10 +74,10 @@ class Popconfirm extends _baseComponent.default {
           className: `${prefixCls}-inner`
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: `${prefixCls}-header`
-        }, /*#__PURE__*/_react.default.createElement("i", {
+        }, hasIcon ? /*#__PURE__*/_react.default.createElement("i", {
           className: `${prefixCls}-header-icon`,
           "x-semi-prop": "icon"
-        }, /*#__PURE__*/_react.default.isValidElement(icon) ? icon : null), /*#__PURE__*/_react.default.createElement("div", {
+        }, icon) : null, /*#__PURE__*/_react.default.createElement("div", {
           className: `${prefixCls}-header-body`
         }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
           className: `${prefixCls}-header-title`,
@@ -85,7 +90,7 @@ class Popconfirm extends _baseComponent.default {
           type: cancelType,
           onClick: this.handleCancel
         })), showContent ? /*#__PURE__*/_react.default.createElement("div", {
-          className: `${prefixCls}-body`,
+          className: bodyCls,
           "x-semi-prop": "content"
         }, (0, _isFunction2.default)(content) ? content({
           initialFocusRef

package/lib/cjs/table/ColumnFilter.js

@@ -104,7 +104,8 @@ function renderDropdown() {
     dropdownProps.visible = filterDropdownVisible;
   }
   return /*#__PURE__*/_react.default.createElement(_dropdown.default, Object.assign({}, dropdownProps, {
-    key: `Dropdown_level_${level}`
+    key: `Dropdown_level_${level}`,
+    className: `${_constants.cssClasses.PREFIX}-column-filter-dropdown`
   }), nestedElem);
 }
 function ColumnFilter() {

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

@@ -18,6 +18,8 @@ export default class Tag extends Component<TagProps, TagState> {
         visible: PropTypes.Requireable<boolean>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        prefixIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        suffixIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         avatarSrc: PropTypes.Requireable<string>;

package/lib/cjs/tag/index.js

@@ -131,9 +131,11 @@ class Tag extends _react.Component {
         shape,
         avatarSrc,
         avatarShape,
-        tabIndex
+        tabIndex,
+        prefixIcon,
+        suffixIcon
       } = _a,
-      attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "shape", "avatarSrc", "avatarShape", "tabIndex"]);
+      attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "shape", "avatarSrc", "avatarShape", "tabIndex", "prefixIcon", "suffixIcon"]);
     const {
       visible: isVisible
     } = this.state;
@@ -174,9 +176,13 @@ class Tag extends _react.Component {
     const contentCls = (0, _classnames.default)(`${prefixCls}-content`, `${prefixCls}-content-${stringChild ? 'ellipsis' : 'center'}`);
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({
       "aria-label": this.props['aria-label'] || stringChild ? `${closable ? 'Closable ' : ''}Tag: ${children}` : ''
-    }, wrapProps), avatarSrc ? this.renderAvatar() : null, /*#__PURE__*/_react.default.createElement("div", {
+    }, wrapProps), prefixIcon ? /*#__PURE__*/_react.default.createElement("div", {
+      className: `${prefixCls}-prefix-icon`
+    }, prefixIcon) : null, avatarSrc ? this.renderAvatar() : null, /*#__PURE__*/_react.default.createElement("div", {
       className: contentCls
-    }, children), closeIcon);
+    }, children), suffixIcon ? /*#__PURE__*/_react.default.createElement("div", {
+      className: `${prefixCls}-suffix-icon`
+    }, suffixIcon) : null, closeIcon);
   }
 }
 exports.default = Tag;
@@ -192,7 +198,9 @@ Tag.defaultProps = {
   style: {},
   className: '',
   shape: 'square',
-  avatarShape: 'square'
+  avatarShape: 'square',
+  prefixIcon: null,
+  suffixIcon: null
 };
 Tag.propTypes = {
   children: _propTypes.default.node,
@@ -204,6 +212,8 @@ Tag.propTypes = {
   visible: _propTypes.default.bool,
   onClose: _propTypes.default.func,
   onClick: _propTypes.default.func,
+  prefixIcon: _propTypes.default.node,
+  suffixIcon: _propTypes.default.node,
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   avatarSrc: _propTypes.default.string,

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { PopoverProps } from '../popover/index';
 export type TagColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'indigo' | 'light-blue' | 'light-green' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'violet' | 'yellow' | 'white';
 export type TagType = 'ghost' | 'solid' | 'light';
@@ -15,6 +15,8 @@ export interface TagProps {
     visible?: boolean;
     onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    prefixIcon?: React.ReactNode;
+    suffixIcon?: React.ReactNode;
     style?: React.CSSProperties;
     className?: string;
     avatarSrc?: string;

package/lib/cjs/tooltip/index.js

@@ -239,9 +239,11 @@ class Tooltip extends _baseComponent.default {
       } = this.props;
       const display = (0, _get2.default)(elem, 'props.style.display');
       const block = (0, _get2.default)(elem, 'props.block');
-      const style = {
-        display: 'inline-block'
-      };
+      const isStringElem = typeof elem == 'string';
+      const style = {};
+      if (!isStringElem) {
+        style.display = 'inline-block';
+      }
       if (block || blockDisplays.includes(display)) {
         style.width = '100%';
       }

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;

package/lib/es/cascader/item.js

@@ -9,6 +9,8 @@ import LocaleConsumer from '../locale/localeConsumer';
 import { IconChevronRight, IconTick } from '@douyinfe/semi-icons';
 import Spin from '../spin';
 import Checkbox from '../checkbox';
+import { FixedSizeList as List } from 'react-window';
+import VirtualRow from './virtualRow';
 const prefixcls = cssClasses.PREFIX_OPTION;
 export default class Item extends PureComponent {
   constructor() {
@@ -129,72 +131,106 @@ export default class Item extends 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 = cls(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.cloneElement(item, otherProps);
+      }
+      return /*#__PURE__*/React.createElement("li", {
+        role: 'menuitem',
+        className: className,
+        style: style,
+        key: key,
+        onClick: onClick,
+        onKeyPress: onKeyPress
+      }, /*#__PURE__*/React.createElement("span", {
+        className: `${prefixcls}-label`
+      }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
+        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.createElement("ul", {
         className: `${prefixcls}-list`,
         key: 'flatten-list'
-      }, data.map(item => {
-        const {
-          searchText,
-          key,
-          disabled,
-          pathData
-        } = item;
-        const selected = selectedKeys.has(key);
-        const className = cls(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.cloneElement(filterRender(props), {
-            key
-          });
-        }
-        return /*#__PURE__*/React.createElement("li", {
-          role: 'menuitem',
-          className: className,
-          key: key,
-          onClick: onClick,
-          onKeyPress: onKeyPress
-        }, /*#__PURE__*/React.createElement("span", {
-          className: `${prefixcls}-label`
-        }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
-          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.createElement(List, {
+        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);
+    };
   }
   renderItem(renderData) {
     let content = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -323,7 +359,8 @@ Item.propTypes = {
   halfCheckedKeys: PropTypes.object,
   onItemCheckboxClick: PropTypes.func,
   separator: PropTypes.string,
-  keyword: PropTypes.string
+  keyword: PropTypes.string,
+  virtualize: PropTypes.object
 };
 Item.defaultProps = {
   empty: false

package/lib/es/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/es/cascader/virtualRow.js

@@ -0,0 +1,14 @@
+const VirtualRow = _ref => {
+  let {
+    index,
+    data,
+    style
+  } = _ref;
+  const {
+    visibleOptions,
+    renderOption
+  } = data;
+  const option = visibleOptions[index];
+  return renderOption(option, index, style);
+};
+export default VirtualRow;