@douyinfe/semi-ui 2.16.1 → 2.17.0-beta.0

package/lib/es/select/index.js

@@ -41,7 +41,7 @@ import OptionGroup from './optionGroup';
 import Spin from '../spin';
 import Trigger from '../trigger';
 import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
-import { isSemiIcon } from '../_utils';
+import { isSemiIcon, getFocusableElements, getActiveElement } from '../_utils';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import '@douyinfe/semi-foundation/lib/es/select/select.css';
@@ -50,10 +50,14 @@ const key = 0; // Notes: Use the label of the option as the identifier, that is,
 
 class Select extends BaseComponent {
   constructor(props) {
-    var _context, _context2, _context3, _context4, _context5, _context6, _context7;
+    var _context, _context2, _context3, _context4, _context5, _context6;
 
     super(props);
 
+    this.setOptionContainerEl = node => this.optionContainerEl = {
+      current: node
+    };
+
     this.handleInputChange = value => this.foundation.handleInputChange(value);
 
     this.state = {
@@ -68,15 +72,18 @@ class Select extends BaseComponent {
       focusIndex: props.defaultActiveFirstOption ? 0 : -1,
       keyboardEventSet: {},
       optionGroups: [],
-      isHovering: false
+      isHovering: false,
+      isFocusInContainer: false
     };
     /* Generate random string */
 
     this.selectOptionListID = '';
+    this.selectID = '';
     this.virtualizeListRef = /*#__PURE__*/React.createRef();
     this.inputRef = /*#__PURE__*/React.createRef();
     this.triggerRef = /*#__PURE__*/React.createRef();
     this.optionsRef = /*#__PURE__*/React.createRef();
+    this.optionContainerEl = /*#__PURE__*/React.createRef();
     this.clickOutsideHandler = null;
     this.onSelect = _bindInstanceProperty(_context = this.onSelect).call(_context, this);
     this.onClear = _bindInstanceProperty(_context2 = this.onClear).call(_context2, this);
@@ -84,7 +91,6 @@ class Select extends BaseComponent {
     this.onMouseLeave = _bindInstanceProperty(_context4 = this.onMouseLeave).call(_context4, this);
     this.renderOption = _bindInstanceProperty(_context5 = this.renderOption).call(_context5, this);
     this.onKeyPress = _bindInstanceProperty(_context6 = this.onKeyPress).call(_context6, this);
-    this.onClearBtnEnterPress = _bindInstanceProperty(_context7 = this.onClearBtnEnterPress).call(_context7, this);
     this.foundation = new SelectFoundation(this.adapter);
     warning('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
     warning('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
@@ -297,19 +303,36 @@ class Select extends BaseComponent {
           });
         } catch (error) {}
       },
+      getContainer: () => {
+        return this.optionContainerEl && this.optionContainerEl.current;
+      },
+      getFocusableElements: node => {
+        return getFocusableElements(node);
+      },
+      getActiveElement: () => {
+        return getActiveElement();
+      },
+      setIsFocusInContainer: isFocusInContainer => {
+        this.setState({
+          isFocusInContainer
+        });
+      },
+      getIsFocusInContainer: () => {
+        return this.state.isFocusInContainer;
+      },
       updateScrollTop: index => {
-        var _context9, _context10;
+        var _context8, _context9;
 
         // eslint-disable-next-line max-len
         let optionClassName = ".".concat(prefixcls, "-option-selected");
 
         if (index !== undefined) {
-          var _context8;
+          var _context7;
 
-          optionClassName = _concatInstanceProperty(_context8 = ".".concat(prefixcls, "-option:nth-child(")).call(_context8, index, ")");
+          optionClassName = _concatInstanceProperty(_context7 = ".".concat(prefixcls, "-option:nth-child(")).call(_context7, index, ")");
         }
 
-        let destNode = document.querySelector(_concatInstanceProperty(_context9 = _concatInstanceProperty(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " ")).call(_context9, optionClassName));
+        let destNode = document.querySelector(_concatInstanceProperty(_context8 = _concatInstanceProperty(_context9 = "#".concat(prefixcls, "-")).call(_context9, this.selectOptionListID, " ")).call(_context8, optionClassName));
 
         if (_Array$isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -331,6 +354,7 @@ class Select extends BaseComponent {
   componentDidMount() {
     this.foundation.init();
     this.selectOptionListID = getUuidShort();
+    this.selectID = this.props.id || getUuidShort();
   }
 
   componentWillUnmount() {
@@ -338,11 +362,11 @@ class Select extends BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context11, _context12;
+    var _context10, _context11;
 
-    const prevChildrenKeys = _mapInstanceProperty(_context11 = React.Children.toArray(prevProps.children)).call(_context11, child => child.key);
+    const prevChildrenKeys = _mapInstanceProperty(_context10 = React.Children.toArray(prevProps.children)).call(_context10, child => child.key);
 
-    const nowChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(this.props.children)).call(_context12, child => child.key);
+    const nowChildrenKeys = _mapInstanceProperty(_context11 = React.Children.toArray(this.props.children)).call(_context11, child => child.key);
 
     let isOptionsChanged = false;
 
@@ -362,11 +386,14 @@ class Select extends BaseComponent {
   }
 
   renderInput() {
+    var _context12;
+
     const {
       size,
       multiple,
       disabled,
-      inputProps
+      inputProps,
+      filter
     } = this.props;
 
     const inputPropsCls = _get(inputProps, 'className');
@@ -376,7 +403,8 @@ class Select extends BaseComponent {
       ["".concat(prefixcls, "-input-multiple")]: multiple
     }, inputPropsCls);
     const {
-      inputValue
+      inputValue,
+      focusIndex
     } = this.state;
 
     const selectInputProps = _Object$assign({
@@ -398,10 +426,20 @@ class Select extends BaseComponent {
     return /*#__PURE__*/React.createElement(Input, _Object$assign({
       ref: this.inputRef,
       size: size,
+      "aria-activedescendant": focusIndex !== -1 ? _concatInstanceProperty(_context12 = "".concat(this.selectID, "-option-")).call(_context12, focusIndex) : '',
       onFocus: e => {
-        // prevent event bubbling which will fire trigger onFocus event
+        // if multiple and filter, when use tab key to let select get focus
+        // need to manual update state isFocus to let the focus style take effect
+        if (multiple && Boolean(filter)) {
+          this.setState({
+            isFocus: true
+          });
+        } // prevent event bubbling which will fire trigger onFocus event
+
+
         e.stopPropagation(); // e.nativeEvent.stopImmediatePropagation();
-      }
+      },
+      onBlur: e => this.foundation.handleInputBlur(e)
     }, selectInputProps));
   }
 
@@ -437,12 +475,6 @@ class Select extends BaseComponent {
     e.nativeEvent.stopImmediatePropagation();
     this.foundation.handleClearClick(e);
   }
-  /* istanbul ignore next */
-
-
-  onClearBtnEnterPress(e) {
-    this.foundation.handleClearBtnEnterPress(e);
-  }
 
   renderEmpty() {
     return /*#__PURE__*/React.createElement(Option, {
@@ -477,6 +509,8 @@ class Select extends BaseComponent {
     if (option._inputCreateOnly) {
       optionContent = this.renderCreateOption(option, isFocused, optionIndex, style);
     } else {
+      var _context13;
+
       // use another name to make sure that 'key' in optionList still exist when we call onChange
       if ('key' in option) {
         option._keyInOptionList = option.key;
@@ -492,7 +526,8 @@ class Select extends BaseComponent {
         style: optionStyle,
         key: option.key || option.label + option.value + optionIndex,
         renderOptionItem: renderOptionItem,
-        inputValue: inputValue
+        inputValue: inputValue,
+        id: _concatInstanceProperty(_context13 = "".concat(this.selectID, "-option-")).call(_context13, optionIndex)
       }), option.label);
     }
 
@@ -590,7 +625,7 @@ class Select extends BaseComponent {
   }
 
   renderOptions(children) {
-    var _context13;
+    var _context14;
 
     const {
       dropdownMinWidth,
@@ -627,19 +662,25 @@ class Select extends BaseComponent {
       ["".concat(prefixcls, "-option-list-chosen")]: selections.size
     });
     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),
-      className: dropdownClassName,
-      style: style
-    }, outerTopSlot, /*#__PURE__*/React.createElement("div", {
-      style: {
-        maxHeight: "".concat(maxHeight, "px")
-      },
-      className: optionListCls,
-      role: "listbox",
-      "aria-multiselectable": multiple,
-      onScroll: e => this.foundation.handleListScroll(e)
-    }, innerTopSlot, loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent, innerBottomSlot), outerBottomSlot);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      React.createElement("div", {
+        id: _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
+        className: dropdownClassName,
+        style: style,
+        ref: this.setOptionContainerEl,
+        onKeyDown: e => this.foundation.handleContainerKeyDown(e)
+      }, outerTopSlot, /*#__PURE__*/React.createElement("div", {
+        style: {
+          maxHeight: "".concat(maxHeight, "px")
+        },
+        className: optionListCls,
+        role: "listbox",
+        "aria-multiselectable": multiple,
+        onScroll: e => this.foundation.handleListScroll(e)
+      }, innerTopSlot, loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent, innerBottomSlot), outerBottomSlot)
+    );
   }
 
   renderSingleSelection(selections, filterable) {
@@ -742,7 +783,8 @@ class Select extends BaseComponent {
         return /*#__PURE__*/React.createElement(Tag, _Object$assign({}, basic, {
           color: "white",
           size: size || 'large',
-          key: value
+          key: value,
+          tabIndex: -1
         }), content);
       } else {
         return /*#__PURE__*/React.createElement(Fragment, {
@@ -865,7 +907,7 @@ class Select extends BaseComponent {
   }
 
   renderSelection() {
-    var _context14;
+    var _context15, _context16;
 
     const {
       disabled,
@@ -890,7 +932,9 @@ class Select extends BaseComponent {
       keyboardEventSet,
       inputValue,
       isHovering,
-      isFocus
+      isFocus,
+      showInput,
+      focusIndex
     } = this.state;
     const useCustomTrigger = typeof triggerRender === 'function';
     const filterable = Boolean(filter); // filter（boolean || function）
@@ -936,40 +980,51 @@ class Select extends BaseComponent {
     }, multiple ? this.renderMultipleSelection(selections, filterable) : this.renderSingleSelection(selections, filterable))), /*#__PURE__*/React.createElement(Fragment, {
       key: "clearicon"
     }, showClear ? /*#__PURE__*/React.createElement("div", {
-      role: "button",
-      "aria-label": "Clear selected value",
-      tabIndex: 0,
       className: cls("".concat(prefixcls, "-clear")),
-      onClick: this.onClear,
-      onKeyPress: this.onClearBtnEnterPress
+      onClick: this.onClear
     }, /*#__PURE__*/React.createElement(IconClear, null)) : arrowContent), /*#__PURE__*/React.createElement(Fragment, {
       key: "suffix"
     }, suffix ? this.renderSuffix() : null)];
-    const tabIndex = disabled ? null : 0;
-    return /*#__PURE__*/React.createElement("div", _Object$assign({
-      role: "combobox",
-      "aria-disabled": disabled,
-      "aria-expanded": isOpen,
-      "aria-controls": _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
-      "aria-haspopup": "listbox",
-      "aria-label": "select value",
-      "aria-invalid": this.props['aria-invalid'],
-      "aria-errormessage": this.props['aria-errormessage'],
-      "aria-labelledby": this.props['aria-labelledby'],
-      "aria-describedby": this.props['aria-describedby'],
-      "aria-required": this.props['aria-required'],
-      className: selectionCls,
-      ref: ref => this.triggerRef.current = ref,
-      onClick: e => this.foundation.handleClick(e),
-      style: style,
-      id: id,
-      tabIndex: tabIndex,
-      onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave,
-      // onFocus={e => this.foundation.handleTriggerFocus(e)}
-      onBlur: e => this.foundation.handleTriggerBlur(e),
-      onKeyPress: this.onKeyPress
-    }, keyboardEventSet), inner);
+    /**
+     *
+     * In disabled, searchable single-selection and display input, and searchable multi-selection
+     * make combobox not focusable by tab key
+     *
+     * 在disabled，可搜索单选且显示input框，以及可搜索多选情况下
+     * 让combobox无法通过tab聚焦
+     */
+
+    const tabIndex = disabled || filterable && showInput || filterable && multiple ? -1 : 0;
+    return (
+      /*#__PURE__*/
+
+      /* eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex */
+      React.createElement("div", _Object$assign({
+        role: "combobox",
+        "aria-disabled": disabled,
+        "aria-expanded": isOpen,
+        "aria-controls": _concatInstanceProperty(_context15 = "".concat(prefixcls, "-")).call(_context15, this.selectOptionListID),
+        "aria-haspopup": "listbox",
+        "aria-label": selections.size ? 'selected' : '',
+        "aria-invalid": this.props['aria-invalid'],
+        "aria-errormessage": this.props['aria-errormessage'],
+        "aria-labelledby": this.props['aria-labelledby'],
+        "aria-describedby": this.props['aria-describedby'],
+        "aria-required": this.props['aria-required'],
+        className: selectionCls,
+        ref: ref => this.triggerRef.current = ref,
+        onClick: e => this.foundation.handleClick(e),
+        style: style,
+        id: this.selectID,
+        tabIndex: tabIndex,
+        "aria-activedescendant": focusIndex !== -1 ? _concatInstanceProperty(_context16 = "".concat(this.selectID, "-option-")).call(_context16, focusIndex) : '',
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave,
+        onFocus: e => this.foundation.handleTriggerFocus(e),
+        onBlur: e => this.foundation.handleTriggerBlur(e),
+        onKeyPress: this.onKeyPress
+      }, keyboardEventSet), inner)
+    );
   }
 
   render() {
@@ -1011,6 +1066,7 @@ class Select extends BaseComponent {
       position: position,
       spacing: spacing,
       stopPropagation: stopPropagation,
+      disableArrowKeyDown: true,
       onVisibleChange: status => this.handlePopoverVisibleChange(status)
     }, selection);
   }
@@ -1129,13 +1185,15 @@ Select.defaultProps = {
   onListScroll: _noop,
   maxHeight: 300,
   dropdownMatchSelectWidth: true,
-  defaultActiveFirstOption: false,
+  defaultActiveFirstOption: true,
   showArrow: true,
   showClear: false,
   remote: false,
   autoAdjustOverflow: true,
   autoClearSearchValue: true,
-  arrowIcon: /*#__PURE__*/React.createElement(IconChevronDown, null) // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
+  arrowIcon: /*#__PURE__*/React.createElement(IconChevronDown, {
+    "aria-label": ''
+  }) // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
   // renderSelectedItem: (optionNode) => optionNode.label,
   // The default creator rendering is related to i18, so it is not declared here
   // renderCreateItem: (input) => input

package/lib/es/select/option.js

@@ -79,9 +79,10 @@ class Option extends PureComponent {
       onMouseEnter,
       prefixCls,
       renderOptionItem,
-      inputValue
+      inputValue,
+      id
     } = _a,
-          rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue"]);
+          rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue", "id"]);
 
     const optionClassName = classNames(prefixCls, {
       ["".concat(prefixCls, "-disabled")]: disabled,
@@ -145,6 +146,7 @@ class Option extends PureComponent {
         },
         onMouseEnter: e => onMouseEnter && onMouseEnter(e),
         role: "option",
+        id: id,
         "aria-selected": selected ? "true" : "false",
         "aria-disabled": disabled ? "true" : "false",
         style: style

package/lib/es/tag/index.js

@@ -135,17 +135,19 @@ export default class Tag extends Component {
       className,
       type,
       avatarSrc,
-      avatarShape
+      avatarShape,
+      tabIndex
     } = _a,
-          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape"]);
+          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
 
     const {
       visible: isVisible
     } = this.state;
-    const clickable = onClick !== Tag.defaultProps.onClick || closable;
+    const clickable = onClick !== Tag.defaultProps.onClick || closable; // only when the Tag is clickable or closable, the value of tabIndex is allowed to be passed in. 
+
     const a11yProps = {
       role: 'button',
-      tabIndex: 0,
+      tabIndex: tabIndex | 0,
       onKeyDown: this.handleKeyDown
     };
 

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

@@ -18,6 +18,7 @@ export interface TagProps {
     avatarShape?: AvatarShape;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    tabIndex?: number;
 }
 export interface TagGroupProps {
     style?: React.CSSProperties;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/es/tagInput/constants';
 import '@douyinfe/semi-foundation/lib/es/tagInput/tagInput.css';
-import TagInputFoundation, { TagInputAdapter } from '@douyinfe/semi-foundation/lib/es/tagInput/foundation';
+import TagInputFoundation, { TagInputAdapter, OnSortEndProps } from '@douyinfe/semi-foundation/lib/es/tagInput/foundation';
 import { ArrayElement } from '../_base/base';
 import BaseComponent from '../_base/baseComponent';
 import { PopoverProps } from '../popover';
@@ -22,6 +22,8 @@ export interface TagInputProps {
     showContentTooltip?: boolean;
     allowDuplicates?: boolean;
     addOnBlur?: boolean;
+    draggable?: boolean;
+    expandRestTagsOnClick?: boolean;
     onAdd?: (addedValue: string[]) => void;
     onBlur?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onChange?: (value: string[]) => void;
@@ -52,6 +54,7 @@ export interface TagInputState {
     inputValue?: string;
     focusing?: boolean;
     hovering?: boolean;
+    active?: boolean;
 }
 declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     static propTypes: {
@@ -73,6 +76,8 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         separator: PropTypes.Requireable<string | any[]>;
         showClear: PropTypes.Requireable<boolean>;
         addOnBlur: PropTypes.Requireable<boolean>;
+        draggable: PropTypes.Requireable<boolean>;
+        expandRestTagsOnClick: PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
         renderTagItem: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
@@ -97,6 +102,8 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         allowDuplicates: boolean;
         showRestTagsPopover: boolean;
         autoFocus: boolean;
+        draggable: boolean;
+        expandRestTagsOnClick: boolean;
         showContentTooltip: boolean;
         separator: string;
         size: "default";
@@ -112,7 +119,9 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onKeyDown: (...args: any[]) => void;
     };
     inputRef: React.RefObject<HTMLInputElement>;
+    tagInputRef: React.RefObject<HTMLDivElement>;
     foundation: TagInputFoundation;
+    clickOutsideHandler: any;
     constructor(props: TagInputProps);
     static getDerivedStateFromProps(nextProps: TagInputProps, prevState: TagInputState): {
         tagsArray: string[];
@@ -128,12 +137,15 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleTagClose: (idx: number) => void;
     handleInputMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleInputMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleClickPrefixOrSuffix: (e: React.MouseEvent<HTMLInputElement>) => void;
     handlePreventMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
     renderClearBtn(): JSX.Element;
     renderPrefix(): JSX.Element;
     renderSuffix(): JSX.Element;
+    getAllTags: () => (string | number | boolean | React.ReactFragment | JSX.Element)[];
+    onSortEnd: (callbackProps: OnSortEndProps) => void;
     renderTags(): JSX.Element;
     blur(): void;
     focus(): void;