@douyinfe/semi-ui 2.28.0-alpha.0 → 2.28.0

package/lib/cjs/tabs/TabBar.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
+
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -27,6 +29,8 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
 
+var _TabItem = _interopRequireDefault(require("./TabItem"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var __rest = void 0 && (void 0).__rest || function (s, e) {
@@ -51,7 +55,7 @@ class TabBar extends _react.default.Component {
         const key = this._getItemKey(itemKey); // eslint-disable-next-line max-len
 
 
-        const tabItem = document.querySelector("[data-uuid=\"".concat(this.state.uuid, "\"] .").concat(_constants.cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
+        const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${_constants.cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
         tabItem.scrollIntoView({
           behavior: 'smooth',
           block: 'nearest',
@@ -68,45 +72,23 @@ class TabBar extends _react.default.Component {
       const {
         size,
         type,
-        deleteTabItem
+        deleteTabItem,
+        handleKeyDown,
+        tabPosition
       } = this.props;
-      const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
-      const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
-        "aria-label": "Close",
-        role: "button",
-        className: "".concat(_constants.cssClasses.TABS_TAB, "-icon-close"),
-        onClick: e => deleteTabItem(panel.itemKey, e)
-      }) : null;
-      let events = {};
-      const key = panel.itemKey;
-
-      if (!panel.disabled) {
-        events = {
-          onClick: e => this.handleItemClick(key, e)
-        };
-      }
 
-      const isSelected = this._isActive(key);
-
-      const className = (0, _classnames.default)(_constants.cssClasses.TABS_TAB, {
-        [_constants.cssClasses.TABS_TAB_ACTIVE]: isSelected,
-        [_constants.cssClasses.TABS_TAB_DISABLED]: panel.disabled,
-        ["".concat(_constants.cssClasses.TABS_TAB, "-small")]: size === 'small',
-        ["".concat(_constants.cssClasses.TABS_TAB, "-medium")]: size === 'medium'
-      });
-      return /*#__PURE__*/_react.default.createElement("div", Object.assign({
-        role: "tab",
-        id: "semiTab".concat(key),
-        "data-tabkey": "semiTab".concat(key),
-        "aria-controls": "semiTabPanel".concat(key),
-        "aria-disabled": panel.disabled ? 'true' : 'false',
-        "aria-selected": isSelected ? 'true' : 'false',
-        tabIndex: isSelected ? 0 : -1,
-        onKeyDown: e => this.handleKeyDown(e, key, panel.closable)
-      }, events, {
-        className: className,
-        key: this._getItemKey(key)
-      }), panelIcon, panel.tab, closableIcon);
+      const isSelected = this._isActive(panel.itemKey);
+
+      return /*#__PURE__*/_react.default.createElement(_TabItem.default, Object.assign({}, (0, _pick2.default)(panel, ['disabled', 'icon', 'itemKey', 'tab', 'closable']), {
+        key: this._getItemKey(panel.itemKey),
+        selected: isSelected,
+        size: size,
+        type: type,
+        tabPosition: tabPosition,
+        handleKeyDown: handleKeyDown,
+        deleteTabItem: deleteTabItem,
+        onClick: this.handleItemClick
+      }));
     };
 
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
@@ -121,7 +103,7 @@ class TabBar extends _react.default.Component {
       const key = this._getItemKey(lastItem.itemKey); // eslint-disable-next-line max-len
 
 
-      const tabItem = document.querySelector("[data-uuid=\"".concat(this.state.uuid, "\"] .").concat(_constants.cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
+      const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${_constants.cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
       tabItem.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
@@ -162,17 +144,17 @@ class TabBar extends _react.default.Component {
       }));
 
       const arrowCls = (0, _classnames.default)({
-        ["".concat(_constants.cssClasses.TABS_BAR, "-arrow-").concat(pos)]: pos,
-        ["".concat(_constants.cssClasses.TABS_BAR, "-arrow")]: true
+        [`${_constants.cssClasses.TABS_BAR}-arrow-${pos}`]: pos,
+        [`${_constants.cssClasses.TABS_BAR}-arrow`]: true
       });
       const dropdownCls = (0, _classnames.default)(dropdownClassName, {
-        ["".concat(_constants.cssClasses.TABS_BAR, "-dropdown")]: true
+        [`${_constants.cssClasses.TABS_BAR}-dropdown`]: true
       });
       return /*#__PURE__*/_react.default.createElement(_dropdown.default, {
         className: dropdownCls,
         clickToHide: true,
         clickTriggerToHide: true,
-        key: "".concat(rePosKey, "-").concat(pos),
+        key: `${rePosKey}-${pos}`,
         position: pos === 'start' ? 'bottomLeft' : 'bottomRight',
         render: disabled ? null : menu,
         showTick: true,
@@ -215,14 +197,14 @@ class TabBar extends _react.default.Component {
         items: renderedList,
         overflowRenderer: this.renderOverflow,
         renderMode: "scroll",
-        className: "".concat(_constants.cssClasses.TABS_BAR, "-overflow-list"),
+        className: `${_constants.cssClasses.TABS_BAR}-overflow-list`,
         visibleItemRenderer: this.renderTabItem
       });
     };
 
     this._isActive = key => key === this.props.activeKey;
 
-    this._getItemKey = key => "".concat(key, "-bar");
+    this._getItemKey = key => `${key}-bar`;
 
     this.state = {
       endInd: props.list.length,
@@ -253,8 +235,8 @@ class TabBar extends _react.default.Component {
     };
     const tabBarExtraContentStyle = tabBarExtraContent && tabBarExtraContent.props ? tabBarExtraContent.props.style : {};
     const extraCls = (0, _classnames.default)(_constants.cssClasses.TABS_BAR_EXTRA, {
-      ["".concat(_constants.cssClasses.TABS_BAR, "-").concat(type, "-extra")]: type,
-      ["".concat(_constants.cssClasses.TABS_BAR, "-").concat(type, "-extra-").concat(size)]: size
+      [`${_constants.cssClasses.TABS_BAR}-${type}-extra`]: type,
+      [`${_constants.cssClasses.TABS_BAR}-${type}-extra-${size}`]: size
     });
 
     if (tabBarExtraContent) {
@@ -286,8 +268,8 @@ class TabBar extends _react.default.Component {
       [_constants.cssClasses.TABS_BAR_LINE]: type === 'line',
       [_constants.cssClasses.TABS_BAR_CARD]: type === 'card',
       [_constants.cssClasses.TABS_BAR_BUTTON]: type === 'button',
-      ["".concat(_constants.cssClasses.TABS_BAR, "-").concat(tabPosition)]: tabPosition,
-      ["".concat(_constants.cssClasses.TABS_BAR, "-collapse")]: collapsible
+      [`${_constants.cssClasses.TABS_BAR}-${tabPosition}`]: tabPosition,
+      [`${_constants.cssClasses.TABS_BAR}-collapse`]: collapsible
     });
     const extra = this.renderExtra();
     const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);

package/lib/cjs/tabs/TabItem.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode, MouseEvent } from 'react';
+import { TabType, TabSize, TabPosition } from './interface';
+export interface TabItemProps {
+    tab?: ReactNode;
+    icon?: ReactNode;
+    size?: TabSize;
+    type?: TabType;
+    tabPosition?: TabPosition;
+    selected?: boolean;
+    closable?: boolean;
+    disabled?: boolean;
+    itemKey?: string;
+    handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
+    deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
+    onClick?: (itemKey: string, e: MouseEvent<Element>) => void;
+}
+declare const ForwardTabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement>>;
+export default ForwardTabItem;

package/lib/cjs/tabs/TabItem.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/tabs/constants");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const TabItem = (props, ref) => {
+  const {
+    tab,
+    size,
+    type,
+    icon,
+    selected,
+    closable,
+    disabled,
+    itemKey,
+    deleteTabItem,
+    tabPosition,
+    handleKeyDown,
+    onClick
+  } = props,
+        restProps = __rest(props, ["tab", "size", "type", "icon", "selected", "closable", "disabled", "itemKey", "deleteTabItem", "tabPosition", "handleKeyDown", "onClick"]);
+
+  const closableIcon = (0, _react.useMemo)(() => {
+    return type === 'card' && closable ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+      "aria-label": "Close",
+      role: "button",
+      className: `${_constants.cssClasses.TABS_TAB}-icon-close`,
+      onClick: e => deleteTabItem(itemKey, e)
+    }) : null;
+  }, [type, closable, deleteTabItem, itemKey]);
+  const renderIcon = (0, _react.useCallback)(icon => /*#__PURE__*/_react.default.createElement("span", null, icon), []);
+  const handleKeyDownInItem = (0, _react.useCallback)(event => {
+    handleKeyDown && handleKeyDown(event, itemKey, closable);
+  }, [handleKeyDown, itemKey, closable]);
+  const handleItemClick = (0, _react.useCallback)(e => {
+    !disabled && onClick && onClick(itemKey, e);
+  }, [itemKey, disabled, onClick]);
+  const panelIcon = icon ? renderIcon(icon) : null;
+  const className = (0, _classnames.default)(_constants.cssClasses.TABS_TAB, `${_constants.cssClasses.TABS_TAB}-${type}`, `${_constants.cssClasses.TABS_TAB}-${tabPosition}`, `${_constants.cssClasses.TABS_TAB}-single`, {
+    [_constants.cssClasses.TABS_TAB_ACTIVE]: selected,
+    [_constants.cssClasses.TABS_TAB_DISABLED]: disabled,
+    [`${_constants.cssClasses.TABS_TAB}-small`]: size === 'small',
+    [`${_constants.cssClasses.TABS_TAB}-medium`]: size === 'medium'
+  });
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    role: "tab",
+    id: `semiTab${itemKey}`,
+    "data-tabkey": `semiTab${itemKey}`,
+    "aria-controls": `semiTabPanel${itemKey}`,
+    "aria-disabled": disabled ? 'true' : 'false',
+    "aria-selected": selected ? 'true' : 'false',
+    tabIndex: selected ? 0 : -1,
+    onKeyDown: handleKeyDownInItem,
+    onClick: handleItemClick,
+    className: className
+  }, restProps, {
+    ref: ref
+  }), panelIcon, tab, closableIcon);
+}; // Why is forwardRef needed here？
+// Because TabItem needs to be used in OverflowList （when tabs' type is collapsible), 
+// OverflowList will pass ref to the outermost div DOM node of TabItem
+
+
+const ForwardTabItem = /*#__PURE__*/(0, _react.forwardRef)(TabItem); // @ts-ignore 
+
+ForwardTabItem.elementType = 'Tabs.TabItem';
+var _default = ForwardTabItem;
+exports.default = _default;

package/lib/cjs/tabs/TabPane.js

@@ -119,8 +119,8 @@ class TabPane extends _react.PureComponent {
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({
       ref: this.ref,
       role: "tabpanel",
-      id: "semiTabPanel".concat(itemKey),
-      "aria-labelledby": "semiTab".concat(itemKey),
+      id: `semiTabPanel${itemKey}`,
+      "aria-labelledby": `semiTab${itemKey}`,
       className: classNames,
       style: style,
       "aria-hidden": active ? 'false' : 'true',
@@ -137,7 +137,7 @@ class TabPane extends _react.PureComponent {
         animationEventsNeedBind
       } = _ref;
       return /*#__PURE__*/_react.default.createElement("div", Object.assign({
-        className: "".concat(_constants.cssClasses.TABS_PANE_MOTION_OVERLAY, " ").concat(animationClassName),
+        className: `${_constants.cssClasses.TABS_PANE_MOTION_OVERLAY} ${animationClassName}`,
         "x-semi-prop": "children"
       }, animationEventsNeedBind), shouldRender ? children : null);
     }));

package/lib/cjs/tabs/index.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactElement, ReactNode, RefCallback, RefObject } from 'react';
+import React, { MouseEvent, ReactElement, ReactNode, RefCallback, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/cjs/tabs/foundation';
 import BaseComponent from '../_base/baseComponent';
@@ -14,6 +14,7 @@ export interface TabsState {
 }
 declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     static TabPane: typeof TabPane;
+    static TabItem: React.ForwardRefExoticComponent<import("./TabItem").TabItemProps & React.RefAttributes<HTMLDivElement>>;
     static propTypes: {
         activeKey: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;

package/lib/cjs/tabs/index.js

@@ -32,6 +32,8 @@ var _TabBar = _interopRequireDefault(require("./TabBar"));
 
 var _TabPane = _interopRequireDefault(require("./TabPane"));
 
+var _TabItem = _interopRequireDefault(require("./TabItem"));
+
 var _tabsContext = _interopRequireDefault(require("./tabs-context"));
 
 var _interface = require("./interface");
@@ -334,11 +336,11 @@ class Tabs extends _baseComponent.default {
     } = this.state;
     const tabWrapperCls = (0, _classnames.default)(className, {
       [_constants.cssClasses.TABS]: true,
-      ["".concat(_constants.cssClasses.TABS, "-").concat(tabPosition)]: tabPosition
+      [`${_constants.cssClasses.TABS}-${tabPosition}`]: tabPosition
     });
     const tabContentCls = (0, _classnames.default)({
       [_constants.cssClasses.TABS_CONTENT]: true,
-      ["".concat(_constants.cssClasses.TABS_CONTENT, "-").concat(tabPosition)]: tabPosition
+      [`${_constants.cssClasses.TABS_CONTENT}-${tabPosition}`]: tabPosition
     });
     const tabBarProps = {
       activeKey,
@@ -379,6 +381,7 @@ class Tabs extends _baseComponent.default {
 }
 
 Tabs.TabPane = _TabPane.default;
+Tabs.TabItem = _TabItem.default;
 Tabs.propTypes = {
   activeKey: _propTypes.default.string,
   className: _propTypes.default.string,

package/lib/cjs/tag/group.js

@@ -54,7 +54,7 @@ class TagGroup extends _react.PureComponent {
         trigger: "hover",
         position: "top",
         autoAdjustOverflow: true,
-        className: "".concat(prefixCls, "-rest-group-popover")
+        className: `${prefixCls}-rest-group-popover`
       }, popoverProps, {
         key: "_+n_Popover"
       }), nTag);
@@ -137,10 +137,10 @@ class TagGroup extends _react.PureComponent {
       size
     } = this.props;
     const groupCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-group")]: true,
-      ["".concat(prefixCls, "-group-max")]: maxTagCount,
-      ["".concat(prefixCls, "-group-small")]: size === 'small',
-      ["".concat(prefixCls, "-group-large")]: size === 'large'
+      [`${prefixCls}-group`]: true,
+      [`${prefixCls}-group-max`]: maxTagCount,
+      [`${prefixCls}-group-small`]: size === 'small',
+      [`${prefixCls}-group-large`]: size === 'large'
     }, className);
     const tags = this.renderAllTags();
     const tagContents = typeof maxTagCount === 'undefined' ? tags : this.renderMergeTags(tags);

package/lib/cjs/tag/index.js

@@ -184,16 +184,16 @@ class Tag extends _react.Component {
     const baseProps = Object.assign(Object.assign({}, attr), {
       onClick,
       className: (0, _classnames.default)(prefixCls, {
-        ["".concat(prefixCls, "-default")]: size === 'default',
-        ["".concat(prefixCls, "-small")]: size === 'small',
-        ["".concat(prefixCls, "-large")]: size === 'large',
-        ["".concat(prefixCls, "-square")]: shape === 'square',
-        ["".concat(prefixCls, "-circle")]: shape === 'circle',
-        ["".concat(prefixCls, "-").concat(type)]: type,
-        ["".concat(prefixCls, "-").concat(color, "-").concat(type)]: color && type,
-        ["".concat(prefixCls, "-closable")]: closable,
-        ["".concat(prefixCls, "-invisible")]: !isVisible,
-        ["".concat(prefixCls, "-avatar-").concat(avatarShape)]: avatarSrc
+        [`${prefixCls}-default`]: size === 'default',
+        [`${prefixCls}-small`]: size === 'small',
+        [`${prefixCls}-large`]: size === 'large',
+        [`${prefixCls}-square`]: shape === 'square',
+        [`${prefixCls}-circle`]: shape === 'circle',
+        [`${prefixCls}-${type}`]: type,
+        [`${prefixCls}-${color}-${type}`]: color && type,
+        [`${prefixCls}-closable`]: closable,
+        [`${prefixCls}-invisible`]: !isVisible,
+        [`${prefixCls}-avatar-${avatarShape}`]: avatarSrc
       }, className)
     });
     const wrapProps = clickable ? Object.assign(Object.assign({}, baseProps), a11yProps) : baseProps;
@@ -201,15 +201,15 @@ class Tag extends _react.Component {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     _react.default.createElement("div", {
-      className: "".concat(prefixCls, "-close"),
+      className: `${prefixCls}-close`,
       onClick: e => this.close(e, children, tagKey)
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
       size: "small"
     })) : null;
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({
-      "aria-label": this.props['aria-label'] || (0, _isString2.default)(children) ? "".concat(closable ? 'Closable ' : '', "Tag: ").concat(children) : ''
+      "aria-label": this.props['aria-label'] || (0, _isString2.default)(children) ? `${closable ? 'Closable ' : ''}Tag: ${children}` : ''
     }, wrapProps), avatarSrc ? this.renderAvatar() : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: `${prefixCls}-content`
     }, children), closeIcon);
   }
 

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

@@ -6,6 +6,7 @@ import TagInputFoundation, { TagInputAdapter, OnSortEndProps } from '@douyinfe/s
 import { ArrayElement } from '../_base/base';
 import BaseComponent from '../_base/baseComponent';
 import { PopoverProps } from '../popover';
+import { ShowTooltip } from '../typography';
 export declare type Size = ArrayElement<typeof strings.SIZE_SET>;
 export declare type RestTagsPopoverProps = PopoverProps;
 declare type ValidateStatus = "default" | "error" | "warning";
@@ -20,7 +21,7 @@ export interface TagInputProps {
     maxTagCount?: number;
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: RestTagsPopoverProps;
-    showContentTooltip?: boolean;
+    showContentTooltip?: boolean | ShowTooltip;
     allowDuplicates?: boolean;
     addOnBlur?: boolean;
     draggable?: boolean;
@@ -71,7 +72,10 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         maxLength: PropTypes.Requireable<number>;
         showRestTagsPopover: PropTypes.Requireable<boolean>;
         restTagsPopoverProps: PropTypes.Requireable<object>;
-        showContentTooltip: PropTypes.Requireable<boolean>;
+        showContentTooltip: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+            opts: PropTypes.Requireable<object>;
+        }>>>;
         defaultValue: PropTypes.Requireable<any[]>;
         value: PropTypes.Requireable<any[]>;
         inputValue: PropTypes.Requireable<string>;

package/lib/cjs/tagInput/index.js

@@ -54,7 +54,7 @@ const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
     items
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-sortable-list")
+    className: `${prefixCls}-sortable-list`
   }, items.map((item, index) =>
   /*#__PURE__*/
   // @ts-ignore skip SortableItem type check
@@ -132,22 +132,22 @@ class TagInput extends _baseComponent.default {
         active
       } = this.state;
       const showIconHandler = active && draggable;
-      const tagCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-tag"), {
-        ["".concat(prefixCls, "-wrapper-tag-size-").concat(size)]: size,
-        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+      const tagCls = (0, _classnames.default)(`${prefixCls}-wrapper-tag`, {
+        [`${prefixCls}-wrapper-tag-size-${size}`]: size,
+        [`${prefixCls}-wrapper-tag-icon`]: showIconHandler
       });
-      const typoCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-typo"), {
-        ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
+      const typoCls = (0, _classnames.default)(`${prefixCls}-wrapper-typo`, {
+        [`${prefixCls}-wrapper-typo-disabled`]: disabled
       });
       const itemWrapperCls = (0, _classnames.default)({
-        ["".concat(prefixCls, "-drag-item")]: showIconHandler,
-        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+        [`${prefixCls}-drag-item`]: showIconHandler,
+        [`${prefixCls}-wrapper-tag-icon`]: showIconHandler
       });
       const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
-        className: "".concat(prefixCls, "-drag-handler")
+        className: `${prefixCls}-drag-handler`
       }));
       return tagsArray.map((value, index) => {
-        const elementKey = showIconHandler ? value : "".concat(index).concat(value);
+        const elementKey = showIconHandler ? value : `${index}${value}`;
 
         const onClose = () => {
           !disabled && this.handleTagClose(index);
@@ -168,9 +168,9 @@ class TagInput extends _baseComponent.default {
             closable: !disabled,
             key: elementKey,
             visible: true,
-            "aria-label": "".concat(!disabled ? 'Closable ' : '', "Tag: ").concat(value)
+            "aria-label": `${!disabled ? 'Closable ' : ''}Tag: ${value}`
           }, /*#__PURE__*/_react.default.createElement("div", {
-            className: "".concat(prefixCls, "-tag-content-wrapper")
+            className: `${prefixCls}-tag-content-wrapper`
           }, showIconHandler && /*#__PURE__*/_react.default.createElement(DragHandle, null), /*#__PURE__*/_react.default.createElement(_paragraph.default, {
             className: typoCls,
             ellipsis: {
@@ -354,8 +354,8 @@ class TagInput extends _baseComponent.default {
       disabled,
       clearIcon
     } = this.props;
-    const clearCls = (0, _classnames.default)("".concat(prefixCls, "-clearBtn"), {
-      ["".concat(prefixCls, "-clearBtn-invisible")]: !hovering || inputValue === '' && tagsArray.length === 0 || disabled
+    const clearCls = (0, _classnames.default)(`${prefixCls}-clearBtn`, {
+      [`${prefixCls}-clearBtn-invisible`]: !hovering || inputValue === '' && tagsArray.length === 0 || disabled
     });
 
     if (showClear) {
@@ -384,11 +384,11 @@ class TagInput extends _baseComponent.default {
       return null;
     }
 
-    const prefixWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-prefix"), {
-      ["".concat(prefixCls, "-inset-label")]: insetLabel,
-      ["".concat(prefixCls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
+    const prefixWrapperCls = (0, _classnames.default)(`${prefixCls}-prefix`, {
+      [`${prefixCls}-inset-label`]: insetLabel,
+      [`${prefixCls}-prefix-text`]: labelNode && (0, _isString2.default)(labelNode),
       // eslint-disable-next-line max-len
-      ["".concat(prefixCls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
+      [`${prefixCls}-prefix-icon`]: (0, _utils.isSemiIcon)(labelNode)
     });
     return (
       /*#__PURE__*/
@@ -412,10 +412,10 @@ class TagInput extends _baseComponent.default {
       return null;
     }
 
-    const suffixWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-suffix"), {
-      ["".concat(prefixCls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
+    const suffixWrapperCls = (0, _classnames.default)(`${prefixCls}-suffix`, {
+      [`${prefixCls}-suffix-text`]: suffix && (0, _isString2.default)(suffix),
       // eslint-disable-next-line max-len
-      ["".concat(prefixCls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix)
+      [`${prefixCls}-suffix-icon`]: (0, _utils.isSemiIcon)(suffix)
     });
     return (
       /*#__PURE__*/
@@ -442,8 +442,8 @@ class TagInput extends _baseComponent.default {
       tagsArray,
       active
     } = this.state;
-    const restTagsCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"), {
-      ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
+    const restTagsCls = (0, _classnames.default)(`${prefixCls}-wrapper-n`, {
+      [`${prefixCls}-wrapper-n-disabled`]: disabled
     });
     const allTags = this.getAllTags();
     let restTags = [];
@@ -468,7 +468,7 @@ class TagInput extends _baseComponent.default {
       // @ts-ignore skip SortableItem type check
       return /*#__PURE__*/_react.default.createElement(SortableList, {
         useDragHandle: true,
-        helperClass: "".concat(prefixCls, "-drag-item-move"),
+        helperClass: `${prefixCls}-drag-item-move`,
         items: sortableListItems,
         onSortEnd: this.onSortEnd,
         axis: "xy"
@@ -522,16 +522,16 @@ class TagInput extends _baseComponent.default {
       active
     } = this.state;
     const tagInputCls = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-focus")]: focusing || active,
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-hover")]: hovering && !disabled,
-      ["".concat(prefixCls, "-error")]: validateStatus === 'error',
-      ["".concat(prefixCls, "-warning")]: validateStatus === 'warning',
-      ["".concat(prefixCls, "-small")]: size === 'small',
-      ["".concat(prefixCls, "-large")]: size === 'large'
+      [`${prefixCls}-focus`]: focusing || active,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-hover`]: hovering && !disabled,
+      [`${prefixCls}-error`]: validateStatus === 'error',
+      [`${prefixCls}-warning`]: validateStatus === 'warning',
+      [`${prefixCls}-small`]: size === 'small',
+      [`${prefixCls}-large`]: size === 'large'
     });
-    const inputCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-input"), "".concat(prefixCls, "-wrapper-input-").concat(size));
-    const wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"));
+    const inputCls = (0, _classnames.default)(`${prefixCls}-wrapper-input`, `${prefixCls}-wrapper-input-${size}`);
+    const wrapperCls = (0, _classnames.default)(`${prefixCls}-wrapper`);
     return (
       /*#__PURE__*/
       // eslint-disable-next-line
@@ -593,7 +593,10 @@ TagInput.propTypes = {
   maxLength: _propTypes.default.number,
   showRestTagsPopover: _propTypes.default.bool,
   restTagsPopoverProps: _propTypes.default.object,
-  showContentTooltip: _propTypes.default.bool,
+  showContentTooltip: _propTypes.default.oneOfType([_propTypes.default.shape({
+    type: _propTypes.default.string,
+    opts: _propTypes.default.object
+  }), _propTypes.default.bool]),
   defaultValue: _propTypes.default.array,
   value: _propTypes.default.array,
   inputValue: _propTypes.default.string,

package/lib/cjs/timePicker/Combobox.js

@@ -162,7 +162,7 @@ class Combobox extends _baseComponent.default {
 
     const transformHour = value => value + locale.hour;
 
-    const className = "".concat(prefixCls, "-list-hour");
+    const className = `${prefixCls}-list-hour`;
     return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
       ref: current => this.cacheRefCurrent('hour', current),
       mode: 'normal',
@@ -193,7 +193,7 @@ class Combobox extends _baseComponent.default {
 
     const value = new Date(timeStampValue);
     const disabledOptions = disabledMinutes && disabledMinutes(value.getHours());
-    const className = "".concat(prefixCls, "-list-minute");
+    const className = `${prefixCls}-list-minute`;
 
     const transformMinute = min => min + locale.minute;
 
@@ -227,7 +227,7 @@ class Combobox extends _baseComponent.default {
 
     const value = new Date(timeStampValue);
     const disabledOptions = disabledSeconds && disabledSeconds(value.getHours(), value.getMinutes());
-    const className = "".concat(prefixCls, "-list-second");
+    const className = `${prefixCls}-list-second`;
 
     const transformSecond = sec => String(sec) + locale.second;
 
@@ -263,7 +263,7 @@ class Combobox extends _baseComponent.default {
       text: locale.PM || '下午'
     }];
     const selected = isAM ? 0 : 1;
-    const className = "".concat(prefixCls, "-list-ampm");
+    const className = `${prefixCls}-list-ampm`;
     return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
       ref: current => this.cacheRefCurrent('ampm', current),
       mode: 'normal',