@fle-ui/next 2.0.0-alpha.11 → 2.0.0-alpha.12

package/lib/auto-complete/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * TODO: 4.0
+ *
+ * - Remove `dataSource`
+ * - `size` not work with customizeInput
+ * - CustomizeInput not feedback `ENTER` key since accessibility enhancement
+ */
+import type { BaseSelectRef } from 'rc-select';
+import * as React from 'react';
+import type { BaseOptionType, DefaultOptionType, InternalSelectProps } from '../select';
+import type { InputStatus } from '../_util/statusUtils';
+declare const Option: import("rc-select/lib/Option").OptionFC;
+export interface DataSourceItemObject {
+    value: string;
+    text: string;
+}
+export type DataSourceItemType = DataSourceItemObject | React.ReactNode;
+export interface AutoCompleteProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue'> {
+    dataSource?: DataSourceItemType[];
+    status?: InputStatus;
+    /**
+     * @deprecated `dropdownClassName` is deprecated which will be removed in next major version.
+     *   Please use `popupClassName` instead.
+     */
+    dropdownClassName?: string;
+    popupClassName?: string;
+}
+declare const RefAutoComplete: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: AutoCompleteProps<ValueType, OptionType> & {
+    children?: React.ReactNode;
+} & {
+    ref?: React.Ref<BaseSelectRef> | undefined;
+}) => React.ReactElement) & {
+    Option: typeof Option;
+};
+export default RefAutoComplete;

package/lib/auto-complete/index.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _select = _interopRequireDefault(require("../select"));
+
+var _reactNode = require("../_util/reactNode");
+
+var _warning = _interopRequireDefault(require("../_util/warning"));
+/**
+ * TODO: 4.0
+ *
+ * - Remove `dataSource`
+ * - `size` not work with customizeInput
+ * - CustomizeInput not feedback `ENTER` key since accessibility enhancement
+ */
+
+
+var Option = _select["default"].Option;
+
+function isSelectOptionOrSelectOptGroup(child) {
+  return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
+}
+
+var AutoComplete = function AutoComplete(props, ref) {
+  var customizePrefixCls = props.prefixCls,
+      className = props.className,
+      popupClassName = props.popupClassName,
+      dropdownClassName = props.dropdownClassName,
+      children = props.children,
+      dataSource = props.dataSource;
+  var childNodes = (0, _toArray["default"])(children); // ============================= Input =============================
+
+  var customizeInput;
+
+  if (childNodes.length === 1 && (0, _reactNode.isValidElement)(childNodes[0]) && !isSelectOptionOrSelectOptGroup(childNodes[0])) {
+    var _childNodes = (0, _slicedToArray2["default"])(childNodes, 1);
+
+    customizeInput = _childNodes[0];
+  }
+
+  var getInputElement = customizeInput ? function () {
+    return customizeInput;
+  } : undefined; // ============================ Options ============================
+
+  var optionChildren; // [Legacy] convert `children` or `dataSource` into option children
+
+  if (childNodes.length && isSelectOptionOrSelectOptGroup(childNodes[0])) {
+    optionChildren = children;
+  } else {
+    optionChildren = dataSource ? dataSource.map(function (item) {
+      if ((0, _reactNode.isValidElement)(item)) {
+        return item;
+      }
+
+      switch ((0, _typeof2["default"])(item)) {
+        case 'string':
+          return /*#__PURE__*/React.createElement(Option, {
+            key: item,
+            value: item
+          }, item);
+
+        case 'object':
+          {
+            var optionValue = item.value;
+            return /*#__PURE__*/React.createElement(Option, {
+              key: optionValue,
+              value: optionValue
+            }, item.text);
+          }
+
+        default:
+          process.env.NODE_ENV !== "production" ? (0, _warning["default"])(false, 'AutoComplete', '`dataSource` is only supports type `string[] | Object[]`.') : void 0;
+          return undefined;
+      }
+    }) : [];
+  }
+
+  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!('dataSource' in props), 'AutoComplete', '`dataSource` is deprecated, please use `options` instead.') : void 0;
+  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!dropdownClassName, 'AutoComplete', '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.') : void 0;
+  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!customizeInput || !('size' in props), 'AutoComplete', 'You need to control style self instead of setting `size` when using customize input.') : void 0;
+  return /*#__PURE__*/React.createElement(_configProvider.ConfigConsumer, null, function (_ref) {
+    var getPrefixCls = _ref.getPrefixCls;
+    var prefixCls = getPrefixCls('select', customizePrefixCls);
+    return /*#__PURE__*/React.createElement(_select["default"], (0, _extends2["default"])({
+      ref: ref
+    }, (0, _omit["default"])(props, ['dataSource']), {
+      prefixCls: prefixCls,
+      popupClassName: popupClassName || dropdownClassName,
+      className: (0, _classnames["default"])("".concat(prefixCls, "-auto-complete"), className),
+      mode: _select["default"].SECRET_COMBOBOX_MODE_DO_NOT_USE
+    }, {
+      // Internal api
+      getInputElement: getInputElement
+    }), optionChildren);
+  });
+};
+
+var RefAutoComplete = /*#__PURE__*/React.forwardRef(AutoComplete);
+RefAutoComplete.Option = Option;
+var _default = RefAutoComplete;
+exports["default"] = _default;

package/lib/auto-complete/style/css.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../style/default.css");
+
+require("./index.css");
+
+require("../../select/style/css");

package/lib/auto-complete/style/index-pure.less

@@ -0,0 +1,16 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+
+@input-prefix-cls: ~'@{ant-prefix}-input';
+@select-prefix-cls: ~'@{ant-prefix}-select';
+@autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';
+
+.@{autocomplete-prefix-cls} {
+  .reset-component();
+
+  // https://github.com/ant-design/ant-design/issues/22302
+  .@{select-prefix-cls}-clear {
+    right: 13px;
+  }
+}

package/lib/auto-complete/style/index.css

@@ -0,0 +1,18 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.ant-select-auto-complete {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+}
+.ant-select-auto-complete .ant-select-clear {
+  right: 13px;
+}

package/lib/auto-complete/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../style/default.less';
+import './index.less';
+import '../../select/style';

package/lib/auto-complete/style/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../style/default.less");
+
+require("./index.less");
+
+require("../../select/style");

package/lib/auto-complete/style/index.less

@@ -0,0 +1,3 @@
+@root-entry-name: default;
+
+@import './index-pure.less';

package/lib/avatar/SizeContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { ScreenSizeMap } from '../_util/responsiveObserve';
+export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
+declare const SizeContext: React.Context<AvatarSize>;
+export interface SizeContextProps {
+    size?: AvatarSize;
+    children?: React.ReactNode;
+}
+export declare const SizeContextProvider: React.FC<SizeContextProps>;
+export default SizeContext;

package/lib/avatar/SizeContext.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SizeContextProvider = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var SizeContext = /*#__PURE__*/React.createContext('default');
+
+var SizeContextProvider = function SizeContextProvider(_ref) {
+  var children = _ref.children,
+      size = _ref.size;
+  return /*#__PURE__*/React.createElement(SizeContext.Consumer, null, function (originSize) {
+    return /*#__PURE__*/React.createElement(SizeContext.Provider, {
+      value: size || originSize
+    }, children);
+  });
+};
+
+exports.SizeContextProvider = SizeContextProvider;
+var _default = SizeContext;
+exports["default"] = _default;

package/lib/avatar/avatar.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { AvatarSize } from './SizeContext';
+export interface AvatarProps {
+    /** Shape of avatar, options: `circle`, `square` */
+    shape?: 'circle' | 'square';
+    size?: AvatarSize;
+    gap?: number;
+    /** Src of image avatar */
+    src?: React.ReactNode;
+    /** Srcset of image avatar */
+    srcSet?: string;
+    draggable?: boolean;
+    /** Icon to be used in avatar */
+    icon?: React.ReactNode;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    className?: string;
+    children?: React.ReactNode;
+    alt?: string;
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
+    onError?: () => boolean;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export default Avatar;

package/lib/avatar/avatar.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+
+var _ref = require("rc-util/lib/ref");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _useBreakpoint = _interopRequireDefault(require("../grid/hooks/useBreakpoint"));
+
+var _responsiveObserve = require("../_util/responsiveObserve");
+
+var _warning = _interopRequireDefault(require("../_util/warning"));
+
+var _SizeContext = _interopRequireDefault(require("./SizeContext"));
+
+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;
+};
+
+var InternalAvatar = function InternalAvatar(props, ref) {
+  var _classNames, _classNames2;
+
+  var groupSize = React.useContext(_SizeContext["default"]);
+
+  var _React$useState = React.useState(1),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      scale = _React$useState2[0],
+      setScale = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      mounted = _React$useState4[0],
+      setMounted = _React$useState4[1];
+
+  var _React$useState5 = React.useState(true),
+      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+      isImgExist = _React$useState6[0],
+      setIsImgExist = _React$useState6[1];
+
+  var avatarNodeRef = React.useRef(null);
+  var avatarChildrenRef = React.useRef(null);
+  var avatarNodeMergeRef = (0, _ref.composeRef)(ref, avatarNodeRef);
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var setScaleParam = function setScaleParam() {
+    if (!avatarChildrenRef.current || !avatarNodeRef.current) {
+      return;
+    }
+
+    var childrenWidth = avatarChildrenRef.current.offsetWidth; // offsetWidth avoid affecting be transform scale
+
+    var nodeWidth = avatarNodeRef.current.offsetWidth; // denominator is 0 is no meaning
+
+    if (childrenWidth !== 0 && nodeWidth !== 0) {
+      var _props$gap = props.gap,
+          gap = _props$gap === void 0 ? 4 : _props$gap;
+
+      if (gap * 2 < nodeWidth) {
+        setScale(nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1);
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    setMounted(true);
+  }, []);
+  React.useEffect(function () {
+    setIsImgExist(true);
+    setScale(1);
+  }, [props.src]);
+  React.useEffect(function () {
+    setScaleParam();
+  }, [props.gap]);
+
+  var handleImgLoadError = function handleImgLoadError() {
+    var onError = props.onError;
+    var errorFlag = onError ? onError() : undefined;
+
+    if (errorFlag !== false) {
+      setIsImgExist(false);
+    }
+  };
+
+  var customizePrefixCls = props.prefixCls,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'circle' : _props$shape,
+      _props$size = props.size,
+      customSize = _props$size === void 0 ? 'default' : _props$size,
+      src = props.src,
+      srcSet = props.srcSet,
+      icon = props.icon,
+      className = props.className,
+      alt = props.alt,
+      draggable = props.draggable,
+      children = props.children,
+      crossOrigin = props.crossOrigin,
+      others = __rest(props, ["prefixCls", "shape", "size", "src", "srcSet", "icon", "className", "alt", "draggable", "children", "crossOrigin"]);
+
+  var size = customSize === 'default' ? groupSize : customSize;
+  var needResponsive = Object.keys((0, _typeof2["default"])(size) === 'object' ? size || {} : {}).some(function (key) {
+    return ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key);
+  });
+  var screens = (0, _useBreakpoint["default"])(needResponsive);
+  var responsiveSizeStyle = React.useMemo(function () {
+    if ((0, _typeof2["default"])(size) !== 'object') {
+      return {};
+    }
+
+    var currentBreakpoint = _responsiveObserve.responsiveArray.find(function (screen) {
+      return screens[screen];
+    });
+
+    var currentSize = size[currentBreakpoint];
+    return currentSize ? {
+      width: currentSize,
+      height: currentSize,
+      lineHeight: "".concat(currentSize, "px"),
+      fontSize: icon ? currentSize / 2 : 18
+    } : {};
+  }, [screens, size]);
+  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(typeof icon === 'string' && icon.length > 2), 'Avatar', "`icon` is using ReactNode instead of string naming in v4. Please check `".concat(icon, "` at https://ant.design/components/icon")) : void 0;
+  var prefixCls = getPrefixCls('avatar', customizePrefixCls);
+  var sizeCls = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-lg"), size === 'large'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-sm"), size === 'small'), _classNames));
+  var hasImageElement = /*#__PURE__*/React.isValidElement(src);
+  var classString = (0, _classnames["default"])(prefixCls, sizeCls, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-").concat(shape), !!shape), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-image"), hasImageElement || src && isImgExist), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-icon"), !!icon), _classNames2), className);
+  var sizeStyle = typeof size === 'number' ? {
+    width: size,
+    height: size,
+    lineHeight: "".concat(size, "px"),
+    fontSize: icon ? size / 2 : 18
+  } : {};
+  var childrenToRender;
+
+  if (typeof src === 'string' && isImgExist) {
+    childrenToRender = /*#__PURE__*/React.createElement("img", {
+      src: src,
+      draggable: draggable,
+      srcSet: srcSet,
+      onError: handleImgLoadError,
+      alt: alt,
+      crossOrigin: crossOrigin
+    });
+  } else if (hasImageElement) {
+    childrenToRender = src;
+  } else if (icon) {
+    childrenToRender = icon;
+  } else if (mounted || scale !== 1) {
+    var transformString = "scale(".concat(scale, ") translateX(-50%)");
+    var childrenStyle = {
+      msTransform: transformString,
+      WebkitTransform: transformString,
+      transform: transformString
+    };
+    var sizeChildrenStyle = typeof size === 'number' ? {
+      lineHeight: "".concat(size, "px")
+    } : {};
+    childrenToRender = /*#__PURE__*/React.createElement(_rcResizeObserver["default"], {
+      onResize: setScaleParam
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-string"),
+      ref: avatarChildrenRef,
+      style: (0, _extends2["default"])((0, _extends2["default"])({}, sizeChildrenStyle), childrenStyle)
+    }, children));
+  } else {
+    childrenToRender = /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-string"),
+      style: {
+        opacity: 0
+      },
+      ref: avatarChildrenRef
+    }, children);
+  } // The event is triggered twice from bubbling up the DOM tree.
+  // see https://codesandbox.io/s/kind-snow-9lidz
+
+
+  delete others.onError;
+  delete others.gap;
+  return /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({}, others, {
+    style: (0, _extends2["default"])((0, _extends2["default"])((0, _extends2["default"])({}, sizeStyle), responsiveSizeStyle), others.style),
+    className: classString,
+    ref: avatarNodeMergeRef
+  }), childrenToRender);
+};
+
+var Avatar = /*#__PURE__*/React.forwardRef(InternalAvatar);
+
+if (process.env.NODE_ENV !== 'production') {
+  Avatar.displayName = 'Avatar';
+}
+
+var _default = Avatar;
+exports["default"] = _default;

package/lib/avatar/group.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { AvatarSize } from './SizeContext';
+export interface GroupProps {
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    maxCount?: number;
+    maxStyle?: React.CSSProperties;
+    maxPopoverPlacement?: 'top' | 'bottom';
+    maxPopoverTrigger?: 'hover' | 'focus' | 'click';
+    size?: AvatarSize;
+}
+declare const Group: React.FC<GroupProps>;
+export default Group;

package/lib/avatar/group.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _popover = _interopRequireDefault(require("../popover"));
+
+var _reactNode = require("../_util/reactNode");
+
+var _avatar = _interopRequireDefault(require("./avatar"));
+
+var _SizeContext = require("./SizeContext");
+
+var Group = function Group(props) {
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var customizePrefixCls = props.prefixCls,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      maxCount = props.maxCount,
+      maxStyle = props.maxStyle,
+      size = props.size;
+  var prefixCls = getPrefixCls('avatar-group', customizePrefixCls);
+  var cls = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), className);
+  var children = props.children,
+      _props$maxPopoverPlac = props.maxPopoverPlacement,
+      maxPopoverPlacement = _props$maxPopoverPlac === void 0 ? 'top' : _props$maxPopoverPlac,
+      _props$maxPopoverTrig = props.maxPopoverTrigger,
+      maxPopoverTrigger = _props$maxPopoverTrig === void 0 ? 'hover' : _props$maxPopoverTrig;
+  var childrenWithProps = (0, _toArray["default"])(children).map(function (child, index) {
+    return (0, _reactNode.cloneElement)(child, {
+      key: "avatar-key-".concat(index)
+    });
+  });
+  var numOfChildren = childrenWithProps.length;
+
+  if (maxCount && maxCount < numOfChildren) {
+    var childrenShow = childrenWithProps.slice(0, maxCount);
+    var childrenHidden = childrenWithProps.slice(maxCount, numOfChildren);
+    childrenShow.push( /*#__PURE__*/React.createElement(_popover["default"], {
+      key: "avatar-popover-key",
+      content: childrenHidden,
+      trigger: maxPopoverTrigger,
+      placement: maxPopoverPlacement,
+      overlayClassName: "".concat(prefixCls, "-popover")
+    }, /*#__PURE__*/React.createElement(_avatar["default"], {
+      style: maxStyle
+    }, "+".concat(numOfChildren - maxCount))));
+    return /*#__PURE__*/React.createElement(_SizeContext.SizeContextProvider, {
+      size: size
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls,
+      style: props.style
+    }, childrenShow));
+  }
+
+  return /*#__PURE__*/React.createElement(_SizeContext.SizeContextProvider, {
+    size: size
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls,
+    style: props.style
+  }, childrenWithProps));
+};
+
+var _default = Group;
+exports["default"] = _default;

package/lib/avatar/index.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { AvatarProps } from './avatar';
+import Group from './group';
+export { AvatarProps } from './avatar';
+export { GroupProps } from './group';
+export { Group };
+type CompoundedComponent = ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLSpanElement>> & {
+    Group: typeof Group;
+};
+declare const Avatar: CompoundedComponent;
+export default Avatar;

package/lib/avatar/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Group", {
+  enumerable: true,
+  get: function get() {
+    return _group["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _avatar = _interopRequireDefault(require("./avatar"));
+
+var _group = _interopRequireDefault(require("./group"));
+
+var Avatar = _avatar["default"];
+Avatar.Group = _group["default"];
+var _default = Avatar;
+exports["default"] = _default;

package/lib/avatar/style/css.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../style/default.css");
+
+require("./index.css");
+
+require("../../popover/style/css");