@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/tabs/TabPaneTransition.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _semiAnimationReact = require("@douyinfe/semi-animation-react");
+
+var _lodashEs = require("lodash-es");
+
+/* eslint-disable react/destructuring-assignment */
+const TabPaneTransition = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const direction = props.direction ? 1 : -1;
+  const {
+    mode
+  } = props;
+  let {
+    motion
+  } = props;
+  const ratio = 60;
+
+  if (typeof motion === 'function') {
+    motion = motion(props);
+  } else if (!motion || typeof motion !== 'object') {
+    motion = {};
+  }
+
+  if (mode === 'vertical') {
+    return /*#__PURE__*/_react.default.createElement(_semiAnimationReact.Transition, (0, _assign.default)({}, props, {
+      config: {
+        tension: 612,
+        friction: 32
+      },
+      from: {
+        translateY: direction * ratio,
+        opacity: 0
+      },
+      enter: {
+        translateY: 0,
+        opacity: {
+          val: 1,
+          duration: 200
+        }
+      },
+      leave: {
+        translateY: -1 * direction * ratio,
+        opacity: {
+          val: 0,
+          duration: 200
+        }
+      }
+    }, motion), typeof props.children === 'function' ? _ref => {
+      let {
+        translateY,
+        opacity
+      } = _ref;
+      // delete translateX in 0 in case of zIndex problems.
+      const finalState = (0, _lodashEs.toInteger)(translateY) === 0 ? {
+        opacity
+      } : {
+        transform: "translateY(".concat((0, _lodashEs.toInteger)(translateY), "px)"),
+        opacity
+      };
+      return props.children(finalState);
+    } : props.children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_semiAnimationReact.Transition, (0, _assign.default)({}, props, {
+    config: {
+      tension: 612,
+      friction: 32
+    },
+    from: {
+      translateX: direction * ratio,
+      opacity: 0
+    },
+    enter: {
+      translateX: 0,
+      opacity: {
+        val: 1,
+        duration: 200
+      }
+    },
+    leave: {
+      translateX: -1 * direction * ratio,
+      opacity: {
+        val: 0,
+        duration: 200
+      }
+    }
+  }, motion), typeof props.children === 'function' ? _ref2 => {
+    let {
+      translateX,
+      opacity
+    } = _ref2;
+    // delete translateX in 0 in case of zIndex problems.
+    const finalState = (0, _lodashEs.toInteger)(translateX) === 0 ? {
+      opacity
+    } : {
+      transform: "translateX(".concat((0, _lodashEs.toInteger)(translateX), "px)"),
+      opacity
+    };
+    return props.children(finalState);
+  } : props.children);
+};
+
+var _default = TabPaneTransition;
+exports.default = _default;

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

@@ -0,0 +1,50 @@
+import { RefObject, ReactElement, MouseEvent, RefCallback, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/cjs/tabs/foundation';
+import BaseComponent from '../_base/baseComponent';
+import '@douyinfe/semi-foundation/lib/cjs/tabs/tabs.css';
+import TabPane from './TabPane';
+import { TabsProps, PlainTab } from './interface';
+export * from './interface';
+export interface TabsState {
+    activeKey: string;
+    panes: Array<PlainTab>;
+}
+declare class Tabs extends BaseComponent<TabsProps, TabsState> {
+    static TabPane: typeof TabPane;
+    static propTypes: {
+        activeKey: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        collapsible: PropTypes.Requireable<boolean>;
+        contentStyle: PropTypes.Requireable<object>;
+        defaultActiveKey: PropTypes.Requireable<string>;
+        keepDOM: PropTypes.Requireable<boolean>;
+        lazyRender: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onTabClick: PropTypes.Requireable<(...args: any[]) => any>;
+        renderTabBar: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        tabBarClassName: PropTypes.Requireable<string>;
+        tabBarExtraContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tabBarStyle: PropTypes.Requireable<object>;
+        tabList: PropTypes.Requireable<any[]>;
+        tabPaneMotion: PropTypes.Requireable<boolean | object>;
+        tabPosition: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+    };
+    static defaultProps: TabsProps;
+    contentRef: RefObject<HTMLDivElement>;
+    contentHeight: string;
+    foundation: TabsFoundation;
+    constructor(props: TabsProps);
+    get adapter(): TabsAdapter<TabsProps, TabsState>;
+    static getDerivedStateFromProps(props: TabsProps, state: TabsState): Partial<TabsState>;
+    componentDidUpdate(prevProps: TabsProps): void;
+    setContentRef: RefCallback<HTMLDivElement>;
+    onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
+    rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];
+    getActiveItem: () => ReactNode | ReactNode[];
+    render(): ReactNode;
+}
+export default Tabs;

package/lib/cjs/tabs/index.js

@@ -0,0 +1,365 @@
+"use strict";
+
+var _context8;
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _exportNames = {};
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+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 _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/tabs/constants");
+
+var _isNullOrUndefined = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isNullOrUndefined"));
+
+var _getDataAttr = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getDataAttr"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/tabs/foundation"));
+
+var _lodashEs = require("lodash-es");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+require("@douyinfe/semi-foundation/lib/cjs/tabs/tabs.css");
+
+var _TabBar = _interopRequireDefault(require("./TabBar"));
+
+var _TabPane = _interopRequireDefault(require("./TabPane"));
+
+var _tabsContext = _interopRequireDefault(require("./tabs-context"));
+
+var _interface = require("./interface");
+
+_forEachInstanceProperty2(_context8 = _Object$keys2(_interface)).call(_context8, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _interface[key]) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _interface[key];
+    }
+  });
+});
+
+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) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const panePickKeys = (0, _keys.default)((0, _lodashEs.omit)(_TabPane.default.propTypes, ['children']));
+
+class Tabs extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.setContentRef = ref => {
+      this.contentRef = {
+        current: ref
+      };
+    };
+
+    this.onTabClick = (activeKey, event) => {
+      this.foundation.handleTabClick(activeKey, event);
+    };
+
+    this.rePosChildren = (children, activeKey) => {
+      const newChildren = [];
+
+      const falttenChildren = _react.default.Children.toArray(children);
+
+      if (children.length) {
+        newChildren.push(...(0, _filter.default)(falttenChildren).call(falttenChildren, child => child.props && child.props.itemKey === activeKey));
+        newChildren.push(...(0, _filter.default)(falttenChildren).call(falttenChildren, child => child.props && child.props.itemKey !== activeKey));
+      }
+
+      return newChildren;
+    };
+
+    this.getActiveItem = () => {
+      var _context;
+
+      const {
+        activeKey
+      } = this.state;
+      const {
+        children,
+        tabList
+      } = this.props;
+
+      if (tabList || !(0, _isArray.default)(children)) {
+        return children;
+      }
+
+      return (0, _filter.default)(_context = _react.default.Children.toArray(children)).call(_context, pane => {
+        if (pane && pane.type && pane.type.isTabPane) {
+          return pane.props.itemKey === activeKey;
+        }
+
+        return true;
+      });
+    };
+
+    this.foundation = new _foundation.default(this.adapter);
+    this.state = {
+      activeKey: this.foundation.getDefaultActiveKey(),
+      panes: []
+    };
+    this.contentRef = /*#__PURE__*/(0, _react.createRef)();
+    this.contentHeight = 'auto';
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      collectPane: () => {
+        var _context2;
+
+        const {
+          tabList,
+          children
+        } = this.props;
+
+        if ((0, _isArray.default)(tabList) && tabList.length) {
+          this.setState({
+            panes: tabList
+          });
+          return;
+        }
+
+        const panes = (0, _map.default)(_context2 = _react.default.Children).call(_context2, children, child => {
+          if (child) {
+            const {
+              tab,
+              icon,
+              disabled,
+              itemKey
+            } = child.props;
+            return {
+              tab,
+              icon,
+              disabled,
+              itemKey
+            };
+          }
+
+          return undefined;
+        });
+        this.setState({
+          panes
+        });
+      },
+      notifyTabClick: (activeKey, event) => {
+        this.props.onTabClick(activeKey, event);
+      },
+      notifyChange: activeKey => {
+        this.props.onChange(activeKey);
+      },
+      setNewActiveKey: activeKey => {
+        this.setState({
+          activeKey
+        });
+      },
+      getDefaultActiveKeyFromChildren: () => {
+        var _context3;
+
+        const {
+          tabList,
+          children
+        } = this.props;
+        let activeKey = '';
+        const list = tabList ? tabList : (0, _map.default)(_context3 = _react.default.Children.toArray(children)).call(_context3, child => child.props);
+        (0, _forEach.default)(list).call(list, item => {
+          if (item && !activeKey && !item.disabled) {
+            activeKey = item.itemKey;
+          }
+        });
+        return activeKey;
+      }
+    });
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const states = {};
+
+    if (!(0, _isNullOrUndefined.default)(props.activeKey) && props.activeKey !== state.activeKey) {
+      states.activeKey = props.activeKey;
+    }
+
+    return states;
+  }
+
+  componentDidUpdate(prevProps) {
+    var _context4, _context5;
+
+    // Panes state acts on tab bar, no need to compare TabPane children
+    const prevChildrenProps = (0, _map.default)(_context4 = _react.default.Children.toArray(prevProps.children)).call(_context4, child => (0, _lodashEs.pick)(child.props, panePickKeys));
+    const nowChildrenProps = (0, _map.default)(_context5 = _react.default.Children.toArray(this.props.children)).call(_context5, child => (0, _lodashEs.pick)(child.props, panePickKeys));
+    const isTabListType = this.props.tabList || prevProps.tabList;
+
+    if (!(0, _lodashEs.isEqual)(this.props.tabList, prevProps.tabList)) {
+      this.foundation.handleTabListChange();
+    } // children变化，tabList方式使用时，啥也不用做
+    // children变化，非tabList方式使用，需要重新取activeKey。TabPane可能是异步更新的，若不重新取，未设activeKey时，第一个不会自动激活
+    // children changed: do nothing in tabList case
+    // children changed: recalc activeKey. TabPane could be updated async. If not recalc the first panel will not be activated
+
+
+    if (!(0, _lodashEs.isEqual)(prevChildrenProps, nowChildrenProps) && !isTabListType) {
+      this.foundation.handleTabPanesChange();
+    }
+  }
+
+  render() {
+    var _context6, _context7;
+
+    const _a = this.props,
+          {
+      children,
+      className,
+      collapsible,
+      contentStyle,
+      keepDOM,
+      lazyRender,
+      renderTabBar,
+      size,
+      style,
+      tabBarClassName,
+      tabBarExtraContent,
+      tabBarStyle,
+      tabPaneMotion,
+      tabPosition,
+      type
+    } = _a,
+          restProps = __rest(_a, ["children", "className", "collapsible", "contentStyle", "keepDOM", "lazyRender", "renderTabBar", "size", "style", "tabBarClassName", "tabBarExtraContent", "tabBarStyle", "tabPaneMotion", "tabPosition", "type"]);
+
+    const {
+      panes,
+      activeKey
+    } = this.state;
+    const tabWrapperCls = (0, _classnames.default)(className, {
+      [_constants.cssClasses.TABS]: true,
+      [(0, _concat.default)(_context6 = "".concat(_constants.cssClasses.TABS, "-")).call(_context6, tabPosition)]: tabPosition
+    });
+    const tabContentCls = (0, _classnames.default)({
+      [_constants.cssClasses.TABS_CONTENT]: true,
+      [(0, _concat.default)(_context7 = "".concat(_constants.cssClasses.TABS_CONTENT, "-")).call(_context7, tabPosition)]: tabPosition
+    });
+    const tabBarProps = {
+      activeKey,
+      className: tabBarClassName,
+      collapsible,
+      list: panes,
+      onTabClick: this.onTabClick,
+      size,
+      style: tabBarStyle,
+      tabBarExtraContent,
+      tabPosition,
+      type
+    };
+    const tabBar = renderTabBar ? renderTabBar(tabBarProps, _TabBar.default) : /*#__PURE__*/_react.default.createElement(_TabBar.default, (0, _assign.default)({}, tabBarProps));
+    const content = keepDOM ? children : this.getActiveItem();
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      className: tabWrapperCls,
+      style: style
+    }, (0, _getDataAttr.default)(restProps)), tabBar, /*#__PURE__*/_react.default.createElement(_tabsContext.default.Provider, {
+      value: {
+        activeKey,
+        lazyRender,
+        panes,
+        tabPaneMotion,
+        tabPosition
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.setContentRef,
+      role: "tab-content",
+      className: tabContentCls,
+      style: (0, _assign.default)({}, contentStyle)
+    }, content)));
+  }
+
+}
+
+Tabs.TabPane = _TabPane.default;
+Tabs.propTypes = {
+  activeKey: _propTypes.default.string,
+  className: _propTypes.default.string,
+  collapsible: _propTypes.default.bool,
+  contentStyle: _propTypes.default.oneOfType([_propTypes.default.object]),
+  defaultActiveKey: _propTypes.default.string,
+  keepDOM: _propTypes.default.bool,
+  lazyRender: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onTabClick: _propTypes.default.func,
+  renderTabBar: _propTypes.default.func,
+  size: _propTypes.default.oneOf(_constants.strings.SIZE),
+  style: _propTypes.default.object,
+  tabBarClassName: _propTypes.default.string,
+  tabBarExtraContent: _propTypes.default.node,
+  tabBarStyle: _propTypes.default.object,
+  tabList: _propTypes.default.array,
+  tabPaneMotion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object, _propTypes.default.func]),
+  tabPosition: _propTypes.default.oneOf(_constants.strings.POSITION_MAP),
+  type: _propTypes.default.oneOf(_constants.strings.TYPE_MAP)
+};
+Tabs.defaultProps = {
+  children: [],
+  collapsible: false,
+  keepDOM: true,
+  lazyRender: false,
+  onChange: () => undefined,
+  onTabClick: () => undefined,
+  size: 'large',
+  tabPaneMotion: true,
+  tabPosition: 'top',
+  type: 'line'
+};
+var _default = Tabs;
+exports.default = _default;

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

@@ -0,0 +1,72 @@
+import { MouseEvent, ReactNode, ComponentType, CSSProperties } from 'react';
+import { Motion } from '../_base/base';
+export declare type TabType = 'line' | 'card' | 'button';
+export declare type TabSize = 'small' | 'medium' | 'large';
+export declare type TabPosition = 'top' | 'left';
+export interface PlainTab {
+    disabled?: boolean;
+    icon?: ReactNode;
+    itemKey: string;
+    tab?: ReactNode;
+}
+export interface TabsProps {
+    activeKey?: string;
+    children?: ReactNode | Array<ReactNode>;
+    className?: string;
+    collapsible?: boolean;
+    contentStyle?: CSSProperties;
+    defaultActiveKey?: string;
+    keepDOM?: boolean;
+    lazyRender?: boolean;
+    onChange?: (activeKey: string) => void;
+    onTabClick?: (activeKey: string, e: MouseEvent<Element>) => void;
+    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: ComponentType) => ReactNode;
+    size?: TabSize;
+    style?: CSSProperties;
+    tabBarClassName?: string;
+    tabBarExtraContent?: ReactNode;
+    tabBarStyle?: CSSProperties;
+    tabList?: PlainTab[];
+    tabPaneMotion?: boolean;
+    tabPosition?: TabPosition;
+    type?: TabType;
+}
+export interface TabBarProps {
+    activeKey?: string;
+    className?: string;
+    collapsible?: boolean;
+    list?: Array<PlainTab>;
+    onTabClick?: (activeKey: string, event: MouseEvent<Element>) => void;
+    size?: TabSize;
+    style?: CSSProperties;
+    tabBarExtraContent?: ReactNode;
+    tabPosition?: TabPosition;
+    type?: TabType;
+    dropdownClassName?: string;
+    dropdownStyle?: CSSProperties;
+}
+export interface TabPaneProps {
+    className?: string;
+    disabled?: boolean;
+    icon?: string;
+    itemKey?: string;
+    style?: CSSProperties;
+    tab?: ReactNode;
+}
+export interface TabPaneTransitionProps {
+    [key: string]: any;
+    children?: ((p: {
+        transform?: string;
+        opacity: number;
+    }) => ReactNode | undefined) | undefined;
+    direction?: boolean;
+    mode?: 'vertical' | 'horizontal';
+    motion?: Motion;
+}
+export interface TabContextValue {
+    activeKey?: string;
+    lazyRender?: boolean;
+    panes?: Array<PlainTab>;
+    tabPaneMotion?: boolean;
+    tabPosition?: TabPosition;
+}

package/lib/cjs/tabs/interface.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/tabs/tabs-context.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabContextValue } from './interface';
+declare const TabsContext: React.Context<TabContextValue>;
+export default TabsContext;

package/lib/cjs/tabs/tabs-context.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const TabsContext = /*#__PURE__*/_react.default.createContext({});
+
+var _default = TabsContext;
+exports.default = _default;

package/lib/cjs/tag/group.d.ts

@@ -0,0 +1,40 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Tag from './index';
+import { PopoverProps } from '../popover/index';
+import { AvatarShape, TagProps } from './interface';
+export interface TagGroupProps {
+    style?: React.CSSProperties;
+    className?: string;
+    maxTagCount?: number;
+    tagList?: (TagProps | React.ReactNode)[];
+    size?: 'small' | 'large';
+    showPopover?: boolean;
+    popoverProps?: PopoverProps;
+    avatarShape?: AvatarShape;
+    mode?: string;
+}
+export default class TagGroup extends PureComponent<TagGroupProps> {
+    static defaultProps: {
+        style: {};
+        className: string;
+        size: string;
+        avatarShape: string;
+    };
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        maxTagCount: PropTypes.Requireable<number>;
+        tagList: PropTypes.Requireable<any[]>;
+        size: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        showPopover: PropTypes.Requireable<boolean>;
+        popoverProps: PropTypes.Requireable<object>;
+        avatarShape: PropTypes.Requireable<string>;
+    };
+    renderNTag(n: number, restTags: (Tag | React.ReactNode)[]): JSX.Element;
+    renderMergeTags(tags: (Tag | React.ReactNode)[]): (React.ReactNode | Tag)[];
+    renderAllTags(): (React.ReactNode | Tag)[];
+    render(): JSX.Element;
+}