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

package/src/components/icon/allowedIcons.tsx

@@ -55,6 +55,7 @@ import {
   Link,
   List,
   ListFilterPlus,
+  ListTree,
   LoaderCircle,
   Lock,
   LockOpen,
@@ -90,10 +91,10 @@ import {
   UsersRound, X,
 } from 'lucide-react';
 import { AskArbor } from './customIcons/AskArbor.js';
-import type { CustomIconProps } from './types.js';
 import { CheckSolid } from './customIcons/CheckSolid.js';
 import { Google } from './customIcons/Google.js';
 import { XSolid } from './customIcons/XSolid.js';
+import type { CustomIconProps } from './types.js';
 
 export const allowedIcons = {
   // lucide icons
@@ -156,6 +157,7 @@ export const allowedIcons = {
   'link': Link,
   'list-filter-plus': ListFilterPlus,
   'list': List,
+  'list-tree': ListTree,
   'loader': LoaderCircle,
   'lock-open': LockOpen,
   'lock': Lock,

package/src/components/table/cellRenderers/ComboboxCellRenderer.test.tsx

@@ -1,11 +1,11 @@
-import { describe, expect, test, vi, afterEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { SuppressKeyboardEventParams } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { ComboboxCellRenderer } from './ComboboxCellRenderer.js';
 import type { ComboboxOption, ComboboxProps } from 'Components/combobox/types';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { ComboboxCellRenderer } from './ComboboxCellRenderer.js';
 
 const options: ComboboxOption[] = [
   { value: 'opt1', label: 'Option 1' },
@@ -104,6 +104,23 @@ describe('ComboboxCellRenderer', () => {
     expect(screen.getByRole('combobox')).toBeInTheDocument();
   });
 
+  test('renders selected tags for multiple button-trigger values', () => {
+    const { container } = render(
+      <ComboboxCellRenderer
+        {...createMockProps({
+          'value': ['opt1', 'opt2'],
+          'multiple': true,
+          'triggerVariant': 'button',
+          'aria-label': 'Choose tags',
+        })}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Choose tags' })).toBeInTheDocument();
+    expect(container.querySelector('.ds-combobox__button-tags-viewport .ds-tag-list')).toBeInTheDocument();
+    expect(container.querySelectorAll('.ds-combobox__button-tags-viewport .ds-tag')).toHaveLength(2);
+  });
+
   test('registers cellKeyDown listener on mount', () => {
     const addEventListener = vi.fn();
     const removeEventListener = vi.fn();

package/src/index.scss

@@ -20,6 +20,7 @@
 @use "components/formField/inputs/colourPickerDropdown/colourPickerDropdown.scss";
 @use "components/tag/tag.scss";
 @use "components/tagList/tagList.scss";
+@use "components/filterBar/filterBar.scss";
 @use "components/dot/dot.scss";
 @use "components/badge/badge.scss";
 @use "components/pill/pill.scss";

package/src/index.ts

@@ -11,6 +11,16 @@ export { DateTimePicker } from 'Components/dateTimePicker/DateTimePicker';
 export { Dot } from 'Components/dot/Dot';
 export { Dropdown } from 'Components/dropdown/Dropdown';
 export { EditableText } from 'Components/editableText/EditableText';
+export {
+  FilterBar,
+  type FilterBarActiveListProps,
+  type FilterBarButtonProps,
+  type FilterBarProps,
+  type FilterBarTagItem,
+  type FilterBarTagProps,
+  type FilterBarToolbarProps,
+  type FilterBarType,
+} from 'Components/filterBar/FilterBar';
 export { Fieldset } from 'Components/formField/fieldset/Fieldset';
 export { FormField } from 'Components/formField/FormField';
 export { CheckboxGroup } from 'Components/formField/inputs/checkbox/CheckboxGroup';

package/src/tokens.scss

@@ -476,6 +476,7 @@
   --banner-spacing-vertical: var(--spacing-large);
   --banner-spacing-horizontal: var(--spacing-large);
   --button-small-radius: var(--border-radius-round);
+  --button-toolbar-radius: var(--border-radius-small);
   --button-small-primary-focus-color-icon: var(--color-mono-white);
   --button-small-primary-focus-color-text: var(--color-mono-white);
   --button-small-primary-focus-color-background: var(--color-brand-600);

package/dist/components/combobox/useElementWidth.d.ts

@@ -1,2 +0,0 @@
-export declare const useElementWidth: (ref: React.RefObject<HTMLElement | null>, watchKey: string) => number;
-//# sourceMappingURL=useElementWidth.d.ts.map

package/dist/components/combobox/useElementWidth.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useElementWidth.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useElementWidth.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,UAAU,MAAM,KACf,MAkCF,CAAC"}

package/dist/components/combobox/useElementWidth.js

@@ -1,31 +0,0 @@
-import { useCallback, useLayoutEffect, useState } from 'react';
-export const useElementWidth = (ref, watchKey) => {
-    const [measurement, setMeasurement] = useState({ width: 0, hasMeasured: false });
-    const element = ref.current;
-    const update = useCallback(() => {
-        const currentElement = ref.current;
-        if (!currentElement) {
-            setMeasurement({ width: 0, hasMeasured: true });
-            return;
-        }
-        setMeasurement({
-            width: currentElement.getBoundingClientRect().width,
-            hasMeasured: true,
-        });
-    }, [ref]);
-    useLayoutEffect(() => {
-        // Re-run measurement when callers know the element's contents/layout inputs changed.
-        update();
-    }, [update, watchKey]);
-    useLayoutEffect(() => {
-        if (!element)
-            return;
-        const observer = new ResizeObserver(update);
-        observer.observe(element);
-        return () => {
-            observer.disconnect();
-        };
-    }, [element, update]);
-    return measurement.width;
-};
-//# sourceMappingURL=useElementWidth.js.map

package/dist/components/combobox/useElementWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useElementWidth.js","sourceRoot":"","sources":["../../../src/components/combobox/useElementWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,GAAwC,EACxC,QAAgB,EACR,EAAE;IACV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;IACjF,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;IAE5B,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;YAChD,OAAO;QACT,CAAC;QAED,cAAc,CAAC;YACb,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACnD,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,eAAe,CAAC,GAAG,EAAE;QACnB,qFAAqF;QACrF,MAAM,EAAE,CAAC;IACX,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE1B,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtB,OAAO,WAAW,CAAC,KAAK,CAAC;AAC3B,CAAC,CAAC"}

package/dist/components/combobox/useVisibleChips.d.ts

@@ -1,21 +0,0 @@
-type ComputeTriggerLayoutModelParams = {
-    containerWidth: number;
-    chipWidths: number[];
-    chipGap: number;
-    badgeWidth: number;
-    ellipsisWidth: number;
-    showBadge: boolean;
-    safetyBuffer?: number;
-};
-export type TriggerLayoutModel = {
-    visibleChipIndices: number[];
-    hiddenChipCount: number;
-    showBadge: boolean;
-    showEllipsis: boolean;
-    hasOverflow: boolean;
-};
-export declare const computeTriggerLayoutModel: ({ containerWidth, chipWidths, chipGap, badgeWidth, ellipsisWidth, showBadge, safetyBuffer, }: ComputeTriggerLayoutModelParams) => TriggerLayoutModel;
-type UseVisibleChipsParams = ComputeTriggerLayoutModelParams;
-export declare const useVisibleChips: (params: UseVisibleChipsParams) => TriggerLayoutModel;
-export {};
-//# sourceMappingURL=useVisibleChips.d.ts.map

package/dist/components/combobox/useVisibleChips.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useVisibleChips.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.ts"],"names":[],"mappings":"AAEA,KAAK,+BAA+B,GAAG;IACrC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAoBF,eAAO,MAAM,yBAAyB,GAAI,8FAQvC,+BAA+B,KAAG,kBAmCpC,CAAC;AAEF,KAAK,qBAAqB,GAAG,+BAA+B,CAAC;AAE7D,eAAO,MAAM,eAAe,GAAI,QAAQ,qBAAqB,KAAG,kBAc7D,CAAC"}

package/dist/components/combobox/useVisibleChips.js

@@ -1,59 +0,0 @@
-import { useMemo } from 'react';
-const fitCount = (availableWidth, chipWidths, chipGap) => {
-    if (availableWidth <= 0 || chipWidths.length === 0)
-        return 0;
-    let used = 0;
-    let count = 0;
-    for (let i = 0; i < chipWidths.length; i += 1) {
-        const required = chipWidths[i] + (i > 0 ? chipGap : 0);
-        if (used + required > availableWidth)
-            break;
-        used += required;
-        count += 1;
-    }
-    return count;
-};
-export const computeTriggerLayoutModel = ({ containerWidth, chipWidths, chipGap, badgeWidth, ellipsisWidth, showBadge, safetyBuffer = 1, }) => {
-    const selectedCount = chipWidths.length;
-    const shouldShowBadge = showBadge && selectedCount > 0;
-    if (selectedCount === 0 || containerWidth <= 0) {
-        return {
-            visibleChipIndices: [],
-            hiddenChipCount: 0,
-            showBadge: shouldShowBadge,
-            showEllipsis: false,
-            hasOverflow: false,
-        };
-    }
-    const badgeReserve = shouldShowBadge
-        ? badgeWidth + chipGap
-        : 0;
-    const availableWithoutEllipsis = Math.max(0, containerWidth - badgeReserve - safetyBuffer);
-    const countWithoutEllipsis = fitCount(availableWithoutEllipsis, chipWidths, chipGap);
-    const hasOverflow = countWithoutEllipsis < selectedCount;
-    const ellipsisReserve = hasOverflow
-        ? ellipsisWidth + chipGap
-        : 0;
-    const availableForChips = Math.max(0, containerWidth - badgeReserve - ellipsisReserve - safetyBuffer);
-    const visibleCount = fitCount(availableForChips, chipWidths, chipGap);
-    return {
-        visibleChipIndices: Array.from({ length: visibleCount }, (_, index) => index),
-        hiddenChipCount: Math.max(0, selectedCount - visibleCount),
-        showBadge: shouldShowBadge,
-        showEllipsis: visibleCount < selectedCount,
-        hasOverflow: visibleCount < selectedCount,
-    };
-};
-export const useVisibleChips = (params) => 
-// 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(() => computeTriggerLayoutModel(params), [
-    params.badgeWidth,
-    params.chipGap,
-    params.chipWidths,
-    params.containerWidth,
-    params.ellipsisWidth,
-    params.safetyBuffer,
-    params.showBadge,
-]);
-//# sourceMappingURL=useVisibleChips.js.map

package/dist/components/combobox/useVisibleChips.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useVisibleChips.js","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.ts"],"names":[],"mappings":"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"}

package/dist/components/combobox/useVisibleChips.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=useVisibleChips.test.d.ts.map

package/dist/components/combobox/useVisibleChips.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useVisibleChips.test.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.test.tsx"],"names":[],"mappings":""}

package/dist/components/combobox/useVisibleChips.test.js

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

package/dist/components/combobox/useVisibleChips.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useVisibleChips.test.js","sourceRoot":"","sources":["../../../src/components/combobox/useVisibleChips.test.tsx"],"names":[],"mappings":"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"}

package/src/components/combobox/useElementWidth.ts

@@ -1,40 +0,0 @@
-import { useCallback, useLayoutEffect, useState } from 'react';
-
-export const useElementWidth = (
-  ref: React.RefObject<HTMLElement | null>,
-  watchKey: string,
-): number => {
-  const [measurement, setMeasurement] = useState({ width: 0, hasMeasured: false });
-  const element = ref.current;
-
-  const update = useCallback(() => {
-    const currentElement = ref.current;
-    if (!currentElement) {
-      setMeasurement({ width: 0, hasMeasured: true });
-      return;
-    }
-
-    setMeasurement({
-      width: currentElement.getBoundingClientRect().width,
-      hasMeasured: true,
-    });
-  }, [ref]);
-
-  useLayoutEffect(() => {
-    // Re-run measurement when callers know the element's contents/layout inputs changed.
-    update();
-  }, [update, watchKey]);
-
-  useLayoutEffect(() => {
-    if (!element) return;
-
-    const observer = new ResizeObserver(update);
-    observer.observe(element);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [element, update]);
-
-  return measurement.width;
-};

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

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

package/src/components/combobox/useVisibleChips.ts

@@ -1,100 +0,0 @@
-import { useMemo } from 'react';
-
-type ComputeTriggerLayoutModelParams = {
-  containerWidth: number;
-  chipWidths: number[];
-  chipGap: number;
-  badgeWidth: number;
-  ellipsisWidth: number;
-  showBadge: boolean;
-  safetyBuffer?: number;
-};
-
-export type TriggerLayoutModel = {
-  visibleChipIndices: number[];
-  hiddenChipCount: number;
-  showBadge: boolean;
-  showEllipsis: boolean;
-  hasOverflow: boolean;
-};
-
-const fitCount = (
-  availableWidth: number,
-  chipWidths: number[],
-  chipGap: number,
-): number => {
-  if (availableWidth <= 0 || chipWidths.length === 0) return 0;
-
-  let used = 0;
-  let count = 0;
-  for (let i = 0; i < chipWidths.length; i += 1) {
-    const required = chipWidths[i]! + (i > 0 ? chipGap : 0);
-    if (used + required > availableWidth) break;
-    used += required;
-    count += 1;
-  }
-  return count;
-};
-
-export const computeTriggerLayoutModel = ({
-  containerWidth,
-  chipWidths,
-  chipGap,
-  badgeWidth,
-  ellipsisWidth,
-  showBadge,
-  safetyBuffer = 1,
-}: ComputeTriggerLayoutModelParams): TriggerLayoutModel => {
-  const selectedCount = chipWidths.length;
-  const shouldShowBadge = showBadge && selectedCount > 0;
-
-  if (selectedCount === 0 || containerWidth <= 0) {
-    return {
-      visibleChipIndices: [],
-      hiddenChipCount: 0,
-      showBadge: shouldShowBadge,
-      showEllipsis: false,
-      hasOverflow: false,
-    };
-  }
-
-  const badgeReserve = shouldShowBadge
-    ? badgeWidth + chipGap
-    : 0;
-
-  const availableWithoutEllipsis = Math.max(0, containerWidth - badgeReserve - safetyBuffer);
-  const countWithoutEllipsis = fitCount(availableWithoutEllipsis, chipWidths, chipGap);
-  const hasOverflow = countWithoutEllipsis < selectedCount;
-
-  const ellipsisReserve = hasOverflow
-    ? ellipsisWidth + chipGap
-    : 0;
-  const availableForChips = Math.max(0, containerWidth - badgeReserve - ellipsisReserve - safetyBuffer);
-  const visibleCount = fitCount(availableForChips, chipWidths, chipGap);
-
-  return {
-    visibleChipIndices: Array.from({ length: visibleCount }, (_, index) => index),
-    hiddenChipCount: Math.max(0, selectedCount - visibleCount),
-    showBadge: shouldShowBadge,
-    showEllipsis: visibleCount < selectedCount,
-    hasOverflow: visibleCount < selectedCount,
-  };
-};
-
-type UseVisibleChipsParams = ComputeTriggerLayoutModelParams;
-
-export const useVisibleChips = (params: UseVisibleChipsParams): TriggerLayoutModel =>
-  // 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(
-    () => computeTriggerLayoutModel(params),
-    [
-      params.badgeWidth,
-      params.chipGap,
-      params.chipWidths,
-      params.containerWidth,
-      params.ellipsisWidth,
-      params.safetyBuffer,
-      params.showBadge,
-    ],
-  );