@carto/ps-react-ui 4.23.0 → 4.24.0

package/src/widgets-v2/actions/searcher/filter.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { filterBySearchText } from './filter'
+
+const DATA = [
+  [
+    { name: 'ES', value: 1 },
+    { name: 'FR', value: 2 },
+  ],
+]
+const COUNTRIES: Record<string, string> = { ES: 'Spain', FR: 'France' }
+const label = (v: string | number) => COUNTRIES[v] ?? v
+
+describe('filterBySearchText', () => {
+  it('matches the raw name when there is no label formatter', () => {
+    expect(filterBySearchText(DATA, 'es')).toEqual([[{ name: 'ES', value: 1 }]])
+  })
+
+  it('matches the formatted label, which is what the user sees', () => {
+    expect(filterBySearchText(DATA, 'spa', label)).toEqual([
+      [{ name: 'ES', value: 1 }],
+    ])
+  })
+
+  it('no longer matches a raw name the label does not show', () => {
+    // "es" is in the raw code "ES" but in neither "Spain" nor "France".
+    expect(filterBySearchText(DATA, 'es', label)).toEqual([[]])
+  })
+})

package/src/widgets-v2/actions/searcher/filter.ts

@@ -1,9 +1,14 @@
 /**
  * Filters a 2D series of `{name, ...}` records by case-insensitive substring on
- * the `name` field. Keeps the dataset shape (one inner array per series).
+ * the label the user sees: `labelFormatter(name)` when a formatter is given,
+ * `name` otherwise. Keeps the dataset shape (one inner array per series).
  * Used by the Searcher action's data transform.
  */
-export function filterBySearchText(input: unknown, search: string): unknown {
+export function filterBySearchText(
+  input: unknown,
+  search: string,
+  labelFormatter?: (value: string | number) => string | number,
+): unknown {
   if (!search) return input
   const needle = search.toLowerCase()
   if (!Array.isArray(input)) return input
@@ -13,14 +18,27 @@ export function filterBySearchText(input: unknown, search: string): unknown {
       if (item == null) return false
       if (typeof item === 'object' && 'name' in item) {
         const rawName = (item as { name: unknown }).name
-        const name = rawName == null ? '' : stringifyPrimitive(rawName)
-        return name.toLowerCase().includes(needle)
+        return labelOf(rawName, labelFormatter).toLowerCase().includes(needle)
       }
       return stringifyPrimitive(item).toLowerCase().includes(needle)
     })
   })
 }
 
+function labelOf(
+  name: unknown,
+  labelFormatter?: (value: string | number) => string | number,
+): string {
+  if (name == null) return ''
+  if (
+    labelFormatter &&
+    (typeof name === 'string' || typeof name === 'number')
+  ) {
+    return stringifyPrimitive(labelFormatter(name))
+  }
+  return stringifyPrimitive(name)
+}
+
 function stringifyPrimitive(v: unknown): string {
   if (typeof v === 'string') return v
   if (typeof v === 'number' || typeof v === 'boolean') return String(v)

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

@@ -46,11 +46,16 @@ export function SearcherToggle({
     (s) => (s.transformStates.searcher?.searchText as string | undefined) ?? '',
   )
 
-  // The transform fn closes over `text`. Memoize via useCallback so identity
-  // only changes when text changes, allowing useTransform to re-register.
+  // Matched against the label the user sees, so a formatted name is found
+  // by what's on screen rather than by its raw value.
+  const labelFormatter = useWidget(id, (s) => s.labelFormatter)
+
+  // The transform fn closes over `text` and `labelFormatter`. Memoize via
+  // useCallback so identity only changes when either does, allowing
+  // useTransform to re-register.
   const fn = useCallback(
-    (data: unknown) => filterBySearchText(data, text),
-    [text],
+    (data: unknown) => filterBySearchText(data, text, labelFormatter),
+    [text, labelFormatter],
   )
 
   const { enabled, toggle } = useSingleTransform(id, SEARCHER_DESCRIPTOR, fn, {

package/src/widgets-v2/actions/searcher/searcher.test.tsx

@@ -89,4 +89,26 @@ describe('<Searcher> + <SearcherToggle>', () => {
       vi.useRealTimers()
     }
   })
+
+  it('filters by the formatted label the widget shows', () => {
+    const labelFormatter = (v: string | number) =>
+      ({ apple: 'Manzana', banana: 'Plátano' })[String(v)] ?? v
+    render(
+      <Provider id='sr-label' data={DATA} labelFormatter={labelFormatter}>
+        <SearcherToggle initialEnabled />
+        <Searcher />
+      </Provider>,
+    )
+    act(() =>
+      getWidgetStore('sr-label').setState((s) => ({
+        transformStates: {
+          ...s.transformStates,
+          searcher: { ...s.transformStates.searcher!, searchText: 'manz' },
+        },
+      })),
+    )
+    expect(getWidgetStore('sr-label').getState().data).toEqual([
+      [{ name: 'apple', value: 1 }],
+    ])
+  })
 })

package/src/widgets-v2/wrapper/style.ts

@@ -57,14 +57,50 @@ export const styles = {
     height: ({ spacing }: Theme) => spacing(0.35),
     zIndex: 1,
   },
+  // Title button, then Actions / Options, then the chevron, as siblings.
+  // Same spacing as when they all sat inside the summary: its 16px end
+  // padding moves to the row, the content's 6px end padding sits before
+  // the chevron.
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: ({ spacing }: Theme) => spacing(0.5),
+    minHeight: ({ spacing }: Theme) => spacing(7),
+    paddingInlineEnd: ({ spacing }: Theme) => spacing(2),
+  },
   summary: {
+    flex: 1,
+    minWidth: 0,
     minHeight: ({ spacing }: Theme) => spacing(7),
+    paddingInlineEnd: 0,
     '& .MuiAccordionSummary-content': {
-      gap: ({ spacing }: Theme) => spacing(0.5),
-      paddingInlineEnd: ({ spacing }: Theme) => spacing(0.75),
       alignItems: 'center',
+      minWidth: 0,
+      marginInlineEnd: 0,
+      paddingInlineEnd: 0,
     },
   },
+  // No chevron (disabled): keep the actions where they sat when the
+  // chevron's slot was empty — 10px further from the edge.
+  headerNoIcon: {
+    paddingInlineEnd: ({ spacing }: Theme) => spacing(3.25),
+  },
+  // Looks like the icon the summary used to render in its
+  // `expandIconWrapper`: 18px, secondary text colour, rotated when open.
+  expandIcon: {
+    display: 'flex',
+    marginInlineStart: ({ spacing }: Theme) => spacing(0.75),
+    color: 'text.secondary',
+    cursor: 'pointer',
+    '& svg': { width: 18, height: 18, color: 'inherit' },
+    transition: ({ transitions }: Theme) =>
+      transitions.create('transform', {
+        duration: transitions.duration.shortest,
+      }),
+  },
+  expanded: {
+    transform: 'rotate(180deg)',
+  },
   // Disabled state — only the collapse toggle is inert (enforced by the
   // guarded `onChange` handler, not `pointer-events`). Actions and Options in
   // the summary row, and the details panel, all keep their events. We just

package/src/widgets-v2/wrapper/widget-actions.tsx

@@ -14,8 +14,8 @@ export interface ActionsProps {
  * pointer devices), and stay full-opacity when a descendant is marked with
  * `.active` — typically applied by toggled actions.
  *
- * The container also stops click propagation so interacting with an action
- * doesn't toggle the wrapper's collapse.
+ * The container also stops click propagation, so a click on an action never
+ * reaches handlers further up the widget.
  */
 export function Actions({ sx, children }: ActionsProps) {
   return (

package/src/widgets-v2/wrapper/widget-wrapper.test.tsx

@@ -112,11 +112,41 @@ describe('<Wrapper>', () => {
     )
     const actionBtn = screen.getByTestId('action-btn')
     const bodyContent = screen.getByTestId('body-content')
-    // The action lives inside the AccordionSummary, the body inside AccordionDetails.
-    expect(actionBtn.closest('.MuiAccordionSummary-root')).not.toBeNull()
+    // The action lives in the header row, beside the summary button rather
+    // than inside it (a <button> can't contain another); the body lives in
+    // AccordionDetails.
+    expect(actionBtn.closest('.widget-wrapper-header')).not.toBeNull()
+    expect(actionBtn.closest('.MuiAccordionSummary-root')).toBeNull()
     expect(bodyContent.closest('.MuiAccordionDetails-root')).not.toBeNull()
   })
 
+  it('never nests a button inside another', () => {
+    const { container } = render(
+      withProvider(
+        'wrap-6b',
+        <Wrapper title='t'>
+          <Actions>
+            <button type='button'>A</button>
+          </Actions>
+        </Wrapper>,
+      ),
+    )
+    expect(container.querySelector('button button')).toBeNull()
+  })
+
+  it('clicking the chevron toggles the wrapper', () => {
+    const { container } = render(
+      withProvider('wrap-6c', <Wrapper title='t'>body</Wrapper>),
+    )
+    const summary = screen.getByRole('button', { name: 'Collapse' })
+    expect(summary.getAttribute('aria-expanded')).toBe('true')
+    const chevron = container.querySelector(
+      '.widget-wrapper-header [aria-hidden]',
+    )
+    fireEvent.click(chevron!)
+    expect(summary.getAttribute('aria-expanded')).toBe('false')
+  })
+
   it('shows a LinearProgress at the top when the store reports isFetching', () => {
     render(
       withProvider(

package/src/widgets-v2/wrapper/widget-wrapper.tsx

@@ -54,8 +54,8 @@ export interface WrapperProps {
   variant?: 'outlined' | 'elevation'
   labels?: Partial<WrapperLabels>
   /**
-   * Icon shown at the right edge of the summary row. Accordion rotates it
-   * 180° automatically when the wrapper expands. Default: `ExpandMoreIcon`.
+   * Icon shown at the right edge of the header row, rotated 180° while the
+   * wrapper is expanded. Default: `ExpandMoreIcon`.
    */
   expandIcon?: ComponentType<SvgIconProps>
   iconProps?: SvgIconProps
@@ -117,10 +117,23 @@ export function Wrapper({
 
   const ariaLabel = effectiveCollapsed ? _labels.expand : _labels.collapse
 
+  const expanded = !effectiveCollapsed
+  const toggle = useCallback(
+    () => handleAccordionToggle(null, !expanded),
+    [handleAccordionToggle, expanded],
+  )
+
+  // The header row is the Accordion's first child, which MUI treats as its
+  // summary slot. Only the title sits inside `<AccordionSummary>` — it
+  // renders as a `<button>`, and Actions / Options hold buttons of their
+  // own, which HTML doesn't allow inside another button. They sit next to
+  // it instead, followed by the chevron: a pointer shortcut for the same
+  // toggle, hidden from assistive tech since the summary button already
+  // carries it.
   return (
     <Accordion
       data-collapsed={effectiveCollapsed ? 'true' : undefined}
-      expanded={!effectiveCollapsed}
+      expanded={expanded}
       onChange={handleAccordionToggle}
       disableGutters
       elevation={0}
@@ -131,37 +144,50 @@ export function Wrapper({
         ...sx,
       }}
     >
-      {isFetching ? (
-        <LinearProgress sx={styles.loading} color='primary' />
-      ) : null}
-
-      <AccordionSummary
-        expandIcon={
-          disabled ? null : <ExpandIcon fontSize='small' {...iconProps} />
-        }
-        aria-label={ariaLabel}
-        aria-disabled={disabled || undefined}
-        sx={{
-          ...styles.summary,
-          ...(disabled ? styles.summaryDisabled : null),
-        }}
+      <Box
+        className='widget-wrapper-header'
+        sx={{ ...styles.header, ...(disabled && styles.headerNoIcon) }}
       >
-        <SmartTooltip title={title}>
-          {({ ref }) => (
-            <Box sx={styles.titleCell}>
-              <Typography
-                ref={ref}
-                variant='subtitle1'
-                sx={styles.titleText}
-                textTransform='none'
-              >
-                {title}
-              </Typography>
-            </Box>
-          )}
-        </SmartTooltip>
+        {isFetching ? (
+          <LinearProgress sx={styles.loading} color='primary' />
+        ) : null}
+        <AccordionSummary
+          // The chevron is rendered after Actions below; `null` also keeps
+          // a theme-level default icon out of the summary.
+          expandIcon={null}
+          aria-label={ariaLabel}
+          aria-disabled={disabled || undefined}
+          sx={{
+            ...styles.summary,
+            ...(disabled ? styles.summaryDisabled : null),
+          }}
+        >
+          <SmartTooltip title={title}>
+            {({ ref }) => (
+              <Box sx={styles.titleCell}>
+                <Typography
+                  ref={ref}
+                  variant='subtitle1'
+                  sx={styles.titleText}
+                  textTransform='none'
+                >
+                  {title}
+                </Typography>
+              </Box>
+            )}
+          </SmartTooltip>
+        </AccordionSummary>
         {summarySlots}
-      </AccordionSummary>
+        {disabled ? null : (
+          <Box
+            aria-hidden
+            onClick={toggle}
+            sx={{ ...styles.expandIcon, ...(expanded && styles.expanded) }}
+          >
+            <ExpandIcon fontSize='small' {...iconProps} />
+          </Box>
+        )}
+      </Box>
       <AccordionDetails sx={styles.detail}>{detailsSlots}</AccordionDetails>
     </Accordion>
   )