@carto/ps-react-ui 5.0.0 → 6.0.0

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

@@ -1,290 +1,59 @@
-import { describe, test, expect, beforeEach, vi } from 'vitest'
-import { render, screen, fireEvent, cleanup } from '@testing-library/react'
-import { ChangeColumn, CHANGE_COLUMN_TOOL_ID } from './change-column'
-import { useWidgetStore } from '../../stores/widget-store'
-import type { TableColumn } from '../../table/types'
-
-// Mock @dnd-kit with minimal implementation for testing
-vi.mock('@dnd-kit/core', async () => {
-  const actual = await vi.importActual('@dnd-kit/core')
-  return {
-    ...actual,
-    useSensor: () => ({}),
-    useSensors: () => [],
-  }
-})
-
-describe('ChangeColumn', () => {
-  const widgetId = 'test-change-column-widget'
-
-  const mockColumns: TableColumn[] = [
-    { id: 'name', label: 'Name' },
-    { id: 'country', label: 'Country' },
-    { id: 'population', label: 'Population' },
-  ]
-
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
-  })
-
-  test('returns null when widget has no columns', () => {
-    const { container } = render(<ChangeColumn id={widgetId} />)
-    expect(container.firstChild).toBeNull()
-  })
-
-  test('returns null when widget has fewer than 2 columns', () => {
-    useWidgetStore.getState().setWidget(widgetId, {
-      columns: [{ id: 'name', label: 'Name' }],
-    })
-
-    const { container } = render(<ChangeColumn id={widgetId} />)
-    expect(container.firstChild).toBeNull()
-  })
-
-  test('renders change column button when widget has 2 or more columns', () => {
-    useWidgetStore.getState().setWidget(widgetId, {
-      columns: mockColumns,
-    })
-
-    render(<ChangeColumn id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    expect(button).toBeTruthy()
-  })
-
-  test('shows default tooltip label', () => {
-    useWidgetStore.getState().setWidget(widgetId, {
-      columns: mockColumns,
-    })
-
-    render(<ChangeColumn id={widgetId} />)
-
-    const button = screen.getByRole('button', { name: 'Change column' })
-    expect(button).toBeTruthy()
-  })
-
-  test('opens menu on button click', () => {
-    useWidgetStore.getState().setWidget(widgetId, {
-      columns: mockColumns,
-    })
-
-    render(<ChangeColumn id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    // Menu should be open with all columns for reordering
-    expect(screen.getByRole('menu')).toBeTruthy()
-    expect(screen.getByRole('menuitem', { name: /Name/i })).toBeTruthy()
-    expect(screen.getByRole('menuitem', { name: /Country/i })).toBeTruthy()
-    expect(screen.getByRole('menuitem', { name: /Population/i })).toBeTruthy()
-  })
-
-  test('displays all columns in menu for drag-and-drop reordering', () => {
-    useWidgetStore.getState().setWidget(widgetId, {
-      columns: mockColumns,
-    })
-
-    render(<ChangeColumn id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    // All three columns should be visible
-    const menuItems = screen.getAllByRole('menuitem')
-    expect(menuItems).toHaveLength(3)
-  })
-
-  test('uses custom labels when provided', () => {
-    useWidgetStore.getState().setWidget(widgetId, {
-      columns: mockColumns,
-    })
-
-    const customLabels = {
-      tooltip: 'Reorder columns',
-      ariaLabel: 'Reorder table columns',
-    }
-
-    render(<ChangeColumn id={widgetId} labels={customLabels} />)
-
-    const button = screen.getByRole('button', { name: 'Reorder table columns' })
-    expect(button).toBeTruthy()
-  })
-
-  test('works with exactly 2 columns', () => {
-    const twoColumns: TableColumn[] = [
-      { id: 'first', label: 'First' },
-      { id: 'second', label: 'Second' },
-    ]
-
-    useWidgetStore.getState().setWidget(widgetId, {
-      columns: twoColumns,
-    })
-
-    render(<ChangeColumn id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    // Both columns should be available for reordering
-    expect(screen.getByRole('menuitem', { name: /First/i })).toBeTruthy()
-    expect(screen.getByRole('menuitem', { name: /Second/i })).toBeTruthy()
-  })
-
-  test('sets data-active attribute when menu is open', () => {
-    useWidgetStore.getState().setWidget(widgetId, {
-      columns: mockColumns,
-    })
-
-    render(<ChangeColumn id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    expect(button.getAttribute('data-active')).toBe('false')
-
-    fireEvent.click(button)
-    expect(button.getAttribute('data-active')).toBe('true')
-  })
-
-  test('menu items are keyboard focusable', () => {
-    useWidgetStore.getState().setWidget(widgetId, {
-      columns: mockColumns,
-    })
-
-    render(<ChangeColumn id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    const menuItems = screen.getAllByRole('menuitem')
-    menuItems.forEach((item) => {
-      expect(item.getAttribute('tabindex')).toBe('0')
-    })
-  })
-
-  describe('config tool registration', () => {
-    test('registers config tool on mount', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        columns: mockColumns,
-      })
-
-      render(<ChangeColumn id={widgetId} />)
-
-      const widget = useWidgetStore.getState().getWidget(widgetId)
-      const tool = widget?.registeredTools?.find(
-        (t) => t.id === CHANGE_COLUMN_TOOL_ID,
-      )
-
-      expect(tool).toBeDefined()
-      expect(tool?.type).toBe('config')
-      expect(tool?.order).toBe(100)
-      expect(tool?.enabled).toBe(true)
-    })
-
-    test('unregisters config tool on unmount', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        columns: mockColumns,
-      })
-
-      render(<ChangeColumn id={widgetId} />)
-
-      // Verify tool is registered
-      let widget = useWidgetStore.getState().getWidget(widgetId)
-      expect(
-        widget?.registeredTools?.find((t) => t.id === CHANGE_COLUMN_TOOL_ID),
-      ).toBeDefined()
-
-      // Unmount
-      cleanup()
-
-      // Verify tool is unregistered
-      widget = useWidgetStore.getState().getWidget(widgetId)
-      expect(
-        widget?.registeredTools?.find((t) => t.id === CHANGE_COLUMN_TOOL_ID),
-      ).toBeUndefined()
-    })
-
-    test('config tool returns currentConfig unchanged when columns match widget state', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        columns: mockColumns,
-      })
-
-      render(<ChangeColumn id={widgetId} />)
-
-      const widget = useWidgetStore.getState().getWidget(widgetId)
-      const tool = widget?.registeredTools?.find(
-        (t) => t.id === CHANGE_COLUMN_TOOL_ID,
-      )
-
-      // When config columns match widget columns, fn returns the same reference
-      const input = { columns: mockColumns }
-      const result = tool?.fn(input)
-      expect(result).toBe(input)
-    })
-
-    test('column order persists when config pipeline re-runs with original config', async () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        columns: mockColumns,
-      })
-
-      render(<ChangeColumn id={widgetId} />)
-
-      // Simulate a drag that reorders columns via setWidget
-      const reorderedColumns: TableColumn[] = [
-        { id: 'population', label: 'Population' },
-        { id: 'name', label: 'Name' },
-        { id: 'country', label: 'Country' },
-      ]
-      useWidgetStore.getState().setWidget(widgetId, {
-        columns: reorderedColumns,
-      })
-
-      // Simulate config pipeline re-running with original column order
-      const originalConfig = { columns: mockColumns }
-      await useWidgetStore
-        .getState()
-        .executeConfigPipeline(widgetId, originalConfig)
-
-      // Verify the columns are in the reordered order
-      const widget = useWidgetStore.getState().getWidget(widgetId)
-      const resultColumns = (widget as unknown as Record<string, unknown>)
-        ?.columns as TableColumn[] | undefined
-      expect(resultColumns?.map((c) => c.id)).toEqual([
-        'population',
-        'name',
-        'country',
-      ])
-    })
-
-    test('new columns appended at the end when not in widget order', async () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        columns: mockColumns,
-      })
-
-      render(<ChangeColumn id={widgetId} />)
-
-      // Simulate widget columns having only a partial order (e.g., user dragged 2 of 3)
-      const partialOrder: TableColumn[] = [
-        { id: 'country', label: 'Country' },
-        { id: 'name', label: 'Name' },
-      ]
-      useWidgetStore.getState().setWidget(widgetId, {
-        columns: partialOrder,
-      })
-
-      // Config pipeline runs with all columns (includes 'population' not in widget order)
-      const originalConfig = { columns: mockColumns }
-      await useWidgetStore
-        .getState()
-        .executeConfigPipeline(widgetId, originalConfig)
-
-      const widget = useWidgetStore.getState().getWidget(widgetId)
-      const resultColumns = (widget as unknown as Record<string, unknown>)
-        ?.columns as TableColumn[] | undefined
-      expect(resultColumns?.map((c) => c.id)).toEqual([
-        'country',
-        'name',
-        'population',
-      ])
-    })
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Provider } from '../../provider/widget-provider'
+import { clearAllWidgetStores, getWidgetStore } from '../../stores'
+import { ChangeColumn } from './change-column'
+import type { ChangeColumnWidgetState } from './types'
+
+beforeEach(() => clearAllWidgetStores())
+afterEach(() => clearAllWidgetStores())
+
+const ITEMS = [
+  { id: 'a', label: 'Alpha' },
+  { id: 'b', label: 'Beta' },
+  { id: 'c', label: 'Gamma' },
+]
+
+describe('<ChangeColumn>', () => {
+  it('renders nothing when fewer than two columns are provided', () => {
+    const { container } = render(
+      <Provider id='cc1' data={[]}>
+        <ChangeColumn columns={[ITEMS[0]!]} />
+      </Provider>,
+    )
+    expect(container.querySelector('button')).toBeNull()
+  })
+
+  it('renders the trigger and opens the menu listing every column in order', () => {
+    render(
+      <Provider id='cc2' data={[]}>
+        <ChangeColumn columns={ITEMS} labels={{ trigger: 'Reorder' }} />
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('Reorder'))
+    const items = screen.getAllByRole('menuitem')
+    expect(items.map((el) => el.textContent)).toEqual([
+      'Alpha',
+      'Beta',
+      'Gamma',
+    ])
+  })
+
+  it('uses columnOrder from the store when present', () => {
+    render(
+      <Provider id='cc3' data={[]}>
+        <ChangeColumn columns={ITEMS} labels={{ trigger: 'Reorder' }} />
+      </Provider>,
+    )
+    getWidgetStore('cc3').setState({
+      columnOrder: ['c', 'a', 'b'],
+    } as Partial<ChangeColumnWidgetState>)
+    fireEvent.click(screen.getByLabelText('Reorder'))
+    const items = screen.getAllByRole('menuitem')
+    expect(items.map((el) => el.textContent)).toEqual([
+      'Gamma',
+      'Alpha',
+      'Beta',
+    ])
   })
 })

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

@@ -1,115 +1,106 @@
+import { useCallback, useMemo, useState, type ComponentType } from 'react'
 import {
   DndContext,
-  closestCenter,
   KeyboardSensor,
   PointerSensor,
+  closestCenter,
   useSensor,
   useSensors,
   type DragEndEvent,
 } from '@dnd-kit/core'
 import {
-  arrayMove,
   SortableContext,
+  arrayMove,
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
-import { IconButton, Menu, SvgIcon } from '@mui/material'
 import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type MouseEvent,
-} from 'react'
-import { widgetStoreActions } from '../../stores/widget-store'
-import type { ChangeColumnProps } from './types'
-import { actionButtonStyles } from '../shared/styles'
+  IconButton,
+  ListSubheader,
+  Menu,
+  type SvgIconProps,
+} from '@mui/material'
 import { Tooltip } from '../../../components'
-import type { TableColumn, TableWidgetState } from '../../table/types'
+import { getWidgetStore, useWidget, useWidgetId } from '../../stores'
 import { ChangeColumnIcon } from './change-column-icon'
+import { DEFAULT_CHANGE_COLUMN_LABELS, type ChangeColumnLabels } from './labels'
 import { SortableColumnItem } from './sortable-column-item'
-import { useWidgetSelector } from '../../stores/use-widget-selector'
+import { styles } from './style'
+import type { ChangeColumnWidgetState } from './types'
+import type { ReactNode } from 'react'
+
+export interface ChangeColumnItem {
+  id: string
+  label: ReactNode
+}
 
-export const CHANGE_COLUMN_TOOL_ID = 'change-column'
+export interface ChangeColumnProps {
+  /**
+   * Master list of columns (id + label) in their default order. The current
+   * effective order is derived by combining this list with the widget's
+   * `columnOrder` extension state.
+   */
+  columns: readonly ChangeColumnItem[]
+  labels?: Partial<ChangeColumnLabels>
+  icon?: ComponentType<SvgIconProps>
+  iconProps?: SvgIconProps
+  dragHandleIcon?: ComponentType<SvgIconProps>
+}
 
 /**
- * Widget action to reorder columns in a table widget via drag-and-drop.
- *
- * This action reads the columns from the widget store and allows users to
- * drag and drop columns to reorder them. All columns are displayed and
- * can be reordered.
+ * Action that lets users reorder columns via drag-and-drop. The new order is
+ * persisted on the widget store as `columnOrder` (an array of ids) on the
+ * {@link ChangeColumnWidgetState} extension. `<Table>` (and other column-aware
+ * bridges) merge that order with their own `columns` prop via
+ * `resolveColumns()` from the table primitives.
  *
- * Registers as a config pipeline tool so that column order is automatically
- * re-applied when the base config is updated (e.g., by WidgetLoader).
- *
- * Returns null if there are fewer than 2 columns.
- *
- * @example
- * ```tsx
- * <ChangeColumn id="my-table-widget" />
- * ```
+ * Returns `null` when there are fewer than two columns to reorder.
  */
 export function ChangeColumn({
-  id,
+  columns,
   labels,
-  Icon,
-  IconButtonProps,
-  MenuProps,
+  icon: Icon = ChangeColumnIcon,
+  iconProps,
+  dragHandleIcon,
 }: ChangeColumnProps) {
+  const id = useWidgetId()
+  const _labels = { ...DEFAULT_CHANGE_COLUMN_LABELS, ...labels }
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const { columns } = useWidgetSelector(id, (w) => ({
-    columns: (w as TableWidgetState | undefined)?.columns,
-  }))
-
-  /**
-   * Config tool function that reorders columns to match the current widget state.
-   * Reads desired order from the widget store (set by handleDragEnd via setWidget).
-   * Preserves referential identity when the order already matches to prevent
-   * re-render loops in the config pipeline.
-   */
-  const reorderFn = useCallback(
-    (currentConfig: unknown): unknown => {
-      const widgetState = widgetStoreActions.getWidget<TableWidgetState>(id)
-      const currentColumns = widgetState?.columns
-      if (!currentColumns || currentColumns.length === 0) return currentConfig
-
-      const config = currentConfig as Record<string, unknown>
-      const configColumns = config.columns as TableColumn[] | undefined
-      if (!configColumns || configColumns.length === 0) return currentConfig
-
-      // Check if config columns are already in the same order as widget columns
-      const alreadyMatches =
-        configColumns.length === currentColumns.length &&
-        configColumns.every((col, i) => col.id === currentColumns[i]?.id)
-      if (alreadyMatches) return currentConfig
-
-      // Reorder config columns to match widget column order
-      const columnMap = new Map(configColumns.map((col) => [col.id, col]))
-      const reordered: TableColumn[] = []
-
-      for (const widgetCol of currentColumns) {
-        const col = columnMap.get(widgetCol.id)
-        if (col) {
-          reordered.push(col)
-          columnMap.delete(widgetCol.id)
-        }
-      }
 
-      // Append any new columns not in the widget order
-      for (const col of columnMap.values()) {
-        reordered.push(col)
+  const columnOrder = useWidget<
+    readonly string[] | undefined,
+    ChangeColumnWidgetState
+  >(id, (s) => s.columnOrder)
+
+  const orderedIds = useMemo(() => {
+    const masterIds = columns.map((c) => c.id)
+    if (!columnOrder || columnOrder.length === 0) return masterIds
+    // Set lookup so membership tests stay O(1) regardless of column count.
+    const masterIdSet = new Set(masterIds)
+    const seen = new Set<string>()
+    const out: string[] = []
+    for (const cid of columnOrder) {
+      if (masterIdSet.has(cid) && !seen.has(cid)) {
+        out.push(cid)
+        seen.add(cid)
       }
-
-      // If result matches current widget columns, reuse the same array reference
-      // to prevent downstream subscribers from detecting a change
-      const matchesWidget =
-        reordered.length === currentColumns.length &&
-        reordered.every((col, i) => col.id === currentColumns[i]?.id)
-
-      return { ...config, columns: matchesWidget ? currentColumns : reordered }
-    },
-    [id],
-  )
+    }
+    for (const cid of masterIds) {
+      if (!seen.has(cid)) out.push(cid)
+    }
+    return out
+  }, [columnOrder, columns])
+
+  const orderedColumns = useMemo(() => {
+    const byId = new Map(columns.map((c) => [c.id, c]))
+    // Single pass instead of map().filter() — skips unknown ids inline.
+    const out: ChangeColumnItem[] = []
+    for (const cid of orderedIds) {
+      const c = byId.get(cid)
+      if (c != null) out.push(c)
+    }
+    return out
+  }, [orderedIds, columns])
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -118,76 +109,53 @@ export function ChangeColumn({
     }),
   )
 
-  const columnIds = useMemo(
-    () => columns?.map((col) => col.id) ?? [],
-    [columns],
-  )
-
-  // Register config tool on mount
-  useEffect(() => {
-    widgetStoreActions.registerTool(id, {
-      id: CHANGE_COLUMN_TOOL_ID,
-      type: 'config',
-      order: 100,
-      enabled: true,
-      fn: reorderFn,
-    })
-    return () => widgetStoreActions.unregisterTool(id, CHANGE_COLUMN_TOOL_ID)
-  }, [id, reorderFn])
-
-  const handleToggle = useCallback((event: MouseEvent<HTMLElement>) => {
-    event.stopPropagation()
-    setAnchorEl(event.currentTarget)
-  }, [])
-
-  const handleClose = useCallback(() => {
-    setAnchorEl(null)
+  const handleOpen = useCallback((e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation()
+    setAnchorEl(e.currentTarget)
   }, [])
+  const handleClose = useCallback(() => setAnchorEl(null), [])
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+      if (!over || active.id === over.id) return
+      const oldIndex = orderedIds.indexOf(String(active.id))
+      const newIndex = orderedIds.indexOf(String(over.id))
+      if (oldIndex === -1 || newIndex === -1) return
+      const next = arrayMove([...orderedIds], oldIndex, newIndex)
+      getWidgetStore(id).setState({
+        columnOrder: next,
+      } as Partial<ChangeColumnWidgetState>)
+    },
+    [id, orderedIds],
+  )
 
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event
-    if (!over || active.id === over.id || !columns) return
-    const oldIndex = columns.findIndex((col) => col.id === active.id)
-    const newIndex = columns.findIndex((col) => col.id === over.id)
-    if (oldIndex !== -1 && newIndex !== -1) {
-      const newColumns = arrayMove(columns, oldIndex, newIndex)
-      widgetStoreActions.setWidget(id, { columns: newColumns })
-    }
-  }
-
-  // Return null if there are fewer than 2 columns
-  if (!columns || columns.length < 2) {
-    return null
-  }
+  if (columns.length < 2) return null
 
-  const tooltipLabel = labels?.tooltip ?? 'Change column'
   const isOpen = Boolean(anchorEl)
 
   return (
     <>
-      <Tooltip title={tooltipLabel}>
+      <Tooltip title={_labels.trigger}>
         <IconButton
           size='small'
-          aria-label={labels?.ariaLabel ?? tooltipLabel}
-          aria-controls={isOpen ? 'change-column-menu' : undefined}
+          aria-label={_labels.trigger}
+          aria-pressed={isOpen}
           aria-haspopup='true'
+          aria-controls={isOpen ? 'change-column-menu' : undefined}
           aria-expanded={isOpen ? 'true' : undefined}
-          onClick={handleToggle}
-          data-active={isOpen}
-          sx={actionButtonStyles.trigger}
-          {...IconButtonProps}
+          onClick={handleOpen}
+          className={isOpen ? 'active' : undefined}
+          sx={{ ...styles.toggle, ...(isOpen && styles.toggleActive) }}
         >
-          {Icon ?? (
-            <SvgIcon>
-              <ChangeColumnIcon />
-            </SvgIcon>
-          )}
+          <Icon fontSize='small' {...iconProps} />
         </IconButton>
       </Tooltip>
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
         onDragEnd={handleDragEnd}
+        autoScroll={false}
       >
         <Menu
           id='change-column-menu'
@@ -196,19 +164,22 @@ export function ChangeColumn({
           onClose={handleClose}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
           transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-          slotProps={{
-            paper: {
-              sx: { overflow: 'hidden' },
-            },
-          }}
-          {...MenuProps}
+          slotProps={{ paper: { sx: styles.menuPaper } }}
         >
+          <ListSubheader disableSticky role='presentation' sx={styles.header}>
+            {_labels.title}
+          </ListSubheader>
           <SortableContext
-            items={columnIds}
+            items={orderedIds}
             strategy={verticalListSortingStrategy}
           >
-            {columns.map((column) => (
-              <SortableColumnItem key={column.id} column={column} />
+            {orderedColumns.map((column) => (
+              <SortableColumnItem
+                key={column.id}
+                id={column.id}
+                label={column.label}
+                dragHandleIcon={dragHandleIcon}
+              />
             ))}
           </SortableContext>
         </Menu>