@carto/ps-react-ui 5.1.0 → 6.0.0

package/src/widgets/actions/change-column/change-column-dnd.test.tsx

@@ -1,193 +0,0 @@
-/**
- * Tests for ChangeColumn's handleDragEnd + reorderFn branches that
- * require driving the @dnd-kit/core onDragEnd callback. Uses the shared
- * `tests/mocks/dnd-kit` harness so the DnD-kit pointer machinery is
- * replaced with a passthrough that exposes the onDragEnd prop directly.
- *
- * Complements the existing change-column.test.tsx which covers render +
- * menu + tool-registration but doesn't drive drag events.
- */
-import { describe, test, expect, beforeEach, vi } from 'vitest'
-import { render } from '@testing-library/react'
-import {
-  dndKitCoreMock,
-  dndKitSortableMock,
-  lastDndContextProps,
-  resetDndKitMocks,
-} from '../../../../tests/mocks/dnd-kit'
-
-vi.mock('@dnd-kit/core', () => dndKitCoreMock())
-vi.mock('@dnd-kit/sortable', () => dndKitSortableMock())
-
-import { ChangeColumn, CHANGE_COLUMN_TOOL_ID } from './change-column'
-import { useWidgetStore } from '../../stores/widget-store'
-import type { TableColumn } from '../../table/types'
-
-const widgetId = 'change-column-dnd'
-const columns: TableColumn[] = [
-  { id: 'name', label: 'Name' },
-  { id: 'country', label: 'Country' },
-  { id: 'population', label: 'Population' },
-]
-
-function seedColumns(extra: Partial<{ columns: TableColumn[] }> = {}) {
-  useWidgetStore.getState().setWidget(widgetId, {
-    columns,
-    ...extra,
-  })
-}
-
-beforeEach(() => {
-  useWidgetStore.getState().clearWidgets()
-  resetDndKitMocks()
-})
-
-describe('handleDragEnd branches', () => {
-  test('reorders columns when active and over differ', () => {
-    seedColumns()
-    render(<ChangeColumn id={widgetId} />)
-
-    // Drag 'name' (index 0) over 'population' (index 2)
-    lastDndContextProps().onDragEnd?.({
-      active: { id: 'name' },
-      over: { id: 'population' },
-    })
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const result = (widget as unknown as { columns: TableColumn[] }).columns
-    expect(result.map((c) => c.id)).toEqual(['country', 'population', 'name'])
-  })
-
-  test('no-op when `over` is missing (drop outside the sortable area)', () => {
-    seedColumns()
-    render(<ChangeColumn id={widgetId} />)
-    const before = useWidgetStore.getState().getWidget(widgetId)
-    lastDndContextProps().onDragEnd?.({
-      active: { id: 'name' },
-      over: null,
-    })
-    const after = useWidgetStore.getState().getWidget(widgetId)
-    // No reorder; column order unchanged
-    const beforeIds = (
-      before as unknown as { columns: TableColumn[] }
-    ).columns.map((c) => c.id)
-    const afterIds = (
-      after as unknown as { columns: TableColumn[] }
-    ).columns.map((c) => c.id)
-    expect(afterIds).toEqual(beforeIds)
-  })
-
-  test('no-op when active.id === over.id (no movement)', () => {
-    seedColumns()
-    render(<ChangeColumn id={widgetId} />)
-    lastDndContextProps().onDragEnd?.({
-      active: { id: 'name' },
-      over: { id: 'name' },
-    })
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const result = (widget as unknown as { columns: TableColumn[] }).columns
-    expect(result.map((c) => c.id)).toEqual(['name', 'country', 'population'])
-  })
-
-  test('no-op when widget has no columns (returns early)', () => {
-    // No columns seeded but the component renders for the test we still
-    // want to set up — minimum 2 columns are required for the menu to open.
-    // Render with 2 columns then clear them.
-    seedColumns()
-    render(<ChangeColumn id={widgetId} />)
-    useWidgetStore.getState().setWidget(widgetId, { columns: undefined })
-    expect(() =>
-      lastDndContextProps().onDragEnd?.({
-        active: { id: 'name' },
-        over: { id: 'country' },
-      }),
-    ).not.toThrow()
-  })
-
-  test('no-op when active.id is not found in columns (oldIndex === -1)', () => {
-    seedColumns()
-    render(<ChangeColumn id={widgetId} />)
-    lastDndContextProps().onDragEnd?.({
-      active: { id: 'unknown-col' },
-      over: { id: 'name' },
-    })
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const result = (widget as unknown as { columns: TableColumn[] }).columns
-    expect(result.map((c) => c.id)).toEqual(['name', 'country', 'population'])
-  })
-
-  test('no-op when over.id is not found in columns (newIndex === -1)', () => {
-    seedColumns()
-    render(<ChangeColumn id={widgetId} />)
-    lastDndContextProps().onDragEnd?.({
-      active: { id: 'name' },
-      over: { id: 'unknown-col' },
-    })
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const result = (widget as unknown as { columns: TableColumn[] }).columns
-    expect(result.map((c) => c.id)).toEqual(['name', 'country', 'population'])
-  })
-})
-
-describe('reorderFn branches', () => {
-  test('returns currentConfig when widget has no columns', () => {
-    seedColumns()
-    render(<ChangeColumn id={widgetId} />)
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const tool = widget?.registeredTools?.find(
-      (t) => t.id === CHANGE_COLUMN_TOOL_ID,
-    )
-    // Clear columns from the widget
-    useWidgetStore.getState().setWidget(widgetId, { columns: [] })
-    const input = { columns }
-    expect(tool?.fn(input)).toBe(input)
-  })
-
-  test('returns currentConfig when config has no columns', () => {
-    seedColumns()
-    render(<ChangeColumn id={widgetId} />)
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const tool = widget?.registeredTools?.find(
-      (t) => t.id === CHANGE_COLUMN_TOOL_ID,
-    )
-    const input = { columns: [] }
-    expect(tool?.fn(input)).toBe(input)
-  })
-
-  test('returns currentConfig when config columns key is undefined', () => {
-    seedColumns()
-    render(<ChangeColumn id={widgetId} />)
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const tool = widget?.registeredTools?.find(
-      (t) => t.id === CHANGE_COLUMN_TOOL_ID,
-    )
-    const input = { other: 1 }
-    expect(tool?.fn(input)).toBe(input)
-  })
-
-  test('drops config columns that have no widget-column counterpart', () => {
-    seedColumns({ columns: [{ id: 'name', label: 'Name' }] }) // widget has only 'name'
-    render(<ChangeColumn id={widgetId} />)
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const tool = widget?.registeredTools?.find(
-      (t) => t.id === CHANGE_COLUMN_TOOL_ID,
-    )
-    // Config has more columns; the reorder drops the loop's `if (col)` true
-    // path for matches and the trailing "append leftovers" loop for extras.
-    // With widget=['name'], the reordered result should be ['name'] followed
-    // by the remaining config columns in their original order.
-    const input = {
-      columns: [
-        { id: 'population', label: 'Population' },
-        { id: 'name', label: 'Name' },
-        { id: 'country', label: 'Country' },
-      ],
-    }
-    const result = tool?.fn(input) as { columns: TableColumn[] }
-    expect(result.columns.map((c) => c.id)).toEqual([
-      'name',
-      'population',
-      'country',
-    ])
-  })
-})

package/src/widgets/actions/change-column/sortable-column-item.test.tsx

@@ -1,124 +0,0 @@
-/**
- * Tests for SortableColumnItem — a DnD-kit sortable menu item.
- *
- * `useSortable` is mocked so we can drive isDragging / transform independently
- * and exercise the conditional style branches without spinning up a real
- * DndContext + SortableContext.
- */
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render } from '@testing-library/react'
-
-// Mock @dnd-kit/sortable's useSortable. Tests can override the return value
-// per-test via setSortableReturn.
-interface SortableReturn {
-  attributes: Record<string, unknown>
-  listeners: Record<string, unknown>
-  setNodeRef: (el: HTMLElement | null) => void
-  transform: { x: number; y: number; scaleX: number; scaleY: number } | null
-  transition: string | undefined
-  isDragging: boolean
-}
-
-let sortableReturn: SortableReturn = {
-  attributes: { 'aria-roledescription': 'sortable' },
-  listeners: {},
-  setNodeRef: () => undefined,
-  transform: null,
-  transition: undefined,
-  isDragging: false,
-}
-
-const setSortableReturn = (overrides: Partial<SortableReturn>) => {
-  sortableReturn = { ...sortableReturn, ...overrides }
-}
-
-vi.mock('@dnd-kit/sortable', () => ({
-  useSortable: () => sortableReturn,
-}))
-
-import { SortableColumnItem } from './sortable-column-item'
-import type { TableColumn } from '../../table/types'
-
-const baseColumn: TableColumn = {
-  id: 'col-1',
-  label: 'Name',
-}
-
-beforeEach(() => {
-  // Reset to defaults so each test starts clean.
-  sortableReturn = {
-    attributes: { 'aria-roledescription': 'sortable' },
-    listeners: {},
-    setNodeRef: () => undefined,
-    transform: null,
-    transition: undefined,
-    isDragging: false,
-  }
-})
-
-describe('SortableColumnItem', () => {
-  it('renders the column label', () => {
-    const { getByText } = render(<SortableColumnItem column={baseColumn} />)
-    expect(getByText('Name')).toBeDefined()
-  })
-
-  it('renders as a menuitem role', () => {
-    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
-    expect(getByRole('menuitem')).toBeDefined()
-  })
-
-  it('applies grab cursor + opacity=1 when not dragging', () => {
-    setSortableReturn({ isDragging: false })
-    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
-    const item = getByRole('menuitem')
-    expect(item.style.cursor).toBe('grab')
-    expect(item.style.opacity).toBe('1')
-  })
-
-  it('applies grabbing cursor + opacity=0.5 when dragging', () => {
-    setSortableReturn({ isDragging: true })
-    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
-    const item = getByRole('menuitem')
-    expect(item.style.cursor).toBe('grabbing')
-    expect(item.style.opacity).toBe('0.5')
-  })
-
-  it('forces transform.x to 0 when transform is non-null (vertical-only drag)', () => {
-    setSortableReturn({
-      transform: { x: 50, y: 20, scaleX: 1, scaleY: 1 },
-      transition: 'transform 200ms ease',
-    })
-    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
-    const item = getByRole('menuitem')
-    // CSS.Transform.toString({x: 0, y: 20, ...}) → 'translate3d(0px, 20px, 0)'
-    expect(item.style.transform).toContain('0px')
-    expect(item.style.transform).toContain('20px')
-  })
-
-  it('handles a null transform (no drag offset applied)', () => {
-    setSortableReturn({ transform: null })
-    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
-    const item = getByRole('menuitem')
-    // CSS.Transform.toString(null) is undefined → no transform attr
-    expect(item.style.transform).toBe('')
-  })
-
-  it('threads dnd-kit attributes onto the rendered element', () => {
-    setSortableReturn({
-      attributes: { 'aria-roledescription': 'draggable column' },
-    })
-    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
-    expect(getByRole('menuitem').getAttribute('aria-roledescription')).toBe(
-      'draggable column',
-    )
-  })
-
-  it('renders a column with a ReactNode label', () => {
-    const column: TableColumn = {
-      id: 'col-x',
-      label: <span data-testid='custom-label'>Custom</span>,
-    }
-    const { getByTestId } = render(<SortableColumnItem column={column} />)
-    expect(getByTestId('custom-label')).toBeDefined()
-  })
-})

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

@@ -1,118 +0,0 @@
-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))
-}
-
-/**
- * Pre-configured download item for exporting widget data as a CSV file.
- *
- * Converts a 2D array of data into CSV format with proper escaping and
- * triggers a browser download. Revokes the object URL after download.
- */
-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)
-}
-
-/**
- * Pre-configured download item for exporting a widget as a PNG image.
- *
- * Uses html2canvas to capture the widget DOM element referenced by a React ref.
- * Strips toolbar and action elements before capturing.
- *
- * @remarks
- * The modifier expects a React ref to the widget's root HTML element, not raw data.
- */
-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/fullscreen/styles.ts

@@ -1,17 +0,0 @@
-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/lock-selection/types.ts

@@ -1,43 +0,0 @@
-import type { IconButtonProps } from '@mui/material'
-import type { ReactNode } from 'react'
-import type { BaseWidgetState } from '../../stores/types'
-
-/**
- * Widget state extension for lock selection functionality.
- * Extends the base widget state with lock-specific properties.
- */
-export type LockSelectionState<T = object> = BaseWidgetState<
-  T & LockSelectionStateProps
->
-
-export interface LockSelectionProps {
-  /** Widget ID to store lock selection state */
-  id: string
-  /** Currently selected items (by name) */
-  selectedItems: string[]
-  /** Execution order in the tool pipeline. Lower values execute first. Defaults to 30. */
-  order?: number
-  /** Custom labels for the action */
-  labels?: {
-    /** Tooltip when unlocked (button will lock selection) */
-    lock?: string
-    /** Tooltip when locked (button will unlock selection) */
-    unlock?: string
-    /** Accessibility label */
-    ariaLabel?: string
-  }
-  /** Props passed to the IconButton component */
-  IconButtonProps?: IconButtonProps
-  /** Custom icon to display */
-  Icon?: ReactNode
-}
-
-/**
- * Lock selection specific state properties.
- */
-export interface LockSelectionStateProps {
-  /** Whether the selection is currently locked */
-  isLocked?: boolean
-  /** Items locked for filtering */
-  lockedItems?: string[]
-}

package/src/widgets/actions/relative-data/types.ts

@@ -1,33 +0,0 @@
-import type { IconButtonProps } from '@mui/material'
-import type { ReactNode } from 'react'
-import type { BaseWidgetState } from '../../../widgets/stores'
-
-export interface RelativeDataProps {
-  /** Widget ID to update data in the widget store */
-  id: string
-  /** Execution order in the tool pipeline. Lower values execute first. Defaults to 20. */
-  order?: number
-  /** Initial toggle state - when true, shows relative (percentage) values */
-  defaultIsRelative?: boolean
-  /** Custom labels for the action */
-  labels?: {
-    /** Tooltip when showing absolute values (button will switch to relative) */
-    relative?: string
-    /** Tooltip when showing relative values (button will switch to absolute) */
-    absolute?: string
-    /** Accessibility label */
-    ariaLabel?: string
-  }
-  /** Props passed to the IconButton component */
-  IconButtonProps?: IconButtonProps
-  /** Custom icon to display */
-  Icon?: ReactNode
-}
-
-export type RelativeDataState<T = unknown> = BaseWidgetState<
-  T & {
-    isRelative?: boolean
-    originalFormatter?: (value: number) => string
-    originalMax?: number
-  }
->