@atlaskit/avatar-group 8.5.14 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/avatar-group
 
+## 9.0.1
+
+### Patch Changes
+
+- [`45ebe7af434`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ebe7af434) - Moved to using declarative entrypoints internally. Public API is unchanged.
+
+## 9.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
+
+- [`1276a8179ad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1276a8179ad) - [ux] DSP-4535: Fix wrongly used token.
+- Updated dependencies
+
+## 8.5.15
+
+### Patch Changes
+
+- [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
+
 ## 8.5.14
 
 ### Patch Changes

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

@@ -39,7 +39,7 @@ var buttonActiveStyles = (0, _core.css)({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
-    boxShadow: "0 0 0 ".concat(_avatar.BORDER_WIDTH, "px ").concat("var(--ds-text-selected, ".concat(_colors.B300, ")")),
+    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, ")")
   }
@@ -73,7 +73,7 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "var(--ds-border-inverse, ".concat(_colors.N0, ")") : _ref$borderColor,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$count = _ref.count,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "8.5.14",
+	"version": "9.0.1",
 	"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, background, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
+import { B300, B400, B50, N0, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
 const FONT_SIZE = {
   xsmall: '10px',
   small: '10px',
@@ -17,7 +17,7 @@ const buttonActiveStyles = css({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&&': {
     backgroundColor: `var(--ds-background-selected, ${B50})`,
-    boxShadow: `0 0 0 ${BORDER_WIDTH}px ${`var(--ds-text-selected, ${B300})`}`,
+    boxShadow: `0 0 0 ${BORDER_WIDTH}px ${`var(--ds-border-selected, ${B300})`}`,
     color: `var(--ds-text-selected, ${B400})`,
     transform: `scale(${ACTIVE_SCALE_FACTOR})`
   }
@@ -49,7 +49,7 @@ const buttonStyles = css({
 const MAX_DISPLAY_COUNT = 99;
 const MoreIndicator = /*#__PURE__*/forwardRef(({
   appearance = 'circle',
-  borderColor = `var(--ds-surface-overlay, ${background()})`,
+  borderColor = `var(--ds-border-inverse, ${N0})`,
   size = 'medium',
   count = 0,
   testId,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "8.5.14",
+	"version": "9.0.1",
 	"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, background, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
+import { B300, B400, B50, N0, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
 var FONT_SIZE = {
   xsmall: '10px',
   small: '10px',
@@ -19,7 +19,7 @@ var buttonActiveStyles = css({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
-    boxShadow: "0 0 0 ".concat(BORDER_WIDTH, "px ").concat("var(--ds-text-selected, ".concat(B300, ")")),
+    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, ")")
   }
@@ -53,7 +53,7 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat(background(), ")") : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "var(--ds-border-inverse, ".concat(N0, ")") : _ref$borderColor,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$count = _ref.count,

package/dist/esm/version.json

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

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

@@ -78,16 +78,14 @@ export interface AvatarGroupProps {
      */
     isTooltipDisabled?: boolean;
     /**
-     * Text to be used as aria-label of avatar's list.
-     *
-     * 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.
+      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;
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "8.5.14",
+  "version": "9.0.1",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "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",
@@ -16,14 +16,17 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Avatar group"
+      "name": "Avatar group",
+      "category": "Components"
     }
   },
+  "af:exports": {
+    ".": "./src/index.tsx"
+  },
   "dependencies": {
-    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/menu": "^1.3.0",
     "@atlaskit/popup": "^1.3.0",
     "@atlaskit/theme": "^12.1.0",
@@ -66,6 +69,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,167 @@
+## API Report File for "@atlaskit/avatar-group"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import type { AnalyticsEvent } from '@atlaskit/analytics-next';
+import type { AvatarPropTypes } from '@atlaskit/avatar';
+import { ElementType } from 'react';
+import { MouseEventHandler } from 'react';
+import type { ReactNode } from 'react';
+import { SizeType } from '@atlaskit/avatar';
+
+/**
+ * __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;
+
+declare interface AvatarGroupItemProps {
+  avatar: AvatarProps;
+  isActive?: boolean;
+  isHover?: boolean;
+  index: number;
+  onAvatarClick?: onAvatarClickHandler;
+  testId?: string;
+}
+
+declare interface AvatarGroupOverrides {
+  AvatarGroupItem?: {
+    render?: (
+      Component: ElementType<AvatarGroupItemProps>,
+      props: AvatarGroupItemProps,
+      index: number,
+    ) => ReactNode;
+  };
+  Avatar?: {
+    render?: (
+      Component: ElementType<AvatarProps>,
+      props: AvatarProps,
+      index: number,
+    ) => ReactNode;
+  };
+}
+
+export declare 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;
+}
+
+export declare type AvatarProps = AvatarPropTypes & {
+  name: string;
+  enableTooltip?: boolean;
+  key?: string | number;
+};
+
+declare type onAvatarClickHandler = (
+  event: React.MouseEvent,
+  analyticsEvent: AnalyticsEvent | undefined,
+  index: number,
+) => void;
+
+export {};
+```