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

package/lib/cjs/autoComplete/index.js

@@ -0,0 +1,427 @@
+"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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodashEs = require("lodash-es");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/autoComplete/constants");
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/autoComplete/foundation"));
+
+var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _spin = _interopRequireDefault(require("../spin"));
+
+var _popover = _interopRequireDefault(require("../popover"));
+
+var _input = _interopRequireDefault(require("../input"));
+
+var _trigger = _interopRequireDefault(require("../trigger"));
+
+var _option = _interopRequireDefault(require("../select/option"));
+
+var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
+
+require("@douyinfe/semi-foundation/lib/cjs/autoComplete/autoComplete.css");
+
+/* eslint-disable @typescript-eslint/ban-types, max-len */
+const prefixCls = _constants.cssClasses.PREFIX;
+const sizeSet = _constants.strings.SIZE;
+const positionSet = _constants.strings.POSITION;
+const statusSet = _constants.strings.STATUS;
+
+class AutoComplete extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.onSelect = (option, optionIndex, e) => {
+      this.foundation.handleSelect(option, optionIndex);
+    };
+
+    this.onSearch = value => {
+      this.foundation.handleSearch(value);
+    };
+
+    this.onBlur = e => this.foundation.handleBlur(e);
+
+    this.onFocus = e => this.foundation.handleFocus(e);
+
+    this.onInputClear = () => this.foundation.handleClear();
+
+    this.handleInputClick = e => this.foundation.handleInputClick(e);
+
+    this.foundation = new _foundation.default(this.adapter);
+    const initRePosKey = 1;
+    this.state = {
+      dropdownMinWidth: null,
+      inputValue: '',
+      // option list
+      options: [],
+      // popover visible
+      visible: false,
+      // current focus option index
+      focusIndex: props.defaultActiveFirstOption ? 0 : -1,
+      // current selected options
+      selection: new _map.default(),
+      rePosKey: initRePosKey
+    };
+    this.triggerRef = /*#__PURE__*/_react.default.createRef();
+    this.optionsRef = /*#__PURE__*/_react.default.createRef();
+    this.clickOutsideHandler = null;
+    (0, _warning.default)('triggerRender' in this.props && typeof this.props.triggerRender === 'function', "[Semi AutoComplete] \n            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size', \n            please notice that they will be removed in the next major version.\n            Please use 'componentProps' to retrieve these props instead.\n            - If you are using 'onBlur', 'onFocus', please try to avoid using them and look for changes in the future.");
+  }
+
+  get adapter() {
+    const keyboardAdapter = {
+      registerKeyDown: cb => {
+        const keyboardEventSet = {
+          onKeyDown: cb
+        };
+        this.setState({
+          keyboardEventSet
+        });
+      },
+      unregisterKeyDown: cb => {
+        this.setState({
+          keyboardEventSet: {}
+        });
+      },
+      updateFocusIndex: focusIndex => {
+        this.setState({
+          focusIndex
+        });
+      }
+    };
+    return (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, super.adapter), keyboardAdapter), {
+      getTriggerWidth: () => {
+        const el = this.triggerRef.current;
+        return el && el.getBoundingClientRect().width;
+      },
+      setOptionWrapperWidth: width => {
+        this.setState({
+          dropdownMinWidth: width
+        });
+      },
+      updateInputValue: inputValue => {
+        this.setState({
+          inputValue
+        });
+      },
+      toggleListVisible: isShow => {
+        this.setState({
+          visible: isShow
+        });
+      },
+      updateOptionList: optionList => {
+        this.setState({
+          options: optionList
+        });
+      },
+      updateSelection: selection => {
+        this.setState({
+          selection
+        });
+      },
+      notifySearch: inputValue => {
+        this.props.onSearch(inputValue);
+      },
+      notifyChange: value => {
+        this.props.onChange(value);
+      },
+      notifySelect: option => {
+        this.props.onSelect(option);
+      },
+      notifyDropdownVisibleChange: isVisible => {
+        this.props.onDropdownVisibleChange(isVisible);
+      },
+      notifyClear: () => {
+        this.props.onClear();
+      },
+      notifyFocus: event => {
+        this.props.onFocus(event);
+      },
+      notifyBlur: event => {
+        this.props.onBlur(event);
+      },
+      rePositionDropdown: () => {
+        let {
+          rePosKey
+        } = this.state;
+        rePosKey = rePosKey + 1;
+        this.setState({
+          rePosKey
+        });
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!(0, _lodashEs.isEqual)(this.props.data, prevProps.data)) {
+      this.foundation.handleDataChange(this.props.data);
+    }
+
+    if (this.props.value !== prevProps.value) {
+      this.foundation.handleValueChange(this.props.value);
+    }
+  }
+
+  renderInput() {
+    const {
+      size,
+      prefix,
+      insetLabel,
+      suffix,
+      placeholder,
+      style,
+      className,
+      showClear,
+      disabled,
+      triggerRender,
+      validateStatus,
+      autoFocus,
+      value
+    } = this.props;
+    const {
+      inputValue,
+      keyboardEventSet,
+      selection
+    } = this.state;
+    const useCustomTrigger = typeof triggerRender === 'function';
+    const outerProps = (0, _assign.default)({
+      style,
+      className: useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)({
+        [prefixCls]: true,
+        ["".concat(prefixCls, "-disabled")]: disabled
+      }, className),
+      onClick: this.handleInputClick,
+      ref: this.triggerRef
+    }, keyboardEventSet);
+    const innerProps = {
+      disabled,
+      placeholder,
+      autofocus: autoFocus,
+      onChange: this.onSearch,
+      onClear: this.onInputClear,
+      // TODO: remove in next major version
+      suffix,
+      prefix: prefix || insetLabel,
+      showClear,
+      validateStatus,
+      size,
+      onBlur: this.onBlur,
+      onFocus: this.onFocus
+    };
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, outerProps), typeof triggerRender === 'function' ? /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _assign.default)({}, innerProps, {
+      inputValue: typeof value !== 'undefined' ? value : inputValue,
+      value: (0, _from.default)((0, _values.default)(selection).call(selection)),
+      triggerRender: triggerRender,
+      componentName: "AutoComplete",
+      componentProps: (0, _assign.default)({}, this.props)
+    })) : /*#__PURE__*/_react.default.createElement(_input.default, (0, _assign.default)({}, innerProps, {
+      value: typeof value !== 'undefined' ? value : inputValue
+    })));
+  }
+
+  renderLoading() {
+    const loadingWrapperCls = "".concat(prefixCls, "-loading-wrapper");
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: loadingWrapperCls
+    }, /*#__PURE__*/_react.default.createElement(_spin.default, null));
+  }
+
+  renderOption(option, optionIndex) {
+    const {
+      focusIndex
+    } = this.state;
+    const isFocused = optionIndex === focusIndex;
+    return /*#__PURE__*/_react.default.createElement(_option.default, (0, _assign.default)({
+      showTick: false,
+      onSelect: (v, e) => this.onSelect(v, optionIndex, e),
+      // selected={selection.has(option.label)}
+      focused: isFocused,
+      onMouseEnter: () => this.foundation.handleOptionMouseEnter(optionIndex),
+      key: option.key || option.label + option.value + optionIndex
+    }, option), option.label);
+  }
+
+  renderOptionList() {
+    const {
+      maxHeight,
+      dropdownStyle,
+      dropdownClassName,
+      loading,
+      emptyContent
+    } = this.props;
+    const {
+      options,
+      dropdownMinWidth
+    } = this.state;
+    const listCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-option-list")]: true
+    }, dropdownClassName);
+    let optionsNode;
+
+    if (options.length === 0) {
+      optionsNode = emptyContent;
+    } else {
+      var _context;
+
+      optionsNode = (0, _map2.default)(_context = (0, _filter.default)(options).call(options, option => option.show)).call(_context, (option, i) => this.renderOption(option, i));
+    }
+
+    const style = (0, _assign.default)({
+      maxHeight: maxHeight,
+      minWidth: dropdownMinWidth
+    }, dropdownStyle);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: listCls,
+      role: "listbox",
+      style: style
+    }, !loading ? optionsNode : this.renderLoading());
+  }
+
+  render() {
+    const {
+      position,
+      motion,
+      zIndex,
+      mouseEnterDelay,
+      mouseLeaveDelay,
+      autoAdjustOverflow,
+      stopPropagation,
+      getPopupContainer
+    } = this.props;
+    const {
+      visible,
+      rePosKey
+    } = this.state;
+    const input = this.renderInput();
+    const optionList = this.renderOptionList();
+    return /*#__PURE__*/_react.default.createElement(_popover.default, {
+      mouseEnterDelay: mouseEnterDelay,
+      mouseLeaveDelay: mouseLeaveDelay,
+      autoAdjustOverflow: autoAdjustOverflow,
+      trigger: "custom",
+      motion: motion,
+      visible: visible,
+      content: optionList,
+      position: position,
+      ref: this.optionsRef,
+      // TransformFromCenter TODO: need to confirm
+      zIndex: zIndex,
+      stopPropagation: stopPropagation,
+      getPopupContainer: getPopupContainer,
+      rePosKey: rePosKey
+    }, input);
+  }
+
+}
+
+AutoComplete.propTypes = {
+  autoFocus: _propTypes.default.bool,
+  autoAdjustOverflow: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  children: _propTypes.default.node,
+  data: _propTypes.default.array,
+  defaultOpen: _propTypes.default.bool,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  defaultActiveFirstOption: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  dropdownMatchSelectWidth: _propTypes.default.bool,
+  dropdownClassName: _propTypes.default.string,
+  dropdownStyle: _propTypes.default.object,
+  emptyContent: _propTypes.default.node,
+  onSearch: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
+  onClear: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  position: _propTypes.default.oneOf(positionSet),
+  placeholder: _propTypes.default.string,
+  prefix: _propTypes.default.node,
+  onChangeWithObject: _propTypes.default.bool,
+  onSelectWithObject: _propTypes.default.bool,
+  renderItem: _propTypes.default.func,
+  renderSelectedItem: _propTypes.default.func,
+  suffix: _propTypes.default.node,
+  showClear: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(sizeSet),
+  style: _propTypes.default.object,
+  stopPropagation: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  mouseEnterDelay: _propTypes.default.number,
+  mouseLeaveDelay: _propTypes.default.number,
+  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
+  getPopupContainer: _propTypes.default.func,
+  triggerRender: _propTypes.default.func,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  validateStatus: _propTypes.default.oneOf(statusSet),
+  zIndex: _propTypes.default.number
+};
+AutoComplete.Option = _option.default;
+AutoComplete.defaultProps = {
+  stopPropagation: true,
+  motion: true,
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
+  position: 'bottomLeft',
+  data: [],
+  showClear: false,
+  disabled: false,
+  size: 'default',
+  onFocus: _lodashEs.noop,
+  onSearch: _lodashEs.noop,
+  onClear: _lodashEs.noop,
+  onBlur: _lodashEs.noop,
+  onSelect: _lodashEs.noop,
+  onChange: _lodashEs.noop,
+  onSelectWithObject: false,
+  onDropdownVisibleChange: _lodashEs.noop,
+  defaultActiveFirstOption: true,
+  dropdownMatchSelectWidth: true,
+  loading: false,
+  maxHeight: 300,
+  validateStatus: 'default',
+  autoFocus: false,
+  emptyContent: null // onPressEnter: () => undefined,
+  // defaultOpen: false,
+
+};
+var _default = AutoComplete;
+exports.default = _default;

package/lib/cjs/avatar/avatarGroup.d.ts

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { AvatarGroupProps } from './interface';
+export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
+    static defaultProps: {
+        size: string;
+        shape: string;
+        overlapFrom: string;
+    };
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        shape: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        maxCount: PropTypes.Requireable<number>;
+        renderMore: PropTypes.Requireable<(...args: any[]) => any>;
+        overlapFrom: PropTypes.Requireable<string>;
+    };
+    getAllAvatars(): React.ReactNodeArray;
+    getMergeAvatars(avatars: React.ReactNode[]): React.ReactNode[];
+    renderMoreAvatar(restNumber: number, restAvatars: React.ReactNode[]): JSX.Element;
+    render(): JSX.Element;
+}

package/lib/cjs/avatar/avatarGroup.js

@@ -0,0 +1,167 @@
+"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 _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 _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+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 _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodashEs = require("lodash-es");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/avatar/constants");
+
+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 sizeSet = _constants.strings.SIZE;
+const shapeSet = _constants.strings.SHAPE;
+const overlapFromSet = _constants.strings.OVERLAP_FROM;
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class AvatarGroup extends _react.PureComponent {
+  getAllAvatars() {
+    const {
+      children
+    } = this.props;
+    return (0, _isArray.default)(children) ? children : [children];
+  }
+
+  getMergeAvatars(avatars) {
+    const {
+      maxCount
+    } = this.props;
+    let renderAvatars = avatars;
+    const restNumber = avatars.length - maxCount;
+    const normalAvatars = (0, _slice.default)(avatars).call(avatars, 0, maxCount);
+    const restAvatars = (0, _slice.default)(avatars).call(avatars, maxCount);
+
+    if (restNumber > 0) {
+      const more = this.renderMoreAvatar(restNumber, restAvatars);
+      normalAvatars.push(more);
+      renderAvatars = normalAvatars;
+    }
+
+    return renderAvatars;
+  }
+
+  renderMoreAvatar(restNumber, restAvatars) {
+    const {
+      renderMore
+    } = this.props;
+    const moreCls = (0, _classnames.default)("".concat(prefixCls, "-item-more"));
+
+    let moreAvatar = /*#__PURE__*/_react.default.createElement(_index.default, {
+      className: moreCls,
+      key: "_+n"
+    }, "+".concat(restNumber));
+
+    if ((0, _lodashEs.isFunction)(renderMore)) {
+      moreAvatar = /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: "_+n"
+      }, renderMore(restNumber, restAvatars));
+    }
+
+    return moreAvatar;
+  }
+
+  render() {
+    // eslint-disable-next-line no-unused-vars
+    const _a = this.props,
+          {
+      children,
+      maxCount,
+      overlapFrom,
+      size,
+      shape,
+      renderMore
+    } = _a,
+          rest = __rest(_a, ["children", "maxCount", "overlapFrom", "size", "shape", "renderMore"]);
+
+    let inner;
+    const groupCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-group")]: true
+    });
+
+    if (children) {
+      var _context;
+
+      const avatars = this.getAllAvatars();
+      inner = (0, _map.default)(_context = (0, _lodashEs.isNumber)(maxCount) ? this.getMergeAvatars(avatars) : avatars).call(_context, (itm, index) => {
+        var _context2, _context3;
+
+        const className = (0, _classnames.default)((0, _lodashEs.get)(itm.props, 'className'), {
+          [(0, _concat.default)(_context2 = "".concat(prefixCls, "-item-start-")).call(_context2, index)]: overlapFrom === 'start',
+          [(0, _concat.default)(_context3 = "".concat(prefixCls, "-item-end-")).call(_context3, index)]: overlapFrom === 'end'
+        });
+        return /*#__PURE__*/_react.default.cloneElement(itm, (0, _assign.default)((0, _assign.default)({}, rest), {
+          className,
+          size,
+          shape,
+          key: index
+        }));
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: groupCls
+    }, inner);
+  }
+
+}
+
+exports.default = AvatarGroup;
+AvatarGroup.defaultProps = {
+  size: 'medium',
+  shape: 'circle',
+  overlapFrom: 'start'
+};
+AvatarGroup.propTypes = {
+  children: _propTypes.default.node,
+  shape: _propTypes.default.oneOf(shapeSet),
+  size: _propTypes.default.oneOf(sizeSet),
+  maxCount: _propTypes.default.number,
+  renderMore: _propTypes.default.func,
+  overlapFrom: _propTypes.default.oneOf(overlapFromSet)
+};

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AvatarAdapter } from '@douyinfe/semi-foundation/lib/cjs/avatar/foundation';
+import '@douyinfe/semi-foundation/lib/cjs/avatar/avatar.css';
+import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
+import BaseComponent from '../_base/baseComponent';
+import { AvatarProps } from './interface';
+export * from './interface';
+export interface AvatarState {
+    isImgExist: boolean;
+    hoverContent: React.ReactNode;
+}
+export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
+    static defaultProps: {
+        size: string;
+        color: string;
+        shape: string;
+        onClick: typeof noop;
+        onMouseEnter: typeof noop;
+        onMouseLeave: typeof noop;
+    };
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        color: PropTypes.Requireable<string>;
+        shape: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        hoverMask: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        imgAttr: PropTypes.Requireable<object>;
+        src: PropTypes.Requireable<string>;
+        srcSet: PropTypes.Requireable<string>;
+        alt: PropTypes.Requireable<string>;
+        onError: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    constructor(props: AvatarProps);
+    get adapter(): AvatarAdapter<AvatarProps, AvatarState>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: AvatarProps): void;
+    componentWillUnmount(): void;
+    onEnter(): void;
+    onLeave(): void;
+    handleError(): void;
+    render(): JSX.Element;
+}