{"version":3,"file":"AvatarStack.cjs","names":[],"sources":["../../../src/components/Avatar/AvatarStack.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { useEffect } from \"react\";\nimport styles from \"./Avatar.module.css\";\nimport clipMask from \"./avatar-clip.mask.svg?raw\";\n\ntype AvatarStackProps = {\n  className?: string;\n};\n\nconst AVATAR_MASK_ID = \"cpdAvatarClipSvg\";\nlet AvatarStackUsageCount = 0;\n\n/**\n * Renders a stack of avatars and clips the content appropriately.\n *\n * The `type` of avatars should always be set to `round`\n * And all the avatars should have the same size.\n */\nexport const AvatarStack: React.FC<\n  React.PropsWithChildren<AvatarStackProps>\n> = ({ children, className }) => {\n  /**\n   * The `clip-path` property in CSS supports a `path()` function, however\n   * that has to use pixel values.\n   * `clipPathUnits=\"objectBoundingBox\"` only exists inside an SVG document.\n   * Which is why we have the external `avatar-clip.mask.svg`.\n   *\n   * It is possible to load this SVG externally using `url(path/to/doc.svg#id)`\n   * But this is only supported in Firefox\n   * This leaves us with no choice but rendering SVG inline in the HTML document\n   * And making sure there is always only a single instance regardless of the\n   * amount of `AvatarStack` instance in the document.\n   */\n  useEffect(() => {\n    if (AvatarStackUsageCount === 0) {\n      const svgMask = `\n        <div aria-hidden=\"true\" id=\"${AVATAR_MASK_ID}\" class=\"${styles[\"clip-path\"]}\">\n          ${clipMask}\n        </div>\n      `;\n      document.body.insertAdjacentHTML(\"beforeend\", svgMask);\n    }\n    AvatarStackUsageCount++;\n    return () => {\n      AvatarStackUsageCount--;\n      if (AvatarStackUsageCount <= 0) {\n        // Cleanup the mask if there are no instances of `AvatarStack` left\n        // on the page\n        document.getElementById(AVATAR_MASK_ID)?.remove();\n      }\n    };\n  }, []);\n\n  return (\n    <div className={classnames(styles[\"stacked-avatars\"], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAgBA,IAAM,iBAAiB;AACvB,IAAI,wBAAwB;;;;;;;AAQ5B,IAAa,eAER,EAAE,UAAU,gBAAgB;;;;;;;;;;;;;AAa/B,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,0BAA0B,GAAG;GAC/B,MAAM,UAAU;sCACgB,eAAe,WAAW,sBAAA,QAAO,aAAa;YACxE,yBAAA,QAAS;;;AAGf,YAAS,KAAK,mBAAmB,aAAa,QAAQ;;AAExD;AACA,eAAa;AACX;AACA,OAAI,yBAAyB,EAG3B,UAAS,eAAe,eAAe,EAAE,QAAQ;;IAGpD,EAAE,CAAC;AAEN,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,WAAA,SAAsB,sBAAA,QAAO,oBAAoB,UAAU;EAC7D;EACG,CAAA"}