@atlaskit/avatar-group 9.0.2 → 9.0.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/avatar-group
 
+## 9.0.4
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 9.0.3
+
+### Patch Changes
+
+- [`4bc286406f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4bc286406f2) - [ux] Update more indicator icon to use new design tokens and remove the unnecessary use of the :after element with regards to the consumption of the Avatar component.
+- Updated dependencies
+
 ## 9.0.2
 
 ### Patch Changes

package/dist/cjs/components/more-indicator.js

@@ -41,7 +41,15 @@ var buttonActiveStyles = (0, _core.css)({
     backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
     boxShadow: "0 0 0 ".concat(_avatar.BORDER_WIDTH, "px ", "var(--ds-border-selected, ".concat(_colors.B300, ")")),
     color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
-    transform: "scale(".concat(_avatar.ACTIVE_SCALE_FACTOR, ")")
+    transform: "scale(".concat(_avatar.ACTIVE_SCALE_FACTOR, ")"),
+    '&:hover': {
+      backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.N30, ")"),
+      color: "var(--ds-text-selected, ".concat(_colors.N500, ")")
+    },
+    '&:active': {
+      backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B50, ")"),
+      color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
+    }
   }
 });
 var buttonStyles = (0, _core.css)({
@@ -53,18 +61,14 @@ var buttonStyles = (0, _core.css)({
     fontWeight: 500,
     '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30, ")"),
-      color: "var(--ds-text, ".concat(_colors.N500, ")"),
-      '&:after': {
-        backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
-        opacity: 1
-      }
+      color: "var(--ds-text, ".concat(_colors.N500, ")")
     },
     '&:active': {
       backgroundColor: "var(--ds-background-neutral-pressed, ".concat(_colors.B50, ")"),
-      color: "var(--ds-text, ".concat(_colors.B400, ")"),
-      '&:after': {
-        backgroundColor: 'transparent'
-      }
+      color: "var(--ds-text, ".concat(_colors.B400, ")")
+    },
+    '&:after': {
+      display: 'none'
     }
   }
 });

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.0.2",
+	"version": "9.0.4",
 	"sideEffects": false
 }

package/dist/es2019/components/more-indicator.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/core';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
-import { B300, B400, B50, N0, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
+import { B300, B400, B50, N0, N20, N30, N500 } from '@atlaskit/theme/colors';
 const FONT_SIZE = {
   xsmall: '10px',
   small: '10px',
@@ -19,7 +19,15 @@ const buttonActiveStyles = css({
     backgroundColor: `var(--ds-background-selected, ${B50})`,
     boxShadow: `0 0 0 ${BORDER_WIDTH}px ${`var(--ds-border-selected, ${B300})`}`,
     color: `var(--ds-text-selected, ${B400})`,
-    transform: `scale(${ACTIVE_SCALE_FACTOR})`
+    transform: `scale(${ACTIVE_SCALE_FACTOR})`,
+    '&:hover': {
+      backgroundColor: `var(--ds-background-selected-hovered, ${N30})`,
+      color: `var(--ds-text-selected, ${N500})`
+    },
+    '&:active': {
+      backgroundColor: `var(--ds-background-selected-pressed, ${B50})`,
+      color: `var(--ds-text-selected, ${B400})`
+    }
   }
 });
 const buttonStyles = css({
@@ -31,18 +39,14 @@ const buttonStyles = css({
     fontWeight: 500,
     '&:hover': {
       backgroundColor: `var(--ds-background-neutral-hovered, ${N30})`,
-      color: `var(--ds-text, ${N500})`,
-      '&:after': {
-        backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`,
-        opacity: 1
-      }
+      color: `var(--ds-text, ${N500})`
     },
     '&:active': {
       backgroundColor: `var(--ds-background-neutral-pressed, ${B50})`,
-      color: `var(--ds-text, ${B400})`,
-      '&:after': {
-        backgroundColor: 'transparent'
-      }
+      color: `var(--ds-text, ${B400})`
+    },
+    '&:after': {
+      display: 'none'
     }
   }
 });

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.0.2",
+	"version": "9.0.4",
 	"sideEffects": false
 }

package/dist/esm/components/more-indicator.js

@@ -6,7 +6,7 @@ var _excluded = ["testId", "className", "ref"];
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/core';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
-import { B300, B400, B50, N0, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
+import { B300, B400, B50, N0, N20, N30, N500 } from '@atlaskit/theme/colors';
 var FONT_SIZE = {
   xsmall: '10px',
   small: '10px',
@@ -21,7 +21,15 @@ var buttonActiveStyles = css({
     backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
     boxShadow: "0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-selected, ".concat(B300, ")")),
     color: "var(--ds-text-selected, ".concat(B400, ")"),
-    transform: "scale(".concat(ACTIVE_SCALE_FACTOR, ")")
+    transform: "scale(".concat(ACTIVE_SCALE_FACTOR, ")"),
+    '&:hover': {
+      backgroundColor: "var(--ds-background-selected-hovered, ".concat(N30, ")"),
+      color: "var(--ds-text-selected, ".concat(N500, ")")
+    },
+    '&:active': {
+      backgroundColor: "var(--ds-background-selected-pressed, ".concat(B50, ")"),
+      color: "var(--ds-text-selected, ".concat(B400, ")")
+    }
   }
 });
 var buttonStyles = css({
@@ -33,18 +41,14 @@ var buttonStyles = css({
     fontWeight: 500,
     '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30, ")"),
-      color: "var(--ds-text, ".concat(N500, ")"),
-      '&:after': {
-        backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
-        opacity: 1
-      }
+      color: "var(--ds-text, ".concat(N500, ")")
     },
     '&:active': {
       backgroundColor: "var(--ds-background-neutral-pressed, ".concat(B50, ")"),
-      color: "var(--ds-text, ".concat(B400, ")"),
-      '&:after': {
-        backgroundColor: 'transparent'
-      }
+      color: "var(--ds-text, ".concat(B400, ")")
+    },
+    '&:after': {
+      display: 'none'
     }
   }
 });

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.0.2",
+	"version": "9.0.4",
 	"sideEffects": false
 }

package/dist/types-ts4.0/components/avatar-group-item.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { AvatarProps, onAvatarClickHandler } from './types';
+export interface AvatarGroupItemProps {
+    avatar: AvatarProps;
+    isActive?: boolean;
+    isHover?: boolean;
+    index: number;
+    onAvatarClick?: onAvatarClickHandler;
+    testId?: string;
+}
+declare const AvatarGroupItem: FC<AvatarGroupItemProps>;
+export default AvatarGroupItem;

package/dist/types-ts4.0/components/avatar-group.d.ts

@@ -0,0 +1,102 @@
+/** @jsx jsx */
+import { ElementType, MouseEventHandler } from 'react';
+import { SizeType } from '@atlaskit/avatar';
+import { AvatarGroupOverrides, AvatarProps, onAvatarClickHandler } from './types';
+export interface AvatarGroupProps {
+    /**
+     * Indicates the layout of the avatar-group.
+     * Avatars will either be overlapped in a stack, or
+     * laid out in an even grid formation
+     * Defaults to "stack".
+     */
+    appearance?: 'grid' | 'stack';
+    /**
+     * Component used to render each avatar
+     */
+    avatar?: ElementType<AvatarProps>;
+    /**
+     * The maximum number of avatars allowed in the list.
+     * Defaults to 5 when displayed as a stack,
+     * and 11 when displayed as a grid.
+     */
+    maxCount?: number;
+    /**
+     * Defines the size of the avatar.
+     * Defaults to "medium".
+     */
+    size?: SizeType;
+    /**
+     * Typically the background color that the avatar is presented on.
+     * Accepts any color argument that the CSS border-color property accepts.
+     */
+    borderColor?: string;
+    /**
+     * Array of avatar data passed to each `avatar` component.
+     * These props will be spread on to the component passed into avatar.
+     */
+    data: Array<AvatarProps>;
+    /**
+     * Handle the click event on the avatar item.
+     * Note that if an onClick prop is provided as part of avatar data, it will take precedence over onAvatarClick.
+     */
+    onAvatarClick?: onAvatarClickHandler;
+    /**
+     * Take control of the click event on the more indicator.
+     * This will cancel the default dropdown behavior.
+     */
+    onMoreClick?: MouseEventHandler;
+    /**
+     * Provide additional props to the MoreButton.
+     * Example use cases: altering tab order by providing tabIndex;
+     * adding onClick behaviour without losing the default dropdown
+     */
+    showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * Element the overflow popup should be attached to.
+     * Defaults to "viewport".
+     */
+    boundariesElement?: 'viewport' | 'window' | 'scrollParent';
+    /**
+     * 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.
+     */
+    /**
+     * Will set these elements when defined:
+     * - Container element - `{testId}--avatar-group`
+     * - Avatar items - `{testId}--avatar-{index}`
+     * - Overflow menu button - `{testId}--overflow-menu--trigger`
+     * - Overflow menu content - `{testId}--overflow-menu--content`
+     */
+    testId?: string;
+    /**
+     * Custom overrides for the composed components.
+     */
+    overrides?: AvatarGroupOverrides;
+    /**
+     * Disables tooltips
+     */
+    isTooltipDisabled?: boolean;
+    /**
+      Text to be used as aria-label for the list of avatars.
+      Screen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.
+  
+      The label should describe the `AvatarGroup`'s entities, for instance:
+      - `label="team members"`, screen reader announcement would be `list team members, X items`
+      - `label="reviewers"` screen reader announcement would be `list reviewers, X items`
+  
+      When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
+     */
+    label?: string;
+}
+/**
+ * __Avatar group__
+ *
+ * An avatar group displays a number of avatars grouped together in a stack or grid.
+ *
+ * - [Examples](https://atlassian.design/components/avatar-group/examples)
+ * - [Code](https://atlassian.design/components/avatar-group/code)
+ * - [Usage](https://atlassian.design/components/avatar-group/usage)
+ */
+declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, }: AvatarGroupProps) => JSX.Element;
+export default AvatarGroup;

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

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+declare const Grid: FC<{
+    children: ReactNode;
+    testId?: string;
+    'aria-label': string;
+}>;
+export default Grid;

package/dist/types-ts4.0/components/more-indicator.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AvatarClickEventHandler, AvatarPropTypes } from '@atlaskit/avatar';
+export interface MoreIndicatorProps extends AvatarPropTypes {
+    count: number;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
+    'aria-haspopup'?: boolean;
+    buttonProps: Partial<React.HTMLAttributes<HTMLElement>>;
+    onClick: AvatarClickEventHandler;
+    isActive: boolean;
+}
+declare const MoreIndicator: import("react").ForwardRefExoticComponent<MoreIndicatorProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default MoreIndicator;

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

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+declare const Stack: FC<{
+    children: ReactNode;
+    testId?: string;
+    'aria-label': string;
+}>;
+export default Stack;

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

@@ -0,0 +1,23 @@
+import type { ElementType, ReactNode } from 'react';
+import type { Interpolation } from '@emotion/core';
+import type { AnalyticsEvent } from '@atlaskit/analytics-next';
+import type { AvatarPropTypes } from '@atlaskit/avatar';
+import type { AvatarGroupItemProps } from './avatar-group-item';
+export declare type DeepRequired<T> = {
+    [P in keyof T]-?: Required<T[P]>;
+};
+export declare type AvatarProps = AvatarPropTypes & {
+    name: string;
+    enableTooltip?: boolean;
+    key?: string | number;
+};
+export interface AvatarGroupOverrides {
+    AvatarGroupItem?: {
+        render?: (Component: ElementType<AvatarGroupItemProps>, props: AvatarGroupItemProps, index: number) => ReactNode;
+    };
+    Avatar?: {
+        render?: (Component: ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
+    };
+}
+export declare type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
+export declare type CssCallback = (template: TemplateStringsArray, ...args: Array<Interpolation>) => string;

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

@@ -0,0 +1,2 @@
+import { AvatarProps } from './types';
+export declare const composeUniqueKey: (props: AvatarProps, index: number) => string | number;

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

@@ -0,0 +1,3 @@
+export { default } from './components/avatar-group';
+export type { AvatarGroupProps } from './components/avatar-group';
+export type { AvatarProps } from './components/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "9.0.2",
+  "version": "9.0.4",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "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.tsx",
   "atlassian": {
@@ -29,7 +36,7 @@
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/menu": "^1.3.0",
     "@atlaskit/popup": "^1.4.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
@@ -43,20 +50,21 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.1.1",
     "@atlaskit/form": "^8.4.5",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/modal-dialog": "^12.2.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/modal-dialog": "^12.3.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.4.0",
+    "@atlaskit/toggle": "^12.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",
     "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [