@atlaskit/avatar-group 9.4.4 → 9.4.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar-group
 
+## 9.4.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.4.5
+
+### Patch Changes
+
+- [#42577](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42577) [`d51b45b02fb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d51b45b02fb) - Add component to push model consumption in JFE
+
 ## 9.4.4
 
 ### Patch Changes

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

@@ -0,0 +1,12 @@
+import React 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: React.ForwardRefExoticComponent<AvatarGroupItemProps & React.RefAttributes<HTMLElement>>;
+export default AvatarGroupItem;

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

@@ -0,0 +1,110 @@
+/** @jsx jsx */
+import { ElementType, MouseEventHandler } from 'react';
+import { jsx } from '@emotion/react';
+import Avatar, { SizeType } from '@atlaskit/avatar';
+import { PositionType } from '@atlaskit/tooltip';
+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?: typeof 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;
+    /**
+     *
+     * Where the tooltip should appear relative to its target.
+     * Defaults to tooltip position "bottom".
+     */
+    tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
+    /**
+     * 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, tooltipPosition, }: AvatarGroupProps) => jsx.JSX.Element;
+export default AvatarGroup;

package/dist/types-ts4.5/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.5/components/internal/components/focus-manager.d.ts

@@ -0,0 +1,21 @@
+import React, { FC, ReactNode } from 'react';
+import { FocusableElement } from '../../types';
+/**
+ *
+ *
+ * Context provider which maintains the list of focusable elements and a method to
+ * register new menu items.
+ * This list drives the keyboard navgation of the menu.
+ *
+ */
+export declare const FocusManagerContext: React.Context<{
+    menuItemRefs: FocusableElement[];
+    registerRef: (ref: FocusableElement) => void;
+}>;
+/**
+ * Focus manager logic
+ */
+declare const FocusManager: FC<{
+    children: ReactNode;
+}>;
+export default FocusManager;

package/dist/types-ts4.5/components/internal/components/popup-avatar-group.d.ts

@@ -0,0 +1,7 @@
+import { jsx } from '@emotion/react';
+import { PopupAvatarGroupProps } from '../../types';
+/**
+ * It sets focus to the first avatar when popup is open.
+ */
+declare const PopupAvatarGroup: ({ maxWidth, minWidth, setInitialFocusRef, ...rest }: PopupAvatarGroupProps) => jsx.JSX.Element;
+export default PopupAvatarGroup;

package/dist/types-ts4.5/components/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FocusableElement } from '../../types';
+declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
+export default useRegisterItemWithFocusManager;

package/dist/types-ts4.5/components/internal/utiles/handle-focus.d.ts

@@ -0,0 +1,2 @@
+import { FocusableElement } from '../../types';
+export default function handleFocus(refs: Array<FocusableElement>): (e: KeyboardEvent) => void;

package/dist/types-ts4.5/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.5/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.5/components/types.d.ts

@@ -0,0 +1,27 @@
+import type { ElementType, ReactNode } from 'react';
+import type { AnalyticsEvent } from '@atlaskit/analytics-next';
+import { default as Avatar, type AvatarPropTypes } from '@atlaskit/avatar';
+import { MenuGroupProps } from '@atlaskit/menu';
+import { ContentProps } from '@atlaskit/popup';
+import type { AvatarGroupItemProps } from './avatar-group-item';
+export type DeepRequired<T> = {
+    [P in keyof T]-?: Required<T[P]>;
+};
+export type AvatarProps = AvatarPropTypes & {
+    name: string;
+    key?: string | number;
+};
+export interface AvatarGroupOverrides {
+    AvatarGroupItem?: {
+        render?: (Component: ElementType<AvatarGroupItemProps>, props: AvatarGroupItemProps, index: number) => ReactNode;
+    };
+    Avatar?: {
+        render?: (Component: typeof Avatar | ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
+    };
+}
+export type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
+export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
+export type Action = 'next' | 'prev' | 'first' | 'last';
+export interface PopupAvatarGroupProps extends MenuGroupProps {
+    setInitialFocusRef?: ContentProps['setInitialFocusRef'];
+}

package/dist/types-ts4.5/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.5/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.4.4",
+  "version": "9.4.6",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,6 +16,9 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
+    "productPushConsumption": [
+      "jira"
+    ],
     "releaseModel": "continuous",
     "website": {
       "name": "Avatar group",
@@ -25,11 +28,11 @@
   "dependencies": {
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/menu": "^2.0.0",
-    "@atlaskit/popup": "^1.10.0",
+    "@atlaskit/menu": "^2.1.0",
+    "@atlaskit/popup": "^1.11.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
-    "@atlaskit/tooltip": "^17.8.0",
+    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tooltip": "^18.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1"

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

@@ -0,0 +1,80 @@
+## 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 Avatar from '@atlaskit/avatar';
+import { AvatarPropTypes } from '@atlaskit/avatar';
+import { default as default_2 } from '@atlaskit/avatar';
+import { ElementType } from 'react';
+import { jsx } from '@emotion/react';
+import { MouseEventHandler } from 'react';
+import { PositionType } from '@atlaskit/tooltip';
+import type { ReactNode } from 'react';
+import { SizeType } from '@atlaskit/avatar';
+
+// @public
+const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, }: AvatarGroupProps) => jsx.JSX.Element;
+export default AvatarGroup;
+
+// @public (undocumented)
+interface AvatarGroupItemProps {
+    // (undocumented)
+    avatar: AvatarProps;
+    // (undocumented)
+    index: number;
+    // (undocumented)
+    isActive?: boolean;
+    // (undocumented)
+    isHover?: boolean;
+    // (undocumented)
+    onAvatarClick?: onAvatarClickHandler;
+    // (undocumented)
+    testId?: string;
+}
+
+// @public (undocumented)
+interface AvatarGroupOverrides {
+    // (undocumented)
+    Avatar?: {
+        render?: (Component: ElementType<AvatarProps> | typeof default_2, props: AvatarProps, index: number) => ReactNode;
+    };
+    // (undocumented)
+    AvatarGroupItem?: {
+        render?: (Component: ElementType<AvatarGroupItemProps>, props: AvatarGroupItemProps, index: number) => ReactNode;
+    };
+}
+
+// @public (undocumented)
+export interface AvatarGroupProps {
+    appearance?: 'grid' | 'stack';
+    avatar?: ElementType<AvatarProps> | typeof Avatar;
+    borderColor?: string;
+    boundariesElement?: 'scrollParent' | 'viewport' | 'window';
+    data: Array<AvatarProps>;
+    isTooltipDisabled?: boolean;
+    label?: string;
+    maxCount?: number;
+    onAvatarClick?: onAvatarClickHandler;
+    onMoreClick?: MouseEventHandler;
+    overrides?: AvatarGroupOverrides;
+    showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
+    size?: SizeType;
+    testId?: string;
+    tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
+}
+
+// @public (undocumented)
+export type AvatarProps = AvatarPropTypes & {
+    name: string;
+    key?: number | string;
+};
+
+// @public (undocumented)
+type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
+
+// (No @packageDocumentation comment for this package)
+
+```