@12-apps/ui 6.39.1 → 6.39.3

package/src/components/data-display/Table/Table.helpers.ts

@@ -1,3 +1,9 @@
+import type { TableProps as MuiTableProps } from '@mui/material/Table/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
+import type React from 'react';
+
+import { rem } from '../../../tokens/relative';
+
 import type { TableProps } from './Table.types';
 
 /**
@@ -7,6 +13,30 @@ import type { TableProps } from './Table.types';
  */
 export const tableRowHeight = (rowHeight: number | undefined): number => rowHeight ?? 52;
 
+/** The scroll box's height: a number is design px, 400 unless the caller says otherwise. */
+const scrollHeight = (theme: Theme, containerHeight: number | string | undefined): string => {
+  const box = containerHeight || 400;
+  return typeof box === 'number' ? rem(theme, box) : box;
+};
+
+/**
+ * The table's one scroll container (FUT-2658): `containerHeight` tall when
+ * `virtualScrolling` is on, holding the header and the body. Inline, so the
+ * height it was given reads back off the element.
+ */
+export const scrollerStyle = (theme: Theme, p: TableProps): React.CSSProperties | undefined =>
+  p.virtualScrolling ? { height: scrollHeight(theme, p.containerHeight), overflow: 'auto' } : undefined;
+
+/**
+ * The window's height in design px when the body is virtualised — only a
+ * numeric `containerHeight` virtualises; a string sizes the scroller alone.
+ */
+export const virtualHeight = (p: TableProps): number | undefined =>
+  p.virtualScrolling && typeof p.containerHeight === 'number' && p.containerHeight > 0 &&
+  tableRowHeight(p.rowHeight) > 0
+    ? p.containerHeight
+    : undefined;
+
 export const TABLE_DEFAULTS: Partial<TableProps> = {
   variant: 'default',
   stripeColor: 'neutral',
@@ -35,3 +65,66 @@ export const definedProps = (props: TableProps): Partial<TableProps> =>
 
 // The container + styled table + optional header, shared by the loading, empty
 // and populated renders.
+
+/** A key `Table` declares on top of MUI's own `TableProps`. */
+type TableOwnKey = Exclude<keyof TableProps, keyof MuiTableProps>;
+
+/**
+ * Every key {@link TableOwnKey} names. None is an HTML attribute: each is read
+ * by the table and drawn by its parts, so none may reach the `<table>`
+ * (FUT-2658). A `Record` over the key union makes the list exhaustive — a prop
+ * added to `Table.types.ts` does not compile until it is named here.
+ */
+const TABLE_OWN_KEYS: Record<TableOwnKey, true> = {
+  emptyText: true,
+  variant: true,
+  stripeColor: true,
+  glow: true,
+  pulse: true,
+  hoverable: true,
+  loading: true,
+  onRowClick: true,
+  onRowFocus: true,
+  onRowBlur: true,
+  density: true,
+  selectable: true,
+  selectedRows: true,
+  onSelectionChange: true,
+  rowKeyExtractor: true,
+  sortable: true,
+  sortConfig: true,
+  onSortChange: true,
+  filterable: true,
+  filterConfig: true,
+  onFilterChange: true,
+  columns: true,
+  data: true,
+  virtualScrolling: true,
+  rowHeight: true,
+  overscan: true,
+  responsive: true,
+  columnPriorities: true,
+  responsiveBreakpoints: true,
+  showColumnToggle: true,
+  containerHeight: true,
+  loadingComponent: true,
+  emptyStateComponent: true,
+  keyboardNavigation: true,
+  renderRow: true,
+  renderCell: true,
+  draggableRows: true,
+  onRowsReorder: true,
+  fixedColumns: true,
+  rowStyleConfig: true,
+};
+
+const NOT_FORWARDED = new Set<string>([...Object.keys(TABLE_OWN_KEYS), 'children']);
+
+/**
+ * What the caller passed that is MUI's or the DOM's — `className`, `id`,
+ * `style`, `aria-*`, `data-*`, DOM handlers, `sx`, `size`, `padding`,
+ * `component` — for `MuiTable` to spread onto the `<table>`. `children` is
+ * placed by the table itself.
+ */
+export const tableDomProps = (props: TableProps): Record<string, unknown> =>
+  Object.fromEntries(Object.entries(props).filter(([key]) => !NOT_FORWARDED.has(key)));

package/src/components/data-display/Table/Table.hooks.ts

@@ -4,29 +4,37 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { rem, remPx } from '../../../tokens/relative';
 
-import type { ColumnConfig, TableProps } from './Table.types';
+import type { ColumnConfig, TableProps, VirtualWindow } from './Table.types';
 
 /**
  * The virtual window. `rowHeight` and `containerHeight` are design px: the
  * window is computed in the px `scrollTop` is measured in (`remPx`), and what it
  * hands back to draw with stays in design px (`offsetY`) or is CSS already
  * (`totalHeight`), so the rows and the window share one pitch at any type scale.
+ *
+ * The scroller holds the header as well as the body, so the `<tbody>` starts
+ * the header's height into it. `handleScroll` measures that height from
+ * `headerRef` in the same live px as `scrollTop`, and the window subtracts it
+ * before dividing by the pitch (FUT-2658).
  */
 export const useVirtualScrolling = (
   data: Record<string, unknown>[],
   rowHeight: number,
   containerHeight: number,
-  overscan: number = 5
+  overscan: number = 5,
+  headerRef?: React.RefObject<HTMLElement | null>,
 ) => {
   const theme = useTheme();
-  const [scrollTop, setScrollTop] = useState(0);
+  // Both live px, as the browser measures them.
+  const [scroll, setScroll] = useState({ scrollTop: 0, headerPx: 0 });
   
-  const visibleItems = useMemo(() => {
+  const visibleItems = useMemo((): VirtualWindow => {
     const pitch = remPx(theme, rowHeight);
-    const startIndex = Math.floor(scrollTop / pitch);
+    const bodyScrollTop = Math.max(0, scroll.scrollTop - scroll.headerPx);
+    const startIndex = Math.floor(bodyScrollTop / pitch);
     const endIndex = Math.min(
       data.length,
-      Math.ceil((scrollTop + remPx(theme, containerHeight)) / pitch)
+      Math.ceil((bodyScrollTop + remPx(theme, containerHeight)) / pitch)
     );
     
     const start = Math.max(0, startIndex - overscan);
@@ -36,16 +44,17 @@ export const useVirtualScrolling = (
       startIndex: start,
       endIndex: end,
       items: data.slice(start, end),
-      /** Every row at the scaled pitch, as CSS. */
       totalHeight: rem(theme, data.length * rowHeight),
-      /** Where the first mounted row sits, in design px. */
       offsetY: start * rowHeight,
     };
-  }, [data, rowHeight, containerHeight, scrollTop, overscan, theme]);
+  }, [data, rowHeight, containerHeight, scroll, overscan, theme]);
 
   const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-    setScrollTop(e.currentTarget.scrollTop);
-  }, []);
+    setScroll({
+      scrollTop: e.currentTarget.scrollTop,
+      headerPx: headerRef?.current?.offsetHeight ?? 0,
+    });
+  }, [headerRef]);
 
   return { visibleItems, handleScroll };
 };

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

@@ -11,7 +11,7 @@ import TableBody from '@mui/material/TableBody/index.js';
 import TableCell from '@mui/material/TableCell/index.js';
 import TableContainer from '@mui/material/TableContainer/index.js';
 import TableRow from '@mui/material/TableRow/index.js';
-import { styled, useTheme, type Theme } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type {
@@ -19,30 +19,21 @@ import type {
   TableDensity,
   TableProps,
   TableStripeColor} from './Table.types';
-import { TABLE_DEFAULTS, definedProps } from './Table.helpers';
-import { useTableSelection } from './Table.hooks';
+import {
+  TABLE_DEFAULTS,
+  definedProps,
+  scrollerStyle,
+  tableDomProps,
+  tableRowHeight,
+  virtualHeight,
+} from './Table.helpers';
+import { useTableSelection, useVirtualScrolling } from './Table.hooks';
 import { EnhancedTableBody, EnhancedTableHeader } from './TableParts';
 import { EmptyRow, NoDataPlaceholder } from './TableStates';
 import {
   tableStyles } from './Table.styles';
 import { rem } from '../../../tokens/relative';
 
-/** The scroll box's height: a number is design px, 400 unless the caller says otherwise. */
-const scrollHeight = (theme: Theme, containerHeight: number | string | undefined): string => {
-  const box = containerHeight || 400;
-  return typeof box === 'number' ? rem(theme, box) : box;
-};
-
-// Define pulse animation
-const StyledTableContainer = styled(TableContainer, {
-  shouldForwardProp: (prop) => !['virtualScrolling', 'containerHeight'].includes(prop as string) })<{ 
-  virtualScrolling?: boolean; 
-  containerHeight?: number | string;
-}>(({ theme, virtualScrolling, containerHeight }) => ({
-  ...(virtualScrolling && {
-    height: scrollHeight(theme, containerHeight),
-    overflow: 'auto' }) }));
-
 // Helper function to get stripe color from theme
 const StyledTable = styled(MuiTable, {
   shouldForwardProp: (prop) =>
@@ -91,7 +82,7 @@ const TableShell: React.FC<{
   header,
   rest,
   children }) => (
-  <StyledTableContainer>
+  <TableContainer>
     <StyledTable
       ref={innerRef}
       customVariant={variant}
@@ -106,7 +97,7 @@ const TableShell: React.FC<{
       {header}
       {children}
     </StyledTable>
-  </StyledTableContainer>
+  </TableContainer>
 );
 
 const SKELETON_ROW_COUNT = 5;
@@ -177,8 +168,8 @@ const ColumnToggleMenu: React.FC<{
   </Box>
 );
 
-// The populated table. Local because StyledTableContainer and StyledTable
-// cannot cross a module boundary (TS2742).
+// The populated table. Local because StyledTable cannot cross a module
+// boundary (TS2742).
 const columnsFor = (resolved: TableProps, selection: Selection): ColumnConfig[] =>
   (resolved.responsive ? selection.visibleColumns : resolved.columns) ?? [];
 
@@ -192,15 +183,27 @@ const showsColumnToggle = (resolved: TableProps, selection: Selection): boolean
       selection.hiddenColumns.length > 0,
   );
 
+// The virtual window lives here, with the one scroller whose offset drives it;
+// the header's ref lets it subtract the height the `<thead>` pushes the body down.
 const AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerRef, rest }) => {
+  const theme = useTheme();
   const finalColumns = columnsFor(p, selection);
   const showToggle = showsColumnToggle(p, selection);
+  const headRef = React.useRef<globalThis.HTMLTableSectionElement>(null);
+  const windowHeight = virtualHeight(p);
+  const { visibleItems, handleScroll } = useVirtualScrolling(
+    p.data ?? [],
+    tableRowHeight(p.rowHeight) || 40,
+    windowHeight ?? 400,
+    p.overscan,
+    headRef,
+  );
 
   return (
     <Box position="relative">
-      <StyledTableContainer
-        virtualScrolling={p.virtualScrolling}
-        containerHeight={p.containerHeight}
+      <TableContainer
+        style={scrollerStyle(theme, p)}
+        onScroll={windowHeight ? handleScroll : undefined}
       >
         <StyledTable
           ref={innerRef}
@@ -224,6 +227,7 @@ const AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerR
             onSelectAll={selection.handleSelectAll}
             density={p.density}
             stickyHeader={p.stickyHeader}
+            headRef={headRef}
           />
           <EnhancedTableBody
             data={p.data ?? []}
@@ -240,12 +244,11 @@ const AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerR
             renderRow={p.renderRow}
             renderCell={p.renderCell}
             virtualScrolling={p.virtualScrolling}
-            containerHeight={typeof p.containerHeight === 'number' ? p.containerHeight : undefined}
+            virtualWindow={windowHeight ? visibleItems : undefined}
             rowHeight={p.rowHeight}
-            overscan={p.overscan}
           />
         </StyledTable>
-      </StyledTableContainer>
+      </TableContainer>
 
       {showToggle && (
         <ColumnToggleMenu
@@ -329,7 +332,6 @@ export const Table = React.forwardRef<globalThis.HTMLTableElement, TableProps>(
       emptyStateComponent,
       emptyText,
       children,
-      ...props
     } = resolved;
 
     const selection = useTableSelection({
@@ -341,7 +343,8 @@ export const Table = React.forwardRef<globalThis.HTMLTableElement, TableProps>(
       rowKeyExtractor: resolved.rowKeyExtractor,
       onSelectionChange: resolved.onSelectionChange });
 
-    const rest = props as unknown as Record<string, unknown>;
+    // Only MUI's and the DOM's own props reach the `<table>` (FUT-2658).
+    const rest = tableDomProps(tableProps);
     const renderer: RendererProps = { resolved, selection, innerRef: ref, rest };
     const finalColumns = responsive ? selection.visibleColumns : columns;
     const shell = buildShell({ ...renderer, finalColumns });

package/src/components/data-display/Table/Table.types.ts

@@ -303,6 +303,22 @@ export interface TableHeaderProps {
   onSelectAll?: (selected: boolean) => void;
   density?: TableDensity;
   stickyHeader?: boolean;
+  /** The `<thead>`, so the virtual window can subtract its height from the scroller's offset. */
+  headRef?: React.Ref<globalThis.HTMLTableSectionElement>;
+}
+
+/**
+ * The rows a virtualised body mounts. Computed by `useVirtualScrolling` in the
+ * table, which owns the one scroll container, and handed down to the body.
+ */
+export interface VirtualWindow {
+  startIndex: number;
+  endIndex: number;
+  items: Record<string, unknown>[];
+  /** Every row at the scaled pitch, as CSS. */
+  totalHeight: string;
+  /** Where the first mounted row sits, in design px. */
+  offsetY: number;
 }
 
 export interface TableBodyProps {
@@ -320,9 +336,9 @@ export interface TableBodyProps {
   renderRow?: (rowData: Record<string, unknown>, index: number, isSelected: boolean) => React.ReactNode;
   renderCell?: (value: unknown, column: ColumnConfig, rowData: Record<string, unknown>, rowIndex: number) => React.ReactNode;
   virtualScrolling?: boolean;
-  containerHeight?: number;
+  /** Set only when the body is virtualised: the rows in view and where they sit. */
+  virtualWindow?: VirtualWindow;
   rowHeight?: number;
-  overscan?: number;
 }
 
 export interface VirtualTableBodyProps extends TableBodyProps {

package/src/components/data-display/Table/TableParts.tsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box/index.js';
 import Checkbox from '@mui/material/Checkbox/index.js';
 import TableBody from '@mui/material/TableBody/index.js';
 import TableCell from '@mui/material/TableCell/index.js';
@@ -11,9 +10,8 @@ import React, { useCallback } from 'react';
 import { rem } from '../../../tokens/relative';
 
 import { tableRowHeight } from './Table.helpers';
-import { useVirtualScrolling } from './Table.hooks';
 import { useTableRowRenderer } from './TableParts.hooks';
-import type { ColumnConfig, TableBodyProps, TableHeaderProps } from './Table.types';
+import type { ColumnConfig, TableBodyProps, TableHeaderProps, VirtualWindow } from './Table.types';
 
 // Mirrors the visible sort indicator for assistive technology; undefined when
 // the column is not sorted, which is what removes the attribute entirely.
@@ -77,7 +75,8 @@ export const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({
   onSortChange,
   selectable,
   selectedRows = [],
-  onSelectAll }) => {
+  onSelectAll,
+  headRef }) => {
   const handleSort = useCallback(
     (columnKey: string) => {
       if (!sortable || !onSortChange) return;
@@ -98,7 +97,7 @@ export const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({
   );
 
   return (
-    <TableHead>
+    <TableHead ref={headRef}>
       <TableRow>
         {selectable && (
           <TableCell padding="checkbox">
@@ -205,46 +204,28 @@ export const TableDataRow: React.FC<{
 };
 
 // Only the rows in view are rendered, positioned by absolute offset inside a
-// spacer sized to the full data set. `rowHeight`, `containerHeight` and every
-// offset are design px, drawn through `rem`.
+// body sized to the full data set. `rowHeight` and every offset are design px,
+// drawn through `rem`. The `<tbody>` sits directly in the `<table>`; the one
+// scroll container wraps the whole table, header included (FUT-2658).
 const VirtualisedBody: React.FC<{
-  visibleItems: {
-    items: Record<string, unknown>[];
-    startIndex: number;
-    offsetY: number;
-    /** As CSS. */
-    totalHeight: string;
-  };
+  visibleItems: VirtualWindow;
   rowHeight: number;
-  containerHeight: number;
-  onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
   renderTableRow: (
     rowData: Record<string, unknown>,
     index: number,
     offsetY?: number,
   ) => React.ReactNode;
-}> = ({ visibleItems, rowHeight, containerHeight, onScroll, renderTableRow }) => {
-  const theme = useTheme();
-  return (
-    <Box
-      onScroll={onScroll}
-      style={{
-        height: rem(theme, containerHeight),
-        overflow: 'auto',
-        position: 'relative' }}
-    >
-      <TableBody
-        style={{
-          height: visibleItems.totalHeight,
-          position: 'relative' }}
-      >
-        {visibleItems.items.map((rowData, index) => 
-          renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)
-        )}
-      </TableBody>
-    </Box>
-  );
-};
+}> = ({ visibleItems, rowHeight, renderTableRow }) => (
+  <TableBody
+    style={{
+      height: visibleItems.totalHeight,
+      position: 'relative' }}
+  >
+    {visibleItems.items.map((rowData, index) => 
+      renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)
+    )}
+  </TableBody>
+);
 
 const PlainBody: React.FC<{
   data: TableBodyProps['data'];
@@ -258,26 +239,16 @@ const PlainBody: React.FC<{
 
 // Enhanced Table Body Component  
 export const EnhancedTableBody: React.FC<TableBodyProps> = React.memo((props) => {
-  const { data, virtualScrolling, containerHeight, overscan = 5 } = props;
+  const { data, virtualWindow } = props;
   // The row renderer takes the body's own props; its `rowHeight` stays the
   // caller's design px, and the row resolves the default where it draws it.
   const renderTableRow = useTableRowRenderer({ ...props, selectedRows: props.selectedRows ?? [] });
-  const rowHeight = tableRowHeight(props.rowHeight);
-
-  const { visibleItems, handleScroll } = useVirtualScrolling(
-    data, 
-    rowHeight || 40, 
-    typeof containerHeight === 'number' ? containerHeight : 400, 
-    overscan
-  );
 
-  if (virtualScrolling && containerHeight && rowHeight) {
+  if (virtualWindow) {
     return (
       <VirtualisedBody
-        visibleItems={visibleItems}
-        rowHeight={rowHeight}
-        containerHeight={containerHeight}
-        onScroll={handleScroll}
+        visibleItems={virtualWindow}
+        rowHeight={tableRowHeight(props.rowHeight)}
         renderTableRow={renderTableRow}
       />
     );

package/src/components/layout/Separator/Separator.styles.ts

@@ -128,6 +128,38 @@ const ruleLength = (theme: Theme, length: SeparatorProps['length']): string => {
   return length <= 1 ? `${length * 100}%` : rem(theme, length);
 };
 
+/**
+ * What a labelled separator's rules add to {@link separatorStyles}, and whether
+ * the group stretches to its parent (FUT-2617).
+ *
+ * A labelled VERTICAL separator is a flex COLUMN — rule, label, rule — and with
+ * no `length` each rule is `height: 100%` of a column whose height is its own
+ * content: both resolved to 0px and only the label showed. So the column
+ * stretches to the row it sits in and the two rules split what the label
+ * leaves, equally (`flex: 1 1 0`), never shorter than a visible minimum. With a
+ * `length` the rule is exactly that long: no grow, no shrink, no basis, and the
+ * column keeps its content height, centred as before.
+ *
+ * Only the labelled branch reads this. The plain separator keeps
+ * `separatorStyles` as is, since `flex: 1 1 0` there would widen a vertical
+ * separator sitting in a row. The horizontal rules already shrink around the
+ * label in their row, so they are left alone.
+ */
+export const labelledSeparatorLayout = (
+  theme: Theme,
+  isHorizontal: boolean,
+  length: SeparatorProps['length'],
+): { rule: CSSObject; group: CSSObject } => {
+  if (isHorizontal) return { rule: {}, group: {} };
+  if (length) return { rule: { flex: 'none' }, group: {} };
+  return {
+    // A design 16px, as long as the gap beside the label at the default
+    // spacing, so a short or unsized row still shows two rules and not a word.
+    rule: { flex: '1 1 0', minHeight: rem(theme, 16) },
+    group: { alignSelf: 'stretch' },
+  };
+};
+
 export const separatorStyles = (
   theme: Theme,
   { variant, orientation, size, color, blockMargin, length }: SeparatorStyleArgs,

package/src/components/layout/Separator/Separator.tsx

@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import { separatorBlockMargin, separatorStyles } from './Separator.styles';
+import { labelledSeparatorLayout, separatorBlockMargin, separatorStyles } from './Separator.styles';
 import type { SeparatorProps } from './Separator.types';
 
 export const Separator: React.FC<SeparatorProps> = ({
@@ -25,7 +25,8 @@ export const Separator: React.FC<SeparatorProps> = ({
   if (children) {
     // The rules either side of the label sit INSIDE the row, which carries the
     // margin; their own would add it a second time.
-    const ruleStyles = { ...styles, margin: 0 };
+    const layout = labelledSeparatorLayout(theme, isHorizontal, length);
+    const ruleStyles = { ...styles, margin: 0, ...layout.rule };
 
     return (
       <Box
@@ -40,6 +41,7 @@ export const Separator: React.FC<SeparatorProps> = ({
           margin: blockMargin,
           flexDirection: isHorizontal ? 'row' : 'column',
           gap: theme.spacing(2),
+          ...layout.group,
         }}
       >
         <Box sx={ruleStyles} />

package/src/components/utility/WorkflowStep/WorkflowStep.helpers.ts

@@ -2,6 +2,7 @@ import type { Theme } from '@mui/material/styles/index.js';
 
 import type { WorkflowStepItem, WorkflowStepProps } from './WorkflowStep.types';
 import { neutralTones } from '../../../tokens/ink';
+import { paletteKey } from '../../../tokens/scales';
 
 type StepColor = NonNullable<WorkflowStepProps['color']>;
 type StepSize = NonNullable<WorkflowStepProps['size']>;
@@ -22,9 +23,15 @@ interface StepPalette {
   contrastText: string;
 }
 
-/** `neutral` has no MUI palette entry, so its pair is derived from grey. */
+/**
+ * The step's colour pair, keyed through `paletteKey` so `danger` reads MUI's
+ * `error` (the palette has no `danger`). `neutral` lands on `grey`, a ramp with
+ * no `main`, so its pair is derived from the ramp — with the contrast computed,
+ * not assumed.
+ */
 export const stepPalette = (theme: Theme, color?: StepColor): StepPalette => {
-  if (color === 'neutral') {
+  const key = paletteKey(color || 'primary');
+  if (key === 'grey') {
     const main = neutralTones(theme).emphasis;
     return {
       main,
@@ -32,7 +39,6 @@ export const stepPalette = (theme: Theme, color?: StepColor): StepPalette => {
     };
   }
 
-  const key = (color || 'primary') as 'primary' | 'secondary' | 'success' | 'warning' | 'error';
   return theme.palette[key];
 };
 

package/src/components/utility/WorkflowStep/WorkflowStep.parts.tsx

@@ -167,11 +167,7 @@ const StepConnector = styled(Box, {
   color: WorkflowStepProps['color'];
   variant: WorkflowStepProps['variant'];
 }>(({ theme, orientation, isCompleted, color, variant }) => {
-  const colorKey = color || 'primary';
-  const colorValue = colorKey === 'neutral' 
-    ? { main: neutralTones(theme).emphasis }
-    : theme.palette[colorKey as 'primary' | 'secondary' | 'success' | 'warning' | 'error'];
-  const connectorColor = isCompleted ? colorValue.main : neutralTones(theme).track;
+  const connectorColor = isCompleted ? stepPalette(theme, color).main : neutralTones(theme).track;
 
   return {
     flex: 1,

package/dist/chunk-3YOXVNO4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Table/Table.tsx"],"sourcesContent":["import MoreVertIcon from '@mui/icons-material/MoreVert';\nimport Box from '@mui/material/Box/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Skeleton from '@mui/material/Skeleton/index.js';\nimport Switch from '@mui/material/Switch/index.js';\nimport MuiTable from '@mui/material/Table/index.js';\nimport TableBody from '@mui/material/TableBody/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableContainer from '@mui/material/TableContainer/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n  ColumnConfig,\n  TableDensity,\n  TableProps,\n  TableStripeColor} from './Table.types';\nimport { TABLE_DEFAULTS, definedProps } from './Table.helpers';\nimport { useTableSelection } from './Table.hooks';\nimport { EnhancedTableBody, EnhancedTableHeader } from './TableParts';\nimport { EmptyRow, NoDataPlaceholder } from './TableStates';\nimport {\n  tableStyles } from './Table.styles';\nimport { rem } from '../../../tokens/relative';\n\n/** The scroll box's height: a number is design px, 400 unless the caller says otherwise. */\nconst scrollHeight = (theme: Theme, containerHeight: number | string | undefined): string => {\n  const box = containerHeight || 400;\n  return typeof box === 'number' ? rem(theme, box) : box;\n};\n\n// Define pulse animation\nconst StyledTableContainer = styled(TableContainer, {\n  shouldForwardProp: (prop) => !['virtualScrolling', 'containerHeight'].includes(prop as string) })<{ \n  virtualScrolling?: boolean; \n  containerHeight?: number | string;\n}>(({ theme, virtualScrolling, containerHeight }) => ({\n  ...(virtualScrolling && {\n    height: scrollHeight(theme, containerHeight),\n    overflow: 'auto' }) }));\n\n// Helper function to get stripe color from theme\nconst StyledTable = styled(MuiTable, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'glow', 'pulse', 'hoverable', 'density', 'stickyHeader', 'stripeColor'].includes(prop as string) })<{\n  customVariant?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  hoverable?: boolean;\n  density?: TableDensity;\n  stickyHeader?: boolean;\n  stripeColor?: TableStripeColor;\n}>(({ theme, customVariant, glow, pulse, hoverable, density, stickyHeader, stripeColor = 'neutral' }) => {\n  return tableStyles({\n    theme,\n    customVariant,\n    glow,\n    pulse,\n    hoverable,\n    density,\n    stickyHeader,\n    stripeColor });\n});\n\n// Virtual Scrolling Hook\nconst TableShell: React.FC<{\n  innerRef: React.Ref<globalThis.HTMLTableElement>;\n  variant?: string;\n  stripeColor?: TableStripeColor;\n  glow?: boolean;\n  pulse?: boolean;\n  hoverable?: boolean;\n  density?: TableDensity;\n  stickyHeader?: boolean;\n  header: React.ReactNode;\n  rest: Record<string, unknown>;\n  children: React.ReactNode;\n}> = ({\n  innerRef,\n  variant,\n  stripeColor,\n  glow,\n  pulse,\n  hoverable,\n  density,\n  stickyHeader,\n  header,\n  rest,\n  children }) => (\n  <StyledTableContainer>\n    <StyledTable\n      ref={innerRef}\n      customVariant={variant}\n      stripeColor={stripeColor}\n      glow={glow}\n      pulse={pulse}\n      hoverable={hoverable}\n      density={density}\n      stickyHeader={stickyHeader}\n      {...rest}\n    >\n      {header}\n      {children}\n    </StyledTable>\n  </StyledTableContainer>\n);\n\nconst SKELETON_ROW_COUNT = 5;\n\nconst LoadingSkeletonRows: React.FC<{ columns?: ColumnConfig[] }> = ({ columns }) => {\n  const theme = useTheme();\n  return (\n    <>\n      {Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => (\n        <TableRow key={index}>\n          {columns?.map((column) => (\n            <TableCell key={column.key}>\n              <Skeleton height={rem(theme, 20)} />\n            </TableCell>\n          ))}\n        </TableRow>\n      ))}\n    </>\n  );\n};\n\nexport type TableShellProps = Omit<React.ComponentProps<typeof TableShell>, 'children'>;\n\ntype Selection = ReturnType<typeof useTableSelection>;\n\ninterface RendererProps {\n  resolved: TableProps;\n  selection: Selection;\n  innerRef: React.Ref<globalThis.HTMLTableElement>;\n  rest: Record<string, unknown>;\n}\n\n// The column-visibility control, shown only when responsive mode has actually\n// hidden something on a narrow viewport.\nconst ColumnToggleMenu: React.FC<{\n  columns: ColumnConfig[];\n  hiddenColumns: number[];\n  anchor: HTMLElement | null;\n  setAnchor: (element: HTMLElement | null) => void;\n  setHiddenColumns: (next: number[]) => void;\n}> = ({ columns, hiddenColumns, anchor, setAnchor, setHiddenColumns }) => (\n  <Box position=\"absolute\" top={8} right={8}>\n    <IconButton onClick={(event) => setAnchor(event.currentTarget)} size=\"small\">\n      <MoreVertIcon />\n    </IconButton>\n    <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)}>\n      {columns.map((column, index) => (\n        <MenuItem key={column.key}>\n          <FormControlLabel\n            control={\n              <Switch\n                checked={!hiddenColumns.includes(index)}\n                onChange={(event) =>\n                  setHiddenColumns(\n                    event.target.checked\n                      ? hiddenColumns.filter((i: number) => i !== index)\n                      : [...hiddenColumns, index],\n                  )\n                }\n                size=\"small\"\n              />\n            }\n            label={column.label}\n          />\n        </MenuItem>\n      ))}\n    </Menu>\n  </Box>\n);\n\n// The populated table. Local because StyledTableContainer and StyledTable\n// cannot cross a module boundary (TS2742).\nconst columnsFor = (resolved: TableProps, selection: Selection): ColumnConfig[] =>\n  (resolved.responsive ? selection.visibleColumns : resolved.columns) ?? [];\n\n// The toggle only earns its place when responsive mode has actually hidden\n// something on a narrow viewport.\nconst showsColumnToggle = (resolved: TableProps, selection: Selection): boolean =>\n  Boolean(\n    resolved.responsive &&\n      selection.isMobile &&\n      resolved.showColumnToggle &&\n      selection.hiddenColumns.length > 0,\n  );\n\nconst AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerRef, rest }) => {\n  const finalColumns = columnsFor(p, selection);\n  const showToggle = showsColumnToggle(p, selection);\n\n  return (\n    <Box position=\"relative\">\n      <StyledTableContainer\n        virtualScrolling={p.virtualScrolling}\n        containerHeight={p.containerHeight}\n      >\n        <StyledTable\n          ref={innerRef}\n          customVariant={p.variant}\n          stripeColor={p.stripeColor}\n          glow={p.glow}\n          pulse={p.pulse}\n          hoverable={p.hoverable}\n          density={p.density}\n          stickyHeader={p.stickyHeader}\n          {...rest}\n        >\n          <EnhancedTableHeader\n            columns={finalColumns}\n            data={p.data ?? []}\n            sortable={p.sortable}\n            sortConfig={p.sortConfig}\n            onSortChange={p.onSortChange}\n            selectable={p.selectable}\n            selectedRows={p.selectedRows}\n            onSelectAll={selection.handleSelectAll}\n            density={p.density}\n            stickyHeader={p.stickyHeader}\n          />\n          <EnhancedTableBody\n            data={p.data ?? []}\n            columns={finalColumns}\n            selectedRows={p.selectedRows}\n            onRowClick={p.onRowClick}\n            onRowFocus={p.onRowFocus}\n            onRowBlur={p.onRowBlur}\n            onSelectionChange={selection.handleSelectionChange}\n            rowKeyExtractor={p.rowKeyExtractor}\n            density={p.density}\n            selectable={p.selectable}\n            hoverable={p.hoverable}\n            renderRow={p.renderRow}\n            renderCell={p.renderCell}\n            virtualScrolling={p.virtualScrolling}\n            containerHeight={typeof p.containerHeight === 'number' ? p.containerHeight : undefined}\n            rowHeight={p.rowHeight}\n            overscan={p.overscan}\n          />\n        </StyledTable>\n      </StyledTableContainer>\n\n      {showToggle && (\n        <ColumnToggleMenu\n          columns={p.columns ?? []}\n          hiddenColumns={selection.hiddenColumns}\n          anchor={selection.columnMenuAnchor}\n          setAnchor={selection.setColumnMenuAnchor}\n          setHiddenColumns={selection.setHiddenColumns}\n        />\n      )}\n    </Box>\n  );\n};\n\n// The loading and empty states render the same shell as the populated table, so\n// they share TableShell rather than repeating it three times.\nconst buildShell = ({\n  resolved,\n  selection,\n  innerRef,\n  rest,\n  finalColumns }: RendererProps & { finalColumns?: ColumnConfig[] }) => ({\n  innerRef,\n  variant: resolved.variant,\n  stripeColor: resolved.stripeColor,\n  glow: resolved.glow,\n  pulse: resolved.pulse,\n  hoverable: resolved.hoverable,\n  density: resolved.density,\n  stickyHeader: resolved.stickyHeader,\n  header: resolved.columns ? (\n    <EnhancedTableHeader\n      columns={finalColumns ?? []}\n      data={[]}\n      sortable={resolved.sortable}\n      sortConfig={resolved.sortConfig}\n      onSortChange={resolved.onSortChange}\n      selectable={resolved.selectable}\n      selectedRows={resolved.selectedRows}\n      onSelectAll={selection.handleSelectAll}\n      density={resolved.density}\n      stickyHeader={resolved.stickyHeader}\n    />\n  ) : null,\n  rest: rest as Record<string, unknown> });\n\nconst TableLoadingState: React.FC<{\n  shell: TableShellProps;\n  loadingComponent?: React.ReactNode;\n  columns?: ColumnConfig[];\n}> = ({ shell, loadingComponent, columns }) => (\n  <TableShell {...shell}>\n    <TableBody data-testid=\"table-loading\">\n      {loadingComponent || <LoadingSkeletonRows columns={columns} />}\n    </TableBody>\n  </TableShell>\n);\n\nconst TableEmptyState: React.FC<{\n  shell: TableShellProps;\n  emptyStateComponent?: React.ReactNode;\n  emptyText: string;\n  colSpan: number;\n}> = ({ shell, emptyStateComponent, emptyText, colSpan }) => (\n  <TableShell {...shell}>\n    <EmptyRow colSpan={colSpan}>\n      {emptyStateComponent || <NoDataPlaceholder emptyText={emptyText} />}\n    </EmptyRow>\n  </TableShell>\n);\n\nexport const Table = React.forwardRef<globalThis.HTMLTableElement, TableProps>(\n  (tableProps, ref) => {\n    const resolved = { ...TABLE_DEFAULTS, ...definedProps(tableProps) } as TableProps;\n    const {\n      columns,\n      data,\n      responsive,\n      loading,\n      loadingComponent,\n      emptyStateComponent,\n      emptyText,\n      children,\n      ...props\n    } = resolved;\n\n    const selection = useTableSelection({\n      columns,\n      data,\n      responsive,\n      columnPriorities: resolved.columnPriorities,\n      selectedRows: resolved.selectedRows ?? [],\n      rowKeyExtractor: resolved.rowKeyExtractor,\n      onSelectionChange: resolved.onSelectionChange });\n\n    const rest = props as unknown as Record<string, unknown>;\n    const renderer: RendererProps = { resolved, selection, innerRef: ref, rest };\n    const finalColumns = responsive ? selection.visibleColumns : columns;\n    const shell = buildShell({ ...renderer, finalColumns });\n\n    if (loading) {\n      return (\n        <TableLoadingState shell={shell} loadingComponent={loadingComponent} columns={columns} />\n      );\n    }\n\n    if (data && data.length === 0) {\n      return (\n        <TableEmptyState\n          shell={shell}\n          emptyStateComponent={emptyStateComponent}\n          emptyText={emptyText}\n          colSpan={finalColumns?.length || 1}\n        />\n      );\n    }\n\n    if (columns && data) return <AdvancedTable {...renderer} />;\n\n    // Basic table (backward compatibility)\n    return (\n      <StyledTable\n        ref={ref}\n        customVariant={resolved.variant}\n        stripeColor={resolved.stripeColor}\n        glow={resolved.glow}\n        pulse={resolved.pulse}\n        hoverable={resolved.hoverable}\n        density={resolved.density}\n        stickyHeader={resolved.stickyHeader}\n        {...rest}\n      >\n        {children}\n      </StyledTable>\n    );\n  },\n);\n\nTable.displayName = 'Table';"],"mappings":"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","names":[]}