@arbor-education/design-system.components 0.21.1 → 0.23.0

package/src/components/combobox/useVisibleTriggerTags.test.tsx

@@ -0,0 +1,91 @@
+import { describe, expect, test } from 'vitest';
+import { computeVisibleTriggerTagsLayout } from './useVisibleTriggerTags.js';
+
+describe('computeVisibleTriggerTagsLayout', () => {
+  test('shows all tags and no ellipsis when there is no overflow', () => {
+    const result = computeVisibleTriggerTagsLayout({
+      containerWidth: 300,
+      tagWidths: [70, 80, 60],
+      tagGap: 4,
+      badgeWidth: 24,
+      ellipsisWidth: 12,
+      showBadge: true,
+    });
+
+    expect(result).toEqual({
+      visibleTagIndices: [0, 1, 2],
+      hiddenTagCount: 0,
+      showBadge: true,
+      showEllipsis: false,
+      hasOverflow: false,
+    });
+  });
+
+  test('reserves badge and ellipsis before fitting tags when overflow exists', () => {
+    const result = computeVisibleTriggerTagsLayout({
+      containerWidth: 160,
+      tagWidths: [60, 60, 60],
+      tagGap: 4,
+      badgeWidth: 24,
+      ellipsisWidth: 12,
+      showBadge: true,
+    });
+
+    expect(result.visibleTagIndices).toEqual([0]);
+    expect(result.hiddenTagCount).toBe(2);
+    expect(result.showEllipsis).toBe(true);
+    expect(result.hasOverflow).toBe(true);
+  });
+
+  test('allows zero tags when badge and ellipsis take priority in tiny space', () => {
+    const result = computeVisibleTriggerTagsLayout({
+      containerWidth: 36,
+      tagWidths: [80, 80],
+      tagGap: 4,
+      badgeWidth: 24,
+      ellipsisWidth: 12,
+      showBadge: true,
+    });
+
+    expect(result.visibleTagIndices).toEqual([]);
+    expect(result.hiddenTagCount).toBe(2);
+    expect(result.showEllipsis).toBe(true);
+  });
+
+  test('reserving badge space reduces visible count', () => {
+    const withBadge = computeVisibleTriggerTagsLayout({
+      containerWidth: 180,
+      tagWidths: [60, 60, 60],
+      tagGap: 4,
+      badgeWidth: 24,
+      ellipsisWidth: 12,
+      showBadge: true,
+    });
+
+    const withoutBadge = computeVisibleTriggerTagsLayout({
+      containerWidth: 180,
+      tagWidths: [60, 60, 60],
+      tagGap: 4,
+      badgeWidth: 24,
+      ellipsisWidth: 12,
+      showBadge: false,
+    });
+
+    expect(withoutBadge.visibleTagIndices.length).toBeGreaterThanOrEqual(withBadge.visibleTagIndices.length);
+  });
+
+  test('uses safety buffer to avoid a clipped final tag on boundary widths', () => {
+    const result = computeVisibleTriggerTagsLayout({
+      containerWidth: 195.5,
+      tagWidths: [73.4, 73.4, 20],
+      tagGap: 4,
+      badgeWidth: 24.2,
+      ellipsisWidth: 11.6,
+      showBadge: true,
+      safetyBuffer: 1,
+    });
+
+    expect(result.visibleTagIndices).toEqual([0]);
+    expect(result.showEllipsis).toBe(true);
+  });
+});

package/src/components/combobox/useVisibleTriggerTags.ts

@@ -0,0 +1,83 @@
+import { useMemo } from 'react';
+import { fitSpacedWidths } from 'Utils/spacedWidths';
+
+type ComputeVisibleTriggerTagsLayoutParams = {
+  containerWidth: number;
+  tagWidths: number[];
+  tagGap: number;
+  badgeWidth: number;
+  ellipsisWidth: number;
+  showBadge: boolean;
+  safetyBuffer?: number;
+};
+
+export type VisibleTriggerTagsLayout = {
+  visibleTagIndices: number[];
+  hiddenTagCount: number;
+  showBadge: boolean;
+  showEllipsis: boolean;
+  hasOverflow: boolean;
+};
+
+export const computeVisibleTriggerTagsLayout = ({
+  containerWidth,
+  tagWidths,
+  tagGap,
+  badgeWidth,
+  ellipsisWidth,
+  showBadge,
+  safetyBuffer = 1,
+}: ComputeVisibleTriggerTagsLayoutParams): VisibleTriggerTagsLayout => {
+  const selectedCount = tagWidths.length;
+  const shouldShowBadge = showBadge && selectedCount > 0;
+
+  if (selectedCount === 0 || containerWidth <= 0) {
+    return {
+      visibleTagIndices: [],
+      hiddenTagCount: 0,
+      showBadge: shouldShowBadge,
+      showEllipsis: false,
+      hasOverflow: false,
+    };
+  }
+
+  const badgeReserve = shouldShowBadge
+    ? badgeWidth + tagGap
+    : 0;
+
+  const availableWithoutEllipsis = Math.max(0, containerWidth - badgeReserve - safetyBuffer);
+  const countWithoutEllipsis = fitSpacedWidths(availableWithoutEllipsis, tagWidths, tagGap);
+  const hasOverflow = countWithoutEllipsis < selectedCount;
+
+  const ellipsisReserve = hasOverflow
+    ? ellipsisWidth + tagGap
+    : 0;
+  const availableForTags = Math.max(0, containerWidth - badgeReserve - ellipsisReserve - safetyBuffer);
+  const visibleCount = fitSpacedWidths(availableForTags, tagWidths, tagGap);
+
+  return {
+    visibleTagIndices: Array.from({ length: visibleCount }, (_, index) => index),
+    hiddenTagCount: Math.max(0, selectedCount - visibleCount),
+    showBadge: shouldShowBadge,
+    showEllipsis: visibleCount < selectedCount,
+    hasOverflow: visibleCount < selectedCount,
+  };
+};
+
+type UseVisibleTriggerTagsParams = ComputeVisibleTriggerTagsLayoutParams;
+
+export const useVisibleTriggerTags = (params: UseVisibleTriggerTagsParams): VisibleTriggerTagsLayout =>
+  // Deps list each field instead of `[params]`: callers often pass a new `params` object every
+  // render; depending on object identity would rerun the layout every time even when values are unchanged.
+  useMemo(
+    () => computeVisibleTriggerTagsLayout(params),
+    [
+      params.badgeWidth,
+      params.containerWidth,
+      params.ellipsisWidth,
+      params.safetyBuffer,
+      params.showBadge,
+      params.tagGap,
+      params.tagWidths,
+    ],
+  );