@arbor-education/design-system.components 0.5.5 → 0.6.0

package/src/components/avatarGroup/avatarGroup.scss

@@ -0,0 +1,31 @@
+.ds-avatar-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ds-avatar-group__item {
+  flex-shrink: 0;
+
+  &:not(:first-child) {
+    margin-inline-start: var(--avatar-group-overlap);
+  }
+}
+
+.ds-avatar-group__overflow {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-inline-start: var(--avatar-group-overlap);
+}
+
+.ds-avatar-group__overflow-count {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--avatar-group-overflow-count-font-size);
+  font-weight: 600;
+  margin-inline-start: var(--spacing-small);
+}

package/src/components/avatarGroup/avatarGroupOverflow.ts

@@ -0,0 +1,29 @@
+import type { AvatarGroupNormalizedEntry } from './useAvatarGroupItems';
+
+export type AvatarGroupListOrder = 'ascending' | 'descending';
+
+export type AvatarGroupOverflowPartition = {
+  visibleItems: AvatarGroupNormalizedEntry[];
+  overflowCount: number;
+};
+
+export function partitionAvatarGroupOverflow(
+  items: readonly AvatarGroupNormalizedEntry[],
+  showMaxItems: number | undefined,
+  listOrder: AvatarGroupListOrder = 'ascending',
+): AvatarGroupOverflowPartition {
+  const total = items.length;
+  const maxItems
+    = showMaxItems == null || !Number.isFinite(showMaxItems) || showMaxItems < 0
+      ? total
+      : Math.floor(showMaxItems);
+  const visibleCount = Math.min(total, maxItems);
+
+  const overflowCount = total - visibleCount;
+  const startIndex = listOrder === 'ascending' ? 0 : overflowCount;
+
+  return {
+    visibleItems: items.slice(startIndex, startIndex + visibleCount),
+    overflowCount,
+  };
+}

package/src/components/avatarGroup/collectAvatarGroupChildren.ts

@@ -0,0 +1,30 @@
+import { Avatar, type AvatarProps } from 'Components/avatar/Avatar';
+import React from 'react';
+import type { AvatarGroupItem } from './useAvatarGroupItems';
+
+export function collectAvatarsFromChildren(children: React.ReactNode): AvatarGroupItem[] {
+  const out: AvatarGroupItem[] = [];
+
+  const walk = (node: React.ReactNode) => {
+    React.Children.forEach(node, (child) => {
+      if (child == null || typeof child === 'boolean') {
+        return;
+      }
+      if (React.isValidElement(child) && child.type === React.Fragment) {
+        walk((child.props as { children?: React.ReactNode }).children);
+        return;
+      }
+      if (React.isValidElement<AvatarProps>(child) && child.type === Avatar) {
+        out.push(child);
+        return;
+      }
+
+      if (React.isValidElement(child) && process.env.NODE_ENV !== 'production') {
+        console.warn('AvatarGroup only collects `<Avatar />` children when using the children API.');
+      }
+    });
+  };
+
+  walk(children);
+  return out;
+}

package/src/components/avatarGroup/useAvatarGroupItems.ts

@@ -0,0 +1,39 @@
+import { Avatar, type AvatarProps, type AvatarSize } from 'Components/avatar/Avatar';
+import React from 'react';
+
+export type AvatarGroupItem = React.ReactElement<AvatarProps> | AvatarProps;
+
+export type AvatarGroupNormalizedEntry = {
+  key: string;
+  avatarProps: AvatarProps;
+};
+
+export function useAvatarGroupItems(
+  items: readonly AvatarGroupItem[],
+  groupSize: AvatarSize | undefined,
+): AvatarGroupNormalizedEntry[] {
+  return React.useMemo(
+    () =>
+      items.map((item, index) => {
+        if (React.isValidElement<AvatarProps>(item) && item.type === Avatar) {
+          return {
+            key: item.key != null ? String(item.key) : String(index),
+            avatarProps: {
+              ...item.props,
+              size: groupSize ?? item.props.size,
+            },
+          };
+        }
+
+        const props = item as AvatarProps;
+        return {
+          key: String(index),
+          avatarProps: {
+            ...props,
+            size: groupSize ?? props.size,
+          },
+        };
+      }),
+    [items, groupSize],
+  );
+}