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

package/lib/cjs/tagInput/index.js

@@ -10,11 +10,13 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.default = void 0;
 
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
@@ -54,6 +56,27 @@ var _paragraph = _interopRequireDefault(require("../typography/paragraph"));
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _reactSortableHoc = require("react-sortable-hoc");
+
+const SortableItem = (0, _reactSortableHoc.SortableElement)(props => props.item);
+const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexFlow: 'row wrap'
+    }
+  }, (0, _map.default)(items).call(items, (item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore skip SortableItem type check
+  _react.default.createElement(SortableItem, {
+    key: item.key,
+    index: index,
+    item: item.item
+  })));
+});
 const prefixCls = _constants.cssClasses.PREFIX;
 
 class TagInput extends _baseComponent.default {
@@ -94,6 +117,10 @@ class TagInput extends _baseComponent.default {
       this.foundation.handleInputMouseLeave();
     };
 
+    this.handleClick = e => {
+      this.foundation.handleClick(e);
+    };
+
     this.handleInputMouseEnter = e => {
       this.foundation.handleInputMouseEnter();
     };
@@ -106,14 +133,86 @@ class TagInput extends _baseComponent.default {
       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 = (0, _classnames.default)("".concat(prefixCls, "-wrapper-tag"), {
+        [(0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-tag-size-")).call(_context, size)]: size,
+        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+      });
+      const typoCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-typo"), {
+        ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
+      });
+      const itemWrapperCls = (0, _classnames.default)({
+        ["".concat(prefixCls, "-drag-item")]: showIconHandler,
+        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+      });
+      const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
+        className: "".concat(prefixCls, "-drag-handler")
+      }));
+      return (0, _map.default)(tagsArray).call(tagsArray, (value, index) => {
+        var _context2;
+
+        const elementKey = showIconHandler ? value : (0, _concat.default)(_context2 = "".concat(index)).call(_context2, value);
+
+        if ((0, _isFunction2.default)(renderTagItem)) {
+          return showIconHandler ? /*#__PURE__*/_react.default.createElement("div", {
+            className: itemWrapperCls,
+            key: elementKey
+          }, /*#__PURE__*/_react.default.createElement(DragHandle, null), renderTagItem(value, index)) : renderTagItem(value, index);
+        } else {
+          var _context3;
+
+          return /*#__PURE__*/_react.default.createElement(_tag.default, {
+            className: tagCls,
+            color: "white",
+            size: size === 'small' ? 'small' : 'large',
+            type: "light",
+            onClose: () => {
+              !disabled && this.handleTagClose(index);
+            },
+            closable: !disabled,
+            key: elementKey,
+            visible: true,
+            "aria-label": (0, _concat.default)(_context3 = "".concat(!disabled ? 'Closable ' : '', "Tag: ")).call(_context3, value)
+          }, showIconHandler && /*#__PURE__*/_react.default.createElement(DragHandle, null), /*#__PURE__*/_react.default.createElement(_paragraph.default, {
+            className: typoCls,
+            ellipsis: {
+              showTooltip: showContentTooltip,
+              rows: 1
+            }
+          }, value));
+        }
+      });
+    };
+
+    this.onSortEnd = callbackProps => {
+      this.foundation.handleSortEnd(callbackProps);
+    };
+
     this.foundation = new _foundation.default(this.adapter);
     this.state = {
       tagsArray: props.defaultValue || [],
       inputValue: '',
       focusing: false,
-      hovering: false
+      hovering: false,
+      active: false
     };
     this.inputRef = /*#__PURE__*/_react.default.createRef();
+    this.tagInputRef = /*#__PURE__*/_react.default.createRef();
+    this.clickOutsideHandler = null;
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -180,6 +279,14 @@ class TagInput extends _baseComponent.default {
           hovering
         });
       },
+      setActive: active => {
+        this.setState({
+          active
+        });
+      },
+      getClickOutsideHandler: () => {
+        return this.clickOutsideHandler;
+      },
       notifyBlur: e => {
         this.props.onBlur(e);
       },
@@ -200,6 +307,23 @@ class TagInput extends _baseComponent.default {
       },
       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;
       }
     });
   }
@@ -215,7 +339,10 @@ class TagInput extends _baseComponent.default {
       this.inputRef.current.focus({
         preventScroll
       });
+      this.foundation.handleClick();
     }
+
+    this.foundation.init();
   }
 
   renderClearBtn() {
@@ -304,71 +431,49 @@ class TagInput extends _baseComponent.default {
   }
 
   renderTags() {
-    var _context;
-
     const {
-      size,
       disabled,
-      renderTagItem,
       maxTagCount,
-      showContentTooltip,
       showRestTagsPopover,
-      restTagsPopoverProps = {}
+      restTagsPopoverProps = {},
+      draggable,
+      expandRestTagsOnClick
     } = this.props;
     const {
-      tagsArray
+      tagsArray,
+      active
     } = this.state;
-    const tagCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-tag"), {
-      [(0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-tag-size-")).call(_context, size)]: size
-    });
-    const typoCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-typo"), {
-      ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
-    });
     const restTagsCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"), {
       ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
     });
-    const restTags = [];
-    const tags = [];
-    (0, _forEach.default)(tagsArray).call(tagsArray, (value, index) => {
-      let item = null;
-
-      if ((0, _isFunction2.default)(renderTagItem)) {
-        item = renderTagItem(value, index);
-      } else {
-        var _context2, _context3;
-
-        item = /*#__PURE__*/_react.default.createElement(_tag.default, {
-          className: tagCls,
-          color: "white",
-          size: size === 'small' ? 'small' : 'large',
-          type: "light",
-          onClose: () => {
-            !disabled && this.handleTagClose(index);
-          },
-          closable: !disabled,
-          key: (0, _concat.default)(_context2 = "".concat(index)).call(_context2, value),
-          visible: true,
-          "aria-label": (0, _concat.default)(_context3 = "".concat(!disabled ? 'Closable ' : '', "Tag: ")).call(_context3, value)
-        }, /*#__PURE__*/_react.default.createElement(_paragraph.default, {
-          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 = (0, _slice.default)(allTags).call(allTags, 0, maxTagCount);
+      restTags = (0, _slice.default)(allTags).call(allTags, maxTagCount);
+    }
 
     const restTagsContent = /*#__PURE__*/_react.default.createElement("span", {
       className: restTagsCls
     }, "+", tagsArray.length - maxTagCount);
 
+    const sortableListItems = (0, _map.default)(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.default.createElement(SortableList, {
+        useDragHandle: true,
+        items: sortableListItems,
+        onSortEnd: this.onSortEnd,
+        axis: "xy"
+      });
+    }
+
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover ? /*#__PURE__*/_react.default.createElement(_popover.default, (0, _assign.default)({
       content: restTags,
       showArrow: true,
@@ -379,16 +484,24 @@ class TagInput extends _baseComponent.default {
   }
 
   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() {
@@ -404,10 +517,11 @@ class TagInput extends _baseComponent.default {
       focusing,
       hovering,
       tagsArray,
-      inputValue
+      inputValue,
+      active
     } = this.state;
     const tagInputCls = (0, _classnames.default)(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',
@@ -415,41 +529,49 @@ class TagInput extends _baseComponent.default {
     });
     const inputCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-input"));
     const wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"));
-    return /*#__PURE__*/_react.default.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.default.createElement("div", {
-      className: wrapperCls
-    }, this.renderTags(), /*#__PURE__*/_react.default.createElement(_input.default, {
-      "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.default.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.default.createElement("div", {
+        className: wrapperCls
+      }, this.renderTags(), /*#__PURE__*/_react.default.createElement(_input.default, {
+        "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())
+    );
   }
 
 }
@@ -473,6 +595,8 @@ TagInput.propTypes = {
   separator: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
   showClear: _propTypes.default.bool,
   addOnBlur: _propTypes.default.bool,
+  draggable: _propTypes.default.bool,
+  expandRestTagsOnClick: _propTypes.default.bool,
   autoFocus: _propTypes.default.bool,
   renderTagItem: _propTypes.default.func,
   onBlur: _propTypes.default.func,
@@ -497,6 +621,8 @@ TagInput.defaultProps = {
   allowDuplicates: true,
   showRestTagsPopover: true,
   autoFocus: false,
+  draggable: false,
+  expandRestTagsOnClick: true,
   showContentTooltip: true,
   separator: ',',
   size: 'default',

package/lib/cjs/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/cjs/tooltip/index.js

@@ -721,8 +721,8 @@ class Tooltip extends _baseComponent.default {
           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
 
@@ -790,5 +790,7 @@ Tooltip.defaultProps = {
   closeOnEsc: false,
   guardFocus: false,
   returnFocusOnClose: false,
-  onEscKeyDown: _noop2.default
+  onEscKeyDown: _noop2.default,
+  disableFocusListener: false,
+  disableArrowKeyDown: false
 };

package/lib/es/collapse/item.d.ts

@@ -9,6 +9,8 @@ export interface CollapsePanelProps {
     children?: React.ReactNode;
     reCalcKey?: number | string;
     style?: CSSProperties;
+    showArrow?: boolean;
+    disabled?: boolean;
 }
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
     static contextType: React.Context<CollapseContextType>;
@@ -18,6 +20,12 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         reCalcKey: PropTypes.Requireable<string | number>;
+        showArrow: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        showArrow: boolean;
+        disabled: boolean;
     };
     private ariaID;
     context: CollapseContextType;

package/lib/es/collapse/item.js

@@ -30,6 +30,7 @@ export default class CollapsePanel extends PureComponent {
   renderHeader(active) {
     let expandIconEnable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const {
+      showArrow,
       header,
       extra
     } = this.props;
@@ -58,12 +59,12 @@ export default class CollapsePanel extends PureComponent {
     const iconPosLeft = expandIconPosition === 'left';
 
     if (typeof header === 'string') {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, iconPosLeft ? icon : null, /*#__PURE__*/React.createElement("span", null, header), /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, showArrow && (iconPosLeft ? icon : null), /*#__PURE__*/React.createElement("span", null, header), /*#__PURE__*/React.createElement("span", {
         className: "".concat(cssClasses.PREFIX, "-header-right")
-      }, /*#__PURE__*/React.createElement("span", null, extra), iconPosLeft ? null : icon));
+      }, /*#__PURE__*/React.createElement("span", null, extra), showArrow && (iconPosLeft ? null : icon)));
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, iconPosLeft ? icon : null, header, iconPosLeft ? null : icon);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showArrow && (iconPosLeft ? icon : null), header, showArrow && (iconPosLeft ? null : icon));
   }
 
   render() {
@@ -74,9 +75,11 @@ export default class CollapsePanel extends PureComponent {
       itemKey,
       reCalcKey,
       header,
-      extra
+      extra,
+      showArrow,
+      disabled
     } = _a,
-          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey", "header", "extra"]);
+          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey", "header", "extra", "showArrow", "disabled"]);
 
     const {
       keepDOM,
@@ -91,6 +94,7 @@ export default class CollapsePanel extends PureComponent {
     });
     const headerCls = cls({
       ["".concat(cssClasses.PREFIX, "-header")]: true,
+      ["".concat(cssClasses.PREFIX, "-header-disabled")]: disabled,
       ["".concat(cssClasses.PREFIX, "-header-iconLeft")]: expandIconPosition === 'left'
     });
     const contentCls = cls({
@@ -102,10 +106,11 @@ export default class CollapsePanel extends PureComponent {
       role: "button",
       tabIndex: 0,
       className: headerCls,
+      "aria-disabled": disabled,
       "aria-expanded": active ? 'true' : 'false',
       "aria-owns": this.ariaID,
-      onClick: e => onClick(itemKey, e)
-    }, this.renderHeader(active, children !== undefined)), children && /*#__PURE__*/React.createElement(Collapsible, {
+      onClick: e => !disabled && onClick(itemKey, e)
+    }, this.renderHeader(active, children !== undefined && !disabled)), children && /*#__PURE__*/React.createElement(Collapsible, {
       isOpen: active,
       keepDOM: keepDOM,
       motion: motion,
@@ -126,5 +131,11 @@ CollapsePanel.propTypes = {
   extra: PropTypes.node,
   header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.string,
-  reCalcKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  reCalcKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  showArrow: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+CollapsePanel.defaultProps = {
+  showArrow: true,
+  disabled: false
 };

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

@@ -56,6 +56,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         max: PropTypes.Requireable<number>;
         placeholder: PropTypes.Requireable<string | any[]>;
         presets: PropTypes.Requireable<any[]>;
+        presetPosition: PropTypes.Requireable<"top" | "left" | "right" | "bottom">;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeWithDateFirst: PropTypes.Requireable<boolean>;
         weekStartsOn: PropTypes.Requireable<number>;
@@ -111,6 +112,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         stopPropagation: boolean;
         motion: boolean;
         prefixCls: "semi-datepicker";
+        presetPosition: string;
         zIndex: number;
         type: string;
         size: string;
@@ -172,6 +174,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     disabledDisposeTime: MonthsGridProps['disabledTime'];
     renderMonthGrid(locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']): JSX.Element;
     renderQuickControls(): JSX.Element;
+    renderDateInput(): JSX.Element;
     handleOpenPanel: () => void;
     handleInputChange: DatePickerFoundation['handleInputChange'];
     handleInsetInputChange: (options: InsetInputChangeProps) => void;