@carto/ps-react-ui 5.1.0 → 6.0.0

package/src/widgets-v2/category/category-ui.test.tsx

@@ -1,909 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { fireEvent, render, screen, within } from '@testing-library/react'
-import { CategoryUI } from './category-ui'
-
-describe('<CategoryUI>', () => {
-  // ── Rendering basics ────────────────────────────────────────────────
-  describe('rendering', () => {
-    it('renders one row per item with name + value', () => {
-      render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'A', value: 10 },
-              { name: 'B', value: 20 },
-            ],
-          ]}
-        />,
-      )
-      expect(screen.getByText('A')).toBeTruthy()
-      expect(screen.getByText('B')).toBeTruthy()
-      expect(screen.getByText('10')).toBeTruthy()
-      expect(screen.getByText('20')).toBeTruthy()
-      expect(screen.getAllByRole('button')).toHaveLength(2)
-    })
-
-    it('returns null when data is empty (no rows, no container)', () => {
-      const { container } = render(<CategoryUI data={[]} />)
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('returns null when all series are empty', () => {
-      const { container } = render(<CategoryUI data={[[], [], []]} />)
-      expect(container.firstChild).toBeNull()
-    })
-  })
-
-  // ── maxItems + "Other" overflow ────────────────────────────────────
-  describe('maxItems + Other row', () => {
-    const oneToTwelve = () =>
-      Array.from({ length: 12 }, (_, i) => ({
-        name: `n${i}`,
-        value: 12 - i,
-      }))
-
-    it('defaults to 20 → no Other row when data fits', () => {
-      render(<CategoryUI data={[oneToTwelve()]} />)
-      expect(screen.queryByText(/more/)).toBeNull()
-      expect(screen.getAllByRole('button')).toHaveLength(12)
-    })
-
-    it('default caps at 20 when data exceeds it → "Others <count>" footer', () => {
-      const twentyFive = Array.from({ length: 25 }, (_, i) => ({
-        name: `n${i}`,
-        value: 25 - i,
-      }))
-      render(<CategoryUI data={[twentyFive]} />)
-      expect(screen.getAllByRole('button')).toHaveLength(20)
-      expect(screen.getByText('Others')).toBeTruthy()
-      expect(screen.getByText('5')).toBeTruthy()
-    })
-
-    it('maxItems=null → no cap, no scroll (canonical form)', () => {
-      // Explicit opt-out from both the default cap AND the searcher's
-      // scroll viewport. `null` is required because `undefined` resolves
-      // to the 20-row default-parameter value.
-      const twentyFive = Array.from({ length: 25 }, (_, i) => ({
-        name: `n${i}`,
-        value: 25 - i,
-      }))
-      const { container } = render(
-        <CategoryUI data={[twentyFive]} maxItems={null} />,
-      )
-      expect(screen.queryByText('Others')).toBeNull()
-      expect(screen.getAllByRole('button')).toHaveLength(25)
-      const root = container.firstChild as HTMLElement
-      const list = root.firstChild as HTMLElement
-      expect(list.style.maxHeight).toBe('')
-      expect(list.style.overflowY).toBe('')
-    })
-
-    it('maxItems=Infinity also yields no cap, no scroll (alias)', () => {
-      const twentyFive = Array.from({ length: 25 }, (_, i) => ({
-        name: `n${i}`,
-        value: 25 - i,
-      }))
-      render(
-        <CategoryUI data={[twentyFive]} maxItems={Number.POSITIVE_INFINITY} />,
-      )
-      expect(screen.queryByText('Others')).toBeNull()
-      expect(screen.getAllByRole('button')).toHaveLength(25)
-    })
-
-    it('slices to maxItems and shows "Others <count>" footer', () => {
-      render(<CategoryUI data={[oneToTwelve()]} maxItems={5} />)
-      expect(screen.getAllByRole('button')).toHaveLength(5)
-      expect(screen.getByText('Others')).toBeTruthy()
-      expect(screen.getByText('7')).toBeTruthy()
-    })
-
-    it('onShowAll makes the Other row a button that fires the callback', () => {
-      const onShowAll = vi.fn()
-      render(
-        <CategoryUI
-          data={[oneToTwelve()]}
-          maxItems={5}
-          onShowAll={onShowAll}
-        />,
-      )
-      // 5 category rows + the now-interactive "Others" row = 6 buttons.
-      const buttons = screen.getAllByRole('button')
-      expect(buttons).toHaveLength(6)
-      fireEvent.click(screen.getByText('Others'))
-      expect(onShowAll).toHaveBeenCalledTimes(1)
-    })
-
-    it('maxItems=0 is the no-cap-with-scroll sentinel: every row renders inside a fixed scroll viewport', () => {
-      // `0` is the composer-driven "disable pagination" sentinel —
-      // used e.g. when the SearcherToggle is open so the search filter
-      // has the full dataset to chew through. The "Other" footer is
-      // suppressed because nothing is hidden, and the list locks to a
-      // scrollable viewport so the widget card height stays stable.
-      const { container } = render(
-        <CategoryUI data={[oneToTwelve()]} maxItems={0} />,
-      )
-      expect(screen.getAllByRole('button')).toHaveLength(12)
-      expect(screen.queryByText('Others')).toBeNull()
-      expect(screen.queryByText(/more/)).toBeNull()
-      // List has the scroll viewport inline style applied.
-      const root = container.firstChild as HTMLElement
-      const list = root.firstChild as HTMLElement
-      expect(list.style.maxHeight).not.toBe('')
-      expect(list.style.overflowY).toBe('auto')
-    })
-
-    // ── Natural-height measurement ────────────────────────────────
-    //
-    // Scroll mode (`maxItems === 0`) sizes its viewport from the
-    // list's `clientHeight` measured on the first render where the
-    // list was NOT in scroll mode (i.e., the capped view). jsdom's
-    // layout engine reports `clientHeight === 0`, so the tests stub
-    // it on `HTMLDivElement.prototype` for the renders they care
-    // about.
-    describe('scroll mode height (measure-once)', () => {
-      const stubClientHeight = (value: number) => {
-        Object.defineProperty(HTMLDivElement.prototype, 'clientHeight', {
-          configurable: true,
-          get: () => value,
-        })
-      }
-      const restoreClientHeight = () => {
-        // Delete the stub so other tests aren't affected.
-        delete (HTMLDivElement.prototype as { clientHeight?: unknown })
-          .clientHeight
-      }
-
-      it('locks scroll viewport to the capped view height after the user toggles into scroll mode', () => {
-        stubClientHeight(240)
-        try {
-          const { rerender, container } = render(
-            <CategoryUI data={[oneToTwelve()]} maxItems={5} />,
-          )
-          // First render: capped, no scroll lock. Effect measures 240.
-          const root = container.firstChild as HTMLElement
-          const list = root.firstChild as HTMLElement
-          expect(list.style.maxHeight).toBe('')
-          // Composer flips to scroll mode → viewport uses the measured
-          // 240px, NOT the hard-coded fallback.
-          rerender(<CategoryUI data={[oneToTwelve()]} maxItems={0} />)
-          expect(list.style.maxHeight).toBe('240px')
-          expect(list.style.overflowY).toBe('auto')
-        } finally {
-          restoreClientHeight()
-        }
-      })
-
-      it('freezes the lock anchor: subsequent re-measures while in scroll mode are ignored', () => {
-        stubClientHeight(180)
-        try {
-          const { rerender, container } = render(
-            <CategoryUI data={[oneToTwelve()]} maxItems={5} />,
-          )
-          const root = container.firstChild as HTMLElement
-          const list = root.firstChild as HTMLElement
-          rerender(<CategoryUI data={[oneToTwelve()]} maxItems={0} />)
-          expect(list.style.maxHeight).toBe('180px')
-          // Change the stub mid-flight. The lock must hold — measurement
-          // is one-shot, taken on the first non-scroll render.
-          stubClientHeight(999)
-          rerender(<CategoryUI data={[oneToTwelve()]} maxItems={0} />)
-          expect(list.style.maxHeight).toBe('180px')
-        } finally {
-          restoreClientHeight()
-        }
-      })
-
-      it('falls back to 8 × ROW_HEIGHT_PX[size] when mounted directly into scroll mode (no capped render to measure)', () => {
-        // No stub — clientHeight reads 0 in jsdom by default, so the
-        // effect's `if (h > 0)` guard skips the setState. The viewport
-        // must still have a sane size: 36 × 8 = 288px for small.
-        const { container } = render(
-          <CategoryUI data={[oneToTwelve()]} maxItems={0} />,
-        )
-        const root = container.firstChild as HTMLElement
-        const list = root.firstChild as HTMLElement
-        expect(list.style.maxHeight).toBe('288px')
-        expect(list.style.overflowY).toBe('auto')
-      })
-
-      it('uses the same fallback for multi-series widgets (no seriesCount multiplier)', () => {
-        // Regression: a 3-series widget mounted directly into scroll
-        // mode previously rendered at 3× the intended viewport (864px)
-        // because the fallback was multiplied by `seriesCount`. The
-        // fallback should be 288px regardless of series count.
-        const threeSeries = [oneToTwelve(), oneToTwelve(), oneToTwelve()]
-        const { container } = render(
-          <CategoryUI data={threeSeries} maxItems={0} />,
-        )
-        const root = container.firstChild as HTMLElement
-        const list = root.firstChild as HTMLElement
-        expect(list.style.maxHeight).toBe('288px')
-      })
-    })
-
-    it('honors custom labels.other + labels.otherCount with {count} substitution', () => {
-      render(
-        <CategoryUI
-          data={[oneToTwelve()]}
-          maxItems={3}
-          labels={{
-            other: 'Others',
-            otherCount: '+{count} hidden',
-          }}
-        />,
-      )
-      expect(screen.getByText('Others')).toBeTruthy()
-      expect(screen.getByText('+9 hidden')).toBeTruthy()
-    })
-
-    it('large maxItems = no Other row', () => {
-      render(<CategoryUI data={[oneToTwelve()]} maxItems={1_000} />)
-      expect(screen.queryByText(/more/)).toBeNull()
-      expect(screen.getAllByRole('button')).toHaveLength(12)
-    })
-  })
-
-  // ── Multi-series grouped rendering ─────────────────────────────────
-  describe('multi-series', () => {
-    const twoSeries = () => [
-      [
-        { name: 'A', value: 10 },
-        { name: 'B', value: 20 },
-      ],
-      [
-        { name: 'A', value: 5 },
-        { name: 'B', value: 8 },
-      ],
-    ]
-
-    it('renders one row per unique name across series', () => {
-      render(<CategoryUI data={twoSeries()} />)
-      // 2 unique names → 2 row buttons (not 4 like a per-series layout would give).
-      expect(screen.getAllByRole('button')).toHaveLength(2)
-      expect(screen.getByText('A')).toBeTruthy()
-      expect(screen.getByText('B')).toBeTruthy()
-    })
-
-    it('renders both values per row, formatted', () => {
-      render(<CategoryUI data={twoSeries()} formatter={(n) => `$${n}`} />)
-      const rowA = screen.getAllByRole('button')[0]!
-      expect(within(rowA).getByText('A')).toBeTruthy()
-      expect(within(rowA).getByText('$10')).toBeTruthy()
-      expect(within(rowA).getByText('$5')).toBeTruthy()
-    })
-
-    it('clicking a multi-row toggles by name with raw key', () => {
-      const onSelectionChange = vi.fn()
-      render(
-        <CategoryUI
-          data={twoSeries()}
-          selection={[]}
-          onSelectionChange={onSelectionChange}
-        />,
-      )
-      fireEvent.click(screen.getAllByRole('button')[1]!)
-      expect(onSelectionChange).toHaveBeenCalledWith(['B'])
-    })
-
-    it('falls back gracefully when data.length > series.length (extra series unlabeled)', () => {
-      render(<CategoryUI data={twoSeries()} series={[{ name: 'Only-One' }]} />)
-      // 2 rows still render (data.length = 2 is the truth).
-      expect(screen.getAllByRole('button')).toHaveLength(2)
-      // Legend has just one entry.
-      expect(screen.getByText('Only-One')).toBeTruthy()
-    })
-
-    it('falls back gracefully when series.length > data.length (extras ignored, no legend overflow)', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 1 }]]}
-          series={[{ name: 'S1' }, { name: 'S2' }, { name: 'S3' }]}
-        />,
-      )
-      // data.length === 1 → single-series layout, no legend.
-      expect(screen.queryByText('S2')).toBeNull()
-    })
-  })
-
-  // ── Legend ─────────────────────────────────────────────────────────
-  describe('legend', () => {
-    it('renders the legend when multi-series + series prop supplied', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 1 }], [{ name: 'A', value: 2 }]]}
-          series={[{ name: '2024' }, { name: '2025' }]}
-        />,
-      )
-      expect(screen.getByText('2024')).toBeTruthy()
-      expect(screen.getByText('2025')).toBeTruthy()
-    })
-
-    it('does NOT render the legend for single-series even when series is given', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 1 }]]}
-          series={[{ name: 'OnlySeries' }]}
-        />,
-      )
-      expect(screen.queryByText('OnlySeries')).toBeNull()
-    })
-
-    it('does NOT render the legend for multi-series when series is omitted', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 1 }], [{ name: 'A', value: 2 }]]}
-        />,
-      )
-      // No legend element should be in the DOM (no series names to show).
-      // The text "A" is still present from the row label.
-      expect(screen.getAllByText('A')).toHaveLength(1)
-    })
-
-    it('clicking a legend item hides that series from the rows', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 10 }], [{ name: 'A', value: 5 }]]}
-          series={[{ name: '2024' }, { name: '2025' }]}
-        />,
-      )
-      expect(screen.getByText('10')).toBeTruthy()
-      expect(screen.getByText('5')).toBeTruthy()
-      fireEvent.click(screen.getByText('2025'))
-      expect(screen.queryByText('5')).toBeNull()
-      expect(screen.getByText('10')).toBeTruthy()
-    })
-
-    it('renders no legend item for a series with no data behind it', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 10 }], [{ name: 'A', value: 5 }]]}
-          series={[{ name: '2024' }, { name: '2025' }, { name: 'Phantom' }]}
-        />,
-      )
-      expect(screen.getByText('2024')).toBeTruthy()
-      expect(screen.getByText('2025')).toBeTruthy()
-      expect(screen.queryByText('Phantom')).toBeNull()
-      expect(screen.getAllByRole('checkbox')).toHaveLength(2)
-    })
-
-    it('hiding a real series still works when the caller supplied extra series metadata', () => {
-      // The phantom item used to be toggleable and counted against
-      // `seriesCount = data.length`: hiding it and then a real series hit
-      // `next.size >= seriesCount` and reset everything to visible, with no
-      // way out except un-toggling the phantom.
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 10 }], [{ name: 'A', value: 5 }]]}
-          series={[{ name: '2024' }, { name: '2025' }, { name: 'Phantom' }]}
-        />,
-      )
-      fireEvent.click(screen.getByText('2025'))
-      expect(screen.queryByText('5')).toBeNull()
-      expect(screen.getByText('10')).toBeTruthy()
-    })
-
-    it('keeps a hidden series hidden after data shrinks under a stable series list', () => {
-      // `hiddenSeries` is only reset when the series *names* change, and
-      // `series` is static caller metadata while `data` varies — so a stale
-      // index survives a shrink and still counts toward the reset guard.
-      const SERIES = [{ name: '2023' }, { name: '2024' }, { name: '2025' }]
-      const three = [
-        [{ name: 'A', value: 10 }],
-        [{ name: 'A', value: 20 }],
-        [{ name: 'A', value: 30 }],
-      ]
-      const two = [[{ name: 'A', value: 10 }], [{ name: 'A', value: 20 }]]
-
-      const { rerender } = render(<CategoryUI data={three} series={SERIES} />)
-      fireEvent.click(screen.getByText('2025'))
-      expect(screen.queryByText('30')).toBeNull()
-
-      rerender(<CategoryUI data={two} series={SERIES} />)
-      fireEvent.click(screen.getByText('2024'))
-
-      expect(screen.queryByText('20')).toBeNull()
-      expect(screen.getByText('10')).toBeTruthy()
-    })
-
-    it('applies the hidden set as the chart sees it: a shrink never blanks, a regrow restores, a click matches the legend', () => {
-      // The stored set is never rewritten on a data change, so a shrink can
-      // leave every remaining index hidden. The read side has to apply the
-      // "never fully hidden" guard too, and a click has to start from what
-      // the user sees, not from the stored set.
-      const SERIES = [{ name: '2023' }, { name: '2024' }, { name: '2025' }]
-      const three = [
-        [{ name: 'A', value: 10 }],
-        [{ name: 'A', value: 20 }],
-        [{ name: 'A', value: 30 }],
-      ]
-      const two = [[{ name: 'A', value: 10 }], [{ name: 'A', value: 20 }]]
-
-      const { rerender } = render(<CategoryUI data={three} series={SERIES} />)
-      fireEvent.click(screen.getByText('2023'))
-      fireEvent.click(screen.getByText('2024'))
-      expect(screen.queryByText('10')).toBeNull()
-      expect(screen.queryByText('20')).toBeNull()
-      expect(screen.getByText('30')).toBeTruthy()
-
-      // Shrink with no click: both remaining indices are hidden, so the
-      // guard falls back to all visible instead of a blank chart.
-      rerender(<CategoryUI data={two} series={SERIES} />)
-      expect(screen.getByText('10')).toBeTruthy()
-      expect(screen.getByText('20')).toBeTruthy()
-
-      // Regrow with no click: the stored set survived, the hides come back.
-      rerender(<CategoryUI data={three} series={SERIES} />)
-      expect(screen.queryByText('10')).toBeNull()
-      expect(screen.queryByText('20')).toBeNull()
-      expect(screen.getByText('30')).toBeTruthy()
-
-      // Shrink again and click: the toggle starts from the effective (empty)
-      // set, so unchecking 2024 hides 2024 — not 2023 via the stored {0,1}.
-      rerender(<CategoryUI data={two} series={SERIES} />)
-      fireEvent.click(screen.getByText('2024'))
-      expect(screen.queryByText('20')).toBeNull()
-      expect(screen.getByText('10')).toBeTruthy()
-    })
-
-    it('hiding the last visible series reverts to showing all (never leaves it blank)', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 10 }], [{ name: 'A', value: 5 }]]}
-          series={[{ name: '2024' }, { name: '2025' }]}
-        />,
-      )
-      fireEvent.click(screen.getByText('2025'))
-      expect(screen.queryByText('5')).toBeNull()
-      fireEvent.click(screen.getByText('2024'))
-      // Both would be hidden — guard reverts to showing every series instead.
-      expect(screen.getByText('10')).toBeTruthy()
-      expect(screen.getByText('5')).toBeTruthy()
-    })
-  })
-
-  // ── Selection visual ───────────────────────────────────────────────
-  describe('selection visual', () => {
-    it('marks selected rows aria-pressed=true', () => {
-      render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'A', value: 10 },
-              { name: 'B', value: 20 },
-            ],
-          ]}
-          selection={['A']}
-        />,
-      )
-      const pressed = screen.getAllByRole('button', { pressed: true })
-      expect(pressed).toHaveLength(1)
-      expect(pressed[0]!.textContent).toContain('A')
-    })
-
-    it('fires onSelectionChange with the toggled set on click', () => {
-      const onSelectionChange = vi.fn()
-      render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'A', value: 10 },
-              { name: 'B', value: 20 },
-            ],
-          ]}
-          selection={[]}
-          onSelectionChange={onSelectionChange}
-        />,
-      )
-      fireEvent.click(screen.getByText('B'))
-      expect(onSelectionChange).toHaveBeenCalledWith(['B'])
-    })
-
-    it('removes a selected item on second click', () => {
-      const onSelectionChange = vi.fn()
-      render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'A', value: 10 },
-              { name: 'B', value: 20 },
-            ],
-          ]}
-          selection={['A', 'B']}
-          onSelectionChange={onSelectionChange}
-        />,
-      )
-      fireEvent.click(screen.getByText('A'))
-      expect(onSelectionChange).toHaveBeenCalledWith(['B'])
-    })
-
-    it('toggles via keyboard Enter and Space', () => {
-      const onSelectionChange = vi.fn()
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 10 }]]}
-          selection={[]}
-          onSelectionChange={onSelectionChange}
-        />,
-      )
-      const row = screen.getByRole('button')
-      fireEvent.keyDown(row, { key: 'Enter' })
-      expect(onSelectionChange).toHaveBeenCalledWith(['A'])
-      onSelectionChange.mockClear()
-      fireEvent.keyDown(row, { key: ' ' })
-      expect(onSelectionChange).toHaveBeenCalledWith(['A'])
-    })
-  })
-
-  // ── Selection dim color (bar-fill-only signal) ─────────────────────
-  //
-  // When a selection exists, non-selected rows' bar fills swap to
-  // `theme.palette.action.disabled` — the ONLY visual difference
-  // between selected and non-selected rows. Text colors stay at full
-  // values; rows have no bg tint, no opacity rule.
-  //
-  // jsdom + MUI default light theme: `action.disabled` resolves to
-  // `rgba(0, 0, 0, 0.26)` — what the browser writes to
-  // `style.backgroundColor`.
-  describe('selection dim color', () => {
-    const DIM = 'rgba(0, 0, 0, 0.26)'
-
-    function getBarFill(row: HTMLElement): HTMLElement | null {
-      return row.querySelector('div[style*="width:"]')
-    }
-
-    it('non-selected rows render the bar fill in the theme dim color when a selection exists', () => {
-      render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'A', value: 10, color: 'rgb(255, 0, 0)' },
-              { name: 'B', value: 20, color: 'rgb(0, 255, 0)' },
-            ],
-          ]}
-          selection={['A']}
-        />,
-      )
-      const rows = screen.getAllByRole('button')
-      const aRow = rows.find((r) => r.textContent?.includes('A'))!
-      const bRow = rows.find((r) => r.textContent?.includes('B'))!
-      // Selected: keeps its real color.
-      expect(getBarFill(aRow)!.style.backgroundColor).toBe('rgb(255, 0, 0)')
-      // Non-selected: swaps to the dim color.
-      expect(getBarFill(bRow)!.style.backgroundColor).toBe(DIM)
-    })
-
-    it('without a selection, no row is dimmed (every bar keeps its real color)', () => {
-      render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'A', value: 10, color: 'rgb(255, 0, 0)' },
-              { name: 'B', value: 20, color: 'rgb(0, 255, 0)' },
-            ],
-          ]}
-        />,
-      )
-      const rows = screen.getAllByRole('button')
-      for (const row of rows) {
-        expect(getBarFill(row)!.style.backgroundColor).not.toBe(DIM)
-      }
-    })
-
-    it('multi-series: every bar in a dimmed row gets the dim color', () => {
-      render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'A', value: 10, color: 'rgb(255, 0, 0)' },
-              { name: 'B', value: 20, color: 'rgb(255, 0, 0)' },
-            ],
-            [
-              { name: 'A', value: 5, color: 'rgb(0, 0, 255)' },
-              { name: 'B', value: 7, color: 'rgb(0, 0, 255)' },
-            ],
-          ]}
-          selection={['A']}
-        />,
-      )
-      const rows = screen.getAllByRole('button')
-      const bRow = rows.find((r) => r.textContent?.includes('B'))!
-      const fills = bRow.querySelectorAll<HTMLElement>('div[style*="width:"]')
-      expect(fills.length).toBe(2)
-      fills.forEach((f) => {
-        expect(f.style.backgroundColor).toBe(DIM)
-      })
-    })
-  })
-
-  // ── labelFormatter (selection-key integrity) ───────────────────────
-  describe('labelFormatter', () => {
-    it('transforms displayed names without changing selection keys', () => {
-      const onSelectionChange = vi.fn()
-      render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'dog', value: 10 },
-              { name: 'cat', value: 20 },
-            ],
-          ]}
-          labelFormatter={(n) => String(n).toUpperCase()}
-          selection={[]}
-          onSelectionChange={onSelectionChange}
-        />,
-      )
-      // Display labels are upper-cased.
-      expect(screen.getByText('DOG')).toBeTruthy()
-      expect(screen.getByText('CAT')).toBeTruthy()
-      expect(screen.queryByText('dog')).toBeNull()
-      // Selection callback receives the RAW name.
-      fireEvent.click(screen.getByText('DOG'))
-      expect(onSelectionChange).toHaveBeenCalledWith(['dog'])
-    })
-
-    it('formats names in multi-series rows too, with raw selection keys', () => {
-      const onSelectionChange = vi.fn()
-      render(
-        <CategoryUI
-          data={[[{ name: 'dog', value: 1 }], [{ name: 'dog', value: 2 }]]}
-          labelFormatter={(n) => `[${n}]`}
-          selection={[]}
-          onSelectionChange={onSelectionChange}
-        />,
-      )
-      expect(screen.getByText('[dog]')).toBeTruthy()
-      fireEvent.click(screen.getByText('[dog]'))
-      expect(onSelectionChange).toHaveBeenCalledWith(['dog'])
-    })
-  })
-
-  // ── Palette + per-item / per-series color overrides ────────────────
-  describe('color palette', () => {
-    function getBarFill(row: HTMLElement): HTMLElement | null {
-      // The bar fill is the second <div> inside the bar track div.
-      return row.querySelector(
-        // The MUI Box renders as a div; the fill has inline style with width.
-        'div[style*="width:"]',
-      )
-    }
-
-    it('per-item color (data[s][r].color) wins over series + palette', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 10, color: 'rgb(255, 0, 0)' }]]}
-          series={[{ name: 'S', color: 'rgb(0, 255, 0)' }]}
-        />,
-      )
-      const row = screen.getByRole('button')
-      const fill = getBarFill(row)
-      expect(fill).toBeTruthy()
-      // jsdom resolves theme tokens but inline color literals come through.
-      expect(fill!.style.backgroundColor).toBe('rgb(255, 0, 0)')
-    })
-
-    it('series-level color (series[i].color) wins over palette', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 10 }]]}
-          series={[{ name: 'S', color: 'rgb(123, 45, 67)' }]}
-        />,
-      )
-      const fill = getBarFill(screen.getByRole('button'))
-      expect(fill!.style.backgroundColor).toBe('rgb(123, 45, 67)')
-    })
-  })
-
-  // ── maxOverride ────────────────────────────────────────────────────
-  describe('maxOverride', () => {
-    it('changes the bar width denominator (different markup)', () => {
-      const { rerender, container } = render(
-        <CategoryUI data={[[{ name: 'A', value: 100 }]]} />,
-      )
-      const before = container.innerHTML
-      rerender(
-        <CategoryUI data={[[{ name: 'A', value: 100 }]]} maxOverride={200} />,
-      )
-      expect(container.innerHTML).not.toBe(before)
-    })
-  })
-
-  // ── formatter ──────────────────────────────────────────────────────
-  describe('formatter', () => {
-    it('uses formatter for the value display', () => {
-      render(
-        <CategoryUI
-          data={[[{ name: 'A', value: 1234 }]]}
-          formatter={(n) => n.toLocaleString('en-US')}
-        />,
-      )
-      expect(screen.getByText('1,234')).toBeTruthy()
-    })
-  })
-
-  // ── Size variant ───────────────────────────────────────────────────
-  describe('size variant', () => {
-    const TWO_SERIES = [
-      [
-        { name: 'A', value: 10 },
-        { name: 'B', value: 20 },
-      ],
-      [
-        { name: 'A', value: 5 },
-        { name: 'B', value: 15 },
-      ],
-    ]
-
-    it('defaults to size="small" — every bar carries data-size="small"', () => {
-      const { container } = render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'A', value: 10 },
-              { name: 'B', value: 20 },
-            ],
-          ]}
-        />,
-      )
-      const tracks = container.querySelectorAll('[data-size]')
-      expect(tracks.length).toBe(2)
-      tracks.forEach((t) => {
-        expect(t.getAttribute('data-size')).toBe('small')
-      })
-    })
-
-    it('propagates size="medium" to every bar (single-series)', () => {
-      const { container } = render(
-        <CategoryUI
-          data={[
-            [
-              { name: 'A', value: 10 },
-              { name: 'B', value: 20 },
-            ],
-          ]}
-          size='medium'
-        />,
-      )
-      const tracks = container.querySelectorAll('[data-size]')
-      expect(tracks.length).toBe(2)
-      tracks.forEach((t) => {
-        expect(t.getAttribute('data-size')).toBe('medium')
-      })
-    })
-
-    it('propagates size="medium" to every bar (multi-series — N bars per row)', () => {
-      const { container } = render(
-        <CategoryUI data={TWO_SERIES} size='medium' />,
-      )
-      // 2 rows × 2 series = 4 bars
-      const tracks = container.querySelectorAll('[data-size]')
-      expect(tracks.length).toBe(4)
-      tracks.forEach((t) => {
-        expect(t.getAttribute('data-size')).toBe('medium')
-      })
-    })
-  })
-
-  // ── Stacked mode ────────────────────────────────────────────────────
-  describe('stacked', () => {
-    const TWO_SERIES = [
-      [
-        { name: 'A', value: 45 },
-        { name: 'B', value: 30 },
-      ],
-      [
-        { name: 'A', value: 32 },
-        { name: 'B', value: 18 },
-      ],
-    ]
-
-    it('multi-series + stacked → one stacked row per group with one bar track per row', () => {
-      const { container } = render(
-        <CategoryUI
-          data={TWO_SERIES}
-          series={[{ name: 'Women' }, { name: 'Men' }]}
-          stacked
-        />,
-      )
-      // 2 unique names → 2 stacked rows → 2 bar tracks (NOT 4 like CategoryRowMulti).
-      const tracks = container.querySelectorAll('[data-size]')
-      expect(tracks.length).toBe(2)
-      // Each track has 2 segments (data-bar-fill) for the two non-zero series.
-      const fills = container.querySelectorAll('[data-bar-fill="true"]')
-      expect(fills.length).toBe(4)
-    })
-
-    it('renders the formatted total in the header and the breakdown line under each row', () => {
-      render(
-        <CategoryUI
-          data={TWO_SERIES}
-          series={[{ name: 'Women' }, { name: 'Men' }]}
-          stacked
-          formatter={(n) => `${n}K`}
-        />,
-      )
-      // Totals: A=45+32=77, B=30+18=48
-      expect(screen.getByText('77K')).toBeTruthy()
-      expect(screen.getByText('48K')).toBeTruthy()
-      // Breakdown labels per row.
-      expect(screen.getByText('Women: 45K')).toBeTruthy()
-      expect(screen.getByText('Men: 32K')).toBeTruthy()
-      expect(screen.getByText('Women: 30K')).toBeTruthy()
-      expect(screen.getByText('Men: 18K')).toBeTruthy()
-    })
-
-    it('falls back to "Series N" in the breakdown when series prop is omitted', () => {
-      render(<CategoryUI data={TWO_SERIES} stacked formatter={(n) => `${n}`} />)
-      expect(screen.getByText('Series 1: 45')).toBeTruthy()
-      expect(screen.getByText('Series 2: 32')).toBeTruthy()
-    })
-
-    it('numbers the "Series N" fallback by ORIGINAL series index, not by visible position, after hiding an earlier series via the legend', () => {
-      // 3 data series; series[2] is unnamed (metadata array shorter than
-      // data — a supported "gap" per this prop's own doc). Hiding series 0
-      // ("Women") via the legend leaves series 1 ("Men") and 2 (unnamed)
-      // visible — series 2's fallback must still read "Series 3" (its
-      // ORIGINAL index), not "Series 2" (its now-first visible position).
-      const THREE_SERIES = [
-        [{ name: 'A', value: 45 }],
-        [{ name: 'A', value: 32 }],
-        [{ name: 'A', value: 12 }],
-      ]
-      render(
-        <CategoryUI
-          data={THREE_SERIES}
-          series={[{ name: 'Women' }, { name: 'Men' }]}
-          stacked
-          formatter={(n) => `${n}`}
-        />,
-      )
-      const checkbox = screen.getByRole('checkbox', { name: 'Women' })
-      fireEvent.click(checkbox)
-      expect(screen.queryByText(/Women:/)).toBeNull()
-      expect(screen.getByText('Men: 32')).toBeTruthy()
-      expect(screen.getByText('Series 3: 12')).toBeTruthy()
-    })
-
-    it('stacked is a no-op for single-series data (still renders CategoryRowSingle)', () => {
-      const { container } = render(
-        <CategoryUI data={[[{ name: 'A', value: 10 }]]} stacked />,
-      )
-      // Single-series row has no breakdown text — assert by the lack of
-      // "Series 1: ..." pattern (which would appear in stacked rendering).
-      expect(screen.queryByText(/Series 1:/)).toBeNull()
-      // 1 bar track for the one row.
-      expect(container.querySelectorAll('[data-size]').length).toBe(1)
-    })
-
-    it('clicking a stacked row toggles by raw name', () => {
-      const onSelectionChange = vi.fn()
-      render(
-        <CategoryUI
-          data={TWO_SERIES}
-          series={[{ name: 'Women' }, { name: 'Men' }]}
-          stacked
-          selection={[]}
-          onSelectionChange={onSelectionChange}
-        />,
-      )
-      fireEvent.click(screen.getAllByRole('button')[1]!)
-      expect(onSelectionChange).toHaveBeenCalledWith(['B'])
-    })
-
-    it('dim color applies to every segment of non-selected rows when a selection exists', () => {
-      const DIM = 'rgba(0, 0, 0, 0.26)'
-      render(
-        <CategoryUI
-          data={TWO_SERIES}
-          series={[{ name: 'Women' }, { name: 'Men' }]}
-          stacked
-          selection={['A']}
-        />,
-      )
-      const rows = screen.getAllByRole('button')
-      const bRow = rows.find((r) => r.textContent?.includes('B'))!
-      const fills = bRow.querySelectorAll<HTMLElement>('[data-bar-fill="true"]')
-      expect(fills.length).toBe(2)
-      fills.forEach((f) => expect(f.style.backgroundColor).toBe(DIM))
-    })
-  })
-})