@wordpress/components 32.3.1-next.v.202602241322.0 → 32.4.0

package/src/avatar-group/component.tsx

@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Children } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { AvatarGroupProps } from './types';
-import type { WordPressComponentProps } from '../context';
-
-function AvatarGroup( {
-	className,
-	max = 3,
-	children,
-	...props
-}: WordPressComponentProps< AvatarGroupProps, 'div', false > ) {
-	const childArray = Children.toArray( children );
-	const visible = childArray.slice( 0, max );
-	const overflowCount = childArray.length - max;
-
-	return (
-		<div
-			role="group"
-			className={ clsx( 'components-avatar-group', className ) }
-			{ ...props }
-		>
-			{ visible }
-			{ overflowCount > 0 && (
-				<span
-					className="components-avatar-group__overflow"
-					aria-label={ `${ overflowCount } more` }
-				>
-					{ `+${ overflowCount }` }
-				</span>
-			) }
-		</div>
-	);
-}
-
-export default AvatarGroup;

package/src/avatar-group/index.ts

@@ -1,2 +0,0 @@
-export { default } from './component';
-export type { AvatarGroupProps } from './types';

package/src/avatar-group/styles.scss

@@ -1,32 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.components-avatar-group {
-	display: flex;
-	align-items: center;
-
-	// Overlap subsequent avatars.
-	> .components-avatar + .components-avatar {
-		margin-inline-start: -$grid-unit-10;
-	}
-
-	// Stack earlier avatars on top of later ones so the overlap
-	// is visually correct, and elevate on hover for badge expansion.
-	> .components-avatar {
-		position: relative;
-
-		@for $i from 1 through 10 {
-			&:nth-child(#{$i}) {
-				z-index: #{11 - $i};
-			}
-		}
-	}
-}
-
-.components-avatar-group__overflow {
-	margin-inline-start: $grid-unit-05;
-	font-size: $font-size-small;
-	line-height: $font-line-height-small;
-	color: $gray-900;
-	white-space: nowrap;
-}

package/src/avatar-group/types.ts

@@ -1,13 +0,0 @@
-export type AvatarGroupProps = {
-	/**
-	 * Maximum number of avatars to display before showing an
-	 * overflow indicator.
-	 *
-	 * @default 3
-	 */
-	max?: number;
-	/**
-	 * Avatar elements to display in the group.
-	 */
-	children: React.ReactNode;
-};