@carto/ps-react-ui 4.7.1 → 4.8.0

package/src/widgets-v2/stores/widget-store-registry.test.ts

@@ -0,0 +1,292 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = (): void => {}
+
+import {
+  __debugListWidgetStores,
+  clearAllCaptureEls,
+  clearAllEchartInstances,
+  clearAllWidgetStores,
+  createWidgetStore,
+  deleteWidgetStore,
+  getCaptureEl,
+  getEchartInstance,
+  getWidgetStore,
+  hasWidgetStore,
+  registerWidgetStore,
+  resetWidgetStore,
+  setCaptureEl,
+  setEchartInstance,
+  subscribeEchartInstance,
+  unregisterWidgetStore,
+} from './widget-store-registry'
+import type { ECharts } from 'echarts'
+
+describe('widget-store-registry', () => {
+  beforeEach(() => clearAllWidgetStores())
+  afterEach(() => clearAllWidgetStores())
+
+  it('register + get round-trip', () => {
+    const s = createWidgetStore('w1', { data: 1 })
+    registerWidgetStore('w1', s)
+    expect(getWidgetStore('w1')).toBe(s)
+    expect(hasWidgetStore('w1')).toBe(true)
+  })
+
+  it('getWidgetStore throws for unknown id', () => {
+    expect(() => getWidgetStore('missing')).toThrow(
+      /Widget store "missing" not found/,
+    )
+  })
+
+  it('isolates state across stores', () => {
+    const a = createWidgetStore('a', { data: 1 })
+    const b = createWidgetStore('b', { data: 2 })
+    registerWidgetStore('a', a)
+    registerWidgetStore('b', b)
+    a.setState({ rawData: 10 })
+    expect(b.getState().rawData).toBe(2)
+  })
+
+  it('deleteWidgetStore removes the store from the registry', () => {
+    const s = createWidgetStore('w', { data: 1 })
+    registerWidgetStore('w', s)
+    deleteWidgetStore('w')
+    expect(hasWidgetStore('w')).toBe(false)
+  })
+
+  it('resetWidgetStore clears transformStates and keeps the store', () => {
+    const s = createWidgetStore('w', { data: 1 })
+    registerWidgetStore('w', s)
+    s.setState({ transformStates: { foo: { enabled: true } } })
+    resetWidgetStore('w')
+    expect(s.getState().transformStates).toEqual({})
+    expect(hasWidgetStore('w')).toBe(true)
+  })
+
+  it('clearAllWidgetStores empties everything', () => {
+    registerWidgetStore('a', createWidgetStore('a', { data: 1 }))
+    registerWidgetStore('b', createWidgetStore('b', { data: 2 }))
+    clearAllWidgetStores()
+    expect(__debugListWidgetStores()).toEqual([])
+  })
+
+  it('unregisterWidgetStore drops the store on last unmount when keepAlive is false', () => {
+    registerWidgetStore('w', createWidgetStore('w', { data: 1 }))
+    unregisterWidgetStore('w', { keepAlive: false })
+    expect(hasWidgetStore('w')).toBe(false)
+  })
+
+  it('unregisterWidgetStore preserves the store when keepAlive is true', () => {
+    registerWidgetStore('w', createWidgetStore('w', { data: 1 }))
+    unregisterWidgetStore('w', { keepAlive: true })
+    expect(hasWidgetStore('w')).toBe(true)
+  })
+
+  it('refcounts overlapping registers — store stays until both unregister', () => {
+    const s = createWidgetStore('w', { data: 1 })
+    registerWidgetStore('w', s)
+    registerWidgetStore('w', s)
+    unregisterWidgetStore('w', { keepAlive: false })
+    expect(hasWidgetStore('w')).toBe(true)
+    unregisterWidgetStore('w', { keepAlive: false })
+    expect(hasWidgetStore('w')).toBe(false)
+  })
+
+  it('warns once on duplicate concurrent registration with the same id', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(noop)
+    const s = createWidgetStore('dup', { data: 1 })
+    registerWidgetStore('dup', s)
+    registerWidgetStore('dup', s)
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(warn.mock.calls[0]?.[0]).toMatch(
+      /Duplicate <Widget.Provider id="dup">/,
+    )
+    warn.mockRestore()
+  })
+
+  it('does not warn again on subsequent re-registrations after the first warning', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(noop)
+    const s = createWidgetStore('dup', { data: 1 })
+    registerWidgetStore('dup', s)
+    registerWidgetStore('dup', s)
+    registerWidgetStore('dup', s)
+    expect(warn).toHaveBeenCalledTimes(1)
+    warn.mockRestore()
+  })
+
+  it('createWidgetStore seeds rawData/data from init.data', () => {
+    const s = createWidgetStore('w', { data: { x: 1 } })
+    expect(s.getState().rawData).toEqual({ x: 1 })
+    expect(s.getState().data).toEqual({ x: 1 })
+  })
+
+  it('createWidgetStore seeds isLoading/isFetching defaults to false', () => {
+    const s = createWidgetStore('w', { data: 1 })
+    expect(s.getState().isLoading).toBe(false)
+    expect(s.getState().isFetching).toBe(false)
+  })
+
+  it('createWidgetStore preserves init.error', () => {
+    const err = { title: 'oops' }
+    const s = createWidgetStore('w', { data: 1, error: err })
+    expect(s.getState().error).toBe(err)
+  })
+
+  it('__debugListWidgetStores reflects registered ids', () => {
+    registerWidgetStore('a', createWidgetStore('a', { data: 1 }))
+    registerWidgetStore('b', createWidgetStore('b', { data: 1 }))
+    expect(__debugListWidgetStores().sort()).toEqual(['a', 'b'])
+  })
+
+  describe('capture-el registry', () => {
+    it('returns null for unregistered ids', () => {
+      expect(getCaptureEl('missing')).toBeNull()
+    })
+
+    it('round-trips a set value', () => {
+      const el = document.createElement('div')
+      setCaptureEl('w1', el)
+      expect(getCaptureEl('w1')).toBe(el)
+    })
+
+    it('clears when set to null', () => {
+      const el = document.createElement('div')
+      setCaptureEl('w1', el)
+      setCaptureEl('w1', null)
+      expect(getCaptureEl('w1')).toBeNull()
+    })
+
+    it('isolates ids', () => {
+      const a = document.createElement('div')
+      const b = document.createElement('section')
+      setCaptureEl('a', a)
+      setCaptureEl('b', b)
+      expect(getCaptureEl('a')).toBe(a)
+      expect(getCaptureEl('b')).toBe(b)
+    })
+
+    it('clearAllWidgetStores wipes the capture-el map too', () => {
+      setCaptureEl('w', document.createElement('div'))
+      clearAllWidgetStores()
+      expect(getCaptureEl('w')).toBeNull()
+    })
+
+    it('clearAllCaptureEls wipes only the capture-el map', () => {
+      registerWidgetStore('w', createWidgetStore('w', { data: 1 }))
+      setCaptureEl('w', document.createElement('div'))
+      clearAllCaptureEls()
+      expect(getCaptureEl('w')).toBeNull()
+      expect(hasWidgetStore('w')).toBe(true)
+    })
+  })
+
+  describe('echart-instance registry', () => {
+    function makeChart(): ECharts {
+      // Minimal stand-in — only the methods used by registry tests need to
+      // exist. Cast through unknown to keep the signature opaque.
+      return {} as unknown as ECharts
+    }
+
+    it('returns null for unregistered ids', () => {
+      expect(getEchartInstance('missing')).toBeNull()
+    })
+
+    it('round-trips a set value', () => {
+      const chart = makeChart()
+      setEchartInstance('w1', chart)
+      expect(getEchartInstance('w1')).toBe(chart)
+    })
+
+    it('clears when set to null', () => {
+      setEchartInstance('w1', makeChart())
+      setEchartInstance('w1', null)
+      expect(getEchartInstance('w1')).toBeNull()
+    })
+
+    it('isolates ids', () => {
+      const a = makeChart()
+      const b = makeChart()
+      setEchartInstance('a', a)
+      setEchartInstance('b', b)
+      expect(getEchartInstance('a')).toBe(a)
+      expect(getEchartInstance('b')).toBe(b)
+    })
+
+    it('clearAllWidgetStores wipes the echart-instance map too', () => {
+      setEchartInstance('w', makeChart())
+      clearAllWidgetStores()
+      expect(getEchartInstance('w')).toBeNull()
+    })
+
+    it('clearAllEchartInstances wipes only the echart-instance map', () => {
+      registerWidgetStore('w', createWidgetStore('w', { data: 1 }))
+      setEchartInstance('w', makeChart())
+      clearAllEchartInstances()
+      expect(getEchartInstance('w')).toBeNull()
+      expect(hasWidgetStore('w')).toBe(true)
+    })
+  })
+
+  describe('subscribeEchartInstance', () => {
+    function makeChart(): ECharts {
+      return {} as unknown as ECharts
+    }
+
+    it('fires the listener whenever setEchartInstance writes a new value', () => {
+      const seen: (ECharts | null)[] = []
+      const off = subscribeEchartInstance('s1', (chart) => seen.push(chart))
+      const a = makeChart()
+      const b = makeChart()
+      setEchartInstance('s1', a)
+      setEchartInstance('s1', b)
+      setEchartInstance('s1', null)
+      expect(seen).toEqual([a, b, null])
+      off()
+    })
+
+    it('the returned unsubscribe stops the listener', () => {
+      const fn = vi.fn()
+      const off = subscribeEchartInstance('s2', fn)
+      setEchartInstance('s2', makeChart())
+      off()
+      setEchartInstance('s2', makeChart())
+      expect(fn).toHaveBeenCalledTimes(1)
+    })
+
+    it('multiple listeners per id all fire', () => {
+      const a = vi.fn()
+      const b = vi.fn()
+      subscribeEchartInstance('s3', a)
+      subscribeEchartInstance('s3', b)
+      setEchartInstance('s3', makeChart())
+      expect(a).toHaveBeenCalledTimes(1)
+      expect(b).toHaveBeenCalledTimes(1)
+    })
+
+    it('listeners are isolated by id', () => {
+      const a = vi.fn()
+      const b = vi.fn()
+      subscribeEchartInstance('s4', a)
+      subscribeEchartInstance('s5', b)
+      setEchartInstance('s4', makeChart())
+      expect(a).toHaveBeenCalledTimes(1)
+      expect(b).not.toHaveBeenCalled()
+    })
+
+    it('clearAllEchartInstances and clearAllWidgetStores clear subscribers too', () => {
+      const fn = vi.fn()
+      subscribeEchartInstance('s6', fn)
+      clearAllEchartInstances()
+      setEchartInstance('s6', makeChart())
+      expect(fn).not.toHaveBeenCalled()
+
+      const fn2 = vi.fn()
+      subscribeEchartInstance('s7', fn2)
+      clearAllWidgetStores()
+      setEchartInstance('s7', makeChart())
+      expect(fn2).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/widgets-v2/stores/widget-store-registry.ts

@@ -0,0 +1,248 @@
+import type { ECharts } from 'echarts'
+import { useStore, type StoreApi } from 'zustand'
+import { createStore } from 'zustand/vanilla'
+import { devtools } from 'zustand/middleware'
+import { useShallow } from 'zustand/react/shallow'
+import { pipelineMiddleware } from './pipeline-middleware'
+import type { WidgetInit, WidgetState, WidgetStoreApi } from './types'
+
+const widgetStores = new Map<string, WidgetStoreApi>()
+
+const widgetMountCounts = new Map<string, number>()
+const warnedDuplicates = new Set<string>()
+
+// Per-widget capture-element registry. Held outside the reactive store so
+// publishing the element doesn't trigger any consumer re-renders — these
+// handles are read imperatively by per-widget download configs at click time
+// only. `Widget.State` writes its success-path content wrapper here on mount
+// (auto-cleared on unmount via callback ref), and `create*DownloadConfig`
+// looks it up to feed `html2canvas` for PNG export.
+const captureEls = new Map<string, HTMLElement>()
+
+// Per-widget live ECharts instance registry. Same imperative-only contract
+// as `captureEls`: published by the `Widget.Echart` bridge on mount /
+// dispose, read at click time by actions that need to dispatch on the live
+// chart (e.g. `ZoomToggle`'s disable handler issuing
+// `setOption({}, { replaceMerge: ['dataZoom'] })` to clear the slider).
+// Held outside the reactive store so publishing never triggers consumer
+// re-renders.
+const echartInstances = new Map<string, ECharts>()
+
+// Per-id subscribers notified whenever `setEchartInstance` writes a new
+// value. Powers `useEchartInstance(id)` (a `useSyncExternalStore` wrapper)
+// so actions like `BrushToggle` can react when the chart becomes available
+// — required for lifecycle effects that need the instance on mount but
+// arrive in the tree before the `Widget.Echart` bridge has run its init
+// `useEffect`.
+type EchartInstanceListener = (chart: ECharts | null) => void
+const echartInstanceSubscribers = new Map<string, Set<EchartInstanceListener>>()
+
+const isDev = (): boolean => {
+  try {
+    return Boolean(
+      (import.meta as unknown as { env?: { DEV?: boolean } }).env?.DEV,
+    )
+  } catch {
+    return false
+  }
+}
+
+export function getWidgetStore(id: string): WidgetStoreApi {
+  const store = widgetStores.get(id)
+  if (!store) throw new Error(`[widgets-v2] Widget store "${id}" not found.`)
+  return store
+}
+
+export function hasWidgetStore(id: string): boolean {
+  return widgetStores.has(id)
+}
+
+export function deleteWidgetStore(id: string): void {
+  widgetStores.delete(id)
+}
+
+export function resetWidgetStore(id: string): void {
+  const store = widgetStores.get(id)
+  if (store) store.setState({ transformStates: {} })
+}
+
+export function clearAllWidgetStores(): void {
+  widgetStores.clear()
+  widgetMountCounts.clear()
+  warnedDuplicates.clear()
+  captureEls.clear()
+  echartInstances.clear()
+  echartInstanceSubscribers.clear()
+}
+
+/**
+ * Register or clear the capture element for a widget. Pass `null` to clear.
+ * Called by `Widget.State` via a callback ref on its success-path content
+ * wrapper. The element is read by per-widget download configs at click time
+ * to feed `html2canvas` for PNG export.
+ */
+export function setCaptureEl(id: string, el: HTMLElement | null): void {
+  if (el == null) captureEls.delete(id)
+  else captureEls.set(id, el)
+}
+
+/**
+ * Read the currently registered capture element for a widget. Returns `null`
+ * when no `Widget.State` is on its success path (loading / error / empty)
+ * or when the widget hasn't mounted.
+ */
+export function getCaptureEl(id: string): HTMLElement | null {
+  return captureEls.get(id) ?? null
+}
+
+/** @internal — exposed for tests and debugging only. */
+export function clearAllCaptureEls(): void {
+  captureEls.clear()
+}
+
+/**
+ * Register or clear the live ECharts instance for a widget. Pass `null`
+ * to clear. Called by the `Widget.Echart` bridge on mount / dispose.
+ * Read by actions (e.g. `ZoomToggle`'s disable handler) that need to
+ * dispatch on the live chart without going through the pipeline.
+ *
+ * Notifies subscribers registered via {@link subscribeEchartInstance}
+ * after the map mutation, so reactive consumers (the
+ * `useEchartInstance` hook) re-render with the new value.
+ */
+export function setEchartInstance(id: string, chart: ECharts | null): void {
+  if (chart == null) echartInstances.delete(id)
+  else echartInstances.set(id, chart)
+  echartInstanceSubscribers.get(id)?.forEach((fn) => fn(chart))
+}
+
+/**
+ * Read the currently registered ECharts instance for a widget. Returns
+ * `null` when no `Widget.Echart` is mounted, or before the bridge has
+ * created the instance.
+ */
+export function getEchartInstance(id: string): ECharts | null {
+  return echartInstances.get(id) ?? null
+}
+
+/**
+ * Subscribe to changes of the registered ECharts instance for a widget.
+ * The listener is called *after* every {@link setEchartInstance} (with
+ * the new chart, or `null` when cleared). Returns an unsubscribe
+ * function. Used by the `useEchartInstance` hook to drive React effects
+ * that need to react to instance arrival / departure (e.g.
+ * `BrushToggle`'s `'finished'` re-dispatch loop).
+ */
+export function subscribeEchartInstance(
+  id: string,
+  listener: EchartInstanceListener,
+): () => void {
+  let listeners = echartInstanceSubscribers.get(id)
+  if (!listeners) {
+    listeners = new Set()
+    echartInstanceSubscribers.set(id, listeners)
+  }
+  listeners.add(listener)
+  return () => {
+    const set = echartInstanceSubscribers.get(id)
+    if (!set) return
+    set.delete(listener)
+    if (set.size === 0) echartInstanceSubscribers.delete(id)
+  }
+}
+
+/** @internal — exposed for tests and debugging only. */
+export function clearAllEchartInstances(): void {
+  echartInstances.clear()
+  echartInstanceSubscribers.clear()
+}
+
+/** @internal — exposed for tests and debugging only. */
+export function __debugListWidgetStores(): string[] {
+  return Array.from(widgetStores.keys())
+}
+
+/**
+ * Insert or replace a store entry in the registry without refcounting or
+ * duplicate-id detection. Used by Provider's lazy `useState` init so the
+ * store is reachable from `useWidget(id)` calls in children that render
+ * before the Provider's mount effect runs. Refcounting and dev warns happen
+ * in {@link registerWidgetStore} during the mount effect.
+ *
+ * @internal
+ */
+export function setWidgetStoreEntry(id: string, store: WidgetStoreApi): void {
+  widgetStores.set(id, store)
+}
+
+/** @internal — used by Provider; not part of the public API. */
+export function createWidgetStore(
+  id: string,
+  init: WidgetInit,
+): WidgetStoreApi {
+  const builder = pipelineMiddleware<WidgetState>(() => ({
+    rawData: init.data,
+    data: init.data,
+    dataTransforms: [],
+    configTransforms: [],
+    transformStates: {},
+    isLoading: init.isLoading ?? false,
+    isFetching: init.isFetching ?? false,
+    error: init.error,
+    rawFormatter: init.formatter,
+    formatter: init.formatter,
+    labelFormatter: init.labelFormatter,
+  }))
+
+  const store = createStore<WidgetState>()(
+    devtools(builder, { name: `widget-${id}`, enabled: isDev() }),
+  ) as unknown as WidgetStoreApi
+
+  return store
+}
+
+/** @internal — registers a Provider mount and tracks/warns on duplicate ids in dev. */
+export function registerWidgetStore(id: string, store: WidgetStoreApi): void {
+  widgetStores.set(id, store)
+  const count = (widgetMountCounts.get(id) ?? 0) + 1
+  widgetMountCounts.set(id, count)
+  if (count > 1 && isDev() && !warnedDuplicates.has(id)) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[widgets-v2] Duplicate <Widget.Provider id="${id}"> detected. ` +
+        `Multiple providers sharing an id will race on prop sync and corrupt the store. ` +
+        `Use unique ids per widget instance.`,
+    )
+    warnedDuplicates.add(id)
+  }
+}
+
+/** @internal — Provider unmount counterpart; on last unmount removes the refcount entry. */
+export function unregisterWidgetStore(
+  id: string,
+  options: { keepAlive: boolean },
+): void {
+  const count = (widgetMountCounts.get(id) ?? 1) - 1
+  if (count <= 0) {
+    widgetMountCounts.delete(id)
+    if (!options.keepAlive) widgetStores.delete(id)
+  } else {
+    widgetMountCounts.set(id, count)
+  }
+}
+
+export function useWidget<T, S extends WidgetState = WidgetState>(
+  id: string,
+  selector: (state: S) => T,
+): T {
+  const store = getWidgetStore(id) as unknown as StoreApi<S>
+  return useStore(store, selector)
+}
+
+export function useWidgetShallow<T, S extends WidgetState = WidgetState>(
+  id: string,
+  selector: (state: S) => T,
+): T {
+  const store = getWidgetStore(id) as unknown as StoreApi<S>
+  return useStore(store, useShallow(selector))
+}

package/src/widgets-v2/subheader/style.ts

@@ -0,0 +1,12 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  root: {
+    display: 'grid',
+    gridTemplateColumns: '1fr auto',
+    alignItems: 'center',
+    gap: 1,
+    minHeight: 32,
+    pb: 1,
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/subheader/subheader.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { Subheader } from './subheader'
+
+describe('<Subheader>', () => {
+  it('renders children inside a Box', () => {
+    const { getByText } = render(
+      <Subheader>
+        <span>left</span>
+        <span>right</span>
+      </Subheader>,
+    )
+    expect(getByText('left')).toBeTruthy()
+    expect(getByText('right')).toBeTruthy()
+  })
+
+  it('merges caller-supplied sx onto the root', () => {
+    const { container } = render(
+      <Subheader sx={{ mt: 4 }}>
+        <span>x</span>
+      </Subheader>,
+    )
+    expect(container.firstChild).not.toBeNull()
+    // Class-based assertions are brittle; settle for "an element renders + a
+    // single child slot exists" — sx forwarding gets exercised at the
+    // import/MUI level so we don't need to inspect emotion-generated class
+    // names.
+    expect(container.querySelectorAll('span').length).toBe(1)
+  })
+})

package/src/widgets-v2/subheader/subheader.tsx

@@ -0,0 +1,16 @@
+import { Box, type SxProps, type Theme } from '@mui/material'
+import type { ReactNode } from 'react'
+import { styles } from './style'
+
+export interface SubheaderProps {
+  sx?: SxProps<Theme>
+  children: ReactNode
+}
+
+/**
+ * Stateless layout: CSS grid `1fr auto`. Children self-place — typically
+ * `<Widget.SelectionSummary />` (left) and `<Widget.Toolbox>` (right).
+ */
+export function Subheader({ sx, children }: SubheaderProps) {
+  return <Box sx={{ ...styles.root, ...sx }}>{children}</Box>
+}

package/src/widgets-v2/table/download.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { createTableDownloadConfig } from './download'
+import type { TableColumn, TableWidgetData } from './types'
+
+const columns: TableColumn[] = [
+  { id: 'name', label: 'Name' },
+  { id: 'score', label: 'Score' },
+]
+const data: TableWidgetData = [
+  { id: 1, name: 'Alpha', score: 10 },
+  { id: 2, name: 'Beta', score: 20 },
+]
+
+let csvText = ''
+
+beforeEach(() => {
+  csvText = ''
+  vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock')
+  vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined)
+  const RealBlob = global.Blob
+  vi.stubGlobal(
+    'Blob',
+    class extends RealBlob {
+      constructor(parts: BlobPart[], opts?: BlobPropertyBag) {
+        csvText = typeof parts[0] === 'string' ? parts[0] : ''
+        super(parts, opts)
+      }
+    },
+  )
+})
+
+describe('createTableDownloadConfig', () => {
+  it('CSV-only by default', () => {
+    expect(
+      createTableDownloadConfig({
+        filename: 't',
+        getData: () => data,
+        columns,
+      }).map((i) => i.id),
+    ).toEqual(['csv'])
+  })
+
+  it('prepends PNG when getCaptureEl is provided', () => {
+    const items = createTableDownloadConfig({
+      filename: 't',
+      getData: () => data,
+      columns,
+      getCaptureEl: () => document.createElement('div'),
+    })
+    expect(items.map((i) => i.id)).toEqual(['png', 'csv'])
+  })
+
+  it('CSV resolve uses tableDataToCsv with the supplied columns', async () => {
+    const items = createTableDownloadConfig({
+      filename: 't',
+      getData: () => data,
+      columns,
+    })
+    const handle = await items.find((i) => i.id === 'csv')!.resolve()
+    expect(handle.filename).toBe('t.csv')
+    expect(csvText).toBe('Name,Score\nAlpha,10\nBeta,20')
+  })
+
+  it('CSV calls getData() at click time (not at config creation)', async () => {
+    let snapshot: TableWidgetData = data
+    const items = createTableDownloadConfig({
+      filename: 't',
+      getData: () => snapshot,
+      columns,
+    })
+    snapshot = [{ id: 9, name: 'Gamma', score: 99 }]
+    await items.find((i) => i.id === 'csv')!.resolve()
+    expect(csvText).toBe('Name,Score\nGamma,99')
+  })
+})