@douyinfe/semi-ui 2.4.1 → 2.6.0-beta.0

package/lib/es/datePicker/dateInput.d.ts

@@ -25,7 +25,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
-        multiple: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;
@@ -49,7 +48,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onBlur: typeof noop;
         onClear: typeof noop;
         onFocus: typeof noop;
-        multiple: boolean;
         type: string;
         inputStyle: {};
         inputReadOnly: boolean;

package/lib/es/datePicker/dateInput.js

@@ -15,6 +15,8 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/interactive-supports-focus */
+
 /* eslint-disable max-lines-per-function */
 
 /* eslint-disable no-unused-vars */
@@ -170,9 +172,14 @@ export default class DateInput extends BaseComponent {
     } = this.props;
     const allowClear = (rangeStart || rangeEnd) && showClear;
     return allowClear && !disabled ? /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Clear range input value",
       className: "".concat(prefixCls, "-range-input-clearbtn"),
       onMouseDown: e => !disabled && this.handleRangeInputClear(e)
-    }, /*#__PURE__*/React.createElement(IconClear, null)) : null;
+    }, /*#__PURE__*/React.createElement(IconClear, {
+      "aria-hidden": true
+    })) : null;
   }
 
   renderRangeSuffix(suffix) {
@@ -273,6 +280,8 @@ export default class DateInput extends BaseComponent {
       validateStatus,
       block,
       prefixCls,
+      multiple,
+      // Whether to allow multiple values for email and file types
       dateFnsLocale,
       // No need to pass to input
       onBlur,
@@ -290,10 +299,14 @@ export default class DateInput extends BaseComponent {
       rangeInputFocus,
       rangeSeparator
     } = _a,
-          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator"]);
+          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator"]);
 
-    const dateIcon = /*#__PURE__*/React.createElement(IconCalendar, null);
-    const dateTimeIcon = /*#__PURE__*/React.createElement(IconCalendarClock, null);
+    const dateIcon = /*#__PURE__*/React.createElement(IconCalendar, {
+      "aria-hidden": true
+    });
+    const dateTimeIcon = /*#__PURE__*/React.createElement(IconCalendarClock, {
+      "aria-hidden": true
+    });
     const suffix = _includesInstanceProperty(type).call(type, 'Time') ? dateTimeIcon : dateIcon;
     let text = '';
 
@@ -348,7 +361,6 @@ DateInput.propTypes = {
   value: PropTypes.array,
   disabled: PropTypes.bool,
   type: PropTypes.oneOf(strings.TYPE_SET),
-  multiple: PropTypes.bool,
   showClear: PropTypes.bool,
   format: PropTypes.string,
   inputStyle: PropTypes.object,
@@ -372,7 +384,6 @@ DateInput.defaultProps = {
   onBlur: noop,
   onClear: noop,
   onFocus: noop,
-  multiple: false,
   type: 'date',
   inputStyle: {},
   inputReadOnly: false,

package/lib/es/datePicker/datePicker.js

@@ -9,6 +9,8 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
+
 /* eslint-disable max-len */
 import React from 'react';
 import classnames from 'classnames';
@@ -401,6 +403,10 @@ export default class DatePicker extends BaseComponent {
 
     if (prevProps.open !== this.props.open) {
       this.foundation.initPanelOpenStatus();
+
+      if (!this.props.open) {
+        this.foundation.clearRangeInputFocus();
+      }
     }
   }
 
@@ -572,18 +578,19 @@ export default class DatePicker extends BaseComponent {
       onRangeEndTabPress: this.handleRangeEndTabPress
     });
 
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-      React.createElement("div", {
-        onClick: this.handleTriggerWrapperClick,
-        className: inputCls
-      }, typeof triggerRender === 'function' ? /*#__PURE__*/React.createElement(Trigger, _Object$assign({}, props, {
-        triggerRender: triggerRender,
-        componentName: "DatePicker",
-        componentProps: _Object$assign({}, this.props)
-      })) : /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, props)))
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      // tooltip will mount a11y props to children
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role: "combobox",
+      "aria-label": _Array$isArray(value) && value.length ? "Change date" : "Choose date",
+      "aria-disabled": disabled,
+      onClick: this.handleTriggerWrapperClick,
+      className: inputCls
+    }, typeof triggerRender === 'function' ? /*#__PURE__*/React.createElement(Trigger, _Object$assign({}, props, {
+      triggerRender: triggerRender,
+      componentName: "DatePicker",
+      componentProps: _Object$assign({}, this.props)
+    })) : /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, props)));
   }
 
   render() {

package/lib/es/datePicker/month.d.ts

@@ -33,6 +33,7 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         endDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
         rangeInputFocus: PropTypes.Requireable<string | boolean>;
         focusRecordsRef: PropTypes.Requireable<object>;
+        multiple: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         month: Date;

package/lib/es/datePicker/month.js

@@ -6,6 +6,8 @@ import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+
 /* eslint-disable max-len */
 import React from 'react';
 import classNames from 'classnames';
@@ -328,8 +330,10 @@ export default class Month extends BaseComponent {
     const weekdaysText = _mapInstanceProperty(weekdays).call(weekdays, key => locale.weeks[key]);
 
     return /*#__PURE__*/React.createElement("div", {
+      role: "row",
       className: weekdayCls
     }, _mapInstanceProperty(weekdaysText).call(weekdaysText, (E, i) => /*#__PURE__*/React.createElement("div", {
+      role: "columnheader",
       key: E + i,
       className: weekdayItemCls
     }, E)));
@@ -364,6 +368,7 @@ export default class Month extends BaseComponent {
   renderWeek(week, weekIndex) {
     const weekCls = cssClasses.WEEK;
     return /*#__PURE__*/React.createElement("div", {
+      role: "row",
       className: weekCls,
       key: weekIndex
     }, _mapInstanceProperty(week).call(week, (day, dayIndex) => this.renderDay(day, dayIndex)));
@@ -384,6 +389,8 @@ export default class Month extends BaseComponent {
 
     if (!fullDate) {
       return /*#__PURE__*/React.createElement("div", {
+        role: "gridcell",
+        tabIndex: -1,
         key: dayNumber + dayIndex,
         className: cssClasses.DAY
       }, /*#__PURE__*/React.createElement("span", null));
@@ -421,6 +428,11 @@ export default class Month extends BaseComponent {
     const customRender = _isFunction(renderFullDate);
 
     return /*#__PURE__*/React.createElement("div", {
+      role: "gridcell",
+      tabIndex: dayStatus.isDisabled ? -1 : 0,
+      "aria-disabled": dayStatus.isDisabled,
+      "aria-selected": dayStatus.isSelected,
+      "aria-label": fullDate,
       className: !customRender ? dayCls : cssClasses.DAY,
       title: fullDate,
       key: dayNumber + dayIndex,
@@ -434,13 +446,16 @@ export default class Month extends BaseComponent {
 
   render() {
     const {
-      forwardRef
+      forwardRef,
+      multiple
     } = this.props;
     const weekday = this.renderDayOfWeek();
     const weeks = this.renderWeeks();
     const monthCls = classNames(cssClasses.MONTH);
     const ref = forwardRef || this.monthRef;
     return /*#__PURE__*/React.createElement("div", {
+      role: "grid",
+      "aria-multiselectable": multiple,
       ref: ref,
       className: monthCls
     }, weekday, weeks);
@@ -466,7 +481,8 @@ Month.propTypes = {
   startDateOffset: PropTypes.func,
   endDateOffset: PropTypes.func,
   rangeInputFocus: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  focusRecordsRef: PropTypes.object
+  focusRecordsRef: PropTypes.object,
+  multiple: PropTypes.bool
 };
 Month.defaultProps = {
   month: new Date(),

package/lib/es/datePicker/monthsGrid.js

@@ -7,6 +7,8 @@ import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign"
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 
+/* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
+
 /* eslint-disable react/no-did-update-set-state */
 
 /* eslint-disable max-len */
@@ -362,7 +364,8 @@ export default class MonthsGrid extends BaseComponent {
       endDateOffset,
       density,
       rangeInputFocus,
-      syncSwitchMonth
+      syncSwitchMonth,
+      multiple
     } = this.props;
     let monthText = ''; // i18n monthText
 
@@ -428,7 +431,8 @@ export default class MonthsGrid extends BaseComponent {
       onWeeksRowNumChange: weeksRowNum => this.handleWeeksRowNumChange(weeksRowNum, panelType),
       startDateOffset: startDateOffset,
       endDateOffset: endDateOffset,
-      focusRecordsRef: this.props.focusRecordsRef
+      focusRecordsRef: this.props.focusRecordsRef,
+      multiple: multiple
     }));
   }
 
@@ -584,14 +588,22 @@ export default class MonthsGrid extends BaseComponent {
       className: switchCls,
       ref: current => this.adapter.setCache("switch-".concat(panelType), current)
     }, /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to date panel",
       className: dateCls,
       onClick: e => this.foundation.showDatePanel(panelType)
-    }, showSwithIcon && /*#__PURE__*/React.createElement(IconCalendar, null), /*#__PURE__*/React.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/React.createElement(IconCalendar, {
+      "aria-hidden": true
+    }), /*#__PURE__*/React.createElement("span", {
       className: textCls
     }, dateText || monthText)), /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to time panel",
       className: timeCls,
       onClick: e => this.foundation.showTimePicker(panelType, true)
-    }, showSwithIcon && /*#__PURE__*/React.createElement(IconClock, null), /*#__PURE__*/React.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/React.createElement(IconClock, {
+      "aria-hidden": true
+    }), /*#__PURE__*/React.createElement("span", {
       className: textCls
     }, timeText)));
   }

package/lib/es/datePicker/navigation.js

@@ -54,7 +54,9 @@ export default class Navigation extends PureComponent {
       ref: ref
     }, /*#__PURE__*/React.createElement(IconButton, {
       key: "double-chevron-left",
+      "aria-label": "Previous year",
       icon: /*#__PURE__*/React.createElement(IconDoubleChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -64,7 +66,9 @@ export default class Navigation extends PureComponent {
       style: leftButtonStyle
     }), /*#__PURE__*/React.createElement(IconButton, {
       key: "chevron-left",
+      "aria-label": "Previous month",
       icon: /*#__PURE__*/React.createElement(IconChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -80,7 +84,9 @@ export default class Navigation extends PureComponent {
       size: buttonSize
     }, /*#__PURE__*/React.createElement("span", null, monthText))), /*#__PURE__*/React.createElement(IconButton, {
       key: "chevron-right",
+      "aria-label": "Next month",
       icon: /*#__PURE__*/React.createElement(IconChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -90,7 +96,9 @@ export default class Navigation extends PureComponent {
       style: rightButtonStyle
     }), /*#__PURE__*/React.createElement(IconButton, {
       key: "double-chevron-right",
+      "aria-label": "Next year",
       icon: /*#__PURE__*/React.createElement(IconDoubleChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,

package/lib/es/datePicker/quickControl.js

@@ -1,5 +1,7 @@
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+
+/* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events */
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';

package/lib/es/datePicker/yearAndMonth.js

@@ -222,6 +222,7 @@ class YearAndMonth extends BaseComponent {
     }, /*#__PURE__*/React.createElement(IconButton, {
       noHorizontalPadding: false,
       icon: /*#__PURE__*/React.createElement(IconChevronLeft, {
+        "aria-hidden": true,
         size: iconSize
       }),
       size: buttonSize,

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/form/hoc/withField.js

@@ -498,7 +498,7 @@ function withField(Component, opts) {
           text: label || field,
           id: labelId,
           required: required,
-          name: name || field,
+          name: a11yId || name || field,
           width: mergeLabelWidth,
           align: mergeLabelAlign
         }, needSpread));

package/lib/es/scrollList/scrollItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Item, ScrollItemAdapter } from '@douyinfe/semi-foundation/lib/es/scrollList/itemFoundation';
@@ -18,6 +18,7 @@ export interface ScrollItemProps<T extends Item> {
     motion?: Motion;
     style?: React.CSSProperties;
     type?: string | number;
+    'aria-label'?: AriaAttributes['aria-label'];
 }
 export interface ScrollItemState {
     prependCount: number;

package/lib/es/scrollList/scrollItem.js

@@ -274,13 +274,14 @@ export default class ScrollItem extends BaseComponent {
           transform: itemTrans
         } = item;
         const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
+        const selected = selectedIndex === index;
         const cls = classnames({
-          ["".concat(cssClasses.PREFIX, "-item-sel")]: selectedIndex === index && mode !== wheelMode,
+          ["".concat(cssClasses.PREFIX, "-item-sel")]: selected && mode !== wheelMode,
           ["".concat(cssClasses.PREFIX, "-item-disabled")]: Boolean(item.disabled)
         });
         let text = '';
 
-        if (selectedIndex === index) {
+        if (selected) {
           if (typeof transform === 'function') {
             text = transform(item.value, item.text);
           } else {
@@ -304,7 +305,10 @@ export default class ScrollItem extends BaseComponent {
           React.createElement("li", _Object$assign({
             key: prefixKey + index
           }, events, {
-            className: cls
+            className: cls,
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": item.disabled
           }), text)
         );
       });
@@ -323,6 +327,9 @@ export default class ScrollItem extends BaseComponent {
         className: wrapperCls,
         ref: this._cacheWrapperNode
       }, /*#__PURE__*/React.createElement("ul", {
+        role: "listbox",
+        "aria-multiselectable": false,
+        "aria-label": this.props['aria-label'],
         ref: this._cacheListNode
       }, inner));
     };
@@ -380,6 +387,9 @@ export default class ScrollItem extends BaseComponent {
         ref: this._cacheWrapperNode,
         onScroll: this.scrollToSelectItem
       }, /*#__PURE__*/React.createElement("ul", {
+        role: "listbox",
+        "aria-label": this.props['aria-label'],
+        "aria-multiselectable": false,
         ref: this._cacheListNode,
         onClick: this.clickToSelectItem
       }, prependList, inner, appendList)));

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);
 };
 

package/lib/es/table/Table.d.ts

@@ -298,7 +298,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showSizeChanger?: boolean;
         showQuickJumper?: boolean;
         popoverZIndex?: number;
-        popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
+        popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         hideOnSinglePage?: boolean;
         hoverShowPageSelect?: boolean;
     };