@carto/ps-react-ui 4.3.2 → 4.3.4

package/src/widgets/actions/download/exports.tsx

@@ -0,0 +1,103 @@
+import type { Ref } from 'react'
+import type { DownloadItem } from './types'
+import html2canvas from 'html2canvas'
+import { ImageOutlined } from '@mui/icons-material'
+import { SvgIcon } from '@mui/material'
+
+// Helper to escape CSV cell values
+function escapeCSVCell<D>(value: D): string {
+  const str =
+    value == null
+      ? ''
+      : typeof value === 'object'
+        ? JSON.stringify(value)
+        : String(value)
+
+  // If the value contains a comma, quote, or newline, wrap in quotes and escape quotes
+  if (/[",\n]/.test(str)) {
+    return `"${str.replace(/"/g, '""')}"`
+  }
+  return str
+}
+
+async function downloadFileToCSV<D>(data: D[][]) {
+  const csvContent = data
+    .map((row) => row.map(escapeCSVCell<D>).join(','))
+    .join('\n')
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+  return Promise.resolve(URL.createObjectURL(blob))
+}
+
+export const downloadToCSV: DownloadItem<unknown[][]> = {
+  id: 'csv',
+  label: 'CSV',
+  icon: (
+    <SvgIcon>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        width='18'
+        height='18'
+        fill='none'
+        viewBox='0 0 18 18'
+      >
+        <path
+          fill='currentColor'
+          d='M4.313 11.25h2.25v-1.125H4.688v-2.25h1.875V6.75h-2.25a.726.726 0 0 0-.535.216.726.726 0 0 0-.216.534v3c0 .213.072.39.216.534a.726.726 0 0 0 .534.216Zm2.925 0h2.25c.212 0 .39-.072.534-.216a.726.726 0 0 0 .216-.534V9.375a.931.931 0 0 0-.216-.59.658.658 0 0 0-.534-.273H8.363v-.637h1.875V6.75h-2.25a.726.726 0 0 0-.535.216.726.726 0 0 0-.216.534v1.125c0 .213.072.403.216.572a.675.675 0 0 0 .534.253h1.126v.675H7.238v1.125Zm4.95 0h1.124l1.313-4.5H13.5l-.75 2.588L12 6.75h-1.125l1.313 4.5ZM3 15c-.413 0-.766-.147-1.06-.44a1.445 1.445 0 0 1-.44-1.06v-9c0-.412.147-.766.44-1.06C2.235 3.148 2.588 3 3 3h12c.412 0 .766.147 1.06.44.293.294.44.648.44 1.06v9c0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44H3Zm0-1.5h12v-9H3v9Z'
+        />
+      </svg>
+    </SvgIcon>
+  ),
+  modifier: downloadFileToCSV,
+  callback: (data) => {
+    URL.revokeObjectURL(data)
+  },
+}
+
+async function downloadFileToPNG(ref: Ref<HTMLElement | null> | undefined) {
+  if (!ref || typeof ref === 'function' || !ref.current) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      '[CARTO downloadFileToPNG] Invalid ref passed to downloadFileToPNG. ' +
+        'Expected a React ref object with a .current property pointing to an HTMLElement. ' +
+        'Download aborted.',
+    )
+    return
+  }
+
+  const element = ref.current
+  const clone = element.cloneNode(true) as HTMLElement
+
+  clone.querySelector('.widget-toolbar-container')?.remove()
+  clone.querySelector('.widget-wrapper-actions')?.remove()
+
+  document.body.appendChild(clone)
+
+  const rect = clone.getBoundingClientRect()
+
+  const opts = {
+    useCORS: true,
+    scale: 2,
+    backgroundColor: '#fff',
+    width: rect.width,
+    height: rect.height,
+  }
+
+  const canvasResult: HTMLCanvasElement = await html2canvas(clone, opts)
+
+  const result = canvasResult.toDataURL('image/png')
+
+  document.body.removeChild(clone)
+
+  return Promise.resolve(result)
+}
+
+export const downloadToPNG: Omit<DownloadItem, 'modifier'> & {
+  modifier: (
+    ref: Ref<HTMLElement | null> | undefined,
+  ) => Promise<string | undefined>
+} = {
+  id: 'png',
+  label: 'PNG',
+  icon: <ImageOutlined />,
+  modifier: downloadFileToPNG,
+}

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

@@ -0,0 +1,21 @@
+import type { JSX, ReactNode } from 'react'
+import type { IconButtonProps } from '@mui/material'
+import type { WidgetState } from '../../stores/types'
+
+export interface DownloadItem<D = unknown> {
+  id: string
+  label: string
+  icon?: JSX.Element
+  disabled?: boolean
+  filename?: string
+  modifier: (data: D) => Promise<string | undefined>
+  callback?: (data: string) => void
+}
+
+export interface DownloadProps {
+  id: WidgetState['id']
+  items: DownloadItem[]
+  labels?: { ariaLabel?: string }
+  IconButtonProps?: IconButtonProps
+  Icon?: ReactNode
+}

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

@@ -0,0 +1,269 @@
+import { describe, test, expect, beforeEach } from 'vitest'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import { FullScreen } from './fullscreen'
+import { useWidgetStore } from '../../stores/widget-store'
+import type { FullScreenState } from './types'
+
+describe('FullScreen', () => {
+  const widgetId = 'test-widget'
+
+  beforeEach(() => {
+    // Clear store before each test
+    useWidgetStore.getState().clearWidgets()
+    // Initialize widget with title
+    useWidgetStore.getState().setWidget<FullScreenState>(widgetId, {
+      title: 'Test Widget',
+    })
+  })
+
+  test('renders fullscreen button', () => {
+    render(
+      <FullScreen id={widgetId}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    const button = screen.getByRole('button')
+    expect(button).toBeTruthy()
+  })
+
+  test('opens dialog when fullscreen button is clicked', () => {
+    render(
+      <FullScreen id={widgetId}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    // Check if dialog is opened
+    expect(screen.getByText('Test Widget')).toBeTruthy()
+    expect(screen.getByText('Widget Content')).toBeTruthy()
+  })
+
+  test('closes dialog when close button is clicked', () => {
+    render(
+      <FullScreen id={widgetId}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    // Open dialog
+    const openButton = screen.getByRole('button')
+    fireEvent.click(openButton)
+
+    // Find and click close button (inside the dialog)
+    const dialog = screen.getByRole('dialog')
+    const closeButton = within(dialog).getAllByRole('button')[0]
+
+    fireEvent.click(closeButton!)
+
+    // Store should be updated
+    const widget = useWidgetStore
+      .getState()
+      .getWidget<FullScreenState>(widgetId)
+    expect(widget?.isFullScreen).toBe(false)
+  })
+
+  test('uses custom aria label when provided', () => {
+    const customLabels = {
+      ariaLabel: 'custom-fullscreen-dialog',
+    }
+
+    render(
+      <FullScreen id={widgetId} labels={customLabels}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    const dialog = screen.getByRole('dialog')
+    expect(dialog.getAttribute('aria-labelledby')).toBe(
+      'custom-fullscreen-dialog',
+    )
+  })
+
+  test('uses default aria label when not provided', () => {
+    render(
+      <FullScreen id={widgetId}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    const dialog = screen.getByRole('dialog')
+    expect(dialog.getAttribute('aria-labelledby')).toBe(
+      `fullscreen-dialog-title-${widgetId}`,
+    )
+  })
+
+  test('renders children inside dialog content', () => {
+    const TestChild = () => (
+      <div>
+        <p>First paragraph</p>
+        <p>Second paragraph</p>
+      </div>
+    )
+
+    render(
+      <FullScreen id={widgetId}>
+        <TestChild />
+      </FullScreen>,
+    )
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    expect(screen.getByText('First paragraph')).toBeTruthy()
+    expect(screen.getByText('Second paragraph')).toBeTruthy()
+  })
+
+  test('dialog is not visible initially', () => {
+    render(
+      <FullScreen id={widgetId}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    // Dialog should not be rendered until button is clicked
+    expect(screen.queryByRole('dialog')).toBeNull()
+  })
+
+  test('updates widget store when opening fullscreen', () => {
+    render(
+      <FullScreen id={widgetId}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    const widget = useWidgetStore
+      .getState()
+      .getWidget<FullScreenState>(widgetId)
+    expect(widget?.isFullScreen).toBe(true)
+  })
+
+  test('updates widget store when closing fullscreen', () => {
+    // Pre-set the widget to fullscreen
+    useWidgetStore.getState().setWidget<FullScreenState>(widgetId, {
+      title: 'Test Widget',
+      isFullScreen: true,
+    })
+
+    render(
+      <FullScreen id={widgetId}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    // Find and click close button
+    const dialog = screen.getByRole('dialog')
+    const closeButton = within(dialog).getAllByRole('button')[0]
+
+    fireEvent.click(closeButton!)
+
+    const widget = useWidgetStore
+      .getState()
+      .getWidget<FullScreenState>(widgetId)
+    expect(widget?.isFullScreen).toBe(false)
+  })
+
+  test('handles multiple fullscreen widgets independently', () => {
+    const widget1Id = 'widget-1'
+    const widget2Id = 'widget-2'
+
+    // Initialize both widgets with titles
+    useWidgetStore.getState().setWidget<FullScreenState>(widget1Id, {
+      title: 'Widget 1',
+    })
+    useWidgetStore.getState().setWidget<FullScreenState>(widget2Id, {
+      title: 'Widget 2',
+    })
+
+    render(
+      <>
+        <FullScreen id={widget1Id}>
+          <div>Content 1</div>
+        </FullScreen>
+        <FullScreen id={widget2Id}>
+          <div>Content 2</div>
+        </FullScreen>
+      </>,
+    )
+
+    const buttons = screen.getAllByRole('button')
+
+    // Open first widget
+    fireEvent.click(buttons[0]!)
+    let widget1 = useWidgetStore
+      .getState()
+      .getWidget<FullScreenState>(widget1Id)
+    let widget2 = useWidgetStore
+      .getState()
+      .getWidget<FullScreenState>(widget2Id)
+
+    expect(widget1?.isFullScreen).toBe(true)
+    expect(widget2?.isFullScreen).toBeUndefined()
+
+    // Verify widget 1 content is displayed
+    expect(screen.getByText('Content 1')).toBeTruthy()
+
+    // Close first widget via store (simpler than clicking)
+    useWidgetStore.getState().setWidget<FullScreenState>(widget1Id, {
+      title: 'Widget 1',
+      isFullScreen: false,
+    })
+
+    // Open second widget
+    fireEvent.click(buttons[1]!)
+
+    widget1 = useWidgetStore.getState().getWidget<FullScreenState>(widget1Id)
+    widget2 = useWidgetStore.getState().getWidget<FullScreenState>(widget2Id)
+
+    expect(widget1?.isFullScreen).toBe(false)
+    expect(widget2?.isFullScreen).toBe(true)
+
+    // Verify widget 2 content is displayed
+    expect(screen.getByText('Content 2')).toBeTruthy()
+  })
+
+  test('renders dialog title with correct typography', () => {
+    render(
+      <FullScreen id={widgetId}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    const title = screen.getByText('Test Widget')
+    expect(title).toBeTruthy()
+    expect(title.tagName).toBe('SPAN')
+  })
+
+  test('dialog respects isFullScreen state from store', () => {
+    // Set initial state to fullscreen
+    useWidgetStore.getState().setWidget<FullScreenState>(widgetId, {
+      title: 'Test Widget',
+      isFullScreen: true,
+    })
+
+    render(
+      <FullScreen id={widgetId}>
+        <div>Widget Content</div>
+      </FullScreen>,
+    )
+
+    // Dialog should be visible immediately
+    expect(screen.getByRole('dialog')).toBeTruthy()
+    expect(screen.getByText('Widget Content')).toBeTruthy()
+  })
+})

package/src/widgets/actions/fullscreen/fullscreen.tsx

@@ -0,0 +1,82 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Typography,
+} from '@mui/material'
+import { useWidgetStore } from '../../stores/widget-store'
+import { Close, FullscreenOutlined } from '@mui/icons-material'
+import type {
+  FullScreenConfig,
+  FullScreenProps,
+  FullScreenState,
+} from './types'
+import { styles } from './styles'
+import { useShallow } from 'zustand/shallow'
+
+export function FullScreen({
+  id,
+  labels,
+  children,
+  Icon,
+  IconButtonProps,
+  DialogContentProps: { sx, ...DialogContentProps } = {},
+}: FullScreenProps) {
+  const { isFullScreen, title } = useWidgetStore(
+    useShallow((state) => {
+      const widget = state.getWidget<FullScreenState>(id)
+      return {
+        isFullScreen: widget?.isFullScreen,
+        title: widget?.title,
+      }
+    }),
+  )
+  const setWidget = useWidgetStore((state) => state.setWidget)
+
+  const updateFullScreenConfig = (updates: Partial<FullScreenConfig>) => {
+    setWidget<FullScreenState>(id, {
+      isFullScreen: updates.isFullScreen,
+    })
+  }
+
+  return (
+    <>
+      <IconButton
+        {...IconButtonProps}
+        onClick={() => updateFullScreenConfig({ isFullScreen: true })}
+      >
+        {Icon ?? <FullscreenOutlined />}
+      </IconButton>
+      <Dialog
+        maxWidth={false}
+        open={!!isFullScreen}
+        aria-labelledby={labels?.ariaLabel ?? `fullscreen-dialog-title-${id}`}
+        onClose={() => updateFullScreenConfig({ isFullScreen: false })}
+      >
+        <DialogTitle
+          id={`fullscreen-dialog-title-${id}`}
+          sx={styles.title.container}
+        >
+          <Typography variant='subtitle1' component='span'>
+            {title}
+          </Typography>
+          <IconButton
+            onClick={() => updateFullScreenConfig({ isFullScreen: false })}
+          >
+            <Close />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent
+          sx={{
+            ...styles.content,
+            ...sx,
+          }}
+          {...DialogContentProps}
+        >
+          {children}
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/widgets/actions/fullscreen/styles.ts

@@ -0,0 +1,17 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  title: {
+    container: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 1,
+    },
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: ({ spacing }) => spacing(1),
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets/actions/fullscreen/types.ts

@@ -0,0 +1,27 @@
+import type { DialogContentProps, IconButtonProps } from '@mui/material'
+import type { ReactNode } from 'react'
+import type { BaseWidgetState } from '../../../widgets/stores/types'
+
+export type FullScreenState<T = unknown> = BaseWidgetState<
+  T &
+    FullScreenConfigProps & {
+      title: string
+    }
+>
+
+export interface FullScreenConfig {
+  isFullScreen?: boolean
+}
+
+export type FullScreenConfigProps = FullScreenConfig
+
+export interface FullScreenProps {
+  id: FullScreenState['id']
+  labels?: {
+    ariaLabel?: string
+  }
+  children: ReactNode
+  DialogContentProps?: DialogContentProps
+  IconButtonProps?: IconButtonProps
+  Icon?: ReactNode
+}

package/src/widgets/actions/index.ts

@@ -0,0 +1,51 @@
+/* Fullscreen Widget */
+export { FullScreen } from './fullscreen/fullscreen'
+export type { FullScreenState, FullScreenConfig } from './fullscreen/types'
+
+/* Download Widget */
+export { Download } from './download/download'
+export type { DownloadItem, DownloadProps } from './download/types'
+export { downloadToCSV, downloadToPNG } from './download/exports'
+
+/* Relative Data Widget */
+export {
+  RelativeData,
+  RELATIVE_DATA_TOOL_ID,
+} from './relative-data/relative-data'
+export type { RelativeDataProps } from './relative-data/types'
+
+/* Zoom Toggle Widget */
+export { ZoomToggle } from './zoom-toggle/zoom-toggle'
+export type {
+  ZoomToggleProps,
+  ZoomState,
+  ZoomConfig,
+} from './zoom-toggle/types'
+
+/* Stack Toggle Widget */
+export { StackToggle } from './stack-toggle/stack-toggle'
+export type { StackToggleProps, StackToggleState } from './stack-toggle/types'
+
+/* Searcher Toggle Widget */
+export { Searcher, SEARCHER_TOOL_ID } from './searcher/searcher'
+export { SearcherToggle } from './searcher/searcher-toggle'
+export type {
+  SearcherToggleProps,
+  SearcherProps,
+  SearcherFilterFn,
+  SearcherState,
+} from './searcher/types'
+
+/* Change Column Widget */
+export { ChangeColumn } from './change-column/change-column'
+export type { ChangeColumnProps } from './change-column/types'
+
+/* Lock Selection Widget */
+export {
+  LockSelection,
+  LOCK_SELECTION_TOOL_ID,
+} from './lock-selection/lock-selection'
+export type {
+  LockSelectionProps,
+  LockSelectionState,
+} from './lock-selection/types'