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

package/lib/cjs/select/index.js

@@ -56,7 +56,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _context15 = _interopRequireDefault(require("../configProvider/context"));
+var _context17 = _interopRequireDefault(require("../configProvider/context"));
 
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/select/foundation"));
 
@@ -112,10 +112,14 @@ const key = 0; // Notes: Use the label of the option as the identifier, that is,
 
 class Select extends _baseComponent.default {
   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 = {
@@ -130,15 +134,18 @@ class Select extends _baseComponent.default {
       focusIndex: props.defaultActiveFirstOption ? 0 : -1,
       keyboardEventSet: {},
       optionGroups: [],
-      isHovering: false
+      isHovering: false,
+      isFocusInContainer: false
     };
     /* Generate random string */
 
     this.selectOptionListID = '';
+    this.selectID = '';
     this.virtualizeListRef = /*#__PURE__*/_react.default.createRef();
     this.inputRef = /*#__PURE__*/_react.default.createRef();
     this.triggerRef = /*#__PURE__*/_react.default.createRef();
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
+    this.optionContainerEl = /*#__PURE__*/_react.default.createRef();
     this.clickOutsideHandler = null;
     this.onSelect = (0, _bind.default)(_context = this.onSelect).call(_context, this);
     this.onClear = (0, _bind.default)(_context2 = this.onClear).call(_context2, this);
@@ -146,7 +153,6 @@ class Select extends _baseComponent.default {
     this.onMouseLeave = (0, _bind.default)(_context4 = this.onMouseLeave).call(_context4, this);
     this.renderOption = (0, _bind.default)(_context5 = this.renderOption).call(_context5, this);
     this.onKeyPress = (0, _bind.default)(_context6 = this.onKeyPress).call(_context6, this);
-    this.onClearBtnEnterPress = (0, _bind.default)(_context7 = this.onClearBtnEnterPress).call(_context7, this);
     this.foundation = new _foundation.default(this.adapter);
     (0, _warning.default)('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
     (0, _warning.default)('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
@@ -360,19 +366,36 @@ class Select extends _baseComponent.default {
           });
         } catch (error) {}
       },
+      getContainer: () => {
+        return this.optionContainerEl && this.optionContainerEl.current;
+      },
+      getFocusableElements: node => {
+        return (0, _utils2.getFocusableElements)(node);
+      },
+      getActiveElement: () => {
+        return (0, _utils2.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 = (0, _concat.default)(_context8 = ".".concat(prefixcls, "-option:nth-child(")).call(_context8, index, ")");
+          optionClassName = (0, _concat.default)(_context7 = ".".concat(prefixcls, "-option:nth-child(")).call(_context7, index, ")");
         }
 
-        let destNode = document.querySelector((0, _concat.default)(_context9 = (0, _concat.default)(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " ")).call(_context9, optionClassName));
+        let destNode = document.querySelector((0, _concat.default)(_context8 = (0, _concat.default)(_context9 = "#".concat(prefixcls, "-")).call(_context9, this.selectOptionListID, " ")).call(_context8, optionClassName));
 
         if ((0, _isArray.default)(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -394,6 +417,7 @@ class Select extends _baseComponent.default {
   componentDidMount() {
     this.foundation.init();
     this.selectOptionListID = (0, _uuid.getUuidShort)();
+    this.selectID = this.props.id || (0, _uuid.getUuidShort)();
   }
 
   componentWillUnmount() {
@@ -401,10 +425,10 @@ class Select extends _baseComponent.default {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context11, _context12;
+    var _context10, _context11;
 
-    const prevChildrenKeys = (0, _map2.default)(_context11 = _react.default.Children.toArray(prevProps.children)).call(_context11, child => child.key);
-    const nowChildrenKeys = (0, _map2.default)(_context12 = _react.default.Children.toArray(this.props.children)).call(_context12, child => child.key);
+    const prevChildrenKeys = (0, _map2.default)(_context10 = _react.default.Children.toArray(prevProps.children)).call(_context10, child => child.key);
+    const nowChildrenKeys = (0, _map2.default)(_context11 = _react.default.Children.toArray(this.props.children)).call(_context11, child => child.key);
     let isOptionsChanged = false;
 
     if (!(0, _isEqual2.default)(prevChildrenKeys, nowChildrenKeys) || !(0, _isEqual2.default)(prevProps.optionList, this.props.optionList)) {
@@ -423,11 +447,14 @@ class Select extends _baseComponent.default {
   }
 
   renderInput() {
+    var _context12;
+
     const {
       size,
       multiple,
       disabled,
-      inputProps
+      inputProps,
+      filter
     } = this.props;
     const inputPropsCls = (0, _get2.default)(inputProps, 'className');
     const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"), {
@@ -435,7 +462,8 @@ class Select extends _baseComponent.default {
       ["".concat(prefixcls, "-input-multiple")]: multiple
     }, inputPropsCls);
     const {
-      inputValue
+      inputValue,
+      focusIndex
     } = this.state;
     const selectInputProps = (0, _assign.default)({
       value: inputValue,
@@ -455,10 +483,20 @@ class Select extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement(_index3.default, (0, _assign.default)({
       ref: this.inputRef,
       size: size,
+      "aria-activedescendant": focusIndex !== -1 ? (0, _concat.default)(_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));
   }
 
@@ -494,12 +532,6 @@ class Select extends _baseComponent.default {
     e.nativeEvent.stopImmediatePropagation();
     this.foundation.handleClearClick(e);
   }
-  /* istanbul ignore next */
-
-
-  onClearBtnEnterPress(e) {
-    this.foundation.handleClearBtnEnterPress(e);
-  }
 
   renderEmpty() {
     return /*#__PURE__*/_react.default.createElement(_option.default, {
@@ -534,6 +566,8 @@ class Select extends _baseComponent.default {
     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;
@@ -549,7 +583,8 @@ class Select extends _baseComponent.default {
         style: optionStyle,
         key: option.key || option.label + option.value + optionIndex,
         renderOptionItem: renderOptionItem,
-        inputValue: inputValue
+        inputValue: inputValue,
+        id: (0, _concat.default)(_context13 = "".concat(this.selectID, "-option-")).call(_context13, optionIndex)
       }), option.label);
     }
 
@@ -647,7 +682,7 @@ class Select extends _baseComponent.default {
   }
 
   renderOptions(children) {
-    var _context13;
+    var _context14;
 
     const {
       dropdownMinWidth,
@@ -682,19 +717,25 @@ class Select extends _baseComponent.default {
       ["".concat(prefixcls, "-option-list-chosen")]: selections.size
     });
     const isEmpty = !options.length || !(0, _some.default)(options).call(options, item => item._show);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      id: (0, _concat.default)(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
-      className: dropdownClassName,
-      style: style
-    }, outerTopSlot, /*#__PURE__*/_react.default.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.default.createElement("div", {
+        id: (0, _concat.default)(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
+        className: dropdownClassName,
+        style: style,
+        ref: this.setOptionContainerEl,
+        onKeyDown: e => this.foundation.handleContainerKeyDown(e)
+      }, outerTopSlot, /*#__PURE__*/_react.default.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) {
@@ -797,7 +838,8 @@ class Select extends _baseComponent.default {
         return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, basic, {
           color: "white",
           size: size || 'large',
-          key: value
+          key: value,
+          tabIndex: -1
         }), content);
       } else {
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -917,7 +959,7 @@ class Select extends _baseComponent.default {
   }
 
   renderSelection() {
-    var _context14;
+    var _context15, _context16;
 
     const {
       disabled,
@@ -942,7 +984,9 @@ class Select extends _baseComponent.default {
       keyboardEventSet,
       inputValue,
       isHovering,
-      isFocus
+      isFocus,
+      showInput,
+      focusIndex
     } = this.state;
     const useCustomTrigger = typeof triggerRender === 'function';
     const filterable = Boolean(filter); // filter（boolean || function）
@@ -988,40 +1032,51 @@ class Select extends _baseComponent.default {
     }, multiple ? this.renderMultipleSelection(selections, filterable) : this.renderSingleSelection(selections, filterable))), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "clearicon"
     }, showClear ? /*#__PURE__*/_react.default.createElement("div", {
-      role: "button",
-      "aria-label": "Clear selected value",
-      tabIndex: 0,
       className: (0, _classnames.default)("".concat(prefixcls, "-clear")),
-      onClick: this.onClear,
-      onKeyPress: this.onClearBtnEnterPress
+      onClick: this.onClear
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null)) : arrowContent), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "suffix"
     }, suffix ? this.renderSuffix() : null)];
-    const tabIndex = disabled ? null : 0;
-    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
-      role: "combobox",
-      "aria-disabled": disabled,
-      "aria-expanded": isOpen,
-      "aria-controls": (0, _concat.default)(_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.default.createElement("div", (0, _assign.default)({
+        role: "combobox",
+        "aria-disabled": disabled,
+        "aria-expanded": isOpen,
+        "aria-controls": (0, _concat.default)(_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 ? (0, _concat.default)(_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() {
@@ -1063,13 +1118,14 @@ class Select extends _baseComponent.default {
       position: position,
       spacing: spacing,
       stopPropagation: stopPropagation,
+      disableArrowKeyDown: true,
       onVisibleChange: status => this.handlePopoverVisibleChange(status)
     }, selection);
   }
 
 }
 
-Select.contextType = _context15.default;
+Select.contextType = _context17.default;
 Select.Option = _option.default;
 Select.OptGroup = _optionGroup.default;
 Select.propTypes = {
@@ -1181,13 +1237,15 @@ Select.defaultProps = {
   onListScroll: _noop2.default,
   maxHeight: 300,
   dropdownMatchSelectWidth: true,
-  defaultActiveFirstOption: false,
+  defaultActiveFirstOption: true,
   showArrow: true,
   showClear: false,
   remote: false,
   autoAdjustOverflow: true,
   autoClearSearchValue: true,
-  arrowIcon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, null) // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
+  arrowIcon: /*#__PURE__*/_react.default.createElement(_semiIcons.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/cjs/select/option.js

@@ -108,9 +108,10 @@ class Option extends _react.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 = (0, _classnames.default)(prefixCls, {
       ["".concat(prefixCls, "-disabled")]: disabled,
@@ -174,6 +175,7 @@ class Option extends _react.PureComponent {
         },
         onMouseEnter: e => onMouseEnter && onMouseEnter(e),
         role: "option",
+        id: id,
         "aria-selected": selected ? "true" : "false",
         "aria-disabled": disabled ? "true" : "false",
         style: style

package/lib/cjs/tag/index.js

@@ -192,17 +192,19 @@ class Tag extends _react.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
     };
     const baseProps = (0, _assign.default)((0, _assign.default)({}, attr), {

package/lib/cjs/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/cjs/tagInput/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/tagInput/constants';
 import '@douyinfe/semi-foundation/lib/cjs/tagInput/tagInput.css';
-import TagInputFoundation, { TagInputAdapter } from '@douyinfe/semi-foundation/lib/cjs/tagInput/foundation';
+import TagInputFoundation, { TagInputAdapter, OnSortEndProps } from '@douyinfe/semi-foundation/lib/cjs/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;