@atlaskit/avatar-group 12.10.10 → 12.10.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar-group
 
+## 12.10.12
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.10.11
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.10.10
 
 ### Patch Changes

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "12.10.10",
+	"version": "12.10.12",
 	"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.23.0",
-		"@atlaskit/tokens": "^13.3.0",
+		"@atlaskit/popup": "^4.25.0",
+		"@atlaskit/tokens": "^13.4.0",
 		"@atlaskit/tooltip": "^22.6.0",
-		"@atlaskit/top-layer": "^0.16.0",
+		"@atlaskit/top-layer": "^0.18.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0"
@@ -58,7 +58,7 @@
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/icon": "^35.4.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/modal-dialog": "^15.2.0",
+		"@atlaskit/modal-dialog": "^15.3.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/section-message": "^8.13.0",
 		"@atlaskit/toggle": "^16.1.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';