@carto/ps-react-ui 4.3.7 → 4.3.8

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, useState } from 'react'
+import { useEffect, useRef, useCallback } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { SearcherProps, SearcherFilterFn, SearcherState } from './types'
 import type { EchartWidgetData } from '../../echart/types'
@@ -40,33 +40,29 @@ export function Searcher({
   const inputRef = useRef<HTMLInputElement>(null)
   const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  // Read enabled state from widget store (set by SearcherToggle)
+  // 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 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, {
@@ -82,17 +78,12 @@ export function Searcher({
         // Return result directly (pipeline will handle Promise)
         return result
       },
-      config: {
-        searchText:
-          (getWidget(id)?.registeredTools?.find(
-            (tool) => tool.id === SEARCHER_TOOL_ID,
-          )?.config?.searchText as string) ?? '',
-      },
+      config: { searchText },
       disables: [LOCK_SELECTION_TOOL_ID],
     })
 
     return () => unregisterTool(id, SEARCHER_TOOL_ID)
-  }, [id, order, filter, registerTool, unregisterTool, enabled, getWidget])
+  }, [id, order, filter, registerTool, unregisterTool, enabled, searchText])
 
   // Update enabled flag when it changes
   useEffect(() => {
@@ -112,24 +103,15 @@ 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(() => {
-    if (enabled && inputRef.current) {
+    // Transition from disabled to enabled - focus input
+    if (enabled && !prevEnabledRef.current && inputRef.current) {
       inputRef.current.focus()
     }
-    if (!enabled) {
-      updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: '' })
-    }
-  }, [enabled, id, updateToolConfig])
+
+    prevEnabledRef.current = enabled
+  }, [enabled])
 
   // Cleanup debounce timeout on unmount
   useEffect(() => {
@@ -143,19 +125,19 @@ export function Searcher({
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = event.target.value
-      setSearchTextLocal(newValue)
+      setSearchText(newValue)
       debouncedUpdateConfig(newValue)
     },
-    [debouncedUpdateConfig],
+    [debouncedUpdateConfig, setSearchText],
   )
 
   const handleClear = useCallback(() => {
-    setSearchTextLocal('')
+    setSearchText('')
     updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: '' })
     if (inputRef.current) {
       inputRef.current.focus()
     }
-  }, [id, updateToolConfig])
+  }, [id, setSearchText, updateToolConfig])
 
   if (!enabled) {
     return null

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

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

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

@@ -1,7 +1,7 @@
 import { IconButton } from '@mui/material'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
-import type { StackToggleProps } from './types'
+import type { StackToggleProps, StackToggleState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import { GroupedBarChartIcon } from './grouped-bar-chart-icon'
@@ -34,17 +34,14 @@ export function StackToggle({
   Icon,
   IconButtonProps,
 }: StackToggleProps) {
-  const getWidget = useWidgetStore((state) => state.getWidget)
+  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 stackTool = useWidgetStore(
-    useShallow((state) => {
-      const tools = state.getWidget(id)?.registeredTools ?? []
-      return tools.find((tool) => tool.id === STACK_TOGGLE_TOOL_ID)
-    }),
+  const storeIsStacked = useWidgetStore(
+    useShallow((state) => state.getWidget<StackToggleState>(id)?.isStacked),
   )
 
   const option = useWidgetStore(
@@ -64,25 +61,15 @@ export function StackToggle({
 
   // If series already has stack defined, default to stacked=true
   const effectiveDefaultIsStacked = hasStackInSeries || defaultIsStacked
-  const isStacked =
-    (stackTool?.config?.stacked as boolean | undefined) ??
-    effectiveDefaultIsStacked
+  const isStacked = storeIsStacked ?? effectiveDefaultIsStacked
 
   // Register config tool on mount
   useEffect(() => {
-    const existingTool = getWidget(id)?.registeredTools?.find(
-      (tool) => tool.id === STACK_TOGGLE_TOOL_ID,
-    )
-
-    const initialStacked =
-      (existingTool?.config?.stacked as boolean | undefined) ??
-      effectiveDefaultIsStacked
-
     registerTool(id, {
       id: STACK_TOGGLE_TOOL_ID,
       type: 'config',
       order: 10,
-      enabled: initialStacked && hasMultiSeries,
+      enabled: isStacked && hasMultiSeries,
       fn: (currentConfig, toolConfig) => {
         const config = currentConfig as Record<string, unknown>
         const option = config.option as EchartOptionsProps | undefined
@@ -103,23 +90,26 @@ export function StackToggle({
 
         return { ...config, option: { ...option, series: updatedSeries } }
       },
-      config: { stacked: initialStacked },
+      config: { stacked: isStacked },
     })
     return () => unregisterTool(id, STACK_TOGGLE_TOOL_ID)
-  }, [
-    id,
-    registerTool,
-    unregisterTool,
-    effectiveDefaultIsStacked,
-    hasMultiSeries,
-    getWidget,
-  ])
+  }, [id, registerTool, unregisterTool, isStacked, hasMultiSeries])
+
+  // Sync tool enabled/config when state changes
+  useEffect(() => {
+    setToolEnabled(id, STACK_TOGGLE_TOOL_ID, isStacked && hasMultiSeries)
+    updateToolConfig(id, STACK_TOGGLE_TOOL_ID, { stacked: isStacked })
+  }, [id, isStacked, hasMultiSeries, setToolEnabled, updateToolConfig])
+
+  // Initialize store with default value only if not already configured
+  useEffect(() => {
+    if (storeIsStacked !== undefined) return
+    setWidget(id, { isStacked: effectiveDefaultIsStacked })
+  }, [effectiveDefaultIsStacked, id, setWidget, storeIsStacked])
 
   const handleToggle = useCallback(() => {
-    const newStacked = !isStacked
-    setToolEnabled(id, STACK_TOGGLE_TOOL_ID, newStacked && hasMultiSeries)
-    updateToolConfig(id, STACK_TOGGLE_TOOL_ID, { stacked: newStacked })
-  }, [isStacked, hasMultiSeries, id, setToolEnabled, updateToolConfig])
+    setWidget(id, { isStacked: !isStacked })
+  }, [isStacked, id, setWidget])
 
   const tooltipLabel = isStacked
     ? (labels?.unstacked ?? 'Disable stacking')

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

@@ -1,5 +1,7 @@
 import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
+import type { BaseWidgetState } from '../../stores/types'
+
 export interface StackToggleProps {
   /** Widget ID to update stack configuration in the widget store */
   id: string
@@ -19,3 +21,9 @@ export interface StackToggleProps {
   /** Custom icon to display */
   Icon?: ReactNode
 }
+
+export type StackToggleState<T = unknown> = BaseWidgetState<
+  T & {
+    isStacked?: boolean
+  }
+>

package/src/widgets/loader/loader.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useRef, useSyncExternalStore } from 'react'
 import type { WidgetLoaderProps } from './types'
 import { useWidgetStore } from '../stores/widget-store'
 import type { WrapperState } from '../wrapper'
@@ -14,6 +14,20 @@ export function WidgetLoader<T extends object = Record<string, unknown>>(
     (state) => state.executeConfigPipeline,
   )
 
+  const registeredTools = useSyncExternalStore(
+    useWidgetStore.subscribe,
+    () => useWidgetStore.getState().widgets[props.id]?.registeredTools,
+  )
+
+  const dataRef = useRef(props.data)
+  const configRef = useRef(props.config)
+  const isMountedRef = useRef(false)
+
+  useEffect(() => {
+    dataRef.current = props.data
+    configRef.current = props.config
+  })
+
   // Split into 3 effects for metadata and 1 for data pipeline:
   // Each property that can be modified independently gets its own effect to avoid
   // accidentally resetting other properties.
@@ -52,31 +66,18 @@ export function WidgetLoader<T extends object = Record<string, unknown>>(
     void executeToolPipeline(props.id, props.data)
   }, [props.id, props.data, executeToolPipeline])
 
-  // Effect 5: Re-execute pipelines when tool state changes (enabled/config)
+  // Effect 5: Re-execute pipelines when registered tools change
   useEffect(() => {
-    let prevTools = useWidgetStore.getState().widgets[props.id]?.registeredTools
-
-    const unsubscribe = useWidgetStore.subscribe((state) => {
-      const currentTools = state.widgets[props.id]?.registeredTools
-
-      // Only re-execute if tools array changed
-      if (currentTools !== prevTools) {
-        prevTools = currentTools
-        void executeToolPipeline(props.id, props.data)
-        if (props.config) {
-          void executeConfigPipeline(props.id, props.config)
-        }
-      }
-    })
+    if (!isMountedRef.current) {
+      isMountedRef.current = true
+      return
+    }
 
-    return unsubscribe
-  }, [
-    props.id,
-    props.data,
-    props.config,
-    executeToolPipeline,
-    executeConfigPipeline,
-  ])
+    void executeToolPipeline(props.id, dataRef.current)
+    if (configRef.current) {
+      void executeConfigPipeline(props.id, configRef.current)
+    }
+  }, [registeredTools, props.id, executeToolPipeline, executeConfigPipeline])
 
   return props.children
 }