@carto/ps-react-ui 5.0.0 → 5.2.0

package/src/widgets-v2/actions/download/index.ts

@@ -11,5 +11,5 @@ export { CSVIcon, PNGIcon, MarkdownIcon } from './icons'
 export { buildPngDownloadItem, type BuildPngDownloadItemArgs } from './png-item'
 export { buildCsvDownloadItem, type BuildCsvDownloadItemArgs } from './csv-item'
 export { DOWNLOAD_ITEM_IDS, type DownloadItemId } from './constants'
-export type { DownloadItem } from './types'
+export type { DownloadItem, DownloadContext } from './types'
 export { DEFAULT_DOWNLOAD_LABELS, type DownloadLabels } from './labels'

package/src/widgets-v2/actions/download/png-item.test.tsx

@@ -44,7 +44,7 @@ describe('buildPngDownloadItem', () => {
       filename: 'sales',
       getCaptureEl: () => document.createElement('div'),
     })
-    const handle = await item.resolve()
+    const handle = await item.resolve({ id: null })
     expect(handle.url).toBe('blob:png')
     expect(handle.filename).toBe('sales.png')
     handle.revoke?.()
@@ -56,7 +56,9 @@ describe('buildPngDownloadItem', () => {
       filename: 'demo',
       getCaptureEl: () => null,
     })
-    await expect(item.resolve()).rejects.toThrow(/No PNG capture element/)
+    await expect(item.resolve({ id: null })).rejects.toThrow(
+      /No PNG capture element/,
+    )
   })
 
   it('forwards pixelRatio and backgroundColor overrides', async () => {
@@ -66,7 +68,7 @@ describe('buildPngDownloadItem', () => {
       pixelRatio: 4,
       backgroundColor: '#fff',
     })
-    const handle = await item.resolve()
+    const handle = await item.resolve({ id: null })
     expect(handle.filename).toBe('sales.png')
   })
 })

package/src/widgets-v2/actions/download/png-item.tsx

@@ -1,7 +1,7 @@
 import { DOWNLOAD_ITEM_IDS } from './constants'
 import { downloadDOMToPNG } from './exports'
 import { PNGIcon } from './icons'
-import type { DownloadItem } from './types'
+import type { DownloadContext, DownloadItem } from './types'
 
 export interface BuildPngDownloadItemArgs {
   /** Base filename (without extension). The item appends `.png`. */
@@ -11,7 +11,7 @@ export interface BuildPngDownloadItemArgs {
    * download config doesn't capture a stale reference. Wire it to
    * `() => getCaptureEl(id)` from `widgets-v2/stores`.
    */
-  getCaptureEl: () => HTMLElement | null
+  getCaptureEl: (ctx: DownloadContext) => HTMLElement | null
   /** html2canvas `scale`. Default 2. */
   pixelRatio?: number
   /** html2canvas `backgroundColor`. Default transparent (`null`). */
@@ -33,8 +33,8 @@ export function buildPngDownloadItem(
     id: DOWNLOAD_ITEM_IDS.png,
     label: args.label ?? 'PNG',
     icon: <PNGIcon fontSize='small' />,
-    resolve: async () => {
-      const el = args.getCaptureEl()
+    resolve: async (ctx) => {
+      const el = args.getCaptureEl(ctx)
       if (!el) {
         throw new Error('[widgets-v2] No PNG capture element available')
       }

package/src/widgets-v2/actions/download/types.ts

@@ -1,5 +1,17 @@
 import type { ReactElement } from 'react'
 
+/**
+ * Passed to {@link DownloadItem.resolve} by `<Widget.Download>`.
+ */
+export interface DownloadContext {
+  /**
+   * Id of the widget store the menu was opened from — the dialog's own
+   * store when opened from `FullScreen.Slot`'s header, so an export matches
+   * what the user is looking at. `null` outside a `<Widget.Provider>`.
+   */
+  id: string | null
+}
+
 export interface DownloadItem {
   /** Unique key (also used as menu label key). */
   id: string
@@ -28,5 +40,7 @@ export interface DownloadItem {
    * Resolves to a Blob URL the trigger will click. Optional `revoke` is
    * called after the click is dispatched.
    */
-  resolve: () => Promise<{ url: string; filename: string; revoke?: () => void }>
+  resolve: (
+    ctx: DownloadContext,
+  ) => Promise<{ url: string; filename: string; revoke?: () => void }>
 }

package/src/widgets-v2/actions/fullscreen/fullscreen-store.test.tsx

@@ -0,0 +1,155 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { Provider } from '../../provider/widget-provider'
+import type { ECharts } from 'echarts'
+import {
+  clearAllWidgetStores,
+  getWidgetStore,
+  hasWidgetStore,
+  setEchartInstance,
+  useWidget,
+  useWidgetId,
+} from '../../stores'
+import { Download } from '../download/download'
+import { FullScreen, fullScreenStoreId } from './fullscreen'
+
+afterEach(() => clearAllWidgetStores())
+
+// A stand-in for any action: reads and writes one flag on whichever store
+// its copy runs on.
+function Flag() {
+  const id = useWidgetId()
+  const on = useWidget(id, (s) => s.transformStates.flag?.enabled ?? false)
+  return (
+    <button
+      type='button'
+      data-testid={`flag-${id}`}
+      aria-pressed={on}
+      onClick={() =>
+        getWidgetStore(id).setState((s) => ({
+          transformStates: { ...s.transformStates, flag: { enabled: !on } },
+        }))
+      }
+    >
+      flag
+    </button>
+  )
+}
+
+function DataProbe() {
+  const id = useWidgetId()
+  const data = useWidget(id, (s) => s.rawData)
+  return <span data-testid={`data-${id}`}>{String(data)}</span>
+}
+
+function Widget({ data = 'a' }: { data?: string }) {
+  return (
+    <Provider id='w' data={data}>
+      <FullScreen.Trigger labels={{ open: 'OpenT', close: 'CloseT' }} />
+      <FullScreen.Slot>
+        <Flag />
+        <DataProbe />
+      </FullScreen.Slot>
+    </Provider>
+  )
+}
+
+const dialogId = fullScreenStoreId('w')
+const flag = (id: string) =>
+  screen.getByTestId(`flag-${id}`).getAttribute('aria-pressed')
+
+async function close() {
+  fireEvent.click(screen.getByLabelText('CloseT'))
+  await waitFor(() =>
+    expect(screen.queryByTestId(`flag-${dialogId}`)).toBeNull(),
+  )
+}
+
+describe('<FullScreen.Slot> — the dialog runs on its own store', () => {
+  it('starts from the card, runs apart while open, and hands back on close', async () => {
+    render(<Widget />)
+    fireEvent.click(screen.getByTestId('flag-w'))
+    expect(flag('w')).toBe('true')
+
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    // Seeded from the card.
+    expect(flag(dialogId)).toBe('true')
+
+    // Changes in the dialog don't reach the card while open…
+    fireEvent.click(screen.getByTestId(`flag-${dialogId}`))
+    expect(flag(dialogId)).toBe('false')
+    expect(flag('w')).toBe('true')
+
+    // …and do once it closes. The dialog's store goes with it.
+    await close()
+    expect(flag('w')).toBe('false')
+    expect(hasWidgetStore(dialogId)).toBe(false)
+  })
+
+  it('keeps the consumer props flowing into the dialog while it is open', () => {
+    const { rerender } = render(<Widget data='a' />)
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    expect(screen.getByTestId(`data-${dialogId}`).textContent).toBe('a')
+    rerender(<Widget data='b' />)
+    expect(screen.getByTestId(`data-${dialogId}`).textContent).toBe('b')
+  })
+
+  it('reopening starts from the card again, not from the last dialog', async () => {
+    render(<Widget />)
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    await close()
+    act(() =>
+      getWidgetStore('w').setState({
+        transformStates: { flag: { enabled: true } },
+      }),
+    )
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    expect(flag(dialogId)).toBe('true')
+  })
+
+  it('downloads from the dialog header resolve against the dialog store', async () => {
+    const resolve = vi.fn(() =>
+      Promise.resolve({ url: 'blob:x', filename: 'x.csv' }),
+    )
+    render(
+      <Provider id='w' data='a'>
+        <FullScreen.Trigger labels={{ open: 'OpenT', close: 'CloseT' }} />
+        <FullScreen.Slot
+          actions={<Download items={[{ id: 'csv', label: 'CSV', resolve }]} />}
+        >
+          <span>body</span>
+        </FullScreen.Slot>
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    fireEvent.click(screen.getByLabelText('Download'))
+    fireEvent.click(await screen.findByText('CSV'))
+    expect(resolve).toHaveBeenCalledWith({ id: dialogId })
+  })
+
+  // Legend / dataZoom / brush live in the chart instance, not the store.
+  // The Slot moves them through the instance registry, so Widget.Echart
+  // doesn't need to know about fullscreen.
+  it('starts the dialog chart from the card chart and hands it back on close', async () => {
+    const fakeChart = (option: object) =>
+      ({
+        getOption: vi.fn(() => option),
+        setOption: vi.fn(),
+        dispatchAction: vi.fn(),
+        isDisposed: () => false,
+      }) as unknown as ECharts & {
+        setOption: ReturnType<typeof vi.fn>
+      }
+    const card = fakeChart({ from: 'card' })
+    const dialog = fakeChart({ from: 'dialog' })
+    render(<Widget />)
+    act(() => setEchartInstance('w', card))
+
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    act(() => setEchartInstance(dialogId, dialog))
+    expect(dialog.setOption).toHaveBeenCalledWith({ from: 'card' })
+
+    await close()
+    expect(card.setOption).toHaveBeenCalledWith({ from: 'dialog' })
+  })
+})

package/src/widgets-v2/actions/fullscreen/fullscreen.test.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef } from 'react'
+import { useEffect } from 'react'
 import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { Provider } from '../../provider/widget-provider'
 import { clearAllWidgetStores, getWidgetStore } from '../../stores'
 import { FullScreen } from './fullscreen'
@@ -61,22 +61,35 @@ describe('<FullScreen.Trigger> — store toggle', () => {
 })
 
 describe('<FullScreen.Slot> — render-prop body + portal', () => {
-  it('passes the live isFullScreen flag to the render prop', () => {
-    let received: boolean | undefined
+  it('passes false to the card copy and true to the dialog copy', () => {
     render(
       <Provider id='fs-rp' data={[]}>
         <FullScreen.Trigger />
         <FullScreen.Slot>
-          {(isFullScreen) => {
-            received = isFullScreen
-            return <span data-testid='body'>body</span>
-          }}
+          {(isFullScreen) => (
+            <span data-testid={isFullScreen ? 'dialog' : 'card'}>body</span>
+          )}
         </FullScreen.Slot>
       </Provider>,
     )
-    expect(received).toBe(false)
+    expect(screen.getByTestId('card')).toBeTruthy()
+    expect(screen.queryByTestId('dialog')).toBeNull()
     fireEvent.click(screen.getByLabelText('Open in full screen'))
-    expect(received).toBe(true)
+    expect(screen.getByTestId('card')).toBeTruthy()
+    expect(screen.getByTestId('dialog')).toBeTruthy()
+  })
+
+  it('renders plain children identically in both copies', () => {
+    render(
+      <Provider id='fs-plain' data={[]}>
+        <FullScreen.Trigger />
+        <FullScreen.Slot>
+          <span data-testid='body'>body</span>
+        </FullScreen.Slot>
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('Open in full screen'))
+    expect(screen.getAllByTestId('body')).toHaveLength(2)
   })
 
   it('renders the title above the body when open', async () => {
@@ -104,47 +117,94 @@ describe('<FullScreen.Slot> — render-prop body + portal', () => {
     expect(closes.length).toBeGreaterThan(0)
   })
 
-  it('keeps the same DOM node across the fullscreen toggle (portal reparent)', () => {
+  it('renders `actions` in the modal header, next to the close button', async () => {
+    render(
+      <Provider id='fs-actions' data={[]}>
+        <FullScreen.Trigger labels={{ open: 'OpenT', close: 'CloseT' }} />
+        <FullScreen.Slot
+          title='With actions'
+          actions={<button type='button'>Download</button>}
+        >
+          {() => <div>body</div>}
+        </FullScreen.Slot>
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    const action = await screen.findByText('Download')
+    // Same header row as the close button — the wrapper's action row is
+    // covered by the dialog, so the modal has to carry them itself.
+    const header = action.closest('.MuiDialogTitle-root')
+    expect(header).toBeTruthy()
+    expect(
+      header?.querySelector('[aria-label="Exit full screen"]'),
+    ).toBeTruthy()
+  })
+
+  it('keeps `actions` mounted across a fullscreen toggle', () => {
     render(
-      <Provider id='fs-reparent' data={[]}>
+      <Provider id='fs-actions-keep' data={[]}>
+        <FullScreen.Trigger labels={{ open: 'OpenT', close: 'CloseT' }} />
+        <FullScreen.Slot
+          title='Y'
+          actions={<button type='button'>Download</button>}
+        >
+          {() => <div>body</div>}
+        </FullScreen.Slot>
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    const before = screen.getByText('Download')
+    fireEvent.click(screen.getByLabelText('CloseT'))
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    expect(screen.getByText('Download')).toBe(before)
+  })
+
+  it('merges `paperSx` over the default dialog paper size', () => {
+    render(
+      <Provider id='fs-paper' data={[]}>
         <FullScreen.Trigger />
-        <FullScreen.Slot title='X'>
-          {() => <span data-testid='inner'>inner</span>}
+        <FullScreen.Slot title='P' paperSx={{ width: 560, height: 'auto' }}>
+          {() => <div>body</div>}
         </FullScreen.Slot>
       </Provider>,
     )
-    const before = screen.getByTestId('inner')
     fireEvent.click(screen.getByLabelText('Open in full screen'))
-    const after = screen.getByTestId('inner')
-    expect(after).toBe(before)
+    const paper = document.querySelector<HTMLElement>('.MuiDialog-paper')
+    expect(paper).toBeTruthy()
+    const css = getComputedStyle(paper!)
+    expect(css.width).toBe('560px')
+    expect(css.height).toBe('auto')
+    // Untouched keys still come from the default — `90vw`, resolved against
+    // the test viewport (1024px).
+    expect(css.maxWidth).toBe('921.6px')
   })
 
-  it('mounts the body exactly once across multiple fullscreen toggles', () => {
-    let mountCount = 0
+  it('keeps the card body mounted while the dialog mounts its own copy', async () => {
+    let mounts = 0
     function CountingChild() {
-      const counted = useRef(false)
       useEffect(() => {
-        if (counted.current) return
-        counted.current = true
-        mountCount += 1
+        mounts += 1
       }, [])
       return <div data-testid='counter'>x</div>
     }
-    // Distinct labels for the trigger so its "close" aria-label can't collide
-    // with the modal's own close button (also "Exit full screen" by default
-    // when keepMounted=true keeps the modal in DOM).
     render(
-      <Provider id='fs-mount-once' data={[]}>
+      <Provider id='fs-two-copies' data={[]}>
         <FullScreen.Trigger labels={{ open: 'OpenT', close: 'CloseT' }} />
-        <FullScreen.Slot title='Z'>{() => <CountingChild />}</FullScreen.Slot>
+        <FullScreen.Slot title='Z'>
+          <CountingChild />
+        </FullScreen.Slot>
       </Provider>,
     )
-    expect(mountCount).toBe(1)
+    const card = screen.getByTestId('counter')
+    expect(mounts).toBe(1)
     fireEvent.click(screen.getByLabelText('OpenT'))
-    expect(mountCount).toBe(1)
+    expect(mounts).toBe(2)
+    expect(screen.getAllByTestId('counter')).toHaveLength(2)
+    expect(screen.getAllByTestId('counter')).toContain(card)
     fireEvent.click(screen.getByLabelText('CloseT'))
-    expect(mountCount).toBe(1)
-    fireEvent.click(screen.getByLabelText('OpenT'))
-    expect(mountCount).toBe(1)
+    await waitFor(() =>
+      expect(screen.getAllByTestId('counter')).toHaveLength(1),
+    )
+    expect(screen.getByTestId('counter')).toBe(card)
   })
 })