@atlaskit/avatar 21.3.4 → 21.3.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar
 
+## 21.3.6
+
+### Patch Changes
+
+- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+
+## 21.3.5
+
+### Patch Changes
+
+- [`342bd17ba74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/342bd17ba74) - Fix presence and status props being expanded to all strings instead of the allowed values.
+
 ## 21.3.4
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -22,7 +22,7 @@ var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = 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 = "21.3.4";
+var packageVersion = "21.3.6";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -166,13 +166,13 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   }), isValidIconSize && presence && !status && (0, _react2.jsx)(_Presence.PresenceWrapper, {
     appearance: appearance,
     size: size,
-    presence: !customPresenceNode && presence,
+    presence: typeof presence === 'string' ? presence : undefined,
     testId: testId
   }, customPresenceNode), isValidIconSize && status && (0, _react2.jsx)(_Status.StatusWrapper, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,
-    status: !customStatusNode && status,
+    status: typeof status === 'string' ? status : undefined,
     testId: testId
   }, customStatusNode));
 });

package/dist/cjs/AvatarItem.js

@@ -24,14 +24,14 @@ var avatarItemStyles = (0, _react2.css)({
   maxWidth: '100%',
   paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   lineHeight: '1.4'
 });
 var getStyles = function getStyles(css, _ref) {
   var backgroundColor = _ref.backgroundColor,
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
-  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @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: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), ";\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(_colors.B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };

package/dist/cjs/IconWrapper.js

@@ -17,7 +17,7 @@ var iconWrapperStyles = (0, _react.css)({
   height: '100%',
   alignItems: 'center',
   alignContent: 'center',
-  borderRadius: '50%',
+  borderRadius: "var(--ds-border-radius-circle, 50%)",
   overflow: 'hidden'
 });
 

package/dist/cjs/Presence.js

@@ -14,8 +14,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
-// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
-
 var BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
   fill: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
   cx: "4",
@@ -108,7 +106,7 @@ var PresenceWrapper = function PresenceWrapper(_ref2) {
     }
   }, /*#__PURE__*/_react.default.createElement(AvatarPresence, {
     borderColor: borderColor,
-    presence: !children && presence
+    presence: !children ? presence : undefined
   }, children));
 };
 exports.PresenceWrapper = PresenceWrapper;

package/dist/cjs/Skeleton.js

@@ -32,11 +32,12 @@ var radiusStyles = Object.entries(_constants.AVATAR_RADIUS).reduce(function (sty
     key = _ref4[0],
     size = _ref4[1];
   return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     borderRadius: "".concat(size, "px")
   })));
 }, {});
 var defaultRadiusStyles = (0, _react.css)({
-  borderRadius: '50%'
+  borderRadius: "var(--ds-border-radius-circle, 50%)"
 });
 var strongOpacityStyles = (0, _react.css)({
   opacity: 0.3

package/dist/cjs/Status.js

@@ -14,8 +14,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
-// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
-
 var ApprovedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
   cx: "4",
@@ -105,7 +103,7 @@ var StatusWrapper = function StatusWrapper(_ref2) {
     }
   }, /*#__PURE__*/_react.default.createElement(AvatarStatus, {
     borderColor: borderColor,
-    status: !children && status
+    status: !children ? status : undefined
   }, children));
 };
 exports.StatusWrapper = StatusWrapper;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.4",
+	"version": "21.3.6",
 	"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 = "21.3.4";
+const packageVersion = "21.3.6";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -246,13 +246,13 @@ const Avatar = /*#__PURE__*/forwardRef(({
   }), isValidIconSize && presence && !status && jsx(PresenceWrapper, {
     appearance: appearance,
     size: size,
-    presence: !customPresenceNode && presence,
+    presence: typeof presence === 'string' ? presence : undefined,
     testId: testId
   }, customPresenceNode), isValidIconSize && status && jsx(StatusWrapper, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,
-    status: !customStatusNode && status,
+    status: typeof status === 'string' ? status : undefined,
     testId: testId
   }, customStatusNode));
 });

package/dist/es2019/AvatarItem.js

@@ -12,7 +12,7 @@ const avatarItemStyles = css({
   maxWidth: '100%',
   paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   lineHeight: '1.4'
 });
 const getStyles = (css, {
@@ -20,7 +20,7 @@ const getStyles = (css, {
   isInteractive,
   isDisabled
 }) =>
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
 css`
     align-items: center;
     background-color: ${backgroundColor};

package/dist/es2019/IconWrapper.js

@@ -11,7 +11,7 @@ const iconWrapperStyles = css({
   height: '100%',
   alignItems: 'center',
   alignContent: 'center',
-  borderRadius: '50%',
+  borderRadius: "var(--ds-border-radius-circle, 50%)",
   overflow: 'hidden'
 });
 

package/dist/es2019/Presence.js

@@ -3,9 +3,6 @@ import React, { Fragment } from 'react';
 import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
-
-// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
-
 const BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: `var(--ds-icon-danger, ${R300})`,
   cx: "4",
@@ -97,6 +94,6 @@ export const PresenceWrapper = ({
     }
   }, /*#__PURE__*/React.createElement(AvatarPresence, {
     borderColor: borderColor,
-    presence: !children && presence
+    presence: !children ? presence : undefined
   }, children));
 };

package/dist/es2019/Skeleton.js

@@ -23,12 +23,13 @@ const radiusStyles = Object.entries(AVATAR_RADIUS).reduce((styles, [key, size])
   return {
     ...styles,
     [key]: css({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
       borderRadius: `${size}px`
     })
   };
 }, {});
 const defaultRadiusStyles = css({
-  borderRadius: '50%'
+  borderRadius: "var(--ds-border-radius-circle, 50%)"
 });
 const strongOpacityStyles = css({
   opacity: 0.3

package/dist/es2019/Status.js

@@ -3,9 +3,6 @@ import React, { Fragment } from 'react';
 import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
-
-// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
-
 const ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: `var(--ds-icon-success, ${G400})`,
   cx: "4",
@@ -94,6 +91,6 @@ export const StatusWrapper = ({
     }
   }, /*#__PURE__*/React.createElement(AvatarStatus, {
     borderColor: borderColor,
-    status: !children && status
+    status: !children ? status : undefined
   }, children));
 };

package/dist/es2019/version.json

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

package/dist/esm/Avatar.js

@@ -15,7 +15,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.4";
+var packageVersion = "21.3.6";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -159,13 +159,13 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }), isValidIconSize && presence && !status && jsx(PresenceWrapper, {
     appearance: appearance,
     size: size,
-    presence: !customPresenceNode && presence,
+    presence: typeof presence === 'string' ? presence : undefined,
     testId: testId
   }, customPresenceNode), isValidIconSize && status && jsx(StatusWrapper, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,
-    status: !customStatusNode && status,
+    status: typeof status === 'string' ? status : undefined,
     testId: testId
   }, customStatusNode));
 });

package/dist/esm/AvatarItem.js

@@ -17,14 +17,14 @@ var avatarItemStyles = css({
   maxWidth: '100%',
   paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   lineHeight: '1.4'
 });
 var getStyles = function getStyles(css, _ref) {
   var backgroundColor = _ref.backgroundColor,
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
-  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @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: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), ";\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(B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };

package/dist/esm/IconWrapper.js

@@ -11,7 +11,7 @@ var iconWrapperStyles = css({
   height: '100%',
   alignItems: 'center',
   alignContent: 'center',
-  borderRadius: '50%',
+  borderRadius: "var(--ds-border-radius-circle, 50%)",
   overflow: 'hidden'
 });
 

package/dist/esm/Presence.js

@@ -3,9 +3,6 @@ import React, { Fragment } from 'react';
 import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
-
-// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
-
 var BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-danger, ".concat(R300, ")"),
   cx: "4",
@@ -97,6 +94,6 @@ export var PresenceWrapper = function PresenceWrapper(_ref2) {
     }
   }, /*#__PURE__*/React.createElement(AvatarPresence, {
     borderColor: borderColor,
-    presence: !children && presence
+    presence: !children ? presence : undefined
   }, children));
 };

package/dist/esm/Skeleton.js

@@ -28,11 +28,12 @@ var radiusStyles = Object.entries(AVATAR_RADIUS).reduce(function (styles, _ref3)
     key = _ref4[0],
     size = _ref4[1];
   return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     borderRadius: "".concat(size, "px")
   })));
 }, {});
 var defaultRadiusStyles = css({
-  borderRadius: '50%'
+  borderRadius: "var(--ds-border-radius-circle, 50%)"
 });
 var strongOpacityStyles = css({
   opacity: 0.3

package/dist/esm/Status.js

@@ -3,9 +3,6 @@ import React, { Fragment } from 'react';
 import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
-
-// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
-
 var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(G400, ")"),
   cx: "4",
@@ -94,6 +91,6 @@ export var StatusWrapper = function StatusWrapper(_ref2) {
     }
   }, /*#__PURE__*/React.createElement(AvatarStatus, {
     borderColor: borderColor,
-    status: !children && status
+    status: !children ? status : undefined
   }, children));
 };

package/dist/esm/version.json

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

package/dist/types/Avatar.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { MouseEventHandler, ReactNode, Ref } from 'react';
-import { AppearanceType, AvatarClickEventHandler, SizeType } from './types';
+import { AppearanceType, AvatarClickEventHandler, Presence, SizeType, Status } from './types';
 export interface CustomAvatarProps {
     /**
      * This is used in render props so is okay to be defined.
@@ -54,7 +54,7 @@ export interface AvatarPropTypes {
      * 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;
+    presence?: Presence | Omit<ReactNode, string> | (string & {}) | null;
     /**
      * Defines the size of the avatar
      */
@@ -67,7 +67,7 @@ export interface AvatarPropTypes {
      * Indicates contextual information by showing a small icon on the avatar.
      * Refer to status values on the Status component.
      */
-    status?: ('approved' | 'declined' | 'locked') | ReactNode;
+    status?: Status | Omit<ReactNode, string> | (string & {}) | null;
     /**
      * The index of where this avatar is in the group `stack`.
      */

package/dist/types/Presence.d.ts

@@ -1,6 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { AppearanceType, IndicatorSizeType } from './types';
-export type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode;
+import { AppearanceType, IndicatorSizeType, Presence } from './types';
 export interface PresenceProps {
     /**
      * Used to override the default border color of the presence indicator.
@@ -15,7 +14,7 @@ export interface PresenceProps {
     /**
      * The type of presence indicator to show
      */
-    presence?: PresenceType;
+    presence?: Presence;
     /**
      * Test Id
      */

package/dist/types/Status.d.ts

@@ -1,6 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { AppearanceType, IndicatorSizeType } from './types';
-export type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
+import { AppearanceType, IndicatorSizeType, Status } from './types';
 export interface StatusProps {
     /**
      * Override the default border color of the status indicator. This accepts
@@ -16,7 +15,7 @@ export interface StatusProps {
      * Content to use as a custom status indicator. Not needed if consuming
      * `Status` separate to `Avatar`.
      */
-    status?: StatusType;
+    status?: Status;
 }
 /**
  * __Avatar status__

package/dist/types/entry-points/presence.d.ts

@@ -1,2 +1,3 @@
 export { default } from '../Presence';
-export type { PresenceType, PresenceProps } from '../Presence';
+export type { PresenceProps } from '../Presence';
+export type { Presence as PresenceType } from '../types';

package/dist/types/entry-points/status.d.ts

@@ -1,2 +1,3 @@
 export { default } from '../Status';
-export type { StatusType, StatusProps } from '../Status';
+export type { StatusProps } from '../Status';
+export type { Status as StatusType } from '../types';

package/dist/types/index.d.ts

@@ -3,10 +3,10 @@ export type { AvatarPropTypes, CustomAvatarProps } from './Avatar';
 export { default as AvatarItem } from './AvatarItem';
 export type { AvatarItemProps, CustomAvatarItemProps } from './AvatarItem';
 export { default as Presence } from './Presence';
-export type { PresenceProps, PresenceType } from './Presence';
+export type { PresenceProps } from './Presence';
 export { default as Status } from './Status';
-export type { StatusProps, StatusType } from './Status';
+export type { StatusProps } from './Status';
 export { default as Skeleton } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
 export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR, } from './constants';
-export type { AvatarClickEventHandler, AppearanceType, SizeType, IndicatorSizeType, } from './types';
+export type { AvatarClickEventHandler, AppearanceType, SizeType, Presence as PresenceType, Status as StatusType, IndicatorSizeType, } from './types';

package/dist/types/types.d.ts

@@ -5,3 +5,5 @@ export type AppearanceType = 'circle' | 'square';
 export type SizeType = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
 export type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge';
 export type AvatarClickEventHandler = (event: React.MouseEvent, analyticsEvent?: UIAnalyticsEvent) => void;
+export type Status = 'approved' | 'declined' | 'locked';
+export type Presence = 'online' | 'busy' | 'focus' | 'offline';

package/dist/types-ts4.5/Avatar.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { MouseEventHandler, ReactNode, Ref } from 'react';
-import { AppearanceType, AvatarClickEventHandler, SizeType } from './types';
+import { AppearanceType, AvatarClickEventHandler, Presence, SizeType, Status } from './types';
 export interface CustomAvatarProps {
     /**
      * This is used in render props so is okay to be defined.
@@ -54,7 +54,7 @@ export interface AvatarPropTypes {
      * 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;
+    presence?: Presence | Omit<ReactNode, string> | (string & {}) | null;
     /**
      * Defines the size of the avatar
      */
@@ -67,7 +67,7 @@ export interface AvatarPropTypes {
      * Indicates contextual information by showing a small icon on the avatar.
      * Refer to status values on the Status component.
      */
-    status?: ('approved' | 'declined' | 'locked') | ReactNode;
+    status?: Status | Omit<ReactNode, string> | (string & {}) | null;
     /**
      * The index of where this avatar is in the group `stack`.
      */

package/dist/types-ts4.5/Presence.d.ts

@@ -1,6 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { AppearanceType, IndicatorSizeType } from './types';
-export type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode;
+import { AppearanceType, IndicatorSizeType, Presence } from './types';
 export interface PresenceProps {
     /**
      * Used to override the default border color of the presence indicator.
@@ -15,7 +14,7 @@ export interface PresenceProps {
     /**
      * The type of presence indicator to show
      */
-    presence?: PresenceType;
+    presence?: Presence;
     /**
      * Test Id
      */

package/dist/types-ts4.5/Status.d.ts

@@ -1,6 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { AppearanceType, IndicatorSizeType } from './types';
-export type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
+import { AppearanceType, IndicatorSizeType, Status } from './types';
 export interface StatusProps {
     /**
      * Override the default border color of the status indicator. This accepts
@@ -16,7 +15,7 @@ export interface StatusProps {
      * Content to use as a custom status indicator. Not needed if consuming
      * `Status` separate to `Avatar`.
      */
-    status?: StatusType;
+    status?: Status;
 }
 /**
  * __Avatar status__

package/dist/types-ts4.5/entry-points/presence.d.ts

@@ -1,2 +1,3 @@
 export { default } from '../Presence';
-export type { PresenceType, PresenceProps } from '../Presence';
+export type { PresenceProps } from '../Presence';
+export type { Presence as PresenceType } from '../types';

package/dist/types-ts4.5/entry-points/status.d.ts

@@ -1,2 +1,3 @@
 export { default } from '../Status';
-export type { StatusType, StatusProps } from '../Status';
+export type { StatusProps } from '../Status';
+export type { Status as StatusType } from '../types';

package/dist/types-ts4.5/index.d.ts

@@ -3,10 +3,10 @@ export type { AvatarPropTypes, CustomAvatarProps } from './Avatar';
 export { default as AvatarItem } from './AvatarItem';
 export type { AvatarItemProps, CustomAvatarItemProps } from './AvatarItem';
 export { default as Presence } from './Presence';
-export type { PresenceProps, PresenceType } from './Presence';
+export type { PresenceProps } from './Presence';
 export { default as Status } from './Status';
-export type { StatusProps, StatusType } from './Status';
+export type { StatusProps } from './Status';
 export { default as Skeleton } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
 export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR, } from './constants';
-export type { AvatarClickEventHandler, AppearanceType, SizeType, IndicatorSizeType, } from './types';
+export type { AvatarClickEventHandler, AppearanceType, SizeType, Presence as PresenceType, Status as StatusType, IndicatorSizeType, } from './types';

package/dist/types-ts4.5/types.d.ts

@@ -5,3 +5,5 @@ export type AppearanceType = 'circle' | 'square';
 export type SizeType = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
 export type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge';
 export type AvatarClickEventHandler = (event: React.MouseEvent, analyticsEvent?: UIAnalyticsEvent) => void;
+export type Status = 'approved' | 'declined' | 'locked';
+export type Presence = 'online' | 'busy' | 'focus' | 'offline';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.3.4",
+  "version": "21.3.6",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0"
@@ -52,7 +52,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",

package/report.api.md

@@ -81,11 +81,11 @@ export interface AvatarPropTypes {
   label?: string;
   name?: string;
   onClick?: AvatarClickEventHandler;
-  presence?: ('busy' | 'focus' | 'offline' | 'online') | ReactNode;
+  presence?: (string & {}) | Omit<ReactNode, string> | PresenceType | null;
   size?: SizeType;
   src?: string;
   stackIndex?: number;
-  status?: ('approved' | 'declined' | 'locked') | ReactNode;
+  status?: (string & {}) | Omit<ReactNode, string> | StatusType | null;
   tabIndex?: number;
   target?: '_blank' | '_parent' | '_self' | '_top';
   testId?: string;
@@ -150,7 +150,7 @@ export interface PresenceProps {
 }
 
 // @public (undocumented)
-export type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode;
+export type PresenceType = 'busy' | 'focus' | 'offline' | 'online';
 
 // @public (undocumented)
 export type SizeType =
@@ -187,7 +187,7 @@ export interface StatusProps {
 }
 
 // @public (undocumented)
-export type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
+export type StatusType = 'approved' | 'declined' | 'locked';
 
 // (No @packageDocumentation comment for this package)
 ```

package/tmp/api-report-tmp.d.ts

@@ -63,11 +63,11 @@ export interface AvatarPropTypes {
     label?: string;
     name?: string;
     onClick?: AvatarClickEventHandler;
-    presence?: ('busy' | 'focus' | 'offline' | 'online') | ReactNode;
+    presence?: (string & {}) | Omit<ReactNode, string> | PresenceType | null;
     size?: SizeType;
     src?: string;
     stackIndex?: number;
-    status?: ('approved' | 'declined' | 'locked') | ReactNode;
+    status?: (string & {}) | Omit<ReactNode, string> | StatusType | null;
     tabIndex?: number;
     target?: '_blank' | '_parent' | '_self' | '_top';
     testId?: string;
@@ -132,7 +132,7 @@ export interface PresenceProps {
 }
 
 // @public (undocumented)
-export type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode;
+export type PresenceType = 'busy' | 'focus' | 'offline' | 'online';
 
 // @public (undocumented)
 export type SizeType = 'large' | 'medium' | 'small' | 'xlarge' | 'xsmall' | 'xxlarge';
@@ -163,7 +163,7 @@ export interface StatusProps {
 }
 
 // @public (undocumented)
-export type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
+export type StatusType = 'approved' | 'declined' | 'locked';
 
 // (No @packageDocumentation comment for this package)