@carto/ps-react-ui 4.4.0-chat-ui.5 → 4.4.0-chat-ui.7

package/src/widgets/actions/brush-toggle/brush-toggle.tsx

@@ -0,0 +1,133 @@
+import { Box, IconButton } from '@mui/material'
+import { HighlightAltOutlined } from '@mui/icons-material'
+import { useCallback, useEffect, useRef } from 'react'
+import { widgetStoreActions } from '../../stores/widget-store'
+import type { BrushSelectedItems, BrushState, BrushToggleProps } from './types'
+import { styles } from './style'
+import { Tooltip } from '../../../components'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
+import { BrushOverlay } from './brush-overlay'
+
+/**
+ * Kept for backwards compatibility. The tool is no longer registered with the
+ * widget store — brush state is now owned directly by this component and the
+ * associated DOM overlay instead of being driven through the config pipeline.
+ * Existing code that looks this constant up in `registeredTools` will simply
+ * find no match.
+ */
+export const BRUSH_TOGGLE_TOOL_ID = 'brush-toggle'
+
+/**
+ * Widget action to toggle brush-style selection on bar and histogram widgets.
+ *
+ * Renders a toggle button and a portaled overlay rendered inside the chart's
+ * `<div>`. The overlay handles all pointer interactions, draws selection
+ * rectangles in DOM, and hit-tests against the widget data. All state lives
+ * in the widget store — rectangles survive config-pipeline re-renders
+ * (`setOption({ notMerge: true })`) automatically.
+ *
+ * Only intended for bar and histogram widgets (both use `xAxis.type === 'category'`).
+ *
+ * @example
+ * ```tsx
+ * <BrushToggle
+ *   id="my-widget"
+ *   onBrushSelected={(items) => console.log(items)}
+ * />
+ * ```
+ */
+export function BrushToggle({
+  id,
+  onBrushSelected,
+  multiBrush,
+  selections,
+  defaultEnabled = false,
+  labels,
+  Icon,
+  IconButtonProps,
+}: BrushToggleProps) {
+  // Single subscription for everything this component cares about.
+  const { brush, selection } = useWidgetSelector(id, (w) => {
+    const s = w as BrushState | undefined
+    return {
+      brush: s?.brush ?? defaultEnabled,
+      selection: s?.brushSelection,
+    }
+  })
+
+  // Seed the widget store with `defaultEnabled` on first mount. Guarded so
+  // remounts don't stomp whatever the user has toggled to.
+  useEffect(() => {
+    const current = widgetStoreActions.getWidget<BrushState>(id)?.brush
+    if (current === undefined) {
+      widgetStoreActions.setWidget(id, { brush: defaultEnabled })
+    }
+  }, [id, defaultEnabled])
+
+  const handleToggle = useCallback(() => {
+    if (brush) {
+      // Disabling: keep rectangles visible so the consumer's selection stays
+      // in sync. Re-enabling clears them below (fresh slate each activation).
+      widgetStoreActions.setWidget(id, { brush: false })
+    } else {
+      widgetStoreActions.setWidget(id, {
+        brush: true,
+        brushRects: [],
+        brushSelection: { dataIndex: [], seriesIndex: 0 },
+      })
+      // Mirror the clear to the consumer so its selection drops with the
+      // visual rectangles.
+      onBrushSelected?.({ dataIndex: [], seriesIndex: 0 })
+    }
+  }, [brush, id, onBrushSelected])
+
+  // Invoke the consumer's callback whenever the overlay writes a new
+  // selection to the store. `selection` is a new object reference on each
+  // pointerup so a simple reference check is enough.
+  const lastSelectionRef = useRef<BrushSelectedItems | undefined>(undefined)
+  useEffect(() => {
+    if (!selection) return
+    if (lastSelectionRef.current === selection) return
+    lastSelectionRef.current = selection
+    onBrushSelected?.(selection)
+  }, [selection, onBrushSelected])
+
+  // Consumer-driven clear: when `selections` transitions to 0 (e.g. the user
+  // presses the clear button in `WidgetSelectionSummary`), drop all drawn
+  // rectangles and any stored selection.
+  useEffect(() => {
+    if (selections !== 0) return
+    const state = widgetStoreActions.getWidget<BrushState>(id)
+    const hasRects = (state?.brushRects?.length ?? 0) > 0
+    const hasSelection = (state?.brushSelection?.dataIndex?.length ?? 0) > 0
+    if (!hasRects && !hasSelection) return
+    widgetStoreActions.setWidget(id, {
+      brushRects: [],
+      brushSelection: { dataIndex: [], seriesIndex: 0 },
+    })
+  }, [selections, id])
+
+  const enableLabel = labels?.enable ?? 'Enable brush selection'
+  const disableLabel = labels?.disable ?? 'Disable brush selection'
+  const tooltipLabel = brush ? disableLabel : enableLabel
+
+  return (
+    <>
+      <Box sx={styles.container}>
+        <Tooltip title={tooltipLabel}>
+          <IconButton
+            size='small'
+            aria-label={labels?.ariaLabel ?? tooltipLabel}
+            onClick={handleToggle}
+            sx={styles.trigger}
+            data-active={brush}
+            {...IconButtonProps}
+          >
+            {Icon ?? <HighlightAltOutlined />}
+          </IconButton>
+        </Tooltip>
+      </Box>
+      <BrushOverlay id={id} multiBrush={multiBrush} />
+    </>
+  )
+}

package/src/widgets/actions/brush-toggle/hit-test.test.ts

@@ -0,0 +1,65 @@
+import { describe, test, expect } from 'vitest'
+import { hitTestCategoryRange, hitTestRects } from './hit-test'
+
+describe('hitTestCategoryRange', () => {
+  test('returns empty when dataLength is zero', () => {
+    expect(hitTestCategoryRange(0, 5, 0)).toEqual([])
+  })
+
+  test('snaps fractional range outward so partial overlaps are included', () => {
+    // xStart=1.3, xEnd=3.7 → floor(1.3)=1, ceil(3.7)=4 → [1, 2, 3, 4]
+    expect(hitTestCategoryRange(1.3, 3.7, 10)).toEqual([1, 2, 3, 4])
+  })
+
+  test('handles integer endpoints inclusively', () => {
+    expect(hitTestCategoryRange(2, 4, 10)).toEqual([2, 3, 4])
+  })
+
+  test('clamps to [0, dataLength - 1]', () => {
+    expect(hitTestCategoryRange(-2.5, 12.8, 5)).toEqual([0, 1, 2, 3, 4])
+  })
+
+  test('normalizes reversed inputs (xEnd < xStart)', () => {
+    expect(hitTestCategoryRange(3.7, 1.3, 10)).toEqual([1, 2, 3, 4])
+  })
+
+  test('returns empty when range is entirely out of bounds', () => {
+    expect(hitTestCategoryRange(10, 12, 5)).toEqual([])
+    expect(hitTestCategoryRange(-5, -1, 5)).toEqual([])
+  })
+
+  test('returns adjacent indices for a very narrow fractional range when snapping outward', () => {
+    // xStart=2.1, xEnd=2.3 partially overlaps both categories, so floor=2 and ceil=3 → [2, 3]
+    expect(hitTestCategoryRange(2.1, 2.3, 10)).toEqual([2, 3])
+  })
+})
+
+describe('hitTestRects', () => {
+  test('returns empty for no rects', () => {
+    expect(hitTestRects([], 10)).toEqual([])
+  })
+
+  test('unions and dedups across overlapping rects', () => {
+    const rects = [
+      { xStart: 1, xEnd: 3 },
+      { xStart: 2, xEnd: 4 },
+    ]
+    expect(hitTestRects(rects, 10)).toEqual([1, 2, 3, 4])
+  })
+
+  test('returns sorted ascending indices for disjoint rects', () => {
+    const rects = [
+      { xStart: 7, xEnd: 8 },
+      { xStart: 1, xEnd: 2 },
+    ]
+    expect(hitTestRects(rects, 10)).toEqual([1, 2, 7, 8])
+  })
+
+  test('drops rects entirely out of bounds', () => {
+    const rects = [
+      { xStart: 20, xEnd: 25 },
+      { xStart: 1, xEnd: 2 },
+    ]
+    expect(hitTestRects(rects, 10)).toEqual([1, 2])
+  })
+})

package/src/widgets/actions/brush-toggle/hit-test.ts

@@ -0,0 +1,45 @@
+import type { BrushRect } from './types'
+
+/**
+ * Returns integer dataIndices covered by a brush rectangle on a category axis.
+ *
+ * `xStart` / `xEnd` come from `instance.convertFromPixel({ xAxisIndex: 0 }, …)`
+ * which, for a category axis, returns fractional positions around integer
+ * category indices (e.g. `1.3` lands between categories 1 and 2). We snap the
+ * range outward (`floor` / `ceil`) so a drag that visually covers any part of
+ * a category's bar includes that index.
+ *
+ * Results are clamped to `[0, dataLength - 1]` and returned in ascending order.
+ */
+export function hitTestCategoryRange(
+  xStart: number,
+  xEnd: number,
+  dataLength: number,
+): number[] {
+  if (dataLength <= 0) return []
+  const [lo, hi] = xStart <= xEnd ? [xStart, xEnd] : [xEnd, xStart]
+
+  const start = Math.max(0, Math.floor(lo))
+  const end = Math.min(dataLength - 1, Math.ceil(hi))
+  if (start > end) return []
+
+  const indices: number[] = []
+  for (let i = start; i <= end; i += 1) indices.push(i)
+  return indices
+}
+
+/**
+ * Union of `hitTestCategoryRange` across multiple rectangles. Used for
+ * multi-brush selections where each drawn rectangle contributes to the
+ * combined selection.
+ */
+export function hitTestRects(rects: BrushRect[], dataLength: number): number[] {
+  if (rects.length === 0) return []
+  const seen = new Set<number>()
+  for (const rect of rects) {
+    for (const i of hitTestCategoryRange(rect.xStart, rect.xEnd, dataLength)) {
+      seen.add(i)
+    }
+  }
+  return Array.from(seen).sort((a, b) => a - b)
+}

package/src/widgets/actions/brush-toggle/style.ts

@@ -0,0 +1,46 @@
+import type { SxProps, Theme } from '@mui/material'
+import type { CSSProperties } from 'react'
+
+export const styles = {
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: ({ spacing }) => spacing(0.25),
+  },
+  trigger: {
+    '&[data-active="true"]': {
+      background: (theme: Theme) => theme.palette.primary.relatedLight,
+    },
+  },
+} satisfies Record<string, SxProps<Theme>>
+
+/**
+ * Plain CSS objects for the brush overlay — we're outside MUI's sx pipeline
+ * here because the rectangles are rendered via a React portal into the chart
+ * div (not part of the MUI tree). Colors borrow from the base palette; if
+ * theme-aware styling is needed later, move to styled components.
+ */
+export const overlayStyles: Record<string, CSSProperties> = {
+  // `top` and `height` are filled in at render time from the chart's plot
+  // rect so rectangles don't bleed over the legend / axis labels.
+  //
+  // Colors track ECharts 6's `backgroundTint` token (used by the default
+  // brush) — a barely-visible pale blue-gray translucent fill that washes
+  // bars underneath rather than masking them. Border is a hairline dark
+  // alpha so the selection edges are just findable, not prominent.
+  rect: {
+    position: 'absolute',
+    background: 'rgba(234, 237, 245, 0.2)',
+    border: '1px dashed rgba(0, 0, 0, 0.15)',
+    pointerEvents: 'none',
+  },
+  // Live drag preview — identical to committed rect (no "in-progress" vs
+  // "committed" visual distinction; the preview just disappears on
+  // `pointerup` as the rect takes its place).
+  rectPreview: {
+    position: 'absolute',
+    background: 'rgba(234, 237, 245, 0.6)',
+    border: '1px dashed rgba(0, 0, 0, 0.15)',
+    pointerEvents: 'none',
+  },
+}

package/src/widgets/actions/brush-toggle/types.ts

@@ -0,0 +1,78 @@
+import type { IconButtonProps } from '@mui/material'
+import type { ReactNode } from 'react'
+import type { BaseWidgetState } from '../../stores/types'
+
+/**
+ * Brush selection result emitted by BrushToggle.
+ * Contains raw indices so consumers can resolve data according to their widget type.
+ */
+export interface BrushSelectedItems {
+  /** Data indices of the selected items in the dataset */
+  dataIndex: number[]
+  /** Series index from the brush event (defaults to 0) */
+  seriesIndex: number
+}
+
+/**
+ * A selection rectangle in x-axis data coords. Stored in the widget store so
+ * it survives config-pipeline re-renders (which call `setOption` with
+ * `notMerge: true` and wipe any ECharts-side state). The overlay re-projects
+ * these to pixel positions on every chart render / resize.
+ *
+ * Both bar and histogram widgets use `xAxis.type === 'category'`, so the
+ * coords are category indices (possibly fractional — `convertFromPixel`
+ * returns floats like `1.3` between categories 1 and 2).
+ */
+export interface BrushRect {
+  xStart: number
+  xEnd: number
+}
+
+/**
+ * State stored in widget store for brush functionality.
+ */
+export interface BrushConfig {
+  /** Whether brush mode is enabled. */
+  brush?: boolean
+  /** Persisted selection rectangles in data-axis coords. */
+  brushRects?: BrushRect[]
+  /** Last selection emitted to the `onBrushSelected` callback. */
+  brushSelection?: BrushSelectedItems
+}
+
+export type BrushState<T = unknown> = BaseWidgetState<T & BrushConfig>
+
+export interface BrushToggleProps {
+  /** Widget ID to update brush state in the widget store */
+  id: string
+  /** Callback fired when items are selected via brush */
+  onBrushSelected?: (items: BrushSelectedItems) => void
+  /** When true, allows multiple brush selection areas. Brush stays active after each selection. */
+  multiBrush?: boolean
+  /**
+   * Initial brush-enabled state. Only applied on first mount if the widget
+   * store has no `brush` value yet — subsequent remounts preserve whatever
+   * state the user has toggled to.
+   */
+  defaultEnabled?: boolean
+  /**
+   * Current selection count from the consumer (e.g. `selectedItems.length`).
+   * When this transitions to `0` (typically when the user presses the clear
+   * button in `WidgetSelectionSummary`), BrushToggle clears its persisted
+   * brush rectangles and the on-chart selection.
+   */
+  selections?: number
+  /** Custom labels for the action */
+  labels?: {
+    /** Tooltip when brush is disabled (button will enable brush) */
+    enable?: string
+    /** Tooltip when brush is enabled (button will disable brush) */
+    disable?: string
+    /** Accessibility label */
+    ariaLabel?: string
+  }
+  /** Props passed to the IconButton component */
+  IconButtonProps?: IconButtonProps
+  /** Custom icon to display for brush toggle */
+  Icon?: ReactNode
+}

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

@@ -0,0 +1,193 @@
+/**
+ * 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/change-column.test.tsx

@@ -217,7 +217,7 @@ describe('ChangeColumn', () => {
 
       // When config columns match widget columns, fn returns the same reference
       const input = { columns: mockColumns }
-      const result = tool?.fn(input, tool.config)
+      const result = tool?.fn(input)
       expect(result).toBe(input)
     })
 

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

@@ -21,14 +21,14 @@ import {
   useState,
   type MouseEvent,
 } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
 import type { ChangeColumnProps } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import type { TableColumn, TableWidgetState } from '../../table/types'
 import { ChangeColumnIcon } from './change-column-icon'
 import { SortableColumnItem } from './sortable-column-item'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 export const CHANGE_COLUMN_TOOL_ID = 'change-column'
 
@@ -57,12 +57,9 @@ export function ChangeColumn({
   MenuProps,
 }: ChangeColumnProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const columns = useWidgetStore(
-    useShallow((state) => state.getWidget<TableWidgetState>(id)?.columns),
-  )
+  const { columns } = useWidgetSelector(id, (w) => ({
+    columns: (w as TableWidgetState | undefined)?.columns,
+  }))
 
   /**
    * Config tool function that reorders columns to match the current widget state.
@@ -72,9 +69,7 @@ export function ChangeColumn({
    */
   const reorderFn = useCallback(
     (currentConfig: unknown): unknown => {
-      const widgetState = useWidgetStore
-        .getState()
-        .getWidget<TableWidgetState>(id)
+      const widgetState = widgetStoreActions.getWidget<TableWidgetState>(id)
       const currentColumns = widgetState?.columns
       if (!currentColumns || currentColumns.length === 0) return currentConfig
 
@@ -130,15 +125,15 @@ export function ChangeColumn({
 
   // Register config tool on mount
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: CHANGE_COLUMN_TOOL_ID,
       type: 'config',
       order: 100,
       enabled: true,
       fn: reorderFn,
     })
-    return () => unregisterTool(id, CHANGE_COLUMN_TOOL_ID)
-  }, [id, registerTool, unregisterTool, reorderFn])
+    return () => widgetStoreActions.unregisterTool(id, CHANGE_COLUMN_TOOL_ID)
+  }, [id, reorderFn])
 
   const handleToggle = useCallback((event: MouseEvent<HTMLElement>) => {
     event.stopPropagation()
@@ -156,7 +151,7 @@ export function ChangeColumn({
     const newIndex = columns.findIndex((col) => col.id === over.id)
     if (oldIndex !== -1 && newIndex !== -1) {
       const newColumns = arrayMove(columns, oldIndex, newIndex)
-      setWidget(id, { columns: newColumns })
+      widgetStoreActions.setWidget(id, { columns: newColumns })
     }
   }
 
@@ -201,6 +196,11 @@ export function ChangeColumn({
           onClose={handleClose}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
           transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+          slotProps={{
+            paper: {
+              sx: { overflow: 'hidden' },
+            },
+          }}
           {...MenuProps}
         >
           <SortableContext