@carto/ps-react-ui 4.4.3 → 4.5.0

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

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

@@ -22,7 +22,9 @@ export function SortableColumnItem({ column }: SortableColumnItemProps) {
   } = useSortable({ id: column.id })
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: CSS.Transform.toString(
+      transform ? { ...transform, x: 0 } : null,
+    ),
     transition,
     opacity: isDragging ? 0.5 : 1,
     cursor: isDragging ? 'grabbing' : 'grab',

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

@@ -9,8 +9,7 @@ import {
 import type { DownloadItem, DownloadProps } from './types'
 import { FileDownloadOutlined } from '@mui/icons-material'
 import { useState, type MouseEvent } from 'react'
-import { useWidgetStore } from '../../../widgets'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 const EMPTY_LABELS: NonNullable<DownloadProps['labels']> = {}
 
@@ -32,7 +31,9 @@ export function Download({
   Icon,
   IconButtonProps,
 }: DownloadProps) {
-  const data = useWidgetStore(useShallow((state) => state.getWidget(id)?.data))
+  const { data } = useWidgetSelector(id, (w) => ({
+    data: w?.data,
+  }))
 
   const [isDownloading, setIsDownloading] = useState(false)
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

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

@@ -5,7 +5,8 @@ import {
   IconButton,
   Typography,
 } from '@mui/material'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import { Close, FullscreenOutlined } from '@mui/icons-material'
 import type {
   FullScreenConfig,
@@ -13,7 +14,6 @@ import type {
   FullScreenState,
 } from './types'
 import { styles } from './styles'
-import { useShallow } from 'zustand/shallow'
 
 const EMPTY_DIALOG_CONTENT_PROPS: NonNullable<
   FullScreenProps['DialogContentProps']
@@ -44,16 +44,12 @@ export function FullScreen({
   } = EMPTY_DIALOG_CONTENT_PROPS,
   DialogProps,
 }: FullScreenProps) {
-  const isFullScreen = useWidgetStore(
-    useShallow((state) => state.getWidget<FullScreenState>(id)?.isFullScreen),
-  )
-  const title = useWidgetStore(
-    useShallow((state) => state.getWidget<FullScreenState>(id)?.title),
-  )
-  const setWidget = useWidgetStore((state) => state.setWidget)
-
+  const { isFullScreen, title } = useWidgetSelector(id, (w) => ({
+    isFullScreen: (w as FullScreenState | undefined)?.isFullScreen,
+    title: (w as FullScreenState | undefined)?.title,
+  }))
   const updateFullScreenConfig = (updates: Partial<FullScreenConfig>) => {
-    setWidget<FullScreenState>(id, {
+    widgetStoreActions.setWidget<FullScreenState>(id, {
       isFullScreen: updates.isFullScreen,
     })
   }

package/src/widgets/actions/lock-selection/lock-selection.tsx

@@ -4,8 +4,8 @@ import { useCallback, useEffect, useMemo } from 'react'
 import type { LockSelectionProps, LockSelectionState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
-import { useWidgetStore } from '../../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import type { EchartWidgetData } from '../../echart/types'
 
 export const LOCK_SELECTION_TOOL_ID = 'lock-selection'
@@ -34,12 +34,9 @@ export function LockSelection({
   Icon,
   IconButtonProps,
 }: LockSelectionProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const storeIsLocked = useWidgetStore(
-    useShallow((state) => state.getWidget<LockSelectionState>(id)?.isLocked),
-  )
+  const { storeIsLocked } = useWidgetSelector(id, (w) => ({
+    storeIsLocked: (w as LockSelectionState | undefined)?.isLocked,
+  }))
 
   const isLocked = storeIsLocked ?? false
   const lockedItems = useMemo(
@@ -47,9 +44,9 @@ export function LockSelection({
     [isLocked, selectedItems],
   )
 
-  // Register tool on mount
+  // Register tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: LOCK_SELECTION_TOOL_ID,
       order,
       enabled: isLocked,
@@ -62,24 +59,24 @@ export function LockSelection({
       config: { lockedItems },
     })
 
-    return () => unregisterTool(id, LOCK_SELECTION_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, isLocked, lockedItems])
+    return () => widgetStoreActions.unregisterTool(id, LOCK_SELECTION_TOOL_ID)
+  }, [id, order, isLocked, lockedItems])
 
   const handleToggle = useCallback(() => {
     if (isLocked) {
       // Unlock: clear locked items and disable tool
-      setWidget(id, {
+      widgetStoreActions.setWidget(id, {
         isLocked: false,
         lockedItems: [],
       })
     } else {
       // Lock: save selected items and enable tool
-      setWidget(id, {
+      widgetStoreActions.setWidget(id, {
         isLocked: true,
         lockedItems: selectedItems,
       })
     }
-  }, [id, isLocked, selectedItems, setWidget])
+  }, [id, isLocked, selectedItems])
 
   // Don't render if no selections
   if (selectedItems.length === 0) {

package/src/widgets/actions/relative-data/relative-data.tsx

@@ -1,7 +1,8 @@
 import { IconButton } from '@mui/material'
 import { PercentOutlined } from '@mui/icons-material'
 import { useCallback, useEffect, useRef } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import type { RelativeDataProps } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
@@ -37,24 +38,18 @@ export function RelativeData({
   const percentFormatterRef = useRef<((value: number) => string) | undefined>(
     undefined,
   )
-  const getWidget = useWidgetStore((state) => state.getWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
-  const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
 
-  const storeIsRelative = useWidgetStore(
-    (state) =>
-      state.widgets[id]?.registeredTools?.find(
-        (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
-      )?.config?.isRelative as boolean | undefined,
-  )
+  const { storeIsRelative } = useWidgetSelector(id, (w) => ({
+    storeIsRelative: w?.registeredTools?.find(
+      (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
+    )?.config?.isRelative as boolean | undefined,
+  }))
 
   const isRelative = storeIsRelative ?? defaultIsRelative
 
-  // Register tool on mount
+  // Register data tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: RELATIVE_DATA_TOOL_ID,
       order,
       enabled: defaultIsRelative,
@@ -65,17 +60,17 @@ export function RelativeData({
       },
     })
 
-    return () => unregisterTool(id, RELATIVE_DATA_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, defaultIsRelative])
+    return () => widgetStoreActions.unregisterTool(id, RELATIVE_DATA_TOOL_ID)
+  }, [id, order, defaultIsRelative])
 
-  // Register config tool for formatter management
+  // Register config tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: RELATIVE_DATA_CONFIG_TOOL_ID,
       type: 'config',
       order,
       enabled: true,
-      fn: (currentConfig, toolConfig) => {
+      fn: (currentConfig: unknown, toolConfig?: Record<string, unknown>) => {
         const config = currentConfig as Record<string, unknown>
         if (toolConfig?.isRelative) {
           if (!percentFormatterRef.current) {
@@ -104,20 +99,21 @@ export function RelativeData({
         isRelative: defaultIsRelative,
       },
     })
-    return () => unregisterTool(id, RELATIVE_DATA_CONFIG_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, defaultIsRelative])
+    return () =>
+      widgetStoreActions.unregisterTool(id, RELATIVE_DATA_CONFIG_TOOL_ID)
+  }, [id, order, defaultIsRelative])
 
   const handleToggle = useCallback(() => {
     const newIsRelative = !isRelative
-    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
+    widgetStoreActions.setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
 
     if (newIsRelative) {
-      const widget = getWidget(id) as {
+      const widget = widgetStoreActions.getWidget(id) as {
         formatter?: (value: number) => string
         locale?: string
         max?: number
       }
-      updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
+      widgetStoreActions.updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
         isRelative: true,
         originalFormatter: widget?.formatter,
         originalMax: widget?.max,
@@ -125,11 +121,11 @@ export function RelativeData({
       })
     } else {
       percentFormatterRef.current = undefined
-      updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
+      widgetStoreActions.updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
         isRelative: false,
       })
     }
-  }, [isRelative, id, getWidget, setToolEnabled, updateToolConfig])
+  }, [isRelative, id])
 
   const tooltipLabel = isRelative
     ? (labels?.absolute ?? 'Show absolute values')

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

@@ -4,8 +4,8 @@ import { useCallback, useEffect } from 'react'
 import type { SearcherToggleProps, SearcherState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
-import { useWidgetStore } from '../../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 /**
  * Widget action button to toggle search functionality.
@@ -30,25 +30,24 @@ export function SearcherToggle({
   Icon,
   IconButtonProps,
 }: SearcherToggleProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const getWidget = useWidgetStore((state) => state.getWidget)
-  const storeIsEnabled = useWidgetStore(
-    useShallow((state) => state.getWidget<SearcherState>(id)?.isSearchEnabled),
-  )
+  const { storeIsEnabled } = useWidgetSelector(id, (w) => ({
+    storeIsEnabled: (w as SearcherState | undefined)?.isSearchEnabled,
+  }))
 
   const isEnabled = storeIsEnabled ?? defaultEnabled
 
   // Initialize store with default value on mount
   useEffect(() => {
-    const currentValue = getWidget<SearcherState>(id)?.isSearchEnabled
+    const currentValue =
+      widgetStoreActions.getWidget<SearcherState>(id)?.isSearchEnabled
     if (currentValue === undefined) {
-      setWidget(id, { isSearchEnabled: defaultEnabled })
+      widgetStoreActions.setWidget(id, { isSearchEnabled: defaultEnabled })
     }
-  }, [defaultEnabled, getWidget, id, setWidget])
+  }, [defaultEnabled, id])
 
   const handleToggle = useCallback(() => {
-    setWidget(id, { isSearchEnabled: !isEnabled })
-  }, [id, isEnabled, setWidget])
+    widgetStoreActions.setWidget(id, { isSearchEnabled: !isEnabled })
+  }, [id, isEnabled])
 
   const tooltipLabel = isEnabled
     ? (labels?.disable ?? 'Disable search')

package/src/widgets/actions/searcher/searcher.tsx

@@ -1,7 +1,8 @@
 import { TextField, InputAdornment, IconButton } from '@mui/material'
 import { ClearOutlined, SearchOutlined } from '@mui/icons-material'
 import { useEffect, useRef, useCallback } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import type { SearcherProps, SearcherFilterFn, SearcherState } from './types'
 import type { EchartWidgetData } from '../../echart/types'
 import { LOCK_SELECTION_TOOL_ID } from '../lock-selection/lock-selection'
@@ -41,30 +42,24 @@ export function Searcher({
   const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   // Read enabled state and search text from widget store
-  const widgetState = useWidgetStore((state) =>
-    state.getWidget<SearcherState>(id),
-  )
-  const enabled = widgetState?.isSearchEnabled ?? false
-  const searchText = widgetState?.searchText ?? ''
+  const { enabled, searchText } = useWidgetSelector(id, (w) => ({
+    enabled: (w as SearcherState | undefined)?.isSearchEnabled ?? false,
+    searchText: (w as SearcherState | undefined)?.searchText ?? '',
+  }))
   const prevEnabledRef = useRef(enabled)
 
   const filter = filterFn ?? defaultFilterFn
 
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
-
   const setSearchText = useCallback(
     (text: string) => {
-      setWidget(id, { searchText: text })
+      widgetStoreActions.setWidget(id, { searchText: text })
     },
-    [id, setWidget],
+    [id],
   )
 
-  // Register tool on mount
+  // Register tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: SEARCHER_TOOL_ID,
       order,
       enabled,
@@ -81,8 +76,8 @@ export function Searcher({
       disables: [LOCK_SELECTION_TOOL_ID],
     })
 
-    return () => unregisterTool(id, SEARCHER_TOOL_ID)
-  }, [id, order, filter, registerTool, unregisterTool, enabled, searchText])
+    return () => widgetStoreActions.unregisterTool(id, SEARCHER_TOOL_ID)
+  }, [id, order, enabled, searchText, filter])
 
   // Update config when search text changes (debounced)
   const debouncedUpdateConfig = useCallback(
@@ -91,10 +86,12 @@ export function Searcher({
         clearTimeout(debounceTimeoutRef.current)
       }
       debounceTimeoutRef.current = setTimeout(() => {
-        updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: text })
+        widgetStoreActions.updateToolConfig(id, SEARCHER_TOOL_ID, {
+          searchText: text,
+        })
       }, debounceDelay)
     },
-    [id, updateToolConfig, debounceDelay],
+    [id, debounceDelay],
   )
 
   // Auto-focus when enabled becomes true
@@ -127,11 +124,13 @@ export function Searcher({
 
   const handleClear = useCallback(() => {
     setSearchText('')
-    updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: '' })
+    widgetStoreActions.updateToolConfig(id, SEARCHER_TOOL_ID, {
+      searchText: '',
+    })
     if (inputRef.current) {
       inputRef.current.focus()
     }
-  }, [id, setSearchText, updateToolConfig])
+  }, [id, setSearchText])
 
   if (!enabled) {
     return null

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

@@ -1,6 +1,6 @@
 import { IconButton } from '@mui/material'
 import { useCallback, useEffect, useMemo } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
 import type { StackToggleProps, StackToggleState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
@@ -9,7 +9,7 @@ import { getEChartStackConfig } from '../../echart/utils'
 import { DEFAULT_STACK_GROUP } from '../../echart/const'
 import type { EchartWidgetState } from '../../echart/types'
 import type { EchartOptionsProps } from '../../echart/types'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 export const STACK_TOGGLE_TOOL_ID = 'stack-toggle'
 
@@ -34,16 +34,10 @@ export function StackToggle({
   Icon,
   IconButtonProps,
 }: StackToggleProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const storeIsStacked = useWidgetStore(
-    useShallow((state) => state.getWidget<StackToggleState>(id)?.isStacked),
-  )
-
-  const option = useWidgetStore(
-    useShallow((state) => state.getWidget<EchartWidgetState>(id)?.option),
-  )
+  const { storeIsStacked, option } = useWidgetSelector(id, (w) => ({
+    storeIsStacked: (w as StackToggleState | undefined)?.isStacked,
+    option: (w as EchartWidgetState | undefined)?.option,
+  }))
 
   const { hasMultiSeries, hasStackInSeries } = useMemo(() => {
     if (!option) return { hasMultiSeries: false, hasStackInSeries: false }
@@ -60,14 +54,14 @@ export function StackToggle({
   const effectiveDefaultIsStacked = hasStackInSeries || defaultIsStacked
   const isStacked = storeIsStacked ?? effectiveDefaultIsStacked
 
-  // Register config tool on mount
+  // Register config tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: STACK_TOGGLE_TOOL_ID,
       type: 'config',
       order: 10,
       enabled: isStacked && hasMultiSeries,
-      fn: (currentConfig) => {
+      fn: (currentConfig: unknown) => {
         const config = currentConfig as Record<string, unknown>
         const option = config.option as EchartOptionsProps | undefined
         if (!option) return currentConfig
@@ -87,18 +81,18 @@ export function StackToggle({
         return { ...config, option: { ...option, series: updatedSeries } }
       },
     })
-    return () => unregisterTool(id, STACK_TOGGLE_TOOL_ID)
-  }, [id, registerTool, unregisterTool, isStacked, hasMultiSeries])
+    return () => widgetStoreActions.unregisterTool(id, STACK_TOGGLE_TOOL_ID)
+  }, [id, isStacked, hasMultiSeries])
 
   // Initialize store with default value only if not already configured
   useEffect(() => {
     if (storeIsStacked !== undefined) return
-    setWidget(id, { isStacked: effectiveDefaultIsStacked })
-  }, [effectiveDefaultIsStacked, id, setWidget, storeIsStacked])
+    widgetStoreActions.setWidget(id, { isStacked: effectiveDefaultIsStacked })
+  }, [effectiveDefaultIsStacked, id, storeIsStacked])
 
   const handleToggle = useCallback(() => {
-    setWidget(id, { isStacked: !isStacked })
-  }, [isStacked, id, setWidget])
+    widgetStoreActions.setWidget(id, { isStacked: !isStacked })
+  }, [isStacked, id])
 
   const tooltipLabel = isStacked
     ? (labels?.unstacked ?? 'Disable stacking')