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

package/dist/components/tagList/TagList.test.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Icon } from '../icon/Icon.js';
+import { useRef, useState } from 'react';
+import { describe, expect, test, vi } from 'vitest';
+import { TagList } from './TagList.js';
+const mockTagListCollapseRects = () => vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function mockRect() {
+    let width = 0;
+    if (this.classList.contains('ds-tag-list__viewport'))
+        width = 220;
+    else if (this.classList.contains('ds-tag-list__item'))
+        width = 72;
+    else if (this.classList.contains('ds-tag-list__overflow'))
+        width = 76;
+    return {
+        width,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: width,
+        bottom: 0,
+        x: 0,
+        y: 0,
+        toJSON() {
+            return {};
+        },
+    };
+});
+describe('TagList', () => {
+    test('renders empty state when there are no items', () => {
+        render(_jsx(TagList, { items: [], emptyState: _jsx("span", { children: "No filters set" }) }));
+        expect(screen.getByText('No filters set')).toBeInTheDocument();
+    });
+    test('calls the item action when a tag is clicked', async () => {
+        const onClick = vi.fn();
+        render(_jsx(TagList, { items: [{ id: 'attendance', children: 'Attendance', onClick }] }));
+        await userEvent.click(screen.getByRole('button', { name: 'Attendance' }));
+        expect(onClick).toHaveBeenCalledOnce();
+    });
+    test('forwards item-level aria-controls and aria-expanded to the tag action button', () => {
+        render(_jsx(TagList, { items: [
+                {
+                    id: 'attendance',
+                    children: 'Attendance',
+                    onClick: vi.fn(),
+                    ariaControls: 'filter-modal',
+                    ariaExpanded: true,
+                },
+            ] }));
+        expect(screen.getByRole('button', { name: 'Attendance' })).toHaveAttribute('aria-controls', 'filter-modal');
+        expect(screen.getByRole('button', { name: 'Attendance' })).toHaveAttribute('aria-expanded', 'true');
+    });
+    test('moves roving focus between interactive tags with arrow keys', async () => {
+        const user = userEvent.setup();
+        render(_jsx(TagList, { items: [
+                { id: 'attendance', children: 'Attendance', onClick: vi.fn() },
+                { id: 'registers', children: 'Registers', onClick: vi.fn() },
+                { id: 'interventions', children: 'Interventions', onClick: vi.fn() },
+            ] }));
+        await user.tab();
+        expect(screen.getByRole('button', { name: 'Attendance' })).toHaveFocus();
+        await user.keyboard('{ArrowRight}');
+        expect(screen.getByRole('button', { name: 'Registers' })).toHaveFocus();
+        await user.keyboard('{End}');
+        expect(screen.getByRole('button', { name: 'Interventions' })).toHaveFocus();
+    });
+    test('ArrowRight moves from the tag action to its remove button, then to the next tag', async () => {
+        const user = userEvent.setup();
+        render(_jsx(TagList, { items: [
+                {
+                    id: 'attendance',
+                    children: 'Attendance',
+                    onClick: vi.fn(),
+                    onRemove: vi.fn(),
+                    removeLabel: 'Remove Attendance',
+                },
+                {
+                    id: 'registers',
+                    children: 'Registers',
+                    onClick: vi.fn(),
+                },
+            ] }));
+        await user.tab();
+        expect(screen.getByRole('button', { name: 'Attendance' })).toHaveFocus();
+        expect(screen.getByRole('button', { name: 'Remove Attendance' })).toHaveAttribute('tabindex', '-1');
+        await user.keyboard('{ArrowRight}');
+        expect(screen.getByRole('button', { name: 'Remove Attendance' })).toHaveFocus();
+        expect(screen.getByRole('button', { name: 'Remove Attendance' })).toHaveAttribute('tabindex', '0');
+        await user.keyboard('{ArrowRight}');
+        expect(screen.getByRole('button', { name: 'Registers' })).toHaveFocus();
+    });
+    test('ArrowLeft moves from the remove button back to the tag action', async () => {
+        const user = userEvent.setup();
+        render(_jsx(TagList, { items: [
+                {
+                    id: 'attendance',
+                    children: 'Attendance',
+                    onClick: vi.fn(),
+                    onRemove: vi.fn(),
+                    removeLabel: 'Remove Attendance',
+                },
+            ] }));
+        await user.tab();
+        await user.keyboard('{ArrowRight}');
+        expect(screen.getByRole('button', { name: 'Remove Attendance' })).toHaveFocus();
+        await user.keyboard('{ArrowLeft}');
+        expect(screen.getByRole('button', { name: 'Attendance' })).toHaveFocus();
+    });
+    test('Delete triggers the focused tag remove callback', async () => {
+        const user = userEvent.setup();
+        const onRemove = vi.fn();
+        render(_jsx(TagList, { items: [
+                {
+                    id: 'attendance',
+                    children: 'Attendance',
+                    slotStart: _jsx(Icon, { name: "funnel", size: 12 }),
+                    onClick: vi.fn(),
+                    onRemove,
+                    removeLabel: 'Remove Attendance',
+                },
+            ] }));
+        await user.tab();
+        await user.keyboard('{Delete}');
+        expect(onRemove).toHaveBeenCalledOnce();
+    });
+    test('focuses the next available target after a removable tag is deleted', async () => {
+        const user = userEvent.setup();
+        const Example = () => {
+            const [itemIds, setItemIds] = useState(['attendance', 'registers']);
+            const items = itemIds.map(itemId => ({
+                id: itemId,
+                children: itemId === 'attendance' ? 'Attendance' : 'Registers',
+                onRemove: () => setItemIds(current => current.filter(id => id !== itemId)),
+                removeLabel: itemId === 'attendance' ? 'Remove Attendance' : 'Remove Registers',
+            }));
+            return _jsx(TagList, { items: items });
+        };
+        render(_jsx(Example, {}));
+        await user.tab();
+        expect(screen.getByRole('button', { name: 'Remove Attendance' })).toHaveFocus();
+        await user.click(screen.getByRole('button', { name: 'Remove Attendance' }));
+        expect(screen.getByRole('button', { name: 'Remove Registers' })).toHaveFocus();
+    });
+    test('returns focus to the provided fallback element when the last removable tag is deleted', async () => {
+        const user = userEvent.setup();
+        const Example = () => {
+            const [items, setItems] = useState([
+                {
+                    id: 'attendance',
+                    children: 'Attendance',
+                    onRemove: () => setItems([]),
+                    removeLabel: 'Remove Attendance',
+                },
+            ]);
+            const returnFocusRef = useRef(null);
+            return (_jsxs(_Fragment, { children: [_jsx(TagList, { items: items, returnFocusRef: returnFocusRef }), _jsx("button", { ref: returnFocusRef, type: "button", children: "Return home" })] }));
+        };
+        render(_jsx(Example, {}));
+        await user.tab();
+        expect(screen.getByRole('button', { name: 'Remove Attendance' })).toHaveFocus();
+        await user.click(screen.getByRole('button', { name: 'Remove Attendance' }));
+        expect(screen.getByRole('button', { name: 'Return home' })).toHaveFocus();
+    });
+    test('returns focus to the fallback element when the last removal unmounts TagList immediately', async () => {
+        const user = userEvent.setup();
+        const Example = () => {
+            const [items, setItems] = useState([
+                {
+                    id: 'attendance',
+                    children: 'Attendance',
+                    onRemove: () => setItems([]),
+                    removeLabel: 'Remove Attendance',
+                },
+            ]);
+            const returnFocusRef = useRef(null);
+            return (_jsxs(_Fragment, { children: [items.length > 0 && _jsx(TagList, { items: items, returnFocusRef: returnFocusRef }), _jsx("button", { ref: returnFocusRef, type: "button", children: "Return home" })] }));
+        };
+        render(_jsx(Example, {}));
+        await user.tab();
+        expect(screen.getByRole('button', { name: 'Remove Attendance' })).toHaveFocus();
+        await user.click(screen.getByRole('button', { name: 'Remove Attendance' }));
+        expect(screen.getByRole('button', { name: 'Return home' })).toHaveFocus();
+    });
+    test('deleting a focused remove button in the composite model focuses the next available tag target', async () => {
+        const user = userEvent.setup();
+        const Example = () => {
+            const [itemIds, setItemIds] = useState(['attendance', 'registers']);
+            const items = itemIds.map(itemId => ({
+                id: itemId,
+                children: itemId === 'attendance' ? 'Attendance' : 'Registers',
+                onClick: vi.fn(),
+                onRemove: itemId === 'attendance'
+                    ? () => setItemIds(current => current.filter(id => id !== itemId))
+                    : undefined,
+                removeLabel: itemId === 'attendance' ? 'Remove Attendance' : undefined,
+            }));
+            return _jsx(TagList, { items: items });
+        };
+        render(_jsx(Example, {}));
+        await user.tab();
+        expect(screen.getByRole('button', { name: 'Attendance' })).toHaveFocus();
+        await user.keyboard('{ArrowRight}');
+        expect(screen.getByRole('button', { name: 'Remove Attendance' })).toHaveFocus();
+        await user.keyboard('{Delete}');
+        expect(screen.getByRole('button', { name: 'Registers' })).toHaveFocus();
+    });
+    test('collapses overflowing items into a trailing summary', () => {
+        const rectSpy = mockTagListCollapseRects();
+        try {
+            render(_jsx(TagList, { collapseOverflow: true, items: [
+                    { id: 'date', children: 'Wed, 05 Feb 2025 AM' },
+                    { id: 'registers', children: 'Attendance registers' },
+                    { id: 'interventions', children: 'Interventions' },
+                    { id: 'exclusions', children: 'Internal exclusions' },
+                ] }));
+            expect(screen.getByText('+3 more')).toBeInTheDocument();
+        }
+        finally {
+            rectSpy.mockRestore();
+        }
+    });
+    test('makes the +N more summary focusable and clickable when an overflow action is provided', async () => {
+        const user = userEvent.setup();
+        const onOverflowClick = vi.fn();
+        const rectSpy = mockTagListCollapseRects();
+        try {
+            render(_jsx(TagList, { collapseOverflow: true, overflowOnClick: onOverflowClick, overflowActionLabel: "Show more filters", items: [
+                    { id: 'date', children: 'Wed, 05 Feb 2025 AM', onClick: vi.fn() },
+                    { id: 'registers', children: 'Attendance registers', onClick: vi.fn() },
+                    { id: 'interventions', children: 'Interventions', onClick: vi.fn() },
+                    { id: 'exclusions', children: 'Internal exclusions', onClick: vi.fn() },
+                ] }));
+            await user.tab();
+            await user.keyboard('{ArrowRight}');
+            expect(screen.getByRole('button', { name: 'Show more filters' })).toHaveFocus();
+            await user.keyboard('{Enter}');
+            expect(onOverflowClick).toHaveBeenCalledOnce();
+        }
+        finally {
+            rectSpy.mockRestore();
+        }
+    });
+});
+//# sourceMappingURL=TagList.test.js.map

package/dist/components/tagList/TagList.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagList.test.js","sourceRoot":"","sources":["../../../src/components/tagList/TagList.test.tsx"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,wBAAwB,GAAG,GAAG,EAAE,CACpC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,uBAAuB,CAAC,CAAC,kBAAkB,CAAC,SAAS,QAAQ;IAC3F,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,uBAAuB,CAAC;QAAE,KAAK,GAAG,GAAG,CAAC;SAC7D,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC;QAAE,KAAK,GAAG,EAAE,CAAC;SAC7D,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,uBAAuB,CAAC;QAAE,KAAK,GAAG,EAAE,CAAC;IAEtE,OAAO;QACL,KAAK;QACL,MAAM,EAAE,CAAC;QACT,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,CAAC;QACT,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,MAAM;YACJ,OAAO,EAAE,CAAC;QACZ,CAAC;KACS,CAAC;AACf,CAAC,CAAC,CAAC;AAEL,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,IAAI,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACvD,MAAM,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,4CAA2B,GAAI,CAAC,CAAC;QACxE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QACxB,MAAM,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,GAAI,CAAC,CAAC;QAEpF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC;QAC1E,MAAM,CAAC,OAAO,CAAC,CAAC,oBAAoB,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,8EAA8E,EAAE,GAAG,EAAE;QACxF,MAAM,CACJ,KAAC,OAAO,IACN,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,YAAY;oBAChB,QAAQ,EAAE,YAAY;oBACtB,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE;oBAChB,YAAY,EAAE,cAAc;oBAC5B,YAAY,EAAE,IAAI;iBACnB;aACF,GACD,CACH,CAAC;QAEF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;QAC5G,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IACtG,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC7E,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,CACJ,KAAC,OAAO,IACN,KAAK,EAAE;gBACL,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;gBAC9D,EAAE,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;gBAC5D,EAAE,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;aACrE,GACD,CACH,CAAC;QAEF,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAEzE,MAAM,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACpC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAExE,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC7B,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC9E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iFAAiF,EAAE,KAAK,IAAI,EAAE;QACjG,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,CACJ,KAAC,OAAO,IACN,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,YAAY;oBAChB,QAAQ,EAAE,YAAY;oBACtB,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE;oBAChB,QAAQ,EAAE,EAAE,CAAC,EAAE,EAAE;oBACjB,WAAW,EAAE,mBAAmB;iBACjC;gBACD;oBACE,EAAE,EAAE,WAAW;oBACf,QAAQ,EAAE,WAAW;oBACrB,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE;iBACjB;aACF,GACD,CACH,CAAC;QAEF,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QACzE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QAEpG,MAAM,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACpC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAChF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAEnG,MAAM,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACpC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,CACJ,KAAC,OAAO,IACN,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,YAAY;oBAChB,QAAQ,EAAE,YAAY;oBACtB,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE;oBAChB,QAAQ,EAAE,EAAE,CAAC,EAAE,EAAE;oBACjB,WAAW,EAAE,mBAAmB;iBACjC;aACF,GACD,CACH,CAAC;QAEF,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,MAAM,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACpC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAEhF,MAAM,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACnC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC3E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QACzB,MAAM,CACJ,KAAC,OAAO,IACN,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,YAAY;oBAChB,QAAQ,EAAE,YAAY;oBACtB,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,EAAE,GAAI;oBAC3C,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE;oBAChB,QAAQ;oBACR,WAAW,EAAE,mBAAmB;iBACjC;aACF,GACD,CACH,CAAC;QAEF,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,MAAM,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QAEhC,MAAM,CAAC,QAAQ,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;QAE/B,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;YACpE,MAAM,KAAK,GAAmB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBACnD,EAAE,EAAE,MAAM;gBACV,QAAQ,EAAE,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW;gBAC9D,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;gBAC1E,WAAW,EAAE,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,kBAAkB;aAChF,CAAC,CAAC,CAAC;YAEJ,OAAO,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;QACnC,CAAC,CAAC;QAEF,MAAM,CAAC,KAAC,OAAO,KAAG,CAAC,CAAC;QAEpB,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAEhF,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC;QAC5E,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACjF,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uFAAuF,EAAE,KAAK,IAAI,EAAE;QACvG,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;QAE/B,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB;gBACjD;oBACE,EAAE,EAAE,YAAY;oBAChB,QAAQ,EAAE,YAAY;oBACtB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC5B,WAAW,EAAE,mBAAmB;iBACjC;aACF,CAAC,CAAC;YACH,MAAM,cAAc,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;YAEvD,OAAO,CACL,8BACE,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,GAAI,EACzD,iBAAQ,GAAG,EAAE,cAAc,EAAE,IAAI,EAAC,QAAQ,4BAEjC,IACR,CACJ,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,CAAC,KAAC,OAAO,KAAG,CAAC,CAAC;QAEpB,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAEhF,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC;QAC5E,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0FAA0F,EAAE,KAAK,IAAI,EAAE;QAC1G,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;QAE/B,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB;gBACjD;oBACE,EAAE,EAAE,YAAY;oBAChB,QAAQ,EAAE,YAAY;oBACtB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC5B,WAAW,EAAE,mBAAmB;iBACjC;aACF,CAAC,CAAC;YACH,MAAM,cAAc,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;YAEvD,OAAO,CACL,8BACG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,GAAI,EAC9E,iBAAQ,GAAG,EAAE,cAAc,EAAE,IAAI,EAAC,QAAQ,4BAEjC,IACR,CACJ,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,CAAC,KAAC,OAAO,KAAG,CAAC,CAAC;QAEpB,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAEhF,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC;QAC5E,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+FAA+F,EAAE,KAAK,IAAI,EAAE;QAC/G,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;QAE/B,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;YACpE,MAAM,KAAK,GAAmB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBACnD,EAAE,EAAE,MAAM;gBACV,QAAQ,EAAE,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW;gBAC9D,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE;gBAChB,QAAQ,EAAE,MAAM,KAAK,YAAY;oBAC/B,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;oBAClE,CAAC,CAAC,SAAS;gBACb,WAAW,EAAE,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS;aACvE,CAAC,CAAC,CAAC;YAEJ,OAAO,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;QACnC,CAAC,CAAC;QAEF,MAAM,CAAC,KAAC,OAAO,KAAG,CAAC,CAAC;QAEpB,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAEzE,MAAM,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACpC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAEhF,MAAM,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QAChC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC/D,MAAM,OAAO,GAAG,wBAAwB,EAAE,CAAC;QAE3C,IAAI,CAAC;YACH,MAAM,CACJ,KAAC,OAAO,IACN,gBAAgB,QAChB,KAAK,EAAE;oBACL,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,EAAE;oBAC/C,EAAE,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,sBAAsB,EAAE;oBACrD,EAAE,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE;oBAClD,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,qBAAqB,EAAE;iBACtD,GACD,CACH,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC1D,CAAC;gBACO,CAAC;YACP,OAAO,CAAC,WAAW,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uFAAuF,EAAE,KAAK,IAAI,EAAE;QACvG,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,eAAe,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAChC,MAAM,OAAO,GAAG,wBAAwB,EAAE,CAAC;QAE3C,IAAI,CAAC;YACH,MAAM,CACJ,KAAC,OAAO,IACN,gBAAgB,QAChB,eAAe,EAAE,eAAe,EAChC,mBAAmB,EAAC,mBAAmB,EACvC,KAAK,EAAE;oBACL,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;oBACjE,EAAE,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;oBACvE,EAAE,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;oBACpE,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,qBAAqB,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;iBACxE,GACD,CACH,CAAC;YAEF,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;YACjB,MAAM,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;YACpC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;YAEhF,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;YAC/B,MAAM,CAAC,eAAe,CAAC,CAAC,oBAAoB,EAAE,CAAC;QACjD,CAAC;gBACO,CAAC;YACP,OAAO,CAAC,WAAW,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/tagList/useTagListCollapsedLayout.d.ts

@@ -0,0 +1,19 @@
+import type { TagListItem, TagListOverflowRenderArgs } from './TagList.js';
+type UseTagListCollapsedLayoutParams = {
+    items: TagListItem[];
+    wrap: boolean;
+    collapseOverflow: boolean;
+};
+type TagListCollapsedLayout = {
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    measureTrackRef: React.RefObject<HTMLUListElement | null>;
+    overflowProbeRef: React.RefObject<HTMLDivElement | null>;
+    shouldCollapse: boolean;
+    visibleItemIndices: number[];
+    visibleItems: TagListItem[];
+    hiddenItemCount: number;
+    overflowArgs: TagListOverflowRenderArgs;
+};
+export declare const useTagListCollapsedLayout: ({ items, wrap, collapseOverflow, }: UseTagListCollapsedLayoutParams) => TagListCollapsedLayout;
+export {};
+//# sourceMappingURL=useTagListCollapsedLayout.d.ts.map

package/dist/components/tagList/useTagListCollapsedLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTagListCollapsedLayout.d.ts","sourceRoot":"","sources":["../../../src/components/tagList/useTagListCollapsedLayout.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAG3E,KAAK,+BAA+B,GAAG;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC1D,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACzD,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,yBAAyB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,oCAIvC,+BAA+B,KAAG,sBAuDpC,CAAC"}

package/dist/components/tagList/useTagListCollapsedLayout.js

@@ -0,0 +1,48 @@
+import { useMemo, useRef } from 'react';
+import { useMeasuredChildWidths } from '../../utils/hooks/useMeasuredChildWidths.js';
+import { useElementWidth } from '../../utils/hooks/useElementWidth.js';
+import { useVisibleTags } from './useVisibleTags.js';
+export const useTagListCollapsedLayout = ({ items, wrap, collapseOverflow, }) => {
+    const contentRef = useRef(null);
+    const measureTrackRef = useRef(null);
+    const overflowProbeRef = useRef(null);
+    const shouldCollapse = collapseOverflow && !wrap && items.length > 0;
+    const itemWatchKey = useMemo(() => items.map(item => item.id).join('|'), [items]);
+    const contentWidth = useElementWidth(contentRef, itemWatchKey);
+    const overflowProbeWidth = useElementWidth(overflowProbeRef, `${itemWatchKey}-overflow`);
+    const { childGap: itemGap, childWidths: itemWidths } = useMeasuredChildWidths(measureTrackRef, itemWatchKey);
+    const layout = useVisibleTags({
+        containerWidth: contentWidth,
+        itemWidths,
+        itemGap,
+        overflowWidth: overflowProbeWidth,
+        allowOverflow: shouldCollapse,
+    });
+    const canMeasureCollapsedLayout = shouldCollapse
+        && contentWidth > 0
+        && itemWidths.length === items.length
+        && overflowProbeWidth > 0;
+    const visibleItemIndices = useMemo(() => canMeasureCollapsedLayout
+        ? layout.visibleItemIndices
+        : items.map((_, index) => index), [canMeasureCollapsedLayout, items, layout.visibleItemIndices]);
+    const hiddenItemCount = canMeasureCollapsedLayout ? layout.hiddenItemCount : 0;
+    const visibleItems = visibleItemIndices
+        .map(index => items[index])
+        .filter((item) => item != null);
+    const overflowArgs = useMemo(() => ({
+        hiddenItemCount,
+        totalItemCount: items.length,
+        visibleItemCount: visibleItems.length,
+    }), [hiddenItemCount, items.length, visibleItems.length]);
+    return {
+        contentRef,
+        measureTrackRef,
+        overflowProbeRef,
+        shouldCollapse,
+        visibleItemIndices,
+        visibleItems,
+        hiddenItemCount,
+        overflowArgs,
+    };
+};
+//# sourceMappingURL=useTagListCollapsedLayout.js.map

package/dist/components/tagList/useTagListCollapsedLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTagListCollapsedLayout.js","sourceRoot":"","sources":["../../../src/components/tagList/useTagListCollapsedLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAmBrD,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EACxC,KAAK,EACL,IAAI,EACJ,gBAAgB,GACgB,EAA0B,EAAE;IAC5D,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,MAAM,cAAc,GAAG,gBAAgB,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACrE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAElF,MAAM,YAAY,GAAG,eAAe,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,eAAe,CAAC,gBAAgB,EAAE,GAAG,YAAY,WAAW,CAAC,CAAC;IACzF,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,sBAAsB,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;IAE7G,MAAM,MAAM,GAAG,cAAc,CAAC;QAC5B,cAAc,EAAE,YAAY;QAC5B,UAAU;QACV,OAAO;QACP,aAAa,EAAE,kBAAkB;QACjC,aAAa,EAAE,cAAc;KAC9B,CAAC,CAAC;IAEH,MAAM,yBAAyB,GAAG,cAAc;WAC3C,YAAY,GAAG,CAAC;WAChB,UAAU,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM;WAClC,kBAAkB,GAAG,CAAC,CAAC;IAE5B,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CACH,yBAAyB;QACvB,CAAC,CAAC,MAAM,CAAC,kBAAkB;QAC3B,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EACpC,CAAC,yBAAyB,EAAE,KAAK,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAC9D,CAAC;IACF,MAAM,eAAe,GAAG,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/E,MAAM,YAAY,GAAG,kBAAkB;SACpC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SAC1B,MAAM,CAAC,CAAC,IAAI,EAAuB,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,OAAO,CAC1B,GAA8B,EAAE,CAAC,CAAC;QAChC,eAAe;QACf,cAAc,EAAE,KAAK,CAAC,MAAM;QAC5B,gBAAgB,EAAE,YAAY,CAAC,MAAM;KACtC,CAAC,EACF,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,CACrD,CAAC;IAEF,OAAO;QACL,UAAU;QACV,eAAe;QACf,gBAAgB;QAChB,cAAc;QACd,kBAAkB;QAClB,YAAY;QACZ,eAAe;QACf,YAAY;KACb,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/tagList/useVisibleTags.d.ts

@@ -0,0 +1,18 @@
+type ComputeVisibleTagsLayoutParams = {
+    containerWidth: number;
+    itemWidths: number[];
+    itemGap: number;
+    overflowWidth: number;
+    allowOverflow: boolean;
+    safetyBuffer?: number;
+};
+export type VisibleTagsLayout = {
+    visibleItemIndices: number[];
+    hiddenItemCount: number;
+    hasOverflow: boolean;
+};
+export declare const computeVisibleTagsLayout: ({ containerWidth, itemWidths, itemGap, overflowWidth, allowOverflow, safetyBuffer, }: ComputeVisibleTagsLayoutParams) => VisibleTagsLayout;
+type UseVisibleTagsParams = ComputeVisibleTagsLayoutParams;
+export declare const useVisibleTags: (params: UseVisibleTagsParams) => VisibleTagsLayout;
+export {};
+//# sourceMappingURL=useVisibleTags.d.ts.map

package/dist/components/tagList/useVisibleTags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleTags.d.ts","sourceRoot":"","sources":["../../../src/components/tagList/useVisibleTags.ts"],"names":[],"mappings":"AAGA,KAAK,8BAA8B,GAAG;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,sFAOtC,8BAA8B,KAAG,iBAiCnC,CAAC;AAEF,KAAK,oBAAoB,GAAG,8BAA8B,CAAC;AAE3D,eAAO,MAAM,cAAc,GAAI,QAAQ,oBAAoB,KAAG,iBAW3D,CAAC"}

package/dist/components/tagList/useVisibleTags.js

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { sumSpacedWidths } from '../../utils/spacedWidths.js';
+export const computeVisibleTagsLayout = ({ containerWidth, itemWidths, itemGap, overflowWidth, allowOverflow, safetyBuffer = 1, }) => {
+    const totalItemCount = itemWidths.length;
+    if (totalItemCount === 0 || containerWidth <= 0) {
+        return {
+            visibleItemIndices: [],
+            hiddenItemCount: 0,
+            hasOverflow: false,
+        };
+    }
+    for (let visibleItemCount = totalItemCount; visibleItemCount >= 0; visibleItemCount -= 1) {
+        const hiddenItemCount = totalItemCount - visibleItemCount;
+        const hasOverflow = hiddenItemCount > 0;
+        const overflowReserve = hasOverflow && allowOverflow
+            ? overflowWidth + (visibleItemCount > 0 ? itemGap : 0)
+            : 0;
+        const requiredWidth = sumSpacedWidths(itemWidths, itemGap, visibleItemCount) + overflowReserve;
+        if (requiredWidth <= Math.max(0, containerWidth - safetyBuffer)) {
+            return {
+                visibleItemIndices: Array.from({ length: visibleItemCount }, (_, index) => index),
+                hiddenItemCount,
+                hasOverflow,
+            };
+        }
+    }
+    return {
+        visibleItemIndices: [],
+        hiddenItemCount: totalItemCount,
+        hasOverflow: allowOverflow,
+    };
+};
+export const useVisibleTags = (params) => useMemo(() => computeVisibleTagsLayout(params), [
+    params.allowOverflow,
+    params.containerWidth,
+    params.itemGap,
+    params.itemWidths,
+    params.overflowWidth,
+    params.safetyBuffer,
+]);
+//# sourceMappingURL=useVisibleTags.js.map

package/dist/components/tagList/useVisibleTags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleTags.js","sourceRoot":"","sources":["../../../src/components/tagList/useVisibleTags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAiBrD,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,cAAc,EACd,UAAU,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,GAAG,CAAC,GACe,EAAqB,EAAE;IACtD,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC;IAEzC,IAAI,cAAc,KAAK,CAAC,IAAI,cAAc,IAAI,CAAC,EAAE,CAAC;QAChD,OAAO;YACL,kBAAkB,EAAE,EAAE;YACtB,eAAe,EAAE,CAAC;YAClB,WAAW,EAAE,KAAK;SACnB,CAAC;IACJ,CAAC;IAED,KAAK,IAAI,gBAAgB,GAAG,cAAc,EAAE,gBAAgB,IAAI,CAAC,EAAE,gBAAgB,IAAI,CAAC,EAAE,CAAC;QACzF,MAAM,eAAe,GAAG,cAAc,GAAG,gBAAgB,CAAC;QAC1D,MAAM,WAAW,GAAG,eAAe,GAAG,CAAC,CAAC;QACxC,MAAM,eAAe,GAAG,WAAW,IAAI,aAAa;YAClD,CAAC,CAAC,aAAa,GAAG,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,CAAC,CAAC,CAAC,CAAC;QACN,MAAM,aAAa,GAAG,eAAe,CAAC,UAAU,EAAE,OAAO,EAAE,gBAAgB,CAAC,GAAG,eAAe,CAAC;QAE/F,IAAI,aAAa,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,cAAc,GAAG,YAAY,CAAC,EAAE,CAAC;YAChE,OAAO;gBACL,kBAAkB,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC;gBACjF,eAAe;gBACf,WAAW;aACZ,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO;QACL,kBAAkB,EAAE,EAAE;QACtB,eAAe,EAAE,cAAc;QAC/B,WAAW,EAAE,aAAa;KAC3B,CAAC;AACJ,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAA4B,EAAqB,EAAE,CAChF,OAAO,CACL,GAAG,EAAE,CAAC,wBAAwB,CAAC,MAAM,CAAC,EACtC;IACE,MAAM,CAAC,aAAa;IACpB,MAAM,CAAC,cAAc;IACrB,MAAM,CAAC,OAAO;IACd,MAAM,CAAC,UAAU;IACjB,MAAM,CAAC,aAAa;IACpB,MAAM,CAAC,YAAY;CACpB,CACF,CAAC"}

package/dist/index.css

@@ -439,6 +439,7 @@
   --font-weight-medium: 500;
   --font-weight-regular: 400;
   --font-weight-semi-bold: 600;
+  --size-control-2xs: 1.75rem;
   --size-control-xsmall: 2rem;
   --size-control-small: 2.25rem;
   --size-control-medium: 3rem;
@@ -658,7 +659,7 @@
   --tag-spacing-gap-horizontal: var(--spacing-small);
   --tag-selected-color-background: var(--color-grey-200);
   --tag-selected-color-border: var(--color-grey-200);
-  --tag-height: var(--size-control-xsmall);
+  --tag-height: var(--size-control-2xs);
   --card-focus-color-icon: var(--color-grey-900);
   --card-focus-color-text: var(--color-grey-900);
   --card-focus-color-border: var(--color-grey-100);
@@ -2697,7 +2698,6 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
 
 .ds-tag {
   display: inline-flex;
-  padding: 0 var(--tag-spacing-horizontal);
   align-items: center;
   gap: var(--tag-spacing-gap-horizontal);
   border-radius: var(--tag-radius);
@@ -2710,6 +2710,7 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   height: var(--tag-height);
   font-style: normal;
   line-height: 150%;
+  overflow: visible;
 }
 .ds-tag--neutral {
   color: var(--tag-neutral-color-text);
@@ -2748,6 +2749,61 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   color: var(--tag-neutral-color-text);
   border-color: var(--tag-selected-color-border);
 }
+.ds-tag .ds-tag__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-tag--disabled {
+  opacity: 0.6;
+}
+
+.ds-tag__content {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--tag-spacing-horizontal);
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+.ds-tag__action {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.ds-tag__action:focus {
+  outline: none;
+}
+.ds-tag__action:focus-visible {
+  outline: none;
+  background-color: var(--color-grey-100);
+}
+.ds-tag__action:hover {
+  background-color: var(--color-grey-100);
+}
+.ds-tag__action:disabled {
+  cursor: not-allowed;
+}
+
+.ds-tag--removable {
+  gap: 0;
+}
+.ds-tag--removable .ds-tag__label {
+  padding: 0 var(--tag-spacing-horizontal) 0 0;
+}
+.ds-tag--removable .ds-tag__content {
+  gap: var(--tag-spacing-horizontal);
+  padding-right: 0;
+}
+
+.ds-tag:has(.ds-tag__action:focus-visible) {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+  outline-offset: 2px;
+}
 
 .ds-tag__slot-start {
   display: flex;
@@ -2755,11 +2811,6 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   flex-shrink: 0;
 }
 
-.ds-tag__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .ds-tag__slot-end {
   display: flex;
   align-items: center;
@@ -2767,25 +2818,94 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
 }
 
 .ds-tag__remove {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   background: transparent;
+  align-self: stretch;
+  min-width: calc(var(--tag-height) - var(--border-weight) * 2);
   padding: 0;
   cursor: pointer;
   color: inherit;
-  border-radius: 50%;
+  border-radius: var(--tag-radius);
   flex-shrink: 0;
+  line-height: 0;
+}
+.ds-tag__remove:focus {
+  outline: none;
+}
+.ds-tag__remove:focus-visible {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+  outline-offset: 2px;
+  border-radius: var(--tag-radius);
+  background-color: var(--color-grey-100);
 }
 .ds-tag__remove:hover {
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-100);
 }
 .ds-tag__remove:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
+.ds-tag-list {
+  min-width: 0;
+}
+
+.ds-tag-list--empty {
+  min-width: 0;
+}
+
+.ds-tag-list__viewport {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  min-width: 0;
+  padding-block: var(--focus-border);
+  margin-block: calc(var(--focus-border) * -1);
+}
+
+.ds-tag-list__viewport--clip {
+  overflow-x: hidden;
+}
+
+.ds-tag-list__list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-tag-list__list--wrap {
+  flex-wrap: wrap;
+}
+
+.ds-tag-list__item {
+  min-width: 0;
+}
+
+.ds-tag-list__overflow {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-tag-list__measure {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  left: -9999px;
+  top: -9999px;
+  white-space: nowrap;
+  width: max-content;
+  height: 0;
+  overflow: hidden;
+}
+
 .ds-dot {
   display: inline-block;
   width: 10px;