@atlaskit/avatar 21.0.1 → 21.0.2

package/Avatar/package.json

@@ -4,5 +4,12 @@
   "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"
+  "types": "../dist/types/entry-points/avatar.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/avatar.d.ts"
+      ]
+    }
+  }
 }

package/AvatarItem/package.json

@@ -4,5 +4,12 @@
   "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"
+  "types": "../dist/types/entry-points/avatar-item.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/avatar-item.d.ts"
+      ]
+    }
+  }
 }

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/avatar
 
+## 21.0.2
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 21.0.1
 
 ### Patch Changes

package/Presence/package.json

@@ -4,5 +4,12 @@
   "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"
+  "types": "../dist/types/entry-points/presence.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/presence.d.ts"
+      ]
+    }
+  }
 }

package/Skeleton/package.json

@@ -4,5 +4,12 @@
   "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"
+  "types": "../dist/types/entry-points/skeleton.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/skeleton.d.ts"
+      ]
+    }
+  }
 }

package/Status/package.json

@@ -4,5 +4,12 @@
   "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"
+  "types": "../dist/types/entry-points/status.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/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 = "21.0.1";
+var packageVersion = "21.0.2";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.0.1",
+	"version": "21.0.2",
 	"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.0.1";
+const packageVersion = "21.0.2";
 
 const getStyles = (css, {
   size,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.0.1",
+	"version": "21.0.2",
 	"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 = "21.0.1";
+var packageVersion = "21.0.2";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,

package/dist/esm/version.json

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

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

@@ -0,0 +1,106 @@
+/** @jsx jsx */
+import { MouseEventHandler, ReactNode, Ref } from 'react';
+import { AppearanceType, AvatarClickEventHandler, SizeType } from './types';
+export 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 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>;
+}
+/**
+ * __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: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
+export default Avatar;

package/dist/types-ts4.0/AvatarImage.d.ts

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { AppearanceType, SizeType } from './types';
+interface AvatarImageProps {
+    appearance: AppearanceType;
+    size: SizeType;
+    alt?: string;
+    src?: string;
+    testId?: string;
+}
+export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
+export declare const ICON_COLOR: "var(--ds-icon-subtle)";
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+declare const AvatarImage: FC<AvatarImageProps>;
+export default AvatarImage;

package/dist/types-ts4.0/AvatarItem.d.ts

@@ -0,0 +1,79 @@
+/** @jsx jsx */
+import { MouseEventHandler, ReactNode, Ref } from 'react';
+import { AvatarClickEventHandler } from './types';
+export 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 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;
+}
+/**
+ * __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)
+ */
+declare const AvatarItem: import("react").ForwardRefExoticComponent<AvatarItemProps & import("react").RefAttributes<HTMLElement>>;
+export default AvatarItem;

package/dist/types-ts4.0/IconWrapper.d.ts

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+interface IconWrapperProps {
+    bgColor?: string;
+    children?: ReactNode;
+}
+/**
+ * __Icon wrapper__
+ *
+ * An icon wrapper is used internally only.
+ */
+declare const IconWrapper: FC<IconWrapperProps>;
+export default IconWrapper;

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

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from 'react';
+import { AppearanceType, IndicatorSizeType } from './types';
+export declare type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode;
+export 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;
+}
+/**
+ * __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)
+ */
+declare const AvatarPresence: FC<PresenceProps>;
+export default AvatarPresence;
+export interface PresenceWrapperProps extends PresenceProps {
+    appearance: AppearanceType;
+    size: IndicatorSizeType;
+    testId?: string;
+}
+/**
+ * __Presence wrapper__
+ *
+ * A presence wrapper is used internally to position presence ontop of the avatar.
+ */
+export declare const PresenceWrapper: FC<PresenceWrapperProps>;

package/dist/types-ts4.0/Skeleton.d.ts

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { AppearanceType, SizeType } from './types';
+export interface SkeletonProps {
+    appearance?: AppearanceType;
+    color?: string;
+    size?: SizeType;
+    weight?: 'normal' | 'strong';
+}
+/**
+ * __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)
+ */
+declare const Skeleton: FC<SkeletonProps>;
+export default Skeleton;

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

@@ -0,0 +1,42 @@
+import { FC, ReactNode } from 'react';
+import { AppearanceType, IndicatorSizeType } from './types';
+export declare type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
+export 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;
+}
+/**
+ * __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)
+ */
+declare const AvatarStatus: FC<StatusProps>;
+export default AvatarStatus;
+interface StatusWrapperProps extends StatusProps {
+    appearance: AppearanceType;
+    size: IndicatorSizeType;
+    children: ReactNode;
+    testId?: string;
+}
+/**
+ * Status wrapper**
+ *
+ * A status wrapper is used internally to position status ontop of the avatar.
+ */
+export declare const StatusWrapper: FC<StatusWrapperProps>;

package/dist/types-ts4.0/Text.d.ts

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+/**
+ * __Text__
+ *
+ * Text is used internally only.
+ */
+declare const Text: FC<{
+    isSecondary?: boolean;
+    children: ReactNode;
+    shouldTruncate: boolean;
+}>;
+export default Text;

package/dist/types-ts4.0/constants.d.ts

@@ -0,0 +1,7 @@
+import { AvatarSizeMap, IndicatorSizeType } from './types';
+export declare const AVATAR_SIZES: AvatarSizeMap;
+export declare const AVATAR_RADIUS: AvatarSizeMap;
+export declare const BORDER_WIDTH = 2;
+export declare const ACTIVE_SCALE_FACTOR = 0.9;
+export declare const ICON_SIZES: Record<IndicatorSizeType, number>;
+export declare const ICON_OFFSET: Record<IndicatorSizeType, number>;

package/dist/types-ts4.0/entry-points/avatar-item.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../AvatarItem';
+export type { AvatarItemProps, CustomAvatarItemProps } from '../AvatarItem';

package/dist/types-ts4.0/entry-points/avatar.d.ts

@@ -0,0 +1 @@
+export { default } from '../Avatar';

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

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

package/dist/types-ts4.0/entry-points/skeleton.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../Skeleton';
+export type { SkeletonProps } from '../Skeleton';

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

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

package/dist/types-ts4.0/entry-points/types.d.ts

@@ -0,0 +1 @@
+export type { AppearanceType, SizeType, IndicatorSizeType, AvatarClickEventHandler, } from '../types';

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

@@ -0,0 +1,12 @@
+export { default } from './Avatar';
+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 { default as Status } from './Status';
+export type { StatusProps, StatusType } 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';

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+export declare type AvatarSizeMap = Record<SizeType, number>;
+export declare type AppearanceType = 'circle' | 'square';
+export declare type SizeType = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+export declare type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge';
+export declare type AvatarClickEventHandler = (event: React.MouseEvent, analyticsEvent?: UIAnalyticsEvent) => void;

package/dist/types-ts4.0/utilities.d.ts

@@ -0,0 +1,11 @@
+import { MouseEventHandler } from 'react';
+export declare const getLinkProps: (href: string, target?: string | undefined) => {
+    href: string;
+    rel: string | null;
+    target: string | undefined;
+};
+export declare const getButtonProps: (onClick: MouseEventHandler) => {
+    type: string;
+    onClick: MouseEventHandler<Element>;
+};
+export declare const getCustomElement: (isDisabled?: boolean | undefined, href?: string | undefined, onClick?: MouseEventHandler<Element> | undefined) => "button" | "a" | "span";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.0.1",
+  "version": "21.0.2",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
@@ -34,7 +41,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
@@ -45,22 +52,23 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.1.1",
     "@atlaskit/field-base": "^15.0.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.4.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@emotion/styled": "^10.0.7",
-    "@testing-library/react": "^8.0.1",
+    "@emotion/styled": "^11.0.0",
+    "@testing-library/react": "^12.1.5",
     "@types/jscodeshift": "^0.11.0",
     "color-contrast-checker": "^1.5.0",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [

package/types/package.json

@@ -4,5 +4,12 @@
   "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"
+  "types": "../dist/types/entry-points/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/types.d.ts"
+      ]
+    }
+  }
 }