@carto/ps-react-ui 4.5.0 → 4.6.0

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

@@ -7,6 +7,7 @@ import {
 } 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'
@@ -227,23 +228,28 @@ describe('RelativeData', () => {
     expect(button.hasAttribute('disabled')).toBeTruthy()
   })
 
-  test('registers config tool on mount', async () => {
+  test('registers both data and config tools on mount', async () => {
     render(<RelativeData id={widgetId} />)
 
     await waitFor(() => {
       const widget = useWidgetStore.getState().getWidget(widgetId)
-      const tool = widget?.registeredTools?.find(
+      const dataTool = widget?.registeredTools?.find(
+        (t) => t.id === RELATIVE_DATA_TOOL_ID,
+      )
+      const configTool = widget?.registeredTools?.find(
         (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
       )
-      expect(tool).toBeTruthy()
-      expect(tool?.type).toBe('config')
-      expect(tool?.enabled).toBe(true)
+      expect(dataTool).toBeTruthy()
+      expect(configTool).toBeTruthy()
+      expect(configTool?.type).toBe('config')
+      // Data tool disabled by default (isRelative=false)
+      expect(dataTool?.enabled).toBe(false)
+      // Config tool always enabled — it reads isRelative from store internally
+      expect(configTool?.enabled).toBe(true)
     })
   })
 
-  test('sets formatter via config pipeline when toggling to relative mode', async () => {
-    useWidgetStore.getState().setWidget(widgetId, { max: 500 })
-
+  test('data tool enabled when toggled to relative mode', async () => {
     render(<RelativeData id={widgetId} />)
 
     const button = screen.getByRole('button')
@@ -251,16 +257,77 @@ describe('RelativeData', () => {
 
     await waitFor(() => {
       const widget = useWidgetStore.getState().getWidget(widgetId)
-      const tool = widget?.registeredTools?.find(
-        (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
+      const dataTool = widget?.registeredTools?.find(
+        (t) => t.id === RELATIVE_DATA_TOOL_ID,
       )
-      expect(tool?.config?.isRelative).toBe(true)
-      expect(tool?.config?.originalFormatter).toBeUndefined()
-      expect(tool?.config?.originalMax).toBe(500)
+      expect(dataTool?.enabled).toBe(true)
     })
   })
 
-  test('restores original formatter via config pipeline when toggling back', () => {
+  test('stores isRelative in widget root state', () => {
+    render(<RelativeData id={widgetId} />)
+
+    // Default: isRelative=false in store
+    let widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as RelativeDataState | undefined)?.isRelative).toBe(false)
+
+    // Toggle to relative
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as RelativeDataState | undefined)?.isRelative).toBe(true)
+
+    // Toggle back
+    fireEvent.click(button)
+
+    widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as RelativeDataState | undefined)?.isRelative).toBe(false)
+  })
+
+  test('config tool does not apply formatter when sourceData is empty', async () => {
+    const customFormatter = (value: number) => `$${value}`
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { formatter: customFormatter, sourceData: [] })
+
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    // Execute config pipeline — sourceData is empty, so formatter should pass through
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { formatter: customFormatter, max: 200 })
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBe(customFormatter)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
+  })
+
+  test('config pipeline applies percentage formatter when in relative mode', async () => {
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { max: 500, sourceData: mockData })
+
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    // Execute config pipeline
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { max: 500 })
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(100)
+    expect(widget?.formatter).toBeDefined()
+    expect(typeof widget?.formatter).toBe('function')
+  })
+
+  test('config tool passes config through unchanged when not in relative mode', async () => {
     const customFormatter = (value: number) => `$${value}`
     useWidgetStore
       .getState()
@@ -268,20 +335,144 @@ describe('RelativeData', () => {
 
     render(<RelativeData id={widgetId} />)
 
+    // Execute config pipeline — config tool is enabled but isRelative=false in store,
+    // so it passes through the config unchanged
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { formatter: customFormatter, max: 200 })
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBe(customFormatter)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
+  })
+
+  test('restores original formatter/max when toggling back to absolute', async () => {
+    const customFormatter = (value: number) => `$${value}`
+    useWidgetStore.getState().setWidget(widgetId, {
+      formatter: customFormatter,
+      max: 200,
+      sourceData: mockData,
+    })
+
+    render(<RelativeData id={widgetId} />)
+
     const button = screen.getByRole('button')
 
-    // Toggle to relative
+    // Toggle to relative — captures originalFormatter/originalMax in store
     fireEvent.click(button)
-    // Toggle back to absolute
+
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { max: 200 })
+
+    let widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(100)
+
+    // Toggle back to absolute — config tool restores originals from store
+    fireEvent.click(button)
+
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { max: 200 })
+
+    widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBe(customFormatter)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
+  })
+
+  test('removes percentage formatter when toggling back with no original formatter', async () => {
+    // Widget has no formatter — originalFormatter will be captured as undefined
+    useWidgetStore.getState().setWidget(widgetId, { sourceData: mockData })
+
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+
+    // Toggle to relative — captures originalFormatter=undefined
+    fireEvent.click(button)
+
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
+
+    let widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBeDefined()
+    expect(typeof widget?.formatter).toBe('function')
+
+    // Toggle back to absolute — should remove percentage formatter
+    fireEvent.click(button)
+
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
+
+    widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBeUndefined()
+  })
+
+  test('stores originalFormatter/originalMax in widget root on toggle', () => {
+    const customFormatter = (value: number) => `$${value}`
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { formatter: customFormatter, max: 200 })
+
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    const widget = useWidgetStore
+      .getState()
+      .getWidget<RelativeDataState>(widgetId)
+    expect(widget?.originalFormatter).toBe(customFormatter)
+    expect(widget?.originalMax).toBe(200)
+  })
+
+  test('restores original formatter/max when unmounting while in relative mode', async () => {
+    const customFormatter = (value: number) => `$${value}`
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { formatter: customFormatter, max: 200 })
+
+    const { unmount } = render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+
+    // Toggle to relative — captures originalFormatter/originalMax in store
     fireEvent.click(button)
 
+    await waitFor(() => {
+      const widget = useWidgetStore
+        .getState()
+        .getWidget<RelativeDataState>(widgetId)
+      expect(widget?.isRelative).toBe(true)
+      expect(widget?.originalFormatter).toBe(customFormatter)
+      expect(widget?.originalMax).toBe(200)
+    })
+
+    // Unmount while still in relative mode
+    unmount()
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBe(customFormatter)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
+  })
+
+  test('unregisters tools on unmount', async () => {
+    const { unmount } = render(<RelativeData id={widgetId} />)
+
+    await waitFor(() => {
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.registeredTools?.length).toBeGreaterThan(0)
+    })
+
+    unmount()
+
     const widget = useWidgetStore.getState().getWidget(widgetId)
-    const tool = widget?.registeredTools?.find(
+    const dataTool = widget?.registeredTools?.find(
+      (t) => t.id === RELATIVE_DATA_TOOL_ID,
+    )
+    const configTool = widget?.registeredTools?.find(
       (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
     )
-    expect(tool?.config?.isRelative).toBe(false)
-    expect(tool?.config?.originalFormatter).toBe(customFormatter)
-    expect(tool?.config?.originalMax).toBe(200)
+    expect(dataTool).toBeUndefined()
+    expect(configTool).toBeUndefined()
   })
 
   test('recalculates relative values when store data changes externally while in relative mode', async () => {

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

@@ -3,7 +3,7 @@ import { PercentOutlined } from '@mui/icons-material'
 import { useCallback, useEffect, useRef } from 'react'
 import { widgetStoreActions } from '../../stores/widget-store'
 import { useWidgetSelector } from '../../stores/use-widget-selector'
-import type { RelativeDataProps } from './types'
+import type { RelativeDataProps, RelativeDataState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import { calculateTotal, toRelativeData } from './utils'
@@ -15,8 +15,13 @@ export const RELATIVE_DATA_CONFIG_TOOL_ID = 'relative-data-config'
 /**
  * Widget action to toggle between relative (percentage) and absolute data display.
  *
- * Registers a transformation tool in the widget pipeline when mounted.
- * When relative mode is active, transforms data to percentages via the pipeline.
+ * Registers two transformation tools in the widget pipeline when mounted:
+ * - A data tool that converts values to percentages (enabled/disabled via store)
+ * - A config tool that is **always enabled** and reads `isRelative` from the store
+ *   to decide whether to apply the percentage formatter or restore the original one.
+ *   The config tool must always participate because the original formatter may have
+ *   been set via `setWidget` (not in the base config), so disabling the tool would
+ *   leave the percentage formatter stuck on the widget.
  *
  * @example
  * ```tsx
@@ -39,15 +44,21 @@ export function RelativeData({
     undefined,
   )
 
-  const { storeIsRelative } = useWidgetSelector(id, (w) => ({
-    storeIsRelative: w?.registeredTools?.find(
-      (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
-    )?.config?.isRelative as boolean | undefined,
+  // Read isRelative from widget store root — single source of truth
+  const { isRelative } = useWidgetSelector(id, (w) => ({
+    isRelative:
+      (w as RelativeDataState | undefined)?.isRelative ?? defaultIsRelative,
   }))
 
-  const isRelative = storeIsRelative ?? defaultIsRelative
+  // Initialize store with default value on mount
+  useEffect(() => {
+    const current = widgetStoreActions.getWidget<RelativeDataState>(id)
+    if (current?.isRelative === undefined) {
+      widgetStoreActions.setWidget(id, { isRelative: defaultIsRelative })
+    }
+  }, [id, defaultIsRelative])
 
-  // Register data tool with all reactive deps — store's no-op detection handles performance
+  // Register data tool once — fn has no closure deps
   useEffect(() => {
     widgetStoreActions.registerTool(id, {
       id: RELATIVE_DATA_TOOL_ID,
@@ -63,18 +74,35 @@ export function RelativeData({
     return () => widgetStoreActions.unregisterTool(id, RELATIVE_DATA_TOOL_ID)
   }, [id, order, defaultIsRelative])
 
-  // Register config tool with all reactive deps — store's no-op detection handles performance
+  // Sync data tool enabled — lightweight, no re-registration
+  useEffect(() => {
+    widgetStoreActions.setToolEnabled(id, RELATIVE_DATA_TOOL_ID, isRelative)
+  }, [id, isRelative])
+
+  // Register config tool — ALWAYS enabled.
+  // Reads isRelative, originalFormatter, originalMax from the store at execution time:
+  // - isRelative=true  → applies percentage formatter and max=100
+  // - isRelative=false → restores original formatter/max from store
   useEffect(() => {
     widgetStoreActions.registerTool(id, {
       id: RELATIVE_DATA_CONFIG_TOOL_ID,
       type: 'config',
       order,
       enabled: true,
-      fn: (currentConfig: unknown, toolConfig?: Record<string, unknown>) => {
+      fn: (currentConfig: unknown) => {
         const config = currentConfig as Record<string, unknown>
-        if (toolConfig?.isRelative) {
+        const widget = widgetStoreActions.getWidget<RelativeDataState>(id)
+
+        const hasSourceData =
+          widget?.sourceData != null &&
+          !(Array.isArray(widget.sourceData) && widget.sourceData.length === 0)
+
+        if (widget?.isRelative) {
+          // Don't apply percentage formatter when there's no source data
+          if (!hasSourceData) return config
+
           if (!percentFormatterRef.current) {
-            const locale = toolConfig?.locale as string | undefined
+            const locale = widget?.locale
             percentFormatterRef.current = (value: number) =>
               new Intl.NumberFormat(locale, {
                 style: 'percent',
@@ -84,46 +112,49 @@ export function RelativeData({
           }
           return { ...config, formatter: percentFormatterRef.current, max: 100 }
         }
-        // Switching back from relative mode
+
+        // Not in relative mode — restore originals from store if captured.
+        // Use `in` because originalFormatter may have been captured as undefined
+        // (widget had no formatter before toggling relative on).
         percentFormatterRef.current = undefined
-        if (toolConfig && 'originalFormatter' in toolConfig) {
+        if (widget != null && 'originalFormatter' in widget) {
           return {
             ...config,
-            formatter: toolConfig.originalFormatter,
-            max: toolConfig.originalMax,
+            formatter: widget.originalFormatter,
+            max: widget.originalMax,
           }
         }
         return config
       },
-      config: {
-        isRelative: defaultIsRelative,
-      },
     })
-    return () =>
+    return () => {
+      // Restore original formatter/max if unmounting while in relative mode
+      const widget = widgetStoreActions.getWidget<RelativeDataState>(id)
+      if (widget?.isRelative && 'originalFormatter' in widget) {
+        widgetStoreActions.setWidget(id, {
+          formatter: widget.originalFormatter,
+          max: widget.originalMax,
+        })
+      }
+      percentFormatterRef.current = undefined
       widgetStoreActions.unregisterTool(id, RELATIVE_DATA_CONFIG_TOOL_ID)
+    }
   }, [id, order, defaultIsRelative])
 
   const handleToggle = useCallback(() => {
     const newIsRelative = !isRelative
-    widgetStoreActions.setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
+    percentFormatterRef.current = undefined
 
     if (newIsRelative) {
-      const widget = widgetStoreActions.getWidget(id) as {
-        formatter?: (value: number) => string
-        locale?: string
-        max?: number
-      }
-      widgetStoreActions.updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
+      // Capture current formatter/max in store before switching to relative
+      const widget = widgetStoreActions.getWidget(id)
+      widgetStoreActions.setWidget(id, {
         isRelative: true,
         originalFormatter: widget?.formatter,
-        originalMax: widget?.max,
-        locale: widget?.locale,
+        originalMax: (widget as unknown as Record<string, unknown>)?.max,
       })
     } else {
-      percentFormatterRef.current = undefined
-      widgetStoreActions.updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
-        isRelative: false,
-      })
+      widgetStoreActions.setWidget(id, { isRelative: false })
     }
   }, [isRelative, id])
 

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

@@ -27,5 +27,7 @@ export interface RelativeDataProps {
 export type RelativeDataState<T = unknown> = BaseWidgetState<
   T & {
     isRelative?: boolean
+    originalFormatter?: (value: number) => string
+    originalMax?: number
   }
 >

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

@@ -57,42 +57,44 @@ export function Searcher({
     [id],
   )
 
-  // Register tool with all reactive deps — store's no-op detection handles performance
+  // Register tool once — fn reads searchText from the store at execution time.
+  // Enabled is synced separately to avoid full re-registration on toggle.
   useEffect(() => {
     widgetStoreActions.registerTool(id, {
       id: SEARCHER_TOOL_ID,
       order,
-      enabled,
-      fn: async (data, config) => {
-        const searchTextFromConfig = (config?.searchText as string) || ''
+      enabled: false,
+      fn: async (data) => {
+        const widget = widgetStoreActions.getWidget<SearcherState>(id)
+        const currentSearchText = widget?.searchText ?? ''
 
         // Execute filter (can be sync or async)
-        const result = filter(data as EchartWidgetData, searchTextFromConfig)
+        const result = filter(data as EchartWidgetData, currentSearchText)
 
         // Return result directly (pipeline will handle Promise)
         return result
       },
-      config: { searchText },
       disables: [LOCK_SELECTION_TOOL_ID],
     })
 
     return () => widgetStoreActions.unregisterTool(id, SEARCHER_TOOL_ID)
-  }, [id, order, enabled, searchText, filter])
+  }, [id, order, filter])
 
-  // Update config when search text changes (debounced)
-  const debouncedUpdateConfig = useCallback(
-    (text: string) => {
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current)
-      }
-      debounceTimeoutRef.current = setTimeout(() => {
-        widgetStoreActions.updateToolConfig(id, SEARCHER_TOOL_ID, {
-          searchText: text,
-        })
-      }, debounceDelay)
-    },
-    [id, debounceDelay],
-  )
+  // Sync enabled from store — lightweight, no re-registration
+  useEffect(() => {
+    widgetStoreActions.setToolEnabled(id, SEARCHER_TOOL_ID, enabled)
+  }, [id, enabled])
+
+  // Trigger pipeline re-execution when search text changes (debounced).
+  // The fn reads searchText from the store, so we just need to trigger the pipeline.
+  const debouncedTriggerPipeline = useCallback(() => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current)
+    }
+    debounceTimeoutRef.current = setTimeout(() => {
+      widgetStoreActions.triggerToolPipeline(id)
+    }, debounceDelay)
+  }, [id, debounceDelay])
 
   // Auto-focus when enabled becomes true
   useEffect(() => {
@@ -117,16 +119,14 @@ export function Searcher({
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = event.target.value
       setSearchText(newValue)
-      debouncedUpdateConfig(newValue)
+      debouncedTriggerPipeline()
     },
-    [debouncedUpdateConfig, setSearchText],
+    [debouncedTriggerPipeline, setSearchText],
   )
 
   const handleClear = useCallback(() => {
     setSearchText('')
-    widgetStoreActions.updateToolConfig(id, SEARCHER_TOOL_ID, {
-      searchText: '',
-    })
+    widgetStoreActions.triggerToolPipeline(id)
     if (inputRef.current) {
       inputRef.current.focus()
     }
@@ -187,10 +187,8 @@ const defaultFilterFn: SearcherFilterFn = (
   return Promise.resolve(
     data.map((series) =>
       series.filter((item) =>
-        Object.values(item).some(
-          (value) =>
-            typeof value === 'string' &&
-            value.toLowerCase().includes(lowerSearch),
+        Object.values(item).some((value) =>
+          String(value).toLowerCase().includes(lowerSearch),
         ),
       ),
     ),

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

@@ -54,13 +54,13 @@ export function StackToggle({
   const effectiveDefaultIsStacked = hasStackInSeries || defaultIsStacked
   const isStacked = storeIsStacked ?? effectiveDefaultIsStacked
 
-  // Register config tool with all reactive deps — store's no-op detection handles performance
+  // Register config tool once — fn has no closure deps
   useEffect(() => {
     widgetStoreActions.registerTool(id, {
       id: STACK_TOGGLE_TOOL_ID,
       type: 'config',
       order: 10,
-      enabled: isStacked && hasMultiSeries,
+      enabled: false,
       fn: (currentConfig: unknown) => {
         const config = currentConfig as Record<string, unknown>
         const option = config.option as EchartOptionsProps | undefined
@@ -82,6 +82,15 @@ export function StackToggle({
       },
     })
     return () => widgetStoreActions.unregisterTool(id, STACK_TOGGLE_TOOL_ID)
+  }, [id])
+
+  // Sync enabled from store — lightweight, no re-registration
+  useEffect(() => {
+    widgetStoreActions.setToolEnabled(
+      id,
+      STACK_TOGGLE_TOOL_ID,
+      isStacked && hasMultiSeries,
+    )
   }, [id, isStacked, hasMultiSeries])
 
   // Initialize store with default value only if not already configured