@carto/ps-react-ui 4.5.1 → 4.6.1

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

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

@@ -5,7 +5,7 @@ import {
 } from '@mui/icons-material'
 import { useEffect, useCallback } from 'react'
 import { widgetStoreActions } from '../../stores/widget-store'
-import type { ZoomToggleProps } from './types'
+import type { ZoomToggleProps, ZoomState } from './types'
 import { styles } from './style'
 import { Tooltip } from '../../../components'
 import { getEChartZoomConfig } from '../../echart/utils'
@@ -20,6 +20,10 @@ export const ZOOM_TOGGLE_TOOL_ID = 'zoom-toggle'
  * Registers as a config pipeline tool so that zoom configuration is automatically
  * re-applied when the base config is updated (e.g., by WidgetLoader).
  *
+ * Zoom state (enabled, range) is stored in the widget store root, and the tool
+ * derives its `enabled` flag from the store. This keeps state accessible across
+ * component instances.
+ *
  * When zoom is active, displays an inline reset button to disable zoom.
  * Only intended for use in fullscreen ToolbarActions for bar and histogram widgets.
  *
@@ -45,19 +49,26 @@ export function ZoomToggle({
 }: ZoomToggleProps) {
   const theme = useTheme()
 
-  const { zoom, zoomStart, zoomEnd } = useWidgetSelector(id, (w) => {
-    const zoomTool = w?.registeredTools?.find(
-      (tool) => tool.id === ZOOM_TOGGLE_TOOL_ID,
-    )
-    return {
-      zoom: zoomTool?.enabled ?? defaultZoom,
-      zoomStart:
-        (zoomTool?.config?.start as number | undefined) ?? defaultZoomStart,
-      zoomEnd: (zoomTool?.config?.end as number | undefined) ?? defaultZoomEnd,
+  // Read zoom state from widget store root — single source of truth
+  const { zoom, zoomStart, zoomEnd } = useWidgetSelector(id, (w) => ({
+    zoom: (w as ZoomState | undefined)?.zoom ?? defaultZoom,
+    zoomStart: (w as ZoomState | undefined)?.zoomStart ?? defaultZoomStart,
+    zoomEnd: (w as ZoomState | undefined)?.zoomEnd ?? defaultZoomEnd,
+  }))
+
+  // Initialize store with default values on mount
+  useEffect(() => {
+    const current = widgetStoreActions.getWidget<ZoomState>(id)
+    if (current?.zoom === undefined) {
+      widgetStoreActions.setWidget(id, {
+        zoom: defaultZoom,
+        zoomStart: defaultZoomStart,
+        zoomEnd: defaultZoomEnd,
+      })
     }
-  })
+  }, [id, defaultZoom, defaultZoomStart, defaultZoomEnd])
 
-  // Handle dataZoom event to update zoom range in tool config
+  // Handle dataZoom event — update store (source of truth)
   const handleDataZoom = useCallback(
     (event: unknown) => {
       const zoomEvent = event as {
@@ -73,41 +84,32 @@ export function ZoomToggle({
       const end = zoomEvent.end ?? zoomEvent.batch?.[0]?.end
 
       if (start !== undefined && end !== undefined) {
-        widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
-        widgetStoreActions.updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
-          start,
-          end,
+        widgetStoreActions.setWidget(id, {
+          zoom: true,
+          zoomStart: start,
+          zoomEnd: end,
         })
       }
     },
     [id],
   )
 
-  // Register config tool with all reactive deps — store's no-op detection handles performance
+  // Register config tool once — fn reads zoom range from the store at execution time.
   useEffect(() => {
-    const existingTool = widgetStoreActions
-      .getWidget(id)
-      ?.registeredTools?.find((tool) => tool.id === ZOOM_TOGGLE_TOOL_ID)
-
-    const initialEnabled = existingTool?.enabled ?? defaultZoom
-    const initialStart =
-      (existingTool?.config?.start as number | undefined) ?? defaultZoomStart
-    const initialEnd =
-      (existingTool?.config?.end as number | undefined) ?? defaultZoomEnd
-
     widgetStoreActions.registerTool(id, {
       id: ZOOM_TOGGLE_TOOL_ID,
       type: 'config',
       order: 20,
-      enabled: initialEnabled,
-      fn: (currentConfig, toolConfig) => {
+      enabled: defaultZoom,
+      fn: (currentConfig) => {
         const config = currentConfig as Record<string, unknown>
         const option = config.option as EchartOptionsProps | undefined
         const currentOnEvents =
           (config.onEvents as Record<string, unknown> | undefined) ?? {}
 
-        const start = (toolConfig?.start as number) ?? 0
-        const end = (toolConfig?.end as number) ?? 100
+        const widget = widgetStoreActions.getWidget<ZoomState>(id)
+        const start = widget?.zoomStart ?? 0
+        const end = widget?.zoomEnd ?? 100
 
         const legend = option?.legend as { show?: boolean } | undefined
         const hasLegend = legend?.show !== false && legend !== undefined
@@ -135,8 +137,6 @@ export function ZoomToggle({
 
         const gridBottom = currentGridBottom + sliderHeight + sliderGap
 
-        const onEventsWithoutDataZoom = { ...currentOnEvents }
-        delete onEventsWithoutDataZoom.dataZoom
         const onEvents = { ...currentOnEvents, dataZoom: handleDataZoom }
 
         return {
@@ -149,28 +149,36 @@ export function ZoomToggle({
           onEvents,
         }
       },
-      config: {
-        start: initialStart,
-        end: initialEnd,
-      },
     })
     return () => widgetStoreActions.unregisterTool(id, ZOOM_TOGGLE_TOOL_ID)
   }, [id, theme, handleDataZoom, defaultZoom, defaultZoomStart, defaultZoomEnd])
 
+  // Sync enabled from store — lightweight, no re-registration
+  useEffect(() => {
+    widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, zoom)
+  }, [id, zoom])
+
+  // Trigger pipeline when zoom range changes — fn reads from store at execution time,
+  // but the pipeline only re-runs when registeredTools reference changes.
+  // setToolEnabled handles the zoom on/off case, this handles range-only changes.
+  useEffect(() => {
+    widgetStoreActions.triggerToolPipeline(id)
+  }, [id, zoomStart, zoomEnd])
+
   const handleToggle = () => {
     const newZoom = !zoom
-    widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, newZoom)
-    widgetStoreActions.updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
-      start: newZoom ? zoomStart : 0,
-      end: newZoom ? zoomEnd : 100,
+    widgetStoreActions.setWidget(id, {
+      zoom: newZoom,
+      zoomStart: newZoom ? zoomStart : 0,
+      zoomEnd: newZoom ? zoomEnd : 100,
     })
   }
 
   const handleReset = () => {
-    widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
-    widgetStoreActions.updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
-      start: defaultZoomStart,
-      end: defaultZoomEnd,
+    widgetStoreActions.setWidget(id, {
+      zoom: true,
+      zoomStart: defaultZoomStart,
+      zoomEnd: defaultZoomEnd,
     })
   }
 

package/src/widgets/category/category-ui.tsx

@@ -2,12 +2,10 @@ import { Box, useTheme } from '@mui/material'
 import { useWidgetSelector } from '../stores/use-widget-selector'
 import { styles } from './style'
 import type { CategoryUIProps, CategoryWidgetState } from './types'
-import {
-  CategoryRowSingle,
-  CategoryRowMulti,
-  CategoryRowOther,
-  CategoryLegend,
-} from './components'
+import { CategoryRowSingle } from './components/category-row-single'
+import { CategoryRowMulti } from './components/category-row-multi'
+import { CategoryRowOther } from './components/category-row-other'
+import { CategoryLegend } from './components/category-legend'
 import { useState } from 'react'
 import { defaultFormatter, defaultLabelFormatter } from '../utils/formatter'
 import { useWidgetRef } from '../../hooks'

package/src/widgets/category/index.ts

@@ -2,21 +2,20 @@ export { CategoryUI } from './category-ui'
 export { CategorySkeleton } from './skeleton'
 export { categoryConfig, categoryDownloadConfig } from './config'
 
-export {
-  CategoryBar,
-  CategoryRowSingle,
-  CategoryRowMulti,
-  CategoryLegend,
-  CategoryRowOther,
-} from './components'
+export { CategoryBar } from './components/category-bar'
+export type { CategoryBarProps } from './components/category-bar'
 
-export type {
-  CategoryBarProps,
-  CategoryRowSingleProps,
-  CategoryRowMultiProps,
-  CategoryLegendProps,
-  CategoryRowOtherProps,
-} from './components'
+export { CategoryRowSingle } from './components/category-row-single'
+export type { CategoryRowSingleProps } from './components/category-row-single'
+
+export { CategoryRowMulti } from './components/category-row-multi'
+export type { CategoryRowMultiProps } from './components/category-row-multi'
+
+export { CategoryRowOther } from './components/category-row-other'
+export type { CategoryRowOtherProps } from './components/category-row-other'
+
+export { CategoryLegend } from './components/category-legend'
+export type { CategoryLegendProps } from './components/category-legend'
 
 export type {
   CategoryUIProps,