@carto/ps-react-ui 4.3.6 → 4.3.7

package/src/widgets/_shared/chart-config/option-builders.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { niceNum } from './option-builders'
+
+describe('niceNum', () => {
+  it('should return 0 for 0', () => {
+    expect(niceNum(0)).toBe(0)
+  })
+
+  it('should return 0 for negative values', () => {
+    expect(niceNum(-5)).toBe(0)
+  })
+
+  it('should round 547 to 600', () => {
+    expect(niceNum(547)).toBe(600)
+  })
+
+  it('should keep 200 as 200', () => {
+    expect(niceNum(200)).toBe(200)
+  })
+
+  it('should round 1200 to 2000', () => {
+    expect(niceNum(1200)).toBe(2000)
+  })
+
+  it('should round 18 to 20', () => {
+    expect(niceNum(18)).toBe(20)
+  })
+
+  it('should keep 5 as 5', () => {
+    expect(niceNum(5)).toBe(5)
+  })
+
+  it('should round 350 to 400', () => {
+    expect(niceNum(350)).toBe(400)
+  })
+
+  it('should keep 1 as 1', () => {
+    expect(niceNum(1)).toBe(1)
+  })
+})

package/src/widgets/_shared/chart-config/option-builders.ts

@@ -9,6 +9,18 @@ import type {
  * Shared EChart configuration builders for chart widgets
  */
 
+/**
+ * Rounds a value up to the nearest "nice" number.
+ * A nice number is a multiple of 10^floor(log10(value)).
+ *
+ * Examples: 547 → 600, 200 → 200, 1200 → 2000, 18 → 20, 5 → 5
+ */
+export function niceNum(value: number): number {
+  if (value <= 0) return 0
+  const base = Math.pow(10, Math.floor(Math.log10(value)))
+  return Math.ceil(value / base) * base
+}
+
 /**
  * Builds standard legend configuration for chart widgets
  *

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

@@ -23,14 +23,11 @@ export function FullScreen({
   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 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)
 

package/src/widgets/actions/index.ts

@@ -24,7 +24,7 @@ export type {
 
 /* Stack Toggle Widget */
 export { StackToggle, STACK_TOGGLE_TOOL_ID } from './stack-toggle/stack-toggle'
-export type { StackToggleProps, StackToggleState } from './stack-toggle/types'
+export type { StackToggleProps } from './stack-toggle/types'
 
 /* Searcher Toggle Widget */
 export { Searcher, SEARCHER_TOOL_ID } from './searcher/searcher'
@@ -45,7 +45,4 @@ export {
   LockSelection,
   LOCK_SELECTION_TOOL_ID,
 } from './lock-selection/lock-selection'
-export type {
-  LockSelectionProps,
-  LockSelectionState,
-} from './lock-selection/types'
+export type { LockSelectionProps } from './lock-selection/types'

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

@@ -1,9 +1,8 @@
 import { describe, test, expect, beforeEach } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
-import { LockSelection } from './lock-selection'
+import { LockSelection, LOCK_SELECTION_TOOL_ID } from './lock-selection'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { EchartWidgetData } from '../../echart/types'
-import type { LockSelectionState } from './types'
 import { WidgetLoader } from '../../loader/loader'
 
 // Test data
@@ -45,25 +44,29 @@ describe('LockSelection', () => {
   })
 
   test('shows unlock tooltip when locked', () => {
-    // Pre-set the store to locked state
-    useWidgetStore.getState().setWidget(widgetId, { isLocked: true })
-
     render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
 
-    const button = screen.getByRole('button', { name: 'Unlock selection' })
-    expect(button).toBeTruthy()
+    // Lock by clicking the button
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    const unlockedButton = screen.getByRole('button', {
+      name: 'Unlock selection',
+    })
+    expect(unlockedButton).toBeTruthy()
   })
 
-  test('toggles isLocked in store when clicked', () => {
+  test('toggles isLocked in tool state when clicked', () => {
     render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
 
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
-    const widget = useWidgetStore
-      .getState()
-      .getWidget<LockSelectionState>(widgetId)
-    expect(widget?.isLocked).toBe(true)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === LOCK_SELECTION_TOOL_ID,
+    )
+    expect(tool?.enabled).toBe(true)
   })
 
   test('filters data in store when locking', async () => {
@@ -86,36 +89,33 @@ describe('LockSelection', () => {
 
     await useWidgetStore.getState().executeToolPipeline(widgetId, mockData)
 
-    const widget = useWidgetStore
-      .getState()
-      .getWidget<LockSelectionState>(widgetId)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
     expect(widget?.data).toEqual([[{ name: 'Electronics', value: 440 }]])
   })
 
   test('clears locked items when unlocking', () => {
-    // Pre-set the store to locked state
-    useWidgetStore.getState().setWidget(widgetId, {
-      isLocked: true,
-      lockedItems: ['Electronics'],
-    })
-
     render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
 
+    // Lock first
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
-    const widget = useWidgetStore
-      .getState()
-      .getWidget<LockSelectionState>(widgetId)
-    expect(widget?.isLocked).toBe(false)
+    // Then unlock
+    fireEvent.click(button)
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === LOCK_SELECTION_TOOL_ID,
+    )
+    expect(tool?.enabled).toBe(false)
   })
 
   test('has active state when locked', () => {
-    useWidgetStore.getState().setWidget(widgetId, { isLocked: true })
-
     render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
 
     const button = screen.getByRole('button')
+    fireEvent.click(button)
+
     expect(button.getAttribute('data-active')).toBe('true')
   })
 
@@ -175,9 +175,7 @@ describe('LockSelection', () => {
       .getState()
       .executeToolPipeline(widgetId, multiSeriesData)
 
-    const widget = useWidgetStore
-      .getState()
-      .getWidget<LockSelectionState>(widgetId)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
     expect(widget?.data).toEqual([
       [{ name: 'Electronics', value: 440 }],
       [{ name: 'Electronics', value: 520 }],

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

@@ -1,7 +1,7 @@
 import { IconButton } from '@mui/material'
 import { CheckBoxOutlined } from '@mui/icons-material'
-import { useCallback, useEffect, useMemo } from 'react'
-import type { LockSelectionProps, LockSelectionState } from './types'
+import { useCallback, useEffect } from 'react'
+import type { LockSelectionProps } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import { useWidgetStore } from '../../stores/widget-store'
@@ -34,61 +34,60 @@ export function LockSelection({
   Icon,
   IconButtonProps,
 }: LockSelectionProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
+  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 storeIsLocked = useWidgetStore(
-    useShallow((state) => state.getWidget<LockSelectionState>(id)?.isLocked),
+  const lockTool = useWidgetStore(
+    useShallow((state) => {
+      const tools = state.getWidget(id)?.registeredTools ?? []
+      return tools.find((tool) => tool.id === LOCK_SELECTION_TOOL_ID)
+    }),
   )
 
-  const isLocked = storeIsLocked ?? false
-  const lockedItems = useMemo(
-    () => (isLocked ? selectedItems : []),
-    [isLocked, selectedItems],
-  )
+  const isLocked = lockTool?.enabled ?? false
 
   // Register tool on mount
   useEffect(() => {
+    const existingTool = getWidget(id)?.registeredTools?.find(
+      (tool) => tool.id === LOCK_SELECTION_TOOL_ID,
+    )
+
+    const initialEnabled = existingTool?.enabled ?? false
+    const initialLockedItems =
+      (existingTool?.config?.lockedItems as string[]) ?? []
+
     registerTool(id, {
       id: LOCK_SELECTION_TOOL_ID,
       order,
-      enabled: isLocked,
+      enabled: initialEnabled,
       fn: (data, config) => {
         const items = (config?.lockedItems as string[]) || []
         if (items.length === 0) return data
 
         return filterDataByLockedItems(data as EchartWidgetData, items)
       },
-      config: { lockedItems },
+      config: { lockedItems: initialLockedItems },
     })
 
     return () => unregisterTool(id, LOCK_SELECTION_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, isLocked, lockedItems])
-
-  // Update enabled flag and config when they change
-  useEffect(() => {
-    setToolEnabled(id, LOCK_SELECTION_TOOL_ID, isLocked)
-    updateToolConfig(id, LOCK_SELECTION_TOOL_ID, { lockedItems })
-  }, [id, isLocked, lockedItems, setToolEnabled, updateToolConfig])
+  }, [id, order, registerTool, unregisterTool, getWidget])
 
   const handleToggle = useCallback(() => {
     if (isLocked) {
       // Unlock: clear locked items and disable tool
-      setWidget(id, {
-        isLocked: false,
-        lockedItems: [],
-      })
+      setToolEnabled(id, LOCK_SELECTION_TOOL_ID, false)
+      updateToolConfig(id, LOCK_SELECTION_TOOL_ID, { lockedItems: [] })
     } else {
       // Lock: save selected items and enable tool
-      setWidget(id, {
-        isLocked: true,
+      setToolEnabled(id, LOCK_SELECTION_TOOL_ID, true)
+      updateToolConfig(id, LOCK_SELECTION_TOOL_ID, {
         lockedItems: selectedItems,
       })
     }
-  }, [id, isLocked, selectedItems, setWidget])
+  }, [id, isLocked, selectedItems, setToolEnabled, updateToolConfig])
 
   // Don't render if no selections
   if (selectedItems.length === 0) {

package/src/widgets/actions/lock-selection/types.ts

@@ -1,22 +1,5 @@
 import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
-import type { BaseWidgetState } from '../../stores/types'
-
-/**
- * Lock selection specific state properties.
- */
-export interface LockSelectionStateProps {
-  /** Whether the selection is currently locked */
-  isLocked?: boolean
-}
-
-/**
- * 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 */

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

@@ -1,9 +1,8 @@
 import { describe, test, expect, beforeEach } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { RelativeData } from './relative-data'
+import { RelativeData, RELATIVE_DATA_TOOL_ID } from './relative-data'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { EchartWidgetData } from '../../echart/types'
-import type { RelativeDataState } from './types'
 
 describe('RelativeData', () => {
   const widgetId = 'test-relative-widget'
@@ -94,25 +93,27 @@ describe('RelativeData', () => {
     expect(button.getAttribute('aria-label')).toBe('Show absolute values')
   })
 
-  test('initializes widget store with defaultIsRelative on mount', async () => {
+  test('initializes tool state with defaultIsRelative on mount', async () => {
     render(<RelativeData id={widgetId} defaultIsRelative />)
 
     await waitFor(() => {
-      const widget = useWidgetStore
-        .getState()
-        .getWidget<RelativeDataState>(widgetId)
-      expect(widget?.isRelative).toBe(true)
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const tool = widget?.registeredTools?.find(
+        (t) => t.id === RELATIVE_DATA_TOOL_ID,
+      )
+      expect(tool?.enabled).toBe(true)
     })
   })
 
-  test('initializes widget store with false when defaultIsRelative is false', async () => {
+  test('initializes tool state with false when defaultIsRelative is false', async () => {
     render(<RelativeData id={widgetId} defaultIsRelative={false} />)
 
     await waitFor(() => {
-      const widget = useWidgetStore
-        .getState()
-        .getWidget<RelativeDataState>(widgetId)
-      expect(widget?.isRelative).toBe(false)
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const tool = widget?.registeredTools?.find(
+        (t) => t.id === RELATIVE_DATA_TOOL_ID,
+      )
+      expect(tool?.enabled).toBe(false)
     })
   })
 
@@ -233,7 +234,6 @@ describe('RelativeData', () => {
     // Pre-populate the widget in the store with relative data
     useWidgetStore.getState().setWidget(widgetId, {
       data: initialData,
-      isRelative: true,
     })
 
     render(<RelativeData id={widgetId} defaultIsRelative />)

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

@@ -2,11 +2,12 @@ import { IconButton } from '@mui/material'
 import { PercentOutlined } from '@mui/icons-material'
 import { useCallback, useEffect, useRef } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
-import type { RelativeDataProps, RelativeDataState } from './types'
+import type { RelativeDataProps } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import { calculateTotal, toRelativeData } from './utils'
 import type { EchartWidgetData } from '../../../widgets/echart'
+import { useShallow } from 'zustand/shallow'
 
 export const RELATIVE_DATA_TOOL_ID = 'relative-data'
 
@@ -43,26 +44,27 @@ export function RelativeData({
   const unregisterTool = useWidgetStore((state) => state.unregisterTool)
   const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
 
-  const storeIsRelative = useWidgetStore(
-    (state) => state.getWidget<RelativeDataState>(id)?.isRelative,
+  const relativeTool = useWidgetStore(
+    useShallow((state) => {
+      const tools = state.getWidget(id)?.registeredTools ?? []
+      return tools.find((tool) => tool.id === RELATIVE_DATA_TOOL_ID)
+    }),
   )
 
-  const isRelative = storeIsRelative ?? defaultIsRelative
-
-  // Initialize store with default value on mount
-  useEffect(() => {
-    const currentValue = getWidget<RelativeDataState>(id)?.isRelative
-    if (currentValue === undefined) {
-      setWidget(id, { isRelative: defaultIsRelative })
-    }
-  }, [defaultIsRelative, getWidget, id, setWidget])
+  const isRelative = relativeTool?.enabled ?? defaultIsRelative
 
   // Register tool on mount
   useEffect(() => {
+    const existingTool = getWidget(id)?.registeredTools?.find(
+      (tool) => tool.id === RELATIVE_DATA_TOOL_ID,
+    )
+
+    const initialEnabled = existingTool?.enabled ?? defaultIsRelative
+
     registerTool(id, {
       id: RELATIVE_DATA_TOOL_ID,
       order,
-      enabled: isRelative,
+      enabled: initialEnabled,
       fn: (data) => {
         const echartData = data as EchartWidgetData
         const total = calculateTotal(echartData)
@@ -71,12 +73,7 @@ export function RelativeData({
     })
 
     return () => unregisterTool(id, RELATIVE_DATA_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, isRelative])
-
-  // Update enabled flag when toggle changes
-  useEffect(() => {
-    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, isRelative)
-  }, [id, isRelative, setToolEnabled])
+  }, [id, order, registerTool, unregisterTool, defaultIsRelative, getWidget])
 
   const handleToggle = useCallback(() => {
     const newIsRelative = !isRelative
@@ -96,8 +93,8 @@ export function RelativeData({
       max = 100
     }
 
+    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
     setWidget(id, {
-      isRelative: newIsRelative,
       max,
       formatter: newIsRelative
         ? (value: number) => {
@@ -110,7 +107,7 @@ export function RelativeData({
           }
         : originalFormatter.current,
     })
-  }, [isRelative, setWidget, id, getWidget])
+  }, [isRelative, setWidget, setToolEnabled, id, getWidget])
 
   const tooltipLabel = isRelative
     ? (labels?.absolute ?? 'Show absolute values')

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

@@ -1,6 +1,5 @@
 import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
-import type { BaseWidgetState } from '../../stores/types'
 
 export interface RelativeDataProps {
   /** Widget ID to update data in the widget store */
@@ -23,9 +22,3 @@ export interface RelativeDataProps {
   /** Custom icon to display */
   Icon?: ReactNode
 }
-
-export type RelativeDataState<T = unknown> = BaseWidgetState<
-  T & {
-    isRelative?: boolean
-  }
->

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

@@ -1,6 +1,6 @@
 import { TextField, InputAdornment, IconButton } from '@mui/material'
 import { ClearOutlined, SearchOutlined } from '@mui/icons-material'
-import { useEffect, useRef, useCallback } from 'react'
+import { useEffect, useRef, useCallback, useState } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { SearcherProps, SearcherFilterFn, SearcherState } from './types'
 import type { EchartWidgetData } from '../../echart/types'
@@ -40,29 +40,33 @@ export function Searcher({
   const inputRef = useRef<HTMLInputElement>(null)
   const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  // Read enabled state and search text from widget store
+  // Read enabled state from widget store (set by SearcherToggle)
   const widgetState = useWidgetStore((state) =>
     state.getWidget<SearcherState>(id),
   )
   const enabled = widgetState?.isSearchEnabled ?? false
-  const searchText = widgetState?.searchText ?? ''
   const prevEnabledRef = useRef(enabled)
 
+  const getWidget = useWidgetStore((state) => state.getWidget)
+
+  // Local state for immediate input value — restore from tool config on remount
+  const [searchTextLocal, setSearchTextLocal] = useState(() => {
+    const existingTool = getWidget(id)?.registeredTools?.find(
+      (tool) => tool.id === SEARCHER_TOOL_ID,
+    )
+    return (existingTool?.config?.searchText as string) ?? ''
+  })
+
+  // When disabled, display empty; when enabled, use local state
+  const searchText = enabled ? searchTextLocal : ''
+
   const filter = filterFn ?? defaultFilterFn
 
-  const setWidget = useWidgetStore((state) => state.setWidget)
   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 setSearchText = useCallback(
-    (text: string) => {
-      setWidget(id, { searchText: text })
-    },
-    [id, setWidget],
-  )
-
   // Register tool on mount
   useEffect(() => {
     registerTool(id, {
@@ -78,12 +82,17 @@ export function Searcher({
         // Return result directly (pipeline will handle Promise)
         return result
       },
-      config: { searchText },
+      config: {
+        searchText:
+          (getWidget(id)?.registeredTools?.find(
+            (tool) => tool.id === SEARCHER_TOOL_ID,
+          )?.config?.searchText as string) ?? '',
+      },
       disables: [LOCK_SELECTION_TOOL_ID],
     })
 
     return () => unregisterTool(id, SEARCHER_TOOL_ID)
-  }, [id, order, filter, registerTool, unregisterTool, enabled, searchText])
+  }, [id, order, filter, registerTool, unregisterTool, enabled, getWidget])
 
   // Update enabled flag when it changes
   useEffect(() => {
@@ -103,15 +112,24 @@ export function Searcher({
     [id, updateToolConfig, debounceDelay],
   )
 
+  // Handle enabled state transitions during render (React setState-during-render pattern)
+  if (enabled !== prevEnabledRef.current) {
+    if (enabled) {
+      // Transition from disabled to enabled - reset local state
+      setSearchTextLocal('')
+    }
+    prevEnabledRef.current = enabled
+  }
+
   // Auto-focus when enabled becomes true
   useEffect(() => {
-    // Transition from disabled to enabled - focus input
-    if (enabled && !prevEnabledRef.current && inputRef.current) {
+    if (enabled && inputRef.current) {
       inputRef.current.focus()
     }
-
-    prevEnabledRef.current = enabled
-  }, [enabled])
+    if (!enabled) {
+      updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: '' })
+    }
+  }, [enabled, id, updateToolConfig])
 
   // Cleanup debounce timeout on unmount
   useEffect(() => {
@@ -125,19 +143,19 @@ export function Searcher({
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = event.target.value
-      setSearchText(newValue)
+      setSearchTextLocal(newValue)
       debouncedUpdateConfig(newValue)
     },
-    [debouncedUpdateConfig, setSearchText],
+    [debouncedUpdateConfig],
   )
 
   const handleClear = useCallback(() => {
-    setSearchText('')
+    setSearchTextLocal('')
     updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: '' })
     if (inputRef.current) {
       inputRef.current.focus()
     }
-  }, [id, setSearchText, updateToolConfig])
+  }, [id, updateToolConfig])
 
   if (!enabled) {
     return null

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

@@ -19,8 +19,6 @@ export type SearcherFilterFn = (
 export interface SearcherStateProps {
   /** Whether search is currently enabled */
   isSearchEnabled?: boolean
-  /** Current search text */
-  searchText?: string
 }
 
 /**