@carto/ps-react-ui 4.7.0 → 4.8.0

package/src/widgets-v2/actions/stack-toggle/stack-toggle.tsx

@@ -0,0 +1,54 @@
+import { type ComponentType } from 'react'
+import { IconButton, type SvgIconProps } from '@mui/material'
+import StackedBarChartIcon from '@mui/icons-material/StackedBarChart'
+import { Tooltip } from '../../../components'
+import { useSingleTransform, useWidgetId } from '../../stores'
+import { addStack } from './transforms'
+import { DEFAULT_STACK_TOGGLE_LABELS, type StackToggleLabels } from './labels'
+import { styles } from './style'
+
+const STACK_DESCRIPTOR = {
+  id: 'stack-toggle',
+  type: 'config' as const,
+  order: 30,
+}
+
+export interface StackToggleProps {
+  initialEnabled?: boolean
+  labels?: Partial<StackToggleLabels>
+  icon?: ComponentType<SvgIconProps>
+  iconProps?: SvgIconProps
+}
+
+export function StackToggle({
+  initialEnabled = false,
+  labels,
+  icon: Icon = StackedBarChartIcon,
+  iconProps,
+}: StackToggleProps) {
+  const id = useWidgetId()
+  const _labels = { ...DEFAULT_STACK_TOGGLE_LABELS, ...labels }
+  const { enabled, toggle } = useSingleTransform(
+    id,
+    STACK_DESCRIPTOR,
+    addStack,
+    {
+      initialEnabled,
+    },
+  )
+  const tooltip = enabled ? _labels.on : _labels.off
+
+  return (
+    <Tooltip title={tooltip}>
+      <IconButton
+        size='small'
+        aria-label={tooltip}
+        aria-pressed={enabled}
+        onClick={toggle}
+        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}
+      >
+        <Icon fontSize='small' {...iconProps} />
+      </IconButton>
+    </Tooltip>
+  )
+}

package/src/widgets-v2/actions/stack-toggle/style.ts

@@ -0,0 +1,11 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  toggle: {
+    p: 0.5,
+    '& .MuiSvgIcon-root': { fontSize: 20 },
+  },
+  toggleActive: {
+    background: (theme: Theme) => theme.palette.primary.relatedLight,
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/actions/stack-toggle/transforms.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { addStack } from './transforms'
+
+describe('addStack', () => {
+  it('passes through non-objects unchanged', () => {
+    expect(addStack(undefined)).toBe(undefined)
+    expect(addStack(null)).toBe(null)
+    expect(addStack(42)).toBe(42)
+  })
+
+  it('marks every existing series with stack:"total"', () => {
+    const out = addStack({
+      title: { text: 'x' },
+      series: [{ type: 'bar' }, { type: 'bar' }],
+    }) as { series: { type: string; stack: string }[]; title: { text: string } }
+    expect(out.series).toHaveLength(2)
+    expect(out.series[0]).toMatchObject({ type: 'bar', stack: 'total' })
+    expect(out.series[1]).toMatchObject({ type: 'bar', stack: 'total' })
+    expect(out.title).toEqual({ text: 'x' })
+  })
+
+  it('emits a broadcast template when there are no existing series (data-fusion widgets)', () => {
+    const out = addStack({}) as { series: { stack: string }[] }
+    expect(out.series).toEqual([{ stack: 'total' }])
+  })
+
+  it('emits a broadcast template when series is missing entirely', () => {
+    const out = addStack({ tooltip: {} }) as {
+      series: { stack: string }[]
+      tooltip: object
+    }
+    expect(out.series).toEqual([{ stack: 'total' }])
+    expect(out.tooltip).toBeDefined()
+  })
+
+  it('preserves non-object series entries (defensive)', () => {
+    const out = addStack({ series: ['weird', { type: 'bar' }] }) as {
+      series: unknown[]
+    }
+    expect(out.series[0]).toBe('weird')
+    expect(out.series[1]).toMatchObject({ type: 'bar', stack: 'total' })
+  })
+})

package/src/widgets-v2/actions/stack-toggle/transforms.ts

@@ -0,0 +1,25 @@
+/**
+ * Stack-mode config transform: marks every series with `stack: 'total'` so
+ * ECharts stacks them vertically (bar) or by value (line). Module-level
+ * constant so identity is stable across renders — no `useCallback` needed.
+ *
+ * Widgets that bake series into options at build time get marked in place.
+ * Widgets that build series at data-fusion time (`bar`, `histogram`,
+ * `timeseries`) have no `series` array yet at config-transform time, so we
+ * also emit a single-entry **broadcast template** (`[{ stack: 'total' }]`).
+ * Their option factories merge that template into every series they emit
+ * at fusion time, so the `stack` mark survives end-to-end.
+ */
+export const addStack = (option: unknown): unknown => {
+  if (option == null || typeof option !== 'object') return option
+  const cfg = option as Record<string, unknown>
+  const existing = Array.isArray(cfg.series) ? cfg.series : []
+  const series =
+    existing.length === 0
+      ? [{ stack: 'total' }]
+      : existing.map((s: unknown): unknown => {
+          if (s == null || typeof s !== 'object') return s
+          return { ...s, stack: 'total' }
+        })
+  return { ...cfg, series }
+}

package/src/widgets-v2/actions/zoom-toggle/index.ts

@@ -0,0 +1,9 @@
+export { ZoomToggle, type ZoomToggleProps } from './zoom-toggle'
+export {
+  addZoom,
+  createAddZoom,
+  ZOOM_LAYOUT,
+  type ZoomAxis,
+  type CreateAddZoomOptions,
+} from './transforms'
+export { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'

package/src/widgets-v2/actions/zoom-toggle/labels.ts

@@ -0,0 +1,9 @@
+export interface ZoomToggleLabels {
+  on: string
+  off: string
+}
+
+export const DEFAULT_ZOOM_TOGGLE_LABELS: ZoomToggleLabels = {
+  on: 'Disable zoom',
+  off: 'Enable zoom',
+}

package/src/widgets-v2/actions/zoom-toggle/style.ts

@@ -0,0 +1,11 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  toggle: {
+    p: 0.5,
+    '& .MuiSvgIcon-root': { fontSize: 20 },
+  },
+  toggleActive: {
+    background: (theme: Theme) => theme.palette.primary.relatedLight,
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/actions/zoom-toggle/transforms.test.ts

@@ -0,0 +1,148 @@
+import { describe, it, expect } from 'vitest'
+import { createTheme, type Theme } from '@mui/material'
+import { addZoom, createAddZoom, ZOOM_LAYOUT } from './transforms'
+
+const theme = createTheme() as unknown as Theme
+
+describe('addZoom', () => {
+  it('appends an inside + slider dataZoom pair to the option', () => {
+    const out = addZoom({ xAxis: { type: 'value' } }) as {
+      xAxis: { type: string }
+      dataZoom: { type: string }[]
+    }
+    expect(out.xAxis).toEqual({ type: 'value' })
+    expect(out.dataZoom).toHaveLength(2)
+    expect(out.dataZoom[0]?.type).toBe('inside')
+    expect(out.dataZoom[1]?.type).toBe('slider')
+  })
+
+  it('replaces an existing dataZoom array (no append/stack across runs)', () => {
+    const seeded = { dataZoom: [{ type: 'inside' }, { type: 'inside' }] }
+    const out = addZoom(seeded) as { dataZoom: { type: string }[] }
+    expect(out.dataZoom).toHaveLength(2)
+    expect(out.dataZoom.map((z) => z.type)).toEqual(['inside', 'slider'])
+  })
+
+  it('omits start/end so ECharts preserves the user-dragged range across re-runs', () => {
+    const out = addZoom({}) as {
+      dataZoom: { start?: number; end?: number }[]
+    }
+    for (const dz of out.dataZoom) {
+      expect(dz.start).toBeUndefined()
+      expect(dz.end).toBeUndefined()
+    }
+  })
+
+  it('returns the input unchanged when not an object', () => {
+    expect(addZoom(null)).toBe(null)
+    expect(addZoom(undefined)).toBe(undefined)
+    expect(addZoom('not an object')).toBe('not an object')
+  })
+})
+
+describe('createAddZoom (theme-bound, v1-styled slider)', () => {
+  it('produces an inside zoom + a styled slider with the v1 chrome', () => {
+    const transform = createAddZoom(theme)
+    const out = transform({}) as {
+      dataZoom: {
+        type: string
+        height?: number
+        handleIcon?: string
+        fillerColor?: string
+        borderColor?: string
+        dataBackground?: { areaStyle?: { color?: string } }
+        textStyle?: { fontSize?: number }
+      }[]
+    }
+    expect(out.dataZoom).toHaveLength(2)
+    expect(out.dataZoom[0]?.type).toBe('inside')
+    const slider = out.dataZoom[1]!
+    expect(slider.type).toBe('slider')
+    // v1 hallmarks the new slider must carry.
+    expect(slider.height).toBe(ZOOM_LAYOUT.sliderHeight)
+    expect(slider.handleIcon).toMatch(/^image:\/\/data:image\/svg\+xml/)
+    expect(slider.fillerColor).toBeTruthy()
+    expect(slider.borderColor).toBeTruthy()
+    expect(slider.textStyle?.fontSize).toBeGreaterThan(0)
+  })
+
+  it('omits start/end so the dragged range survives re-runs', () => {
+    const transform = createAddZoom(theme)
+    const out = transform({}) as {
+      dataZoom: { start?: number; end?: number }[]
+    }
+    for (const dz of out.dataZoom) {
+      expect(dz.start).toBeUndefined()
+      expect(dz.end).toBeUndefined()
+    }
+  })
+
+  it('returns non-object input unchanged', () => {
+    const transform = createAddZoom(theme)
+    expect(transform(null)).toBe(null)
+    expect(transform(undefined)).toBe(undefined)
+  })
+
+  it('defaults to x-axis only (matches bar/histogram/timeseries semantics)', () => {
+    const transform = createAddZoom(theme)
+    const out = transform({}) as {
+      dataZoom: { type: string; xAxisIndex?: unknown; yAxisIndex?: unknown }[]
+    }
+    expect(out.dataZoom).toHaveLength(2)
+    for (const dz of out.dataZoom) {
+      expect(dz.xAxisIndex).toEqual([0])
+      expect(dz.yAxisIndex).toBeUndefined()
+    }
+  })
+
+  it('emits inside + slider per axis when axes=["x","y"] (2D zoom for scatter)', () => {
+    const transform = createAddZoom(theme, { axes: ['x', 'y'] })
+    const out = transform({}) as {
+      dataZoom: {
+        type: string
+        xAxisIndex?: unknown
+        yAxisIndex?: unknown
+        width?: number
+        right?: number
+        height?: number
+        bottom?: number
+      }[]
+    }
+    expect(out.dataZoom).toHaveLength(4)
+    const insides = out.dataZoom.filter((dz) => dz.type === 'inside')
+    const sliders = out.dataZoom.filter((dz) => dz.type === 'slider')
+    expect(insides).toHaveLength(2)
+    expect(sliders).toHaveLength(2)
+    // One inside per axis.
+    expect(insides.some((dz) => dz.xAxisIndex !== undefined)).toBe(true)
+    expect(insides.some((dz) => dz.yAxisIndex !== undefined)).toBe(true)
+    // X-slider: horizontal at the bottom (has height + bottom).
+    const xSlider = sliders.find((dz) => dz.xAxisIndex !== undefined)
+    expect(xSlider?.height).toBe(ZOOM_LAYOUT.sliderHeight)
+    expect(xSlider?.bottom).toBeDefined()
+    // Y-slider: vertical on the right (has width + right, no handleIcon).
+    const ySlider = sliders.find((dz) => dz.yAxisIndex !== undefined)
+    expect(ySlider?.width).toBe(ZOOM_LAYOUT.sliderHeight)
+    expect(ySlider?.right).toBeDefined()
+  })
+
+  it('emits y-only when axes=["y"]', () => {
+    const transform = createAddZoom(theme, { axes: ['y'] })
+    const out = transform({}) as {
+      dataZoom: { type: string; xAxisIndex?: unknown; yAxisIndex?: unknown }[]
+    }
+    expect(out.dataZoom).toHaveLength(2)
+    for (const dz of out.dataZoom) {
+      expect(dz.yAxisIndex).toEqual([0])
+      expect(dz.xAxisIndex).toBeUndefined()
+    }
+  })
+})
+
+describe('ZOOM_LAYOUT', () => {
+  it('exposes the layout constants used by data-fusion mergers', () => {
+    expect(ZOOM_LAYOUT.sliderHeight).toBe(32)
+    expect(ZOOM_LAYOUT.sliderGap).toBe(8)
+    expect(ZOOM_LAYOUT.sliderBottomWithLegend).toBe(28)
+  })
+})

package/src/widgets-v2/actions/zoom-toggle/transforms.ts

@@ -0,0 +1,171 @@
+import type { Theme } from '@mui/material'
+
+/**
+ * v1's slider handle — 9×36 SVG with a white pill body, secondary-colored
+ * stroke, and three grip lines. Inlined as a data URL so the chart can
+ * render it without a network fetch.
+ */
+const SLIDER_HANDLE_ICON =
+  'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDkgMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iLTAuNSIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIHJ4PSI0IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI3KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMyAyMykiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDMgMTkpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAzIDE1KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4='
+
+const SLIDER_HEIGHT = 32
+const SLIDER_BOTTOM = 0
+
+/** Which chart axis (or axes) zoom applies to. */
+export type ZoomAxis = 'x' | 'y'
+
+export interface CreateAddZoomOptions {
+  /**
+   * Axes to enable zoom on. Default `['x']` (matches bar / histogram /
+   * timeseries — horizontal pan/zoom on the category axis). Pass
+   * `['x', 'y']` for a scatterplot-style 2D zoom (mouse-wheel scales both
+   * axes; a horizontal slider sits at the bottom for x-range and a
+   * vertical slider sits on the right for y-range).
+   */
+  axes?: readonly ZoomAxis[]
+}
+
+/**
+ * Theme-bound zoom config transform: adds one inside `dataZoom`
+ * (mouse-wheel + drag) per axis plus a styled slider per axis with the
+ * v1 chrome (blue-tinted filler, secondary-color data preview, white
+ * pill handles, CARTO typography). The x-slider is horizontal at the
+ * bottom; the y-slider is vertical on the right.
+ *
+ * Returned function has stable identity for a given theme + axes
+ * combination; pair with `useMemo` at the call site.
+ *
+ * **No `start` / `end`** are emitted: ECharts defaults to `0–100` on the
+ * first `setOption` and then keeps the runtime slider state across
+ * subsequent merges (no `replaceMerge` for `dataZoom`). Re-running the
+ * transform on data/formatter/RelativeData updates therefore preserves the
+ * user's dragged range instead of snapping it back.
+ */
+export function createAddZoom(
+  theme: Theme,
+  options: CreateAddZoomOptions = {},
+): (option: unknown) => unknown {
+  const axes = options.axes ?? ['x']
+  const includeX = axes.includes('x')
+  const includeY = axes.includes('y')
+  const sliderStyles = getZoomSliderStyles(theme)
+  const baseSliderProps = {
+    throttle: 0,
+    showDetail: false,
+    brushSelect: false,
+    moveHandleSize: 8,
+    handleSize: '100%',
+    ...sliderStyles,
+  }
+  return (option: unknown): unknown => {
+    if (option == null || typeof option !== 'object') return option
+    const cfg = option as Record<string, unknown>
+    const dataZoom: object[] = []
+    if (includeX) {
+      dataZoom.push({ type: 'inside', xAxisIndex: [0], throttle: 0 })
+    }
+    if (includeY) {
+      dataZoom.push({ type: 'inside', yAxisIndex: [0], throttle: 0 })
+    }
+    if (includeX) {
+      dataZoom.push({
+        type: 'slider',
+        xAxisIndex: [0],
+        height: SLIDER_HEIGHT,
+        bottom: SLIDER_BOTTOM,
+        handleIcon: SLIDER_HANDLE_ICON,
+        ...baseSliderProps,
+      })
+    }
+    if (includeY) {
+      // Vertical slider — `width` is its thickness, `right` pins it to
+      // the right edge. We omit `handleIcon` so ECharts renders its
+      // default vertical handle (the inline SVG is shaped for a
+      // horizontal slider and looks wrong when rotated).
+      dataZoom.push({
+        type: 'slider',
+        yAxisIndex: [0],
+        width: SLIDER_HEIGHT,
+        right: SLIDER_BOTTOM,
+        ...baseSliderProps,
+      })
+    }
+    return { ...cfg, dataZoom }
+  }
+}
+
+/**
+ * Back-compat untyped transform — produces the bare `dataZoom` config from
+ * the original v2 implementation. Use {@link createAddZoom} when a theme is
+ * available so the slider matches the v1 styling.
+ *
+ * `start` / `end` are intentionally omitted so ECharts preserves the user's
+ * runtime range across subsequent `setOption` merges (see {@link createAddZoom}).
+ */
+export const addZoom = (option: unknown): unknown => {
+  if (option == null || typeof option !== 'object') return option
+  const cfg = option as Record<string, unknown>
+  return {
+    ...cfg,
+    dataZoom: [
+      { type: 'inside' },
+      {
+        type: 'slider',
+        height: SLIDER_HEIGHT,
+        bottom: SLIDER_BOTTOM,
+      },
+    ],
+  }
+}
+
+/** Style block matching v1's `getEChartZoomSliderStyles`. */
+function getZoomSliderStyles(theme: Theme) {
+  const secondary = theme.palette.secondary?.main ?? '#358BE7'
+  return {
+    fillerColor: 'rgba(53, 139, 231, 0.25)',
+    borderColor: 'rgba(53, 139, 231, 0.3)',
+    borderWidth: 0.5,
+    backgroundColor: 'transparent',
+    borderRadius: 4,
+    dataBackground: {
+      lineStyle: { opacity: 0 },
+      areaStyle: { opacity: 1, color: secondary },
+    },
+    selectedDataBackground: {
+      lineStyle: { opacity: 0 },
+      areaStyle: { opacity: 1, color: secondary },
+    },
+    handleStyle: {
+      color: theme.palette.common?.white ?? '#fff',
+      borderColor: 'rgba(3, 111, 226, 0.08)',
+      borderWidth: 1,
+      shadowBlur: 3,
+      shadowColor: 'rgba(0, 0, 0, 0.1)',
+      shadowOffsetX: 0,
+      shadowOffsetY: 1,
+    },
+    textStyle: {
+      color: theme.palette.black?.[60] ?? theme.palette.text?.primary,
+      fontSize: parseInt(
+        (theme.typography.overlineDelicate?.fontSize as string | undefined) ??
+          '11',
+      ),
+      fontFamily:
+        theme.typography.overlineDelicate?.fontFamily ??
+        theme.typography.caption?.fontFamily,
+    },
+  }
+}
+
+/**
+ * Visual layout constants used by the data-fusion mergers (bar, histogram,
+ * timeseries) when laying out the slider against the legend / grid.
+ */
+export const ZOOM_LAYOUT = {
+  /** Slider height in px (matches `createAddZoom` output). */
+  sliderHeight: SLIDER_HEIGHT,
+  /** Vertical gap between chart grid and the slider. */
+  sliderGap: 8,
+  /** Slider `bottom` when a legend is shown — sits above the legend row. */
+  sliderBottomWithLegend: 28,
+} as const

package/src/widgets-v2/actions/zoom-toggle/zoom-toggle.test.tsx

@@ -0,0 +1,107 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { ECharts } from 'echarts'
+import { ZoomToggle } from './zoom-toggle'
+import { Provider } from '../../provider/widget-provider'
+import {
+  applyTransforms,
+  clearAllWidgetStores,
+  getWidgetStore,
+  setEchartInstance,
+} from '../../stores'
+
+beforeEach(() => clearAllWidgetStores())
+afterEach(() => clearAllWidgetStores())
+
+describe('<ZoomToggle>', () => {
+  it('starts disabled by default', () => {
+    render(
+      <Provider id='zt-1' data={[]}>
+        <ZoomToggle />
+      </Provider>,
+    )
+    const trigger = screen.getByLabelText('Enable zoom')
+    expect(trigger.getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('respects initialEnabled=true', () => {
+    render(
+      <Provider id='zt-2' data={[]}>
+        <ZoomToggle initialEnabled />
+      </Provider>,
+    )
+    expect(screen.getByLabelText('Disable zoom')).toBeTruthy()
+  })
+
+  it('clicking enables the transform — dataZoom appears in the post-pipeline option', () => {
+    render(
+      <Provider id='zt-3' data={[1]}>
+        <ZoomToggle />
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('Enable zoom'))
+    // configTransforms now apply inside <Widget.Echart>; replay the
+    // pipeline locally over a blank structural option.
+    const configTransforms = getWidgetStore('zt-3').getState().configTransforms
+    const opts = applyTransforms({}, configTransforms) as {
+      dataZoom?: { type: string }[]
+    }
+    expect(opts.dataZoom).toBeTruthy()
+    expect(opts.dataZoom).toHaveLength(2)
+    expect(opts.dataZoom?.[0]?.type).toBe('inside')
+    expect(opts.dataZoom?.[1]?.type).toBe('slider')
+  })
+
+  it('clicking to disable issues a one-shot setOption({}, replaceMerge: ["dataZoom"]) on the live instance', () => {
+    const setOption = vi.fn()
+    const chart = { setOption } as unknown as ECharts
+    render(
+      <Provider id='zt-4' data={[1]}>
+        <ZoomToggle initialEnabled />
+      </Provider>,
+    )
+    setEchartInstance('zt-4', chart)
+    fireEvent.click(screen.getByLabelText('Disable zoom'))
+    expect(setOption).toHaveBeenCalledTimes(1)
+    expect(setOption).toHaveBeenCalledWith({}, { replaceMerge: ['dataZoom'] })
+  })
+
+  it('clicking to enable does NOT touch the live instance (no cleanup needed)', () => {
+    const setOption = vi.fn()
+    const chart = { setOption } as unknown as ECharts
+    render(
+      <Provider id='zt-5' data={[1]}>
+        <ZoomToggle />
+      </Provider>,
+    )
+    setEchartInstance('zt-5', chart)
+    fireEvent.click(screen.getByLabelText('Enable zoom'))
+    expect(setOption).not.toHaveBeenCalled()
+  })
+
+  it('rehydrates enabled state from transformStates on remount', () => {
+    const { unmount } = render(
+      <Provider id='zt-6' data={[1]} keepAlive>
+        <ZoomToggle />
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('Enable zoom'))
+    unmount()
+    render(
+      <Provider id='zt-6' data={[1]} keepAlive>
+        <ZoomToggle />
+      </Provider>,
+    )
+    // Re-mounted with keepAlive — enabled survived.
+    expect(screen.getByLabelText('Disable zoom')).toBeTruthy()
+  })
+
+  it('honors custom labels', () => {
+    render(
+      <Provider id='zt-7' data={[]}>
+        <ZoomToggle labels={{ off: 'Pan & zoom', on: 'Stop pan & zoom' }} />
+      </Provider>,
+    )
+    expect(screen.getByLabelText('Pan & zoom')).toBeTruthy()
+  })
+})