@carto/ps-react-ui 5.1.0 → 6.0.0

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

@@ -1,143 +1,73 @@
-import { TextField, InputAdornment, IconButton } from '@mui/material'
-import { ClearOutlined, SearchOutlined } from '@mui/icons-material'
-import { useEffect, useRef, useCallback } from 'react'
-import { widgetStoreActions } from '../../stores/widget-store'
-import { useWidgetSelector } from '../../stores/use-widget-selector'
-import type { SearcherProps, SearcherFilterFn, SearcherState } from './types'
-import type { EchartWidgetData } from '../../echart/types'
-import { LOCK_SELECTION_TOOL_ID } from '../lock-selection/lock-selection'
-
-export const SEARCHER_TOOL_ID = 'searcher'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { IconButton, InputAdornment, TextField } from '@mui/material'
+import { Search as SearchIcon } from '@mui/icons-material'
+import { Clear as ClearIcon } from '@mui/icons-material'
+import { debounce } from '@carto/ps-utils'
+import { getWidgetStore, useWidget, useWidgetId } from '../../stores'
+import { setSearcherText } from './searcher-toggle'
+import { DEFAULT_SEARCHER_LABELS, type SearcherLabels } from './labels'
+import { styles } from './style'
+
+export interface SearcherProps {
+  labels?: Partial<SearcherLabels>
+  /** Debounce delay before the input value is written to the widget store. */
+  debounceMs?: number
+}
 
-const DEBOUNCE_DELAY = 300
+const DEFAULT_DEBOUNCE = 300
 
 /**
- * Search input component that works with SearcherToggle.
- *
- * Registers a transformation tool in the widget pipeline when mounted.
- * Reads the enabled state from the widget store using the provided id.
- * Uses a debounced search to filter data via the transformation pipeline.
- * Auto-focuses when enabled becomes true.
- *
- * @example
- * ```tsx
- * <SearcherToggle id="my-widget" />
- * <Searcher
- *   id="my-widget"
- *   order={10}
- *   labels={{ placeholder: 'Search categories...' }}
- * />
- * ```
+ * Renders only when the matching `<SearcherToggle />` is enabled — drives the
+ * `transformStates['searcher'].searchText` field via a debounced setter.
  */
 export function Searcher({
-  id,
-  filterFn,
-  order = 20,
   labels,
-  TextFieldProps,
-  ClearIcon,
-  debounceDelay = DEBOUNCE_DELAY,
+  debounceMs = DEFAULT_DEBOUNCE,
 }: SearcherProps) {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  // Read enabled state and search text from widget store
-  const { enabled, searchText } = useWidgetSelector(id, (w) => ({
-    enabled: (w as SearcherState | undefined)?.isSearchEnabled ?? false,
-    searchText: (w as SearcherState | undefined)?.searchText ?? '',
-  }))
-  const prevEnabledRef = useRef(enabled)
-
-  const filter = filterFn ?? defaultFilterFn
-
-  const setSearchText = useCallback(
-    (text: string) => {
-      widgetStoreActions.setWidget(id, { searchText: text })
-    },
-    [id],
+  const id = useWidgetId()
+  const resolved = { ...DEFAULT_SEARCHER_LABELS, ...labels }
+  const enabled = useWidget(
+    id,
+    (s) => s.transformStates.searcher?.enabled ?? false,
   )
 
-  // Register tool once — fn reads searchText from the store at execution time.
-  // Enabled is synced separately to avoid full re-registration on toggle.
-  useEffect(() => {
-    widgetStoreActions.registerTool(id, {
-      id: SEARCHER_TOOL_ID,
-      order,
-      enabled: false,
-      fn: async (data) => {
-        const widget = widgetStoreActions.getWidget<SearcherState>(id)
-        const currentSearchText = widget?.searchText ?? ''
-
-        // Execute filter (can be sync or async)
-        const result = filter(data as EchartWidgetData, currentSearchText)
-
-        // Return result directly (pipeline will handle Promise)
-        return result
-      },
-      disables: [LOCK_SELECTION_TOOL_ID],
-    })
-
-    return () => widgetStoreActions.unregisterTool(id, SEARCHER_TOOL_ID)
-  }, [id, order, filter])
-
-  // Sync enabled from store — lightweight, no re-registration
-  useEffect(() => {
-    widgetStoreActions.setToolEnabled(id, SEARCHER_TOOL_ID, enabled)
-  }, [id, enabled])
-
-  // Trigger pipeline re-execution when search text changes (debounced).
-  // The fn reads searchText from the store, so we just need to trigger the pipeline.
-  const debouncedTriggerPipeline = useCallback(() => {
-    if (debounceTimeoutRef.current) {
-      clearTimeout(debounceTimeoutRef.current)
-    }
-    debounceTimeoutRef.current = setTimeout(() => {
-      widgetStoreActions.triggerToolPipeline(id)
-    }, debounceDelay)
-  }, [id, debounceDelay])
-
-  // Auto-focus when enabled becomes true
-  useEffect(() => {
-    // Transition from disabled to enabled - focus input
-    if (enabled && !prevEnabledRef.current && inputRef.current) {
-      inputRef.current.focus()
-    }
+  const inputRef = useRef<HTMLInputElement | null>(null)
 
-    prevEnabledRef.current = enabled
-  }, [enabled])
+  // Hydrate from the store so re-toggling the input preserves any prior text.
+  const [local, setLocal] = useState<string>(
+    () =>
+      (getWidgetStore(id).getState().transformStates.searcher?.searchText as
+        string | undefined) ?? '',
+  )
 
-  // Cleanup debounce timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current)
-      }
-    }
-  }, [])
+  const debouncedWrite = useMemo(
+    () =>
+      debounce(
+        (value: unknown) => setSearcherText(id, value as string),
+        debounceMs,
+      ),
+    [id, debounceMs],
+  )
 
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = event.target.value
-      setSearchText(newValue)
-      debouncedTriggerPipeline()
+  const handleSearchTextChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value
+      setLocal(value)
+      debouncedWrite(value)
     },
-    [debouncedTriggerPipeline, setSearchText],
+    [debouncedWrite],
   )
 
   const handleClear = useCallback(() => {
-    setSearchText('')
-    widgetStoreActions.triggerToolPipeline(id)
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [id, setSearchText])
+    setLocal('')
+    setSearcherText(id, '')
+    // Re-arm the debounced timer with '' so any pending stale write resolves
+    // to the cleared value rather than re-applying the previous text.
+    debouncedWrite('')
+    inputRef.current?.focus()
+  }, [id, debouncedWrite])
 
-  if (!enabled) {
-    return null
-  }
-
-  const placeholder = labels?.placeholder ?? 'Search...'
-  const clearAriaLabel = labels?.clearAriaLabel ?? 'Clear search'
+  if (!enabled) return null
 
   return (
     <TextField
@@ -145,52 +75,39 @@ export function Searcher({
       size='small'
       fullWidth
       variant='filled'
-      placeholder={placeholder}
-      value={searchText}
-      onChange={handleChange}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position='start'>
-            <SearchOutlined />
-          </InputAdornment>
-        ),
-        endAdornment: searchText ? (
-          <InputAdornment position='end'>
-            <IconButton
-              size='small'
-              aria-label={clearAriaLabel}
-              onClick={handleClear}
-              edge='end'
-            >
-              {ClearIcon ?? <ClearOutlined fontSize='small' />}
-            </IconButton>
-          </InputAdornment>
-        ) : null,
+      placeholder={resolved.placeholder}
+      value={local}
+      onChange={handleSearchTextChange}
+      // The Searcher only mounts when the user explicitly toggles the
+      // SearcherToggle action — focusing the input on mount matches user
+      // intent, so the jsx-a11y/no-autofocus warning is the false-positive
+      // case (the rule targets unsolicited autofocus that disorients
+      // screen readers).
+      // eslint-disable-next-line
+      autoFocus
+      aria-label={resolved.placeholder}
+      sx={styles.input}
+      slotProps={{
+        input: {
+          startAdornment: (
+            <InputAdornment position='start'>
+              <SearchIcon fontSize='small' />
+            </InputAdornment>
+          ),
+          endAdornment: local ? (
+            <InputAdornment position='end'>
+              <IconButton
+                size='small'
+                edge='end'
+                aria-label={resolved.clearAriaLabel}
+                onClick={handleClear}
+              >
+                <ClearIcon fontSize='small' />
+              </IconButton>
+            </InputAdornment>
+          ) : null,
+        },
       }}
-      {...TextFieldProps}
     />
   )
 }
-
-/**
- * Default filter function that searches all string fields case-insensitively.
- * Note: Should be synchronous for the new pipeline architecture.
- */
-const defaultFilterFn: SearcherFilterFn = (
-  data: EchartWidgetData,
-  searchText: string,
-) => {
-  if (!searchText.trim()) return Promise.resolve(data)
-
-  const lowerSearch = searchText.toLowerCase()
-
-  return Promise.resolve(
-    data.map((series) =>
-      series.filter((item) =>
-        Object.values(item).some((value) =>
-          String(value).toLowerCase().includes(lowerSearch),
-        ),
-      ),
-    ),
-  )
-}