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

package/lib/cjs/tag/group.js

@@ -0,0 +1,165 @@
+"use strict";
+
+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 _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 _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/tag/constants");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _index2 = _interopRequireDefault(require("../popover/index"));
+
+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; }
+
+const prefixCls = _constants.cssClasses.PREFIX;
+const tagSize = _constants.strings.TAG_SIZE;
+const avatarShapeSet = _constants.strings.AVATAR_SHAPE;
+
+class TagGroup extends _react.PureComponent {
+  renderNTag(n, restTags) {
+    const {
+      size,
+      showPopover,
+      popoverProps
+    } = this.props;
+
+    let nTag = /*#__PURE__*/_react.default.createElement(_index.default, {
+      closable: false,
+      size: size,
+      color: "grey",
+      style: {
+        backgroundColor: 'transparent'
+      },
+      key: "_+n"
+    }, "+", n);
+
+    if (showPopover) {
+      nTag = /*#__PURE__*/_react.default.createElement(_index2.default, (0, _assign.default)({
+        showArrow: true,
+        content: restTags,
+        trigger: "hover",
+        position: "top",
+        autoAdjustOverflow: true,
+        className: "".concat(prefixCls, "-rest-group-popover")
+      }, popoverProps, {
+        key: "_+n_Popover"
+      }), nTag);
+    }
+
+    return nTag;
+  }
+
+  renderMergeTags(tags) {
+    const {
+      maxTagCount,
+      tagList
+    } = this.props;
+    const n = tagList.length - maxTagCount;
+    let renderTags = tags;
+    const normalTags = (0, _slice.default)(tags).call(tags, 0, maxTagCount);
+    const restTags = (0, _slice.default)(tags).call(tags, maxTagCount);
+    let nTag = null;
+
+    if (n > 0) {
+      nTag = this.renderNTag(n, restTags);
+      normalTags.push(nTag);
+      renderTags = normalTags;
+    }
+
+    return renderTags;
+  }
+
+  renderAllTags() {
+    const {
+      tagList,
+      size,
+      mode,
+      avatarShape
+    } = this.props;
+    const renderTags = (0, _map.default)(tagList).call(tagList, (tag, index) => {
+      if (mode === 'custom') {
+        return tag;
+      }
+
+      if (!tag.size) {
+        tag.size = size;
+      }
+
+      if (!tag.avatarShape) {
+        tag.avatarShape = avatarShape;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
+        key: "".concat(index, "-tag")
+      }, tag));
+    });
+    return renderTags;
+  }
+
+  render() {
+    const {
+      style,
+      className,
+      maxTagCount,
+      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'
+    }, className);
+    const tags = this.renderAllTags();
+    const tagContents = typeof maxTagCount === 'undefined' ? tags : this.renderMergeTags(tags);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: style,
+      className: groupCls
+    }, tagContents);
+  }
+
+}
+
+exports.default = TagGroup;
+TagGroup.defaultProps = {
+  style: {},
+  className: '',
+  size: tagSize[0],
+  avatarShape: 'square'
+};
+TagGroup.propTypes = {
+  children: _propTypes.default.node,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  maxTagCount: _propTypes.default.number,
+  tagList: _propTypes.default.array,
+  size: _propTypes.default.oneOf(tagSize),
+  mode: _propTypes.default.string,
+  showPopover: _propTypes.default.bool,
+  popoverProps: _propTypes.default.object,
+  avatarShape: _propTypes.default.oneOf(avatarShapeSet)
+};

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

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { TagProps } from './interface';
+import '@douyinfe/semi-foundation/lib/cjs/tag/tag.css';
+export * from './interface';
+export interface TagState {
+    visible: boolean;
+}
+export default class Tag extends Component<TagProps, TagState> {
+    static defaultProps: TagProps;
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        size: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+        closable: PropTypes.Requireable<boolean>;
+        visible: PropTypes.Requireable<boolean>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        avatarSrc: PropTypes.Requireable<string>;
+        avatarShape: PropTypes.Requireable<string>;
+    };
+    constructor(props: TagProps);
+    static getDerivedStateFromProps(nextProps: TagProps): {
+        visible: boolean;
+    };
+    setVisible(visible: boolean): void;
+    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode): void;
+    renderAvatar(): JSX.Element;
+    render(): JSX.Element;
+}

package/lib/cjs/tag/index.js

@@ -0,0 +1,219 @@
+"use strict";
+
+var _context6;
+
+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 _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$keys = 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 _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+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/tag/constants");
+
+var _index = _interopRequireDefault(require("../avatar/index"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+require("@douyinfe/semi-foundation/lib/cjs/tag/tag.css");
+
+var _interface = require("./interface");
+
+_forEachInstanceProperty(_context6 = _Object$keys(_interface)).call(_context6, 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;
+};
+/* eslint-disable no-unused-vars */
+
+/* eslint-disable max-len */
+
+
+const prefixCls = _constants.cssClasses.PREFIX;
+const tagColors = _constants.strings.TAG_COLOR;
+const tagSize = _constants.strings.TAG_SIZE;
+const tagType = _constants.strings.TAG_TYPE;
+const avatarShapeSet = _constants.strings.AVATAR_SHAPE;
+
+class Tag extends _react.Component {
+  constructor(props) {
+    var _context;
+
+    super(props);
+    this.state = {
+      visible: true
+    };
+    this.close = (0, _bind.default)(_context = this.close).call(_context, this);
+  } // any other way to achieve this?
+
+
+  static getDerivedStateFromProps(nextProps) {
+    if ('visible' in nextProps) {
+      return {
+        visible: nextProps.visible
+      };
+    }
+
+    return null;
+  }
+
+  setVisible(visible) {
+    if (!('visible' in this.props)) {
+      this.setState({
+        visible
+      });
+    }
+  }
+
+  close(e, value) {
+    const {
+      onClose
+    } = this.props;
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    onClose && onClose(value, e); // when user call e.preventDefault() in onClick callback, tag will not hidden
+
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    this.setVisible(false);
+  }
+
+  renderAvatar() {
+    const {
+      avatarShape,
+      avatarSrc
+    } = this.props;
+
+    const avatar = /*#__PURE__*/_react.default.createElement(_index.default, {
+      src: avatarSrc,
+      shape: avatarShape
+    });
+
+    return avatar;
+  }
+
+  render() {
+    var _context2, _context3, _context4, _context5;
+
+    const _a = this.props,
+          {
+      children,
+      size,
+      color,
+      closable,
+      visible,
+      onClose,
+      className,
+      type,
+      avatarSrc,
+      avatarShape
+    } = _a,
+          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "className", "type", "avatarSrc", "avatarShape"]);
+
+    const {
+      visible: isVisible
+    } = this.state;
+    const baseProps = (0, _assign.default)((0, _assign.default)({}, attr), {
+      className: (0, _classnames.default)(prefixCls, {
+        ["".concat(prefixCls, "-default")]: size === 'default',
+        ["".concat(prefixCls, "-small")]: size === 'small',
+        ["".concat(prefixCls, "-large")]: size === 'large',
+        [(0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, type)]: type,
+        [(0, _concat.default)(_context3 = (0, _concat.default)(_context4 = "".concat(prefixCls, "-")).call(_context4, color, "-")).call(_context3, type)]: color && type,
+        ["".concat(prefixCls, "-closable")]: closable,
+        ["".concat(prefixCls, "-invisible")]: !isVisible,
+        [(0, _concat.default)(_context5 = "".concat(prefixCls, "-avatar-")).call(_context5, avatarShape)]: avatarSrc
+      }, className)
+    });
+    const closeIcon = closable ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-close"),
+      onClick: e => this.close(e, children)
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+      size: "small"
+    })) : null;
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, baseProps), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, avatarSrc ? this.renderAvatar() : null, children, closeIcon));
+  }
+
+}
+
+exports.default = Tag;
+Tag.defaultProps = {
+  size: tagSize[0],
+  color: tagColors[0],
+  closable: false,
+  // visible: true,
+  type: tagType[0],
+  onClose: () => undefined,
+  onClick: () => undefined,
+  style: {},
+  className: '',
+  avatarShape: 'square'
+};
+Tag.propTypes = {
+  children: _propTypes.default.node,
+  size: _propTypes.default.oneOf(tagSize),
+  color: _propTypes.default.oneOf(tagColors),
+  type: _propTypes.default.oneOf(tagType),
+  closable: _propTypes.default.bool,
+  visible: _propTypes.default.bool,
+  onClose: _propTypes.default.func,
+  onClick: _propTypes.default.func,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  avatarSrc: _propTypes.default.string,
+  avatarShape: _propTypes.default.oneOf(avatarShapeSet)
+};

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare type TagColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'indigo' | 'light-blue' | 'light-green' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'violet' | 'yellow' | 'white';
+export declare type TagType = 'ghost' | 'solid' | 'light';
+export declare type TagSize = 'default' | 'small' | 'large';
+export declare type AvatarShape = 'circle' | 'square';
+export interface TagProps {
+    children?: React.ReactNode;
+    size?: TagSize;
+    color?: TagColor;
+    type?: TagType;
+    closable?: boolean;
+    visible?: boolean;
+    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    style?: React.CSSProperties;
+    className?: string;
+    avatarSrc?: string;
+    avatarShape?: AvatarShape;
+}
+export interface TagGroupProps {
+    style?: React.CSSProperties;
+    className?: string;
+    maxTagCount?: number;
+    tagList?: (TagProps | React.ReactNode)[];
+    size?: 'small' | 'large';
+    showPopover?: boolean;
+    popoverProps?: any;
+    avatarShape?: AvatarShape;
+    mode?: string;
+}

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

@@ -0,0 +1,133 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { strings } from '@douyinfe/semi-foundation/lib/cjs/tagInput/constants';
+import '@douyinfe/semi-foundation/lib/cjs/tagInput/tagInput.css';
+import { TagInputAdapter } from '@douyinfe/semi-foundation/lib/cjs/tagInput/foundation';
+import { ArrayElement } from '../_base/base';
+import BaseComponent from '../_base/baseComponent';
+import { PopoverProps } from '../popover';
+export declare type Size = ArrayElement<typeof strings.SIZE_SET>;
+export declare type RestTagsPopoverProps = PopoverProps;
+declare type ValidateStatus = "default" | "error" | "warning";
+export interface TagInputProps {
+    className?: string;
+    defaultValue?: string[];
+    disabled?: boolean;
+    inputValue?: string;
+    maxLength?: number;
+    max?: number;
+    maxTagCount?: number;
+    showRestTagsPopover?: boolean;
+    restTagsPopoverProps?: RestTagsPopoverProps;
+    showContentTooltip?: boolean;
+    allowDuplicates?: boolean;
+    addOnBlur?: boolean;
+    onAdd?: (addedValue: string[]) => void;
+    onBlur?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onChange?: (value: string[]) => void;
+    onExceed?: ((value: string[]) => void);
+    onFocus?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onInputChange?: (value: string, e: React.MouseEvent<HTMLInputElement>) => void;
+    onInputExceed?: ((value: string) => void);
+    onKeyDown?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onRemove?: (removedValue: string, idx: number) => void;
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    renderTagItem?: (value: string, index: number) => React.ReactNode;
+    separator?: string | string[] | null;
+    showClear?: boolean;
+    size?: Size;
+    style?: React.CSSProperties;
+    suffix?: React.ReactNode;
+    validateStatus?: ValidateStatus;
+    value?: string[];
+    autoFocus?: boolean;
+}
+export interface TagInputState {
+    tagsArray?: string[];
+    inputValue?: string;
+    focusing?: boolean;
+    hovering?: boolean;
+}
+declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        allowDuplicates: PropTypes.Requireable<boolean>;
+        max: PropTypes.Requireable<number>;
+        maxTagCount: PropTypes.Requireable<number>;
+        maxLength: PropTypes.Requireable<number>;
+        showRestTagsPopover: PropTypes.Requireable<boolean>;
+        restTagsPopoverProps: PropTypes.Requireable<object>;
+        showContentTooltip: PropTypes.Requireable<boolean>;
+        defaultValue: PropTypes.Requireable<any[]>;
+        value: PropTypes.Requireable<any[]>;
+        inputValue: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        separator: PropTypes.Requireable<string | any[]>;
+        showClear: PropTypes.Requireable<boolean>;
+        addOnBlur: PropTypes.Requireable<boolean>;
+        autoFocus: PropTypes.Requireable<boolean>;
+        renderTagItem: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onInputChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onExceed: PropTypes.Requireable<(...args: any[]) => any>;
+        onInputExceed: PropTypes.Requireable<(...args: any[]) => any>;
+        onAdd: PropTypes.Requireable<(...args: any[]) => any>;
+        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        validateStatus: PropTypes.Requireable<"default" | "error" | "warning">;
+        prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    static defaultProps: {
+        showClear: boolean;
+        addOnBlur: boolean;
+        allowDuplicates: boolean;
+        showRestTagsPopover: boolean;
+        autoFocus: boolean;
+        showContentTooltip: boolean;
+        separator: string;
+        size: "default";
+        validateStatus: "default";
+        onBlur: (...args: any[]) => void;
+        onFocus: (...args: any[]) => void;
+        onChange: (...args: any[]) => void;
+        onInputChange: (...args: any[]) => void;
+        onExceed: (...args: any[]) => void;
+        onInputExceed: (...args: any[]) => void;
+        onAdd: (...args: any[]) => void;
+        onRemove: (...args: any[]) => void;
+        onKeyDown: (...args: any[]) => void;
+    };
+    inputRef: React.RefObject<HTMLInputElement>;
+    constructor(props: TagInputProps);
+    static getDerivedStateFromProps(nextProps: TagInputProps, prevState: TagInputState): {
+        tagsArray: string[];
+        inputValue: string;
+    };
+    get adapter(): TagInputAdapter;
+    componentDidMount(): void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleInputFocus: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleInputBlur: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleClearBtn: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleTagClose: (idx: number) => void;
+    handleInputMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleInputMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => void;
+    renderClearBtn(): JSX.Element;
+    renderPrefix(): JSX.Element;
+    renderSuffix(): JSX.Element;
+    renderTags(): JSX.Element;
+    blur(): void;
+    focus(): void;
+    render(): JSX.Element;
+}
+export default TagInput;
+export { ValidateStatus };