@carto/ps-react-ui 5.0.0-widgets.9 → 5.1.0

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

@@ -0,0 +1,170 @@
+import { useMemo, useState, type ReactNode } from 'react'
+import { Box, Collapse, Typography } from '@mui/material'
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material'
+import { SmartTooltip } from '../../../components/smart-tooltip/smart-tooltip'
+import {
+  selectLayerCollapsible,
+  useLegendId,
+  useLegendShallow,
+  useLegendStore,
+} from '../../stores'
+import { accordionKeyDown } from '../a11y'
+import {
+  LegendRowContext,
+  type LegendRowContextValue,
+  useLegendGroupId,
+} from '../contexts'
+import { partitionLegendChildren } from '../legend-actions/legend-actions'
+import { LEGEND_GROUP_HEADER_HEIGHT } from '../legend-group/styles'
+import { useLegendSortable } from '../legend-sortable/contexts'
+import {
+  SortableEntity,
+  type SortableEntityRenderProps,
+} from '../legend-sortable/sortable-entity'
+import { styles } from './styles'
+
+export interface LegendRowProps {
+  layerId: string
+  /**
+   * `<Legend.Actions>` in the sticky header; body children + `helperText` footer.
+   * Place `<Legend.Opacity.Inline />` first in the body.
+   */
+  children?: ReactNode
+}
+
+/**
+ * Store-connected layer row. Provides row context for actions; hidden layers
+ * force-collapse the body.
+ *
+ * @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 collapsible = useLegendStore(id, (s) =>
+    selectLayerCollapsible(s, layerId),
+  )
+  const inGroup = useLegendGroupId() !== null
+  const sortable = useLegendSortable()
+
+  const [opacityOpen, setOpacityOpen] = useState(false)
+  // Hidden rows derive opacityOpen=false so menu `.active` never pins while hidden.
+  const visible = layer?.visible ?? true
+  const rowContext = useMemo<LegendRowContextValue>(
+    () => ({ layerId, opacityOpen: opacityOpen && visible, setOpacityOpen }),
+    [layerId, opacityOpen, visible],
+  )
+
+  if (!layer) return null
+
+  const { actions, body } = partitionLegendChildren(children)
+  const effectivelyCollapsed = !layer.visible || layer.collapsed
+  const stickyTop = inGroup ? LEGEND_GROUP_HEADER_HEIGHT : 0
+  const canToggle = layer.visible && collapsible
+  const toggle = () => setCollapsed(layerId, !layer.collapsed)
+
+  const renderRow = (sortableProps?: SortableEntityRenderProps) => (
+    <LegendRowContext.Provider value={rowContext}>
+      <Box
+        ref={sortableProps?.rootRef}
+        style={sortableProps?.rootStyle}
+        sx={[
+          styles.row,
+          sortableProps?.dragging === true && styles.rowDragging,
+        ]}
+      >
+        <Box
+          sx={[styles.header, inGroup && styles.headerGrouped]}
+          style={{ top: stickyTop }}
+        >
+          {sortableProps?.handle}
+          <Box
+            sx={[styles.titleBox, canToggle && styles.titleBoxInteractive]}
+            {...(canToggle && {
+              role: 'button',
+              tabIndex: 0,
+              'aria-expanded': !layer.collapsed,
+              onClick: toggle,
+              onKeyDown: accordionKeyDown(toggle),
+            })}
+          >
+            <Box sx={styles.titleLine}>
+              <SmartTooltip title={layer.name} dependencies={[layer.name]}>
+                {({ ref }) => (
+                  <Typography
+                    ref={ref}
+                    variant='button'
+                    color={layer.visible ? 'text.primary' : 'text.disabled'}
+                    sx={styles.title}
+                  >
+                    {layer.name}
+                  </Typography>
+                )}
+              </SmartTooltip>
+              {canToggle && (
+                <ExpandMoreIcon
+                  sx={[
+                    styles.chevron,
+                    layer.collapsed && styles.chevronCollapsed,
+                  ]}
+                />
+              )}
+            </Box>
+            {layer.subtitle && !effectivelyCollapsed && (
+              <Typography
+                variant='caption'
+                color='text.secondary'
+                component='p'
+              >
+                {layer.subtitle}
+              </Typography>
+            )}
+          </Box>
+
+          <Box className='PsLegend-rowActions' sx={styles.actions}>
+            {actions}
+          </Box>
+        </Box>
+
+        <Collapse in={!effectivelyCollapsed}>
+          <Box
+            sx={[
+              styles.content,
+              inGroup && styles.contentGrouped,
+              !layer.visible && styles.dimmed,
+            ]}
+          >
+            {body}
+          </Box>
+          {layer.helperText && (
+            <Box sx={[styles.footer, inGroup && styles.footerGrouped]}>
+              {typeof layer.helperText === 'string' ? (
+                // `component` is load-bearing: MUI's defaultVariantMapping has
+                // no entry for `caption`, so it falls back to a `span` and the
+                // line-height stops governing the box. Meridian maps it to `p`
+                // by theme, which makes the box type depend on the consumer's
+                // theme rather than on this component.
+                <Typography
+                  variant='caption'
+                  color='text.secondary'
+                  component='p'
+                >
+                  {layer.helperText}
+                </Typography>
+              ) : (
+                layer.helperText
+              )}
+            </Box>
+          )}
+        </Collapse>
+      </Box>
+    </LegendRowContext.Provider>
+  )
+
+  return sortable ? (
+    <SortableEntity kind='layer' id={layerId} render={renderRow} />
+  ) : (
+    renderRow()
+  )
+}

package/src/legend/components/legend-row/styles.ts

@@ -0,0 +1,219 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  // Padding lives on header/content/footer (not the root) so the sticky
+  // header is opaque and full-bleed while pinned.
+  row: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+
+    '& + &': {
+      borderTop: '1px solid',
+      borderColor: 'divider',
+    },
+    // Hover-fade actions (widgets-v2 Wrapper parity). Direct children of
+    // `.PsLegend-rowFade` are hidden on fine-pointer devices and fade in when
+    // the row is hovered or holds focus; a control carrying `.active` (dirty
+    // state — hidden layer, open menu, opacity ≠ 1) stays visible. Coarse-
+    // pointer (touch) devices always show them. Each non-active child also
+    // collapses to zero width on its own (not just the whole actions slot —
+    // see `PsLegend-rowActions` below) so a sibling's `.active` pin (e.g. the
+    // eye while hidden) doesn't leave a same-sized invisible hole where the
+    // still-faded ⋮ menu would've been; the title grows into that space. The
+    // collapse chevron sits outside the fade group and never fades.
+    '& .PsLegend-rowFade > *': {
+      opacity: 1,
+      transition: ({ transitions }: Theme) =>
+        transitions.create(['opacity', 'width'], {
+          duration: transitions.duration.standard,
+          easing: transitions.easing.easeInOut,
+        }),
+      '@media (hover: hover)': {
+        opacity: 0,
+      },
+      '&.active': {
+        opacity: 1,
+      },
+    },
+    // Faded actions don't reserve flex space on fine-pointer devices — the
+    // title grows to the trailing edge. Hover/focus-within restores the slot
+    // so the title reflows with the buttons; a dirty `.active` child keeps
+    // the slot open even outside hover.
+    '@media (hover: hover)': {
+      '& .PsLegend-rowFade > *:not(.active)': {
+        width: 0,
+        minWidth: 0,
+        // border-box IconButtons keep their padding inside `width` — zero it
+        // too, otherwise the fixed 2px+2px padding survives as a tiny but
+        // needless residual gap.
+        padding: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+      },
+      '& .PsLegend-rowActions:not(:has(.active))': {
+        width: 0,
+        minWidth: 0,
+        overflow: 'hidden',
+        // Cancel the header gap so nothing is left behind the title.
+        marginInlineStart: ({ spacing }: Theme) => `calc(-1 * ${spacing(0.5)})`,
+        pointerEvents: 'none',
+      },
+    },
+    '&:hover .PsLegend-rowFade > *, &:focus-within .PsLegend-rowFade > *': {
+      opacity: 1,
+      width: 'auto',
+      minWidth: 0,
+      padding: '2px',
+      overflow: 'visible',
+      pointerEvents: 'auto',
+    },
+    '&:hover .PsLegend-rowActions, &:focus-within .PsLegend-rowActions': {
+      width: 'auto',
+      minWidth: 0,
+      overflow: 'visible',
+      marginInlineStart: 0,
+      pointerEvents: 'auto',
+    },
+    // Hovering anywhere in the row also reveals the category/icon values
+    // (the renderers keep their own list-scoped rule for standalone usage).
+    '&:hover .PsLegend-value, &:focus-within .PsLegend-value': {
+      opacity: 1,
+    },
+    // Drag handle (Legend.Sortable): absolutely positioned (no reserved flex
+    // slot, so it never shifts the title/icon); the button inside fades in
+    // on hover/focus and is always visible on touch devices.
+    '& .PsLegend-dragHandle-layer > *': {
+      opacity: 0,
+      transition: ({ transitions }: Theme) =>
+        transitions.create('opacity', {
+          duration: transitions.duration.standard,
+          easing: transitions.easing.easeInOut,
+        }),
+      '@media (hover: none)': {
+        opacity: 1,
+      },
+    },
+    '&:hover .PsLegend-dragHandle-layer > *, &:focus-within .PsLegend-dragHandle-layer > *':
+      {
+        opacity: 1,
+      },
+  },
+  // The original stays in place, dimmed, while its overlay clone is dragged.
+  rowDragging: {
+    opacity: 0.4,
+  },
+  // Figma `_Legend header`: 16px top/left inset (title glyphs start at
+  // y≈17, x=16 in the 68px-tall header), actions share the title's vertical
+  // band (subtitle flows below them) — hence `flex-start` with the title
+  // optically centered against the 30px icon-button row. Sticky: pins inside
+  // the panel's scroll container; `top` is applied inline per row (0, or the
+  // group-header height for grouped rows). Grouped rows get an extra 20px
+  // left inset (36px total) so member layers read as nested under the group
+  // and line up with the group's own icon+label text start.
+  header: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 0.5,
+    minHeight: 32,
+    padding: ({ spacing }) => spacing(1.5, 2, 1.5, 2),
+    position: 'sticky',
+    // Above MUI's z-index-1 form internals (e.g. InputLabel) in row content,
+    // below the group header (3).
+    zIndex: 2,
+    backgroundColor: 'background.paper',
+  },
+  headerGrouped: {
+    paddingLeft: 4.5,
+  },
+  titleBox: {
+    flex: 1,
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  // Accordion click target (whole title block + spare space). Non-native
+  // button, so it carries its own focus ring.
+  titleBoxInteractive: {
+    cursor: 'pointer',
+    userSelect: 'none',
+    '&:focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'primary.main',
+      outlineOffset: -2,
+    },
+  },
+  // The title line and the actions box share the same 24px band, centered,
+  // so the title and the action icons stay aligned under the header's
+  // `flex-start` — no padding magic. The subtitle flows below.
+  titleLine: {
+    minHeight: 24,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 0.5,
+  },
+  // No `flex:1` here — the title sizes to its own text (shrinking to
+  // ellipsis when too long) so the chevron sits right after it, instead of
+  // being dragged to the trailing edge of `titleLine` (which spans the full
+  // width of `titleBox`, itself `flex:1` to fill the header up to actions).
+  title: {
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  // Informative collapse indicator beside the title (the title area is the
+  // button). Points down when expanded, right when collapsed; not shown on
+  // touch devices — there the title row itself is the affordance.
+  chevron: {
+    fontSize: 16,
+    color: 'text.secondary',
+    flexShrink: 0,
+    transition: ({ transitions }: Theme) =>
+      transitions.create('transform', {
+        duration: transitions.duration.shorter,
+      }),
+    '@media (hover: none)': {
+      display: 'none',
+    },
+  },
+  chevronCollapsed: {
+    transform: 'rotate(-90deg)',
+  },
+  // Same 24px band as the title line, so both sides of the header stay
+  // aligned even when the composed actions are shorter (or fade out).
+  // Icon buttons (actions + collapse chevron) are squeezed to 24×24:
+  // 2px padding around the 20px small icon.
+  actions: {
+    minHeight: 24,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 0.25,
+    flexShrink: 0,
+    '& .MuiIconButton-root': {
+      padding: '2px',
+    },
+  },
+  // Figma rhythm: ~16px from the subtitle to the select (8px header bottom
+  // padding + 4px here + line leading), 8px between body blocks, 8px bottom
+  // inset before the next row's divider.
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1,
+    padding: ({ spacing }) => spacing(0.5, 2, 1, 2),
+  },
+  contentGrouped: {
+    paddingLeft: 4.5,
+  },
+  // ~16px above the note (content's 8px bottom inset + 8px here), per design.
+  footer: {
+    padding: ({ spacing }) => spacing(1, 2, 1, 2),
+  },
+  footerGrouped: {
+    paddingLeft: 4.5,
+  },
+  dimmed: {
+    opacity: 0.5,
+  },
+} satisfies Record<string, SxProps<Theme>>

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

@@ -0,0 +1,57 @@
+import { MenuItem } from '@mui/material'
+import { getLegendStore, selectLayersByGroup, useLegendId } from '../../stores'
+import { useLegendConfig } from '../../provider'
+import { useLegendGroupId, useLegendRow } from '../contexts'
+
+/**
+ * Show only this layer (and hide siblings in the same bucket).
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export function LegendShowOnlyLayer() {
+  const id = useLegendId()
+  const row = useLegendRow()
+  const { labels } = useLegendConfig()
+
+  if (!row) return null
+
+  const showOnly = () => {
+    const state = getLegendStore(id).getState()
+    const target = state.layers[row.layerId]
+    // No-op if the layer vanished (e.g. a provider resync while the menu was
+    // open) — otherwise `groupId: undefined` would act on the ungrouped bucket.
+    if (!target) return
+    for (const layer of selectLayersByGroup(state, target.groupId)) {
+      state.setVisibility(layer.id, layer.id === row.layerId)
+    }
+  }
+
+  return <MenuItem onClick={showOnly}>{labels.showOnlyLayer}</MenuItem>
+}
+
+/**
+ * Show all layers in the enclosing group, or all ungrouped layers at row scope.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export function LegendShowAllLayers() {
+  const id = useLegendId()
+  const groupId = useLegendGroupId()
+  const row = useLegendRow()
+  const { labels } = useLegendConfig()
+
+  if (groupId === null && !row) return null
+
+  const showAll = () => {
+    const state = getLegendStore(id).getState()
+    if (groupId !== null) {
+      state.setGroupVisibility(groupId, true)
+    } else {
+      for (const layer of selectLayersByGroup(state, undefined)) {
+        state.setVisibility(layer.id, true)
+      }
+    }
+  }
+
+  return <MenuItem onClick={showAll}>{labels.showAllLayers}</MenuItem>
+}

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

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+import { useLegendConfig } from '../../provider'
+import { useLegendRow } from '../contexts'
+import { LegendOverflowMenu } from '../legend-overflow-menu/legend-overflow-menu'
+
+export interface LegendRowMenuProps {
+  /** Menu items; async items use `stopPropagation` + `runAsyncMenuAction`. */
+  children?: ReactNode
+}
+
+/**
+ * Overflow (⋮) menu for a layer row. Pins `.active` while open, busy, or the
+ * inline opacity bar is open. Items self-gate when hidden.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export function LegendRowMenu({ children }: LegendRowMenuProps) {
+  const row = useLegendRow()
+  const { labels } = useLegendConfig()
+
+  return (
+    <LegendOverflowMenu
+      gate={Boolean(row)}
+      ariaLabel={labels.layerOptions}
+      active={row?.opacityOpen ?? false}
+    >
+      {children}
+    </LegendOverflowMenu>
+  )
+}

package/src/legend/components/legend-row-menu/legend-zoom-to.tsx

@@ -0,0 +1,43 @@
+import type { MouseEvent } from 'react'
+import { CircularProgress, MenuItem } from '@mui/material'
+import { useLegendId, useLegendStore } from '../../stores'
+import { useLegendConfig } from '../../provider'
+import { useLegendMenu, useLegendRow } from '../contexts'
+import { runAsyncMenuAction } from '../run-async-menu-action'
+
+export interface LegendZoomToProps {
+  /** Fit viewport to the layer; may return a Promise for async menu feedback. */
+  onZoomTo: (layerId: string) => void | Promise<void>
+}
+
+/**
+ * Zoom-to-layer menu item for `Legend.RowMenu`. Self-hides when the layer is hidden.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export function LegendZoomTo({ onZoomTo }: LegendZoomToProps) {
+  const id = useLegendId()
+  const row = useLegendRow()
+  const menu = useLegendMenu()
+  const visible = useLegendStore(id, (s) =>
+    row ? (s.layers[row.layerId]?.visible ?? false) : false,
+  )
+  const { labels } = useLegendConfig()
+
+  if (!row || !visible) return null
+
+  const busy = menu?.busy ?? false
+
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation()
+    if (!menu) return
+    void runAsyncMenuAction(menu, () => onZoomTo(row.layerId))
+  }
+
+  return (
+    <MenuItem disabled={busy} onClick={handleClick}>
+      {busy && <CircularProgress size={16} sx={{ mr: 1 }} />}
+      {busy ? labels.loading : labels.zoomTo}
+    </MenuItem>
+  )
+}

package/src/legend/components/legend-sortable/contexts.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * Present (true) below a `<Legend.Sortable>` wrapper — `Legend.Group` /
+ * `Legend.Row` read it to become draggable (sortable shell + drag handle).
+ */
+export const LegendSortableContext = createContext(false)
+
+/** Whether the nearest legend composition is wrapped in `Legend.Sortable`. */
+export function useLegendSortable(): boolean {
+  return useContext(LegendSortableContext)
+}

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

@@ -0,0 +1,144 @@
+/**
+ * Drives `Legend.Sortable`'s onDragEnd through the shared dnd-kit mock
+ * harness (DndContext passthrough exposing its props) against the **real**
+ * legend store — asserting the committed `moveGroup` / `moveLayer` effects
+ * and the cross-kind/cross-bucket guards.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import {
+  dndKitCoreMock,
+  dndKitSortableMock,
+  lastDndContextProps,
+  resetDndKitMocks,
+} from '../../../../tests/mocks/dnd-kit'
+
+vi.mock('@dnd-kit/core', () => dndKitCoreMock())
+vi.mock('@dnd-kit/sortable', () => dndKitSortableMock())
+
+import { LegendProvider } from '../../provider'
+import { LegendGroup } from '../legend-group/legend-group'
+import { LegendRow } from '../legend-row/legend-row'
+import { LegendItem } from '../legend-item/legend-item'
+import { LegendSortable } from './legend-sortable'
+import {
+  clearAllLegendStores,
+  getLegendStore,
+  selectLayersByGroup,
+  selectOrderedGroups,
+  type LegendVariable,
+} from '../../stores'
+
+const cat: LegendVariable = {
+  type: 'category',
+  items: [{ label: 'A', color: '#123456' }],
+}
+
+const layers = [
+  { id: 'a', name: 'Alpha', groupId: 'g1', variables: [cat] },
+  { id: 'b', name: 'Beta', groupId: 'g1', variables: [cat] },
+  { id: 'c', name: 'Gamma', groupId: 'g2', variables: [cat] },
+  { id: 'x', name: 'Loose X', variables: [cat] },
+  { id: 'y', name: 'Loose Y', variables: [cat] },
+]
+const groups = [
+  { id: 'g1', label: 'One' },
+  { id: 'g2', label: 'Two' },
+]
+
+beforeEach(() => resetDndKitMocks())
+afterEach(() => clearAllLegendStores())
+
+function renderSortable(id: string, sortable = true) {
+  const tree = (
+    <>
+      {groups.map((g) => (
+        <LegendGroup key={g.id} groupId={g.id}>
+          {layers
+            .filter((l) => l.groupId === g.id)
+            .map((l) => (
+              <LegendRow key={l.id} layerId={l.id}>
+                <LegendItem />
+              </LegendRow>
+            ))}
+        </LegendGroup>
+      ))}
+      {layers
+        .filter((l) => !l.groupId)
+        .map((l) => (
+          <LegendRow key={l.id} layerId={l.id}>
+            <LegendItem />
+          </LegendRow>
+        ))}
+    </>
+  )
+  return render(
+    <LegendProvider id={id} layers={layers} groups={groups}>
+      {sortable ? <LegendSortable>{tree}</LegendSortable> : tree}
+    </LegendProvider>,
+  )
+}
+
+const dragEnd = (activeId: string, overId: string | null) =>
+  lastDndContextProps().onDragEnd?.({
+    active: { id: activeId },
+    over: overId ? { id: overId } : null,
+  })
+
+describe('<LegendSortable> opt-in', () => {
+  it('without the wrapper there are no drag handles', () => {
+    renderSortable('plain', false)
+    expect(screen.queryAllByLabelText('Reorder')).toHaveLength(0)
+  })
+
+  it('with the wrapper every group and row exposes its handle', () => {
+    renderSortable('handles')
+    // 2 groups + 5 rows.
+    expect(screen.getAllByLabelText('Reorder')).toHaveLength(7)
+  })
+})
+
+describe('<LegendSortable> onDragEnd commits', () => {
+  it('group over group → moveGroup', () => {
+    renderSortable('dnd-groups')
+    dragEnd('group:g2', 'group:g1')
+    expect(
+      selectOrderedGroups(getLegendStore('dnd-groups').getState()).map(
+        (g) => g.id,
+      ),
+    ).toEqual(['g2', 'g1'])
+  })
+
+  it('layer over layer in the same bucket → moveLayer', () => {
+    renderSortable('dnd-rows')
+    dragEnd('layer:b', 'layer:a')
+    expect(
+      selectLayersByGroup(getLegendStore('dnd-rows').getState(), 'g1').map(
+        (l) => l.id,
+      ),
+    ).toEqual(['b', 'a'])
+
+    // Ungrouped bucket too.
+    dragEnd('layer:y', 'layer:x')
+    expect(
+      selectLayersByGroup(getLegendStore('dnd-rows').getState(), undefined).map(
+        (l) => l.id,
+      ),
+    ).toEqual(['y', 'x'])
+  })
+
+  it('cross-kind and cross-bucket drops are ignored (snap back)', () => {
+    renderSortable('dnd-guards')
+    const before = getLegendStore('dnd-guards').getState().layers
+    const beforeGroups = getLegendStore('dnd-guards').getState().groups
+
+    dragEnd('group:g1', 'layer:x') // group over a row
+    dragEnd('layer:a', 'group:g2') // row over a group
+    dragEnd('layer:a', 'layer:c') // row over another group's row
+    dragEnd('layer:a', 'layer:x') // grouped row over an ungrouped one
+    dragEnd('layer:a', null) // dropped outside
+
+    expect(getLegendStore('dnd-guards').getState().layers).toBe(before)
+    expect(getLegendStore('dnd-guards').getState().groups).toBe(beforeGroups)
+  })
+})