@carto/ps-react-ui 4.3.9 → 4.4.0

package/src/components/list-data/list-data.tsx

@@ -12,8 +12,10 @@ const DEFAULT_LABELS = {
   showLess: 'Show Less',
 } as const
 
+const EMPTY_DATA: ListDataProps['data'] = []
+
 export function ListDataUI({
-  data = [],
+  data = EMPTY_DATA,
   isLoading = false,
   maxItems = 5,
   labels = DEFAULT_LABELS,
@@ -47,11 +49,11 @@ export function ListDataUI({
   return (
     <>
       <List id='expandable-list' role='list'>
-        {items.map((item, idx) => (
+        {items.map((item) => (
           <SmartTooltip<HTMLLIElement>
             // Default tooltip props
             followCursor={false}
-            key={`list-item-${idx}`}
+            key={item.id}
             placement='top'
             arrow
             title={item.tooltipTitle}

package/src/components/measurement-tools/measurement-tools.tsx

@@ -49,6 +49,10 @@ import type {
 } from '../types'
 import { Tooltip } from '../tooltip/tooltip'
 
+const EMPTY_PAPER_PROPS: NonNullable<
+  MeasurementToolsComponentProps['PaperProps']
+> = {}
+
 export function MeasurementToolsUI({
   enabled,
   actionProps,
@@ -57,7 +61,7 @@ export function MeasurementToolsUI({
   modesMapping = DEFAULT_MEASUREMENT_TOOLS_MODES_MAPPING,
   unitsMapping = DEFAULT_MEASUREMENT_TOOLS_UNITS_MAPPING,
   modeSelected,
-  PaperProps: { sx, ...PaperProps } = {},
+  PaperProps: { sx, ...PaperProps } = EMPTY_PAPER_PROPS,
   units,
   unitSelected,
   onActionToggle,

package/src/components/smart-tooltip/smart-tooltip.tsx

@@ -2,9 +2,11 @@ import type { TooltipProps } from '@mui/material'
 import { useLayoutEffect, useRef, useState, type JSX, type Ref } from 'react'
 import { Tooltip } from '../tooltip/tooltip'
 
+const EMPTY_DEPENDENCIES: unknown[] = []
+
 export function SmartTooltip<T extends HTMLElement>({
   title,
-  dependencies = [],
+  dependencies = EMPTY_DEPENDENCIES,
   timeout = 500,
   TooltipProps,
   children,

package/src/hooks/use-widget-ref.ts

@@ -11,7 +11,7 @@ import { useWidgetStore } from '../widgets/stores/widget-store'
  * @example
  * ```tsx
  * function MyWidget({ id }: { id: string }) {
- *   const ref = useWidgetRef<HTMLDivElement>(id)
+ *   const { ref } = useWidgetRef<HTMLDivElement>(id)
  *
  *   return <div ref={ref}>Widget content</div>
  * }
@@ -21,13 +21,14 @@ export function useWidgetRef<T extends HTMLElement = HTMLElement>(
   widgetId: string,
 ) {
   const ref = useRef<T | null>(null)
+  const instance = useRef<echarts.ECharts | null>(null)
   const setWidget = useWidgetStore((store) => store.setWidget)
 
   useEffect(() => {
     if (ref.current) {
-      setWidget(widgetId, { refUI: ref })
+      setWidget(widgetId, { refUI: ref, instance: instance })
     }
   }, [widgetId, setWidget])
 
-  return ref
+  return { ref, instance }
 }

package/src/widgets/_shared/chart-config/option-builders.test.ts

@@ -6,8 +6,8 @@ describe('niceNum', () => {
     expect(niceNum(0)).toBe(0)
   })
 
-  it('should return 0 for negative values', () => {
-    expect(niceNum(-5)).toBe(0)
+  it('should return the same negative value for negative numbers', () => {
+    expect(niceNum(-5)).toBe(-5)
   })
 
   it('should round 547 to 600', () => {

package/src/widgets/_shared/chart-config/option-builders.ts

@@ -13,12 +13,14 @@ import type {
  * Rounds a value up to the nearest "nice" number.
  * A nice number is a multiple of 10^floor(log10(value)).
  *
- * Examples: 547 → 600, 200 → 200, 1200 → 2000, 18 → 20, 5 → 5
+ * Examples: 547 → 600, 200 → 200, 1200 → 2000, 18 → 20, 5 → 5, -547 → -500
  */
 export function niceNum(value: number): number {
-  if (value <= 0) return 0
-  const base = Math.pow(10, Math.floor(Math.log10(value)))
-  return Math.ceil(value / base) * base
+  if (value === 0) return 0
+  const absValue = Math.abs(value)
+  const base = Math.pow(10, Math.floor(Math.log10(absValue)))
+  const rounded = Math.ceil(absValue / base) * base
+  return value < 0 ? -rounded : rounded
 }
 
 /**

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

@@ -0,0 +1,220 @@
+import { Box, IconButton } from '@mui/material'
+import { HighlightAltOutlined } from '@mui/icons-material'
+import { useEffect, useCallback, useRef } from 'react'
+import { useWidgetStore } from '../../stores/widget-store'
+import type { BrushToggleProps } from './types'
+import { styles } from './style'
+import { Tooltip } from '../../../components'
+import { getEChartBrushConfig } from '../../echart/utils'
+import type {
+  EchartOptionsProps,
+  EchartWidgetData,
+  EchartWidgetState,
+} from '../../echart/types'
+import { useShallow } from 'zustand/shallow'
+
+export const BRUSH_TOGGLE_TOOL_ID = 'brush-toggle'
+
+/**
+ * Widget action to toggle EChart brush selection functionality.
+ *
+ * Registers as a config pipeline tool so that brush configuration is automatically
+ * re-applied when the base config is updated (e.g., by WidgetLoader).
+ *
+ * When brush is active, users can drag across bars to select a range.
+ * Selection clearing is handled via the chart's brush interactions/toolbox configuration.
+ * Only intended for use in fullscreen ToolbarActions for bar and histogram widgets.
+ *
+ * @example
+ * ```tsx
+ * <BrushToggle
+ *   id="my-widget"
+ *   onBrushSelected={(items) => console.log(items)}
+ * />
+ * ```
+ */
+export function BrushToggle({
+  id,
+  onBrushSelected,
+  labels,
+  Icon,
+  IconButtonProps,
+}: BrushToggleProps) {
+  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 selected = useRef<(string | number)[]>([])
+
+  const brushTool = useWidgetStore(
+    useShallow((state) => {
+      const tools = state.getWidget(id)?.registeredTools ?? []
+      return tools.find((tool) => tool.id === BRUSH_TOGGLE_TOOL_ID)
+    }),
+  )
+
+  const brush = brushTool?.enabled
+
+  const toggleTool = useCallback(
+    (value: boolean) => {
+      setToolEnabled(id, BRUSH_TOGGLE_TOOL_ID, value)
+    },
+    [id, setToolEnabled],
+  )
+
+  const handleToggle = useCallback(() => {
+    const newBrush = !brush
+    toggleTool(newBrush)
+
+    if (newBrush) {
+      onBrushSelected?.([])
+    }
+  }, [brush, onBrushSelected, toggleTool])
+
+  // Re-dispatch brush action after every ECharts render while brush is active
+  useEffect(() => {
+    if (!brush) return
+
+    const instance = getWidget<EchartWidgetState>(id)?.instance?.current
+    if (!instance) return
+
+    const handleRendered = () => {
+      const config = getEChartBrushConfig()
+      instance.dispatchAction({
+        type: 'takeGlobalCursor',
+        key: 'brush',
+        brushOption: {
+          brushType: config.brush.brushType,
+          brushMode: config.brush.brushMode,
+        },
+      })
+    }
+
+    // Dispatch immediately for the initial activation
+    handleRendered()
+
+    // Re-dispatch after each render (covers setOption with notMerge:true)
+    instance.on('rendered', handleRendered)
+
+    return () => {
+      instance.off('rendered', handleRendered)
+    }
+  }, [brush, getWidget, id])
+
+  // Handle brushSelected event to capture selected bar indices
+  const handleBrushSelected = useCallback(
+    (event: unknown) => {
+      const brushEvent = event as {
+        batch?: {
+          selected?: {
+            dataIndex?: number[]
+            seriesIndex?: number
+          }[]
+        }[]
+      }
+
+      // Resolve names from the widget dataset
+      const widget = getWidget(id)
+      const data = (widget?.data ?? []) as EchartWidgetData
+
+      const items = [
+        ...new Set(
+          brushEvent.batch?.flatMap(
+            (batch) =>
+              batch.selected?.flatMap(
+                (sel) =>
+                  sel.dataIndex?.map((dataIndex) => {
+                    const row = data[sel.seriesIndex ?? 0]?.[dataIndex]
+                    const firstValue = row ? Object.values(row)[0] : undefined
+                    const name =
+                      typeof firstValue === 'string' ||
+                      typeof firstValue === 'number'
+                        ? String(firstValue)
+                        : String(dataIndex)
+                    return name
+                  }) ?? [],
+              ) ?? [],
+          ),
+        ),
+      ]
+
+      selected.current = items ?? []
+    },
+    [getWidget, id],
+  )
+
+  const handleBrushEnd = useCallback(() => {
+    onBrushSelected?.(selected.current)
+    toggleTool(false) // Disable brush after selection is made
+  }, [onBrushSelected, toggleTool])
+
+  // Register config tool on mount
+  useEffect(() => {
+    const existingTool = getWidget(id)?.registeredTools?.find(
+      (tool) => tool.id === BRUSH_TOGGLE_TOOL_ID,
+    )
+
+    const initialEnabled = existingTool?.enabled ?? false
+
+    registerTool(id, {
+      id: BRUSH_TOGGLE_TOOL_ID,
+      type: 'config',
+      order: 25,
+      enabled: initialEnabled,
+      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 brushConfig = getEChartBrushConfig()
+
+        const onEventsWithoutBrush = { ...currentOnEvents }
+        delete onEventsWithoutBrush.brushSelected
+        const onEvents = {
+          ...currentOnEvents,
+          brushSelected: handleBrushSelected,
+          brushEnd: handleBrushEnd,
+        }
+
+        return {
+          ...config,
+          option: {
+            ...option,
+            ...brushConfig,
+          },
+          onEvents,
+        }
+      },
+    })
+    return () => unregisterTool(id, BRUSH_TOGGLE_TOOL_ID)
+  }, [
+    getWidget,
+    handleBrushEnd,
+    handleBrushSelected,
+    id,
+    registerTool,
+    unregisterTool,
+  ])
+
+  const enableLabel = labels?.enable ?? 'Enable brush selection'
+  const disableLabel = labels?.disable ?? 'Disable brush selection'
+  const tooltipLabel = brush ? disableLabel : enableLabel
+
+  return (
+    <Box sx={styles.container}>
+      <Tooltip title={tooltipLabel}>
+        <IconButton
+          size='small'
+          aria-label={labels?.ariaLabel ?? tooltipLabel}
+          onClick={handleToggle}
+          sx={styles.trigger}
+          data-active={brush}
+          {...IconButtonProps}
+        >
+          {Icon ?? <HighlightAltOutlined />}
+        </IconButton>
+      </Tooltip>
+    </Box>
+  )
+}

package/src/widgets/actions/{relative-data → brush-toggle}/style.ts

@@ -1,6 +1,11 @@
 import type { SxProps, Theme } from '@mui/material'
 
 export const styles = {
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: ({ spacing }) => spacing(0.25),
+  },
   trigger: {
     '&[data-active="true"]': {
       background: (theme: Theme) => theme.palette.primary.relatedLight,

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

@@ -0,0 +1,37 @@
+import type { IconButtonProps } from '@mui/material'
+import type { ReactNode } from 'react'
+import type { BaseWidgetState } from '../../stores/types'
+
+/**
+ * Represents a single item selected by the brush
+ */
+export type BrushSelectedItems = (string | number)[]
+
+/**
+ * State stored in widget store for brush functionality
+ */
+export interface BrushConfig {
+  brush?: boolean
+}
+
+export type BrushState<T = unknown> = BaseWidgetState<T & BrushConfig>
+
+export interface BrushToggleProps {
+  /** Widget ID to update brush state in the widget store */
+  id: string
+  /** Callback fired when items are selected via brush */
+  onBrushSelected?: (items: BrushSelectedItems) => void
+  /** Custom labels for the action */
+  labels?: {
+    /** Tooltip when brush is disabled (button will enable brush) */
+    enable?: string
+    /** Tooltip when brush is enabled (button will disable brush) */
+    disable?: string
+    /** Accessibility label */
+    ariaLabel?: string
+  }
+  /** Props passed to the IconButton component */
+  IconButtonProps?: IconButtonProps
+  /** Custom icon to display for brush toggle */
+  Icon?: ReactNode
+}

package/src/widgets/actions/download/download.test.tsx

@@ -271,8 +271,12 @@ describe('Download', () => {
     const parentClickHandler = vi.fn()
 
     render(
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      <div onClick={parentClickHandler}>
+      <div
+        role='button'
+        tabIndex={0}
+        onClick={parentClickHandler}
+        onKeyDown={parentClickHandler}
+      >
         <Download id={widgetId} items={mockDownload} />
       </div>,
     )

package/src/widgets/actions/download/download.tsx

@@ -12,10 +12,12 @@ import { useState, type MouseEvent } from 'react'
 import { useWidgetStore } from '../../../widgets'
 import { useShallow } from 'zustand/shallow'
 
+const EMPTY_LABELS: NonNullable<DownloadProps['labels']> = {}
+
 export function Download({
   id,
   items,
-  labels = {},
+  labels = EMPTY_LABELS,
   Icon,
   IconButtonProps,
 }: DownloadProps) {

package/src/widgets/actions/fullscreen/fullscreen.tsx

@@ -15,13 +15,20 @@ import type {
 import { styles } from './styles'
 import { useShallow } from 'zustand/shallow'
 
+const EMPTY_DIALOG_CONTENT_PROPS: NonNullable<
+  FullScreenProps['DialogContentProps']
+> = {}
+
 export function FullScreen({
   id,
   labels,
   children,
   Icon,
   IconButtonProps,
-  DialogContentProps: { sx, ...DialogContentProps } = {},
+  DialogContentProps: {
+    sx,
+    ...DialogContentProps
+  } = EMPTY_DIALOG_CONTENT_PROPS,
   DialogProps,
 }: FullScreenProps) {
   const isFullScreen = useWidgetStore(

package/src/widgets/actions/index.ts

@@ -52,3 +52,12 @@ export type {
   LockSelectionProps,
   LockSelectionState,
 } from './lock-selection/types'
+
+/* Brush Toggle Widget */
+export { BrushToggle, BRUSH_TOGGLE_TOOL_ID } from './brush-toggle/brush-toggle'
+export type {
+  BrushToggleProps,
+  BrushState,
+  BrushConfig,
+  BrushSelectedItems,
+} from './brush-toggle/types'

package/src/widgets/actions/lock-selection/lock-selection.tsx

@@ -37,9 +37,6 @@ export function LockSelection({
   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 storeIsLocked = useWidgetStore(
     useShallow((state) => state.getWidget<LockSelectionState>(id)?.isLocked),
   )
@@ -68,12 +65,6 @@ export function LockSelection({
     return () => unregisterTool(id, LOCK_SELECTION_TOOL_ID)
   }, [id, order, registerTool, unregisterTool, isLocked, lockedItems])
 
-  // Update enabled flag and config when they change
-  useEffect(() => {
-    setToolEnabled(id, LOCK_SELECTION_TOOL_ID, isLocked)
-    updateToolConfig(id, LOCK_SELECTION_TOOL_ID, { lockedItems })
-  }, [id, isLocked, lockedItems, setToolEnabled, updateToolConfig])
-
   const handleToggle = useCallback(() => {
     if (isLocked) {
       // Unlock: clear locked items and disable tool

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

@@ -73,13 +73,9 @@ export function RelativeData({
     return () => unregisterTool(id, RELATIVE_DATA_TOOL_ID)
   }, [id, order, registerTool, unregisterTool, isRelative])
 
-  // Update enabled flag when toggle changes
-  useEffect(() => {
-    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, isRelative)
-  }, [id, isRelative, setToolEnabled])
-
   const handleToggle = useCallback(() => {
     const newIsRelative = !isRelative
+    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
     let max = previousMaxValue.current
 
     if (newIsRelative) {
@@ -110,7 +106,7 @@ export function RelativeData({
           }
         : originalFormatter.current,
     })
-  }, [isRelative, setWidget, id, getWidget])
+  }, [isRelative, setWidget, id, getWidget, setToolEnabled])
 
   const tooltipLabel = isRelative
     ? (labels?.absolute ?? 'Show absolute values')

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

@@ -53,7 +53,6 @@ export function Searcher({
   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(
@@ -85,11 +84,6 @@ export function Searcher({
     return () => unregisterTool(id, SEARCHER_TOOL_ID)
   }, [id, order, filter, registerTool, unregisterTool, enabled, searchText])
 
-  // Update enabled flag when it changes
-  useEffect(() => {
-    setToolEnabled(id, SEARCHER_TOOL_ID, enabled)
-  }, [id, enabled, setToolEnabled])
-
   // Update config when search text changes (debounced)
   const debouncedUpdateConfig = useCallback(
     (text: string) => {

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

@@ -49,7 +49,7 @@ describe('StackToggle', () => {
     const tool = widget?.registeredTools?.find(
       (t) => t.id === STACK_TOGGLE_TOOL_ID,
     )
-    expect(tool?.config?.stacked).toBe(true)
+    expect(tool?.enabled).toBe(true)
   })
 
   test('toggles back to unstacked mode', () => {
@@ -67,7 +67,7 @@ describe('StackToggle', () => {
     const tool = widget?.registeredTools?.find(
       (t) => t.id === STACK_TOGGLE_TOOL_ID,
     )
-    expect(tool?.config?.stacked).toBe(false)
+    expect(tool?.enabled).toBe(false)
   })
 
   test('has active state when in stacked mode', () => {
@@ -112,7 +112,7 @@ describe('StackToggle', () => {
     const tool = widget?.registeredTools?.find(
       (t) => t.id === STACK_TOGGLE_TOOL_ID,
     )
-    expect(tool?.config?.stacked).toBe(false)
+    expect(tool?.enabled).toBe(false)
   })
 
   test('initializes tool config with stacked values when defaultIsStacked is true', () => {
@@ -122,7 +122,7 @@ describe('StackToggle', () => {
     const tool = widget?.registeredTools?.find(
       (t) => t.id === STACK_TOGGLE_TOOL_ID,
     )
-    expect(tool?.config?.stacked).toBe(true)
+    expect(tool?.enabled).toBe(true)
   })
 
   test('applies stack to EChart series via config pipeline when toggling to stacked', async () => {

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

@@ -37,9 +37,6 @@ export function StackToggle({
   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),
   )
@@ -70,12 +67,11 @@ export function StackToggle({
       type: 'config',
       order: 10,
       enabled: isStacked && hasMultiSeries,
-      fn: (currentConfig, toolConfig) => {
+      fn: (currentConfig) => {
         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]
@@ -85,22 +81,15 @@ export function StackToggle({
             typeof existingStack === 'string'
               ? existingStack
               : DEFAULT_STACK_GROUP
-          return { ...s, ...getEChartStackConfig(stacked, stackGroup) }
+          return { ...s, ...getEChartStackConfig(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

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

@@ -81,7 +81,6 @@ export function ZoomToggle({
       if (start !== undefined && end !== undefined) {
         setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
         updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
-          enabled: true,
           start,
           end,
         })
@@ -113,7 +112,6 @@ export function ZoomToggle({
         const currentOnEvents =
           (config.onEvents as Record<string, unknown> | undefined) ?? {}
 
-        const enabled = (toolConfig?.enabled as boolean) ?? false
         const start = (toolConfig?.start as number) ?? 0
         const end = (toolConfig?.end as number) ?? 100
 
@@ -125,7 +123,6 @@ export function ZoomToggle({
         const legendBottomOffset = hasLegend ? 28 : 0
 
         const zoomConfig = getEChartZoomConfig(
-          enabled,
           { start, end },
           {
             inside: true,
@@ -142,15 +139,11 @@ export function ZoomToggle({
             ? grid.bottom
             : parseInt(grid?.bottom ?? '24')
 
-        const gridBottom = enabled
-          ? currentGridBottom + sliderHeight + sliderGap
-          : currentGridBottom
+        const gridBottom = currentGridBottom + sliderHeight + sliderGap
 
         const onEventsWithoutDataZoom = { ...currentOnEvents }
         delete onEventsWithoutDataZoom.dataZoom
-        const onEvents = enabled
-          ? { ...currentOnEvents, dataZoom: handleDataZoom }
-          : onEventsWithoutDataZoom
+        const onEvents = { ...currentOnEvents, dataZoom: handleDataZoom }
 
         return {
           ...config,
@@ -163,7 +156,6 @@ export function ZoomToggle({
         }
       },
       config: {
-        enabled: initialEnabled,
         start: initialStart,
         end: initialEnd,
       },
@@ -185,7 +177,6 @@ export function ZoomToggle({
     const newZoom = !zoom
     setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, newZoom)
     updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
-      enabled: newZoom,
       start: newZoom ? zoomStart : 0,
       end: newZoom ? zoomEnd : 100,
     })
@@ -194,7 +185,6 @@ export function ZoomToggle({
   const handleReset = () => {
     setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
     updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
-      enabled: true,
       start: defaultZoomStart,
       end: defaultZoomEnd,
     })