@12-apps/ui 1.0.0 → 1.3.1

package/src/components/data-display/Chart/chart-spec.ts

@@ -0,0 +1,171 @@
+import type { ChartDataPoint, ChartProps } from './Chart.types';
+import type { ChartSemanticColor, ChartSpec, ChartSpecSeries } from './ChartSpec.types';
+import { chartValueFormatter } from './chart-format';
+import {
+  getChartSpecRenderer,
+  getRegisteredChartSpecTypes,
+  type ChartSpecRenderContext,
+} from './chart-spec-registry';
+
+export const CHART_SEMANTIC_COLORS: readonly ChartSemanticColor[] = [
+  'primary',
+  'secondary',
+  'success',
+  'warning',
+  'error',
+  'info',
+];
+
+const NUMBER_FORMATS = ['brl', 'percent', 'compact', 'integer', 'decimal'];
+
+/** Error thrown when an unknown/invalid spec is parsed. Message is written to
+ * be actionable for programmatic authors (builders, LLMs). */
+export class ChartSpecError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'ChartSpecError';
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function assertColor(value: unknown, where: string): void {
+  if (value === undefined) return;
+  if (!CHART_SEMANTIC_COLORS.includes(value as ChartSemanticColor)) {
+    throw new ChartSpecError(
+      `${where} must be a semantic color token (${CHART_SEMANTIC_COLORS.join(', ')}), got ${JSON.stringify(value)}. Raw color values are not allowed.`,
+    );
+  }
+}
+
+function parseAxis(value: unknown): { key: string; label?: string } {
+  if (!isRecord(value) || typeof value.key !== 'string' || value.key.length === 0) {
+    throw new ChartSpecError('"xAxis" must be an object with a non-empty string "key" naming the row property for the category axis.');
+  }
+  if (value.label !== undefined && typeof value.label !== 'string') {
+    throw new ChartSpecError('"xAxis.label" must be a string when provided.');
+  }
+  return { key: value.key, label: value.label };
+}
+
+function parseSeries(value: unknown): ChartSpecSeries[] {
+  if (!Array.isArray(value) || value.length === 0) {
+    throw new ChartSpecError('"series" must be a non-empty array of { key, label?, color? } objects.');
+  }
+  return value.map((entry, index) => {
+    if (!isRecord(entry) || typeof entry.key !== 'string' || entry.key.length === 0) {
+      throw new ChartSpecError(`"series[${index}]" must be an object with a non-empty string "key" naming the row property holding its values.`);
+    }
+    assertColor(entry.color, `"series[${index}].color"`);
+    if (entry.label !== undefined && typeof entry.label !== 'string') {
+      throw new ChartSpecError(`"series[${index}].label" must be a string when provided.`);
+    }
+    return { key: entry.key, label: entry.label, color: entry.color as ChartSemanticColor | undefined };
+  });
+}
+
+function assertFieldType(
+  spec: Record<string, unknown>,
+  field: string,
+  expected: 'string' | 'boolean' | 'number',
+): void {
+  const value = spec[field];
+  if (value !== undefined && typeof value !== expected) {
+    throw new ChartSpecError(`"${field}" must be a ${expected} when provided.`);
+  }
+}
+
+function parseColorScheme(value: unknown): ChartSemanticColor[] | undefined {
+  if (value === undefined) return undefined;
+  if (!Array.isArray(value) || value.length === 0) {
+    throw new ChartSpecError('"colorScheme" must be a non-empty array of semantic color tokens when provided.');
+  }
+  value.forEach((token, index) => assertColor(token, `"colorScheme[${index}]"`));
+  return value as ChartSemanticColor[];
+}
+
+function parseOptionalFields(spec: Record<string, unknown>): Partial<ChartSpec> {
+  for (const field of ['title', 'subtitle'] as const) assertFieldType(spec, field, 'string');
+  for (const field of ['stacked', 'legend', 'tooltip', 'curved'] as const) {
+    assertFieldType(spec, field, 'boolean');
+  }
+  assertFieldType(spec, 'height', 'number');
+  if (spec.numberFormat !== undefined && !NUMBER_FORMATS.includes(spec.numberFormat as string)) {
+    throw new ChartSpecError(
+      `"numberFormat" must be one of ${NUMBER_FORMATS.join(', ')}, got ${JSON.stringify(spec.numberFormat)}.`,
+    );
+  }
+  return {
+    title: spec.title as string | undefined,
+    subtitle: spec.subtitle as string | undefined,
+    stacked: spec.stacked as boolean | undefined,
+    legend: spec.legend as boolean | undefined,
+    tooltip: spec.tooltip as boolean | undefined,
+    curved: spec.curved as boolean | undefined,
+    height: spec.height as number | undefined,
+    numberFormat: spec.numberFormat as ChartSpec['numberFormat'],
+    colorScheme: parseColorScheme(spec.colorScheme),
+  };
+}
+
+/**
+ * Validate an untrusted value (e.g. JSON from storage or an LLM) into a
+ * `ChartSpec`. Throws {@link ChartSpecError} with an actionable message on
+ * the first problem found.
+ */
+export function parseChartSpec(input: unknown): ChartSpec {
+  if (!isRecord(input)) {
+    throw new ChartSpecError('A chart spec must be a JSON object.');
+  }
+  const type = input.type;
+  if (typeof type !== 'string' || !getChartSpecRenderer(type)) {
+    throw new ChartSpecError(
+      `"type" must be one of the registered chart types (${getRegisteredChartSpecTypes().join(', ')}), got ${JSON.stringify(type)}.`,
+    );
+  }
+  const yAxis = input.yAxis;
+  if (yAxis !== undefined && (!isRecord(yAxis) || (yAxis.label !== undefined && typeof yAxis.label !== 'string'))) {
+    throw new ChartSpecError('"yAxis" must be an object with an optional string "label" when provided.');
+  }
+  const centerLabel = input.centerLabel;
+  return {
+    ...parseOptionalFields(input),
+    type: type as ChartSpec['type'],
+    xAxis: parseAxis(input.xAxis),
+    yAxis: yAxis as ChartSpec['yAxis'],
+    series: parseSeries(input.series),
+    centerLabel: centerLabel as ChartSpec['centerLabel'],
+  };
+}
+
+/**
+ * Derive the prop-driven `Chart` props for a validated spec. The spec API is
+ * layered on top of the existing component — one rendering implementation.
+ */
+export function specToChartProps(
+  spec: ChartSpec,
+  data: ChartDataPoint[],
+  ctx: ChartSpecRenderContext,
+): ChartProps {
+  const renderer = getChartSpecRenderer(spec.type);
+  if (!renderer) {
+    throw new ChartSpecError(
+      `Unknown chart type "${spec.type}". Registered types: ${getRegisteredChartSpecTypes().join(', ')}.`,
+    );
+  }
+  return {
+    data,
+    title: spec.title,
+    subtitle: spec.subtitle,
+    xAxisKey: spec.xAxis.key,
+    xAxisLabel: spec.xAxis.label,
+    yAxisLabel: spec.yAxis?.label,
+    showLegend: spec.legend ?? true,
+    showTooltip: spec.tooltip ?? true,
+    height: spec.height,
+    valueFormatter: chartValueFormatter(spec.numberFormat),
+    ...renderer(spec, ctx),
+  };
+}

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

@@ -1,2 +1,32 @@
 export { Chart } from './Chart';
 export type { ChartDataPoint, ChartProps, ChartSeries } from './Chart.types';
+export { SpecChart } from './SpecChart';
+export type { SpecChartProps } from './SpecChart';
+export type {
+  ChartNumberFormat,
+  ChartSemanticColor,
+  ChartSpec,
+  ChartSpecAxis,
+  ChartSpecSeries,
+  ChartSpecType,
+} from './ChartSpec.types';
+export { CHART_SEMANTIC_COLORS, ChartSpecError, parseChartSpec, specToChartProps } from './chart-spec';
+export { chartValueFormatter, formatChartValue } from './chart-format';
+export {
+  getChartSpecRenderer,
+  getRegisteredChartSpecTypes,
+  registerChartSpecRenderer,
+} from './chart-spec-registry';
+export type { ChartSpecRenderContext, ChartSpecRenderer } from './chart-spec-registry';
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from './ChartComposables';
+export type {
+  ChartContainerProps,
+  ChartLegendContentProps,
+  ChartTooltipContentProps,
+} from './ChartComposables';

package/src/components/data-display/Chip/Chip.helpers.tsx

@@ -0,0 +1,131 @@
+import { Avatar } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
+import type { KeyboardEvent, ReactElement } from 'react';
+import React from 'react';
+
+import type { ChipProps } from './Chip.types';
+
+export const makeTestId =
+  (dataTestId?: string) =>
+  (suffix: string): string =>
+    dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;
+
+interface KeyHandlerArgs {
+  disabled?: boolean;
+  deletable?: boolean;
+  selectable?: boolean;
+  onClick?: () => void;
+  onDelete?: () => void;
+}
+
+const DELETE_KEYS = new Set(['Delete', 'Backspace']);
+const ACTIVATE_KEYS = new Set(['Enter', ' ']);
+
+/**
+ * A chip is not a native control, so the two keyboard conventions it stands in for
+ * are wired by hand: Delete/Backspace removes it, Enter/Space activates it.
+ */
+export const makeKeyDownHandler =
+  ({ disabled, deletable, selectable, onClick, onDelete }: KeyHandlerArgs) =>
+  (event: KeyboardEvent): void => {
+    if (disabled) return;
+
+    if (DELETE_KEYS.has(event.key) && deletable && onDelete) {
+      event.preventDefault();
+      onDelete();
+      return;
+    }
+
+    if (ACTIVATE_KEYS.has(event.key) && (onClick || selectable)) {
+      event.preventDefault();
+      onClick?.();
+    }
+  };
+
+export const avatarFor = (
+  avatar: ChipProps['avatar'],
+  avatarSrc?: string,
+): ReactElement | undefined => {
+  if (avatar && React.isValidElement(avatar)) {
+    return avatar;
+  }
+  if (avatarSrc) {
+    return <Avatar src={avatarSrc} sx={{ width: 24, height: 24 }} />;
+  }
+  return undefined;
+};
+
+interface ChipStyleArgs {
+  variant: ChipProps['variant'];
+  selected?: boolean;
+  clickable?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled
+ * selected chip keeps MUI's solid `color.main` + contrast text (clear active
+ * state); an outlined selected chip gets a subtle theme-driven `action.selected`
+ * tint so it reads as active without muddying the fill.
+ */
+export const chipStyles = ({
+  variant,
+  selected,
+  clickable,
+  disabled,
+}: ChipStyleArgs): SxProps<Theme> => {
+  const lifts = clickable && !disabled;
+
+  return {
+    // Enhanced styling for outlined variant
+    ...(variant === 'outlined' && {
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      backgroundColor: 'transparent',
+    }),
+    ...(selected &&
+      variant === 'outlined' && {
+        backgroundColor: (theme: Theme) => theme.palette.action.selected,
+      }),
+    '&:hover': {
+      ...(lifts && {
+        transform: 'translateY(-1px)',
+        boxShadow: (theme: Theme) =>
+          theme.palette.mode === 'dark'
+            ? '0 4px 12px rgba(0, 0, 0, 0.3)'
+            : '0 4px 12px rgba(0, 0, 0, 0.15)',
+      }),
+    },
+    '&:active': {
+      ...(lifts && {
+        transform: 'translateY(0px)',
+      }),
+    },
+    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+  };
+};
+
+/** `option` when the chip belongs to a selectable set, `button` when it merely acts. */
+export const chipRole = (
+  selectable?: boolean,
+  onClick?: () => void,
+): 'option' | 'button' | undefined => {
+  if (selectable) return 'option';
+  return onClick ? 'button' : undefined;
+};
+
+export const isClickable = (
+  disabled?: boolean,
+  onClick?: () => void,
+  selectable?: boolean,
+): boolean => !disabled && (Boolean(onClick) || Boolean(selectable));
+
+export const iconWithTestId = (
+  icon: ChipProps['icon'],
+  testId: string,
+): ReactElement | undefined =>
+  icon && React.isValidElement(icon)
+    ? React.cloneElement(icon as ReactElement, {
+        'data-testid': testId,
+      } as Record<string, unknown>)
+    : undefined;

package/src/components/data-display/Chip/Chip.stories.tsx

@@ -1,4 +1,5 @@
-import { Face, Star } from '@mui/icons-material';
+import Face from '@mui/icons-material/Face';
+import Star from '@mui/icons-material/Star';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Chip } from './Chip';

package/src/components/data-display/Chip/Chip.test.stories.tsx

@@ -1,7 +1,7 @@
-import { Star } from '@mui/icons-material';
+import Star from '@mui/icons-material/Star';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { expect, fn, Mock, userEvent, within } from 'storybook/test';
+import { expect, fn, Mock, userEvent, waitFor, within } from 'storybook/test';
 
 import { Chip } from './Chip';
 
@@ -47,9 +47,10 @@ export const KeyboardNavigation: Story = {
     const canvas = within(canvasElement);
     const chip = canvas.getByRole('option');
 
-    // Focus the chip
-    chip.focus();
-    expect(chip).toHaveFocus();
+    // Tab to the chip rather than calling .focus() directly: the keyboard is how
+    // a user reaches it, and the direct call asserts nothing about the component.
+    await userEvent.tab();
+    await waitFor(() => expect(chip).toHaveFocus());
 
     // Test Enter key
     await userEvent.keyboard('{Enter}');
@@ -73,9 +74,11 @@ export const FocusManagement: Story = {
     const canvas = within(canvasElement);
     const chip = canvas.getByRole('button');
 
-    // Test programmatic focus
-    chip.focus();
-    expect(chip).toHaveFocus();
+    // Tab rather than .focus(): the chip is the only focusable node here, so this
+    // proves it is keyboard-reachable — a real property of the component, unlike
+    // asserting that a direct .focus() call took effect.
+    await userEvent.tab();
+    await waitFor(() => expect(chip).toHaveFocus());
   },
 };
 

package/src/components/data-display/Chip/Chip.tsx

@@ -1,10 +1,27 @@
 import CancelIcon from '@mui/icons-material/Cancel';
-import { Avatar, Chip as MuiChip } from '@mui/material';
-import type { KeyboardEvent, ReactElement } from 'react';
-import React, { forwardRef } from 'react';
+import { Chip as MuiChip } from '@mui/material';
+import { forwardRef } from 'react';
 
+import {
+  avatarFor,
+  chipRole,
+  chipStyles,
+  iconWithTestId,
+  isClickable,
+  makeKeyDownHandler,
+  makeTestId,
+} from './Chip.helpers';
 import type { ChipProps } from './Chip.types';
 
+type MuiChipColor =
+  | 'primary'
+  | 'secondary'
+  | 'error'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'default';
+
 export const Chip = forwardRef<HTMLDivElement, ChipProps>(({
   label,
   variant = 'filled',
@@ -23,112 +40,32 @@ export const Chip = forwardRef<HTMLDivElement, ChipProps>(({
   dataTestId,
   ...props
 }, ref) => {
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (disabled) return;
-
-    // Handle delete/backspace keys for deletion
-    if ((event.key === 'Delete' || event.key === 'Backspace') && deletable && onDelete) {
-      event.preventDefault();
-      onDelete();
-      return;
-    }
-
-    // Handle enter/space for selection
-    if ((event.key === 'Enter' || event.key === ' ') && (onClick || selectable)) {
-      event.preventDefault();
-      onClick?.();
-    }
-  };
-
-  const getAvatarComponent = (): ReactElement | undefined => {
-    if (avatar && React.isValidElement(avatar)) {
-      return avatar;
-    }
-    if (avatarSrc) {
-      return <Avatar src={avatarSrc} sx={{ width: 24, height: 24 }} />;
-    }
-    return undefined;
-  };
-
-  // Determine the role based on context
-  const role = selectable ? 'option' : (onClick ? 'button' : undefined);
-  
-  // Determine if clickable
-  const clickable = !disabled && (!!onClick || selectable);
-
-  // Enhance icon with test ID if present
-  const enhancedIcon = icon && React.isValidElement(icon)
-    ? React.cloneElement(icon as ReactElement, {
-        'data-testid': dataTestId ? `${dataTestId}-icon` : 'chip-icon',
-      } as Record<string, unknown>)
-    : undefined;
-
-  // Wrap label with test ID
-  const enhancedLabel = (
-    <span data-testid={dataTestId ? `${dataTestId}-label` : 'chip-label'}>
-      {label}
-    </span>
-  );
-
-  // Custom delete icon with test ID
-  const enhancedDeleteIcon = deletable ? (
-    <CancelIcon data-testid={dataTestId ? `${dataTestId}-delete` : 'chip-delete'} />
-  ) : undefined;
+  const testId = makeTestId(dataTestId);
+  const clickable = isClickable(disabled, onClick, selectable);
 
   return (
     <MuiChip
       ref={ref}
-      label={enhancedLabel}
+      label={<span data-testid={testId('label')}>{label}</span>}
       variant={variant}
       size={size}
-      color={color as 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default' | undefined}
-      avatar={getAvatarComponent()}
-      icon={enhancedIcon}
+      color={color as MuiChipColor | undefined}
+      avatar={avatarFor(avatar, avatarSrc)}
+      icon={iconWithTestId(icon, testId('icon'))}
       onDelete={deletable ? onDelete : undefined}
-      deleteIcon={enhancedDeleteIcon}
+      deleteIcon={deletable ? <CancelIcon data-testid={testId('delete')} /> : undefined}
       disabled={disabled}
       clickable={clickable}
       onClick={clickable ? onClick : undefined}
-      onKeyDown={handleKeyDown}
+      onKeyDown={makeKeyDownHandler({ disabled, deletable, selectable, onClick, onDelete })}
       className={className}
-      role={role}
+      role={chipRole(selectable, onClick)}
       aria-selected={selectable ? selected : undefined}
       data-testid={dataTestId || 'chip'}
-      sx={{
-        // Enhanced styling for outlined variant
-        ...(variant === 'outlined' && {
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          backgroundColor: 'transparent',
-        }),
-        // Selection styling uses SEMANTIC palette tokens (not hardcoded rgba).
-        // A filled selected chip keeps MUI's solid `color.main` + contrast text
-        // (clear active state); an outlined selected chip gets a subtle
-        // theme-driven `action.selected` tint so it reads as active without
-        // muddying the fill.
-        ...(selected &&
-          variant === 'outlined' && {
-            backgroundColor: (theme) => theme.palette.action.selected,
-          }),
-        '&:hover': {
-          ...(clickable && !disabled && {
-            transform: 'translateY(-1px)',
-            boxShadow: (theme) =>
-              theme.palette.mode === 'dark'
-                ? '0 4px 12px rgba(0, 0, 0, 0.3)'
-                : '0 4px 12px rgba(0, 0, 0, 0.15)',
-          }),
-        },
-        '&:active': {
-          ...(clickable && !disabled && {
-            transform: 'translateY(0px)',
-          }),
-        },
-        transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-      }}
+      sx={chipStyles({ variant, selected, clickable, disabled })}
       {...props}
     />
   );
 });
 
-Chip.displayName = 'Chip';
+Chip.displayName = 'Chip';

package/src/components/data-display/DataGrid/DataGrid.body.tsx

@@ -0,0 +1,141 @@
+/**
+ * The DataGrid's `<thead>` and `<tbody>`.
+ *
+ * Split from the shell so each stays inside the size budget and so the
+ * virtualization spacers — which are pure layout, not data — sit next to the
+ * rows they pad rather than in the middle of the component that owns the paper.
+ */
+import { Checkbox, TableBody, TableCell, TableHead, TableRow, useTheme } from '@mui/material';
+import type React from 'react';
+
+import { GridRow, HeaderCell } from './DataGrid.cells';
+import type { DataGridModel } from './DataGrid.model';
+import type { DataGridProps } from './DataGrid.types';
+
+export interface GridSectionProps<T extends Record<string, unknown>> {
+  model: DataGridModel<T>;
+  props: DataGridProps<T>;
+  totalColumns: number;
+}
+
+/** The leading header cells for the selection / expansion columns. */
+function HeaderControls<T extends Record<string, unknown>>({
+  model,
+  props,
+}: GridSectionProps<T>): React.JSX.Element {
+  const theme = useTheme();
+  const { selection = { mode: 'none' }, expansion, stickyHeader = true } = props;
+  const sticky = {
+    position: stickyHeader ? ('sticky' as const) : ('static' as const),
+    top: 0,
+    zIndex: 1,
+    backgroundColor: theme.palette.background.paper,
+  };
+  const total = model.processedRows.length;
+  const picked = model.selectedRowIds.length;
+  return (
+    <>
+      {selection.mode !== 'none' && (
+        <TableCell padding="checkbox" sx={sticky}>
+          {selection.mode === 'multi' && (
+            <Checkbox
+              indeterminate={picked > 0 && picked < total}
+              checked={total > 0 && picked === total}
+              onChange={(event) =>
+                model.setSelectedRowIds(
+                  event.target.checked
+                    ? model.processedRows.map((row, index) => rowIdOf(props, row, index))
+                    : [],
+                )
+              }
+              inputProps={{ 'aria-label': 'Select all rows' }}
+            />
+          )}
+        </TableCell>
+      )}
+      {expansion && <TableCell padding="checkbox" sx={sticky} />}
+    </>
+  );
+}
+
+/** The caller's `getRowId`, or the row's own `id`, or its index. */
+export function rowIdOf<T extends Record<string, unknown>>(
+  props: DataGridProps<T>,
+  row: T,
+  index: number,
+): string | number {
+  if (props.getRowId) return props.getRowId(row, index);
+  const candidate = (row as { id?: string | number }).id;
+  return candidate ?? index;
+}
+
+export function GridHeader<T extends Record<string, unknown>>(
+  section: GridSectionProps<T>,
+): React.JSX.Element {
+  const { model, props } = section;
+  const { sorting = {}, stickyHeader = true, headerHeight = 56 } = props;
+  const sortable = sorting.mode === 'client' || sorting.mode === 'server';
+  return (
+    <TableHead data-slot="header">
+      <TableRow data-slot="header-row" role="row">
+        <HeaderControls {...section} />
+        {model.visibleColumns.map((column) => (
+          <HeaderCell
+            key={column.id}
+            column={column}
+            sort={model.sortBy.find((entry) => entry.id === column.id)}
+            sortable={column.enableSort !== false && sortable}
+            stickyHeader={stickyHeader}
+            headerHeight={headerHeight}
+            onSort={model.onSort}
+          />
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+/** An invisible row standing in for the rows the window is not rendering. */
+function Spacer({ height, colSpan }: { height: number; colSpan: number }): React.JSX.Element | null {
+  if (height <= 0) return null;
+  return (
+    <TableRow>
+      <TableCell colSpan={colSpan} sx={{ height, border: 'none', p: 0 }} />
+    </TableRow>
+  );
+}
+
+export function GridBody<T extends Record<string, unknown>>(
+  section: GridSectionProps<T>,
+): React.JSX.Element {
+  const { model, props, totalColumns } = section;
+  const { start, end } = model.visibleRange;
+  const trailing = model.virtualized ? model.processedRows.length - end : 0;
+  return (
+    <TableBody data-slot="body">
+      {model.virtualized ? (
+        <Spacer height={start * model.rowHeight} colSpan={totalColumns} />
+      ) : null}
+      {model.visibleRows.map((row, offset) => {
+        const index = model.virtualized ? start + offset : offset;
+        const rowId = rowIdOf(props, row, index);
+        return (
+          <GridRow
+            key={rowId}
+            row={row}
+            index={index}
+            rowId={rowId}
+            isSelected={model.selectedRowIdsSet.has(rowId)}
+            isExpanded={model.expandedRowIdsSet.has(rowId)}
+            totalColumns={totalColumns}
+            model={model}
+            props={props}
+          />
+        );
+      })}
+      {model.virtualized ? (
+        <Spacer height={trailing * model.rowHeight} colSpan={totalColumns} />
+      ) : null}
+    </TableBody>
+  );
+}