@carto/ps-react-ui 4.4.3 → 4.5.1

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

@@ -4,13 +4,13 @@ import {
   ZoomInOutlined,
 } from '@mui/icons-material'
 import { useEffect, useCallback } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
 import type { ZoomToggleProps } from './types'
 import { styles } from './style'
 import { Tooltip } from '../../../components'
 import { getEChartZoomConfig } from '../../echart/utils'
 import type { EchartOptionsProps } from '../../echart/types'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 export const ZOOM_TOGGLE_TOOL_ID = 'zoom-toggle'
 
@@ -44,24 +44,18 @@ export function ZoomToggle({
   IconButtonProps,
 }: ZoomToggleProps) {
   const theme = useTheme()
-  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 zoomTool = useWidgetStore(
-    useShallow((state) => {
-      const tools = state.getWidget(id)?.registeredTools ?? []
-      return tools.find((tool) => tool.id === ZOOM_TOGGLE_TOOL_ID)
-    }),
-  )
 
-  const zoom = zoomTool?.enabled ?? defaultZoom
-  const zoomStart =
-    (zoomTool?.config?.start as number | undefined) ?? defaultZoomStart
-  const zoomEnd =
-    (zoomTool?.config?.end as number | undefined) ?? defaultZoomEnd
+  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,
+    }
+  })
 
   // Handle dataZoom event to update zoom range in tool config
   const handleDataZoom = useCallback(
@@ -79,21 +73,21 @@ export function ZoomToggle({
       const end = zoomEvent.end ?? zoomEvent.batch?.[0]?.end
 
       if (start !== undefined && end !== undefined) {
-        setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
-        updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
+        widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
+        widgetStoreActions.updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
           start,
           end,
         })
       }
     },
-    [id, setToolEnabled, updateToolConfig],
+    [id],
   )
 
-  // Register config tool on mount
+  // Register config tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    const existingTool = getWidget(id)?.registeredTools?.find(
-      (tool) => tool.id === ZOOM_TOGGLE_TOOL_ID,
-    )
+    const existingTool = widgetStoreActions
+      .getWidget(id)
+      ?.registeredTools?.find((tool) => tool.id === ZOOM_TOGGLE_TOOL_ID)
 
     const initialEnabled = existingTool?.enabled ?? defaultZoom
     const initialStart =
@@ -101,7 +95,7 @@ export function ZoomToggle({
     const initialEnd =
       (existingTool?.config?.end as number | undefined) ?? defaultZoomEnd
 
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: ZOOM_TOGGLE_TOOL_ID,
       type: 'config',
       order: 20,
@@ -160,31 +154,21 @@ export function ZoomToggle({
         end: initialEnd,
       },
     })
-    return () => unregisterTool(id, ZOOM_TOGGLE_TOOL_ID)
-  }, [
-    defaultZoom,
-    defaultZoomEnd,
-    defaultZoomStart,
-    getWidget,
-    handleDataZoom,
-    id,
-    registerTool,
-    theme,
-    unregisterTool,
-  ])
+    return () => widgetStoreActions.unregisterTool(id, ZOOM_TOGGLE_TOOL_ID)
+  }, [id, theme, handleDataZoom, defaultZoom, defaultZoomStart, defaultZoomEnd])
 
   const handleToggle = () => {
     const newZoom = !zoom
-    setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, newZoom)
-    updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
+    widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, newZoom)
+    widgetStoreActions.updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
       start: newZoom ? zoomStart : 0,
       end: newZoom ? zoomEnd : 100,
     })
   }
 
   const handleReset = () => {
-    setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
-    updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
+    widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
+    widgetStoreActions.updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
       start: defaultZoomStart,
       end: defaultZoomEnd,
     })

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

@@ -1,5 +1,5 @@
 import { Box, useTheme } from '@mui/material'
-import { useWidgetStore } from '../stores/widget-store'
+import { useWidgetSelector } from '../stores/use-widget-selector'
 import { styles } from './style'
 import type { CategoryUIProps, CategoryWidgetState } from './types'
 import {
@@ -8,44 +8,42 @@ import {
   CategoryRowOther,
   CategoryLegend,
 } from './components'
-import { useShallow } from 'zustand/shallow'
 import { useState } from 'react'
 import { defaultFormatter, defaultLabelFormatter } from '../utils/formatter'
+import { useWidgetRef } from '../../hooks'
 
 /**
  * Renders a category widget displaying horizontal bars for categorical data with support for single and multi-series layouts, selection, and overflow grouping.
  */
 export function CategoryUI({ id }: CategoryUIProps) {
+  const { ref } = useWidgetRef<HTMLDivElement>(id)
   const theme = useTheme()
-  const _formatter = useWidgetStore(
-    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.formatter),
-  )
-  const _labelFormatter = useWidgetStore(
-    useShallow(
-      (state) => state.getWidget<CategoryWidgetState>(id)?.labelFormatter,
-    ),
-  )
-  const _series = useWidgetStore(
-    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.series),
-  )
-  const data = useWidgetStore(
-    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.data),
-  )
-  const maxItems = useWidgetStore(
-    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.maxItems),
-  )
-  const labels = useWidgetStore(
-    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.labels),
-  )
-  const onRowClick = useWidgetStore(
-    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.onRowClick),
-  )
-  const selected = useWidgetStore(
-    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.selected),
-  )
-  const max = useWidgetStore(
-    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.max),
-  )
+
+  // Single consolidated subscription instead of 9 separate ones.
+  const {
+    _formatter,
+    _labelFormatter,
+    _series,
+    data,
+    maxItems,
+    labels,
+    onRowClick,
+    selected,
+    max,
+  } = useWidgetSelector(id, (w) => {
+    const cw = w as CategoryWidgetState | undefined
+    return {
+      _formatter: cw?.formatter,
+      _labelFormatter: cw?.labelFormatter,
+      _series: cw?.series,
+      data: cw?.data,
+      maxItems: cw?.maxItems,
+      labels: cw?.labels,
+      onRowClick: cw?.onRowClick,
+      selected: cw?.selected,
+      max: cw?.max,
+    }
+  })
 
   const formatter = _formatter ?? defaultFormatter
   const labelFormatter = _labelFormatter ?? defaultLabelFormatter
@@ -89,6 +87,7 @@ export function CategoryUI({ id }: CategoryUIProps) {
 
   return (
     <Box
+      ref={ref}
       sx={{
         ...styles.root,
       }}

package/src/widgets/category/style.ts

@@ -5,6 +5,7 @@ export const styles = {
     display: 'flex',
     flexDirection: 'column',
     position: 'relative',
+    width: '100%',
   },
   list: {
     display: 'flex',

package/src/widgets/echart/echart-ui.test.tsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react'
 import { EchartUI } from './echart-ui'
 import type { EChartsOption } from 'echarts'
 import * as echarts from 'echarts'
+import { resetSharedResizeObserver } from './shared-resize-observer'
 
 // Mock echarts module
 vi.mock('echarts', () => {
@@ -36,6 +37,7 @@ describe('EchartUI', () => {
     disconnect: ReturnType<typeof vi.fn>
     unobserve: ReturnType<typeof vi.fn>
   }
+  let resizeObserverCallback: ResizeObserverCallback | undefined
 
   const defaultProps = {
     id: 'test-echart',
@@ -73,6 +75,9 @@ describe('EchartUI', () => {
       mockChart as unknown as echarts.ECharts,
     )
 
+    // Reset the shared observer so each test gets a fresh one using the mock
+    resetSharedResizeObserver()
+
     // Mock ResizeObserver
     mockResizeObserver = {
       observe: vi.fn(),
@@ -80,7 +85,12 @@ describe('EchartUI', () => {
       unobserve: vi.fn(),
     }
 
+    resizeObserverCallback = undefined
+
     global.ResizeObserver = class {
+      constructor(callback: ResizeObserverCallback) {
+        resizeObserverCallback = callback
+      }
       observe = mockResizeObserver.observe
       disconnect = mockResizeObserver.disconnect
       unobserve = mockResizeObserver.unobserve
@@ -245,32 +255,26 @@ describe('EchartUI', () => {
     )
   })
 
-  test('disconnects ResizeObserver on unmount', () => {
+  test('unobserves element from shared ResizeObserver on unmount', () => {
     const { unmount } = render(
       <EchartUI {...defaultProps} option={basicOption} />,
     )
 
     unmount()
 
-    expect(mockResizeObserver.disconnect).toHaveBeenCalled()
+    // The shared observer calls unobserve() for the specific element, not disconnect()
+    expect(mockResizeObserver.unobserve).toHaveBeenCalled()
   })
 
   test('calls resize on chart when ResizeObserver triggers', () => {
-    let resizeCallback: ResizeObserverCallback
-
-    global.ResizeObserver = class {
-      constructor(callback: ResizeObserverCallback) {
-        resizeCallback = callback
-      }
-      observe = mockResizeObserver.observe
-      disconnect = mockResizeObserver.disconnect
-      unobserve = mockResizeObserver.unobserve
-    } as unknown as typeof ResizeObserver
-
     render(<EchartUI {...defaultProps} option={basicOption} />)
 
-    // Trigger resize callback
-    resizeCallback!([], mockResizeObserver as unknown as ResizeObserver)
+    // Trigger the shared observer's callback with a mock entry targeting the chart element
+    const chartElement = document.getElementById(defaultProps.id)!
+    const entries: ResizeObserverEntry[] = [
+      { target: chartElement } as unknown as ResizeObserverEntry,
+    ]
+    resizeObserverCallback!(entries, {} as ResizeObserver)
 
     expect(mockChart.resize).toHaveBeenCalled()
   })
@@ -517,6 +521,6 @@ describe('EchartUI', () => {
     unmount()
 
     expect(mockChart.dispose).toHaveBeenCalled()
-    expect(mockResizeObserver.disconnect).toHaveBeenCalled()
+    expect(mockResizeObserver.unobserve).toHaveBeenCalled()
   })
 })

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

@@ -2,6 +2,7 @@ import { useEffect, useRef, useImperativeHandle } from 'react'
 import * as echarts from 'echarts'
 import type { EchartUIProps } from './types'
 import { useWidgetRef } from '../../hooks'
+import { observeResize } from './shared-resize-observer'
 
 /**
  * Presentational component that initializes and manages an Apache ECharts instance.
@@ -16,7 +17,6 @@ export function EchartUI(props: EchartUIProps) {
   const { ref: chartRef, instance: chartInstanceRef } =
     useWidgetRef<HTMLDivElement>(id)
   const chartInstance = useRef<echarts.ECharts>(null)
-  const resizeObserverRef = useRef<ResizeObserver | null>(null)
 
   useImperativeHandle(ref, () => chartInstance.current!, [])
 
@@ -45,19 +45,13 @@ export function EchartUI(props: EchartUIProps) {
     })
   }, [option])
 
-  // Handle resize using ResizeObserver
+  // Handle resize using shared ResizeObserver (single instance for all charts)
   useEffect(() => {
-    const handleResize = () => {
-      chartInstance.current?.resize()
-    }
-
-    resizeObserverRef.current = new ResizeObserver(handleResize)
-    resizeObserverRef.current.observe(chartRef.current!)
+    if (!chartRef.current) return
 
-    return () => {
-      resizeObserverRef.current?.disconnect()
-      resizeObserverRef.current = null
-    }
+    return observeResize(chartRef.current, () => {
+      chartInstance.current?.resize()
+    })
   }, [chartRef])
 
   useEffect(() => {

package/src/widgets/echart/echart.tsx

@@ -5,8 +5,7 @@ import type {
   EchartOptionsProps,
 } from './types'
 import { EchartUI } from './echart-ui'
-import { useWidgetStore } from '../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../stores/use-widget-selector'
 import { useMemo } from 'react'
 
 /**
@@ -16,31 +15,18 @@ import { useMemo } from 'react'
  * Transforms widget data into ECharts dataset format and delegates rendering to {@link EchartUI}.
  */
 export function Echart(props: EchartProps) {
-  const id = useWidgetStore(
-    useShallow((state) => state.getWidget<EchartWidgetState>(props.id)?.id),
-  )
-
-  const data = useWidgetStore(
-    useShallow(
-      (state) =>
-        state.getWidget<EchartWidgetState>(props.id)?.data as
-          | EchartWidgetData
-          | undefined,
-    ),
-  )
-
-  const widgetOption = useWidgetStore(
-    useShallow((state) => state.getWidget<EchartWidgetState>(props.id)?.option),
-  )
-
-  const onEvents = useWidgetStore(
-    useShallow(
-      (state) => state.getWidget<EchartWidgetState>(props.id)?.onEvents,
-    ),
-  )
-
-  const init = useWidgetStore(
-    (state) => state.getWidget<EchartWidgetState>(props.id)?.init,
+  // Single consolidated subscription instead of 5 separate ones.
+  const { id, data, widgetOption, onEvents, init } = useWidgetSelector(
+    props.id,
+    (w) => ({
+      id: w?.id,
+      data: (w as EchartWidgetState | undefined)?.data as
+        | EchartWidgetData
+        | undefined,
+      widgetOption: (w as EchartWidgetState | undefined)?.option,
+      onEvents: (w as EchartWidgetState | undefined)?.onEvents,
+      init: (w as EchartWidgetState | undefined)?.init,
+    }),
   )
 
   // Memoize dataset transformation to avoid re-computing on every render

package/src/widgets/echart/shared-resize-observer.ts

@@ -0,0 +1,45 @@
+/**
+ * Shared ResizeObserver singleton for all ECharts instances.
+ *
+ * Instead of creating 100+ individual ResizeObserver instances (one per chart),
+ * this module provides a single shared observer that efficiently handles resize
+ * callbacks for all registered elements.
+ */
+
+type ResizeCallback = () => void
+
+const callbacks = new Map<Element, ResizeCallback>()
+
+let observer: ResizeObserver | null = null
+
+function getObserver(): ResizeObserver {
+  observer ??= new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const callback = callbacks.get(entry.target)
+      callback?.()
+    }
+  })
+  return observer
+}
+
+export function observeResize(
+  element: Element,
+  callback: ResizeCallback,
+): () => void {
+  callbacks.set(element, callback)
+  getObserver().observe(element)
+
+  return () => {
+    callbacks.delete(element)
+    getObserver().unobserve(element)
+  }
+}
+
+/** Reset the shared observer (for testing only). */
+export function resetSharedResizeObserver(): void {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+  callbacks.clear()
+}

package/src/widgets/error/error.tsx

@@ -1,6 +1,5 @@
 import { Alert, AlertTitle } from '@mui/material'
-import { useWidgetStore } from '../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../stores/use-widget-selector'
 import type { WidgetErrorProps } from './types'
 
 /**
@@ -19,13 +18,12 @@ export function WidgetError({
   title: titleProp,
   description,
 }: WidgetErrorProps) {
-  const isLoading = useWidgetStore(
-    useShallow((state) => state.widgets[id]?.isLoading),
-  )
-  const isFetching = useWidgetStore(
-    useShallow((state) => state.widgets[id]?.isFetching),
-  )
-  const error = useWidgetStore(useShallow((state) => state.widgets[id]?.error))
+  // Single consolidated subscription instead of 3 separate ones.
+  const { isLoading, isFetching, error } = useWidgetSelector(id, (w) => ({
+    isLoading: w?.isLoading,
+    isFetching: w?.isFetching,
+    error: w?.error,
+  }))
 
   // Don't show error during loading/fetching states
   if (isLoading || isFetching) {

package/src/widgets/formula/components/prefix.tsx

@@ -1,16 +1,14 @@
 import { type FormulaWidgetState, type ValueProps } from '../types'
-import { useWidgetStore } from '../../stores/widget-store'
 import { Item } from './item'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 /**
  * Renders the prefix content (e.g., currency symbol) before a formula value, if defined in the data item.
  */
 export function Prefix({ id, index = 0, ...props }: ValueProps) {
-  const prefix = useWidgetStore(
-    useShallow(
-      (state) => state.getWidget<FormulaWidgetState>(id)?.data?.[index]?.prefix,
-    ),
+  const prefix = useWidgetSelector(
+    id,
+    (w) => (w as FormulaWidgetState | undefined)?.data?.[index]?.prefix,
   )
 
   if (!prefix) {

package/src/widgets/formula/components/row.tsx

@@ -1,15 +1,15 @@
 import { Box } from '@mui/material'
 import { styles } from '../style'
 import type { FormulaWidgetState, RowProps } from '../types'
-import { useWidgetStore } from '../../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 /**
  * Iterates over the widget's data items and renders a row for each one using render props.
  */
 export function Row(props: RowProps) {
-  const data = useWidgetStore(
-    useShallow((state) => state.getWidget<FormulaWidgetState>(props.id)?.data),
+  const data = useWidgetSelector(
+    props.id,
+    (w) => (w as FormulaWidgetState | undefined)?.data,
   )
 
   return data?.map((_, index) => {

package/src/widgets/formula/components/series.tsx

@@ -1,16 +1,14 @@
 import { Avatar } from '@mui/material'
 import type { FormulaWidgetState, ValueProps } from '../types'
-import { useWidgetStore } from '../../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 /**
  * Renders a colored avatar badge showing the first letter of the series name for multi-value formula widgets.
  */
 export function Series({ id, index = 0 }: Pick<ValueProps, 'id' | 'index'>) {
-  const serie = useWidgetStore(
-    useShallow(
-      (state) => state.getWidget<FormulaWidgetState>(id)?.series?.[index],
-    ),
+  const serie = useWidgetSelector(
+    id,
+    (w) => (w as FormulaWidgetState | undefined)?.series?.[index],
   )
   if (!serie) {
     return null

package/src/widgets/formula/components/suffix.tsx

@@ -1,17 +1,15 @@
 import { type FormulaWidgetState, type ValueProps } from '../types'
-import { useWidgetStore } from '../../stores/widget-store'
 import { Item } from './item'
 import type { Theme } from '@mui/material'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 /**
  * Renders the suffix content (e.g., unit label) after a formula value, if defined in the data item.
  */
 export function Suffix({ id, index = 0, ...props }: ValueProps) {
-  const suffix = useWidgetStore(
-    useShallow(
-      (state) => state.getWidget<FormulaWidgetState>(id)?.data?.[index]?.suffix,
-    ),
+  const suffix = useWidgetSelector(
+    id,
+    (w) => (w as FormulaWidgetState | undefined)?.data?.[index]?.suffix,
   )
 
   if (!suffix) {

package/src/widgets/formula/components/value.tsx

@@ -1,27 +1,20 @@
 import { type FormulaWidgetState, type ValueProps } from '../types'
-import { useWidgetStore } from '../../stores/widget-store'
 import { Item } from './item'
-import { useShallow } from 'zustand/shallow'
 import { defaultFormatter } from '../../utils/formatter'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 /**
  * Displays the formatted numeric value for a formula widget data item, applying the widget's formatter and color.
  */
 export function Value({ id, index = 0, ...props }: ValueProps) {
-  const value = useWidgetStore(
-    useShallow(
-      (state) => state.getWidget<FormulaWidgetState>(id)?.data?.[index]?.value,
-    ),
-  )
-  const color = useWidgetStore(
-    useShallow(
-      (state) => state.getWidget<FormulaWidgetState>(id)?.data?.[index]?.color,
-    ),
-  )
-  const formatter =
-    useWidgetStore(
-      useShallow((state) => state.getWidget<FormulaWidgetState>(id)?.formatter),
-    ) ?? defaultFormatter
+  const { value, color, formatter } = useWidgetSelector(id, (w) => {
+    const widget = w as FormulaWidgetState | undefined
+    return {
+      value: widget?.data?.[index]?.value,
+      color: widget?.data?.[index]?.color,
+      formatter: widget?.formatter ?? defaultFormatter,
+    }
+  })
 
   return (
     <Item TypographyProps={{ color }} {...props}>