@12-apps/ui 6.39.8 → 6.39.10

package/dist/types/components/layout/SettingsLayout/SettingsSectionChips.scroll.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Telling the strip's own scrolls from the visitor's (FUT-2606).
+ *
+ * Split from `SettingsSectionChips.tsx` so the chips stay a component file and
+ * the rule for "who moved the strip" can be read in one place.
+ */
+interface VisitorScrollWatch {
+    /** True once the visitor has moved the strip themselves. */
+    hasScrolled: () => boolean;
+    /**
+     * True while a scroll the visitor MAY be making has not come to rest yet. The
+     * strip must not scroll itself under it: that would yank a drag in progress.
+     */
+    isUndecided: () => boolean;
+    /** Where the strip last aimed itself, in its own pixels; `NaN` before it has. */
+    aimedAt: () => number;
+    /**
+     * The strip is about to scroll itself to `left`. Records the aim and NOTHING
+     * else: it used to disarm too, and a re-centre landing between a visitor's key
+     * press (or wheel, or pan) and the first tick of the scroll it causes wiped
+     * the arming — their scroll went unclaimed, read as the strip's own. Left
+     * armed, the worst a stale arming does is put the strip's OWN next scroll
+     * under judgement, which rests on its aim, is not latched, and disarms.
+     */
+    beforeOwnScroll: (left: number) => void;
+    /** Called once an undecided scroll has come to rest and been judged. */
+    onSettled: (listener: () => void) => void;
+    detach: () => void;
+}
+/**
+ * Tell a scroll the VISITOR made from every other one.
+ *
+ * The `scroll` event cannot say: the strip's own `scrollTo` fires it, and so does
+ * the browser clamping a strip whose content shrank. So a scroll is only a
+ * CANDIDATE when it arrives during something only a visitor does:
+ *
+ * - a finger held on the strip (`touchstart` until `touchend`) — a drag;
+ * - a pointer held on it (`pointerdown` until `pointerup`);
+ * - a key press, a SIDEWAYS wheel, or the browser taking a pointer over to pan
+ *   it (`pointercancel`), each armed until the next scroll under judgement has
+ *   been judged — whoever's it turns out to be.
+ *
+ * and the verdict waits until the strip comes to REST (`scrollend`, or a quiet
+ * spell where the browser has no `scrollend`): it is the visitor's only if the
+ * strip rests somewhere other than where it last aimed itself.
+ *
+ * Judged at rest rather than per `scroll` because the strip's own smooth scroll
+ * fires `scroll` for a third of a second, and a visitor who presses Tab or puts
+ * a finger on a chip to scroll the PAGE in that window is not scrolling the
+ * strip. Every tick of that animation used to count as theirs, the strip stopped
+ * re-centring for good, and the open chip could be left clipped (FUT-2606
+ * again, by another door). A visitor who really drags or wheels the strip
+ * mid-animation cancels it, so the strip rests where THEY left it — and that
+ * still counts. The one loss: a visitor who happens to leave it within a pixel
+ * of the strip's own aim is not told apart from it, and the strip there is
+ * already where it would have put itself.
+ *
+ * A tap is a pointer held with no scroll under it, so it never counts. A
+ * vertical wheel scrolls the PAGE — the strip is `overflowY: hidden` — and is
+ * not armed at all.
+ */
+export declare function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch;
+export {};
+//# sourceMappingURL=SettingsSectionChips.scroll.d.ts.map

package/dist/types/components/layout/SettingsLayout/SettingsSectionChips.scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsSectionChips.scroll.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingsLayout/SettingsSectionChips.scroll.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAkBH,UAAU,kBAAkB;IAC1B,4DAA4D;IAC5D,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B;;;OAGG;IACH,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,iFAAiF;IACjF,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB;;;;;;;OAOG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wEAAwE;IACxE,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AA4BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,GAAG,kBAAkB,CA0EzE"}

package/dist/typography/Heading.js

@@ -1,17 +1,17 @@
 import "../chunk-6GP2DOOO.js";
 import {
   Heading
-} from "../chunk-IJFAF3A7.js";
-import "../chunk-5JSRM7WC.js";
-import "../chunk-LKMMJKXU.js";
+} from "../chunk-IWEUSZY3.js";
+import "../chunk-RB3X6CEE.js";
+import "../chunk-CYZZHWNK.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-PT6TCWIW.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/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-HMAPQV4C.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-EMEXXAQI.js";
 import "./chunk-Y6C4MYZE.js";
@@ -15,23 +15,23 @@ import "./chunk-FKUYRQSP.js";
 import "./chunk-76X6JRVI.js";
 import "./chunk-JH7EEJEQ.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-2EAAWOZ2.js";
+import "./chunk-HM2JJNUE.js";
+import "./chunk-TAMIZE4Q.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.8",
+  "version": "6.39.10",
   "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,
     ],
   );