@atlaskit/avatar 20.5.9 → 21.0.1

package/Avatar/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/avatar.js",
   "module": "../dist/esm/entry-points/avatar.js",
   "module:es2019": "../dist/es2019/entry-points/avatar.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/avatar.d.ts"
 }

package/AvatarItem/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/avatar-item.js",
   "module": "../dist/esm/entry-points/avatar-item.js",
   "module:es2019": "../dist/es2019/entry-points/avatar-item.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/avatar-item.d.ts"
 }

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/avatar
 
+## 21.0.1
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 21.0.0
+
+### Major Changes
+
+- [`92bb02bc46b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/92bb02bc46b) - [ux] There are **no code changes required** to consume this major, but you should be aware that internal changes have been made to how `@atlaskit/avatar` loads images.
+
+  Before, the image loading behaviour was written in JS. Now, it leans on a standard HTML `img` tag if you provide a `src` prop, allowing it to rely on the browser to optimise the loading. These changes should result in faster image loading and an improved server-side rendering story.
+
+  In this version, the **breaking change is that you will no longer see a fallback icon while the image is loading**. We have intentionally removed this loading behaviour as it is no longer consistent with our native `img` behaviour-first approach, and was a source of SSR bugs. Avatar images will load either instantly from the cache, or very fast from a CDN. In the edge cases where there is an error with the image src provided, we will still fall back to a default icon.
+
+### Patch Changes
+
+- [`be23a6d8ee1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be23a6d8ee1) - [ux] Updates color tokens used to be more semantically accurate
+
+## 20.5.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 20.5.9
 
 ### Patch Changes

package/Presence/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/presence.js",
   "module": "../dist/esm/entry-points/presence.js",
   "module:es2019": "../dist/es2019/entry-points/presence.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/presence.d.ts"
 }

package/Skeleton/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/skeleton.js",
   "module": "../dist/esm/entry-points/skeleton.js",
   "module:es2019": "../dist/es2019/entry-points/skeleton.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/skeleton.d.ts"
 }

package/Status/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/status.js",
   "module": "../dist/esm/entry-points/status.js",
   "module:es2019": "../dist/es2019/entry-points/status.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/status.d.ts"
 }

package/dist/cjs/Avatar.js

@@ -38,7 +38,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/avatar";
-var packageVersion = "20.5.9";
+var packageVersion = "21.0.1";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
@@ -50,7 +50,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ").concat("var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ").concat("var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ").concat("var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat("var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat("var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
   );
 };
 /**

package/dist/cjs/AvatarImage.js

@@ -23,25 +23,21 @@ var _constants = require("./constants");
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-var ICON_BACKGROUND = "var(--ds-text-inverse, ".concat((0, _colors.background)(), ")");
+var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat((0, _colors.background)(), ")");
 exports.ICON_BACKGROUND = ICON_BACKGROUND;
-var ICON_COLOR = "var(--ds-text-subtlest, ".concat(_colors.N90, ")");
+var ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
 exports.ICON_COLOR = ICON_COLOR;
-var avatarImageStyles = (0, _core.css)({
+var avatarDefaultIconStyles = (0, _core.css)({
   display: 'block',
   width: '100%',
   height: '100%',
   backgroundColor: ICON_COLOR
 });
-var loadingImageStyles = (0, _core.css)({
+var avatarImageStyles = (0, _core.css)({
   display: 'flex',
   width: '100%',
   height: '100%',
-  flex: '1 1 100%',
-  backgroundColor: 'transparent',
-  backgroundPosition: 'center',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: 'cover'
+  flex: '1 1 100%'
 });
 /**
  * __Avatar image__
@@ -57,47 +53,20 @@ var AvatarImage = function AvatarImage(_ref) {
       size = _ref.size,
       testId = _ref.testId;
 
-  var _useState = (0, _react.useState)('initial'),
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      phase = _useState2[0],
-      setPhase = _useState2[1];
-
-  var borderRadius = appearance === 'circle' ? '50%' : "".concat(_constants.AVATAR_RADIUS[size], "px");
-  var image = (0, _react.useMemo)(function () {
-    if (src) {
-      setPhase('loading');
-      var img = new Image();
-
-      img.onload = function () {
-        return setPhase('loaded');
-      };
-
-      img.onerror = function () {
-        return setPhase('error');
-      };
+      hasImageErrored = _useState2[0],
+      setHasImageErrored = _useState2[1];
 
-      img.src = src;
-      return img;
-    }
+  var borderRadius = appearance === 'circle' ? '50%' : "".concat(_constants.AVATAR_RADIUS[size], "px"); // If src changes, reset state
 
-    return null;
-  }, [src]);
   (0, _react.useEffect)(function () {
-    return function () {
-      if (image) {
-        image.onload = function () {};
-
-        image.onerror = function () {};
-      }
-    };
-  }, [image]);
-  var imageHasLoadedAsync = src && phase !== 'loading' && phase !== 'error';
-  var imageHasLoadedSync = src && phase === 'loading' && (image === null || image === void 0 ? void 0 : image.complete);
-  var imageHasLoaded = imageHasLoadedAsync || imageHasLoadedSync;
-
-  if (!imageHasLoaded) {
+    setHasImageErrored(false);
+  }, [src]);
+
+  if (!src || hasImageErrored) {
     return (0, _core.jsx)("span", {
-      css: [avatarImageStyles, // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
+      css: [avatarDefaultIconStyles, // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       {
         '& svg': {
@@ -118,15 +87,17 @@ var AvatarImage = function AvatarImage(_ref) {
     }));
   }
 
-  return (0, _core.jsx)("span", {
-    css: loadingImageStyles,
+  return (0, _core.jsx)("img", {
+    src: src,
+    alt: alt,
+    "data-testid": testId && "".concat(testId, "--image"),
+    css: avatarImageStyles,
     style: {
-      backgroundImage: "url(\"".concat(src, "\")"),
       borderRadius: borderRadius
     },
-    role: alt ? 'img' : undefined,
-    "aria-label": alt || undefined,
-    "data-testid": testId && "".concat(testId, "--image")
+    onError: function onError() {
+      return setHasImageErrored(true);
+    }
   });
 };
 

package/dist/cjs/AvatarItem.js

@@ -44,7 +44,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, (0, _constants.gridSize)() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ").concat("var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ").concat("var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 0.5;\n        pointer-events: none;\n      ")
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, (0, _constants.gridSize)() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 0.5;\n        pointer-events: none;\n      ")
   );
 };
 /**

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "20.5.9",
+	"version": "21.0.1",
 	"sideEffects": false
 }

package/dist/es2019/Avatar.js

@@ -10,7 +10,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "20.5.9";
+const packageVersion = "21.0.1";
 
 const getStyles = (css, {
   size,

package/dist/es2019/AvatarImage.js

@@ -1,28 +1,24 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/core';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
 import { background, N90 } from '@atlaskit/theme/colors';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export const ICON_BACKGROUND = `var(--ds-text-inverse, ${background()})`;
-export const ICON_COLOR = `var(--ds-text-subtlest, ${N90})`;
-const avatarImageStyles = css({
+export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${background()})`;
+export const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
+const avatarDefaultIconStyles = css({
   display: 'block',
   width: '100%',
   height: '100%',
   backgroundColor: ICON_COLOR
 });
-const loadingImageStyles = css({
+const avatarImageStyles = css({
   display: 'flex',
   width: '100%',
   height: '100%',
-  flex: '1 1 100%',
-  backgroundColor: 'transparent',
-  backgroundPosition: 'center',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: 'cover'
+  flex: '1 1 100%'
 });
 /**
  * __Avatar image__
@@ -37,39 +33,16 @@ const AvatarImage = ({
   size,
   testId
 }) => {
-  const [phase, setPhase] = useState('initial');
-  const borderRadius = appearance === 'circle' ? '50%' : `${AVATAR_RADIUS[size]}px`;
-  const image = useMemo(() => {
-    if (src) {
-      setPhase('loading');
-      const img = new Image();
-
-      img.onload = () => setPhase('loaded');
-
-      img.onerror = () => setPhase('error');
+  const [hasImageErrored, setHasImageErrored] = useState(false);
+  const borderRadius = appearance === 'circle' ? '50%' : `${AVATAR_RADIUS[size]}px`; // If src changes, reset state
 
-      img.src = src;
-      return img;
-    }
-
-    return null;
-  }, [src]);
   useEffect(() => {
-    return () => {
-      if (image) {
-        image.onload = () => {};
-
-        image.onerror = () => {};
-      }
-    };
-  }, [image]);
-  const imageHasLoadedAsync = src && phase !== 'loading' && phase !== 'error';
-  const imageHasLoadedSync = src && phase === 'loading' && (image === null || image === void 0 ? void 0 : image.complete);
-  const imageHasLoaded = imageHasLoadedAsync || imageHasLoadedSync;
+    setHasImageErrored(false);
+  }, [src]);
 
-  if (!imageHasLoaded) {
+  if (!src || hasImageErrored) {
     return jsx("span", {
-      css: [avatarImageStyles, // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
+      css: [avatarDefaultIconStyles, // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       {
         '& svg': {
@@ -90,15 +63,15 @@ const AvatarImage = ({
     }));
   }
 
-  return jsx("span", {
-    css: loadingImageStyles,
+  return jsx("img", {
+    src: src,
+    alt: alt,
+    "data-testid": testId && `${testId}--image`,
+    css: avatarImageStyles,
     style: {
-      backgroundImage: `url("${src}")`,
       borderRadius: borderRadius
     },
-    role: alt ? 'img' : undefined,
-    "aria-label": alt || undefined,
-    "data-testid": testId && `${testId}--image`
+    onError: () => setHasImageErrored(true)
   });
 };
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "20.5.9",
+	"version": "21.0.1",
 	"sideEffects": false
 }

package/dist/esm/Avatar.js

@@ -20,7 +20,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "20.5.9";
+var packageVersion = "21.0.1";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
@@ -32,7 +32,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ").concat("var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ").concat("var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ").concat("var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat("var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat("var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
   );
 };
 /**

package/dist/esm/AvatarImage.js

@@ -2,29 +2,25 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/core';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
 import { background, N90 } from '@atlaskit/theme/colors';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export var ICON_BACKGROUND = "var(--ds-text-inverse, ".concat(background(), ")");
-export var ICON_COLOR = "var(--ds-text-subtlest, ".concat(N90, ")");
-var avatarImageStyles = css({
+export var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(background(), ")");
+export var ICON_COLOR = "var(--ds-icon-subtle, ".concat(N90, ")");
+var avatarDefaultIconStyles = css({
   display: 'block',
   width: '100%',
   height: '100%',
   backgroundColor: ICON_COLOR
 });
-var loadingImageStyles = css({
+var avatarImageStyles = css({
   display: 'flex',
   width: '100%',
   height: '100%',
-  flex: '1 1 100%',
-  backgroundColor: 'transparent',
-  backgroundPosition: 'center',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: 'cover'
+  flex: '1 1 100%'
 });
 /**
  * __Avatar image__
@@ -40,47 +36,20 @@ var AvatarImage = function AvatarImage(_ref) {
       size = _ref.size,
       testId = _ref.testId;
 
-  var _useState = useState('initial'),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      phase = _useState2[0],
-      setPhase = _useState2[1];
-
-  var borderRadius = appearance === 'circle' ? '50%' : "".concat(AVATAR_RADIUS[size], "px");
-  var image = useMemo(function () {
-    if (src) {
-      setPhase('loading');
-      var img = new Image();
-
-      img.onload = function () {
-        return setPhase('loaded');
-      };
-
-      img.onerror = function () {
-        return setPhase('error');
-      };
+      hasImageErrored = _useState2[0],
+      setHasImageErrored = _useState2[1];
 
-      img.src = src;
-      return img;
-    }
+  var borderRadius = appearance === 'circle' ? '50%' : "".concat(AVATAR_RADIUS[size], "px"); // If src changes, reset state
 
-    return null;
-  }, [src]);
   useEffect(function () {
-    return function () {
-      if (image) {
-        image.onload = function () {};
-
-        image.onerror = function () {};
-      }
-    };
-  }, [image]);
-  var imageHasLoadedAsync = src && phase !== 'loading' && phase !== 'error';
-  var imageHasLoadedSync = src && phase === 'loading' && (image === null || image === void 0 ? void 0 : image.complete);
-  var imageHasLoaded = imageHasLoadedAsync || imageHasLoadedSync;
+    setHasImageErrored(false);
+  }, [src]);
 
-  if (!imageHasLoaded) {
+  if (!src || hasImageErrored) {
     return jsx("span", {
-      css: [avatarImageStyles, // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
+      css: [avatarDefaultIconStyles, // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       {
         '& svg': {
@@ -101,15 +70,17 @@ var AvatarImage = function AvatarImage(_ref) {
     }));
   }
 
-  return jsx("span", {
-    css: loadingImageStyles,
+  return jsx("img", {
+    src: src,
+    alt: alt,
+    "data-testid": testId && "".concat(testId, "--image"),
+    css: avatarImageStyles,
     style: {
-      backgroundImage: "url(\"".concat(src, "\")"),
       borderRadius: borderRadius
     },
-    role: alt ? 'img' : undefined,
-    "aria-label": alt || undefined,
-    "data-testid": testId && "".concat(testId, "--image")
+    onError: function onError() {
+      return setHasImageErrored(true);
+    }
   });
 };
 

package/dist/esm/AvatarItem.js

@@ -29,7 +29,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, gridSize() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(backgroundHover(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ").concat("var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ").concat("var(--ds-background-neutral-subtle-pressed, ".concat(backgroundActive(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 0.5;\n        pointer-events: none;\n      ")
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, gridSize() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(backgroundHover(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(backgroundActive(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 0.5;\n        pointer-events: none;\n      ")
   );
 };
 /**

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "20.5.9",
+	"version": "21.0.1",
 	"sideEffects": false
 }

package/dist/types/Avatar.d.ts

@@ -23,7 +23,7 @@ export interface AvatarPropTypes {
     appearance?: AppearanceType;
     /**
      * Used to provide better content to screen readers when using presence/status. Rather
-     * than a screen reader speaking "online, approved, John Smith", passing in an label
+     * than a screen reader speaking "online, approved, John Smith", passing in a label
      * allows a custom message like "John Smith (approved and online)".
      */
     label?: string;
@@ -45,8 +45,7 @@ export interface AvatarPropTypes {
      */
     isDisabled?: boolean;
     /**
-     * Name will be displayed in a tooltip, also used by screen readers as fallback
-     * content if the image fails to load.
+     * Provides alt text for the avatar image.
      */
     name?: string;
     /**

package/dist/types/AvatarImage.d.ts

@@ -8,8 +8,8 @@ interface AvatarImageProps {
     src?: string;
     testId?: string;
 }
-export declare const ICON_BACKGROUND: "var(--ds-text-inverse)";
-export declare const ICON_COLOR: "var(--ds-text-subtlest)";
+export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
+export declare const ICON_COLOR: "var(--ds-icon-subtle)";
 /**
  * __Avatar image__
  *

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "20.5.9",
+  "version": "21.0.1",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -18,7 +18,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Avatar"
+      "name": "Avatar",
+      "category": "Components"
     }
   },
   "af:exports": {
@@ -34,7 +35,7 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -59,7 +60,7 @@
     "color-contrast-checker": "^1.5.0",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [
@@ -72,6 +73,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",

package/report.api.md

@@ -0,0 +1,320 @@
+## API Report File for "@atlaskit/avatar"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { FC } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { MouseEventHandler } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { RefAttributes } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+export declare const ACTIVE_SCALE_FACTOR = 0.9;
+
+export declare type AppearanceType = 'circle' | 'square';
+
+/**
+ * __Avatar__
+ *
+ * An avatar is a visual representation of a user or entity.
+ *
+ * - [Examples](https://atlassian.design/components/avatar/examples)
+ * - [Code](https://atlassian.design/components/avatar/code)
+ * - [Usage](https://atlassian.design/components/avatar/usage)
+ */
+declare const Avatar: ForwardRefExoticComponent<
+  AvatarPropTypes & RefAttributes<HTMLElement>
+>;
+export default Avatar;
+
+export declare const AVATAR_RADIUS: AvatarSizeMap;
+
+export declare const AVATAR_SIZES: AvatarSizeMap;
+
+export declare type AvatarClickEventHandler = (
+  event: React.MouseEvent,
+  analyticsEvent?: UIAnalyticsEvent,
+) => void;
+
+/**
+ * __Avatar item__
+ *
+ * An avatar item is a wrapper that goes around an avatar when it's displayed alongside text, such as a name or status.
+ *
+ * - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
+ * - [Code](https://atlassian.design/components/avatar/avatar-item/code)
+ */
+export declare const AvatarItem: ForwardRefExoticComponent<
+  AvatarItemProps & RefAttributes<HTMLElement>
+>;
+
+export declare interface AvatarItemProps {
+  /**
+   * Used to provide better content to screen readers when using presence/status. Rather
+   * than a screen reader speaking "online, approved, John Smith", passing in an label
+   * allows a custom message like "John Smith (approved and online)".
+   */
+  label?: string;
+  /**
+   * Slot to place an avatar element. Use @atlaskit/avatar.
+   */
+  avatar: ReactNode;
+  /**
+   * Change background color.
+   */
+  backgroundColor?: string;
+  /**
+   * Use a custom component instead of the default span.
+   */
+  children?: (props: CustomAvatarItemProps) => ReactNode;
+  /**
+   * URL for avatars being used as a link.
+   */
+  href?: string;
+  /**
+   * Disable the item from being interactive
+   */
+  isDisabled?: boolean;
+  /**
+   * Handler to be called on click.
+   */
+  onClick?: AvatarClickEventHandler;
+  /**
+   * PrimaryText text.
+   */
+  primaryText?: ReactNode;
+  /**
+   * SecondaryText text.
+   */
+  secondaryText?: ReactNode;
+  /**
+   * Pass target down to the anchor, if href is provided.
+   */
+  target?: '_blank' | '_self' | '_top' | '_parent';
+  /**
+   * By default, overflowing text is truncated if it exceeds the container width. Use this prop to disable this.
+   */
+  isTruncationDisabled?: boolean;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+   */
+  testId?: string;
+}
+
+export declare interface AvatarPropTypes {
+  /**
+   * Indicates the shape of the avatar. Most avatars are circular, but square avatars
+   * can be used for 'container' objects.
+   */
+  appearance?: AppearanceType;
+  /**
+   * Used to provide better content to screen readers when using presence/status. Rather
+   * than a screen reader speaking "online, approved, John Smith", passing in a label
+   * allows a custom message like "John Smith (approved and online)".
+   */
+  label?: string;
+  /**
+   * Used to override the default border color around the avatar body.
+   * Accepts any color argument that the border-color CSS property accepts.
+   */
+  borderColor?: string;
+  /**
+   * Supply a custom avatar component instead of the default
+   */
+  children?: (props: CustomAvatarProps) => ReactNode;
+  /**
+   * Provides a url for avatars being used as a link.
+   */
+  href?: string;
+  /**
+   * Change the style to indicate the avatar is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * Provides alt text for the avatar image.
+   */
+  name?: string;
+  /**
+   * Indicates a user's online status by showing a small icon on the avatar.
+   * Refer to presence values on the Presence component.
+   * Alternatively accepts any React element. For best results, it is recommended to
+   * use square content with height and width of 100%.
+   */
+  presence?: ('online' | 'busy' | 'focus' | 'offline') | ReactNode;
+  /**
+   * Defines the size of the avatar
+   */
+  size?: SizeType;
+  /**
+   * A url to load an image from (this can also be a base64 encoded image).
+   */
+  src?: string;
+  /**
+   * Indicates contextual information by showing a small icon on the avatar.
+   * Refer to status values on the Status component.
+   */
+  status?: ('approved' | 'declined' | 'locked') | ReactNode;
+  /**
+   * The index of where this avatar is in the group `stack`.
+   */
+  stackIndex?: number;
+  /**
+   * Assign specific tabIndex order to the underlying node.
+   */
+  tabIndex?: number;
+  /**
+   * Pass target down to the anchor, if href is provided.
+   */
+  target?: '_blank' | '_self' | '_top' | '_parent';
+  /**
+   * Handler to be called on click.
+   */
+  onClick?: AvatarClickEventHandler;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+   */
+  testId?: string;
+  /**
+   * Analytics context meta data
+   */
+  analyticsContext?: Record<string, any>;
+}
+
+declare type AvatarSizeMap = Record<SizeType, number>;
+
+export declare const BORDER_WIDTH = 2;
+
+export declare interface CustomAvatarItemProps {
+  testId?: string;
+  onClick?: MouseEventHandler;
+  className?: string;
+  href?: string;
+  children: ReactNode;
+  ref: Ref<HTMLElement>;
+  /**
+   * This is used in render props so is okay to be defined.
+   * eslint-disable-next-line consistent-props-definitions
+   */
+  'aria-label'?: string;
+  'aria-disabled'?: boolean | 'false' | 'true' | undefined;
+}
+
+export declare interface CustomAvatarProps {
+  /**
+   * This is used in render props so is okay to be defined.
+   * eslint-disable-next-line consistent-props-definitions
+   */
+  'aria-label'?: string;
+  tabIndex?: number;
+  testId?: string;
+  onClick?: MouseEventHandler;
+  className?: string;
+  href?: string;
+  children: ReactNode;
+  ref: Ref<HTMLElement>;
+}
+
+export declare type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge';
+
+/**
+ * __Avatar presence__
+ *
+ * A presence shows an avatar’s availability.
+ *
+ * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
+ * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
+ */
+export declare const Presence: FC<PresenceProps>;
+
+export declare interface PresenceProps {
+  /**
+   * Used to override the default border color of the presence indicator.
+   * Accepts any color argument that the border-color CSS property accepts.
+   */
+  borderColor?: string;
+  /**
+   * Content to use as a custom presence indicator (usually not required if
+   * consuming Presence separate to Avatar).
+   */
+  children?: ReactNode;
+  /**
+   * The type of presence indicator to show
+   */
+  presence?: PresenceType;
+  /**
+   * Test Id
+   */
+  testId?: string;
+}
+
+export declare type PresenceType =
+  | 'busy'
+  | 'focus'
+  | 'offline'
+  | 'online'
+  | ReactNode;
+
+export declare type SizeType =
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge'
+  | 'xxlarge';
+
+/**
+ * __Skeleton__
+ *
+ * A skeleton is the loading state for the avatar component.
+ *
+ * - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples)
+ * - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code)
+ */
+export declare const Skeleton: FC<SkeletonProps>;
+
+export declare interface SkeletonProps {
+  appearance?: AppearanceType;
+  color?: string;
+  size?: SizeType;
+  weight?: 'normal' | 'strong';
+}
+
+/**
+ * __Avatar status__
+ *
+ * An avatar status shows contextual information, such as if someone approves or declines something.
+ *
+ * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
+ */
+export declare const Status: FC<StatusProps>;
+
+export declare interface StatusProps {
+  /**
+   * Override the default border color of the status indicator. This accepts
+   * any color argument that the CSS property `border-color` accepts.
+   */
+  borderColor?: string;
+  /**
+   * Content to use as a custom status indicator. Not needed if consuming
+   * `Status` separate to `Avatar`.
+   */
+  children?: ReactNode;
+  /**
+   * Content to use as a custom status indicator. Not needed if consuming
+   * `Status` separate to `Avatar`.
+   */
+  status?: StatusType;
+}
+
+export declare type StatusType =
+  | ('approved' | 'declined' | 'locked')
+  | ReactNode;
+
+export {};
+```

package/types/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/types.js",
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/types.d.ts"
 }