@douyinfe/semi-ui 2.17.0 → 2.19.0-alpha.0

package/lib/cjs/tag/group.js

@@ -100,9 +100,10 @@ class TagGroup extends _react.PureComponent {
       tagList,
       size,
       mode,
-      avatarShape
+      avatarShape,
+      onTagClose
     } = this.props;
-    const renderTags = (0, _map.default)(tagList).call(tagList, (tag, index) => {
+    const renderTags = (0, _map.default)(tagList).call(tagList, tag => {
       if (mode === 'custom') {
         return tag;
       }
@@ -115,9 +116,24 @@ class TagGroup extends _react.PureComponent {
         tag.avatarShape = avatarShape;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
-        key: "".concat(index, "-tag")
-      }, tag));
+      if (!tag.tagKey) {
+        if (typeof tag.children === 'string' || typeof tag.children === 'number') {
+          tag.tagKey = tag.children;
+        } else {
+          tag.tagKey = Math.random();
+        }
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, tag, {
+        key: tag.tagKey,
+        onClose: (tagChildren, e, tagKey) => {
+          if (tag.onClose) {
+            tag.onClose(tagChildren, e, tagKey);
+          }
+
+          onTagClose && onTagClose(tagChildren, e, tagKey);
+        }
+      }));
     });
     return renderTags;
   }
@@ -150,7 +166,8 @@ TagGroup.defaultProps = {
   style: {},
   className: '',
   size: tagSize[0],
-  avatarShape: 'square'
+  avatarShape: 'square',
+  onTagClose: () => undefined
 };
 TagGroup.propTypes = {
   children: _propTypes.default.node,
@@ -161,6 +178,7 @@ TagGroup.propTypes = {
   tagList: _propTypes.default.array,
   size: _propTypes.default.oneOf(tagSize),
   mode: _propTypes.default.string,
+  onTagClose: _propTypes.default.func,
   showPopover: _propTypes.default.bool,
   popoverProps: _propTypes.default.object,
   avatarShape: _propTypes.default.oneOf(avatarShapeSet)

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

@@ -10,6 +10,7 @@ export default class Tag extends Component<TagProps, TagState> {
     static defaultProps: TagProps;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tagKey: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
         size: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
@@ -28,7 +29,7 @@ export default class Tag extends Component<TagProps, TagState> {
         visible: boolean;
     };
     setVisible(visible: boolean): void;
-    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode): void;
+    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode, tagKey: string | number): void;
     handleKeyDown(event: any): void;
     renderAvatar(): JSX.Element;
     render(): JSX.Element;

package/lib/cjs/tag/index.js

@@ -118,13 +118,13 @@ class Tag extends _react.Component {
     }
   }
 
-  close(e, value) {
+  close(e, value, tagKey) {
     const {
       onClose
     } = this.props;
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    onClose && onClose(value, e); // when user call e.preventDefault() in onClick callback, tag will not hidden
+    onClose && onClose(value, e, tagKey); // when user call e.preventDefault() in onClick callback, tag will not hidden
 
     if (e.defaultPrevented) {
       return;
@@ -143,7 +143,7 @@ class Tag extends _react.Component {
     switch (event.key) {
       case "Backspace":
       case "Delete":
-        closable && this.close(event, this.props.children);
+        closable && this.close(event, this.props.children, this.props.tagKey);
         (0, _a11y.handlePrevent)(event);
         break;
 
@@ -182,6 +182,7 @@ class Tag extends _react.Component {
 
     const _a = this.props,
           {
+      tagKey,
       children,
       size,
       color,
@@ -195,7 +196,7 @@ class Tag extends _react.Component {
       avatarShape,
       tabIndex
     } = _a,
-          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
+          attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
 
     const {
       visible: isVisible
@@ -226,7 +227,7 @@ class Tag extends _react.Component {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     _react.default.createElement("div", {
       className: "".concat(prefixCls, "-close"),
-      onClick: e => this.close(e, children)
+      onClick: e => this.close(e, children, tagKey)
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
       size: "small"
     })) : null;
@@ -254,6 +255,7 @@ Tag.defaultProps = {
 };
 Tag.propTypes = {
   children: _propTypes.default.node,
+  tagKey: _propTypes.default.oneOf([_propTypes.default.string, _propTypes.default.number]),
   size: _propTypes.default.oneOf(tagSize),
   color: _propTypes.default.oneOf(tagColors),
   type: _propTypes.default.oneOf(tagType),

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

@@ -5,12 +5,13 @@ export declare type TagSize = 'default' | 'small' | 'large';
 export declare type AvatarShape = 'circle' | 'square';
 export interface TagProps {
     children?: React.ReactNode;
+    tagKey?: string | number;
     size?: TagSize;
     color?: TagColor;
     type?: TagType;
     closable?: boolean;
     visible?: boolean;
-    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     style?: React.CSSProperties;
     className?: string;

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

@@ -6,7 +6,7 @@ import BaseComponent from '../_base/baseComponent';
 import Input from '../input/index';
 import TreeNode from './treeNode';
 import '@douyinfe/semi-foundation/lib/cjs/tree/tree.css';
-import { TreeProps, TreeState, TreeNodeProps, TreeNodeData, FlattenNode, KeyEntity } from './interface';
+import { TreeProps, TreeState, TreeNodeProps, TreeNodeData, FlattenNode, KeyEntity, ScrollData } from './interface';
 export * from './interface';
 export { AutoSizerProps } from './autoSizer';
 declare class Tree extends BaseComponent<TreeProps, TreeState> {
@@ -102,6 +102,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
     onNodeClick: any;
     onMotionEnd: any;
     context: ContextValue;
+    virtualizedListRef: React.RefObject<any>;
     constructor(props: TreeProps);
     /**
      * Process of getDerivedStateFromProps was inspired by rc-tree
@@ -110,6 +111,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
     static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState>;
     get adapter(): TreeAdapter;
     search: (value: string) => void;
+    scrollTo: (scrollData: ScrollData) => void;
     renderInput(): JSX.Element;
     renderEmpty: () => JSX.Element;
     onNodeSelect: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;

package/lib/cjs/tree/index.js

@@ -17,6 +17,8 @@ _Object$defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports.default = void 0;
 
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
 var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
 
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
@@ -101,6 +103,25 @@ class Tree extends _baseComponent.default {
       this.foundation.handleInputChange(value);
     };
 
+    this.scrollTo = scrollData => {
+      var _a;
+
+      const {
+        key,
+        align = 'center'
+      } = scrollData;
+      const {
+        flattenNodes
+      } = this.state;
+
+      if (key) {
+        const index = flattenNodes === null || flattenNodes === void 0 ? void 0 : (0, _findIndex.default)(flattenNodes).call(flattenNodes, node => {
+          return node.key === key;
+        });
+        index >= 0 && ((_a = this.virtualizedListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index, align));
+      }
+    };
+
     this.renderEmpty = () => {
       const {
         emptyContent
@@ -262,6 +283,7 @@ class Tree extends _baseComponent.default {
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
     this.foundation = new _foundation.default(this.adapter);
     this.dragNode = null;
+    this.virtualizedListRef = /*#__PURE__*/_react.default.createRef();
   }
   /**
    * Process of getDerivedStateFromProps was inspired by rc-tree
@@ -634,6 +656,7 @@ class Tree extends _baseComponent.default {
         width
       } = _ref4;
       return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
+        ref: this.virtualizedListRef,
         itemCount: flattenNodes.length,
         itemSize: virtualize.itemSize,
         height: height,

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

@@ -118,3 +118,7 @@ export interface NodeListState {
     cachedMotionKeys?: Set<string>;
     cachedData?: FlattenNode[];
 }
+export interface ScrollData {
+    key: string;
+    align?: 'center' | 'start' | 'end' | 'smart' | 'auto';
+}

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

@@ -55,7 +55,10 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     isLeaf: () => boolean;
     isDisabled: () => boolean;
     renderArrow(): JSX.Element;
-    renderCheckbox(): JSX.Element;
+    renderCheckbox(options: {
+        label: React.ReactNode;
+        icon: React.ReactNode;
+    }): JSX.Element;
     renderIcon(): any;
     renderEmptyNode(): JSX.Element;
     renderRealLabel: () => any;

package/lib/cjs/tree/treeNode.js

@@ -339,7 +339,11 @@ class TreeNode extends _react.PureComponent {
     });
   }
 
-  renderCheckbox() {
+  renderCheckbox(options) {
+    const {
+      label,
+      icon
+    } = options;
     const {
       checked,
       halfChecked,
@@ -356,7 +360,7 @@ class TreeNode extends _react.PureComponent {
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)
-    }));
+    }, icon, label));
   }
 
   renderIcon() {
@@ -524,6 +528,8 @@ class TreeNode extends _react.PureComponent {
     });
     const setsize = (0, _get2.default)(rest, ['data', 'children', 'length']);
     const posinset = (0, _isString2.default)(rest.pos) ? Number(rest.pos.split('-')[level + 1]) + 1 : 1;
+    const label = this.renderRealLabel();
+    const icon = this.renderIcon();
     return /*#__PURE__*/_react.default.createElement("li", (0, _assign.default)({
       className: nodeCls,
       role: "treeitem",
@@ -543,9 +549,12 @@ class TreeNode extends _react.PureComponent {
       style: style
     }, dragProps), this.renderArrow(), /*#__PURE__*/_react.default.createElement("span", {
       className: labelCls
-    }, multiple ? this.renderCheckbox() : null, this.renderIcon(), /*#__PURE__*/_react.default.createElement("span", {
+    }, multiple ? this.renderCheckbox({
+      label,
+      icon
+    }) : null, !multiple && icon, !multiple && /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(prefixcls, "-label-text")
-    }, this.renderRealLabel())));
+    }, label)));
   }
 
 }

package/lib/es/_base/base.css

@@ -1,6 +1,41 @@
 /* shadow */
 /* sizing */
 /* spacing */
+body {
+  --semi-transition_duration-slowest:0ms;
+  --semi-transition_duration-slower:0ms;
+  --semi-transition_duration-slow:0ms;
+  --semi-transition_duration-normal:0ms;
+  --semi-transition_duration-fast:0ms;
+  --semi-transition_duration-faster:0ms;
+  --semi-transition_duration-fastest:0ms;
+  --semi-transition_function-linear:linear;
+  --semi-transition_function-ease:ease;
+  --semi-transition_function-easeIn:ease-in;
+  --semi-transition_function-easeOut:ease-out;
+  --semi-transition_function-easeInIOut:ease-in-out;
+  --semi-transition_delay-slowest:0ms;
+  --semi-transition_delay-slower:0ms;
+  --semi-transition_delay-slow:0ms;
+  --semi-transition_delay-normal:0ms;
+  --semi-transition_delay-fast:0ms;
+  --semi-transition_delay-faster:0ms;
+  --semi-transition_delay-fastest:0ms;
+  --semi-transform_scale-none:scale(1,1);
+  --semi-transform_scale-small:scale(1,1);
+  --semi-transform_scale-medium:scale(1,1);
+  --semi-transform_scale-large:scale(1,1);
+  --semi-transform-rotate-none:rotate(0deg);
+  --semi-transform_rotate-clockwise90deg:rotate(90deg);
+  --semi-transform_rotate-clockwise180deg:rotate(180deg);
+  --semi-transform_rotate-clockwise270deg:rotate(270deg);
+  --semi-transform_rotate-clockwise360deg:rotate(360deg);
+  --semi-transform_rotate-anticlockwise90deg:rotate(-90deg);
+  --semi-transform_rotate-anticlockwise180deg:rotate(-180deg);
+  --semi-transform_rotate-anticlockwise270deg:rotate(-270deg);
+  --semi-transform_rotate-anticlockwise360deg:rotate(-360deg);
+}
+
 body,
 body .semi-always-light {
   --semi-amber-0: 254,251,235;

package/lib/es/anchor/index.js

@@ -273,7 +273,8 @@ class Anchor extends BaseComponent {
         top: slideBarTop
       }
     })), /*#__PURE__*/React.createElement("div", {
-      className: anchorWrapper
+      className: anchorWrapper,
+      role: "list"
     }, children)));
   }
 

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

@@ -36,6 +36,6 @@ export default class Link extends BaseComponent<LinkProps, {}> {
     componentDidUpdate(prevProps: LinkProps): void;
     componentWillUnmount(): void;
     renderTitle: () => string | number | boolean | React.ReactFragment | JSX.Element;
-    renderChildren: () => React.ReactNode;
+    renderChildren: () => JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/anchor/link.js

@@ -65,10 +65,14 @@ export default class Link extends BaseComponent {
       } = this.props;
 
       if (!this.context.autoCollapse) {
-        return this.props.children;
+        return /*#__PURE__*/React.createElement("div", {
+          role: "list"
+        }, children);
       }
 
-      return activeLink === href || childMap[href] && childMap[href].has(activeLink) ? children : null;
+      return activeLink === href || childMap[href] && childMap[href].has(activeLink) ? /*#__PURE__*/React.createElement("div", {
+        role: "list"
+      }, children) : null;
     };
 
     this.foundation = new LinkFoundation(this.adapter);
@@ -144,8 +148,7 @@ export default class Link extends BaseComponent {
       ["".concat(prefixCls, "-link-title-disabled")]: disabled
     });
     const ariaProps = {
-      'aria-disabled': disabled,
-      'aria-label': href
+      'aria-disabled': disabled
     };
 
     if (active) {
@@ -158,7 +161,8 @@ export default class Link extends BaseComponent {
 
     return /*#__PURE__*/React.createElement("div", {
       className: linkCls,
-      style: style
+      style: style,
+      role: "listitem"
     }, /*#__PURE__*/React.createElement("div", _Object$assign({
       role: "link",
       tabIndex: 0

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { AutoCompleteAdapter, StateOptionItem, DataItem } from '@douyinfe/semi-foundation/lib/es/autoComplete/foundation';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { Position } from '../tooltip';
-import Option from '../select/option';
+import Option from './option';
 import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
 import { Motion } from '../_base/base';
 /**

package/lib/es/autoComplete/index.js

@@ -19,7 +19,7 @@ import Spin from '../spin';
 import Popover from '../popover';
 import Input from '../input';
 import Trigger from '../trigger';
-import Option from '../select/option';
+import Option from './option';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
 const prefixCls = cssClasses.PREFIX;
@@ -195,7 +195,7 @@ class AutoComplete extends BaseComponent {
     } = this.state;
     const useCustomTrigger = typeof triggerRender === 'function';
 
-    const outerProps = _Object$assign({
+    const outerProps = _Object$assign(_Object$assign({
       style,
       className: useCustomTrigger ? cls(className) : cls({
         [prefixCls]: true,
@@ -204,7 +204,10 @@ class AutoComplete extends BaseComponent {
       onClick: this.handleInputClick,
       ref: this.triggerRef,
       id
-    }, keyboardEventSet);
+    }, keyboardEventSet), {
+      // tooltip give tabindex 0 to children by default, autoComplete just need the input get focus, so outer div's tabindex set to -1
+      tabIndex: -1
+    });
 
     const innerProps = {
       disabled,

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

@@ -0,0 +1,50 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { BasicOptionProps } from '@douyinfe/semi-foundation/lib/es/autoComplete/optionFoundation';
+export interface OptionProps extends BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | React.ReactNode;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface renderOptionContentArgument {
+    config: {
+        searchWords: any;
+        sourceString: React.ReactNode;
+    };
+    children: React.ReactNode;
+    inputValue: string;
+    prefixCls: string;
+}
+declare class Option extends PureComponent<OptionProps> {
+    static isSelectOption: boolean;
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string | number>;
+        selected: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        empty: PropTypes.Requireable<boolean>;
+        emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        focused: PropTypes.Requireable<boolean>;
+        showTick: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        prefixCls: PropTypes.Requireable<string>;
+        renderOptionItem: PropTypes.Requireable<(...args: any[]) => any>;
+        inputValue: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        prefixCls: string;
+    };
+    onClick({ value, label, children, ...rest }: Partial<OptionProps>, event: React.MouseEvent): void;
+    renderOptionContent({ config, children, inputValue, prefixCls }: renderOptionContentArgument): React.ReactNode;
+    render(): any;
+}
+export default Option;

package/lib/es/autoComplete/option.js

@@ -0,0 +1,188 @@
+import _isString from "lodash/isString";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable max-len */
+
+
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/autoComplete/constants';
+import LocaleConsumer from '../locale/localeConsumer';
+import { IconTick } from '@douyinfe/semi-icons';
+import { getHighLightTextHTML } from '../_utils/index';
+
+class Option extends PureComponent {
+  onClick(_a, event) {
+    var {
+      value,
+      label,
+      children
+    } = _a,
+        rest = __rest(_a, ["value", "label", "children"]);
+
+    const {
+      props
+    } = this;
+    const isDisabled = props.disabled;
+
+    if (!isDisabled) {
+      props.onSelect(_Object$assign(_Object$assign({}, rest), {
+        value,
+        label: label || children
+      }), event);
+    }
+  }
+
+  renderOptionContent(_ref) {
+    let {
+      config,
+      children,
+      inputValue,
+      prefixCls
+    } = _ref;
+
+    if (_isString(children) && inputValue) {
+      return getHighLightTextHTML(config);
+    }
+
+    return children;
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      children,
+      disabled,
+      value,
+      selected,
+      label,
+      empty,
+      emptyContent,
+      onSelect,
+      focused,
+      showTick,
+      className,
+      style,
+      onMouseEnter,
+      prefixCls,
+      renderOptionItem,
+      inputValue
+    } = _a,
+          rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue"]);
+
+    const optionClassName = classNames(prefixCls, {
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-selected")]: selected,
+      ["".concat(prefixCls, "-focused")]: focused,
+      ["".concat(prefixCls, "-empty")]: empty,
+      [className]: className
+    });
+    const selectedIconClassName = classNames(["".concat(prefixCls, "-icon")]);
+
+    if (empty) {
+      if (emptyContent === null) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(LocaleConsumer, {
+        componentName: "Select"
+      }, locale => /*#__PURE__*/React.createElement("div", {
+        className: optionClassName,
+        "x-semi-prop": "emptyContent"
+      }, emptyContent || locale.emptyText));
+    } // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
+
+
+    if (typeof renderOptionItem === 'function') {
+      return renderOptionItem(_Object$assign({
+        disabled,
+        focused,
+        selected,
+        style,
+        label,
+        value,
+        inputValue,
+        onMouseEnter: e => onMouseEnter(e),
+        onClick: e => this.onClick(_Object$assign({
+          value,
+          label,
+          children
+        }, rest), e)
+      }, rest));
+    }
+
+    const config = {
+      searchWords: inputValue,
+      sourceString: children,
+      option: {
+        highlightClassName: "".concat(prefixCls, "-keyword")
+      }
+    };
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events
+      React.createElement("div", {
+        className: optionClassName,
+        onClick: e => {
+          this.onClick(_Object$assign({
+            value,
+            label,
+            children
+          }, rest), e);
+        },
+        onMouseEnter: e => onMouseEnter && onMouseEnter(e),
+        role: "option",
+        "aria-selected": selected ? "true" : "false",
+        "aria-disabled": disabled ? "true" : "false",
+        style: style
+      }, showTick ? /*#__PURE__*/React.createElement("div", {
+        className: selectedIconClassName
+      }, /*#__PURE__*/React.createElement(IconTick, null)) : null, _isString(children) ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-text")
+      }, this.renderOptionContent({
+        children,
+        config,
+        inputValue,
+        prefixCls
+      })) : children)
+    );
+  }
+
+}
+
+Option.isSelectOption = true;
+Option.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  selected: PropTypes.bool,
+  label: PropTypes.node,
+  empty: PropTypes.bool,
+  emptyContent: PropTypes.node,
+  onSelect: PropTypes.func,
+  focused: PropTypes.bool,
+  showTick: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onMouseEnter: PropTypes.func,
+  prefixCls: PropTypes.string,
+  renderOptionItem: PropTypes.func,
+  inputValue: PropTypes.string
+};
+Option.defaultProps = {
+  prefixCls: cssClasses.PREFIX_OPTION
+};
+export default Option;