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

package/src/components/combobox/ComboboxButtonTrigger.tsx

@@ -2,11 +2,13 @@ import classNames from 'classnames';
 import { Badge } from 'Components/badge/Badge';
 import { Icon } from 'Components/icon/Icon';
 import { Tag } from 'Components/tag/Tag';
+import { TagList } from 'Components/tagList/TagList';
+import { useMeasuredChildWidths } from 'Utils/hooks/useMeasuredChildWidths';
+import { useElementWidth } from 'Utils/hooks/useElementWidth';
 import { Popover } from 'radix-ui';
 import { useMemo, useRef } from 'react';
 import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types.js';
-import { useElementWidth } from './useElementWidth.js';
-import { useVisibleChips } from './useVisibleChips.js';
+import { useVisibleTriggerTags } from './useVisibleTriggerTags.js';
 
 export type ComboboxButtonTriggerProps = {
   triggerRef: React.RefObject<HTMLDivElement | null>;
@@ -21,9 +23,9 @@ export type ComboboxButtonTriggerProps = {
   showDropdownTrigger: boolean;
   selectedValueDisplay: ComboboxSelectedValueDisplay;
   triggerEndContent?: React.ReactNode;
-  selectedChips: ComboboxOption[];
-  selectedChipValuesSet: Set<string>;
-  focusedChipIndex: number | null;
+  selectedTags: ComboboxOption[];
+  selectedTagValuesSet: Set<string>;
+  focusedTagIndex: number | null;
   resolveTagLabel: (opt: ComboboxOption) => string;
   removeValue: (value: string) => void;
   handleTriggerClick: () => void;
@@ -46,9 +48,9 @@ export const ComboboxButtonTrigger = ({
   showDropdownTrigger,
   selectedValueDisplay,
   triggerEndContent,
-  selectedChips,
-  selectedChipValuesSet,
-  focusedChipIndex,
+  selectedTags,
+  selectedTagValuesSet,
+  focusedTagIndex,
   resolveTagLabel,
   removeValue,
   handleTriggerClick,
@@ -62,65 +64,47 @@ export const ComboboxButtonTrigger = ({
   const ellipsisProbeRef = useRef<HTMLSpanElement>(null);
   const badgeProbeRef = useRef<HTMLSpanElement>(null);
 
-  const chipWatchKey = useMemo(
+  const tagWatchKey = useMemo(
     () =>
-      selectedChips
+      selectedTags
         .map(opt => `${opt.value}:${resolveTagLabel(opt)}:${opt.iconName ?? ''}`)
         .join('|'),
-    [resolveTagLabel, selectedChips],
+    [resolveTagLabel, selectedTags],
   );
 
   const selectedValueText = useMemo(
-    () => selectedChips.map(resolveTagLabel).join(', '),
-    [resolveTagLabel, selectedChips],
+    () => selectedTags.map(resolveTagLabel).join(', '),
+    [resolveTagLabel, selectedTags],
   );
   const usesTagDisplay = selectedValueDisplay === 'tags';
-  const shouldShowBadge = showSelectionCountBadge && selectedChips.length > 0;
+  const shouldShowBadge = showSelectionCountBadge && selectedTags.length > 0;
 
-  const contentWidth = useElementWidth(contentRef, `${chipWatchKey}-${isOpen}-${shouldShowBadge}`);
-  const measurementTrackWidth = useElementWidth(measureTrackRef, `${chipWatchKey}-${isOpen}`);
-  const ellipsisWidth = useElementWidth(ellipsisProbeRef, `${chipWatchKey}-${isOpen}`);
-  const badgeWidth = useElementWidth(badgeProbeRef, `${chipWatchKey}-${isOpen}-${shouldShowBadge}`);
-  const measurementTrackElement = measureTrackRef.current;
+  const contentWidth = useElementWidth(contentRef, `${tagWatchKey}-${isOpen}-${shouldShowBadge}`);
+  const ellipsisWidth = useElementWidth(ellipsisProbeRef, `${tagWatchKey}-${isOpen}`);
+  const badgeWidth = useElementWidth(badgeProbeRef, `${tagWatchKey}-${isOpen}-${shouldShowBadge}`);
+  const { childGap: tagGap, childWidths: tagWidths } = useMeasuredChildWidths(measureTrackRef, `${tagWatchKey}-${isOpen}`);
 
-  const chipGap = useMemo(() => {
-    const el = measureTrackRef.current;
-    if (!el) return 0;
-    const styles = getComputedStyle(el);
-    const parsed = Number.parseFloat(styles.columnGap || styles.gap || '0');
-    return Number.isFinite(parsed) ? parsed : 0;
-  }, [measurementTrackElement, measurementTrackWidth]);
-
-  const chipWidths = useMemo(() => {
-    const el = measureTrackRef.current;
-    if (!el) return [];
-    return Array.from(el.children).map((child) => {
-      const width = (child as HTMLElement).getBoundingClientRect().width;
-      return Number.isFinite(width) ? width : 0;
-    });
-  }, [chipWatchKey, measurementTrackElement, measurementTrackWidth]);
-
-  const layout = useVisibleChips({
+  const layout = useVisibleTriggerTags({
     containerWidth: contentWidth,
-    chipWidths,
-    chipGap,
+    tagWidths,
+    tagGap,
     badgeWidth,
     ellipsisWidth,
     showBadge: shouldShowBadge,
   });
 
-  const canMeasure = contentWidth > 0 && chipWidths.length === selectedChips.length;
-  const visibleChips = canMeasure
-    ? layout.visibleChipIndices.map(index => selectedChips[index]!).filter(Boolean)
-    : selectedChips;
+  const canMeasure = contentWidth > 0 && tagWidths.length === selectedTags.length;
+  const visibleTags = canMeasure
+    ? layout.visibleTagIndices.map(index => selectedTags[index]!).filter(Boolean)
+    : selectedTags;
   const showEllipsis = usesTagDisplay && (canMeasure ? layout.showEllipsis : false);
   const showBadge = usesTagDisplay && (canMeasure ? layout.showBadge : shouldShowBadge);
 
-  const renderSelectionTag = (opt: ComboboxOption, chipIdx: number, onRemove?: () => void) => (
+  const renderSelectionTag = (opt: ComboboxOption, tagIdx: number, onRemove?: () => void) => (
     <Tag
       key={opt.value}
       color="neutral"
-      selected={selectedChipValuesSet.has(opt.value) || focusedChipIndex === chipIdx}
+      selected={selectedTagValuesSet.has(opt.value) || focusedTagIndex === tagIdx}
       slotStart={opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined}
       onRemove={onRemove}
       removeLabel={`Remove ${resolveTagLabel(opt)}`}
@@ -132,10 +116,20 @@ export const ComboboxButtonTrigger = ({
 
   const renderSelectionCountBadge = (withA11yLabel: boolean) => (
     <Badge colour="salmon" a11yLabel={withA11yLabel ? selectionCountA11yLabel : undefined}>
-      {selectedChips.length}
+      {selectedTags.length}
     </Badge>
   );
 
+  const visibleTagItems = visibleTags.map((opt, tagIdx) => ({
+    id: opt.value,
+    children: resolveTagLabel(opt),
+    color: 'neutral' as const,
+    selected: selectedTagValuesSet.has(opt.value) || focusedTagIndex === tagIdx,
+    slotStart: opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined,
+    onRemove: disabled ? undefined : () => removeValue(opt.value),
+    removeLabel: `Remove ${resolveTagLabel(opt)}`,
+  }));
+
   return (
     <Popover.Anchor asChild>
       <div
@@ -160,13 +154,15 @@ export const ComboboxButtonTrigger = ({
           {usesTagDisplay
             ? (
                 <div className="ds-combobox__button-tags-viewport">
-                  <div className="ds-combobox__button-tags-track">
-                    {selectedChips.length === 0 && (
-                      <span className="ds-combobox__button-placeholder">{placeholder}</span>
-                    )}
-                    {visibleChips.map((opt, chipIdx) =>
-                      renderSelectionTag(opt, chipIdx, disabled ? undefined : () => removeValue(opt.value)))}
-                  </div>
+                  {selectedTags.length === 0
+                    ? <span className="ds-combobox__button-placeholder">{placeholder}</span>
+                    : (
+                        <TagList
+                          items={visibleTagItems}
+                          returnFocusRef={triggerRef}
+                          className="ds-combobox__tag-list"
+                        />
+                      )}
                   {showEllipsis && <span className="ds-combobox__button-ellipsis" aria-hidden="true">…</span>}
                 </div>
               )
@@ -202,11 +198,11 @@ export const ComboboxButtonTrigger = ({
 
         {usesTagDisplay && (
           <div className="ds-combobox__measure" aria-hidden="true">
-            {/* Mirror the rendered chips off-screen so width calculations use the real Tag layout. */}
+            {/* Mirror the rendered tags off-screen so width calculations use the real Tag layout. */}
             <div className="ds-combobox__button-tags-track" ref={measureTrackRef}>
-              {selectedChips.map((opt, chipIdx) => (
+              {selectedTags.map((opt, tagIdx) => (
                 <span key={`measure-${opt.value}`} className="ds-combobox__measure-chip">
-                  {renderSelectionTag(opt, chipIdx, disabled ? undefined : () => {})}
+                  {renderSelectionTag(opt, tagIdx, disabled ? undefined : () => {})}
                 </span>
               ))}
             </div>

package/src/components/combobox/ComboboxTrigger.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
-import { Tag } from 'Components/tag/Tag';
+import { TagList } from 'Components/tagList/TagList';
 import { Popover } from 'radix-ui';
 import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types.js';
 
@@ -74,6 +74,15 @@ export const ComboboxTrigger = (props: ComboboxTriggerProps): React.JSX.Element
     = selectedValueDisplay === 'text'
       && query.length === 0
       && selectedValueText.length > 0;
+  const selectedTagItems = selectedChips.map(opt => ({
+    id: opt.value,
+    children: resolveTagLabel(opt),
+    color: 'neutral' as const,
+    selected: selectedChipValuesSet.has(opt.value),
+    slotStart: opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined,
+    onRemove: disabled ? undefined : () => removeValue(opt.value),
+    removeLabel: `Remove ${resolveTagLabel(opt)}`,
+  }));
 
   return (
     <Popover.Anchor asChild>
@@ -87,21 +96,15 @@ export const ComboboxTrigger = (props: ComboboxTriggerProps): React.JSX.Element
         onClick={handleTriggerClick}
       >
         <div className="ds-combobox__chips-and-input">
-          {selectedValueDisplay === 'tags'
-            ? selectedChips.map((opt, chipIdx) => (
-                <Tag
-                  key={opt.value}
-                  color="neutral"
-                  selected={selectedChipValuesSet.has(opt.value) || focusedChipIndex === chipIdx}
-                  slotStart={opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined}
-                  onRemove={disabled ? undefined : () => removeValue(opt.value)}
-                  removeLabel={`Remove ${resolveTagLabel(opt)}`}
-                  removeButtonTabIndex={-1}
-                >
-                  {resolveTagLabel(opt)}
-                </Tag>
-              ))
-            : null}
+          {selectedValueDisplay === 'tags' && (
+            <TagList
+              items={selectedTagItems}
+              wrap
+              highlightedItemIndex={focusedChipIndex}
+              returnFocusRef={inputRef}
+              className="ds-combobox__tag-list"
+            />
+          )}
           {showSelectedValueText && (
             <span className="ds-combobox__selected-value">
               {selectedValueText}

package/src/components/combobox/combobox.scss

@@ -9,16 +9,14 @@
   align-items: center;
   gap: var(--spacing-small);
   min-height: var(--form-field-text-medium-height);
-  padding: var(--spacing-xsmall) var(--spacing-small);
+  padding: calc(var(--spacing-xsmall) - (var(--border-weight))) var(--spacing-small);
   border: var(--border-weight) solid var(--form-field-combobox-default-color-border);
   border-radius: var(--form-field-radius);
   background-color: var(--form-field-combobox-default-color-background);
   color: var(--form-field-combobox-default-color-text);
   cursor: text;
   transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
-  box-sizing: border-box;
   font-style: normal;
-  line-height: 150%;
 
   &:hover:not(.ds-combobox__trigger--disabled) {
     border-color: var(--form-field-combobox-hover-color-border);
@@ -70,11 +68,18 @@
 }
 
 .ds-combobox__button-tags-viewport {
+  display: flex;
+  align-items: center;
   flex: 1;
   min-width: 0;
   overflow: hidden;
 }
 
+.ds-combobox__tag-list {
+  flex: 1;
+  min-width: 0;
+}
+
 .ds-combobox__button-tags-track {
   display: inline-flex;
   width: auto;

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,
+    ],
+  );