@activecollab/components 1.0.295 → 1.0.296

package/dist/cjs/components/AvatarGroup/AvatarGroup.js

@@ -7,51 +7,123 @@ Object.defineProperty(exports, "__esModule", {
 exports.AvatarGroup = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _react = _interopRequireWildcard(require("react"));
+var _Tooltip = require("../Tooltip");
 var _Typography = require("../Typography/Typography");
 var _Styles = require("./Styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-var AvatarGroup = function AvatarGroup(_ref) {
+var AvatarGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _Children$toArray;
   var limit = _ref.limit,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children,
-    counterProps = _ref.counterProps;
-  // always display counter with min +2 as +1 can require 1 more Avatar
+    _ref$hasTooltip = _ref.hasTooltip,
+    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip;
+  // always display counter with min +2 as +1 can takes space of an 1 more Avatar
   var minChildren = _react.Children.count(children) - limit > 1 ? false : true;
+  // gap between Avatars
+  var gap = 8;
   var _children = minChildren ? _react.Children.toArray(children) : _react.Children.toArray(children).slice(0, limit);
   var handleVariant = (0, _react.useMemo)(function () {
     if (size >= 34) return "Caption 1";
     return "Caption 2";
   }, [size]);
-  return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, null, _children.map(function (child) {
-    var item = child;
+
+  // get all names indexed above limit number from alt tag on Avatar for counter tooltip
+  var nameArr = (_Children$toArray = _react.Children.toArray(children)) === null || _Children$toArray === void 0 ? void 0 : _Children$toArray.slice(limit).map(function (item) {
+    var _ref2 = item,
+      props = _ref2.props;
+    return props.alt;
+  });
+
+  // render React Element with tooltip or without
+  var renderAvatars = function renderAvatars(item) {
+    var tooltipText = item.props.alt;
+    var alt = "Image of ".concat(tooltipText);
+    if (hasTooltip) {
+      return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+        title: tooltipText
+      }, /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
+        size: size,
+        alt: alt,
+        style: {
+          marginLeft: "-".concat(gap, "px"),
+          outline: "1px solid var(--page-paper-main)"
+        }
+      })));
+    }
     return /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
       size: size,
+      alt: alt,
       style: {
-        marginInlineStart: "-8px",
+        marginLeft: "-".concat(gap, "px"),
         outline: "1px solid var(--page-paper-main)"
       }
     }));
-  }), limit >= _react.Children.count(children) || minChildren ? null : /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, _extends({
-    size: size,
-    role: "status",
-    "aria-label": "Rest of the users"
-  }, counterProps), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    variant: handleVariant,
-    weight: "medium"
-  }, "+", _react.Children.count(children) - limit)));
-};
+  };
+
+  // render Tooltip if hasTooltip is true
+  var renderCounter = function renderCounter() {
+    if (hasTooltip) {
+      return /*#__PURE__*/_react.default.createElement(_StyledTooltip, {
+        title: nameArr.join("\n")
+      }, /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, {
+        size: size,
+        role: "status",
+        "aria-label": "Rest of the users",
+        $_css: "-".concat(gap, "px")
+      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        variant: handleVariant,
+        weight: "medium"
+      }, "+", _react.Children.count(children) - limit)));
+    }
+    return /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles2, {
+      size: size,
+      role: "status",
+      "aria-label": "Rest of the users",
+      $_css2: "-".concat(gap, "px")
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+      variant: handleVariant,
+      weight: "medium"
+    }, "+", _react.Children.count(children) - limit));
+  };
+  return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, {
+    hasTooltip: hasTooltip,
+    gap: gap,
+    ref: ref
+  }, _children.map(function (child) {
+    var item = child;
+    return renderAvatars(item);
+  }), limit >= _react.Children.count(children) || minChildren ? null : renderCounter());
+});
 exports.AvatarGroup = AvatarGroup;
-var _StyledLengthCountStyles = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
-  displayName: "AvatarGroup___StyledLengthCountStyles",
+AvatarGroup.displayName = "AvatarGroup";
+var _StyledTooltip = (0, _styledComponents.default)(_Tooltip.Tooltip).withConfig({
+  displayName: "AvatarGroup___StyledTooltip",
   componentId: "sc-1rsx1j5-0"
 })({
-  marginInlineStart: "-8px"
+  whiteSpace: "break-spaces",
+  lineHeight: "18px"
+});
+var _StyledLengthCountStyles = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles",
+  componentId: "sc-1rsx1j5-1"
+})(function (p) {
+  return {
+    marginLeft: p.$_css
+  };
+});
+var _StyledLengthCountStyles2 = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles2",
+  componentId: "sc-1rsx1j5-2"
+})(function (p) {
+  return {
+    marginLeft: p.$_css2
+  };
 });
 //# sourceMappingURL=AvatarGroup.js.map

package/dist/cjs/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","limit","size","children","counterProps","minChildren","Children","count","_children","toArray","slice","handleVariant","useMemo","map","child","item","cloneElement","props","style","marginInlineStart","outline"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  counterProps?: HTMLAttributes<HTMLDivElement> & {\n    [dataAttibute: `data-${string}`]: string;\n  };\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n  counterProps,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  // always display counter with min +2 as +1 can require 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) || minChildren ? null : (\n        <LengthCountStyles\n          size={size}\n          role=\"status\"\n          aria-label=\"Rest of the users\"\n          css={{ marginInlineStart: \"-8px\" }}\n          {...counterProps}\n        >\n          <Typography variant={handleVariant} weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";;;;;;;;AAAA;AASA;AACA;AAAiE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1D,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAKoB;EAAA,IAJ1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;EAEZ;EACA,IAAMC,WAAW,GAAGC,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;EACvE,IAAMO,SAAS,GAAGH,WAAW,GACzBC,eAAQ,CAACG,OAAO,CAACN,QAAQ,CAAC,GAC1BG,eAAQ,CAACG,OAAO,CAACN,QAAQ,CAAC,CAACO,KAAK,CAAC,CAAC,EAAET,KAAK,CAAC;EAE9C,IAAMU,aAAa,GAAG,IAAAC,cAAO,EAAC,YAAM;IAClC,IAAIV,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,6BAAC,0BAAkB,QAChBM,SAAS,CAACK,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAO,IAAAE,mBAAY,EAACD,IAAI,kCACnBA,IAAI,CAACE,KAAK;MACbf,IAAI,EAAEA,IAAI;MACVgB,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDnB,KAAK,IAAIK,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,IAAIE,WAAW,GAAG,IAAI,gBACtD;IACE,IAAI,EAAEH,IAAK;IACX,IAAI,EAAC,QAAQ;IACb,cAAW;EAAmB,GAE1BE,YAAY,gBAEhB,6BAAC,sBAAU;IAAC,OAAO,EAAEO,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/CL,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA,GAVa;EAAEkB,iBAAiB,EAAE;AAAO,CAAC"}
+{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","forwardRef","ref","limit","size","children","hasTooltip","minChildren","Children","count","gap","_children","toArray","slice","handleVariant","useMemo","nameArr","map","item","props","alt","renderAvatars","tooltipText","cloneElement","style","marginLeft","outline","renderCounter","join","child","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  // render React Element with tooltip or without\n  const renderAvatars = (item: ReactElement) => {\n    const tooltipText = item.props.alt;\n    const alt = `Image of ${tooltipText}`;\n\n    if (hasTooltip) {\n      return (\n        <Tooltip title={tooltipText}>\n          {cloneElement(item, {\n            ...item.props,\n            size: size,\n            alt: alt,\n            style: {\n              marginLeft: `-${gap}px`,\n              outline: \"1px solid var(--page-paper-main)\",\n            },\n          })}\n        </Tooltip>\n      );\n    }\n    return cloneElement(item, {\n      ...item.props,\n      size: size,\n      alt: alt,\n      style: {\n        marginLeft: `-${gap}px`,\n        outline: \"1px solid var(--page-paper-main)\",\n      },\n    });\n  };\n\n  // render Tooltip if hasTooltip is true\n  const renderCounter = () => {\n    if (hasTooltip) {\n      return (\n        <Tooltip\n          title={nameArr.join(\"\\n\")}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      );\n    }\n    return (\n      <LengthCountStyles\n        size={size}\n        role=\"status\"\n        aria-label=\"Rest of the users\"\n        css={{\n          marginLeft: `-${gap}px`,\n        }}\n      >\n        <Typography variant={handleVariant} weight=\"medium\">\n          +{Children.count(children) - limit}\n        </Typography>\n      </LengthCountStyles>\n    );\n  };\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} gap={gap} ref={ref}>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return renderAvatars(item);\n      })}\n\n      {limit >= Children.count(children) || minChildren\n        ? null\n        : renderCounter()}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":"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"}

package/dist/cjs/components/AvatarGroup/Styles.js

@@ -10,7 +10,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var AvatarGroupsStyles = _styledComponents.default.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["display:flex;cursor:pointer;width:fit-content;", ""], _FontStyle.FontStyle);
+})(["", " align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative;user-select:none;width:fit-content;&::before{border-radius:5px;background-color:", ";content:\"\";height:100%;margin-left:", "px;opacity:0;padding:5px 0;position:absolute;transition:opacity 0.2s ease-in-out;width:", ";}&:hover::before{opacity:1;}"], _FontStyle.FontStyle, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
+}, function (_ref) {
+  var gap = _ref.gap;
+  return -gap;
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return "calc(100% + ".concat(gap * 2, "px + 5px)");
+});
 exports.AvatarGroupsStyles = AvatarGroupsStyles;
 var LengthCountStyles = _styledComponents.default.div.withConfig({
   displayName: "Styles__LengthCountStyles",

package/dist/cjs/components/AvatarGroup/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2DAIxCC,oBAAS,CACZ;AAAC;AAMK,IAAMC,iBAAiB,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}
+{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","props","hasTooltip","gap","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n  gap: number;\n}>`\n  ${FontStyle}\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n  width: fit-content;\n\n  &::before {\n    border-radius: 5px;\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    content: \"\";\n    height: 100%;\n    margin-left: ${({ gap }) => -gap}px;\n    opacity: 0;\n    padding: 5px 0;\n    position: absolute;\n    transition: opacity 0.2s ease-in-out;\n    // 5px represents padding px\n    width: ${({ gap }) => `calc(100% + ${gap * 2}px + 5px)`};\n  }\n\n  &:hover::before {\n    opacity: 1;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4VAIxCC,oBAAS,EAWW,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,UAAU,IAAI,wBAAwB;AAAA,GAGhC;EAAA,IAAGC,GAAG,QAAHA,GAAG;EAAA,OAAO,CAACA,GAAG;AAAA,GAMvB;EAAA,IAAGA,GAAG,SAAHA,GAAG;EAAA,6BAAsBA,GAAG,GAAG,CAAC;AAAA,CAAW,CAM1D;AAAC;AAMK,IAAMC,iBAAiB,GAAGN,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}

package/dist/esm/components/AvatarGroup/AvatarGroup.d.ts

@@ -1,10 +1,10 @@
-import { HTMLAttributes, PropsWithChildren } from "react";
+import React from "react";
 export interface AvatarGroupsProps {
     limit: number;
     size?: number;
-    counterProps?: HTMLAttributes<HTMLDivElement> & {
-        [dataAttibute: `data-${string}`]: string;
-    };
+    hasTooltip?: boolean;
 }
-export declare const AvatarGroup: ({ limit, size, children, counterProps, }: PropsWithChildren<AvatarGroupsProps>) => JSX.Element;
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/esm/components/AvatarGroup/AvatarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,cAAc,EACd,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;QAC9C,CAAC,YAAY,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KAC1C,CAAC;CACH;AAED,eAAO,MAAM,WAAW,6CAKrB,kBAAkB,iBAAiB,CAAC,gBA0CtC,CAAC"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;;wCAgHtB,CAAC"}

package/dist/esm/components/AvatarGroup/AvatarGroup.js

@@ -1,43 +1,118 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _styled3 from "styled-components";
+import _styled2 from "styled-components";
 import _styled from "styled-components";
-import React, { Children, cloneElement, useMemo } from "react";
+import React, { Children, cloneElement, useMemo, forwardRef } from "react";
+import { Tooltip } from "../Tooltip";
 import { Typography } from "../Typography/Typography";
 import { AvatarGroupsStyles, LengthCountStyles } from "./Styles";
-export var AvatarGroup = function AvatarGroup(_ref) {
+export var AvatarGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _Children$toArray;
   var limit = _ref.limit,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children,
-    counterProps = _ref.counterProps;
-  // always display counter with min +2 as +1 can require 1 more Avatar
+    _ref$hasTooltip = _ref.hasTooltip,
+    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip;
+  // always display counter with min +2 as +1 can takes space of an 1 more Avatar
   var minChildren = Children.count(children) - limit > 1 ? false : true;
+  // gap between Avatars
+  var gap = 8;
   var _children = minChildren ? Children.toArray(children) : Children.toArray(children).slice(0, limit);
   var handleVariant = useMemo(function () {
     if (size >= 34) return "Caption 1";
     return "Caption 2";
   }, [size]);
-  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, null, _children.map(function (child) {
-    var item = child;
+
+  // get all names indexed above limit number from alt tag on Avatar for counter tooltip
+  var nameArr = (_Children$toArray = Children.toArray(children)) == null ? void 0 : _Children$toArray.slice(limit).map(function (item) {
+    var _ref2 = item,
+      props = _ref2.props;
+    return props.alt;
+  });
+
+  // render React Element with tooltip or without
+  var renderAvatars = function renderAvatars(item) {
+    var tooltipText = item.props.alt;
+    var alt = "Image of " + tooltipText;
+    if (hasTooltip) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: tooltipText
+      }, /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
+        size: size,
+        alt: alt,
+        style: {
+          marginLeft: "-" + gap + "px",
+          outline: "1px solid var(--page-paper-main)"
+        }
+      })));
+    }
     return /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
       size: size,
+      alt: alt,
       style: {
-        marginInlineStart: "-8px",
+        marginLeft: "-" + gap + "px",
         outline: "1px solid var(--page-paper-main)"
       }
     }));
-  }), limit >= Children.count(children) || minChildren ? null : /*#__PURE__*/React.createElement(_StyledLengthCountStyles, _extends({
-    size: size,
-    role: "status",
-    "aria-label": "Rest of the users"
-  }, counterProps), /*#__PURE__*/React.createElement(Typography, {
-    variant: handleVariant,
-    weight: "medium"
-  }, "+", Children.count(children) - limit)));
-};
-var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
-  displayName: "AvatarGroup___StyledLengthCountStyles",
+  };
+
+  // render Tooltip if hasTooltip is true
+  var renderCounter = function renderCounter() {
+    if (hasTooltip) {
+      return /*#__PURE__*/React.createElement(_StyledTooltip, {
+        title: nameArr.join("\n")
+      }, /*#__PURE__*/React.createElement(_StyledLengthCountStyles, {
+        size: size,
+        role: "status",
+        "aria-label": "Rest of the users",
+        $_css: "-" + gap + "px"
+      }, /*#__PURE__*/React.createElement(Typography, {
+        variant: handleVariant,
+        weight: "medium"
+      }, "+", Children.count(children) - limit)));
+    }
+    return /*#__PURE__*/React.createElement(_StyledLengthCountStyles2, {
+      size: size,
+      role: "status",
+      "aria-label": "Rest of the users",
+      $_css2: "-" + gap + "px"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: handleVariant,
+      weight: "medium"
+    }, "+", Children.count(children) - limit));
+  };
+  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, {
+    hasTooltip: hasTooltip,
+    gap: gap,
+    ref: ref
+  }, _children.map(function (child) {
+    var item = child;
+    return renderAvatars(item);
+  }), limit >= Children.count(children) || minChildren ? null : renderCounter());
+});
+AvatarGroup.displayName = "AvatarGroup";
+var _StyledTooltip = _styled(Tooltip).withConfig({
+  displayName: "AvatarGroup___StyledTooltip",
   componentId: "sc-1rsx1j5-0"
 })({
-  marginInlineStart: "-8px"
+  whiteSpace: "break-spaces",
+  lineHeight: "18px"
+});
+var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles",
+  componentId: "sc-1rsx1j5-1"
+})(function (p) {
+  return {
+    marginLeft: p.$_css
+  };
+});
+var _StyledLengthCountStyles2 = _styled(LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles2",
+  componentId: "sc-1rsx1j5-2"
+})(function (p) {
+  return {
+    marginLeft: p.$_css2
+  };
 });
 //# sourceMappingURL=AvatarGroup.js.map

package/dist/esm/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","limit","size","children","counterProps","minChildren","count","_children","toArray","slice","handleVariant","map","child","item","props","style","marginInlineStart","outline"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  counterProps?: HTMLAttributes<HTMLDivElement> & {\n    [dataAttibute: `data-${string}`]: string;\n  };\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n  counterProps,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  // always display counter with min +2 as +1 can require 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) || minChildren ? null : (\n        <LengthCountStyles\n          size={size}\n          role=\"status\"\n          aria-label=\"Rest of the users\"\n          css={{ marginInlineStart: \"-8px\" }}\n          {...counterProps}\n        >\n          <Typography variant={handleVariant} weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,QAAQ,EACRC,YAAY,EAIZC,OAAO,QACF,OAAO;AAEd,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,UAAU;AAUhE,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAKoB;EAAA,IAJ1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;EAEZ;EACA,IAAMC,WAAW,GAAGX,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;EACvE,IAAMM,SAAS,GAAGF,WAAW,GACzBX,QAAQ,CAACc,OAAO,CAACL,QAAQ,CAAC,GAC1BT,QAAQ,CAACc,OAAO,CAACL,QAAQ,CAAC,CAACM,KAAK,CAAC,CAAC,EAAER,KAAK,CAAC;EAE9C,IAAMS,aAAa,GAAGd,OAAO,CAAC,YAAM;IAClC,IAAIM,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,oBAAC,kBAAkB,QAChBK,SAAS,CAACI,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAOjB,YAAY,CAACkB,IAAI,eACnBA,IAAI,CAACC,KAAK;MACbZ,IAAI,EAAEA,IAAI;MACVa,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDhB,KAAK,IAAIP,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,IAAIE,WAAW,GAAG,IAAI,gBACtD;IACE,IAAI,EAAEH,IAAK;IACX,IAAI,EAAC,QAAQ;IACb,cAAW;EAAmB,GAE1BE,YAAY,gBAEhB,oBAAC,UAAU;IAAC,OAAO,EAAEM,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/ChB,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC;EAAA;EAAA;AAAA,GAVa;EAAEe,iBAAiB,EAAE;AAAO,CAAC"}
+{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","forwardRef","Tooltip","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","ref","limit","size","children","hasTooltip","minChildren","count","gap","_children","toArray","slice","handleVariant","nameArr","map","item","props","alt","renderAvatars","tooltipText","style","marginLeft","outline","renderCounter","join","child","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  // render React Element with tooltip or without\n  const renderAvatars = (item: ReactElement) => {\n    const tooltipText = item.props.alt;\n    const alt = `Image of ${tooltipText}`;\n\n    if (hasTooltip) {\n      return (\n        <Tooltip title={tooltipText}>\n          {cloneElement(item, {\n            ...item.props,\n            size: size,\n            alt: alt,\n            style: {\n              marginLeft: `-${gap}px`,\n              outline: \"1px solid var(--page-paper-main)\",\n            },\n          })}\n        </Tooltip>\n      );\n    }\n    return cloneElement(item, {\n      ...item.props,\n      size: size,\n      alt: alt,\n      style: {\n        marginLeft: `-${gap}px`,\n        outline: \"1px solid var(--page-paper-main)\",\n      },\n    });\n  };\n\n  // render Tooltip if hasTooltip is true\n  const renderCounter = () => {\n    if (hasTooltip) {\n      return (\n        <Tooltip\n          title={nameArr.join(\"\\n\")}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      );\n    }\n    return (\n      <LengthCountStyles\n        size={size}\n        role=\"status\"\n        aria-label=\"Rest of the users\"\n        css={{\n          marginLeft: `-${gap}px`,\n        }}\n      >\n        <Typography variant={handleVariant} weight=\"medium\">\n          +{Children.count(children) - limit}\n        </Typography>\n      </LengthCountStyles>\n    );\n  };\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} gap={gap} ref={ref}>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return renderAvatars(item);\n      })}\n\n      {limit >= Children.count(children) || minChildren\n        ? null\n        : renderCounter()}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":"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"}

package/dist/esm/components/AvatarGroup/Styles.d.ts

@@ -1,4 +1,7 @@
-export declare const AvatarGroupsStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AvatarGroupsStyles: import("styled-components").StyledComponent<"div", any, {
+    hasTooltip: boolean;
+    gap: number;
+}, never>;
 interface LengthCountStylesProps {
     size: number;
 }

package/dist/esm/components/AvatarGroup/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,oEAK9B,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;gBACjB,OAAO;SACd,MAAM;SA6BZ,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}

package/dist/esm/components/AvatarGroup/Styles.js

@@ -3,7 +3,15 @@ import { FontStyle } from "../FontStyle";
 export var AvatarGroupsStyles = styled.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["display:flex;cursor:pointer;width:fit-content;", ""], FontStyle);
+})(["", " align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative;user-select:none;width:fit-content;&::before{border-radius:5px;background-color:", ";content:\"\";height:100%;margin-left:", "px;opacity:0;padding:5px 0;position:absolute;transition:opacity 0.2s ease-in-out;width:", ";}&:hover::before{opacity:1;}"], FontStyle, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
+}, function (_ref) {
+  var gap = _ref.gap;
+  return -gap;
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return "calc(100% + " + gap * 2 + "px + 5px)";
+});
 export var LengthCountStyles = styled.div.withConfig({
   displayName: "Styles__LengthCountStyles",
   componentId: "sc-1padv46-1"

package/dist/esm/components/AvatarGroup/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,2DAIxCF,SAAS,CACZ;AAMD,OAAO,IAAMG,iBAAiB,GAAGJ,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAI5C"}
+{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","props","hasTooltip","gap","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n  gap: number;\n}>`\n  ${FontStyle}\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n  width: fit-content;\n\n  &::before {\n    border-radius: 5px;\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    content: \"\";\n    height: 100%;\n    margin-left: ${({ gap }) => -gap}px;\n    opacity: 0;\n    padding: 5px 0;\n    position: absolute;\n    transition: opacity 0.2s ease-in-out;\n    // 5px represents padding px\n    width: ${({ gap }) => `calc(100% + ${gap * 2}px + 5px)`};\n  }\n\n  &:hover::before {\n    opacity: 1;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,4VAIxCF,SAAS,EAWW,UAACG,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,UAAU,IAAI,wBAAwB;AAAA,GAGhC;EAAA,IAAGC,GAAG,QAAHA,GAAG;EAAA,OAAO,CAACA,GAAG;AAAA,GAMvB;EAAA,IAAGA,GAAG,SAAHA,GAAG;EAAA,wBAAsBA,GAAG,GAAG,CAAC;AAAA,CAAW,CAM1D;AAMD,OAAO,IAAMC,iBAAiB,GAAGP,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,EAI5C"}

package/dist/index.js

@@ -15997,7 +15997,15 @@
   var AvatarGroupsStyles = styled__default["default"].div.withConfig({
     displayName: "Styles__AvatarGroupsStyles",
     componentId: "sc-1padv46-0"
-  })(["display:flex;cursor:pointer;width:fit-content;", ""], FontStyle);
+  })(["", " align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative;user-select:none;width:fit-content;&::before{border-radius:5px;background-color:", ";content:\"\";height:100%;margin-left:", "px;opacity:0;padding:5px 0;position:absolute;transition:opacity 0.2s ease-in-out;width:", ";}&:hover::before{opacity:1;}"], FontStyle, function (props) {
+    return !props.hasTooltip && "var(--color-theme-300)";
+  }, function (_ref) {
+    var gap = _ref.gap;
+    return -gap;
+  }, function (_ref2) {
+    var gap = _ref2.gap;
+    return "calc(100% + ".concat(gap * 2, "px + 5px)");
+  });
   var LengthCountStyles = styled__default["default"].div.withConfig({
     displayName: "Styles__LengthCountStyles",
     componentId: "sc-1padv46-1"
@@ -16007,42 +16015,114 @@
     return props.size + "px";
   });
 
-  var AvatarGroup = function AvatarGroup(_ref) {
+  var AvatarGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _Children$toArray;
     var limit = _ref.limit,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 34 : _ref$size,
       children = _ref.children,
-      counterProps = _ref.counterProps;
-    // always display counter with min +2 as +1 can require 1 more Avatar
+      _ref$hasTooltip = _ref.hasTooltip,
+      hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip;
+    // always display counter with min +2 as +1 can takes space of an 1 more Avatar
     var minChildren = React.Children.count(children) - limit > 1 ? false : true;
+    // gap between Avatars
+    var gap = 8;
     var _children = minChildren ? React.Children.toArray(children) : React.Children.toArray(children).slice(0, limit);
     var handleVariant = React.useMemo(function () {
       if (size >= 34) return "Caption 1";
       return "Caption 2";
     }, [size]);
-    return /*#__PURE__*/React__default["default"].createElement(AvatarGroupsStyles, null, _children.map(function (child) {
-      var item = child;
+
+    // get all names indexed above limit number from alt tag on Avatar for counter tooltip
+    var nameArr = (_Children$toArray = React.Children.toArray(children)) === null || _Children$toArray === void 0 ? void 0 : _Children$toArray.slice(limit).map(function (item) {
+      var _ref2 = item,
+        props = _ref2.props;
+      return props.alt;
+    });
+
+    // render React Element with tooltip or without
+    var renderAvatars = function renderAvatars(item) {
+      var tooltipText = item.props.alt;
+      var alt = "Image of ".concat(tooltipText);
+      if (hasTooltip) {
+        return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+          title: tooltipText
+        }, /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
+          size: size,
+          alt: alt,
+          style: {
+            marginLeft: "-".concat(gap, "px"),
+            outline: "1px solid var(--page-paper-main)"
+          }
+        })));
+      }
       return /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
         size: size,
+        alt: alt,
         style: {
-          marginInlineStart: "-8px",
+          marginLeft: "-".concat(gap, "px"),
           outline: "1px solid var(--page-paper-main)"
         }
       }));
-    }), limit >= React.Children.count(children) || minChildren ? null : /*#__PURE__*/React__default["default"].createElement(_StyledLengthCountStyles, _extends({
-      size: size,
-      role: "status",
-      "aria-label": "Rest of the users"
-    }, counterProps), /*#__PURE__*/React__default["default"].createElement(Typography, {
-      variant: handleVariant,
-      weight: "medium"
-    }, "+", React.Children.count(children) - limit)));
-  };
-  var _StyledLengthCountStyles = styled__default["default"](LengthCountStyles).withConfig({
-    displayName: "AvatarGroup___StyledLengthCountStyles",
+    };
+
+    // render Tooltip if hasTooltip is true
+    var renderCounter = function renderCounter() {
+      if (hasTooltip) {
+        return /*#__PURE__*/React__default["default"].createElement(_StyledTooltip, {
+          title: nameArr.join("\n")
+        }, /*#__PURE__*/React__default["default"].createElement(_StyledLengthCountStyles, {
+          size: size,
+          role: "status",
+          "aria-label": "Rest of the users",
+          $_css: "-".concat(gap, "px")
+        }, /*#__PURE__*/React__default["default"].createElement(Typography, {
+          variant: handleVariant,
+          weight: "medium"
+        }, "+", React.Children.count(children) - limit)));
+      }
+      return /*#__PURE__*/React__default["default"].createElement(_StyledLengthCountStyles2, {
+        size: size,
+        role: "status",
+        "aria-label": "Rest of the users",
+        $_css2: "-".concat(gap, "px")
+      }, /*#__PURE__*/React__default["default"].createElement(Typography, {
+        variant: handleVariant,
+        weight: "medium"
+      }, "+", React.Children.count(children) - limit));
+    };
+    return /*#__PURE__*/React__default["default"].createElement(AvatarGroupsStyles, {
+      hasTooltip: hasTooltip,
+      gap: gap,
+      ref: ref
+    }, _children.map(function (child) {
+      var item = child;
+      return renderAvatars(item);
+    }), limit >= React.Children.count(children) || minChildren ? null : renderCounter());
+  });
+  AvatarGroup.displayName = "AvatarGroup";
+  var _StyledTooltip = styled__default["default"](Tooltip).withConfig({
+    displayName: "AvatarGroup___StyledTooltip",
     componentId: "sc-1rsx1j5-0"
   })({
-    marginInlineStart: "-8px"
+    whiteSpace: "break-spaces",
+    lineHeight: "18px"
+  });
+  var _StyledLengthCountStyles = styled__default["default"](LengthCountStyles).withConfig({
+    displayName: "AvatarGroup___StyledLengthCountStyles",
+    componentId: "sc-1rsx1j5-1"
+  })(function (p) {
+    return {
+      marginLeft: p.$_css
+    };
+  });
+  var _StyledLengthCountStyles2 = styled__default["default"](LengthCountStyles).withConfig({
+    displayName: "AvatarGroup___StyledLengthCountStyles2",
+    componentId: "sc-1rsx1j5-2"
+  })(function (p) {
+    return {
+      marginLeft: p.$_css2
+    };
   });
 
   var StyledCommandPalette = styled__default["default"].div.withConfig({