@douyinfe/semi-ui 2.4.1 → 2.5.1

package/lib/cjs/upload/fileCard.js

@@ -30,7 +30,7 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 
-var _index = _interopRequireDefault(require("../iconButton/index"));
+var _index = _interopRequireDefault(require("../button/index"));
 
 var _index2 = _interopRequireDefault(require("../progress/index"));
 
@@ -200,6 +200,7 @@ class FileCard extends _react.PureComponent {
       onPreviewClick,
       showPicInfo,
       renderPicInfo,
+      renderPicPreviewIcon,
       renderThumbnail,
       name,
       index
@@ -207,6 +208,7 @@ class FileCard extends _react.PureComponent {
     const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
     const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
     const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
+    const showPreview = status === _constants.strings.FILE_STATUS_SUCCESS && !this.props.showReplace;
     const filePicCardCls = (0, _classnames.default)({
       ["".concat(prefixCls, "-picture-file-card")]: true,
       ["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
@@ -214,7 +216,6 @@ class FileCard extends _react.PureComponent {
       ["".concat(prefixCls, "-picture-file-card-error")]: status === _constants.strings.FILE_STATUS_UPLOAD_FAIL,
       ["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
     });
-    const closeCls = "".concat(prefixCls, "-picture-file-card-close");
 
     const retry = /*#__PURE__*/_react.default.createElement("div", {
       role: "button",
@@ -240,6 +241,19 @@ class FileCard extends _react.PureComponent {
       className: "".concat(prefixCls, "-picture-file-card-icon-replace")
     })));
 
+    const preview = /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-picture-file-card-preview")
+    }, typeof renderPicPreviewIcon === 'function' ? renderPicPreviewIcon(this.props) : null);
+
+    const close = /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: "".concat(prefixCls, "-picture-file-card-close"),
+      onClick: e => this.onRemove(e)
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, {
+      className: "".concat(prefixCls, "-picture-file-card-icon-close")
+    }));
+
     const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-picture-file-card-pic-info")
     }, index + 1);
@@ -258,14 +272,7 @@ class FileCard extends _react.PureComponent {
       size: "small",
       orbitStroke: '#FFF',
       "aria-label": "uploading file progress"
-    }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/_react.default.createElement("div", {
-      className: closeCls,
-      onClick: e => this.onRemove(e)
-    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
-      tabIndex: 0,
-      role: "button",
-      size: "extra-small"
-    })), this.renderPicValidateMsg());
+    }) : null, showRetry ? retry : null, showReplace && replace, showPreview && preview, showPicInfo && picInfo, !disabled && close, this.renderPicValidateMsg());
   }
 
   renderFile(locale) {
@@ -280,7 +287,8 @@ class FileCard extends _react.PureComponent {
       previewFile,
       status,
       style,
-      onPreviewClick
+      onPreviewClick,
+      renderFileOperation
     } = this.props;
     const fileCardCls = (0, _classnames.default)({
       ["".concat(prefixCls, "-file-card")]: true,
@@ -310,6 +318,14 @@ class FileCard extends _react.PureComponent {
       previewContent = previewFile(this.props);
     }
 
+    const operation = typeof renderFileOperation === 'function' ? renderFileOperation(this.props) : /*#__PURE__*/_react.default.createElement(_index.default, {
+      onClick: e => this.onRemove(e),
+      type: "tertiary",
+      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+      theme: "borderless",
+      size: "small",
+      className: closeCls
+    });
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "listitem",
       className: fileCardCls,
@@ -352,29 +368,22 @@ class FileCard extends _react.PureComponent {
       tabIndex: 0,
       className: "".concat(infoCls, "-retry"),
       onClick: e => this.onRetry(e)
-    }, locale.retry) : null)), /*#__PURE__*/_react.default.createElement(_index.default, {
-      onClick: e => this.onRemove(e),
-      type: "tertiary",
-      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
-      theme: "borderless",
-      size: "small",
-      className: closeCls
-    }));
+    }, locale.retry) : null)), operation);
   }
 
   onRemove(e) {
     e.stopPropagation();
-    this.props.onRemove(this.props, e);
+    this.props.onRemove();
   }
 
   onReplace(e) {
     e.stopPropagation();
-    this.props.onReplace(this.props, e);
+    this.props.onReplace();
   }
 
   onRetry(e) {
     e.stopPropagation();
-    this.props.onRetry(this.props, e);
+    this.props.onRetry();
   }
 
   render() {

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

@@ -29,6 +29,7 @@ export interface UploadProps {
     fileList?: Array<FileItem>;
     fileName?: string;
     headers?: Record<string, any> | ((file: File) => Record<string, string>);
+    hotSpotLocation?: 'start' | 'end';
     itemStyle?: CSSProperties;
     limit?: number;
     listType?: UploadListType;
@@ -56,6 +57,8 @@ export interface UploadProps {
     renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
     showClear?: boolean;
     showPicInfo?: boolean;
     showReplace?: boolean;
@@ -99,6 +102,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         fileList: PropTypes.Requireable<any[]>;
         fileName: PropTypes.Requireable<string>;
         headers: PropTypes.Requireable<object>;
+        hotSpotLocation: PropTypes.Requireable<string>;
         itemStyle: PropTypes.Requireable<object>;
         limit: PropTypes.Requireable<number>;
         listType: PropTypes.Requireable<"picture" | "list">;
@@ -124,6 +128,8 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
         renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
+        renderPicPreviewIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        renderFileOperation: PropTypes.Requireable<(...args: any[]) => any>;
         renderPicInfo: PropTypes.Requireable<(...args: any[]) => any>;
         renderThumbnail: PropTypes.Requireable<(...args: any[]) => any>;
         showClear: PropTypes.Requireable<boolean>;

package/lib/cjs/upload/index.js

@@ -16,6 +16,8 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -136,14 +138,14 @@ class Upload extends _baseComponent.default {
         previewFile,
         listType,
         itemStyle,
-        showRetry,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderFileItem,
         renderThumbnail,
         disabled,
-        onPreviewClick,
-        showReplace
+        onPreviewClick
       } = this.props;
 
       const onRemove = () => this.remove(file);
@@ -156,20 +158,20 @@ class Upload extends _baseComponent.default {
         this.replace(index);
       };
 
-      const fileCardProps = (0, _assign.default)((0, _assign.default)({}, file), {
+      const fileCardProps = (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, (0, _pick2.default)(this.props, ['showRetry', 'showReplace', ''])), file), {
         previewFile,
         listType,
         onRemove,
         onRetry,
         index,
         key: uid || (0, _concat.default)(_context = "".concat(name)).call(_context, index),
-        showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
         style: itemStyle,
         disabled,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderThumbnail,
-        showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
         onReplace,
         onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
       });
@@ -211,7 +213,8 @@ class Upload extends _baseComponent.default {
         limit,
         disabled,
         children,
-        draggable
+        draggable,
+        hotSpotLocation
       } = this.props;
       const {
         fileList: stateFileList,
@@ -269,7 +272,7 @@ class Upload extends _baseComponent.default {
         className: mainCls,
         role: "list",
         "aria-label": "picture list"
-      }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+      }, showAddTriggerInList && hotSpotLocation === 'start' ? addContent : null, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList && hotSpotLocation === 'end' ? addContent : null)));
     };
 
     this.renderFileListDefault = () => {
@@ -609,6 +612,7 @@ Upload.propTypes = {
   fileList: _propTypes.default.array,
   fileName: _propTypes.default.string,
   headers: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
+  hotSpotLocation: _propTypes.default.oneOf(['start', 'end']),
   itemStyle: _propTypes.default.object,
   limit: _propTypes.default.number,
   listType: _propTypes.default.oneOf(_constants.strings.LIST_TYPE),
@@ -634,6 +638,8 @@ Upload.propTypes = {
   prompt: _propTypes.default.node,
   promptPosition: _propTypes.default.oneOf(_constants.strings.PROMPT_POSITION),
   renderFileItem: _propTypes.default.func,
+  renderPicPreviewIcon: _propTypes.default.func,
+  renderFileOperation: _propTypes.default.func,
   renderPicInfo: _propTypes.default.func,
   renderThumbnail: _propTypes.default.func,
   showClear: _propTypes.default.bool,
@@ -653,6 +659,7 @@ Upload.defaultProps = {
   defaultFileList: [],
   disabled: false,
   listType: 'list',
+  hotSpotLocation: 'end',
   multiple: false,
   onAcceptInvalid: _noop2.default,
   onChange: _noop2.default,

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

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, MouseEvent } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 import { BaseFileItem } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/upload/constants';
 import { ArrayElement } from '../_base/base';
@@ -45,14 +45,16 @@ export interface RenderFileItemProps extends FileItem {
     index?: number;
     previewFile?: (fileItem: RenderFileItemProps) => ReactNode;
     listType: UploadListType;
-    onRemove: (props: RenderFileItemProps, e: MouseEvent) => void;
-    onRetry: (props: RenderFileItemProps, e: MouseEvent) => void;
-    onReplace: (props: RenderFileItemProps, e: MouseEvent) => void;
+    onRemove: () => void;
+    onRetry: () => void;
+    onReplace: () => void;
     key: string;
     showPicInfo?: boolean;
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
-    showRetry: boolean;
-    showReplace: boolean;
+    renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
+    showRetry?: boolean;
+    showReplace?: boolean;
     style?: CSSProperties;
     disabled: boolean;
     onPreviewClick: () => void;

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

@@ -113,7 +113,7 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         placeholder: PropTypes.Requireable<string>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onChangeWithObject: PropTypes.Requireable<boolean>;

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

@@ -46,15 +46,15 @@ export default class Button extends PureComponent<ButtonProps> {
         disabled: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<unknown>;
-        type: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
         circle: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        htmlType: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        htmlType: PropTypes.Requireable<"button" | "reset" | "submit">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

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

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

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { ButtonProps as BaseButtonProps } from './Button';
 import { IconButtonProps } from '../iconButton';
 export { ButtonProps as BaseButtonProps, HtmlType, Size, Theme, Type } from './Button';
 export { HorizontalPaddingType } from '../iconButton';
 export { ButtonGroupProps } from './buttonGroup';
 export { SplitButtonGroupProps } from './splitButtonGroup';
-export interface ButtonProps extends IconButtonProps, BaseButtonProps {
+export interface ButtonProps extends IconButtonProps {
 }
 declare class Button extends React.PureComponent<ButtonProps> {
     static propTypes: {
@@ -18,18 +17,18 @@ declare class Button extends React.PureComponent<ButtonProps> {
         noHorizontalPadding: import("prop-types").Requireable<string | boolean | any[]>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         theme: import("prop-types").Requireable<string>;
-        iconPosition: import("prop-types").Requireable<unknown>;
+        iconPosition: import("prop-types").Requireable<"left" | "right">;
         className: import("prop-types").Requireable<string>;
         onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<unknown>;
-        type: import("prop-types").Requireable<unknown>;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
+        type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
         circle: import("prop-types").Requireable<boolean>;
-        htmlType: import("prop-types").Requireable<unknown>;
+        htmlType: import("prop-types").Requireable<"button" | "reset" | "submit">;
         'aria-label': import("prop-types").Requireable<string>;
     };
     constructor(props?: {});

package/lib/es/cascader/index.js

@@ -5,6 +5,7 @@ import _isFunction from "lodash/isFunction";
 import _isEmpty from "lodash/isEmpty";
 import _isString from "lodash/isString";
 import _isEqual from "lodash/isEqual";
+import _isSet from "lodash/isSet";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
@@ -722,6 +723,10 @@ class Cascader extends BaseComponent {
           realKeys = formatKeys;
         }
 
+        if (_isSet(realKeys)) {
+          realKeys = [...realKeys];
+        }
+
         const calRes = calcCheckedKeys(_flatten(realKeys), keyEntities);
         const checkedKeys = new _Set(calRes.checkedKeys);
         const halfCheckedKeys = new _Set(calRes.halfCheckedKeys); // disableStrictly

package/lib/es/datePicker/datePicker.js

@@ -401,6 +401,10 @@ export default class DatePicker extends BaseComponent {
 
     if (prevProps.open !== this.props.open) {
       this.foundation.initPanelOpenStatus();
+
+      if (!this.props.open) {
+        this.foundation.clearRangeInputFocus();
+      }
     }
   }
 

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

@@ -58,7 +58,7 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         render: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         visible: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;

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

@@ -80,7 +80,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         emptyContent?: React.ReactNode;
         onDropdownVisibleChange?: (visible: boolean) => void;
         zIndex?: number;
-        position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
+        position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         onSearch?: (value: string) => void;
         dropdownClassName?: string;
         dropdownStyle?: React.CSSProperties;

package/lib/es/form/baseForm.js

@@ -77,8 +77,8 @@ class Form extends BaseComponent {
       notifySubmitFail: (errors, values) => {
         this.props.onSubmitFail(errors, values);
       },
-      forceUpdate: () => {
-        this.forceUpdate();
+      forceUpdate: callback => {
+        this.forceUpdate(callback);
       },
       notifyChange: formState => {
         this.props.onChange(formState);

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

@@ -28,7 +28,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     emptyContent?: import("react").ReactNode;
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
-    position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
+    position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
     onSearch?: (value: string) => void;
     dropdownClassName?: string;
     dropdownStyle?: import("react").CSSProperties;

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

@@ -19,7 +19,7 @@ export interface IconButtonProps extends ButtonProps {
 }
 declare class IconButton extends PureComponent<IconButtonProps> {
     static defaultProps: {
-        iconPosition: any;
+        iconPosition: "left";
         prefixCls: string;
         loading: boolean;
         noHorizontalPadding: boolean;
@@ -36,7 +36,7 @@ declare class IconButton extends PureComponent<IconButtonProps> {
         noHorizontalPadding: PropTypes.Requireable<string | boolean | any[]>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         theme: PropTypes.Requireable<string>;
-        iconPosition: PropTypes.Requireable<unknown>;
+        iconPosition: PropTypes.Requireable<"left" | "right">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -165,7 +165,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         zIndex: PropTypes.Requireable<number>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         dropdownClassName: PropTypes.Requireable<string>;
@@ -243,8 +243,8 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     renderOption(option: OptionProps, optionIndex: number, style?: React.CSSProperties): any;
     renderCreateOption(option: OptionProps, isFocused: boolean, optionIndex: number, style: React.CSSProperties): JSX.Element;
     onOptionHover(optionIndex: number): void;
-    renderWithGroup(visibileOptions: OptionProps[]): JSX.Element[];
-    renderVirtualizeList(visibileOptions: OptionProps[]): JSX.Element;
+    renderWithGroup(visibleOptions: OptionProps[]): JSX.Element[];
+    renderVirtualizeList(visibleOptions: OptionProps[]): JSX.Element;
     renderOptions(children?: React.ReactNode): JSX.Element;
     renderSingleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;
     renderMultipleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;

package/lib/es/select/index.js

@@ -285,11 +285,19 @@ class Select extends BaseComponent {
           el.focus();
         } catch (error) {}
       },
-      updateScrollTop: () => {
-        var _context9, _context10;
+      updateScrollTop: index => {
+        var _context10, _context11;
 
         // eslint-disable-next-line max-len
-        let destNode = document.querySelector(_concatInstanceProperty(_context9 = _concatInstanceProperty(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " .")).call(_context9, prefixcls, "-option-selected"));
+        let optionClassName = ".".concat(prefixcls, "-option-selected");
+
+        if (index !== undefined) {
+          var _context9;
+
+          optionClassName = _concatInstanceProperty(_context9 = ".".concat(prefixcls, "-option:nth-child(")).call(_context9, index, ")");
+        }
+
+        let destNode = document.querySelector(_concatInstanceProperty(_context10 = _concatInstanceProperty(_context11 = "#".concat(prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
 
         if (_Array$isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -317,11 +325,11 @@ class Select extends BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context11, _context12;
+    var _context12, _context13;
 
-    const prevChildrenKeys = _mapInstanceProperty(_context11 = React.Children.toArray(prevProps.children)).call(_context11, child => child.key);
+    const prevChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(prevProps.children)).call(_context12, child => child.key);
 
-    const nowChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(this.props.children)).call(_context12, child => child.key);
+    const nowChildrenKeys = _mapInstanceProperty(_context13 = React.Children.toArray(this.props.children)).call(_context13, child => child.key);
 
     let isOptionsChanged = false;
 
@@ -515,34 +523,30 @@ class Select extends BaseComponent {
     this.foundation.handleOptionMouseEnter(optionIndex);
   }
 
-  renderWithGroup(visibileOptions) {
+  renderWithGroup(visibleOptions) {
     const content = [];
     const groupStatus = new _Map();
 
-    _forEachInstanceProperty(visibileOptions).call(visibileOptions, (option, optionIndex) => {
+    _forEachInstanceProperty(visibleOptions).call(visibleOptions, (option, optionIndex) => {
       const parentGroup = option._parentGroup;
       const optionContent = this.renderOption(option, optionIndex);
 
-      if (parentGroup && groupStatus.has(parentGroup.label)) {
-        // group content already insert
-        content.push(optionContent);
-      } else if (parentGroup) {
+      if (parentGroup && !groupStatus.has(parentGroup.label)) {
+        // when use with OptionGroup and group content not already insert
         const groupContent = /*#__PURE__*/React.createElement(OptionGroup, _Object$assign({}, parentGroup, {
           key: parentGroup.label
         }));
         groupStatus.set(parentGroup.label, true);
         content.push(groupContent);
-        content.push(optionContent);
-      } else {
-        // when not use with OptionGroup
-        content.push(optionContent);
       }
+
+      content.push(optionContent);
     });
 
     return content;
   }
 
-  renderVirtualizeList(visibileOptions) {
+  renderVirtualizeList(visibleOptions) {
     const {
       virtualize
     } = this.props;
@@ -557,10 +561,10 @@ class Select extends BaseComponent {
     return /*#__PURE__*/React.createElement(List, {
       ref: this.virtualizeListRef,
       height: height || numbers.LIST_HEIGHT,
-      itemCount: visibileOptions.length,
+      itemCount: visibleOptions.length,
       itemSize: itemSize,
       itemData: {
-        visibileOptions,
+        visibleOptions,
         renderOption: this.renderOption
       },
       width: width || '100%',
@@ -571,7 +575,7 @@ class Select extends BaseComponent {
   }
 
   renderOptions(children) {
-    var _context13;
+    var _context14;
 
     const {
       dropdownMinWidth,
@@ -591,12 +595,12 @@ class Select extends BaseComponent {
       multiple
     } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
 
-    const visibileOptions = _filterInstanceProperty(options).call(options, item => item._show);
+    const visibleOptions = _filterInstanceProperty(options).call(options, item => item._show);
 
-    let listContent = this.renderWithGroup(visibileOptions);
+    let listContent = this.renderWithGroup(visibleOptions);
 
     if (virtualize) {
-      listContent = this.renderVirtualizeList(visibileOptions);
+      listContent = this.renderVirtualizeList(visibleOptions);
     }
 
     const style = _Object$assign({
@@ -609,7 +613,7 @@ class Select extends BaseComponent {
     });
     const isEmpty = !options.length || !_someInstanceProperty(options).call(options, item => item._show);
     return /*#__PURE__*/React.createElement("div", {
-      id: _concatInstanceProperty(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
+      id: _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/React.createElement("div", {
@@ -840,7 +844,7 @@ class Select extends BaseComponent {
   }
 
   renderSelection() {
-    var _context14;
+    var _context15;
 
     const {
       disabled,
@@ -924,7 +928,7 @@ class Select extends BaseComponent {
       role: "combobox",
       "aria-disabled": disabled,
       "aria-expanded": isOpen,
-      "aria-controls": _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
+      "aria-controls": _concatInstanceProperty(_context15 = "".concat(prefixcls, "-")).call(_context15, this.selectOptionListID),
       "aria-haspopup": "listbox",
       "aria-label": "select value",
       "aria-invalid": this.props['aria-invalid'],

package/lib/es/select/option.js

@@ -36,9 +36,9 @@ class Option extends PureComponent {
     const {
       props
     } = this;
-    const isDisbled = props.disabled;
+    const isDisabled = props.disabled;
 
-    if (!isDisbled) {
+    if (!isDisabled) {
       props.onSelect(_Object$assign(_Object$assign({}, rest), {
         value,
         label: label || children

package/lib/es/select/virtualRow.js

@@ -5,9 +5,9 @@ const VirtualRow = _ref => {
     style
   } = _ref;
   const {
-    visibileOptions
+    visibleOptions
   } = data;
-  const option = visibileOptions[index];
+  const option = visibleOptions[index];
   return data.renderOption(option, index, style);
 };