@12-apps/ui 6.86.1 → 6.87.0

package/src/components/data-display/ScheduleGrid/useSidewaysScroll.ts

@@ -0,0 +1,126 @@
+import type * as React from 'react';
+import { useEffect, useRef } from 'react';
+
+import { SCHEDULE_GRID_METRICS as M } from './ScheduleGrid.metrics';
+
+/** What the grid wires onto its header frame and its days. */
+export interface SidewaysScroll {
+  /** On the days' scroll: the header row follows. */
+  follow: () => void;
+  /** On the header's wheel: a sideways wheel or trackpad swipe over it scrolls the days. */
+  forwardWheel: (event: React.WheelEvent<HTMLElement>) => void;
+  /** On the days' focus: a cell the keyboard reaches is brought fully into view. */
+  bringOut: (event: React.FocusEvent<HTMLElement>) => void;
+  /** A press began: the focus it starts is the pointer's, and is left where it is. */
+  press: () => void;
+  /** The press ended, or the keyboard took over. */
+  release: () => void;
+}
+
+/** How far a focused element's ring reaches outside it. */
+function ringOf(element: HTMLElement): number {
+  const style = getComputedStyle(element);
+  const width = Number.parseFloat(style.outlineWidth) || 0;
+  const offset = Math.max(0, Number.parseFloat(style.outlineOffset) || 0);
+  return width + offset;
+}
+
+/**
+ * Whether this focus is the keyboard's (or a script's after a key). A tap's focus arrives after
+ * its pointerup, so the press flag alone would miss it; the browser's own heuristic does not.
+ */
+function keyboardFocus(element: HTMLElement): boolean {
+  try {
+    return element.matches(':focus-visible');
+  } catch {
+    return true; // an engine without the selector: the press flag still guards the pointer
+  }
+}
+
+/** The nearest ancestor that scrolls up and down, or the page. */
+function verticalScroller(from: HTMLElement): HTMLElement | null {
+  for (let node = from.parentElement; node; node = node.parentElement) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) return node;
+  }
+  return null;
+}
+
+/** How far `target` sits left of the pinned names, or past the days' right edge (negative). */
+function sidewaysOverflow(body: HTMLElement, target: HTMLElement, ring: number): number {
+  const box = target.getBoundingClientRect();
+  const row = target.closest('[role="row"]');
+  const names = row?.querySelector('[role="rowheader"]');
+  if (row && names && !target.closest('[role="rowheader"]')) {
+    const gap = Number.parseFloat(getComputedStyle(row).columnGap) || 0;
+    const underNames = names.getBoundingClientRect().right + gap - box.left;
+    if (underNames > 0) return underNames;
+  }
+  const right = body.getBoundingClientRect().left + body.clientLeft + body.clientWidth;
+  const pastRight = box.right + ring - right;
+  return pastRight > 0 ? -pastRight : 0;
+}
+
+/**
+ * The header row follows the days sideways, so each day's header stays over
+ * its column; only the days drive (the header is never a scroller of its own,
+ * so it is never a tab stop). And a cell the keyboard focuses is brought fully
+ * into view: out from under the pinned names, in from past the right edge, and
+ * down from under the sticky header — the browser counts a cell under a sticky
+ * column or header as already in view. A press (mouse, pen, a tap) is left
+ * alone: scrolling then would move the cell out from under the pointer and lose
+ * the click.
+ */
+export function useSidewaysScroll(
+  headRef: React.RefObject<HTMLElement | null>,
+  bodyRef: React.RefObject<HTMLElement | null>,
+): SidewaysScroll {
+  const pressing = useRef(false);
+  const follow = (): void => {
+    const head = headRef.current;
+    const body = bodyRef.current;
+    if (head && body && head.scrollLeft !== body.scrollLeft) head.scrollLeft = body.scrollLeft;
+  };
+  const forwardWheel = (event: React.WheelEvent<HTMLElement>): void => {
+    const body = bodyRef.current;
+    if (!body) return;
+    const sideways = event.deltaX || (event.shiftKey ? event.deltaY : 0);
+    if (sideways) body.scrollLeft += event.deltaMode === 1 ? sideways * M.wheelLine : sideways;
+  };
+  const bringOut = (event: React.FocusEvent<HTMLElement>): void => {
+    const body = bodyRef.current;
+    const head = headRef.current;
+    const target = event.target;
+    if (pressing.current || !body || !(target instanceof HTMLElement) || !keyboardFocus(target)) return;
+    const ring = ringOf(target);
+    const sideways = sidewaysOverflow(body, target, ring);
+    if (sideways) body.scrollLeft -= sideways;
+    if (!head) return;
+    const underHeader = head.getBoundingClientRect().bottom + ring - target.getBoundingClientRect().top;
+    if (underHeader <= 0) return;
+    const scroller = verticalScroller(body);
+    if (scroller) scroller.scrollTop -= underHeader;
+    else window.scrollBy(0, -underHeader);
+  };
+  // A press released outside the days (a drag that ends past them) still ends: the window hears
+  // it. One pair of listeners for the grid's lifetime, gone with it — never one per press.
+  useEffect(() => {
+    const view = bodyRef.current?.ownerDocument.defaultView ?? window;
+    const end = (): void => {
+      pressing.current = false;
+    };
+    view.addEventListener('pointerup', end, true);
+    view.addEventListener('pointercancel', end, true);
+    return () => {
+      view.removeEventListener('pointerup', end, true);
+      view.removeEventListener('pointercancel', end, true);
+    };
+  }, [bodyRef]);
+  const press = (): void => {
+    pressing.current = true;
+  };
+  const release = (): void => {
+    pressing.current = false;
+  };
+  return { follow, forwardWheel, bringOut, press, release };
+}

package/src/components/data-display/index.ts

@@ -9,6 +9,7 @@ export * from './Chart';
 export * from './Chip/Chip';
 export * from './DataGrid';
 export * from './DateTimeDisplay';
+export * from './DayRuler';
 export * from './DescriptionItem';
 export * from './EmptyState/EmptyState';
 export * from './ErrorState';
@@ -22,6 +23,7 @@ export * from './MapPreview';
 export * from './Popover';
 export * from './Progress';
 export * from './RegionMap';
+export * from './ScheduleGrid';
 export * from './SectionOnboarding/SectionOnboarding';
 export * from './Sheet';
 export * from './StatCard';

package/src/components/feedback/SequenceResolver/SequenceResolver.header.styles.ts

@@ -0,0 +1,65 @@
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+
+import { rem, sxRem } from '../../../tokens/relative';
+import { SEQUENCE_METRICS as M } from './SequenceResolver.metrics';
+
+/**
+ * THE HEADER OF A RUN WITH "VER TODOS (N)" (FUT-3825). A resolver without an
+ * overview keeps the header it always had (`SequenceResolver.styles.ts`).
+ *
+ * Back · the step label · "Ver todos (N)" · close on ONE line, the progress
+ * bar under them at full width, nothing cut. On a narrow chrome (a phone
+ * under 375px) Back is its chevron alone, a 44px target, and the step label
+ * takes its own line under the bar. On a wider one only a long host label is
+ * cut, with an ellipsis.
+ */
+
+/** The container the narrow layout answers to (container queries, never media queries). */
+export const seeAllFrameSx: SxProps<Theme> = { containerType: 'inline-size', minWidth: 0 };
+
+function narrow(theme: Theme): string {
+  return `@container (max-width: ${rem(theme, M.narrowChrome)})`;
+}
+
+export const seeAllGridSx: SxProps<Theme> = (theme: Theme) => ({
+  display: 'grid',
+  gridTemplateColumns: 'auto minmax(0, max-content) minmax(0, 1fr) auto auto',
+  gridTemplateAreas: '"back label . see close" "bar bar bar bar bar"',
+  alignItems: 'center',
+  rowGap: 2.25,
+  '& > [data-sr-back]': { gridArea: 'back', mr: 0.75 },
+  '& > [data-sr-label]': {
+    gridArea: 'label',
+    fontSize: sxRem(M.stepLabel),
+    fontWeight: 500,
+    color: 'text.secondary',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  '& > [data-sr-see]': { gridArea: 'see', ml: 1.5 },
+  '& > [data-sr-close]': { gridArea: 'close', ml: 1.5 },
+  '& > [data-sr-bar]': { gridArea: 'bar', minWidth: 0 },
+  [narrow(theme)]: {
+    gridTemplateAreas: '"back . . see close" "bar bar bar bar bar" "label label label label label"',
+    // Its own line under the full-width bar, whole: a long one wraps rather than being cut.
+    '& > [data-sr-label]': { mt: -1.25, overflow: 'visible', whiteSpace: 'normal' },
+    // Parent class + attribute: over the Button's own size rules (MUI's 64px minimum width).
+    '& > [data-sr-back]': {
+      mr: 0,
+      width: rem(theme, M.touchTarget),
+      minWidth: rem(theme, M.touchTarget),
+      height: rem(theme, M.touchTarget),
+      px: 0,
+      '& [data-back-word]': { display: 'none' },
+      '& .MuiButton-startIcon': { m: 0 },
+    },
+  },
+});
+
+/** "Ver todos (N)": a text button on the header's line, always whole. */
+export function seeAllButtonSx(touch: boolean): SxProps<Theme> {
+  const base = { flex: 'none', whiteSpace: 'nowrap' } as const;
+  return touch ? { ...base, minHeight: sxRem(M.touchTarget) } : base;
+}

package/src/components/feedback/SequenceResolver/SequenceResolver.header.tsx

@@ -0,0 +1,153 @@
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import CloseIcon from '@mui/icons-material/Close';
+import Box from '@mui/material/Box/index.js';
+import IconButton from '@mui/material/IconButton/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import type * as React from 'react';
+
+import { Progress } from '../../data-display/Progress';
+import { Button } from '../../form/Button';
+import { seeAllButtonSx, seeAllFrameSx, seeAllGridSx } from './SequenceResolver.header.styles';
+import {
+  backButtonSx,
+  closeButtonSx,
+  handleSx,
+  headerStartSx,
+  headerSx,
+  overviewTitleSx,
+  stepLabelSx,
+} from './SequenceResolver.styles';
+
+interface HeaderProps {
+  touch: boolean;
+  label: string;
+  /** Absent: no back button (intro, first step, or the host turned it off). */
+  back?: { label: string; accessible?: string; onClick: () => void; disabled: boolean };
+  closeLabel: string;
+  onClose: () => void;
+  progress: number;
+  progressLabel: string;
+  testId: string;
+  /** "Ver todos (N)": a text button between the label and close. */
+  seeAll?: { label: string; onClick: () => void; disabled: boolean };
+  /** The overview's title, drawn in the label's place and naming the dialog. */
+  title?: { id: string; text: string; ref: React.RefObject<HTMLHeadingElement | null> };
+}
+
+function Bar({ progress, progressLabel, testId }: Pick<HeaderProps, 'progress' | 'progressLabel' | 'testId'>): React.JSX.Element {
+  return (
+    <Progress variant="linear" size="md" color="warning" value={progress} aria-label={progressLabel} dataTestId={`${testId}-progress`} />
+  );
+}
+
+function CloseButton({ touch, closeLabel, onClose, testId }: Pick<HeaderProps, 'touch' | 'closeLabel' | 'onClose' | 'testId'>) {
+  return (
+    <IconButton aria-label={closeLabel} onClick={onClose} sx={closeButtonSx(touch)} data-testid={`${testId}-close`} data-sr-close="">
+      <CloseIcon />
+    </IconButton>
+  );
+}
+
+/**
+ * The header every resolver had before "Ver todos" (FUT-3671): Back and the
+ * label (which takes its own row on a narrow sheet rather than squeeze) and
+ * close, the bar under them. Over the overview the title takes the label's place.
+ */
+function PlainHeader(props: HeaderProps): React.JSX.Element {
+  const { touch, label, back, testId, title } = props;
+  return (
+    <>
+      <Box sx={headerSx}>
+        <Box sx={headerStartSx}>
+          {back ? (
+            <Button
+              variant="text"
+              color="primary"
+              size="md"
+              icon={<ChevronLeftIcon />}
+              aria-label={back.accessible}
+              onClick={back.onClick}
+              disabled={back.disabled}
+              sx={backButtonSx(touch)}
+              dataTestId={`${testId}-back`}
+            >
+              {back.label}
+            </Button>
+          ) : null}
+          {title ? (
+            <Typography component="h2" id={title.id} tabIndex={-1} ref={title.ref} sx={overviewTitleSx}>
+              {title.text}
+            </Typography>
+          ) : (
+            <Typography component="span" sx={stepLabelSx} data-testid={`${testId}-step-label`}>
+              {label}
+            </Typography>
+          )}
+        </Box>
+        <CloseButton {...props} />
+      </Box>
+      <Bar {...props} />
+    </>
+  );
+}
+
+/**
+ * The header of a run with "Ver todos (N)" (FUT-3825): one grid, so the ONE
+ * step label node sits on the header's line or, on a narrow chrome, on its own
+ * line under the bar — never beside it. Nothing on the line is cut.
+ */
+function SeeAllHeader(props: HeaderProps & { seeAll: NonNullable<HeaderProps['seeAll']> }): React.JSX.Element {
+  const { touch, label, back, testId, seeAll } = props;
+  return (
+    <Box sx={seeAllFrameSx}>
+      <Box sx={seeAllGridSx} data-testid={`${testId}-header`}>
+        {back ? (
+          <Button
+            variant="text"
+            color="primary"
+            size="md"
+            icon={<ChevronLeftIcon />}
+            aria-label={back.accessible ?? back.label}
+            onClick={back.onClick}
+            disabled={back.disabled}
+            sx={backButtonSx(touch)}
+            dataTestId={`${testId}-back`}
+            data-sr-back=""
+          >
+            <span data-back-word="">{back.label}</span>
+          </Button>
+        ) : null}
+        <Typography component="span" data-sr-label="" data-testid={`${testId}-step-label`}>
+          {label}
+        </Typography>
+        <Button
+          variant="text"
+          color="primary"
+          size="md"
+          onClick={seeAll.onClick}
+          disabled={seeAll.disabled}
+          sx={seeAllButtonSx(touch)}
+          dataTestId={`${testId}-see-all`}
+          data-sr-see=""
+        >
+          {seeAll.label}
+        </Button>
+        <CloseButton {...props} />
+        <Box data-sr-bar="">
+          <Bar {...props} />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+/** The drag handle (phone), the header row and the progress bar. */
+export function SequenceHeader(props: HeaderProps): React.JSX.Element {
+  const { touch, testId, seeAll } = props;
+  return (
+    <>
+      {touch ? <Box aria-hidden sx={handleSx} data-testid={`${testId}-handle`} /> : null}
+      {seeAll ? <SeeAllHeader {...props} seeAll={seeAll} /> : <PlainHeader {...props} />}
+    </>
+  );
+}

package/src/components/feedback/SequenceResolver/SequenceResolver.md

@@ -34,6 +34,13 @@ data-sized and shrinks while you go.
 - **< 600px**: the `Dialog` inset `bottom-sheet` variant, at most 95% of the dynamic
   viewport, scrolling inside; a drag handle on top is decoration only (the sheet does not
   drag). Every header and footer target is at least 44px tall there.
+- **Without `overview` the header is the one it always was**: Back with its word, the step label
+  beside it or on its own row when the sheet is narrow, close, the bar under them.
+- **With "Ver todos (N)" the header is one line at every width, 320 included, and nothing on it
+  is cut**: Back, "Ver todos (N)" and close keep their size. On a chrome under 300px (a phone
+  under 375px) Back is its chevron alone — a 44px target named by `backAccessible`, else
+  `back` — and the step label takes its own line under the full-width bar (it wraps if long,
+  never beside the bar). Only a long host label on a wider chrome is cut, with an ellipsis.
 
 ## Props
 
@@ -43,12 +50,14 @@ data-sized and shrinks while you go.
 | `onClose` | `(summary) => void` | Close button, Esc and the end screen's button. Gets `{ resolved, skipped, total, alsoResolved }`; a close toast counts `resolved + alsoResolved` (and shows only when that is above 0). Clicking the veil does nothing (as approved). |
 | `intro` | `SequenceIntro?` | While given, the intro shows instead of the run: `title`, `description`, `categories` (`label`, `description`, `count`, `onPick`), `startAllLabel`, `onStartAll`. The host drops it and sets `queue` in the same update as a pick. |
 | `queue` | `readonly I[]` (`I extends { key; kindLabel }`) | The problems, in order. Live data: it may shrink (siblings answered together) or grow mid-run. |
-| `renderStep` | `(item, api) => SequenceStep` | The current step: `content`, `primary?`, `secondary?` (default: skip with `labels.skip`; `false` removes it), `tertiary?`, `footer?` (`'end'` default — right-aligned over a hairline; `'split'` — two equal columns, no hairline; on a phone the actions always share the row without a hairline). |
+| `renderStep` | `(item, api) => SequenceStep` | The current step: `content`, `primary?`, `secondary?` (default: skip with `labels.skip`; `false` removes it), `tertiary?`, `footer?` (`'end'` default — right-aligned over a hairline; `'split'` — two equal columns, no hairline; on a phone the actions always share the row without a hairline), `canGoBack?` (`false`: this answer has no inverse — once it is answered, Back is not offered from the next step). |
 | `onBack` | `(item, result) => Promise<void> \| void` | The host's server inverse, awaited before Back shows the previous step again. Called only when that step was RESOLVED. |
 | `canGoBack` | `boolean` (default `true`) | Offer Back at all. It shows only once a previous step exists — on steps and on the end screen, never on the intro. |
+| `overview` | `SequenceOverview?` | "Ver todos (N)" inside the run (FUT-3825): `label(total)`, `title`, `categories` (`label`, `description?`, `count?` — the host's bookkeeping, not drawn: the `label` says the number, "Atrasado · 1" — `keys`, `onPick?`), `pickLabel`, `continueLabel`. See "Ver todos". |
+| `initialKey` | `string?` | Open the run at this problem (a click on its block). The ones before it follow it; nothing is passed over. |
 | `done` | `SequenceDone \| (summary) => SequenceDone` | The end screen: `title`, `description?`, `confirmLabel`. |
 | `labels` | `SequenceResolverLabels` | Every chrome word: `back`, `backAccessible?`, `close`, `skip`, `step(position, total, item)`, `introStep`, `doneStep`, `progress`, `failed`. **Required — the package ships no copy.** |
-| `dataTestId` | `string` (default `sequence-resolver`) | Parts: `-back`, `-close`, `-step-label`, `-progress`, `-handle`, `-category-<n>`, `-start-all`, `-primary`, `-secondary`, `-tertiary`, `-footer`, `-error`, `-done`, `-done-confirm`. |
+| `dataTestId` | `string` (default `sequence-resolver`) | Parts: `-back`, `-close`, `-step-label`, `-progress`, `-handle`, `-category-<n>`, `-start-all`, `-primary`, `-secondary`, `-tertiary`, `-footer`, `-error`, `-done`, `-done-confirm`, `-see-all`, `-overview`, `-overview-pick-<n>`, `-continue`. |
 
 ### The step API
 
@@ -57,6 +66,7 @@ data-sized and shrinks while you go.
 | `resolve(result \| promise, { alsoResolved? })` | Answer and move on. `alsoResolved` counts OTHER problems this answer resolved too ("apply to every sibling") for the close summary; Back over the step takes them off again. Given the PROMISE of the host's write, the step stays on screen and `busy` until it settles (even if the host's refetch drops the entry first); a rejection keeps it and shows the rejection's message. |
 | `skip()` | Leave it unanswered and move on. |
 | `back()` | Same as the header's Back. |
+| `jumpTo(key)` | Jump to that problem, as an overview pick does: the step on screen is passed over and the target shows. An answered or unknown key does nothing. |
 | `busy` | True while a `resolve` promise or an `onBack` is pending. The footer, tertiary and Back are disabled by the component; disable the step's own answers with it. |
 | `titleProps` | **Spread on the step's title** (the item's name). It names the dialog and takes focus on every advance. |
 
@@ -86,6 +96,37 @@ data-sized and shrinks while you go.
   step title (`api.titleProps`) or the end title. The progress bar is named by
   `labels.progress`.
 
+## Ver todos (N) — the list inside the run
+
+With `overview`, every step's header shows a text button `overview.label(total)` ("Ver todos (2)")
+between the step label and close, while the run has more than one problem (never on the intro or
+the end screen). It shows the overview **in the same dialog without ending the run**:
+
+```
+┌──────────────────────────────────────────────┐
+│ 2 problemas a resolver                    ×  │  overview.title (names the dialog, takes focus)
+│ ▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
+│ Atrasado · 1                     [Resolver]  │  a category: label, description, pickLabel
+│ Luiz entrega ainda não começou               │
+│ Avisou que não vai · 1           [Resolver]  │
+│ ──────────────────────────────────────────── │
+│ [Continuar em sequência]                     │  continueLabel: back to the step it left
+└──────────────────────────────────────────────┘
+```
+
+- **Each row is the label and description, then the pick on the right.** Where the words would
+  get less than 192px beside it (a 320px phone) the pick drops under them, at its content width.
+- **A pick jumps** to the category's first UNANSWERED problem — the first of its `keys` still ahead
+  in the run, else one passed over — then calls its `onPick`. A category with none left has its
+  pick disabled.
+- **A jump passes over the step on screen**: Back from the target returns to it at once (nothing
+  to undo), and Back again keeps today's meaning (over an answered step it awaits `onBack`). A
+  host that never jumps (the Estoque resolver) sees no change.
+- **Continue** returns to the step it left, nothing changed — the step stays mounted (hidden)
+  under the overview, so what the person half-filled in it is still there, and focus goes back
+  to its title. Close from the overview closes the run with its summary.
+- Every opening of the resolver starts with the overview closed.
+
 ## Writing a step
 
 The pattern the owner approved — **the item's name first** (large), the question second, the

package/src/components/feedback/SequenceResolver/SequenceResolver.metrics.ts

@@ -23,4 +23,16 @@ export const SEQUENCE_METRICS = {
   listRadius: 12,
   doneIcon: 44,
   doneTitle: 20,
+  /** The overview's title in the header row. */
+  overviewTitle: 18,
+  /** The least an overview row's words get beside its "Resolver"; under that, the button drops below them. */
+  overviewTextMin: 192,
+  /**
+   * With "Ver todos", the chrome's width below which the header is narrow:
+   * Back is its chevron alone and the step label takes its own line under
+   * the bar. A resolver without an overview never changes its header. A 360px
+   * phone's sheet leaves the chrome 280px, a 390px one 310px — where Back's
+   * word, the label, "Ver todos (N)" and close all fit whole (about 294px).
+   */
+  narrowChrome: 300,
 } as const;

package/src/components/feedback/SequenceResolver/SequenceResolver.overview.tsx

@@ -0,0 +1,74 @@
+import Box from '@mui/material/Box/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import type * as React from 'react';
+
+import { Button } from '../../form/Button';
+import { useFocusOnScreen } from './SequenceResolver.parts';
+import {
+  actionSx,
+  categoryDescriptionSx,
+  categoryTextSx,
+  overviewFooterSx,
+  overviewRowSx,
+} from './SequenceResolver.styles';
+import type { SequenceOverviewCategory } from './SequenceResolver.types';
+
+interface OverviewProps {
+  categories: SequenceOverviewCategory[];
+  /** Per category: false when none of its problems is left unanswered. */
+  canPick: (category: SequenceOverviewCategory) => boolean;
+  onPick: (category: SequenceOverviewCategory) => void;
+  pickLabel: string;
+  continueLabel: string;
+  onContinue: () => void;
+  titleRef: React.RefObject<HTMLHeadingElement | null>;
+  touch: boolean;
+  testId: string;
+}
+
+/**
+ * "Ver todos" inside the run: each kind (its label says how many, as the host writes it) and a pick that jumps
+ * there, then "continue in sequence" back to the step it left. The title is
+ * in the header row (it names the dialog); focus goes to it on open.
+ */
+export function SequenceOverviewBody(props: OverviewProps): React.JSX.Element {
+  const { categories, canPick, onPick, pickLabel, continueLabel, onContinue, titleRef, touch, testId } = props;
+  useFocusOnScreen('overview', titleRef, titleRef);
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }} data-testid={`${testId}-overview`}>
+      <Box component="ul" sx={{ m: 0, p: 0, listStyle: 'none' }}>
+        {categories.map((category, index) => (
+          <Box component="li" key={`${index}-${category.label}`} sx={overviewRowSx}>
+            <Box sx={categoryTextSx}>
+              <Typography component="span" variant="body2" sx={{ fontWeight: 500 }}>
+                {category.label}
+              </Typography>
+              {category.description ? (
+                <Typography component="span" sx={categoryDescriptionSx}>
+                  {category.description}
+                </Typography>
+              ) : null}
+            </Box>
+            <Button
+              variant="outline"
+              color="primary"
+              size="md"
+              onClick={() => onPick(category)}
+              disabled={!canPick(category)}
+              aria-label={`${pickLabel}: ${category.label}`}
+              sx={actionSx(touch)}
+              dataTestId={`${testId}-overview-pick-${index}`}
+            >
+              {pickLabel}
+            </Button>
+          </Box>
+        ))}
+      </Box>
+      <Box sx={overviewFooterSx}>
+        <Button variant="solid" color="primary" size="md" onClick={onContinue} sx={actionSx(touch)} dataTestId={`${testId}-continue`}>
+          {continueLabel}
+        </Button>
+      </Box>
+    </Box>
+  );
+}