@carto/ps-react-ui 4.3.4 → 4.3.6

package/dist/widgets/timeseries.js

@@ -2,7 +2,7 @@ import { jsxs as c, jsx as n } from "react/jsx-runtime";
 import { c as b } from "react/compiler-runtime";
 import "react";
 import "echarts";
-import "../widget-store-CB6Trp_0.js";
+import "../widget-store-Dn0Bnc4h.js";
 import "zustand/shallow";
 import { g as k } from "../options-D9wflre6.js";
 import { m as w } from "../utils-D3-eQyDR.js";
@@ -11,7 +11,7 @@ import { Box as s, Skeleton as o } from "@mui/material";
 import "@mui/icons-material";
 import "react-markdown";
 import { d as g, a as d } from "../exports-Cr43OCul.js";
-import "../lasso-tool-wFqOD6wk.js";
+import "../lasso-tool-BctzdzBu.js";
 import "../cjs-D4KH3azB.js";
 import "@dnd-kit/core";
 import "@dnd-kit/sortable";

package/dist/widgets/wrapper.js

@@ -3,10 +3,10 @@ import { c as _ } from "react/compiler-runtime";
 import { Box as O, IconButton as L, MenuItem as P, ListItemIcon as j, ListItemText as z, Menu as D, Typography as H, LinearProgress as N, AccordionSummary as G, AccordionDetails as U, Accordion as V } from "@mui/material";
 import { MoreVert as q } from "@mui/icons-material";
 import { useState as J, useEffect as K } from "react";
-import "../lasso-tool-wFqOD6wk.js";
+import "../lasso-tool-BctzdzBu.js";
 import "../cjs-D4KH3azB.js";
 import { S as Q } from "../smart-tooltip-BEtBaIdz.js";
-import { u as T } from "../widget-store-CB6Trp_0.js";
+import { u as T } from "../widget-store-Dn0Bnc4h.js";
 import { useShallow as R } from "zustand/shallow";
 const A = {
   root: {

package/dist/widgets.js

@@ -1,7 +1,7 @@
-import { u as r } from "./widget-store-CB6Trp_0.js";
-import { u as W } from "./use-widget-ref-B0aNCANx.js";
-import { W as s } from "./no-data-C54XJt13.js";
-import { W as d } from "./error-B2IJ9d2h.js";
+import { u as r } from "./widget-store-Dn0Bnc4h.js";
+import { u as W } from "./use-widget-ref-B8x4sHIj.js";
+import { W as s } from "./no-data-jdlbMef0.js";
+import { W as d } from "./error-piB8FwYO.js";
 import { W as i } from "./note-t51drNe0.js";
 export {
   d as WidgetError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.3.4",
+  "version": "4.3.6",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {

package/src/components/lasso-tool/lasso-tool.tsx

@@ -131,7 +131,7 @@ function LassoToolsUIAction({
 }
 
 function Options({
-  TriggerProps: { Icon = <ArrowDropDown />, sx } = {},
+  TriggerProps = {},
   MenuProps,
   children,
 }: {
@@ -142,6 +142,9 @@ function Options({
   MenuProps?: Partial<ComponentProps<typeof Menu>>
   children: (props: OptionsChildrenProps) => JSX.Element
 }) {
+  const { Icon, sx } = TriggerProps
+  const IconNode = Icon ?? <ArrowDropDown />
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
 
   const open = Boolean(anchorEl)
@@ -163,7 +166,7 @@ function Options({
         }}
         onClick={handleToggle}
       >
-        {Icon}
+        {IconNode}
       </IconButton>
       <Menu
         id='lasso-menu'

package/src/widgets/actions/index.ts

@@ -15,7 +15,7 @@ export {
 export type { RelativeDataProps } from './relative-data/types'
 
 /* Zoom Toggle Widget */
-export { ZoomToggle } from './zoom-toggle/zoom-toggle'
+export { ZoomToggle, ZOOM_TOGGLE_TOOL_ID } from './zoom-toggle/zoom-toggle'
 export type {
   ZoomToggleProps,
   ZoomState,
@@ -23,7 +23,7 @@ export type {
 } from './zoom-toggle/types'
 
 /* Stack Toggle Widget */
-export { StackToggle } from './stack-toggle/stack-toggle'
+export { StackToggle, STACK_TOGGLE_TOOL_ID } from './stack-toggle/stack-toggle'
 export type { StackToggleProps, StackToggleState } from './stack-toggle/types'
 
 /* Searcher Toggle Widget */

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

@@ -1,6 +1,6 @@
 import { describe, test, expect, beforeEach } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { StackToggle } from './stack-toggle'
+import { StackToggle, STACK_TOGGLE_TOOL_ID } from './stack-toggle'
 import { useWidgetStore } from '../../stores/widget-store'
 import { DEFAULT_STACK_GROUP } from '../../echart/const'
 
@@ -113,19 +113,28 @@ describe('StackToggle', () => {
     expect((widget as { isStacked?: boolean })?.isStacked).toBe(true)
   })
 
-  test('updates EChart series options when toggling to stacked', () => {
-    // setupMultiSeriesWidget already ran in beforeEach
+  test('applies stack to EChart series via config pipeline when toggling to stacked', async () => {
     render(<StackToggle id={widgetId} />)
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
+    // Run the config pipeline to apply the stack tool's transformation
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
     const widget = useWidgetStore.getState().getWidget(widgetId)
     const series = (widget as { option?: { series?: { stack?: string }[] } })
       ?.option?.series?.[0]
     expect(series?.stack).toBe(DEFAULT_STACK_GROUP)
   })
 
-  test('removes stack from EChart series when toggling to unstacked', () => {
+  test('removes stack from EChart series via config pipeline when toggling to unstacked', async () => {
     useWidgetStore.getState().setWidget(widgetId, {
       option: {
         series: [
@@ -141,13 +150,23 @@ describe('StackToggle', () => {
     // First click unstacks (since series has stack, it starts stacked)
     fireEvent.click(button)
 
+    // Run the config pipeline — tool is disabled when unstacked, so stack is removed
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
     const widget = useWidgetStore.getState().getWidget(widgetId)
     const series = (widget as { option?: { series?: { stack?: string }[] } })
       ?.option?.series?.[0]
     expect(series?.stack).toBeUndefined()
   })
 
-  test('updates multiple series when toggling stack', () => {
+  test('applies stack to multiple series via config pipeline', async () => {
     useWidgetStore.getState().setWidget(widgetId, {
       option: {
         series: [
@@ -162,6 +181,16 @@ describe('StackToggle', () => {
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+          { name: 'Series 3', type: 'bar' },
+        ],
+      },
+    })
+
     const widget = useWidgetStore.getState().getWidget(widgetId)
     const seriesArray = (
       widget as { option?: { series?: { stack?: string }[] } }
@@ -173,7 +202,7 @@ describe('StackToggle', () => {
     })
   })
 
-  test('uses default stack group when re-stacking after unstacking', () => {
+  test('preserves custom stack group via config pipeline', async () => {
     const customStackGroup = 'custom-group'
     useWidgetStore.getState().setWidget(widgetId, {
       option: {
@@ -187,11 +216,20 @@ describe('StackToggle', () => {
     render(<StackToggle id={widgetId} />)
     const button = screen.getByRole('button')
 
-    // Toggle off then on - re-stacking uses default stack group
+    // Toggle off then on
     fireEvent.click(button) // unstacked
     fireEvent.click(button) // stacked again
 
-    void waitFor(() => {
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar', stack: customStackGroup },
+          { name: 'Series 2', type: 'bar', stack: customStackGroup },
+        ],
+      },
+    })
+
+    await waitFor(() => {
       const widget = useWidgetStore.getState().getWidget(widgetId)
       const series = (widget as { option?: { series?: { stack?: string }[] } })
         ?.option?.series?.[0]
@@ -238,7 +276,75 @@ describe('StackToggle', () => {
     expect(container.firstChild).toBeNull()
   })
 
-  test('preserves other option properties when updating series', () => {
+  test('config tool re-applies stack when config pipeline re-runs', async () => {
+    // Start with stacked widget
+    useWidgetStore.getState().setWidget(widgetId, {
+      isStacked: true,
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar', stack: DEFAULT_STACK_GROUP },
+          { name: 'Series 2', type: 'bar', stack: DEFAULT_STACK_GROUP },
+        ],
+      },
+    })
+
+    render(<StackToggle id={widgetId} defaultIsStacked />)
+
+    // Simulate loader running config pipeline with base config (no stack)
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
+    // Stack should be re-applied by the config tool
+    await waitFor(() => {
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const series = (widget as { option?: { series?: { stack?: string }[] } })
+        ?.option?.series
+      expect(series?.[0]?.stack).toBe(DEFAULT_STACK_GROUP)
+      expect(series?.[1]?.stack).toBe(DEFAULT_STACK_GROUP)
+    })
+  })
+
+  test('config tool does not apply stack when unstacked and pipeline re-runs', async () => {
+    // Start with unstacked widget
+    useWidgetStore.getState().setWidget(widgetId, {
+      isStacked: false,
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
+    render(<StackToggle id={widgetId} />)
+
+    // Run config pipeline with base config
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
+    // Stack should NOT be applied since isStacked is false (tool disabled)
+    await waitFor(() => {
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const series = (widget as { option?: { series?: { stack?: string }[] } })
+        ?.option?.series
+      expect(series?.[0]?.stack).toBeUndefined()
+      expect(series?.[1]?.stack).toBeUndefined()
+    })
+  })
+
+  test('preserves other option properties via config pipeline', async () => {
     useWidgetStore.getState().setWidget(widgetId, {
       option: {
         title: { text: 'My Chart' },
@@ -254,6 +360,17 @@ describe('StackToggle', () => {
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        title: { text: 'My Chart' },
+        xAxis: { type: 'category' },
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
     const widget = useWidgetStore.getState().getWidget(widgetId)
     const option = (
       widget as {
@@ -267,4 +384,21 @@ describe('StackToggle', () => {
     expect(option?.title?.text).toBe('My Chart')
     expect(option?.xAxis?.type).toBe('category')
   })
+
+  test('registers config tool on mount and unregisters on unmount', () => {
+    const { unmount } = render(<StackToggle id={widgetId} />)
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tools = widget?.registeredTools ?? []
+    const stackTool = tools.find((t) => t.id === STACK_TOGGLE_TOOL_ID)
+    expect(stackTool).toBeDefined()
+    expect(stackTool?.type).toBe('config')
+
+    unmount()
+
+    const widgetAfter = useWidgetStore.getState().getWidget(widgetId)
+    const toolsAfter = widgetAfter?.registeredTools ?? []
+    const stackToolAfter = toolsAfter.find((t) => t.id === STACK_TOGGLE_TOOL_ID)
+    expect(stackToolAfter).toBeUndefined()
+  })
 })

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

@@ -8,13 +8,16 @@ import { GroupedBarChartIcon } from './grouped-bar-chart-icon'
 import { getEChartStackConfig } from '../../echart/utils'
 import { DEFAULT_STACK_GROUP } from '../../echart/const'
 import type { EchartWidgetState } from '../../echart/types'
+import type { EchartOptionsProps } from '../../echart/types'
 import { useShallow } from 'zustand/shallow'
 
+export const STACK_TOGGLE_TOOL_ID = 'stack-toggle'
+
 /**
  * Widget action to toggle stacking behavior in ECharts bar and histogram widgets.
  *
- * Stores the stack state in the widget store and updates the ECharts option
- * using getEChartStackConfig to apply stacking to all series.
+ * Registers as a config pipeline tool so that stack configuration is automatically
+ * re-applied when the base config is updated (e.g., by WidgetLoader).
  *
  * @example
  * ```tsx
@@ -32,93 +35,81 @@ export function StackToggle({
   IconButtonProps,
 }: StackToggleProps) {
   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 storeIsStacked = useWidgetStore(
     useShallow((state) => state.getWidget<StackToggleState>(id)?.isStacked),
   )
 
-  const getWidget = useWidgetStore((state) => state.getWidget)
-
-  /**
-   * Checks if there are multiple series in the chart
-   */
-  const hasMultiSeries = useMemo(() => {
-    const option = getWidget<EchartWidgetState>(id)?.option
-    if (!option) return false
-
-    const series = Array.isArray(option.series)
-      ? option.series
-      : [option.series]
-
-    return series.length > 1
-  }, [getWidget, id])
-
-  /**
-   * Checks if any series in the option has a stack property defined
-   */
-  const hasStackInSeries = useMemo(() => {
-    const option = getWidget<EchartWidgetState>(id)?.option
-    if (!option) return false
+  const option = useWidgetStore(
+    useShallow((state) => state.getWidget<EchartWidgetState>(id)?.option),
+  )
 
+  const { hasMultiSeries, hasStackInSeries } = useMemo(() => {
+    if (!option) return { hasMultiSeries: false, hasStackInSeries: false }
     const series = Array.isArray(option.series)
       ? option.series
       : [option.series]
-
-    return series.some((s) => (s as { stack?: string })?.stack)
-  }, [getWidget, id])
+    return {
+      hasMultiSeries: series.length > 1,
+      hasStackInSeries: series.some((s) => (s as { stack?: string })?.stack),
+    }
+  }, [option])
 
   // If series already has stack defined, default to stacked=true
   const effectiveDefaultIsStacked = hasStackInSeries || defaultIsStacked
   const isStacked = storeIsStacked ?? effectiveDefaultIsStacked
 
-  /**
-   * Updates the ECharts option with the stack configuration
-   * Preserves existing stack group names from series, falling back to DEFAULT_STACK_GROUP
-   */
-  const updateOptions = useCallback(
-    (stacked: boolean) => {
-      const option = getWidget<EchartWidgetState>(id)?.option
-
-      if (!option) return
-
-      const series = Array.isArray(option.series)
-        ? option.series
-        : [option.series]
-
-      const updatedSeries = series.map((s) => {
-        // Extract existing stack group from series, fallback to default
-        const existingStack = (s as { stack?: string })?.stack
-        const stackGroup =
-          typeof existingStack === 'string'
-            ? existingStack
-            : DEFAULT_STACK_GROUP
-
-        return {
-          ...s,
-          ...getEChartStackConfig(stacked, stackGroup),
-        }
-      })
-
-      setWidget(id, {
-        option: {
-          ...option,
-          series: updatedSeries,
-        },
-      })
-    },
-    [getWidget, id, setWidget],
-  )
+  // Register config tool on mount
+  useEffect(() => {
+    registerTool(id, {
+      id: STACK_TOGGLE_TOOL_ID,
+      type: 'config',
+      order: 10,
+      enabled: isStacked && hasMultiSeries,
+      fn: (currentConfig, toolConfig) => {
+        const config = currentConfig as Record<string, unknown>
+        const option = config.option as EchartOptionsProps | undefined
+        if (!option) return currentConfig
+
+        const stacked = (toolConfig?.stacked as boolean) ?? false
+        const series = Array.isArray(option.series)
+          ? option.series
+          : [option.series]
+        const updatedSeries = series.map((s) => {
+          const existingStack = (s as { stack?: string })?.stack
+          const stackGroup =
+            typeof existingStack === 'string'
+              ? existingStack
+              : DEFAULT_STACK_GROUP
+          return { ...s, ...getEChartStackConfig(stacked, stackGroup) }
+        })
+
+        return { ...config, option: { ...option, series: updatedSeries } }
+      },
+      config: { stacked: isStacked },
+    })
+    return () => unregisterTool(id, STACK_TOGGLE_TOOL_ID)
+  }, [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])
+  }, [effectiveDefaultIsStacked, id, setWidget, storeIsStacked])
 
   const handleToggle = useCallback(() => {
-    const newIsStacked = !isStacked
-
-    setWidget(id, { isStacked: newIsStacked })
-    updateOptions(newIsStacked)
-  }, [isStacked, id, setWidget, updateOptions])
+    setWidget(id, { isStacked: !isStacked })
+  }, [isStacked, id, setWidget])
 
   const tooltipLabel = isStacked
     ? (labels?.unstacked ?? 'Disable stacking')