@atlaskit/avatar-group
Version:
An avatar group displays a number of avatars grouped together in a stack or grid.
45 lines (44 loc) • 1.96 kB
TypeScript
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 {};