@carto/ps-react-ui 4.4.2 → 4.5.0

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

@@ -1,17 +1,13 @@
 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 { widgetStoreActions } from '../../stores/widget-store'
+import type { BrushSelectedItems, 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'
+import type { EchartOptionsProps, EchartWidgetState } from '../../echart/types'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 export const BRUSH_TOGGLE_TOOL_ID = 'brush-toggle'
 
@@ -40,26 +36,18 @@ export function BrushToggle({
   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 selected = useRef<BrushSelectedItems>({ dataIndex: [], seriesIndex: 0 })
 
-  const brush = brushTool?.enabled
+  const { brush } = useWidgetSelector(id, (w) => ({
+    brush: w?.registeredTools?.find((tool) => tool.id === BRUSH_TOGGLE_TOOL_ID)
+      ?.enabled,
+  }))
 
   const toggleTool = useCallback(
     (value: boolean) => {
-      setToolEnabled(id, BRUSH_TOGGLE_TOOL_ID, value)
+      widgetStoreActions.setToolEnabled(id, BRUSH_TOGGLE_TOOL_ID, value)
     },
-    [id, setToolEnabled],
+    [id],
   )
 
   const handleToggle = useCallback(() => {
@@ -67,7 +55,7 @@ export function BrushToggle({
     toggleTool(newBrush)
 
     if (newBrush) {
-      onBrushSelected?.([])
+      onBrushSelected?.({ dataIndex: [], seriesIndex: 0 }) // Clear selection when enabling brush
     }
   }, [brush, onBrushSelected, toggleTool])
 
@@ -75,7 +63,8 @@ export function BrushToggle({
   useEffect(() => {
     if (!brush) return
 
-    const instance = getWidget<EchartWidgetState>(id)?.instance?.current
+    const instance =
+      widgetStoreActions.getWidget<EchartWidgetState>(id)?.instance?.current
     if (!instance) return
 
     const handleRendered = () => {
@@ -99,64 +88,65 @@ export function BrushToggle({
     return () => {
       instance.off('rendered', handleRendered)
     }
-  }, [brush, getWidget, id])
+  }, [brush, id])
 
   // Handle brushSelected event to capture selected bar indices
-  const handleBrushSelected = useCallback(
-    (event: unknown) => {
-      const brushEvent = event as {
-        batch?: {
-          selected?: {
-            dataIndex?: number[]
-            seriesIndex?: number
-          }[]
+  const handleBrushSelected = useCallback((event: unknown) => {
+    const brushEvent = event as {
+      batch?: {
+        selected?: {
+          dataIndex?: number[]
+          seriesIndex?: number
         }[]
+      }[]
+    }
+
+    const allSelected =
+      brushEvent.batch?.flatMap((batchItem) => batchItem.selected ?? []) ?? []
+
+    if (!allSelected.length) {
+      selected.current = {
+        dataIndex: [],
+        seriesIndex: 0,
       }
+      return
+    }
 
-      // 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],
-  )
+    // Use the first seriesIndex as the primary one (matches previous behavior)
+    const primarySeriesIndex = allSelected[0]?.seriesIndex ?? 0
+
+    const mergedDataIndex = Array.from(
+      new Set(
+        allSelected
+          .filter(
+            (item) =>
+              item.seriesIndex === undefined ||
+              item.seriesIndex === primarySeriesIndex,
+          )
+          .flatMap((item) => item.dataIndex ?? []),
+      ),
+    )
+
+    selected.current = {
+      dataIndex: mergedDataIndex,
+      seriesIndex: primarySeriesIndex,
+    }
+  }, [])
 
   const handleBrushEnd = useCallback(() => {
     onBrushSelected?.(selected.current)
     toggleTool(false) // Disable brush after selection is made
   }, [onBrushSelected, toggleTool])
 
-  // 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 === BRUSH_TOGGLE_TOOL_ID,
-    )
+    const existingTool = widgetStoreActions
+      .getWidget(id)
+      ?.registeredTools?.find((tool) => tool.id === BRUSH_TOGGLE_TOOL_ID)
 
     const initialEnabled = existingTool?.enabled ?? false
 
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: BRUSH_TOGGLE_TOOL_ID,
       type: 'config',
       order: 25,
@@ -169,8 +159,6 @@ export function BrushToggle({
 
         const brushConfig = getEChartBrushConfig()
 
-        const onEventsWithoutBrush = { ...currentOnEvents }
-        delete onEventsWithoutBrush.brushSelected
         const onEvents = {
           ...currentOnEvents,
           brushSelected: handleBrushSelected,
@@ -187,15 +175,8 @@ export function BrushToggle({
         }
       },
     })
-    return () => unregisterTool(id, BRUSH_TOGGLE_TOOL_ID)
-  }, [
-    getWidget,
-    handleBrushEnd,
-    handleBrushSelected,
-    id,
-    registerTool,
-    unregisterTool,
-  ])
+    return () => widgetStoreActions.unregisterTool(id, BRUSH_TOGGLE_TOOL_ID)
+  }, [id, handleBrushSelected, handleBrushEnd])
 
   const enableLabel = labels?.enable ?? 'Enable brush selection'
   const disableLabel = labels?.disable ?? 'Disable brush selection'

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

@@ -3,9 +3,15 @@ import type { ReactNode } from 'react'
 import type { BaseWidgetState } from '../../stores/types'
 
 /**
- * Represents a single item selected by the brush
+ * Brush selection result emitted by BrushToggle.
+ * Contains raw indices so consumers can resolve data according to their widget type.
  */
-export type BrushSelectedItems = (string | number)[]
+export interface BrushSelectedItems {
+  /** Data indices of the selected items in the dataset */
+  dataIndex: number[]
+  /** Series index from the brush event (defaults to 0) */
+  seriesIndex: number
+}
 
 /**
  * State stored in widget store for brush functionality

package/src/widgets/actions/change-column/change-column.tsx

@@ -21,14 +21,14 @@ import {
   useState,
   type MouseEvent,
 } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
 import type { ChangeColumnProps } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import type { TableColumn, TableWidgetState } from '../../table/types'
 import { ChangeColumnIcon } from './change-column-icon'
 import { SortableColumnItem } from './sortable-column-item'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 export const CHANGE_COLUMN_TOOL_ID = 'change-column'
 
@@ -57,12 +57,9 @@ export function ChangeColumn({
   MenuProps,
 }: ChangeColumnProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const columns = useWidgetStore(
-    useShallow((state) => state.getWidget<TableWidgetState>(id)?.columns),
-  )
+  const { columns } = useWidgetSelector(id, (w) => ({
+    columns: (w as TableWidgetState | undefined)?.columns,
+  }))
 
   /**
    * Config tool function that reorders columns to match the current widget state.
@@ -72,9 +69,7 @@ export function ChangeColumn({
    */
   const reorderFn = useCallback(
     (currentConfig: unknown): unknown => {
-      const widgetState = useWidgetStore
-        .getState()
-        .getWidget<TableWidgetState>(id)
+      const widgetState = widgetStoreActions.getWidget<TableWidgetState>(id)
       const currentColumns = widgetState?.columns
       if (!currentColumns || currentColumns.length === 0) return currentConfig
 
@@ -130,15 +125,15 @@ export function ChangeColumn({
 
   // Register config tool on mount
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: CHANGE_COLUMN_TOOL_ID,
       type: 'config',
       order: 100,
       enabled: true,
       fn: reorderFn,
     })
-    return () => unregisterTool(id, CHANGE_COLUMN_TOOL_ID)
-  }, [id, registerTool, unregisterTool, reorderFn])
+    return () => widgetStoreActions.unregisterTool(id, CHANGE_COLUMN_TOOL_ID)
+  }, [id, reorderFn])
 
   const handleToggle = useCallback((event: MouseEvent<HTMLElement>) => {
     event.stopPropagation()
@@ -156,7 +151,7 @@ export function ChangeColumn({
     const newIndex = columns.findIndex((col) => col.id === over.id)
     if (oldIndex !== -1 && newIndex !== -1) {
       const newColumns = arrayMove(columns, oldIndex, newIndex)
-      setWidget(id, { columns: newColumns })
+      widgetStoreActions.setWidget(id, { columns: newColumns })
     }
   }
 
@@ -201,6 +196,11 @@ export function ChangeColumn({
           onClose={handleClose}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
           transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+          slotProps={{
+            paper: {
+              sx: { overflow: 'hidden' },
+            },
+          }}
           {...MenuProps}
         >
           <SortableContext

package/src/widgets/actions/change-column/sortable-column-item.tsx

@@ -22,7 +22,9 @@ export function SortableColumnItem({ column }: SortableColumnItemProps) {
   } = useSortable({ id: column.id })
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: CSS.Transform.toString(
+      transform ? { ...transform, x: 0 } : null,
+    ),
     transition,
     opacity: isDragging ? 0.5 : 1,
     cursor: isDragging ? 'grabbing' : 'grab',

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

@@ -9,8 +9,7 @@ import {
 import type { DownloadItem, DownloadProps } from './types'
 import { FileDownloadOutlined } from '@mui/icons-material'
 import { useState, type MouseEvent } from 'react'
-import { useWidgetStore } from '../../../widgets'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 const EMPTY_LABELS: NonNullable<DownloadProps['labels']> = {}
 
@@ -32,7 +31,9 @@ export function Download({
   Icon,
   IconButtonProps,
 }: DownloadProps) {
-  const data = useWidgetStore(useShallow((state) => state.getWidget(id)?.data))
+  const { data } = useWidgetSelector(id, (w) => ({
+    data: w?.data,
+  }))
 
   const [isDownloading, setIsDownloading] = useState(false)
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

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

@@ -5,7 +5,8 @@ import {
   IconButton,
   Typography,
 } from '@mui/material'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import { Close, FullscreenOutlined } from '@mui/icons-material'
 import type {
   FullScreenConfig,
@@ -13,7 +14,6 @@ import type {
   FullScreenState,
 } from './types'
 import { styles } from './styles'
-import { useShallow } from 'zustand/shallow'
 
 const EMPTY_DIALOG_CONTENT_PROPS: NonNullable<
   FullScreenProps['DialogContentProps']
@@ -44,16 +44,12 @@ export function FullScreen({
   } = EMPTY_DIALOG_CONTENT_PROPS,
   DialogProps,
 }: FullScreenProps) {
-  const isFullScreen = useWidgetStore(
-    useShallow((state) => state.getWidget<FullScreenState>(id)?.isFullScreen),
-  )
-  const title = useWidgetStore(
-    useShallow((state) => state.getWidget<FullScreenState>(id)?.title),
-  )
-  const setWidget = useWidgetStore((state) => state.setWidget)
-
+  const { isFullScreen, title } = useWidgetSelector(id, (w) => ({
+    isFullScreen: (w as FullScreenState | undefined)?.isFullScreen,
+    title: (w as FullScreenState | undefined)?.title,
+  }))
   const updateFullScreenConfig = (updates: Partial<FullScreenConfig>) => {
-    setWidget<FullScreenState>(id, {
+    widgetStoreActions.setWidget<FullScreenState>(id, {
       isFullScreen: updates.isFullScreen,
     })
   }

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

@@ -4,8 +4,8 @@ import { useCallback, useEffect, useMemo } from 'react'
 import type { LockSelectionProps, LockSelectionState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
-import { useWidgetStore } from '../../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import type { EchartWidgetData } from '../../echart/types'
 
 export const LOCK_SELECTION_TOOL_ID = 'lock-selection'
@@ -34,12 +34,9 @@ export function LockSelection({
   Icon,
   IconButtonProps,
 }: LockSelectionProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const storeIsLocked = useWidgetStore(
-    useShallow((state) => state.getWidget<LockSelectionState>(id)?.isLocked),
-  )
+  const { storeIsLocked } = useWidgetSelector(id, (w) => ({
+    storeIsLocked: (w as LockSelectionState | undefined)?.isLocked,
+  }))
 
   const isLocked = storeIsLocked ?? false
   const lockedItems = useMemo(
@@ -47,9 +44,9 @@ export function LockSelection({
     [isLocked, selectedItems],
   )
 
-  // Register tool on mount
+  // Register tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: LOCK_SELECTION_TOOL_ID,
       order,
       enabled: isLocked,
@@ -62,24 +59,24 @@ export function LockSelection({
       config: { lockedItems },
     })
 
-    return () => unregisterTool(id, LOCK_SELECTION_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, isLocked, lockedItems])
+    return () => widgetStoreActions.unregisterTool(id, LOCK_SELECTION_TOOL_ID)
+  }, [id, order, isLocked, lockedItems])
 
   const handleToggle = useCallback(() => {
     if (isLocked) {
       // Unlock: clear locked items and disable tool
-      setWidget(id, {
+      widgetStoreActions.setWidget(id, {
         isLocked: false,
         lockedItems: [],
       })
     } else {
       // Lock: save selected items and enable tool
-      setWidget(id, {
+      widgetStoreActions.setWidget(id, {
         isLocked: true,
         lockedItems: selectedItems,
       })
     }
-  }, [id, isLocked, selectedItems, setWidget])
+  }, [id, isLocked, selectedItems])
 
   // Don't render if no selections
   if (selectedItems.length === 0) {

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

@@ -1,7 +1,8 @@
 import { IconButton } from '@mui/material'
 import { PercentOutlined } from '@mui/icons-material'
 import { useCallback, useEffect, useRef } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import type { RelativeDataProps } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
@@ -37,24 +38,18 @@ export function RelativeData({
   const percentFormatterRef = useRef<((value: number) => string) | undefined>(
     undefined,
   )
-  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 storeIsRelative = useWidgetStore(
-    (state) =>
-      state.widgets[id]?.registeredTools?.find(
-        (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
-      )?.config?.isRelative as boolean | undefined,
-  )
+  const { storeIsRelative } = useWidgetSelector(id, (w) => ({
+    storeIsRelative: w?.registeredTools?.find(
+      (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
+    )?.config?.isRelative as boolean | undefined,
+  }))
 
   const isRelative = storeIsRelative ?? defaultIsRelative
 
-  // Register tool on mount
+  // Register data tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: RELATIVE_DATA_TOOL_ID,
       order,
       enabled: defaultIsRelative,
@@ -65,17 +60,17 @@ export function RelativeData({
       },
     })
 
-    return () => unregisterTool(id, RELATIVE_DATA_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, defaultIsRelative])
+    return () => widgetStoreActions.unregisterTool(id, RELATIVE_DATA_TOOL_ID)
+  }, [id, order, defaultIsRelative])
 
-  // Register config tool for formatter management
+  // Register config tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: RELATIVE_DATA_CONFIG_TOOL_ID,
       type: 'config',
       order,
       enabled: true,
-      fn: (currentConfig, toolConfig) => {
+      fn: (currentConfig: unknown, toolConfig?: Record<string, unknown>) => {
         const config = currentConfig as Record<string, unknown>
         if (toolConfig?.isRelative) {
           if (!percentFormatterRef.current) {
@@ -104,20 +99,21 @@ export function RelativeData({
         isRelative: defaultIsRelative,
       },
     })
-    return () => unregisterTool(id, RELATIVE_DATA_CONFIG_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, defaultIsRelative])
+    return () =>
+      widgetStoreActions.unregisterTool(id, RELATIVE_DATA_CONFIG_TOOL_ID)
+  }, [id, order, defaultIsRelative])
 
   const handleToggle = useCallback(() => {
     const newIsRelative = !isRelative
-    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
+    widgetStoreActions.setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
 
     if (newIsRelative) {
-      const widget = getWidget(id) as {
+      const widget = widgetStoreActions.getWidget(id) as {
         formatter?: (value: number) => string
         locale?: string
         max?: number
       }
-      updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
+      widgetStoreActions.updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
         isRelative: true,
         originalFormatter: widget?.formatter,
         originalMax: widget?.max,
@@ -125,11 +121,11 @@ export function RelativeData({
       })
     } else {
       percentFormatterRef.current = undefined
-      updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
+      widgetStoreActions.updateToolConfig(id, RELATIVE_DATA_CONFIG_TOOL_ID, {
         isRelative: false,
       })
     }
-  }, [isRelative, id, getWidget, setToolEnabled, updateToolConfig])
+  }, [isRelative, id])
 
   const tooltipLabel = isRelative
     ? (labels?.absolute ?? 'Show absolute values')

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

@@ -4,8 +4,8 @@ import { useCallback, useEffect } from 'react'
 import type { SearcherToggleProps, SearcherState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
-import { useWidgetStore } from '../../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 /**
  * Widget action button to toggle search functionality.
@@ -30,25 +30,24 @@ export function SearcherToggle({
   Icon,
   IconButtonProps,
 }: SearcherToggleProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const getWidget = useWidgetStore((state) => state.getWidget)
-  const storeIsEnabled = useWidgetStore(
-    useShallow((state) => state.getWidget<SearcherState>(id)?.isSearchEnabled),
-  )
+  const { storeIsEnabled } = useWidgetSelector(id, (w) => ({
+    storeIsEnabled: (w as SearcherState | undefined)?.isSearchEnabled,
+  }))
 
   const isEnabled = storeIsEnabled ?? defaultEnabled
 
   // Initialize store with default value on mount
   useEffect(() => {
-    const currentValue = getWidget<SearcherState>(id)?.isSearchEnabled
+    const currentValue =
+      widgetStoreActions.getWidget<SearcherState>(id)?.isSearchEnabled
     if (currentValue === undefined) {
-      setWidget(id, { isSearchEnabled: defaultEnabled })
+      widgetStoreActions.setWidget(id, { isSearchEnabled: defaultEnabled })
     }
-  }, [defaultEnabled, getWidget, id, setWidget])
+  }, [defaultEnabled, id])
 
   const handleToggle = useCallback(() => {
-    setWidget(id, { isSearchEnabled: !isEnabled })
-  }, [id, isEnabled, setWidget])
+    widgetStoreActions.setWidget(id, { isSearchEnabled: !isEnabled })
+  }, [id, isEnabled])
 
   const tooltipLabel = isEnabled
     ? (labels?.disable ?? 'Disable search')