@activecollab/components 1.0.315 → 1.0.317

package/dist/cjs/components/Avatar/Avatar.js

@@ -6,11 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Avatar = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _Loaders = require("../Loaders");
 var _Styles = require("./Styles");
 var _excluded = ["url", "alt", "size", "className", "imgClassName", "children"];
 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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
@@ -48,16 +55,34 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     imgClassName = _ref.imgClassName,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageLoaded = _useState2[0],
+    setImageLoaded = _useState2[1];
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledWrapper, {
     className: className
   }, children, /*#__PURE__*/_react.default.createElement(_Styles.StyledAvatar, _extends({
-    size: size,
     ref: ref,
     src: url,
     alt: alt,
+    width: size,
+    height: size,
+    onLoad: function onLoad() {
+      setImageLoaded(true);
+    },
     role: "img",
-    className: imgClassName
-  }, rest)));
+    className: imgClassName,
+    style: {
+      display: imageLoaded ? "block" : "none"
+    }
+  }, rest)), !imageLoaded && /*#__PURE__*/_react.default.createElement(_Loaders.LinearLoader, {
+    "data-testid": "loader",
+    style: {
+      width: size,
+      height: size,
+      borderRadius: "100%"
+    }
+  }));
 });
 exports.Avatar = Avatar;
 Avatar.displayName = "Avatar";

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["Avatar","forwardRef","ref","url","alt","size","className","imgClassName","children","rest","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n  /** Path url. */\n  url: string;\n  /** Alt text. */\n  alt?: string;\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <StyledWrapper className={className}>\n      {children}\n      <StyledAvatar\n        size={size}\n        ref={ref}\n        src={url}\n        alt={alt}\n        role=\"img\"\n        className={imgClassName}\n        {...rest}\n      />\n    </StyledWrapper>\n  )\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;;;;;AAAA;AACA;AAAuD;AAAA;AAAA;AAAA;AAAA;AAAA;AAevD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,MAAM,gBAAG,IAAAC,iBAAU,EAI9B,gBAUEC,GAAG;EAAA,IARDC,GAAG,QAAHA,GAAG;IAAA,gBACHC,GAAG;IAAHA,GAAG,yBAAG,cAAc;IAAA,iBACpBC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,SAAS,QAATA,SAAS;IACTC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAAA,oBAIT,6BAAC,qBAAa;IAAC,SAAS,EAAEH;EAAU,GACjCE,QAAQ,eACT,6BAAC,oBAAY;IACX,IAAI,EAAEH,IAAK;IACX,GAAG,EAAEH,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAC,KAAK;IACV,SAAS,EAAEG;EAAa,GACpBE,IAAI,EACR,CACY;AAAA,CACjB,CACF;AAAC;AAEFT,MAAM,CAACU,WAAW,GAAG,QAAQ"}
+{"version":3,"file":"Avatar.js","names":["Avatar","forwardRef","ref","url","alt","size","className","imgClassName","children","rest","useState","imageLoaded","setImageLoaded","display","width","height","borderRadius","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useState } from \"react\";\nimport { LinearLoader } from \"../Loaders\";\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n  /** Path url. */\n  url: string;\n  /** Alt text. */\n  alt?: string;\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n    return (\n      <StyledWrapper className={className}>\n        {children}\n\n        <StyledAvatar\n          ref={ref}\n          src={url}\n          alt={alt}\n          width={size}\n          height={size}\n          onLoad={() => {\n            setImageLoaded(true);\n          }}\n          role=\"img\"\n          className={imgClassName}\n          style={{ display: imageLoaded ? \"block\" : \"none\" }}\n          {...rest}\n        />\n        {!imageLoaded && (\n          <LinearLoader\n            data-testid=\"loader\"\n            style={{ width: size, height: size, borderRadius: \"100%\" }}\n          />\n        )}\n      </StyledWrapper>\n    );\n  }\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAAuD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,MAAM,gBAAG,IAAAC,iBAAU,EAI9B,gBAUEC,GAAG,EACA;EAAA,IATDC,GAAG,QAAHA,GAAG;IAAA,gBACHC,GAAG;IAAHA,GAAG,yBAAG,cAAc;IAAA,iBACpBC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,SAAS,QAATA,SAAS;IACTC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAIT,gBAAsC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAvDC,WAAW;IAAEC,cAAc;EAElC,oBACE,6BAAC,qBAAa;IAAC,SAAS,EAAEN;EAAU,GACjCE,QAAQ,eAET,6BAAC,oBAAY;IACX,GAAG,EAAEN,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,KAAK,EAAEC,IAAK;IACZ,MAAM,EAAEA,IAAK;IACb,MAAM,EAAE,kBAAM;MACZO,cAAc,CAAC,IAAI,CAAC;IACtB,CAAE;IACF,IAAI,EAAC,KAAK;IACV,SAAS,EAAEL,YAAa;IACxB,KAAK,EAAE;MAAEM,OAAO,EAAEF,WAAW,GAAG,OAAO,GAAG;IAAO;EAAE,GAC/CF,IAAI,EACR,EACD,CAACE,WAAW,iBACX,6BAAC,qBAAY;IACX,eAAY,QAAQ;IACpB,KAAK,EAAE;MAAEG,KAAK,EAAET,IAAI;MAAEU,MAAM,EAAEV,IAAI;MAAEW,YAAY,EAAE;IAAO;EAAE,EAE9D,CACa;AAEpB,CAAC,CACF;AAAC;AAEFhB,MAAM,CAACiB,WAAW,GAAG,QAAQ"}

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

@@ -9,15 +9,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var StyledWrapper = _styledComponents.default.span.withConfig({
   displayName: "Styles__StyledWrapper",
   componentId: "sc-5x2tyd-0"
-})(["display:inline-flex;position:relative;border-radius:100%;"]);
+})(["display:inline-flex;border-radius:100%;position:relative;"]);
 exports.StyledWrapper = StyledWrapper;
 var StyledAvatar = _styledComponents.default.img.withConfig({
   displayName: "Styles__StyledAvatar",
   componentId: "sc-5x2tyd-1"
-})(["border-radius:100%;object-fit:cover;block-size:", ";inline-size:", ";"], function (props) {
-  return props.size + "px";
-}, function (props) {
-  return props.size + "px";
-});
+})(["border-radius:100%;object-fit:cover;"]);
 exports.StyledAvatar = StyledAvatar;
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["StyledWrapper","styled","span","StyledAvatar","img","props","size"],"sources":["../../../../src/components/Avatar/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { AvatarProps } from \"./Avatar\";\n\nexport const StyledWrapper = styled.span`\n  display: inline-flex;\n  position: relative;\n  border-radius: 100%;\n`;\n\nexport const StyledAvatar = styled.img<Pick<AvatarProps, \"size\">>`\n  border-radius: 100%;\n  object-fit: cover;\n\n  block-size: ${(props) => props.size + \"px\"};\n  inline-size: ${(props) => props.size + \"px\"};\n`;\n"],"mappings":";;;;;;AAAA;AAAuC;AAGhC,IAAMA,aAAa,GAAGC,yBAAM,CAACC,IAAI;EAAA;EAAA;AAAA,iEAIvC;AAAC;AAEK,IAAMC,YAAY,GAAGF,yBAAM,CAACG,GAAG;EAAA;EAAA;AAAA,8EAItB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAC3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAC5C;AAAC"}
+{"version":3,"file":"Styles.js","names":["StyledWrapper","styled","span","StyledAvatar","img"],"sources":["../../../../src/components/Avatar/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledWrapper = styled.span`\n  display: inline-flex;\n  border-radius: 100%;\n  position: relative;\n`;\n\nexport const StyledAvatar = styled.img`\n  border-radius: 100%;\n  object-fit: cover;\n`;\n"],"mappings":";;;;;;AAAA;AAAuC;AAEhC,IAAMA,aAAa,GAAGC,yBAAM,CAACC,IAAI;EAAA;EAAA;AAAA,iEAIvC;AAAC;AAEK,IAAMC,YAAY,GAAGF,yBAAM,CAACG,GAAG;EAAA;EAAA;AAAA,4CAGrC;AAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACxE,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM;;0CA6BlB,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAIvE,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACxE,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM;;0CA6ClB,CAAC"}

package/dist/esm/components/Avatar/Avatar.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["url", "alt", "size", "className", "imgClassName", "children"];
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
+import { LinearLoader } from "../Loaders";
 import { StyledAvatar, StyledWrapper } from "./Styles";
 /**
  * @component Avatar
@@ -38,16 +39,33 @@ export var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     imgClassName = _ref.imgClassName,
     children = _ref.children,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(false),
+    imageLoaded = _useState[0],
+    setImageLoaded = _useState[1];
   return /*#__PURE__*/React.createElement(StyledWrapper, {
     className: className
   }, children, /*#__PURE__*/React.createElement(StyledAvatar, _extends({
-    size: size,
     ref: ref,
     src: url,
     alt: alt,
+    width: size,
+    height: size,
+    onLoad: function onLoad() {
+      setImageLoaded(true);
+    },
     role: "img",
-    className: imgClassName
-  }, rest)));
+    className: imgClassName,
+    style: {
+      display: imageLoaded ? "block" : "none"
+    }
+  }, rest)), !imageLoaded && /*#__PURE__*/React.createElement(LinearLoader, {
+    "data-testid": "loader",
+    style: {
+      width: size,
+      height: size,
+      borderRadius: "100%"
+    }
+  }));
 });
 Avatar.displayName = "Avatar";
 //# sourceMappingURL=Avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["React","forwardRef","StyledAvatar","StyledWrapper","Avatar","ref","url","alt","size","className","imgClassName","children","rest","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n  /** Path url. */\n  url: string;\n  /** Alt text. */\n  alt?: string;\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <StyledWrapper className={className}>\n      {children}\n      <StyledAvatar\n        size={size}\n        ref={ref}\n        src={url}\n        alt={alt}\n        role=\"img\"\n        className={imgClassName}\n        {...rest}\n      />\n    </StyledWrapper>\n  )\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAA2B,OAAO;AAC5D,SAASC,YAAY,EAAEC,aAAa,QAAQ,UAAU;AAetD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGH,UAAU,CAI9B,gBAUEI,GAAG;EAAA,IARDC,GAAG,QAAHA,GAAG;IAAA,gBACHC,GAAG;IAAHA,GAAG,yBAAG,cAAc;IAAA,iBACpBC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,SAAS,QAATA,SAAS;IACTC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAAA,oBAIT,oBAAC,aAAa;IAAC,SAAS,EAAEH;EAAU,GACjCE,QAAQ,eACT,oBAAC,YAAY;IACX,IAAI,EAAEH,IAAK;IACX,GAAG,EAAEH,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAC,KAAK;IACV,SAAS,EAAEG;EAAa,GACpBE,IAAI,EACR,CACY;AAAA,CACjB,CACF;AAEDR,MAAM,CAACS,WAAW,GAAG,QAAQ"}
+{"version":3,"file":"Avatar.js","names":["React","forwardRef","useState","LinearLoader","StyledAvatar","StyledWrapper","Avatar","ref","url","alt","size","className","imgClassName","children","rest","imageLoaded","setImageLoaded","display","width","height","borderRadius","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useState } from \"react\";\nimport { LinearLoader } from \"../Loaders\";\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n  /** Path url. */\n  url: string;\n  /** Alt text. */\n  alt?: string;\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n    return (\n      <StyledWrapper className={className}>\n        {children}\n\n        <StyledAvatar\n          ref={ref}\n          src={url}\n          alt={alt}\n          width={size}\n          height={size}\n          onLoad={() => {\n            setImageLoaded(true);\n          }}\n          role=\"img\"\n          className={imgClassName}\n          style={{ display: imageLoaded ? \"block\" : \"none\" }}\n          {...rest}\n        />\n        {!imageLoaded && (\n          <LinearLoader\n            data-testid=\"loader\"\n            style={{ width: size, height: size, borderRadius: \"100%\" }}\n          />\n        )}\n      </StyledWrapper>\n    );\n  }\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAqBC,QAAQ,QAAQ,OAAO;AACtE,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,YAAY,EAAEC,aAAa,QAAQ,UAAU;AAetD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGL,UAAU,CAI9B,gBAUEM,GAAG,EACA;EAAA,IATDC,GAAG,QAAHA,GAAG;IAAA,gBACHC,GAAG;IAAHA,GAAG,yBAAG,cAAc;IAAA,iBACpBC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,SAAS,QAATA,SAAS;IACTC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAIT,gBAAsCZ,QAAQ,CAAU,KAAK,CAAC;IAAvDa,WAAW;IAAEC,cAAc;EAElC,oBACE,oBAAC,aAAa;IAAC,SAAS,EAAEL;EAAU,GACjCE,QAAQ,eAET,oBAAC,YAAY;IACX,GAAG,EAAEN,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,KAAK,EAAEC,IAAK;IACZ,MAAM,EAAEA,IAAK;IACb,MAAM,EAAE,kBAAM;MACZM,cAAc,CAAC,IAAI,CAAC;IACtB,CAAE;IACF,IAAI,EAAC,KAAK;IACV,SAAS,EAAEJ,YAAa;IACxB,KAAK,EAAE;MAAEK,OAAO,EAAEF,WAAW,GAAG,OAAO,GAAG;IAAO;EAAE,GAC/CD,IAAI,EACR,EACD,CAACC,WAAW,iBACX,oBAAC,YAAY;IACX,eAAY,QAAQ;IACpB,KAAK,EAAE;MAAEG,KAAK,EAAER,IAAI;MAAES,MAAM,EAAET,IAAI;MAAEU,YAAY,EAAE;IAAO;EAAE,EAE9D,CACa;AAEpB,CAAC,CACF;AAEDd,MAAM,CAACe,WAAW,GAAG,QAAQ"}

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

@@ -1,4 +1,3 @@
-import { AvatarProps } from "./Avatar";
 export declare const StyledWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledAvatar: import("styled-components").StyledComponent<"img", any, Pick<AvatarProps, "size">, never>;
+export declare const StyledAvatar: import("styled-components").StyledComponent<"img", any, {}, never>;
 //# sourceMappingURL=Styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,aAAa,qEAIzB,CAAC;AAEF,eAAO,MAAM,YAAY,2FAMxB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,qEAIzB,CAAC;AAEF,eAAO,MAAM,YAAY,oEAGxB,CAAC"}

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

@@ -2,13 +2,9 @@ import styled from "styled-components";
 export var StyledWrapper = styled.span.withConfig({
   displayName: "Styles__StyledWrapper",
   componentId: "sc-5x2tyd-0"
-})(["display:inline-flex;position:relative;border-radius:100%;"]);
+})(["display:inline-flex;border-radius:100%;position:relative;"]);
 export var StyledAvatar = styled.img.withConfig({
   displayName: "Styles__StyledAvatar",
   componentId: "sc-5x2tyd-1"
-})(["border-radius:100%;object-fit:cover;block-size:", ";inline-size:", ";"], function (props) {
-  return props.size + "px";
-}, function (props) {
-  return props.size + "px";
-});
+})(["border-radius:100%;object-fit:cover;"]);
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","StyledWrapper","span","StyledAvatar","img","props","size"],"sources":["../../../../src/components/Avatar/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { AvatarProps } from \"./Avatar\";\n\nexport const StyledWrapper = styled.span`\n  display: inline-flex;\n  position: relative;\n  border-radius: 100%;\n`;\n\nexport const StyledAvatar = styled.img<Pick<AvatarProps, \"size\">>`\n  border-radius: 100%;\n  object-fit: cover;\n\n  block-size: ${(props) => props.size + \"px\"};\n  inline-size: ${(props) => props.size + \"px\"};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAACE,IAAI;EAAA;EAAA;AAAA,iEAIvC;AAED,OAAO,IAAMC,YAAY,GAAGH,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,8EAItB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAC3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAC5C"}
+{"version":3,"file":"Styles.js","names":["styled","StyledWrapper","span","StyledAvatar","img"],"sources":["../../../../src/components/Avatar/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledWrapper = styled.span`\n  display: inline-flex;\n  border-radius: 100%;\n  position: relative;\n`;\n\nexport const StyledAvatar = styled.img`\n  border-radius: 100%;\n  object-fit: cover;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAACE,IAAI;EAAA;EAAA;AAAA,iEAIvC;AAED,OAAO,IAAMC,YAAY,GAAGH,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,4CAGrC"}

package/dist/index.js

@@ -9752,15 +9752,11 @@
   var StyledWrapper = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledWrapper",
     componentId: "sc-5x2tyd-0"
-  })(["display:inline-flex;position:relative;border-radius:100%;"]);
+  })(["display:inline-flex;border-radius:100%;position:relative;"]);
   var StyledAvatar = styled__default["default"].img.withConfig({
     displayName: "Styles__StyledAvatar",
     componentId: "sc-5x2tyd-1"
-  })(["border-radius:100%;object-fit:cover;block-size:", ";inline-size:", ";"], function (props) {
-    return props.size + "px";
-  }, function (props) {
-    return props.size + "px";
-  });
+  })(["border-radius:100%;object-fit:cover;"]);
 
   var _excluded$O = ["url", "alt", "size", "className", "imgClassName", "children"];
   /**
@@ -9798,16 +9794,34 @@
       imgClassName = _ref.imgClassName,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$O);
+    var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      imageLoaded = _useState2[0],
+      setImageLoaded = _useState2[1];
     return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
       className: className
     }, children, /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
-      size: size,
       ref: ref,
       src: url,
       alt: alt,
+      width: size,
+      height: size,
+      onLoad: function onLoad() {
+        setImageLoaded(true);
+      },
       role: "img",
-      className: imgClassName
-    }, rest)));
+      className: imgClassName,
+      style: {
+        display: imageLoaded ? "block" : "none"
+      }
+    }, rest)), !imageLoaded && /*#__PURE__*/React__default["default"].createElement(LinearLoader, {
+      "data-testid": "loader",
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "100%"
+      }
+    }));
   });
   Avatar.displayName = "Avatar";