@carto/ps-react-ui 6.0.0 → 6.1.0

package/src/widgets/bar/download.tsx

@@ -1,51 +1,28 @@
 import {
   buildCsvDownloadItem,
-  buildPngDownloadItem,
+  withPngItem,
   type DownloadItem,
+  type WidgetDownloadArgs,
 } from '../actions/download'
 import type { BarWidgetData } from './types'
 
-export interface BarDownloadConfigArgs {
-  filename: string
-  getData: () => BarWidgetData
-  /**
-   * Optional getter for the widget's capture element (registered by
-   * `Widget.State` on its success path). When provided, a PNG item is
-   * prepended to the returned list. Wire it to
-   * `() => getCaptureEl(id)`.
-   */
-  getCaptureEl?: () => HTMLElement | null
-  /** PNG `pixelRatio` (default 2). */
-  pngPixelRatio?: number
-  /** PNG `backgroundColor` (default transparent). */
-  pngBackgroundColor?: string | null
-}
+export type BarDownloadConfigArgs = WidgetDownloadArgs<BarWidgetData>
 
 /**
- * Builds download items for the Bar widget. Always includes a CSV item
- * with one `name,value` block per series, separated by an empty row when
- * there are multiple. When `getCaptureEl` is supplied, also prepends a PNG
- * item that rasterises the captured element via `html2canvas`.
+ * Builds download items for the Bar widget. Always includes a CSV item with
+ * one `name,value` block per series, separated by an empty row when there
+ * are multiple. When `getCaptureEl` is given, also prepends a PNG item that
+ * rasterises the captured element via `html2canvas`.
  */
 export function createBarDownloadConfig(
   args: BarDownloadConfigArgs,
 ): DownloadItem[] {
-  const items: DownloadItem[] = []
-  if (args.getCaptureEl) {
-    items.push(
-      buildPngDownloadItem({
-        filename: args.filename,
-        getCaptureEl: args.getCaptureEl,
-        pixelRatio: args.pngPixelRatio,
-        backgroundColor: args.pngBackgroundColor,
-      }),
-    )
-  }
-  items.push(
+  return withPngItem(
+    args,
     buildCsvDownloadItem({
       filename: args.filename,
-      getRows: () => {
-        const data = args.getData()
+      getRows: (ctx) => {
+        const data = args.getData(ctx)
         const rows: unknown[][] = []
         for (const [i, series] of data.entries()) {
           if (i > 0) rows.push([])
@@ -56,5 +33,4 @@ export function createBarDownloadConfig(
       },
     }),
   )
-  return items
 }

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

@@ -13,6 +13,7 @@ import type {
   CategoryWidgetData,
 } from './types'
 import { styles } from './style'
+import { categorySeriesKey } from './helpers'
 import { resolveThemeColor } from '../utils'
 
 const DEFAULT_MAX_ITEMS = 20
@@ -97,6 +98,14 @@ export interface CategoryUIProps {
    * No-op for single-series data — same convention as the legend.
    */
   stacked?: boolean
+  /**
+   * Series indices hidden via the legend. Leave both this and
+   * `onHiddenSeriesChange` unset and CategoryUI keeps the set itself; pass
+   * them to own it — `Category` does, so the card and the fullscreen copy
+   * share it through the widget store.
+   */
+  hiddenSeries?: ReadonlySet<number>
+  onHiddenSeriesChange?: (next: ReadonlySet<number>) => void
 }
 
 interface GroupedRow {
@@ -182,6 +191,8 @@ export function CategoryUI({
   maxOverride,
   size = 'small',
   stacked = false,
+  hiddenSeries: hiddenSeriesProp,
+  onHiddenSeriesChange,
 }: CategoryUIProps) {
   const theme = useTheme()
   const fmt = formatter ?? ((n: number) => String(n))
@@ -304,9 +315,10 @@ export function CategoryUI({
   // selection, unrelated). Never allowed to reach "every series hidden":
   // toggling the last visible one instead resets to "all visible" rather
   // than leaving the widget blank.
-  const [hiddenSeries, setHiddenSeries] = useState<ReadonlySet<number>>(
+  const [localHidden, setLocalHidden] = useState<ReadonlySet<number>>(
     () => new Set(),
   )
+  const hiddenSeries = hiddenSeriesProp ?? localHidden
   // A reload with a different series breakdown invalidates hidden indices —
   // index 2 may now point at an entirely different series. Reset rather
   // than keep hiding whatever now occupies a stale index. Adjusted directly
@@ -317,11 +329,11 @@ export function CategoryUI({
   // `series={[...]}` literal (no useMemo) gets a new reference on every
   // unrelated parent re-render, which would otherwise reset hiddenSeries
   // right after the user hides one.
-  const seriesKey = JSON.stringify(series?.map((s) => s.name) ?? [])
+  const seriesKey = categorySeriesKey(series)
   const [prevSeriesKey, setPrevSeriesKey] = useState(seriesKey)
   if (seriesKey !== prevSeriesKey) {
     setPrevSeriesKey(seriesKey)
-    setHiddenSeries(new Set())
+    setLocalHidden(new Set())
   }
   // Real number of data series — NOT `series?.length`, which is legend
   // metadata and may legitimately be shorter than the actual series count
@@ -331,18 +343,18 @@ export function CategoryUI({
   const seriesCount = Math.max(data.length, 1)
   const toggleSeries = useCallback(
     (index: number) => {
-      setHiddenSeries((prev) => {
-        // Start from what the user sees, not the stored set: `data` can
-        // shrink while the `series` names hold (the reset only watches the
-        // names), and a stale index would otherwise count toward the guard
-        // below — or make unchecking one series hide a different one.
-        const next = effectiveHidden(prev, seriesCount)
-        if (next.has(index)) next.delete(index)
-        else next.add(index)
-        return next.size >= seriesCount ? new Set() : next
-      })
+      // Start from what the user sees, not the stored set: `data` can
+      // shrink while the `series` names hold (the reset only watches the
+      // names), and a stale index would otherwise count toward the guard
+      // below — or make unchecking one series hide a different one.
+      const next = effectiveHidden(hiddenSeries, seriesCount)
+      if (next.has(index)) next.delete(index)
+      else next.add(index)
+      ;(onHiddenSeriesChange ?? setLocalHidden)(
+        next.size >= seriesCount ? new Set() : next,
+      )
     },
-    [seriesCount],
+    [hiddenSeries, onHiddenSeriesChange, seriesCount],
   )
 
   if (grouped.length === 0) return null

package/src/widgets/category/category.tsx

@@ -1,6 +1,13 @@
-import { useMemo } from 'react'
-import { useWidgetId, useWidgetShallow, type WidgetState } from '../stores'
+import { useCallback, useMemo } from 'react'
+import {
+  getWidgetStore,
+  useWidget,
+  useWidgetId,
+  useWidgetShallow,
+  type WidgetState,
+} from '../stores'
 import { CategoryUI } from './category-ui'
+import { categorySeriesKey, NO_HIDDEN_SERIES } from './helpers'
 import type {
   CategoryKey,
   CategoryLabels,
@@ -23,6 +30,17 @@ const categorySelector = (s: WidgetState): CategorySlice => ({
   labelFormatter: s.labelFormatter,
 })
 
+/**
+ * Legend-hidden series, kept on the widget store so every mounted Category
+ * of the widget — the card and its fullscreen copy — shows the same set.
+ * Tagged with the series breakdown it was made for: after a reload with
+ * different series the indices point elsewhere, so a stale set reads as
+ * empty instead of being reset with a write.
+ */
+interface CategoryWidgetState extends WidgetState {
+  categoryHiddenSeries?: { key: string; indices: ReadonlySet<number> }
+}
+
 function maxFromCategoryData(d: CategoryWidgetData | undefined): number {
   if (!d) return 0
   let m = 0
@@ -111,6 +129,21 @@ export function Category({
   )
   const effectiveMaxOverride =
     maxOverride ?? (naturalMax > 0 ? naturalMax : undefined)
+
+  const seriesKey = categorySeriesKey(series)
+  const stored = useWidget<
+    CategoryWidgetState['categoryHiddenSeries'],
+    CategoryWidgetState
+  >(id, (s) => s.categoryHiddenSeries)
+  const hiddenSeries =
+    stored?.key === seriesKey ? stored.indices : NO_HIDDEN_SERIES
+  const onHiddenSeriesChange = useCallback(
+    (indices: ReadonlySet<number>) =>
+      getWidgetStore(id).setState({
+        categoryHiddenSeries: { key: seriesKey, indices },
+      } as Partial<CategoryWidgetState>),
+    [id, seriesKey],
+  )
   return (
     <CategoryUI
       data={slice.data}
@@ -125,6 +158,8 @@ export function Category({
       maxOverride={effectiveMaxOverride}
       size={size}
       stacked={stacked}
+      hiddenSeries={hiddenSeries}
+      onHiddenSeriesChange={onHiddenSeriesChange}
     />
   )
 }

package/src/widgets/category/components/category-legend.tsx

@@ -2,6 +2,7 @@ import type { CssColor } from '../../../components/types'
 import { Box, Typography } from '@mui/material'
 import type { CategorySeriesConfig } from '../types'
 import { styles } from '../style'
+import { NO_HIDDEN_SERIES } from '../helpers'
 
 export interface CategoryLegendProps {
   /** Series metadata. Empty array → renders nothing. */
@@ -30,8 +31,6 @@ export interface CategoryLegendProps {
   onToggle?: (index: number) => void
 }
 
-const NO_HIDDEN_SERIES: ReadonlySet<number> = new Set()
-
 /**
  * Sticky color legend rendered below a multi-series Category list.
  * Per-series `color` overrides the matching `colorAt(i)` result. Clicking an

package/src/widgets/category/download.test.ts

@@ -60,7 +60,9 @@ describe('createCategoryDownloadConfig', () => {
       filename: 'c',
       getData: () => data,
     })
-    const handle = await items.find((i) => i.id === 'csv')!.resolve()
+    const handle = await items
+      .find((i) => i.id === 'csv')!
+      .resolve({ id: null })
     expect(handle.filename).toBe('c.csv')
     expect(csvText).toBe(
       'series,name,value\nseries_1,a,1\nseries_1,b,2\nseries_2,a,10',
@@ -73,7 +75,7 @@ describe('createCategoryDownloadConfig', () => {
       getData: () => data,
       seriesNames: ['baseline', 'override'],
     })
-    await items.find((i) => i.id === 'csv')!.resolve()
+    await items.find((i) => i.id === 'csv')!.resolve({ id: null })
     expect(csvText.split('\n')[1]).toBe('baseline,a,1')
     expect(csvText.split('\n')[3]).toBe('override,a,10')
   })

package/src/widgets/category/download.ts

@@ -1,40 +1,28 @@
 import {
   buildCsvDownloadItem,
-  buildPngDownloadItem,
+  withPngItem,
   type DownloadItem,
+  type WidgetDownloadArgs,
 } from '../actions/download'
 import type { CategoryWidgetData } from './types'
 
 /**
  * Download menu items for the Category widget. Always includes a CSV item
- * with `series, name, value` columns (one row per item). When
- * `getCaptureEl` is supplied, prepends a PNG item that rasterises the
- * captured element via `html2canvas`.
+ * with `series, name, value` columns (one row per item). When `getCaptureEl`
+ * is given, prepends a PNG item that rasterises the captured element via
+ * `html2canvas`.
  */
-export function createCategoryDownloadConfig(args: {
-  filename: string
-  getData: () => CategoryWidgetData
-  seriesNames?: readonly string[]
-  getCaptureEl?: () => HTMLElement | null
-  pngPixelRatio?: number
-  pngBackgroundColor?: string | null
-}): DownloadItem[] {
-  const items: DownloadItem[] = []
-  if (args.getCaptureEl) {
-    items.push(
-      buildPngDownloadItem({
-        filename: args.filename,
-        getCaptureEl: args.getCaptureEl,
-        pixelRatio: args.pngPixelRatio,
-        backgroundColor: args.pngBackgroundColor,
-      }),
-    )
-  }
-  items.push(
+export function createCategoryDownloadConfig(
+  args: WidgetDownloadArgs<CategoryWidgetData> & {
+    seriesNames?: readonly string[]
+  },
+): DownloadItem[] {
+  return withPngItem(
+    args,
     buildCsvDownloadItem({
       filename: args.filename,
-      getRows: () => {
-        const data = args.getData()
+      getRows: (ctx) => {
+        const data = args.getData(ctx)
         const rows: unknown[][] = [['series', 'name', 'value']]
         for (const [i, series] of data.entries()) {
           const seriesName = args.seriesNames?.[i] ?? `series_${i + 1}`
@@ -46,5 +34,4 @@ export function createCategoryDownloadConfig(args: {
       },
     }),
   )
-  return items
 }

package/src/widgets/category/helpers.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { categorySeriesKey } from './helpers'
+
+describe('categorySeriesKey', () => {
+  it('depends on the series names only', () => {
+    expect(categorySeriesKey([{ name: 'A' }, { name: 'B' }])).toBe(
+      categorySeriesKey([{ name: 'A', color: 'red' }, { name: 'B' }]),
+    )
+    expect(categorySeriesKey([{ name: 'A' }])).not.toBe(
+      categorySeriesKey([{ name: 'B' }]),
+    )
+  })
+
+  it('treats no series as an empty breakdown', () => {
+    expect(categorySeriesKey(undefined)).toBe(categorySeriesKey([]))
+  })
+})

package/src/widgets/category/helpers.ts

@@ -0,0 +1,16 @@
+import type { CategorySeriesConfig } from './types'
+
+/** Shared empty set: "no series hidden" without a new identity per render. */
+export const NO_HIDDEN_SERIES: ReadonlySet<number> = new Set()
+
+/**
+ * Identifies a series breakdown by its names. Hidden-series indices are only
+ * valid for the breakdown they were made for, and both the store copy (in
+ * `Category`) and the local one (in `CategoryUI`) are tagged with this key —
+ * so they must compute it the same way.
+ */
+export function categorySeriesKey(
+  series: readonly CategorySeriesConfig[] | undefined,
+): string {
+  return JSON.stringify(series?.map((s) => s.name) ?? [])
+}

package/src/widgets/echart/style.ts

@@ -13,5 +13,11 @@ export const styles = {
     // with `<Widget.Echart sx={{ minHeight }} />`.
     flex: 1,
     minHeight: 304,
+    // ECharts puts its tooltip inside this box at `z-index: 9999999`. With
+    // no stacking context of its own, that number competes page-wide and
+    // beats MUI's modal and popover layers, so a tooltip left showing
+    // paints over any dialog or menu opened above the chart. Isolating
+    // keeps the tooltip above its own chart only.
+    isolation: 'isolate',
   },
 } satisfies Record<string, SxProps<Theme>>

package/src/widgets/formula/download.test.tsx

@@ -56,7 +56,9 @@ describe('createFormulaDownloadConfig', () => {
       filename: 'f',
       getData: () => data,
     })
-    const handle = await items.find((i) => i.id === 'csv')!.resolve()
+    const handle = await items
+      .find((i) => i.id === 'csv')!
+      .resolve({ id: null })
     expect(handle.filename).toBe('f.csv')
     expect(csvText).toBe(
       'series,prefix,value,suffix,note,delta\nRev,$,42,k,q1,12\n,,10,,,',

package/src/widgets/formula/download.tsx

@@ -1,47 +1,28 @@
 import {
   buildCsvDownloadItem,
-  buildPngDownloadItem,
+  withPngItem,
   type DownloadItem,
+  type WidgetDownloadArgs,
 } from '../actions/download'
 import type { FormulaWidgetData } from './types'
 
-export interface FormulaDownloadConfigArgs {
-  filename: string
-  getData: () => FormulaWidgetData
-  /**
-   * Optional getter for the widget's capture element (registered by
-   * `Widget.State`). When provided, a PNG item is prepended.
-   */
-  getCaptureEl?: () => HTMLElement | null
-  pngPixelRatio?: number
-  pngBackgroundColor?: string | null
-}
+export type FormulaDownloadConfigArgs = WidgetDownloadArgs<FormulaWidgetData>
 
 /**
  * Builds download items for the Formula widget. Always includes a CSV item
- * with one row per KPI (`prefix`, `value`, `suffix`, `note`, `delta`).
- * When `getCaptureEl` is supplied, prepends a PNG item that rasterises the
- * captured element via `html2canvas`.
+ * with one row per KPI (`prefix`, `value`, `suffix`, `note`, `delta`). When
+ * `getCaptureEl` is given, prepends a PNG item that rasterises the captured
+ * element via `html2canvas`.
  */
 export function createFormulaDownloadConfig(
   args: FormulaDownloadConfigArgs,
 ): DownloadItem[] {
-  const items: DownloadItem[] = []
-  if (args.getCaptureEl) {
-    items.push(
-      buildPngDownloadItem({
-        filename: args.filename,
-        getCaptureEl: args.getCaptureEl,
-        pixelRatio: args.pngPixelRatio,
-        backgroundColor: args.pngBackgroundColor,
-      }),
-    )
-  }
-  items.push(
+  return withPngItem(
+    args,
     buildCsvDownloadItem({
       filename: args.filename,
-      getRows: () => {
-        const data = args.getData()
+      getRows: (ctx) => {
+        const data = args.getData(ctx)
         const rows: unknown[][] = [
           ['series', 'prefix', 'value', 'suffix', 'note', 'delta'],
         ]
@@ -59,5 +40,4 @@ export function createFormulaDownloadConfig(
       },
     }),
   )
-  return items
 }

package/src/widgets/histogram/download.test.ts

@@ -52,7 +52,9 @@ describe('createHistogramDownloadConfig', () => {
       getData: () => data,
       getTicks: () => ticks,
     })
-    const handle = await items.find((i) => i.id === 'csv')!.resolve()
+    const handle = await items
+      .find((i) => i.id === 'csv')!
+      .resolve({ id: null })
     expect(handle.filename).toBe('h.csv')
     expect(csvText).toBe(
       'bin_low,bin_high,series_1,series_2\n0,10,1,4\n10,20,2,5\n20,30,3,6',
@@ -66,7 +68,7 @@ describe('createHistogramDownloadConfig', () => {
       getTicks: () => ticks,
       seriesNames: ['lo', 'hi'],
     })
-    await items.find((i) => i.id === 'csv')!.resolve()
+    await items.find((i) => i.id === 'csv')!.resolve({ id: null })
     expect(csvText.startsWith('bin_low,bin_high,lo,hi')).toBe(true)
   })
 
@@ -76,7 +78,7 @@ describe('createHistogramDownloadConfig', () => {
       getData: () => data,
       getTicks: () => [0],
     })
-    await items.find((i) => i.id === 'csv')!.resolve()
+    await items.find((i) => i.id === 'csv')!.resolve({ id: null })
     expect(csvText).toBe('bin_low,bin_high,series_1,series_2')
   })
 
@@ -87,7 +89,7 @@ describe('createHistogramDownloadConfig', () => {
       getData: () => sparse,
       getTicks: () => ticks,
     })
-    await items.find((i) => i.id === 'csv')!.resolve()
+    await items.find((i) => i.id === 'csv')!.resolve({ id: null })
     expect(csvText).toContain('0,10,1,0')
     expect(csvText).toContain('10,20,2,0')
   })

package/src/widgets/histogram/download.ts

@@ -1,41 +1,29 @@
 import {
   buildCsvDownloadItem,
-  buildPngDownloadItem,
+  withPngItem,
   type DownloadItem,
+  type WidgetDownloadArgs,
 } from '../actions/download'
 import type { HistogramWidgetData } from './types'
 
 /**
  * Download menu items for histograms. Always includes a CSV item with
  * `bin_low, bin_high, series_1_count, series_2_count, …` columns (one row
- * per bin). When `getCaptureEl` is supplied, prepends a PNG item that
+ * per bin). When `getCaptureEl` is given, prepends a PNG item that
  * rasterises the captured element via `html2canvas`.
  */
-export function createHistogramDownloadConfig(args: {
-  filename: string
-  getData: () => HistogramWidgetData
-  getTicks: () => readonly number[]
-  seriesNames?: readonly string[]
-  getCaptureEl?: () => HTMLElement | null
-  pngPixelRatio?: number
-  pngBackgroundColor?: string | null
-}): DownloadItem[] {
-  const items: DownloadItem[] = []
-  if (args.getCaptureEl) {
-    items.push(
-      buildPngDownloadItem({
-        filename: args.filename,
-        getCaptureEl: args.getCaptureEl,
-        pixelRatio: args.pngPixelRatio,
-        backgroundColor: args.pngBackgroundColor,
-      }),
-    )
-  }
-  items.push(
+export function createHistogramDownloadConfig(
+  args: WidgetDownloadArgs<HistogramWidgetData> & {
+    getTicks: () => readonly number[]
+    seriesNames?: readonly string[]
+  },
+): DownloadItem[] {
+  return withPngItem(
+    args,
     buildCsvDownloadItem({
       filename: args.filename,
-      getRows: () => {
-        const data = args.getData()
+      getRows: (ctx) => {
+        const data = args.getData(ctx)
         const ticks = args.getTicks()
         const seriesCount = data.length
         const header: unknown[] = ['bin_low', 'bin_high']
@@ -52,5 +40,4 @@ export function createHistogramDownloadConfig(args: {
       },
     }),
   )
-  return items
 }

package/src/widgets/index.ts

@@ -157,6 +157,7 @@ export type {
   RelativeDataProps,
   DownloadProps,
   DownloadItem,
+  DownloadContext,
   FullScreenTriggerProps,
   FullScreenSlotProps,
   LockSelectionProps,

package/src/widgets/markdown/download.test.ts

@@ -46,7 +46,7 @@ describe('createMarkdownDownloadConfig', () => {
       filename: 'doc',
       getData: () => ({ content: '# title\n\nbody' }),
     })
-    const handle = await items.find((i) => i.id === 'md')!.resolve()
+    const handle = await items.find((i) => i.id === 'md')!.resolve({ id: null })
     expect(handle.url).toBe('blob:mock')
     expect(handle.filename).toBe('doc.md')
     expect(mdText).toBe('# title\n\nbody')
@@ -60,7 +60,7 @@ describe('createMarkdownDownloadConfig', () => {
       // missing content field — exercise the `?? ''` branch
       getData: () => ({}) as { content: string },
     })
-    await items.find((i) => i.id === 'md')!.resolve()
+    await items.find((i) => i.id === 'md')!.resolve({ id: null })
     expect(mdText).toBe('')
   })
 })

package/src/widgets/markdown/download.tsx

@@ -1,43 +1,29 @@
 import {
   DOWNLOAD_ITEM_IDS,
   MarkdownIcon,
-  buildPngDownloadItem,
+  withPngItem,
   toCsvString,
   triggerLinkDownload,
   type DownloadItem,
+  type WidgetDownloadArgs,
 } from '../actions/download'
 import type { MarkdownWidgetData } from './types'
 
 /**
- * Download menu items for the Markdown widget. Always includes a `.md`
- * item that saves the markdown source verbatim. When `getCaptureEl` is
- * supplied, prepends a PNG item that rasterises the captured element via
+ * Download menu items for the Markdown widget. Always includes a `.md` item
+ * that saves the markdown source verbatim. When `getCaptureEl` is given,
+ * prepends a PNG item that rasterises the captured element via
  * `html2canvas`.
  */
-export function createMarkdownDownloadConfig(args: {
-  filename: string
-  getData: () => MarkdownWidgetData
-  getCaptureEl?: () => HTMLElement | null
-  pngPixelRatio?: number
-  pngBackgroundColor?: string | null
-}): DownloadItem[] {
-  const items: DownloadItem[] = []
-  if (args.getCaptureEl) {
-    items.push(
-      buildPngDownloadItem({
-        filename: args.filename,
-        getCaptureEl: args.getCaptureEl,
-        pixelRatio: args.pngPixelRatio,
-        backgroundColor: args.pngBackgroundColor,
-      }),
-    )
-  }
-  items.push({
+export function createMarkdownDownloadConfig(
+  args: WidgetDownloadArgs<MarkdownWidgetData>,
+): DownloadItem[] {
+  return withPngItem(args, {
     id: DOWNLOAD_ITEM_IDS.markdown,
     label: 'Markdown',
     icon: <MarkdownIcon fontSize='small' />,
-    resolve: () => {
-      const data = args.getData()
+    resolve: (ctx) => {
+      const data = args.getData(ctx)
       const blob = new Blob([data.content ?? ''], {
         type: 'text/markdown;charset=utf-8;',
       })
@@ -49,7 +35,6 @@ export function createMarkdownDownloadConfig(args: {
       })
     },
   })
-  return items
 }
 
 // Re-export pure helpers consumers may want when building a custom Download item.

package/src/widgets/pie/download.test.ts

@@ -51,7 +51,9 @@ describe('createPieDownloadConfig', () => {
       getCaptureEl: () => null,
     })
     expect(items.map((i) => i.id)).toEqual(['png', 'csv'])
-    await expect(items[0]!.resolve()).rejects.toThrow(/No PNG capture element/)
+    await expect(items[0]!.resolve({ id: null })).rejects.toThrow(
+      /No PNG capture element/,
+    )
   })
 
   it('CSV resolve uses default series_<n> when seriesNames is absent', async () => {
@@ -59,7 +61,9 @@ describe('createPieDownloadConfig', () => {
       filename: 'p',
       getData: () => multi,
     })
-    const handle = await items.find((i) => i.id === 'csv')!.resolve()
+    const handle = await items
+      .find((i) => i.id === 'csv')!
+      .resolve({ id: null })
     expect(handle.filename).toBe('p.csv')
     expect(csvText).toBe('series,name,value\nseries_1,a,1\nseries_2,c,3')
     handle.revoke?.()
@@ -72,7 +76,7 @@ describe('createPieDownloadConfig', () => {
       getData: () => multi,
       seriesNames: ['alpha', 'beta'],
     })
-    await items.find((i) => i.id === 'csv')!.resolve()
+    await items.find((i) => i.id === 'csv')!.resolve({ id: null })
     expect(csvText).toBe('series,name,value\nalpha,a,1\nbeta,c,3')
   })
 })