@carto/ps-react-ui 4.12.2 → 4.13.0

package/src/legend/components/legend-row/legend-row.test.tsx

@@ -0,0 +1,498 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { MenuItem } from '@mui/material'
+import { LegendProvider } from '../../provider'
+import { LegendRow } from './legend-row'
+import { LegendActions } from '../legend-actions/legend-actions'
+import { LegendVisibilityToggle } from '../legend-visibility-toggle/legend-visibility-toggle'
+import { LegendRowMenu } from '../legend-row-menu/legend-row-menu'
+import { LegendZoomTo } from '../legend-row-menu/legend-zoom-to'
+import { LegendOpacity } from '../legend-opacity/legend-opacity'
+import { LegendConfigSelect } from '../legend-config-select/legend-config-select'
+import { LegendItem } from '../legend-item/legend-item'
+import {
+  clearAllLegendStores,
+  getLegendStore,
+  type LegendLayerInput,
+  type LegendVariable,
+} from '../../stores'
+
+const cat: LegendVariable = {
+  type: 'category',
+  items: [{ label: 'A', color: '#123456' }],
+}
+
+afterEach(() => clearAllLegendStores())
+
+/**
+ * Full row composition (the module shape): actions in the header slot,
+ * config-select + item + opacity popover in the body. The menu is composed
+ * with its items (module-style: only when the app wires a handler).
+ */
+function renderRow(
+  id: string,
+  layers: LegendLayerInput[],
+  callbacks: { onZoomTo?: (id: string) => void } = {},
+  layerId = layers[0]!.id,
+) {
+  return render(
+    <LegendProvider id={id} layers={layers}>
+      <LegendRow layerId={layerId}>
+        {/* L→R: options · opacity · visibility (chevron appended after). */}
+        <LegendActions>
+          {callbacks.onZoomTo && (
+            <LegendRowMenu>
+              <LegendZoomTo onZoomTo={callbacks.onZoomTo} />
+            </LegendRowMenu>
+          )}
+          <LegendOpacity.Trigger />
+          <LegendVisibilityToggle />
+        </LegendActions>
+        <LegendConfigSelect />
+        <LegendItem />
+        <LegendOpacity.Popover />
+      </LegendRow>
+    </LegendProvider>,
+  )
+}
+
+describe('<LegendRow> composition', () => {
+  it('partitions Actions into the header and other children into the body', () => {
+    const { container } = renderRow('comp1', [
+      { id: 'a', name: 'My layer', variables: [cat] },
+    ])
+    // Title from the store.
+    expect(screen.getByText('My layer')).toBeTruthy()
+    // The visibility action landed inside the header fade group…
+    const fade = container.querySelector('.PsLegend-rowFade')!
+    expect(fade.contains(screen.getByLabelText('Hide layer'))).toBe(true)
+    // …while the item renderer landed in the body, outside the fade group.
+    expect(fade.contains(screen.getByText('A'))).toBe(false)
+  })
+
+  it('toggles visibility through the store', () => {
+    renderRow('r1', [{ id: 'a', name: 'A', variables: [cat] }])
+    fireEvent.click(screen.getByLabelText('Hide layer'))
+    expect(getLegendStore('r1').getState().layers.a!.visible).toBe(false)
+    fireEvent.click(screen.getByLabelText('Show layer'))
+    expect(getLegendStore('r1').getState().layers.a!.visible).toBe(true)
+  })
+
+  it('toggles collapse through the store', () => {
+    renderRow('r2', [{ id: 'a', name: 'A', variables: [cat] }])
+    fireEvent.click(screen.getByLabelText('Collapse layer'))
+    expect(getLegendStore('r2').getState().layers.a!.collapsed).toBe(true)
+  })
+
+  it('eye toggle drives collapse; a manual chevron collapse persists', () => {
+    renderRow('r6', [{ id: 'a', name: 'A', variables: [cat] }])
+    // Hide → collapses, and the chevron is disabled while hidden.
+    fireEvent.click(screen.getByLabelText('Hide layer'))
+    expect(getLegendStore('r6').getState().layers.a!.collapsed).toBe(true)
+    const chevron = screen.getByLabelText<HTMLButtonElement>('Expand layer')
+    expect(chevron.disabled).toBe(true)
+    fireEvent.click(screen.getByLabelText('Show layer'))
+    expect(getLegendStore('r6').getState().layers.a!.collapsed).toBe(false)
+
+    // Manual collapse first → hide → show → stays collapsed.
+    fireEvent.click(screen.getByLabelText('Collapse layer'))
+    fireEvent.click(screen.getByLabelText('Hide layer'))
+    fireEvent.click(screen.getByLabelText('Show layer'))
+    expect(getLegendStore('r6').getState().layers.a!.collapsed).toBe(true)
+  })
+
+  it('renders the config select when the layer declares sections', () => {
+    renderRow('r5', [
+      {
+        id: 'a',
+        name: 'A',
+        variables: [cat],
+        sections: [{ id: 's1', options: ['x', 'y'], active: 'x' }],
+      },
+    ])
+    // Closed field shows the first section's active value.
+    expect(screen.getByRole('button', { name: 'Attribute' }).textContent).toBe(
+      'x',
+    )
+  })
+
+  it('stacks every variable of the layer with a single layer-level note', () => {
+    renderRow('multi', [
+      {
+        id: 'a',
+        name: 'Multi',
+        variables: [
+          cat,
+          { type: 'proportion', min: 0, max: 100, attribute: 'revenue' },
+        ],
+        helperText: 'One note for the whole layer.',
+      },
+    ])
+    // Both renderers are in the body…
+    expect(screen.getByText('A')).toBeTruthy() // category item
+    expect(screen.getByText('Radius range by')).toBeTruthy() // proportion header
+    // …and the note renders exactly once, after all variables.
+    expect(screen.getAllByText('One note for the whole layer.')).toHaveLength(1)
+  })
+})
+
+describe('<LegendRowMenu> (agnostic shell)', () => {
+  it('Legend.ZoomTo fires the composed handler with the layer id; the menu closes', () => {
+    const onZoomTo = vi.fn()
+    renderRow('m3', [{ id: 'a', name: 'A', variables: [cat] }], { onZoomTo })
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    fireEvent.click(screen.getByText('Zoom to'))
+    expect(onZoomTo).toHaveBeenCalledWith('a')
+    // Menu-level onClick closed it.
+    expect(screen.queryByRole('menuitem')).toBeNull()
+  })
+
+  it('renders any consumer MenuItem; clicks dispatch and close the menu', () => {
+    const onCustom = vi.fn()
+    render(
+      <LegendProvider
+        id='m5'
+        layers={[{ id: 'a', name: 'A', variables: [cat] }]}
+      >
+        <LegendRow layerId='a'>
+          <LegendActions>
+            <LegendRowMenu>
+              <MenuItem onClick={onCustom}>Custom thing</MenuItem>
+            </LegendRowMenu>
+          </LegendActions>
+        </LegendRow>
+      </LegendProvider>,
+    )
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    fireEvent.click(screen.getByText('Custom thing'))
+    expect(onCustom).toHaveBeenCalled()
+    expect(screen.queryByRole('menuitem')).toBeNull()
+  })
+
+  it('renders nothing without children (module gates on its own handler)', () => {
+    renderRow('m4', [{ id: 'a', name: 'A', variables: [cat] }])
+    expect(screen.queryByLabelText('Layer options')).toBeNull()
+
+    render(
+      <LegendProvider
+        id='m6'
+        layers={[{ id: 'a', name: 'A', variables: [cat] }]}
+      >
+        <LegendRow layerId='a'>
+          <LegendActions>
+            <LegendRowMenu />
+          </LegendActions>
+        </LegendRow>
+      </LegendProvider>,
+    )
+    expect(screen.queryByLabelText('Layer options')).toBeNull()
+  })
+})
+
+describe('hover-fade dirty pinning (.active)', () => {
+  it('marks the visibility toggle active while the layer is hidden', () => {
+    renderRow('f1', [{ id: 'a', name: 'A', variables: [cat] }])
+    fireEvent.click(screen.getByLabelText('Hide layer'))
+    expect(screen.getByLabelText('Show layer').className).toContain('active')
+    fireEvent.click(screen.getByLabelText('Show layer'))
+    expect(screen.getByLabelText('Hide layer').className).not.toContain(
+      'active',
+    )
+  })
+
+  it('marks the menu trigger active while its menu is open', () => {
+    renderRow('f2', [{ id: 'a', name: 'A', variables: [cat] }], {
+      onZoomTo: vi.fn(),
+    })
+    const trigger = screen.getByLabelText('Layer options')
+    expect(trigger.className).not.toContain('active')
+    fireEvent.click(trigger)
+    expect(trigger.className).toContain('active')
+  })
+
+  it('marks the opacity action active while its popover is open or opacity ≠ 1', () => {
+    const { baseElement } = renderRow('f3', [
+      { id: 'a', name: 'A', variables: [cat] },
+    ])
+    const action = screen.getByRole('button', { name: 'Opacity' })
+    // The pin lives on the action's tooltip span — the fade group's child.
+    const pin = action.parentElement!
+    expect(pin.className).not.toContain('active')
+
+    fireEvent.click(action)
+    expect(pin.className).toContain('active') // open pins it
+
+    fireEvent.change(screen.getByRole('slider', { name: 'Opacity' }), {
+      target: { value: '50' },
+    })
+    // Close via the backdrop: stays pinned because opacity is dirty.
+    fireEvent.click(baseElement.querySelector('.MuiBackdrop-root')!)
+    expect(pin.className).toContain('active')
+  })
+
+  it('hides every action but the eye + chevron while the layer is hidden', () => {
+    renderRow('f4', [{ id: 'a', name: 'A', variables: [cat] }], {
+      onZoomTo: vi.fn(),
+    })
+    expect(screen.getByRole('button', { name: 'Opacity' })).toBeTruthy()
+    expect(screen.getByLabelText('Layer options')).toBeTruthy()
+
+    fireEvent.click(screen.getByLabelText('Hide layer'))
+    // Opacity + ⋮ menu disappear entirely…
+    expect(screen.queryByRole('button', { name: 'Opacity' })).toBeNull()
+    expect(screen.queryByLabelText('Layer options')).toBeNull()
+    // …only the visibility eye (now "Show layer") and the chevron remain.
+    expect(screen.getByLabelText('Show layer')).toBeTruthy()
+    expect(screen.getByLabelText('Expand layer')).toBeTruthy()
+
+    fireEvent.click(screen.getByLabelText('Show layer'))
+    // Showing the layer brings the actions back.
+    expect(screen.getByRole('button', { name: 'Opacity' })).toBeTruthy()
+    expect(screen.getByLabelText('Layer options')).toBeTruthy()
+  })
+})
+
+describe('<LegendOpacity> / <LegendConfigSelect> dispatch', () => {
+  it('the trigger opens the popover declared elsewhere in the row (shared context)', () => {
+    const { baseElement } = renderRow('anchor', [
+      { id: 'a', name: 'A', variables: [cat] },
+    ])
+    expect(screen.queryByRole('slider')).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'Opacity' }))
+    // Trigger (header) and Popover (body) communicate through the row context.
+    expect(screen.getByRole('slider', { name: 'Opacity' })).toBeTruthy()
+    expect(screen.getByRole('textbox', { name: 'Opacity' })).toBeTruthy()
+    fireEvent.click(baseElement.querySelector('.MuiBackdrop-root')!)
+    expect(screen.queryByRole('slider')).toBeNull()
+  })
+
+  it('slider release commits setOpacity (0–1) to the store', () => {
+    renderRow('c1', [{ id: 'a', name: 'A', variables: [cat] }])
+    fireEvent.click(screen.getByRole('button', { name: 'Opacity' }))
+    const slider = screen.getByRole('slider', { name: 'Opacity' })
+    // The hidden-input change path fires MUI's onChangeCommitted too.
+    fireEvent.change(slider, { target: { value: '40' } })
+    expect(getLegendStore('c1').getState().layers.a!.opacity).toBe(0.4)
+  })
+
+  it('percent input commits live and clamps to 0–100', () => {
+    renderRow('c3', [{ id: 'a', name: 'A', variables: [cat] }])
+    fireEvent.click(screen.getByRole('button', { name: 'Opacity' }))
+    const input = screen.getByRole('textbox', { name: 'Opacity' })
+
+    fireEvent.change(input, { target: { value: '40' } })
+    expect(getLegendStore('c3').getState().layers.a!.opacity).toBe(0.4)
+
+    // Out-of-range input clamps (no ellipsized "1…" — the field shows 100).
+    fireEvent.change(input, { target: { value: '250' } })
+    expect(getLegendStore('c3').getState().layers.a!.opacity).toBe(1)
+    expect((input as HTMLInputElement).value).toBe('100')
+
+    // Empty input doesn't commit; blur snaps back to the store value.
+    fireEvent.change(input, { target: { value: '' } })
+    expect(getLegendStore('c3').getState().layers.a!.opacity).toBe(1)
+    fireEvent.blur(input)
+    expect((input as HTMLInputElement).value).toBe('100')
+  })
+
+  it('a single section renders without its title; a pick writes the store', () => {
+    renderRow('c2', [
+      {
+        id: 'a',
+        name: 'A',
+        variables: [cat],
+        sections: [
+          { id: 's1', title: 'Global', options: ['x', 'y'], active: 'x' },
+        ],
+      },
+    ])
+    fireEvent.click(screen.getByRole('button', { name: 'Attribute' }))
+    expect(screen.queryByText('Global')).toBeNull() // single section → no title
+    fireEvent.click(screen.getByRole('menuitem', { name: 'y' }))
+    expect(getLegendStore('c2').getState().layers.a!.sections![0]!.active).toBe(
+      'y',
+    )
+    // Menu closed after the pick.
+    expect(screen.queryByRole('menuitem')).toBeNull()
+  })
+
+  it('multiple sections show titles and each keeps its own active', () => {
+    renderRow('c4', [
+      {
+        id: 'a',
+        name: 'A',
+        variables: [cat],
+        sections: [
+          {
+            id: 'global',
+            title: 'Global',
+            options: ['Preset 01', 'Preset 04'],
+            active: 'Preset 04',
+          },
+          {
+            id: 'vars',
+            title: 'Variables 1',
+            options: ['Atributo 01', 'Atributo 02'],
+            active: 'Atributo 01',
+          },
+        ],
+      },
+    ])
+    // Closed display = first section's active.
+    const trigger = screen.getByRole('button', { name: 'Attribute' })
+    expect(trigger.textContent).toBe('Preset 04')
+
+    fireEvent.click(trigger)
+    expect(screen.getByText('Global')).toBeTruthy()
+    expect(screen.getByText('Variables 1')).toBeTruthy()
+    // Both sections highlight their own active simultaneously.
+    expect(
+      screen.getByRole('menuitem', { name: 'Preset 04' }).className,
+    ).toContain('Mui-selected')
+    expect(
+      screen.getByRole('menuitem', { name: 'Atributo 01' }).className,
+    ).toContain('Mui-selected')
+
+    // Picking in the second section leaves the first untouched.
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Atributo 02' }))
+    const sections = getLegendStore('c4').getState().layers.a!.sections!
+    expect(sections[0]!.active).toBe('Preset 04')
+    expect(sections[1]!.active).toBe('Atributo 02')
+    expect(trigger.textContent).toBe('Preset 04') // display unchanged
+  })
+})
+
+describe('<LegendVisibilityToggle> controlled mode', () => {
+  it('renders the eye for each tri-state and fires onToggle with the next visibility', () => {
+    const onToggle = vi.fn()
+    const { rerender } = render(
+      <LegendProvider id='vt1' layers={[]}>
+        <LegendVisibilityToggle visibility='visible' onToggle={onToggle} />
+      </LegendProvider>,
+    )
+    // No Row/Group context needed — works standalone.
+    const eye = screen.getByLabelText('Hide layer')
+    expect(eye.className).not.toContain('active')
+    fireEvent.click(eye)
+    expect(onToggle).toHaveBeenLastCalledWith(false)
+
+    rerender(
+      <LegendProvider id='vt1' layers={[]}>
+        <LegendVisibilityToggle visibility='mixed' onToggle={onToggle} />
+      </LegendProvider>,
+    )
+    const mixed = screen.getByLabelText('Hide layer')
+    expect(mixed.className).toContain('active')
+    expect(
+      mixed.querySelector('[data-testid="VisibilityIndeterminateIcon"]'),
+    ).toBeTruthy()
+    fireEvent.click(mixed)
+    expect(onToggle).toHaveBeenLastCalledWith(false)
+
+    rerender(
+      <LegendProvider id='vt1' layers={[]}>
+        <LegendVisibilityToggle visibility='hidden' onToggle={onToggle} />
+      </LegendProvider>,
+    )
+    const hidden = screen.getByLabelText('Show layer')
+    expect(hidden.className).toContain('active')
+    fireEvent.click(hidden)
+    expect(onToggle).toHaveBeenLastCalledWith(true)
+  })
+
+  it('controlled props win over the row context and accept label overrides', () => {
+    const onToggle = vi.fn()
+    renderRow('vt2', [{ id: 'a', name: 'A', variables: [cat] }])
+    render(
+      <LegendProvider
+        id='vt3'
+        layers={[{ id: 'a', name: 'A', variables: [cat] }]}
+      >
+        <LegendRow layerId='a'>
+          <LegendActions>
+            <LegendVisibilityToggle
+              visibility='hidden'
+              onToggle={onToggle}
+              labels={{ hideLayer: 'Hide section', showLayer: 'Show section' }}
+            />
+          </LegendActions>
+        </LegendRow>
+      </LegendProvider>,
+    )
+    // The layer is visible in the store, but the controlled props render the
+    // hidden eye with the custom label — context is ignored.
+    const eye = screen.getByLabelText('Show section')
+    fireEvent.click(eye)
+    expect(onToggle).toHaveBeenCalledWith(true)
+    expect(getLegendStore('vt3').getState().layers.a!.visible).toBe(true)
+  })
+})
+
+describe('labels override', () => {
+  it('Provider labels replace the defaults end-to-end', () => {
+    render(
+      <LegendProvider
+        id='l10n'
+        layers={[{ id: 'a', name: 'A', variables: [cat] }]}
+        labels={{ opacity: 'Opacidad', hideLayer: 'Ocultar capa' }}
+      >
+        <LegendRow layerId='a'>
+          <LegendActions>
+            <LegendOpacity.Trigger />
+            <LegendVisibilityToggle />
+          </LegendActions>
+        </LegendRow>
+      </LegendProvider>,
+    )
+    // The opacity action carries the overridden label (aria + tooltip).
+    expect(screen.getByRole('button', { name: 'Opacidad' })).toBeTruthy()
+    expect(screen.getByLabelText('Ocultar capa')).toBeTruthy()
+  })
+})
+
+describe('<LegendProvider> keepAlive', () => {
+  it('preserves interactive state across remounts by default', () => {
+    const ui = (
+      <LegendProvider
+        id='ka1'
+        layers={[{ id: 'a', name: 'A', variables: [cat] }]}
+      >
+        <LegendRow layerId='a'>
+          <LegendActions>
+            <LegendVisibilityToggle />
+          </LegendActions>
+        </LegendRow>
+      </LegendProvider>
+    )
+    const { unmount } = render(ui)
+    fireEvent.click(screen.getByLabelText('Hide layer'))
+    expect(getLegendStore('ka1').getState().layers.a!.visible).toBe(false)
+    unmount()
+
+    render(ui)
+    // Store survived: still hidden after remount.
+    expect(getLegendStore('ka1').getState().layers.a!.visible).toBe(false)
+  })
+
+  it('keepAlive=false resets state on remount', () => {
+    const ui = (
+      <LegendProvider
+        id='ka2'
+        keepAlive={false}
+        layers={[{ id: 'a', name: 'A', variables: [cat] }]}
+      >
+        <LegendRow layerId='a'>
+          <LegendActions>
+            <LegendVisibilityToggle />
+          </LegendActions>
+        </LegendRow>
+      </LegendProvider>
+    )
+    const { unmount } = render(ui)
+    fireEvent.click(screen.getByLabelText('Hide layer'))
+    unmount()
+
+    render(ui)
+    expect(getLegendStore('ka2').getState().layers.a!.visible).toBe(true)
+  })
+})

package/src/legend/components/legend-row/legend-row.tsx

@@ -0,0 +1,129 @@
+import { useMemo, useState, type ReactNode } from 'react'
+import { Box, Collapse, IconButton, Typography } from '@mui/material'
+import {
+  ExpandMore as ExpandMoreIcon,
+  ExpandLess as ExpandLessIcon,
+} from '@mui/icons-material'
+import { SmartTooltip } from '../../../components/smart-tooltip/smart-tooltip'
+import { useLegendId, useLegendShallow } from '../../stores'
+import { useLegendConfig } from '../../provider'
+import { LegendRowContext, type LegendRowContextValue } from '../contexts'
+import { partitionLegendChildren } from '../legend-actions/legend-actions'
+import { LEGEND_GROUP_HEADER_HEIGHT } from '../legend-group/styles'
+import { styles } from './styles'
+
+export interface LegendRowProps {
+  layerId: string
+  /**
+   * Composition slots: `<Legend.Actions>` children render in the sticky
+   * header next to the collapse chevron (hover-fade); everything else renders
+   * in the collapsible body, followed by the layer's `helperText` footer.
+   */
+  children?: ReactNode
+}
+
+/**
+ * Store-connected layer-row wrapper (widgets-v2 `Wrapper` parity). Renders
+ * the sticky header — title + subtitle from the store with a smart-truncating
+ * tooltip, the partitioned `<Legend.Actions>` slot, and the collapse chevron —
+ * over the collapsible body. Provides the row composition context so actions
+ * (`Legend.VisibilityToggle`, `Legend.Opacity.*`, `Legend.RowMenu`,
+ * `Legend.ConfigSelect`, `Legend.Item`) resolve the layer without props.
+ * When the layer is hidden the body is force-collapsed, the content dims,
+ * and the chevron is disabled.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export function LegendRow({ layerId, children }: LegendRowProps) {
+  const id = useLegendId()
+  const layer = useLegendShallow(id, (s) => s.layers[layerId])
+  const setCollapsed = useLegendShallow(id, (s) => s.setCollapsed)
+  const { labels } = useLegendConfig()
+
+  const [headerEl, setHeaderEl] = useState<HTMLElement | null>(null)
+  const [opacityOpen, setOpacityOpen] = useState(false)
+  const rowContext = useMemo<LegendRowContextValue>(
+    () => ({ layerId, headerEl, opacityOpen, setOpacityOpen }),
+    [layerId, headerEl, opacityOpen],
+  )
+
+  if (!layer) return null
+
+  const { actions, body } = partitionLegendChildren(children)
+  const effectivelyCollapsed = !layer.visible || layer.collapsed
+  // Grouped rows pin below their group's sticky header.
+  const stickyTop = layer.groupId ? LEGEND_GROUP_HEADER_HEIGHT : 0
+
+  return (
+    <LegendRowContext.Provider value={rowContext}>
+      <Box sx={styles.row}>
+        {/* Inline style: per-instance sticky offset (0 or the group-header
+            height), no emotion class churn. */}
+        <Box ref={setHeaderEl} sx={styles.header} style={{ top: stickyTop }}>
+          <Box sx={styles.titleBox}>
+            <Box sx={styles.titleLine}>
+              <SmartTooltip title={layer.name} dependencies={[layer.name]}>
+                {({ ref }) => (
+                  <Typography
+                    ref={ref}
+                    variant='button'
+                    color='text.primary'
+                    sx={styles.title}
+                  >
+                    {layer.name}
+                  </Typography>
+                )}
+              </SmartTooltip>
+            </Box>
+            {layer.subtitle && (
+              <Typography variant='caption' color='text.secondary'>
+                {layer.subtitle}
+              </Typography>
+            )}
+          </Box>
+
+          <Box sx={styles.actions}>
+            {actions}
+            <IconButton
+              size='small'
+              onClick={() => setCollapsed(layerId, !layer.collapsed)}
+              disabled={!layer.visible}
+              aria-label={
+                effectivelyCollapsed ? labels.expandLayer : labels.collapseLayer
+              }
+            >
+              {effectivelyCollapsed ? (
+                <ExpandMoreIcon fontSize='small' />
+              ) : (
+                <ExpandLessIcon fontSize='small' />
+              )}
+            </IconButton>
+          </Box>
+        </Box>
+
+        <Collapse in={!effectivelyCollapsed}>
+          <Box
+            sx={
+              layer.visible
+                ? styles.content
+                : { ...styles.content, ...styles.dimmed }
+            }
+          >
+            {body}
+          </Box>
+          {layer.helperText && (
+            <Box sx={styles.footer}>
+              {typeof layer.helperText === 'string' ? (
+                <Typography variant='caption' color='text.secondary'>
+                  {layer.helperText}
+                </Typography>
+              ) : (
+                layer.helperText
+              )}
+            </Box>
+          )}
+        </Collapse>
+      </Box>
+    </LegendRowContext.Provider>
+  )
+}