@12-apps/ui 6.39.7 → 6.39.9

package/dist/typography/Text.js

@@ -1,15 +1,15 @@
 import "../chunk-VUHLNYAE.js";
 import {
   Text
-} from "../chunk-YBH4SPMM.js";
-import "../chunk-U3PPLAFB.js";
+} from "../chunk-URHX4FAQ.js";
+import "../chunk-ZN6YATOG.js";
 import "../chunk-TYJR4GOF.js";
-import "../chunk-PE4ZW3IA.js";
+import "../chunk-BLW6KLDR.js";
 import "../chunk-2BYKTBDL.js";
 import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
-import "../chunk-PZBK3F52.js";
 import "../chunk-26X4CZVR.js";
+import "../chunk-PZBK3F52.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";

package/dist/user-avatar.js

@@ -1,7 +1,7 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-JQWAANGN.js";
+} from "./chunk-OOCREE37.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-EMEXXAQI.js";
 import "./chunk-Y6C4MYZE.js";
@@ -19,19 +19,19 @@ import "./chunk-2EAAWOZ2.js";
 import "./chunk-4WNFOBTH.js";
 import "./chunk-LN46DSMF.js";
 import "./chunk-TAMIZE4Q.js";
-import "./chunk-YBH4SPMM.js";
-import "./chunk-U3PPLAFB.js";
+import "./chunk-URHX4FAQ.js";
+import "./chunk-ZN6YATOG.js";
 import "./chunk-TYJR4GOF.js";
 import "./chunk-CGO452DC.js";
 import "./chunk-GDN2LUTZ.js";
 import "./chunk-7FDU3FIN.js";
 import "./chunk-EPEJMTCQ.js";
-import "./chunk-PE4ZW3IA.js";
+import "./chunk-BLW6KLDR.js";
 import "./chunk-2BYKTBDL.js";
 import "./chunk-AG66JBNH.js";
 import "./chunk-FZXKH2ZT.js";
-import "./chunk-PZBK3F52.js";
 import "./chunk-26X4CZVR.js";
+import "./chunk-PZBK3F52.js";
 import "./chunk-FQ6UW7IY.js";
 import "./chunk-6JAIFIPW.js";
 import "./chunk-N3GAFIXG.js";

package/dist/utility/WorkflowStep.js

@@ -12,12 +12,12 @@ import "../chunk-CGO452DC.js";
 import "../chunk-GDN2LUTZ.js";
 import "../chunk-7FDU3FIN.js";
 import "../chunk-EPEJMTCQ.js";
-import "../chunk-PE4ZW3IA.js";
+import "../chunk-BLW6KLDR.js";
 import "../chunk-2BYKTBDL.js";
 import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
-import "../chunk-PZBK3F52.js";
 import "../chunk-26X4CZVR.js";
+import "../chunk-PZBK3F52.js";
 import "../chunk-FQ6UW7IY.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.39.7",
+  "version": "6.39.9",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

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

@@ -2,15 +2,16 @@ import { useTheme } from '@mui/material/styles/index.js';
 import useMediaQuery from '@mui/material/useMediaQuery/index.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { rem, remPx } from '../../../tokens/relative';
+import { remPx } from '../../../tokens/relative';
 
 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.
+ * hands back to draw with stays in design px (`offsetY`, `trailingPx` — the
+ * spacer rows either side of the window), 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
@@ -44,8 +45,8 @@ export const useVirtualScrolling = (
       startIndex: start,
       endIndex: end,
       items: data.slice(start, end),
-      totalHeight: rem(theme, data.length * rowHeight),
       offsetY: start * rowHeight,
+      trailingPx: (data.length - end) * rowHeight,
     };
   }, [data, rowHeight, containerHeight, scroll, overscan, theme]);
 

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

@@ -127,6 +127,12 @@ Handle large datasets efficiently:
 />
 ```
 
+Only a numeric `containerHeight` virtualises; a string only sizes the scroll box. On the virtual path:
+
+- **Every row is exactly `rowHeight`** (default 52), whatever the `density`: the density still sets the header and the font size, but not the body's row height or vertical padding. A cell's content is centred vertically and clipped — taller or wider content does not grow the row — so pick a `rowHeight` the tallest cell fits in.
+- **Column widths come from the header** (`table-layout: fixed`): a column's `width`, with the columns that declare none sharing what is left. They hold still while rows scroll in and out. **`minWidth` is ignored** on this path; give a column that must not shrink a `width` its content and the density's side padding fit in. With `selectable`, the checkbox column is MUI's 48 wide with MUI's own checkbox padding.
+- The rows outside the window are two `aria-hidden` spacer rows at the top and bottom of the `<tbody>`, so `striped` stripes follow the mounted rows rather than the data index.
+
 ### Responsive Design
 Automatically hide/show columns based on viewport:
 

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

@@ -110,6 +110,29 @@ type VariantArgs = {
 const tableVariantStyles = (args: VariantArgs, customVariant?: string): CSSObject =>
   customVariant ? (TABLE_VARIANTS[customVariant]?.(args) ?? {}) : {};
 
+/**
+ * A virtualised table (FUT-2668). Fixed layout takes the column widths from the
+ * header — a column's declared `width`, the rest sharing what is left — so they
+ * hold still while different rows mount (it ignores a column's `minWidth`). A
+ * body cell drops its vertical padding and the density's height: the pitch is
+ * `rowHeight`, and the cell's content wrapper is exactly that tall.
+ *
+ * The checkbox column is MUI's 48 wide, and fixed layout holds it there. The
+ * density's side padding would leave its checkbox 16 of that and clip it in the
+ * body, so it keeps MUI's own checkbox padding (4 on the left, none on the
+ * right), in the header and the body alike. After the sticky header's rule,
+ * which it would otherwise lose to.
+ */
+const virtualisedStyles = (theme: Theme): CSSObject => ({
+  tableLayout: 'fixed',
+  '& .MuiTableBody-root .MuiTableCell-root': {
+    paddingTop: 0,
+    paddingBottom: 0,
+    height: 'auto' },
+  '& .MuiTableHead-root .MuiTableCell-paddingCheckbox, & .MuiTableBody-root .MuiTableCell-paddingCheckbox': {
+    paddingLeft: rem(theme, 4),
+    paddingRight: 0 } });
+
 // Sticky headers and row hover are independent of the variant.
 const stickyHeaderStyles = (
   theme: Theme,
@@ -183,7 +206,8 @@ export const tableStyles = ({
   hoverable,
   density,
   stickyHeader,
-  stripeColor = 'neutral' }: {
+  stripeColor = 'neutral',
+  virtualised }: {
   theme: Theme;
   customVariant?: string;
   glow?: boolean;
@@ -192,6 +216,8 @@ export const tableStyles = ({
   density?: TableDensity;
   stickyHeader?: boolean;
   stripeColor?: TableStripeColor;
+  /** The body is a virtual window, drawn at `rowHeight`. */
+  virtualised?: boolean;
 }): CSSObject => {
   const densityConfig = getDensityConfig(theme, density);
   
@@ -212,6 +238,7 @@ export const tableStyles = ({
     ...(stickyHeader ? stickyHeaderStyles(theme, densityConfig) : {}),
     ...(hoverable ? hoverableRowStyles(theme) : {}),
     ...emphasisStyles(theme, glow, pulse),
+    ...(virtualised ? virtualisedStyles(theme) : {}),
 
 
     // Variant styles

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

@@ -37,7 +37,7 @@ import { rem } from '../../../tokens/relative';
 // Helper function to get stripe color from theme
 const StyledTable = styled(MuiTable, {
   shouldForwardProp: (prop) =>
-    !['customVariant', 'glow', 'pulse', 'hoverable', 'density', 'stickyHeader', 'stripeColor'].includes(prop as string) })<{
+    !['customVariant', 'glow', 'pulse', 'hoverable', 'density', 'stickyHeader', 'stripeColor', 'virtualised'].includes(prop as string) })<{
   customVariant?: string;
   glow?: boolean;
   pulse?: boolean;
@@ -45,7 +45,8 @@ const StyledTable = styled(MuiTable, {
   density?: TableDensity;
   stickyHeader?: boolean;
   stripeColor?: TableStripeColor;
-}>(({ theme, customVariant, glow, pulse, hoverable, density, stickyHeader, stripeColor = 'neutral' }) => {
+  virtualised?: boolean;
+}>(({ theme, customVariant, glow, pulse, hoverable, density, stickyHeader, stripeColor = 'neutral', virtualised }) => {
   return tableStyles({
     theme,
     customVariant,
@@ -54,7 +55,8 @@ const StyledTable = styled(MuiTable, {
     hoverable,
     density,
     stickyHeader,
-    stripeColor });
+    stripeColor,
+    virtualised });
 });
 
 // Virtual Scrolling Hook
@@ -214,6 +216,7 @@ const AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerR
           hoverable={p.hoverable}
           density={p.density}
           stickyHeader={p.stickyHeader}
+          virtualised={Boolean(windowHeight)}
           {...rest}
         >
           <EnhancedTableHeader
@@ -243,7 +246,6 @@ const AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerR
             hoverable={p.hoverable}
             renderRow={p.renderRow}
             renderCell={p.renderCell}
-            virtualScrolling={p.virtualScrolling}
             virtualWindow={windowHeight ? visibleItems : undefined}
             rowHeight={p.rowHeight}
           />

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

@@ -310,15 +310,18 @@ export interface TableHeaderProps {
 /**
  * The rows a virtualised body mounts. Computed by `useVirtualScrolling` in the
  * table, which owns the one scroll container, and handed down to the body.
+ *
+ * The mounted rows stay in the table's flow, between two spacer rows standing
+ * in for the rows above and below the window (FUT-2668).
  */
 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. */
+  /** The rows above the window — `startIndex × rowHeight` — in design px. */
   offsetY: number;
+  /** The rows below the window — `(total − endIndex) × rowHeight` — in design px. */
+  trailingPx: number;
 }
 
 export interface TableBodyProps {
@@ -335,7 +338,6 @@ export interface TableBodyProps {
   hoverable?: boolean;
   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;
   /** Set only when the body is virtualised: the rows in view and where they sit. */
   virtualWindow?: VirtualWindow;
   rowHeight?: number;

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

@@ -31,6 +31,24 @@ const useRowSelection = ({
     [onSelectionChange, selectedRows],
   );
 
+type RowRendererProps = Pick<
+  TableBodyProps,
+  | 'columns'
+  | 'onRowClick'
+  | 'onRowFocus'
+  | 'onRowBlur'
+  | 'onSelectionChange'
+  | 'rowKeyExtractor'
+  | 'selectable'
+  | 'renderRow'
+  | 'renderCell'
+  | 'rowHeight'
+> & {
+  selectedRows: Array<string | number>;
+  /** Whether the rows are a virtual window's, drawn at exactly `rowHeight`. */
+  virtualised: boolean;
+};
+
 export const useTableRowRenderer = ({
   columns,
   selectedRows,
@@ -42,22 +60,9 @@ export const useTableRowRenderer = ({
   selectable,
   renderRow,
   renderCell,
-  virtualScrolling,
+  virtualised,
   rowHeight,
-}: Pick<
-  TableBodyProps,
-  | 'columns'
-  | 'onRowClick'
-  | 'onRowFocus'
-  | 'onRowBlur'
-  | 'onSelectionChange'
-  | 'rowKeyExtractor'
-  | 'selectable'
-  | 'renderRow'
-  | 'renderCell'
-  | 'virtualScrolling'
-  | 'rowHeight'
-> & { selectedRows: Array<string | number> }) => {
+}: RowRendererProps) => {
   const getRowKey = useRowKey(rowKeyExtractor);
   const isRowSelected = useCallback(
     (rowKey: string | number) => selectedRows.includes(rowKey),
@@ -66,7 +71,7 @@ export const useTableRowRenderer = ({
   const handleRowSelection = useRowSelection({ selectedRows, onSelectionChange });
 
   const renderTableRow = useCallback(
-    (rowData: Record<string, unknown>, index: number, offsetY: number = 0) => {
+    (rowData: Record<string, unknown>, index: number) => {
       const rowKey = getRowKey(rowData, index);
       const selected = isRowSelected(rowKey);
 
@@ -78,7 +83,6 @@ export const useTableRowRenderer = ({
           rowData={rowData}
           rowKey={rowKey}
           index={index}
-          offsetY={offsetY}
           columns={columns}
           selected={selected}
           selectable={selectable}
@@ -87,7 +91,7 @@ export const useTableRowRenderer = ({
           onRowFocus={onRowFocus}
           onRowBlur={onRowBlur}
           onSelect={handleRowSelection}
-          virtualScrolling={virtualScrolling}
+          virtualised={virtualised}
           renderCell={renderCell}
         />
       );
@@ -104,7 +108,7 @@ export const useTableRowRenderer = ({
       renderCell,
       rowHeight,
       selectable,
-      virtualScrolling,
+      virtualised,
     ],
   );
 

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

@@ -7,6 +7,7 @@ import TableSortLabel from '@mui/material/TableSortLabel/index.js';
 import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import React, { useCallback } from 'react';
 
+import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';
 import { rem } from '../../../tokens/relative';
 
 import { tableRowHeight } from './Table.helpers';
@@ -125,14 +126,62 @@ export const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({
 
 EnhancedTableHeader.displayName = 'EnhancedTableHeader';
 
+/** How a virtual cell's wrapper places its content along the row, per `align`. */
+const JUSTIFY: Record<NonNullable<ColumnConfig['align']>, React.CSSProperties['justifyContent']> = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+};
+
+/**
+ * A virtual cell's content (FUT-2668). The cell has no vertical padding, and
+ * this fills its content box — the pitch less the cell's bottom rule, the one
+ * hairline every variant draws — so the cell's border box is exactly the pitch
+ * whatever it holds. Centred vertically, placed by the column's `align`, and
+ * clipped rather than allowed to grow the row.
+ */
+const VirtualCellContent: React.FC<{
+  rowHeight: number;
+  align: NonNullable<ColumnConfig['align']>;
+  children: React.ReactNode;
+}> = ({ rowHeight, align, children }) => {
+  const theme = useTheme();
+  return (
+    <div
+      style={{
+        height: `calc(${rem(theme, rowHeight)} - ${FIELD_BORDER_WIDTH}px)`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: JUSTIFY[align],
+        overflow: 'hidden',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+/** What one cell shows: the caller's `renderCell`, else the column's `render`, else the value. */
+const cellContent = (
+  column: ColumnConfig,
+  rowData: Record<string, unknown>,
+  index: number,
+  renderCell: TableBodyProps['renderCell'],
+): React.ReactNode => {
+  const value = rowData[column.key];
+  if (renderCell) return renderCell(value, column, rowData, index);
+  return column.render ? column.render(value, rowData) : (value as React.ReactNode);
+};
+
 // One data row. Split out of the memoised renderTableRow callback so the
 // callback stays a short dispatch and the row markup is readable on its own.
+// A virtualised row stays in the table's flow at `rowHeight`, and each of its
+// cells holds its content in a `VirtualCellContent` (FUT-2668); a plain row is
+// drawn as MUI draws it.
 export const TableDataRow: React.FC<{
   rowData: Record<string, unknown>;
   rowKey: string | number;
   index: number;
-  /** Where a virtualised row sits, in design px — drawn through `rem`, like its height. */
-  offsetY: number;
   columns: ColumnConfig[];
   selected: boolean;
   selectable?: boolean;
@@ -142,13 +191,13 @@ export const TableDataRow: React.FC<{
   onRowFocus?: TableBodyProps['onRowFocus'];
   onRowBlur?: TableBodyProps['onRowBlur'];
   onSelect: (event: React.MouseEvent | React.ChangeEvent, rowKey: string | number) => void;
-  virtualScrolling?: boolean;
+  /** Whether the row is one of a virtual window's. */
+  virtualised: boolean;
   renderCell?: TableBodyProps['renderCell'];
 }> = ({
   rowData,
   rowKey,
   index,
-  offsetY,
   columns,
   selected,
   selectable,
@@ -157,9 +206,19 @@ export const TableDataRow: React.FC<{
   onRowFocus,
   onRowBlur,
   onSelect,
-  virtualScrolling,
+  virtualised,
   renderCell }) => {
   const theme = useTheme();
+  const pitch = tableRowHeight(rowHeight);
+  const fit = (align: NonNullable<ColumnConfig['align']>, content: React.ReactNode) =>
+    virtualised ? (
+      <VirtualCellContent rowHeight={pitch} align={align}>
+        {content}
+      </VirtualCellContent>
+    ) : (
+      content
+    );
+
   return (
       <TableRow
         key={String(rowKey)}
@@ -168,62 +227,62 @@ export const TableDataRow: React.FC<{
         onClick={(event: React.MouseEvent<globalThis.HTMLTableRowElement>) => onRowClick?.(event, rowData)}
         onFocus={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowFocus?.(event, rowData)}
         onBlur={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowBlur?.(event, rowData)}
-        style={virtualScrolling ? { 
-          transform: `translateY(${rem(theme, offsetY)})`,
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          height: rem(theme, tableRowHeight(rowHeight)) } : undefined}
+        style={virtualised ? { height: rem(theme, pitch) } : undefined}
       >
         {selectable && (
           <TableCell padding="checkbox">
-            <Checkbox
-              checked={selected}
-              onChange={(event) => onSelect(event, rowKey)}
-              onClick={(event) => event.stopPropagation()}
-              inputProps={{ 'aria-label': `select row ${index + 1}` }}
-            />
+            {fit(
+              'left',
+              <Checkbox
+                checked={selected}
+                onChange={(event) => onSelect(event, rowKey)}
+                onClick={(event) => event.stopPropagation()}
+                inputProps={{ 'aria-label': `select row ${index + 1}` }}
+              />,
+            )}
           </TableCell>
         )}
-        {columns.map((column) => {
-          const value = rowData[column.key];
-          return (
-            <TableCell key={column.key} align={column.align || 'left'}>
-              {renderCell 
-                ? renderCell(value, column, rowData, index)
-                : column.render 
-                ? column.render(value, rowData) 
-                : (value as React.ReactNode)
-              }
-            </TableCell>
-          );
-        })}
+        {columns.map((column) => (
+          <TableCell key={column.key} align={column.align || 'left'}>
+            {fit(column.align || 'left', cellContent(column, rowData, index, renderCell))}
+          </TableCell>
+        ))}
       </TableRow>
   );
 };
 
-// Only the rows in view are rendered, positioned by absolute offset inside a
-// body sized to the full data set. `rowHeight` and every offset are design px,
+/**
+ * A stand-in for the rows outside the window, `heightPx` design px tall. A bare
+ * `<tr>` and `<td>` with no padding or border: none of MUI's row or cell
+ * classes, so hover, striping and cell padding never reach it. Not rendered at
+ * all when there is nothing to stand in for.
+ */
+const SpacerRow: React.FC<{ heightPx: number; colSpan: number }> = ({ heightPx, colSpan }) => {
+  const theme = useTheme();
+  if (heightPx <= 0) return null;
+  return (
+    <tr aria-hidden="true" style={{ height: rem(theme, heightPx) }}>
+      <td colSpan={colSpan} style={{ padding: 0, border: 0 }} />
+    </tr>
+  );
+};
+
+// Only the rows in view are rendered, in the table's own flow between two
+// spacer rows standing in for the rest (FUT-2668) — an absolutely positioned
+// `<tr>` is blockified and leaves the column grid. Every height is 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: VirtualWindow;
-  rowHeight: number;
-  renderTableRow: (
-    rowData: Record<string, unknown>,
-    index: number,
-    offsetY?: number,
-  ) => React.ReactNode;
-}> = ({ visibleItems, rowHeight, renderTableRow }) => (
-  <TableBody
-    style={{
-      height: visibleItems.totalHeight,
-      position: 'relative' }}
-  >
-    {visibleItems.items.map((rowData, index) => 
-      renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)
+  colSpan: number;
+  renderTableRow: (rowData: Record<string, unknown>, index: number) => React.ReactNode;
+}> = ({ visibleItems, colSpan, renderTableRow }) => (
+  <TableBody>
+    <SpacerRow heightPx={visibleItems.offsetY} colSpan={colSpan} />
+    {visibleItems.items.map((rowData, index) =>
+      renderTableRow(rowData, visibleItems.startIndex + index)
     )}
+    <SpacerRow heightPx={visibleItems.trailingPx} colSpan={colSpan} />
   </TableBody>
 );
 
@@ -242,13 +301,17 @@ export const EnhancedTableBody: React.FC<TableBodyProps> = React.memo((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 renderTableRow = useTableRowRenderer({
+    ...props,
+    selectedRows: props.selectedRows ?? [],
+    virtualised: Boolean(virtualWindow),
+  });
 
   if (virtualWindow) {
     return (
       <VirtualisedBody
         visibleItems={virtualWindow}
-        rowHeight={tableRowHeight(props.rowHeight)}
+        colSpan={props.columns.length + (props.selectable ? 1 : 0)}
         renderTableRow={renderTableRow}
       />
     );

package/src/components/form/Autocomplete/Autocomplete.helpers.ts

@@ -104,12 +104,30 @@ function escapeRegExp(value: string): string {
   return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
+/** One run of a highlighted label: plain text, or text the query matched. */
+export interface HighlightSegment {
+  text: string;
+  match: boolean;
+}
+
 /**
- * Wrap query matches in `<mark>` for the default suggestion renderer. Skipped for
- * fuzzy mode (non-contiguous matches) and empty queries. Returns HTML.
+ * Split `label` into the runs the query matches and the runs between them, in
+ * order, for the default suggestion renderer to wrap the matches in `<mark>`.
+ * Every occurrence of the query matches, case-insensitively and literally (regex
+ * metacharacters are escaped). Fuzzy mode (non-contiguous matches) and an empty
+ * query yield the whole label as one unmatched run.
+ *
+ * Returns TEXT, never markup: a label is caller data (in a consumer, a user's
+ * own display name), so the renderer must hand each run to React as a text
+ * child, which escapes it. Building an HTML string here and injecting it is how
+ * a label of `<img onerror=…>` once ran script in the host page.
  */
-export function highlightLabel(label: string, query: string, matchMode: MatchMode): string {
-  if (!query || matchMode === 'fuzzy') return label;
+export function highlightLabel(label: string, query: string, matchMode: MatchMode): HighlightSegment[] {
+  if (!query || matchMode === 'fuzzy') return [{ text: label, match: false }];
+  // The capturing group makes `split` keep each match, at the odd indices.
   const regex = new RegExp(`(${escapeRegExp(query)})`, 'gi');
-  return label.replace(regex, '<mark>$1</mark>');
+  return label
+    .split(regex)
+    .map((text, index) => ({ text, match: index % 2 === 1 }))
+    .filter((segment) => segment.text !== '');
 }

package/src/components/form/Autocomplete/Autocomplete.parts.tsx

@@ -194,7 +194,8 @@ export function DefaultSuggestion<T>({
 }): React.JSX.Element {
   const label = getLabel(item);
   const description = getDescription?.(item);
-  const displayLabel = highlightLabel(label, state.query, matchMode);
+  // Each run is a React text child, so the label is escaped however it reads.
+  const segments = highlightLabel(label, state.query, matchMode);
   return (
     <Box
       sx={{
@@ -202,13 +203,26 @@ export function DefaultSuggestion<T>({
         alignItems: 'center',
         gap: 1,
         width: '100%',
-        // Bold the matched prefix (not a yellow <mark> highlight).
+        // Bold every run the query matched, in any match mode but fuzzy — not
+        // only a prefix, even under `startsWith` (not a yellow <mark> highlight).
         '& mark': { backgroundColor: 'transparent', color: 'inherit', fontWeight: 700 },
       }}
     >
       {suggestionTypeIcon(getSuggestionType(item))}
       <ListItemText
-        primary={<span dangerouslySetInnerHTML={{ __html: displayLabel }} />}
+        primary={
+          <span>
+            {segments.map((segment, index) =>
+              // The runs are derived from one label and never reorder, so the
+              // position is a stable key.
+              segment.match ? (
+                <mark key={index}>{segment.text}</mark>
+              ) : (
+                <React.Fragment key={index}>{segment.text}</React.Fragment>
+              ),
+            )}
+          </span>
+        }
         secondary={description}
       />
     </Box>