@atlaskit/avatar-group 12.10.11 → 12.11.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/avatar-group
 
+## 12.11.0
+
+### Minor Changes
+
+- [`032135d12186b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/032135d12186b) -
+  Top-layer: fix initial focus regressions on the top-layer adapters for `@atlaskit/avatar-group`
+  and `@atlaskit/popup`. Behind the `platform-dst-top-layer` feature gate.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.10.12
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.10.11
 
 ### Patch Changes

package/__tests__/playwright/top-layer-focus.spec.tsx

@@ -0,0 +1,78 @@
+import { expect, test } from '@af/integration-testing';
+
+/**
+ * Avatar group: focus contract on the top-layer code path.
+ *
+ * `AvatarGroup` renders a "more" trigger that opens a `role="menu"` popover
+ * listing avatars beyond `maxCount`. The focus contract is:
+ *
+ * 1. Initial focus moves to the first item in the avatar list on open.
+ * 2. Escape closes the popover and restores focus to the more trigger.
+ * 3. ArrowDown moves focus between items within the menu.
+ *
+ * See: `platform/packages/design-system/top-layer/notes/architecture/focus.md`.
+ */
+
+const featureFlag = 'platform-dst-top-layer';
+
+test.describe('Avatar group: top-layer focus contract', () => {
+	test('initial focus: focus moves to the first overflow item on open', async ({ page }) => {
+		await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
+			'design-system',
+			'avatar-group',
+			'testing-top-layer-focus',
+			{ featureFlag },
+		);
+
+		const moreTrigger = page.getByTestId('avatar-group--overflow-menu--trigger');
+		await moreTrigger.click();
+
+		const menu = page.getByRole('menu');
+		await expect(menu).toBeVisible();
+		// avatar-group computes `maxAvatar = total > max ? max - 1 : max` and
+		// emits overflow items with testId `${testId}--avatar-group-item-${index + maxAvatar}`.
+		// With `data.length=6` and `maxCount=3`, `maxAvatar=2`, so the first
+		// overflow item is at index 2.
+		const firstItem = page.getByTestId('avatar-group--avatar-group-item-2');
+		await expect(firstItem).toBeFocused();
+	});
+
+	test('focus restoration: Escape restores focus to the more trigger', async ({ page }) => {
+		await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
+			'design-system',
+			'avatar-group',
+			'testing-top-layer-focus',
+			{ featureFlag },
+		);
+
+		const moreTrigger = page.getByTestId('avatar-group--overflow-menu--trigger');
+		await moreTrigger.focus();
+		await page.keyboard.press('ArrowDown');
+		await expect(page.getByRole('menu')).toBeVisible();
+
+		await page.keyboard.press('Escape');
+		await expect(moreTrigger).toBeFocused();
+	});
+
+	test('focus movement: ArrowDown moves focus between items within the menu', async ({ page }) => {
+		await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
+			'design-system',
+			'avatar-group',
+			'testing-top-layer-focus',
+			{ featureFlag },
+		);
+
+		const moreTrigger = page.getByTestId('avatar-group--overflow-menu--trigger');
+		await moreTrigger.focus();
+		await page.keyboard.press('ArrowDown');
+
+		const menu = page.getByRole('menu');
+		await expect(menu).toBeVisible();
+
+		const items = menu.getByRole('menuitem');
+		await expect(items.first()).toBeFocused();
+
+		await page.keyboard.press('ArrowDown');
+		await expect(items.nth(1)).toBeFocused();
+	});
+});

package/avatar-group/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/avatar-group.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/avatar-group.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/avatar-group.d.ts"
 }

package/dist/cjs/components/avatar-group-top-layer.js

@@ -11,7 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
-var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
 var _menu = require("@atlaskit/menu");
 var _animations = require("@atlaskit/top-layer/animations");
 var _getAriaForTrigger = require("@atlaskit/top-layer/get-aria-for-trigger");
@@ -107,27 +106,27 @@ function MoreDropdownTopLayer(_ref) {
 
   // ArrowDown-to-open: when the trigger is focused and the menu is closed,
   // pressing ArrowDown opens the menu (WAI-ARIA menu button pattern).
-  // We track focus on the trigger wrapper to avoid threading onFocus/onBlur
-  // through the renderMoreButton/MoreIndicator prop plumbing.
-  var triggerWrapperRef = (0, _react.useRef)(null);
-  var _useFocus = (0, _useFocusEvent.default)(),
-    isFocused = _useFocus.isFocused,
-    triggerFocusBind = _useFocus.bindFocus;
+  //
+  // Bind the keydown listener directly to the trigger element via its ref so
+  // that opening the menu does not trigger a focus-driven re-render of the
+  // host component, which would unmount and remount the menu items and drop
+  // menuitem focus.
   (0, _react.useEffect)(function () {
-    if (!isFocused || isOpen) {
+    var trigger = triggerRef.current;
+    if (!trigger || isOpen) {
       return;
     }
-    return (0, _bindEventListener.bind)(window, {
+    return (0, _bindEventListener.bind)(trigger, {
       type: 'keydown',
-      listener: function openOnArrowDown(e) {
-        if (e.key === _keycodes.KEY_DOWN) {
+      listener: function openOnArrowDown(event) {
+        if (event.key === _keycodes.KEY_DOWN) {
           // Prevent page scroll when opening the menu via ArrowDown.
-          e.preventDefault();
-          handleTriggerClicked(e);
+          event.preventDefault();
+          handleTriggerClicked(event);
         }
       }
     });
-  }, [isFocused, isOpen, handleTriggerClicked]);
+  }, [isOpen, handleTriggerClicked]);
   var triggerAria = (0, _getAriaForTrigger.getAriaForTrigger)({
     role: 'menu',
     isOpen: isOpen,
@@ -136,20 +135,11 @@ function MoreDropdownTopLayer(_ref) {
   var setTriggerRef = (0, _react.useCallback)(function (node) {
     triggerRef.current = node;
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    ref: triggerWrapperRef,
-    onFocus: triggerFocusBind.onFocus,
-    onBlur: triggerFocusBind.onBlur
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
-    ,
-    style: {
-      display: 'contents'
-    }
-  }, renderMoreButton(_objectSpread(_objectSpread({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderMoreButton(_objectSpread(_objectSpread({
     ref: setTriggerRef
   }, triggerAria), {}, {
     onClick: handleTriggerClicked
-  }))), /*#__PURE__*/_react.default.createElement(_popover.Popover, {
+  })), /*#__PURE__*/_react.default.createElement(_popover.Popover, {
     ref: popoverRef,
     id: popoverId,
     role: "menu",

package/dist/es2019/components/avatar-group-top-layer.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
-import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
@@ -94,28 +93,27 @@ export function MoreDropdownTopLayer({
 
   // ArrowDown-to-open: when the trigger is focused and the menu is closed,
   // pressing ArrowDown opens the menu (WAI-ARIA menu button pattern).
-  // We track focus on the trigger wrapper to avoid threading onFocus/onBlur
-  // through the renderMoreButton/MoreIndicator prop plumbing.
-  const triggerWrapperRef = useRef(null);
-  const {
-    isFocused,
-    bindFocus: triggerFocusBind
-  } = useFocus();
+  //
+  // Bind the keydown listener directly to the trigger element via its ref so
+  // that opening the menu does not trigger a focus-driven re-render of the
+  // host component, which would unmount and remount the menu items and drop
+  // menuitem focus.
   useEffect(() => {
-    if (!isFocused || isOpen) {
+    const trigger = triggerRef.current;
+    if (!trigger || isOpen) {
       return;
     }
-    return bind(window, {
+    return bind(trigger, {
       type: 'keydown',
-      listener: function openOnArrowDown(e) {
-        if (e.key === KEY_DOWN) {
+      listener: function openOnArrowDown(event) {
+        if (event.key === KEY_DOWN) {
           // Prevent page scroll when opening the menu via ArrowDown.
-          e.preventDefault();
-          handleTriggerClicked(e);
+          event.preventDefault();
+          handleTriggerClicked(event);
         }
       }
     });
-  }, [isFocused, isOpen, handleTriggerClicked]);
+  }, [isOpen, handleTriggerClicked]);
   const triggerAria = getAriaForTrigger({
     role: 'menu',
     isOpen,
@@ -124,20 +122,11 @@ export function MoreDropdownTopLayer({
   const setTriggerRef = useCallback(node => {
     triggerRef.current = node;
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    ref: triggerWrapperRef,
-    onFocus: triggerFocusBind.onFocus,
-    onBlur: triggerFocusBind.onBlur
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
-    ,
-    style: {
-      display: 'contents'
-    }
-  }, renderMoreButton({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderMoreButton({
     ref: setTriggerRef,
     ...triggerAria,
     onClick: handleTriggerClicked
-  })), /*#__PURE__*/React.createElement(Popover, {
+  }), /*#__PURE__*/React.createElement(Popover, {
     ref: popoverRef,
     id: popoverId,
     role: "menu",

package/dist/esm/components/avatar-group-top-layer.js

@@ -5,7 +5,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
-import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
@@ -98,27 +97,27 @@ export function MoreDropdownTopLayer(_ref) {
 
   // ArrowDown-to-open: when the trigger is focused and the menu is closed,
   // pressing ArrowDown opens the menu (WAI-ARIA menu button pattern).
-  // We track focus on the trigger wrapper to avoid threading onFocus/onBlur
-  // through the renderMoreButton/MoreIndicator prop plumbing.
-  var triggerWrapperRef = useRef(null);
-  var _useFocus = useFocus(),
-    isFocused = _useFocus.isFocused,
-    triggerFocusBind = _useFocus.bindFocus;
+  //
+  // Bind the keydown listener directly to the trigger element via its ref so
+  // that opening the menu does not trigger a focus-driven re-render of the
+  // host component, which would unmount and remount the menu items and drop
+  // menuitem focus.
   useEffect(function () {
-    if (!isFocused || isOpen) {
+    var trigger = triggerRef.current;
+    if (!trigger || isOpen) {
       return;
     }
-    return bind(window, {
+    return bind(trigger, {
       type: 'keydown',
-      listener: function openOnArrowDown(e) {
-        if (e.key === KEY_DOWN) {
+      listener: function openOnArrowDown(event) {
+        if (event.key === KEY_DOWN) {
           // Prevent page scroll when opening the menu via ArrowDown.
-          e.preventDefault();
-          handleTriggerClicked(e);
+          event.preventDefault();
+          handleTriggerClicked(event);
         }
       }
     });
-  }, [isFocused, isOpen, handleTriggerClicked]);
+  }, [isOpen, handleTriggerClicked]);
   var triggerAria = getAriaForTrigger({
     role: 'menu',
     isOpen: isOpen,
@@ -127,20 +126,11 @@ export function MoreDropdownTopLayer(_ref) {
   var setTriggerRef = useCallback(function (node) {
     triggerRef.current = node;
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    ref: triggerWrapperRef,
-    onFocus: triggerFocusBind.onFocus,
-    onBlur: triggerFocusBind.onBlur
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
-    ,
-    style: {
-      display: 'contents'
-    }
-  }, renderMoreButton(_objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderMoreButton(_objectSpread(_objectSpread({
     ref: setTriggerRef
   }, triggerAria), {}, {
     onClick: handleTriggerClicked
-  }))), /*#__PURE__*/React.createElement(Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     ref: popoverRef,
     id: popoverId,
     role: "menu",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "12.10.11",
+	"version": "12.11.0",
 	"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,10 +37,10 @@
 		"@atlaskit/menu": "^8.5.0",
 		"@atlaskit/motion": "^6.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.25.0",
+		"@atlaskit/popup": "^4.26.0",
 		"@atlaskit/tokens": "^13.4.0",
 		"@atlaskit/tooltip": "^22.6.0",
-		"@atlaskit/top-layer": "^0.17.0",
+		"@atlaskit/top-layer": "^0.18.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0"

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/types.d.ts"
 }

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

@@ -1,25 +0,0 @@
-import React, { type ElementType } from 'react';
-import Avatar from '@atlaskit/avatar';
-import { type getOverrides } from './get-overrides';
-import { type AvatarProps, type onAvatarClickHandler } from './types';
-export interface AvatarGroupItemProps {
-    avatar: AvatarProps;
-    /**
-     * Custom component used to render the avatar inside the dropdown menu item.
-     * When not provided, defaults to the standard Avatar component.
-     */
-    avatarComponent?: typeof Avatar | ElementType<AvatarProps>;
-    isActive?: boolean;
-    isHover?: boolean;
-    avatarOverrides?: ReturnType<typeof getOverrides>['Avatar'];
-    index: number;
-    onAvatarClick?: onAvatarClickHandler;
-    testId?: string;
-    /**
-     * Use this to override the accessibility role for the element.
-     * When used inside a dropdown menu, this should be set to "menuitem".
-     */
-    role?: string;
-}
-declare const AvatarGroupItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<AvatarGroupItemProps> & React.RefAttributes<HTMLElement>>;
-export default AvatarGroupItem;

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

@@ -1,44 +0,0 @@
-import React, { type MouseEventHandler } from 'react';
-import { type AvatarGroupOverrides, type AvatarProps, type onAvatarClickHandler } from './types';
-type TMoreDropdownTopLayerProps = {
-    isOpen: boolean;
-    onClose: () => void;
-    isTriggeredUsingKeyboard: boolean;
-    data: Array<AvatarProps>;
-    max: number;
-    overrides?: AvatarGroupOverrides;
-    onAvatarClick?: onAvatarClickHandler;
-    testId?: string;
-    labelId: string;
-    renderMoreButton: (props: {
-        'aria-controls'?: string;
-        'aria-expanded'?: boolean;
-        'aria-haspopup'?: boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';
-        onClick: MouseEventHandler;
-        ref?: React.Ref<HTMLElement>;
-    }) => React.ReactNode;
-    handleTriggerClicked: (event: React.MouseEvent | KeyboardEvent) => void;
-    bindFocus: {
-        onFocus: (event: React.FocusEvent) => void;
-        onBlur: (event: React.FocusEvent) => void;
-    };
-};
-/**
- * Top-layer implementation of the avatar group overflow dropdown.
- *
- * Replaces the legacy `@atlaskit/popup` rendering pipeline
- * (Popper.js + Portal + focus-trap + @atlaskit/layering)
- * with the native Popover API + CSS Anchor Positioning via `@atlaskit/top-layer`.
- *
- * Uses `role="menu"` with arrow key navigation for correct menu semantics.
- *
- * Gated behind the `platform-dst-top-layer` feature flag.
- *
- * Legacy props that are no-ops in the top-layer path (not accepted here):
- * - zIndex: stacking managed by browser top layer
- * - shouldRenderToParent: always renders in top layer
- * - boundary / rootBoundary: viewport is the natural boundary
- * - shouldFlip: CSS Anchor Positioning handles flipping
- */
-export declare function MoreDropdownTopLayer({ isOpen, onClose, isTriggeredUsingKeyboard: _isTriggeredUsingKeyboard, data, max, overrides, onAvatarClick, testId, labelId, renderMoreButton, handleTriggerClicked, bindFocus: _bindFocus, }: TMoreDropdownTopLayerProps): React.JSX.Element;
-export {};

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

@@ -1,127 +0,0 @@
-import React, { type ElementType, type MouseEventHandler } from 'react';
-import Avatar, { type AppearanceType } from '@atlaskit/avatar';
-import { type PositionType } from '@atlaskit/tooltip';
-import { type AvatarGroupOverrides, type AvatarGroupSize, type AvatarProps, type 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';
-    /**
-     * Indicates the shape of the more indicator. Most more indicators are circular, but square more indicators
-     * can be used for 'container' objects.
-     */
-    moreIndicatorAppearance?: AppearanceType;
-    /**
-     * 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".
-     *
-     * Note: The "xsmall" size that exists on Avatar is not supported here because elements such as the more indicator cannot be displayed in an accessible manner at that size.
-     */
-    size?: AvatarGroupSize;
-    /**
-     * Typically the background color that the avatar is presented on.
-     * Accepts any color argument that the CSS border-color property accepts.
-     */
-    borderColor?: string;
-    /**
-     * An array of avatar prop data, that are spread onto each `avatar` component.
-     *
-     * For further usage information on AvatarPropTypes, the supported props for `avatar`, refer to [Avatar's prop documentation](https://atlassian.design/components/avatar/code).
-     */
-    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;
-    /**
-     * Determines whether the 'show more' popup has `shouldRenderToParent` applied.
-     */
-    shouldPopupRenderToParent?: boolean;
-    /**
-     * Text to be used as aria-label for the more indicator.
-     * If provided, this will be used exactly as-is for the aria-label.
-     * If not provided, but an `aria-label` is provided via `showMoreButtonProps`, that will be used instead.
-     * If neither is provided, the aria-label will default to "N more people" where N is the number of people that are not visible (e.g. "5 more people").
-     */
-    moreIndicatorLabel?: 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, moreIndicatorAppearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, moreIndicatorLabel, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => React.JSX.Element;
-export default AvatarGroup;

package/dist/types-ts4.5/components/get-overrides.d.ts

@@ -1,2 +0,0 @@
-import type { AvatarGroupOverrides, DeepRequired } from './types';
-export declare function getOverrides(overrides?: AvatarGroupOverrides): DeepRequired<AvatarGroupOverrides>;

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

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

package/dist/types-ts4.5/components/internal/components/focus-manager-context.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { type 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;
-}>;

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

@@ -1,14 +0,0 @@
-import { type FC, type ReactNode } from 'react';
-/**
- * __Focus manager__
- *
- * A focus manager {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
-declare const FocusManager: FC<{
-    children: ReactNode;
-}>;
-export default FocusManager;

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import { type PopupAvatarGroupProps } from '../../types';
-/**
- * It sets focus to the first avatar when popup is open.
- */
-declare const PopupAvatarGroup: ({ children, isLoading, maxHeight, maxWidth, minHeight, minWidth, onClick, role, setInitialFocusRef, spacing, testId, ...rest }: PopupAvatarGroupProps) => React.JSX.Element;
-export default PopupAvatarGroup;

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

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

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

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

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

@@ -1,18 +0,0 @@
-import { type AppearanceType, type AvatarClickEventHandler } from '@atlaskit/avatar';
-import { type AvatarGroupSize } from './types';
-export interface MoreIndicatorProps {
-    count: number;
-    'aria-controls'?: string;
-    'aria-expanded'?: boolean;
-    'aria-haspopup'?: boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';
-    moreIndicatorLabel?: string;
-    buttonProps: Partial<React.HTMLAttributes<HTMLElement>>;
-    onClick: AvatarClickEventHandler;
-    isActive: boolean;
-    size: AvatarGroupSize;
-    appearance?: AppearanceType;
-    borderColor?: string;
-    testId?: string;
-}
-declare const MoreIndicator: React.ForwardRefExoticComponent<React.PropsWithoutRef<MoreIndicatorProps> & React.RefAttributes<HTMLButtonElement>>;
-export default MoreIndicator;

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

@@ -1,14 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type FC, type ReactNode } from 'react';
-import { type AvatarGroupSize } from './types';
-declare const Stack: FC<{
-    children: ReactNode;
-    testId?: string;
-    'aria-label': string;
-    size: AvatarGroupSize;
-    id?: string;
-}>;
-export default Stack;

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

@@ -1,32 +0,0 @@
-import type { ElementType, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-import type { AnalyticsEvent } from '@atlaskit/analytics-next';
-import { type default as Avatar, type AvatarPropTypes, type SizeType } from '@atlaskit/avatar';
-import { type MenuGroupProps } from '@atlaskit/menu';
-import { type ContentProps } from '@atlaskit/popup';
-import type { AvatarGroupItemProps } from './avatar-group-item';
-import { type MoreIndicatorProps } from './more-indicator';
-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: ForwardRefExoticComponent<AvatarGroupItemProps & RefAttributes<HTMLElement>>, props: AvatarGroupItemProps, index: number) => ReactNode;
-    };
-    Avatar?: {
-        render?: (Component: typeof Avatar | ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
-    };
-    MoreIndicator?: {
-        render?: (Component: ForwardRefExoticComponent<MoreIndicatorProps & RefAttributes<HTMLButtonElement>>, props: MoreIndicatorProps) => 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'];
-}
-export type AvatarGroupSize = Exclude<SizeType, 'xsmall'>;

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

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

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

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

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

@@ -1 +0,0 @@
-export type { AvatarProps, AvatarGroupOverrides } from '../components/types';

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

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