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

package/lib/es/tagInput/index.js

@@ -4,9 +4,10 @@ import _isNull from "lodash/isNull";
 import _isArray from "lodash/isArray";
 import _isString from "lodash/isString";
 import _noop from "lodash/noop";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -19,7 +20,27 @@ import Tag from '../tag';
 import Input from '../input';
 import Popover from '../popover';
 import Paragraph from '../typography/paragraph';
-import { IconClear } from '@douyinfe/semi-icons';
+import { IconClear, IconHandle } from '@douyinfe/semi-icons';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+const SortableItem = SortableElement(props => props.item);
+const SortableList = SortableContainer(_ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexFlow: 'row wrap'
+    }
+  }, _mapInstanceProperty(items).call(items, (item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore skip SortableItem type check
+  React.createElement(SortableItem, {
+    key: item.key,
+    index: index,
+    item: item.item
+  })));
+});
 const prefixCls = cssClasses.PREFIX;
 
 class TagInput extends BaseComponent {
@@ -60,6 +81,10 @@ class TagInput extends BaseComponent {
       this.foundation.handleInputMouseLeave();
     };
 
+    this.handleClick = e => {
+      this.foundation.handleClick(e);
+    };
+
     this.handleInputMouseEnter = e => {
       this.foundation.handleInputMouseEnter();
     };
@@ -72,14 +97,86 @@ class TagInput extends BaseComponent {
       this.foundation.handlePreventMouseDown(e);
     };
 
+    this.getAllTags = () => {
+      var _context;
+
+      const {
+        size,
+        disabled,
+        renderTagItem,
+        showContentTooltip,
+        draggable
+      } = this.props;
+      const {
+        tagsArray,
+        active
+      } = this.state;
+      const showIconHandler = active && draggable;
+      const tagCls = cls("".concat(prefixCls, "-wrapper-tag"), {
+        [_concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-tag-size-")).call(_context, size)]: size,
+        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+      });
+      const typoCls = cls("".concat(prefixCls, "-wrapper-typo"), {
+        ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
+      });
+      const itemWrapperCls = cls({
+        ["".concat(prefixCls, "-drag-item")]: showIconHandler,
+        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+      });
+      const DragHandle = SortableHandle(() => /*#__PURE__*/React.createElement(IconHandle, {
+        className: "".concat(prefixCls, "-drag-handler")
+      }));
+      return _mapInstanceProperty(tagsArray).call(tagsArray, (value, index) => {
+        var _context2;
+
+        const elementKey = showIconHandler ? value : _concatInstanceProperty(_context2 = "".concat(index)).call(_context2, value);
+
+        if (_isFunction(renderTagItem)) {
+          return showIconHandler ? /*#__PURE__*/React.createElement("div", {
+            className: itemWrapperCls,
+            key: elementKey
+          }, /*#__PURE__*/React.createElement(DragHandle, null), renderTagItem(value, index)) : renderTagItem(value, index);
+        } else {
+          var _context3;
+
+          return /*#__PURE__*/React.createElement(Tag, {
+            className: tagCls,
+            color: "white",
+            size: size === 'small' ? 'small' : 'large',
+            type: "light",
+            onClose: () => {
+              !disabled && this.handleTagClose(index);
+            },
+            closable: !disabled,
+            key: elementKey,
+            visible: true,
+            "aria-label": _concatInstanceProperty(_context3 = "".concat(!disabled ? 'Closable ' : '', "Tag: ")).call(_context3, value)
+          }, showIconHandler && /*#__PURE__*/React.createElement(DragHandle, null), /*#__PURE__*/React.createElement(Paragraph, {
+            className: typoCls,
+            ellipsis: {
+              showTooltip: showContentTooltip,
+              rows: 1
+            }
+          }, value));
+        }
+      });
+    };
+
+    this.onSortEnd = callbackProps => {
+      this.foundation.handleSortEnd(callbackProps);
+    };
+
     this.foundation = new TagInputFoundation(this.adapter);
     this.state = {
       tagsArray: props.defaultValue || [],
       inputValue: '',
       focusing: false,
-      hovering: false
+      hovering: false,
+      active: false
     };
     this.inputRef = /*#__PURE__*/React.createRef();
+    this.tagInputRef = /*#__PURE__*/React.createRef();
+    this.clickOutsideHandler = null;
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -146,6 +243,14 @@ class TagInput extends BaseComponent {
           hovering
         });
       },
+      setActive: active => {
+        this.setState({
+          active
+        });
+      },
+      getClickOutsideHandler: () => {
+        return this.clickOutsideHandler;
+      },
       notifyBlur: e => {
         this.props.onBlur(e);
       },
@@ -166,6 +271,23 @@ class TagInput extends BaseComponent {
       },
       notifyKeyDown: e => {
         this.props.onKeyDown(e);
+      },
+      registerClickOutsideHandler: cb => {
+        const clickOutsideHandler = e => {
+          const tagInputDom = this.tagInputRef && this.tagInputRef.current;
+          const target = e.target;
+
+          if (tagInputDom && !tagInputDom.contains(target)) {
+            cb(e);
+          }
+        };
+
+        this.clickOutsideHandler = clickOutsideHandler;
+        document.addEventListener('click', clickOutsideHandler, false);
+      },
+      unregisterClickOutsideHandler: () => {
+        document.removeEventListener('click', this.clickOutsideHandler, false);
+        this.clickOutsideHandler = null;
       }
     });
   }
@@ -181,7 +303,10 @@ class TagInput extends BaseComponent {
       this.inputRef.current.focus({
         preventScroll
       });
+      this.foundation.handleClick();
     }
+
+    this.foundation.init();
   }
 
   renderClearBtn() {
@@ -270,71 +395,49 @@ class TagInput extends BaseComponent {
   }
 
   renderTags() {
-    var _context;
-
     const {
-      size,
       disabled,
-      renderTagItem,
       maxTagCount,
-      showContentTooltip,
       showRestTagsPopover,
-      restTagsPopoverProps = {}
+      restTagsPopoverProps = {},
+      draggable,
+      expandRestTagsOnClick
     } = this.props;
     const {
-      tagsArray
+      tagsArray,
+      active
     } = this.state;
-    const tagCls = cls("".concat(prefixCls, "-wrapper-tag"), {
-      [_concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-tag-size-")).call(_context, size)]: size
-    });
-    const typoCls = cls("".concat(prefixCls, "-wrapper-typo"), {
-      ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
-    });
     const restTagsCls = cls("".concat(prefixCls, "-wrapper-n"), {
       ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
     });
-    const restTags = [];
-    const tags = [];
-
-    _forEachInstanceProperty(tagsArray).call(tagsArray, (value, index) => {
-      let item = null;
-
-      if (_isFunction(renderTagItem)) {
-        item = renderTagItem(value, index);
-      } else {
-        var _context2, _context3;
-
-        item = /*#__PURE__*/React.createElement(Tag, {
-          className: tagCls,
-          color: "white",
-          size: size === 'small' ? 'small' : 'large',
-          type: "light",
-          onClose: () => {
-            !disabled && this.handleTagClose(index);
-          },
-          closable: !disabled,
-          key: _concatInstanceProperty(_context2 = "".concat(index)).call(_context2, value),
-          visible: true,
-          "aria-label": _concatInstanceProperty(_context3 = "".concat(!disabled ? 'Closable ' : '', "Tag: ")).call(_context3, value)
-        }, /*#__PURE__*/React.createElement(Paragraph, {
-          className: typoCls,
-          ellipsis: {
-            showTooltip: showContentTooltip,
-            rows: 1
-          }
-        }, value));
-      }
+    const allTags = this.getAllTags();
+    let restTags = [];
+    let tags = [...allTags];
 
-      if (maxTagCount && index >= maxTagCount) {
-        restTags.push(item);
-      } else {
-        tags.push(item);
-      }
-    });
+    if ((!active || !expandRestTagsOnClick) && maxTagCount && maxTagCount < allTags.length) {
+      tags = _sliceInstanceProperty(allTags).call(allTags, 0, maxTagCount);
+      restTags = _sliceInstanceProperty(allTags).call(allTags, maxTagCount);
+    }
 
     const restTagsContent = /*#__PURE__*/React.createElement("span", {
       className: restTagsCls
     }, "+", tagsArray.length - maxTagCount);
+
+    const sortableListItems = _mapInstanceProperty(allTags).call(allTags, (item, index) => ({
+      item: item,
+      key: tagsArray[index]
+    }));
+
+    if (active && draggable && sortableListItems.length > 0) {
+      // @ts-ignore skip SortableItem type check
+      return /*#__PURE__*/React.createElement(SortableList, {
+        useDragHandle: true,
+        items: sortableListItems,
+        onSortEnd: this.onSortEnd,
+        axis: "xy"
+      });
+    }
+
     return /*#__PURE__*/React.createElement(React.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover ? /*#__PURE__*/React.createElement(Popover, _Object$assign({
       content: restTags,
       showArrow: true,
@@ -345,16 +448,24 @@ class TagInput extends BaseComponent {
   }
 
   blur() {
-    this.inputRef.current.blur();
+    this.inputRef.current.blur(); // unregister clickOutside event 
+
+    this.foundation.clickOutsideCallBack();
   }
 
   focus() {
     const {
-      preventScroll
+      preventScroll,
+      disabled
     } = this.props;
     this.inputRef.current.focus({
       preventScroll
     });
+
+    if (!disabled) {
+      // register clickOutside event 
+      this.foundation.handleClick();
+    }
   }
 
   render() {
@@ -370,10 +481,11 @@ class TagInput extends BaseComponent {
       focusing,
       hovering,
       tagsArray,
-      inputValue
+      inputValue,
+      active
     } = this.state;
     const tagInputCls = cls(prefixCls, className, {
-      ["".concat(prefixCls, "-focus")]: focusing,
+      ["".concat(prefixCls, "-focus")]: focusing || active,
       ["".concat(prefixCls, "-disabled")]: disabled,
       ["".concat(prefixCls, "-hover")]: hovering && !disabled,
       ["".concat(prefixCls, "-error")]: validateStatus === 'error',
@@ -381,41 +493,49 @@ class TagInput extends BaseComponent {
     });
     const inputCls = cls("".concat(prefixCls, "-wrapper-input"));
     const wrapperCls = cls("".concat(prefixCls, "-wrapper"));
-    return /*#__PURE__*/React.createElement("div", {
-      style: style,
-      className: tagInputCls,
-      "aria-disabled": disabled,
-      "aria-label": this.props['aria-label'],
-      "aria-invalid": validateStatus === 'error',
-      onMouseEnter: e => {
-        this.handleInputMouseEnter(e);
-      },
-      onMouseLeave: e => {
-        this.handleInputMouseLeave(e);
-      }
-    }, this.renderPrefix(), /*#__PURE__*/React.createElement("div", {
-      className: wrapperCls
-    }, this.renderTags(), /*#__PURE__*/React.createElement(Input, {
-      "aria-label": 'input value',
-      ref: this.inputRef,
-      className: inputCls,
-      disabled: disabled,
-      value: inputValue,
-      size: size,
-      placeholder: tagsArray.length === 0 ? placeholder : '',
-      onKeyDown: e => {
-        this.handleKeyDown(e);
-      },
-      onChange: (v, e) => {
-        this.handleInputChange(e);
-      },
-      onBlur: e => {
-        this.handleInputBlur(e);
-      },
-      onFocus: e => {
-        this.handleInputFocus(e);
-      }
-    })), this.renderClearBtn(), this.renderSuffix());
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line 
+      React.createElement("div", {
+        ref: this.tagInputRef,
+        style: style,
+        className: tagInputCls,
+        "aria-disabled": disabled,
+        "aria-label": this.props['aria-label'],
+        "aria-invalid": validateStatus === 'error',
+        onMouseEnter: e => {
+          this.handleInputMouseEnter(e);
+        },
+        onMouseLeave: e => {
+          this.handleInputMouseLeave(e);
+        },
+        onClick: e => {
+          this.handleClick(e);
+        }
+      }, this.renderPrefix(), /*#__PURE__*/React.createElement("div", {
+        className: wrapperCls
+      }, this.renderTags(), /*#__PURE__*/React.createElement(Input, {
+        "aria-label": 'input value',
+        ref: this.inputRef,
+        className: inputCls,
+        disabled: disabled,
+        value: inputValue,
+        size: size,
+        placeholder: tagsArray.length === 0 ? placeholder : '',
+        onKeyDown: e => {
+          this.handleKeyDown(e);
+        },
+        onChange: (v, e) => {
+          this.handleInputChange(e);
+        },
+        onBlur: e => {
+          this.handleInputBlur(e);
+        },
+        onFocus: e => {
+          this.handleInputFocus(e);
+        }
+      })), this.renderClearBtn(), this.renderSuffix())
+    );
   }
 
 }
@@ -439,6 +559,8 @@ TagInput.propTypes = {
   separator: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   showClear: PropTypes.bool,
   addOnBlur: PropTypes.bool,
+  draggable: PropTypes.bool,
+  expandRestTagsOnClick: PropTypes.bool,
   autoFocus: PropTypes.bool,
   renderTagItem: PropTypes.func,
   onBlur: PropTypes.func,
@@ -463,6 +585,8 @@ TagInput.defaultProps = {
   allowDuplicates: true,
   showRestTagsPopover: true,
   autoFocus: false,
+  draggable: false,
+  expandRestTagsOnClick: true,
   showContentTooltip: true,
   separator: ',',
   size: 'default',

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

@@ -53,8 +53,10 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    disableArrowKeyDown?: boolean;
     wrapperId?: string;
     preventScroll?: boolean;
+    disableFocusListener?: boolean;
 }
 interface TooltipState {
     visible: boolean;
@@ -139,6 +141,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         guardFocus: boolean;
         returnFocusOnClose: boolean;
         onEscKeyDown: (...args: any[]) => void;
+        disableFocusListener: boolean;
+        disableArrowKeyDown: boolean;
     };
     eventManager: Event;
     triggerEl: React.RefObject<unknown>;

package/lib/es/tooltip/index.js

@@ -683,8 +683,8 @@ export default class Tooltip extends BaseComponent {
           ref.current = node;
         }
       },
-      tabIndex: 0,
-      'data-popupid': id
+      tabIndex: children.props.tabIndex || 0 // a11y keyboard, in some condition select's tabindex need to -1 or 0 
+
     })); // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
 
@@ -749,5 +749,7 @@ Tooltip.defaultProps = {
   closeOnEsc: false,
   guardFocus: false,
   returnFocusOnClose: false,
-  onEscKeyDown: _noop
+  onEscKeyDown: _noop,
+  disableFocusListener: false,
+  disableArrowKeyDown: false
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.16.1",
+    "version": "2.17.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.16.1",
-        "@douyinfe/semi-foundation": "2.16.1",
-        "@douyinfe/semi-icons": "2.16.1",
+        "@douyinfe/semi-animation-react": "2.17.0-beta.0",
+        "@douyinfe/semi-foundation": "2.17.0-beta.0",
+        "@douyinfe/semi-icons": "2.17.0-beta.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.16.1",
+        "@douyinfe/semi-theme-default": "2.17.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +66,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "3de98e4072b5614d5e41e2ad65f687507563dc7c",
+    "gitHead": "471474bb6fe0a743bc3daba532279969cc9374a5",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.16.1",
+        "@douyinfe/semi-scss-compile": "2.17.0-beta.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

package/popover/index.tsx

@@ -44,7 +44,8 @@ export interface PopoverProps extends BaseProps {
     guardFocus?: TooltipProps['guardFocus'];
     returnFocusOnClose?: TooltipProps['returnFocusOnClose'];
     onEscKeyDown?: TooltipProps['onEscKeyDown'];
-    clickToHide?:TooltipProps['clickToHide']
+    clickToHide?:TooltipProps['clickToHide'];
+    disableFocusListener?: boolean
 }
 
 export interface PopoverState {
@@ -82,6 +83,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         arrowBounding: PropTypes.object,
         prefixCls: PropTypes.string,
         guardFocus: PropTypes.bool,
+        disableArrowKeyDown: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -100,6 +102,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         closeOnEsc: true,
         returnFocusOnClose: true,
         guardFocus: true,
+        disableFocusListener: true
     };
 
     context: ContextValue;

package/select/__test__/select.test.js

@@ -876,9 +876,9 @@ describe('Select', () => {
         // Since there is no mechanism such as event bubbling in enzyme + jsdom, the blur event can only be triggered manually on the blur element,
         // and the blur of the `a element` cannot be achieved through the focus `b element`.
 
-        // blur usually call when popover close, so use select instance close() method to mock blur click like use in browser
+        // Adapt to A11y requirements, close the panel will not call the onBlur func 
         select.instance().close();
-        expect(spyOnBlur.callCount).toEqual(1);
+        expect(spyOnBlur.callCount).toEqual(0);
         select.unmount();
     });
 
@@ -1076,10 +1076,12 @@ describe('Select', () => {
         };
         let select = getSelect(props);
         // press ⬇️
+        // since the defaultActiveFirstOption default to be true, after ⬇️, the second option focused
         select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.DOWN });
-        expect(select.find(`.${BASE_CLASS_PREFIX}-select-option`).at(0).hasClass(`${BASE_CLASS_PREFIX}-select-option-focused`)).toBe(true);
+        expect(select.find(`.${BASE_CLASS_PREFIX}-select-option`).at(1).hasClass(`${BASE_CLASS_PREFIX}-select-option-focused`)).toBe(true);
         // press ⬆️
         select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.UP });
+        select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.UP });
         expect(select.find(`.${BASE_CLASS_PREFIX}-select-option`).at(defaultList.length-1).hasClass(`${BASE_CLASS_PREFIX}-select-option-focused`)).toBe(true);
         // press ESC
         select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.ESC });