@12-apps/ui 6.39.8 → 6.39.9

package/dist/{chunk-POV2KL2P.js → chunk-CCK7FB2V.js}

@@ -94,6 +94,18 @@ var TABLE_VARIANTS = {
   })
 };
 var tableVariantStyles = (args, customVariant) => customVariant ? TABLE_VARIANTS[customVariant]?.(args) ?? {} : {};
+var virtualisedStyles = (theme) => ({
+  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
+  }
+});
 var stickyHeaderStyles = (theme, densityConfig) => ({
   "& .MuiTableHead-root": {
     position: "sticky",
@@ -165,7 +177,8 @@ var tableStyles = ({
   hoverable,
   density,
   stickyHeader,
-  stripeColor = "neutral"
+  stripeColor = "neutral",
+  virtualised
 }) => {
   const densityConfig = getDensityConfig(theme, density);
   return {
@@ -184,6 +197,7 @@ var tableStyles = ({
     ...stickyHeader ? stickyHeaderStyles(theme, densityConfig) : {},
     ...hoverable ? hoverableRowStyles(theme) : {},
     ...emphasisStyles(theme, glow, pulse),
+    ...virtualised ? virtualisedStyles(theme) : {},
     // Variant styles
     // Hoverable rows
     // Selection styles
@@ -202,4 +216,4 @@ var tableStyles = ({
 export {
   tableStyles
 };
-//# sourceMappingURL=chunk-POV2KL2P.js.map
+//# sourceMappingURL=chunk-CCK7FB2V.js.map

package/dist/chunk-CCK7FB2V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/Table.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { TableDensity, TableStripeColor } from './Table.types';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n// Density configurations. The row height stays design px (`…Px`) and goes\n// through `rem` where the cell is drawn.\nconst getDensityConfig = (theme: Theme, density: TableDensity = 'normal') => {\n  const configs = {\n    compact: {\n      rowHeightPx: 36,\n      cellPadding: rems(theme, 6, 12),\n      fontSize: rem(theme, 13),\n      headerPadding: rems(theme, 8, 12) },\n    normal: {\n      rowHeightPx: 52,\n      cellPadding: rems(theme, 12, 16),\n      fontSize: rem(theme, 14),\n      headerPadding: rems(theme, 16, 16) },\n    comfortable: {\n      rowHeightPx: 68,\n      cellPadding: rems(theme, 18, 24),\n      fontSize: rem(theme, 14),\n      headerPadding: rems(theme, 20, 24) } };\n  return configs[density];\n};\n\nconst getStripeColorFromTheme = (theme: { palette: { primary: { main: string }; secondary: { main: string }; info: { main: string }; success: { main: string }; warning: { main: string }; error: { main: string }; action: { hover: string } } }, stripeColor: TableStripeColor = 'neutral') => {\n  const colorMap: Record<TableStripeColor, string> = {\n    primary: theme.palette.primary.main,\n    secondary: theme.palette.secondary.main,\n    info: theme.palette.info.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    danger: theme.palette.error.main,\n    neutral: theme.palette.action.hover };\n  return colorMap[stripeColor];\n};\n\n/**\n * The zebra stripe for one body row.\n *\n * `neutral` — the default — resolves to `palette.action.hover`, which ALREADY\n * carries its subtlety in its own alpha (`rgba(0,0,0,0.04)` in the light\n * theme). MUI's `alpha()` REPLACES that channel rather than multiplying it, so\n * re-alpha-ing it at 0.5 amplified the tint 12.5× into `rgba(0,0,0,0.5)` —\n * solid #808080 on a white card, which reads as a selected or errored row\n * rather than as a stripe (FUT-755). It is used as-is instead.\n *\n * The named colours are opaque `*.main` values with no alpha of their own, so\n * they still need one.\n */\nconst stripeRowColor = (\n  theme: Parameters<typeof getStripeColorFromTheme>[0],\n  stripeColor: TableStripeColor = 'neutral',\n): string => {\n  const color = getStripeColorFromTheme(theme, stripeColor);\n  return stripeColor === 'neutral' ? color : alpha(color, 0.15);\n};\n\n// One variant applies at a time, so a lookup replaces the mutually exclusive\n// spreads.\nconst TABLE_VARIANTS: Record<string, (args: VariantArgs) => CSSObject> = {\n  default: ({ theme }) => ({\n      backgroundColor: theme.palette.background.paper,\n      '& .MuiTableHead-root': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.1) } }),\n  striped: ({ theme, stripeColor }) => ({\n      backgroundColor: theme.palette.background.paper,\n      '& .MuiTableBody-root .MuiTableRow-root:nth-of-type(even)': {\n        backgroundColor: stripeRowColor(theme, stripeColor) } }),\n  glass: ({ theme }) => ({\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}` }),\n  minimal: ({ theme }) => ({\n      backgroundColor: 'transparent',\n      '& .MuiTableCell-root': {\n        borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}` } }),\n  gradient: ({ theme }) => ({\n      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.05)}, ${alpha(theme.palette.secondary.main, 0.05)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      '& .MuiTableHead-root': {\n        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})` },\n      '& .MuiTableCell-root': {\n        borderBottom: `1px solid ${alpha(theme.palette.divider, 0.15)}` } }) };\n\ntype VariantArgs = {\n  theme: Theme;\n  densityConfig: ReturnType<typeof getDensityConfig>;\n  stripeColor?: TableStripeColor;\n};\n\nconst tableVariantStyles = (args: VariantArgs, customVariant?: string): CSSObject =>\n  customVariant ? (TABLE_VARIANTS[customVariant]?.(args) ?? {}) : {};\n\n/**\n * A virtualised table (FUT-2668). Fixed layout takes the column widths from the\n * header — a column's declared `width`, the rest sharing what is left — so they\n * hold still while different rows mount (it ignores a column's `minWidth`). A\n * body cell drops its vertical padding and the density's height: the pitch is\n * `rowHeight`, and the cell's content wrapper is exactly that tall.\n *\n * The checkbox column is MUI's 48 wide, and fixed layout holds it there. The\n * density's side padding would leave its checkbox 16 of that and clip it in the\n * body, so it keeps MUI's own checkbox padding (4 on the left, none on the\n * right), in the header and the body alike. After the sticky header's rule,\n * which it would otherwise lose to.\n */\nconst virtualisedStyles = (theme: Theme): CSSObject => ({\n  tableLayout: 'fixed',\n  '& .MuiTableBody-root .MuiTableCell-root': {\n    paddingTop: 0,\n    paddingBottom: 0,\n    height: 'auto' },\n  '& .MuiTableHead-root .MuiTableCell-paddingCheckbox, & .MuiTableBody-root .MuiTableCell-paddingCheckbox': {\n    paddingLeft: rem(theme, 4),\n    paddingRight: 0 } });\n\n// Sticky headers and row hover are independent of the variant.\nconst stickyHeaderStyles = (\n  theme: Theme,\n  densityConfig: ReturnType<typeof getDensityConfig>,\n): CSSObject => ({\n      '& .MuiTableHead-root': {\n        position: 'sticky',\n        top: 0,\n        zIndex: 100,\n        backgroundColor: theme.palette.background.paper,\n        '& .MuiTableCell-root': {\n          borderBottom: `${rem(theme, 2)} solid ${theme.palette.divider}`,\n          fontWeight: 600,\n          padding: densityConfig.headerPadding } } });\n\nconst hoverableRowStyles = (theme: Theme): CSSObject => ({\n      '& .MuiTableBody-root .MuiTableRow-root:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        cursor: 'pointer',\n        transition: 'background-color 0.15s ease-in-out' } });\n\n// glow and pulse combine into three distinct looks, spelled out rather than\n// layered — the glow-only shadow differs from the one used when both are on.\nconst emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => {\n  if (glow && pulse) return ({\n      position: 'relative',\n      boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n      filter: 'brightness(1.05)',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundColor: theme.palette.primary.main,\n        opacity: 0.1,\n        animation: `${pulseAnimation(theme)} 2s infinite`,\n        pointerEvents: 'none',\n        zIndex: -1 } });\n  if (glow) return ({\n      boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n      filter: 'brightness(1.05)' });\n  if (pulse) return ({\n      position: 'relative',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundColor: theme.palette.primary.main,\n        opacity: 0.1,\n        animation: `${pulseAnimation(theme)} 2s infinite`,\n        pointerEvents: 'none',\n        zIndex: -1 } });\n\n  return {};\n};\n\n// The table's own styling, lifted out so the styled() callback just forwards\n// its props.\nexport const tableStyles = ({\n  theme,\n  customVariant,\n  glow,\n  pulse,\n  hoverable,\n  density,\n  stickyHeader,\n  stripeColor = 'neutral',\n  virtualised }: {\n  theme: Theme;\n  customVariant?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  hoverable?: boolean;\n  density?: TableDensity;\n  stickyHeader?: boolean;\n  stripeColor?: TableStripeColor;\n  /** The body is a virtual window, drawn at `rowHeight`. */\n  virtualised?: boolean;\n}): CSSObject => {\n  const densityConfig = getDensityConfig(theme, density);\n  \n  return {\n    borderRadius: theme.spacing(1),\n    overflow: 'hidden',\n    transition: 'all 0.3s ease',\n    position: 'relative',\n\n    // Density styles\n    '& .MuiTableCell-root': {\n      padding: densityConfig.cellPadding,\n      fontSize: densityConfig.fontSize,\n      height: rem(theme, densityConfig.rowHeightPx) },\n\n    // Sticky header\n    ...tableVariantStyles({ theme, densityConfig, stripeColor }, customVariant),\n    ...(stickyHeader ? stickyHeaderStyles(theme, densityConfig) : {}),\n    ...(hoverable ? hoverableRowStyles(theme) : {}),\n    ...emphasisStyles(theme, glow, pulse),\n    ...(virtualised ? virtualisedStyles(theme) : {}),\n\n\n    // Variant styles\n\n\n\n\n\n\n\n\n\n\n    // Hoverable rows\n\n\n    // Selection styles\n    '& .MuiTableRow-root.selected': {\n      backgroundColor: alpha(theme.palette.primary.main, 0.12),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.16) } },\n\n    // Glow effect\n\n\n    // Pulse animation\n\n\n    // Both glow and pulse\n\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-QKMJUOVH.js → chunk-CRG24BGI.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-RTSK5OZT.js";
 import {
   useUiTheme
-} from "./chunk-A4OCNJWW.js";
+} from "./chunk-3UABIEP3.js";
 import {
   resolveTestId
 } from "./chunk-TYJR4GOF.js";
@@ -48,4 +48,4 @@ Icon.displayName = "Icon";
 export {
   Icon
 };
-//# sourceMappingURL=chunk-QKMJUOVH.js.map
+//# sourceMappingURL=chunk-CRG24BGI.js.map

package/dist/{chunk-LKMMJKXU.js → chunk-CYZZHWNK.js}

@@ -1,6 +1,6 @@
 import {
   FONT_WEIGHTS
-} from "./chunk-PE4ZW3IA.js";
+} from "./chunk-BLW6KLDR.js";
 import {
   HEADING_SCALE
 } from "./chunk-FZXKH2ZT.js";
@@ -57,4 +57,4 @@ export {
   headingGradient,
   headingGradientStops
 };
-//# sourceMappingURL=chunk-LKMMJKXU.js.map
+//# sourceMappingURL=chunk-CYZZHWNK.js.map

package/dist/{chunk-DUNG7D4B.js → chunk-DSF4VT7L.js}

@@ -225,4 +225,4 @@ Textarea.displayName = "Textarea";
 export {
   Textarea
 };
-//# sourceMappingURL=chunk-DUNG7D4B.js.map
+//# sourceMappingURL=chunk-DSF4VT7L.js.map

package/dist/{chunk-YOJASBHJ.js → chunk-DYNJQ3HJ.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-O4AHF45C.js";
 import {
   DescriptionItem
-} from "./chunk-VIRYHNEM.js";
+} from "./chunk-WY5PBZ7Q.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-YBH4SPMM.js";
+} from "./chunk-URHX4FAQ.js";
 import {
   rem,
   sxRem
@@ -226,4 +226,4 @@ export {
   ListCardActions,
   ListCardTail
 };
-//# sourceMappingURL=chunk-YOJASBHJ.js.map
+//# sourceMappingURL=chunk-DYNJQ3HJ.js.map

package/dist/{chunk-CXMVNYBY.js → chunk-GEB4WSZH.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-XZTRZ3HO.js";
 import {
   muiThemeOptionsFrom
-} from "./chunk-XEYLYUDM.js";
+} from "./chunk-JH5BKA3Y.js";
 import {
   createUiTheme
-} from "./chunk-PE4ZW3IA.js";
+} from "./chunk-BLW6KLDR.js";
 
 // src/provider/UiProvider.tsx
 import { createTheme, ThemeProvider } from "@mui/material/styles/index.js";
@@ -22,4 +22,4 @@ UiProvider.displayName = "UiProvider";
 export {
   UiProvider
 };
-//# sourceMappingURL=chunk-CXMVNYBY.js.map
+//# sourceMappingURL=chunk-GEB4WSZH.js.map

package/dist/{chunk-RIF6L54B.js → chunk-H224XFFD.js}

@@ -7,7 +7,7 @@ import {
   GLOW_BRIGHTNESS,
   PROGRESS_SIZES,
   PULSE
-} from "./chunk-RUEKY3VR.js";
+} from "./chunk-P52LYD6S.js";
 import {
   softNeutral
 } from "./chunk-FQ6UW7IY.js";
@@ -97,4 +97,4 @@ export {
   barEmphasisStyles,
   circularEmphasisStyles
 };
-//# sourceMappingURL=chunk-RIF6L54B.js.map
+//# sourceMappingURL=chunk-H224XFFD.js.map

package/dist/{chunk-3RMDIO4G.js → chunk-I5T5PQQW.js}

@@ -26,7 +26,7 @@ import {
 } from "./chunk-WN5PNP6F.js";
 import {
   Text
-} from "./chunk-YBH4SPMM.js";
+} from "./chunk-URHX4FAQ.js";
 import {
   rem,
   sxRem
@@ -268,4 +268,4 @@ function BaseCard(props) {
 export {
   BaseCard
 };
-//# sourceMappingURL=chunk-3RMDIO4G.js.map
+//# sourceMappingURL=chunk-I5T5PQQW.js.map

package/dist/{chunk-IJFAF3A7.js → chunk-IWEUSZY3.js}

@@ -1,13 +1,13 @@
 import {
   headingSx
-} from "./chunk-5JSRM7WC.js";
+} from "./chunk-RB3X6CEE.js";
 import {
   HEADING_DEFAULT_COLOR,
   HEADING_DEFAULT_LEVEL,
   HEADING_DEFAULT_WEIGHT,
   HEADING_RANK,
   stepOf
-} from "./chunk-LKMMJKXU.js";
+} from "./chunk-CYZZHWNK.js";
 import {
   resolveTestId,
   withoutTestIdProps
@@ -61,4 +61,4 @@ Heading.displayName = "Heading";
 export {
   Heading
 };
-//# sourceMappingURL=chunk-IJFAF3A7.js.map
+//# sourceMappingURL=chunk-IWEUSZY3.js.map

package/dist/{chunk-SZ3YFVO5.js → chunk-JGJFL3PF.js}

@@ -1,16 +1,16 @@
 import {
   DeleteViewDialog
-} from "./chunk-GWEENWIS.js";
+} from "./chunk-Y2HPRRVP.js";
 import {
   DataViewsGrid
-} from "./chunk-U4O47P6S.js";
+} from "./chunk-JQ3D5QP6.js";
 import {
   viewStateKey
 } from "./chunk-ZOLAYP2D.js";
 import {
   ViewDialogs,
   ViewMutationErrorAlert
-} from "./chunk-QTNHAX2Z.js";
+} from "./chunk-QS2DCLG6.js";
 import {
   useSavedViewsController
 } from "./chunk-HR7YTBR7.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-SZ3YFVO5.js.map
+//# sourceMappingURL=chunk-JGJFL3PF.js.map

package/dist/{chunk-XEYLYUDM.js → chunk-JH5BKA3Y.js}

@@ -15,7 +15,7 @@ import {
   TYPE_SIZES,
   WEB_FONT_FAMILY,
   WEB_MONOSPACE_FONT_FAMILY
-} from "./chunk-PE4ZW3IA.js";
+} from "./chunk-BLW6KLDR.js";
 import {
   cssLengthToPx,
   cssTrackingToEm
@@ -144,4 +144,4 @@ export {
   uiThemeFromMui,
   muiThemeOptionsFrom
 };
-//# sourceMappingURL=chunk-XEYLYUDM.js.map
+//# sourceMappingURL=chunk-JH5BKA3Y.js.map

package/dist/{chunk-U4O47P6S.js → chunk-JQ3D5QP6.js}

@@ -1,6 +1,6 @@
 import {
   GridShell
-} from "./chunk-KAIUDBHM.js";
+} from "./chunk-WYUBTRRV.js";
 import {
   useDataViewsState
 } from "./chunk-EDKLXA5W.js";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-U4O47P6S.js.map
+//# sourceMappingURL=chunk-JQ3D5QP6.js.map

package/dist/{chunk-5HQNHZ6Z.js → chunk-LH7KMYHC.js}

@@ -1,5 +1,4 @@
 import {
-  rem,
   remPx
 } from "./chunk-YKCAJ2TN.js";
 
@@ -24,8 +23,8 @@ var useVirtualScrolling = (data, rowHeight, containerHeight, overscan = 5, heade
       startIndex: start,
       endIndex: end,
       items: data.slice(start, end),
-      totalHeight: rem(theme, data.length * rowHeight),
-      offsetY: start * rowHeight
+      offsetY: start * rowHeight,
+      trailingPx: (data.length - end) * rowHeight
     };
   }, [data, rowHeight, containerHeight, scroll, overscan, theme]);
   const handleScroll = useCallback((e) => {
@@ -119,4 +118,4 @@ export {
   useVirtualScrolling,
   useTableSelection
 };
-//# sourceMappingURL=chunk-5HQNHZ6Z.js.map
+//# sourceMappingURL=chunk-LH7KMYHC.js.map

package/dist/chunk-LH7KMYHC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/Table.hooks.ts"],"sourcesContent":["import { useTheme } from '@mui/material/styles/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { remPx } from '../../../tokens/relative';\n\nimport type { ColumnConfig, TableProps, VirtualWindow } from './Table.types';\n\n/**\n * The virtual window. `rowHeight` and `containerHeight` are design px: the\n * window is computed in the px `scrollTop` is measured in (`remPx`), and what it\n * hands back to draw with stays in design px (`offsetY`, `trailingPx` — the\n * spacer rows either side of the window), so the rows and the window share one\n * pitch at any type scale.\n *\n * The scroller holds the header as well as the body, so the `<tbody>` starts\n * the header's height into it. `handleScroll` measures that height from\n * `headerRef` in the same live px as `scrollTop`, and the window subtracts it\n * before dividing by the pitch (FUT-2658).\n */\nexport const useVirtualScrolling = (\n  data: Record<string, unknown>[],\n  rowHeight: number,\n  containerHeight: number,\n  overscan: number = 5,\n  headerRef?: React.RefObject<HTMLElement | null>,\n) => {\n  const theme = useTheme();\n  // Both live px, as the browser measures them.\n  const [scroll, setScroll] = useState({ scrollTop: 0, headerPx: 0 });\n  \n  const visibleItems = useMemo((): VirtualWindow => {\n    const pitch = remPx(theme, rowHeight);\n    const bodyScrollTop = Math.max(0, scroll.scrollTop - scroll.headerPx);\n    const startIndex = Math.floor(bodyScrollTop / pitch);\n    const endIndex = Math.min(\n      data.length,\n      Math.ceil((bodyScrollTop + remPx(theme, containerHeight)) / pitch)\n    );\n    \n    const start = Math.max(0, startIndex - overscan);\n    const end = Math.min(data.length, endIndex + overscan);\n    \n    return {\n      startIndex: start,\n      endIndex: end,\n      items: data.slice(start, end),\n      offsetY: start * rowHeight,\n      trailingPx: (data.length - end) * rowHeight,\n    };\n  }, [data, rowHeight, containerHeight, scroll, overscan, theme]);\n\n  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {\n    setScroll({\n      scrollTop: e.currentTarget.scrollTop,\n      headerPx: headerRef?.current?.offsetHeight ?? 0,\n    });\n  }, [headerRef]);\n\n  return { visibleItems, handleScroll };\n};\n\n// Responsive Hook\n\nconst useResponsive = (\n  columns: ColumnConfig[],\n  columnPriorities?: number[]\n) => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n  const isTablet = useMediaQuery(theme.breakpoints.down('lg'));\n  \n  const [hiddenColumns, setHiddenColumns] = useState<number[]>([]);\n  const [columnMenuAnchor, setColumnMenuAnchor] = useState<null | HTMLElement>(null);\n\n  useEffect(() => {\n    if (!columnPriorities) return;\n    \n    let columnsToHide: number[] = [];\n    \n    if (isMobile) {\n      // Hide lowest priority columns on mobile\n      columnsToHide = columnPriorities\n        .map((priority, index) => ({ priority, index }))\n        .sort((a, b) => b.priority - a.priority)\n        .slice(0, Math.floor(columns.length / 2))\n        .map(item => item.index);\n    } else if (isTablet) {\n      // Hide some columns on tablet\n      columnsToHide = columnPriorities\n        .map((priority, index) => ({ priority, index }))\n        .sort((a, b) => b.priority - a.priority)\n        .slice(0, Math.floor(columns.length / 3))\n        .map(item => item.index);\n    }\n    \n    setHiddenColumns(columnsToHide);\n  }, [isMobile, isTablet, columnPriorities, columns.length]);\n\n  const visibleColumns = columns.filter((_, index) => !hiddenColumns.includes(index));\n\n  return {\n    visibleColumns,\n    hiddenColumns,\n    isMobile,\n    columnMenuAnchor,\n    setColumnMenuAnchor,\n    setHiddenColumns,\n  };\n};\n\n// Enhanced Table Header Component\n// Visible/hidden column split for responsive mode, plus row selection.\nexport const useTableSelection = ({\n  columns,\n  data,\n  responsive,\n  columnPriorities,\n  selectedRows,\n  rowKeyExtractor,\n  onSelectionChange,\n}: {\n  columns?: ColumnConfig[];\n  data: TableProps['data'];\n  responsive?: boolean;\n  columnPriorities?: number[];\n  selectedRows: (string | number)[];\n  rowKeyExtractor?: (row: Record<string, unknown>, index: number) => string | number;\n  onSelectionChange?: TableProps['onSelectionChange'];\n}) => {\n    \n  // Use responsive hook if responsive mode is enabled\n  const {\n    visibleColumns,\n    hiddenColumns,\n    isMobile,\n    columnMenuAnchor,\n    setColumnMenuAnchor,\n    setHiddenColumns,\n  } = useResponsive(\n    columns || [],\n    responsive ? columnPriorities : undefined\n  );\n\n  // Handle selection changes\n  const handleSelectionChange = useCallback((rowKey: string | number, selected: boolean) => {\n    if (!onSelectionChange) return;\n    \n    let newSelection: (string | number)[];\n    if (selected) {\n      newSelection = [...selectedRows, rowKey];\n    } else {\n      newSelection = selectedRows.filter(key => key !== rowKey);\n    }\n    onSelectionChange(newSelection);\n  }, [selectedRows, onSelectionChange]);\n\n  const handleSelectAll = useCallback((selected: boolean) => {\n    if (!onSelectionChange || !data) return;\n    \n    if (selected) {\n      const allKeys = data.map((rowData, index) => \n        rowKeyExtractor ? rowKeyExtractor(rowData, index) : (rowData.id as string | number) || index\n      );\n      onSelectionChange(allKeys);\n    } else {\n      onSelectionChange([]);\n    }\n  }, [data, onSelectionChange, rowKeyExtractor]);\n\n  // Loading state\n\n  return {\n    visibleColumns,\n    hiddenColumns,\n    isMobile,\n    columnMenuAnchor,\n    setColumnMenuAnchor,\n    setHiddenColumns,\n    handleSelectionChange,\n    handleSelectAll,\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-X4ZRPE37.js → chunk-MBHWVRV5.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-YBH4SPMM.js";
+} from "./chunk-URHX4FAQ.js";
 import {
   fieldHeight
 } from "./chunk-CGO452DC.js";
@@ -201,4 +201,4 @@ export {
   fieldClearing,
   MoreGroup
 };
-//# sourceMappingURL=chunk-X4ZRPE37.js.map
+//# sourceMappingURL=chunk-MBHWVRV5.js.map

package/dist/{chunk-JQWAANGN.js → chunk-OOCREE37.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-YBH4SPMM.js";
+} from "./chunk-URHX4FAQ.js";
 
 // src/user-avatar/user-avatar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -74,4 +74,4 @@ export {
   UserAvatar,
   UserMenu
 };
-//# sourceMappingURL=chunk-JQWAANGN.js.map
+//# sourceMappingURL=chunk-OOCREE37.js.map

package/dist/{chunk-R2XVTUVR.js → chunk-OQRG34VG.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-YBH4SPMM.js";
+} from "./chunk-URHX4FAQ.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -184,4 +184,4 @@ function MoveButton({
 export {
   ColumnsTab
 };
-//# sourceMappingURL=chunk-R2XVTUVR.js.map
+//# sourceMappingURL=chunk-OQRG34VG.js.map

package/dist/{chunk-RUEKY3VR.js → chunk-P52LYD6S.js}

@@ -1,6 +1,6 @@
 import {
   GREY
-} from "./chunk-PE4ZW3IA.js";
+} from "./chunk-BLW6KLDR.js";
 import {
   contrastText
 } from "./chunk-2BYKTBDL.js";
@@ -67,4 +67,4 @@ export {
   LINEAR_INDETERMINATE,
   progressPalette
 };
-//# sourceMappingURL=chunk-RUEKY3VR.js.map
+//# sourceMappingURL=chunk-P52LYD6S.js.map

package/dist/{chunk-CTKQCKRD.js → chunk-PK6TRXV4.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-YBH4SPMM.js";
+} from "./chunk-URHX4FAQ.js";
 
 // src/components/data-display/DataViews/ManageViewsDialog.tsx
 import { useMemo } from "react";
@@ -128,4 +128,4 @@ function ManageViewsDialog({
 export {
   ManageViewsDialog
 };
-//# sourceMappingURL=chunk-CTKQCKRD.js.map
+//# sourceMappingURL=chunk-PK6TRXV4.js.map

package/dist/{chunk-RGT6DM5W.js → chunk-PX6TWS5T.js}

@@ -1,6 +1,9 @@
 import {
   tableRowHeight
 } from "./chunk-XS3REOPN.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -99,11 +102,36 @@ var EnhancedTableHeader = React.memo(({
   ] }) });
 });
 EnhancedTableHeader.displayName = "EnhancedTableHeader";
+var JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var VirtualCellContent = ({ rowHeight, align, children }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: `calc(${rem(theme, rowHeight)} - ${FIELD_BORDER_WIDTH}px)`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: JUSTIFY[align],
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+};
+var cellContent = (column, rowData, index, renderCell) => {
+  const value = rowData[column.key];
+  if (renderCell) return renderCell(value, column, rowData, index);
+  return column.render ? column.render(value, rowData) : value;
+};
 var TableDataRow = ({
   rowData,
   rowKey,
   index,
-  offsetY,
   columns,
   selected,
   selectable,
@@ -112,10 +140,12 @@ var TableDataRow = ({
   onRowFocus,
   onRowBlur,
   onSelect,
-  virtualScrolling,
+  virtualised,
   renderCell
 }) => {
   const theme = useTheme();
+  const pitch = tableRowHeight(rowHeight);
+  const fit = (align, content) => virtualised ? /* @__PURE__ */ jsx(VirtualCellContent, { rowHeight: pitch, align, children: content }) : content;
   return /* @__PURE__ */ jsxs(
     TableRow,
     {
@@ -124,55 +154,52 @@ var TableDataRow = ({
       onClick: (event) => onRowClick?.(event, rowData),
       onFocus: (event) => onRowFocus?.(event, rowData),
       onBlur: (event) => onRowBlur?.(event, rowData),
-      style: virtualScrolling ? {
-        transform: `translateY(${rem(theme, offsetY)})`,
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        height: rem(theme, tableRowHeight(rowHeight))
-      } : void 0,
+      style: virtualised ? { height: rem(theme, pitch) } : void 0,
       children: [
-        selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            checked: selected,
-            onChange: (event) => onSelect(event, rowKey),
-            onClick: (event) => event.stopPropagation(),
-            inputProps: { "aria-label": `select row ${index + 1}` }
-          }
+        selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: fit(
+          "left",
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selected,
+              onChange: (event) => onSelect(event, rowKey),
+              onClick: (event) => event.stopPropagation(),
+              inputProps: { "aria-label": `select row ${index + 1}` }
+            }
+          )
         ) }),
-        columns.map((column) => {
-          const value = rowData[column.key];
-          return /* @__PURE__ */ jsx(TableCell, { align: column.align || "left", children: renderCell ? renderCell(value, column, rowData, index) : column.render ? column.render(value, rowData) : value }, column.key);
-        })
+        columns.map((column) => /* @__PURE__ */ jsx(TableCell, { align: column.align || "left", children: fit(column.align || "left", cellContent(column, rowData, index, renderCell)) }, column.key))
       ]
     },
     String(rowKey)
   );
 };
-var VirtualisedBody = ({ visibleItems, rowHeight, renderTableRow }) => /* @__PURE__ */ jsx(
-  TableBody,
-  {
-    style: {
-      height: visibleItems.totalHeight,
-      position: "relative"
-    },
-    children: visibleItems.items.map(
-      (rowData, index) => renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)
-    )
-  }
-);
+var SpacerRow = ({ heightPx, colSpan }) => {
+  const theme = useTheme();
+  if (heightPx <= 0) return null;
+  return /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", style: { height: rem(theme, heightPx) }, children: /* @__PURE__ */ jsx("td", { colSpan, style: { padding: 0, border: 0 } }) });
+};
+var VirtualisedBody = ({ visibleItems, colSpan, renderTableRow }) => /* @__PURE__ */ jsxs(TableBody, { children: [
+  /* @__PURE__ */ jsx(SpacerRow, { heightPx: visibleItems.offsetY, colSpan }),
+  visibleItems.items.map(
+    (rowData, index) => renderTableRow(rowData, visibleItems.startIndex + index)
+  ),
+  /* @__PURE__ */ jsx(SpacerRow, { heightPx: visibleItems.trailingPx, colSpan })
+] });
 var PlainBody = ({ data, renderTableRow }) => /* @__PURE__ */ jsx(TableBody, { children: data.map((rowData, index) => renderTableRow(rowData, index)) });
 var EnhancedTableBody = React.memo((props) => {
   const { data, virtualWindow } = props;
-  const renderTableRow = useTableRowRenderer({ ...props, selectedRows: props.selectedRows ?? [] });
+  const renderTableRow = useTableRowRenderer({
+    ...props,
+    selectedRows: props.selectedRows ?? [],
+    virtualised: Boolean(virtualWindow)
+  });
   if (virtualWindow) {
     return /* @__PURE__ */ jsx(
       VirtualisedBody,
       {
         visibleItems: virtualWindow,
-        rowHeight: tableRowHeight(props.rowHeight),
+        colSpan: props.columns.length + (props.selectable ? 1 : 0),
         renderTableRow
       }
     );
@@ -209,7 +236,7 @@ var useTableRowRenderer = ({
   selectable,
   renderRow,
   renderCell,
-  virtualScrolling,
+  virtualised,
   rowHeight
 }) => {
   const getRowKey = useRowKey(rowKeyExtractor);
@@ -219,7 +246,7 @@ var useTableRowRenderer = ({
   );
   const handleRowSelection = useRowSelection({ selectedRows, onSelectionChange });
   const renderTableRow = useCallback2(
-    (rowData, index, offsetY = 0) => {
+    (rowData, index) => {
       const rowKey = getRowKey(rowData, index);
       const selected = isRowSelected(rowKey);
       if (renderRow) return renderRow(rowData, index, selected);
@@ -229,7 +256,6 @@ var useTableRowRenderer = ({
           rowData,
           rowKey,
           index,
-          offsetY,
           columns,
           selected,
           selectable,
@@ -238,7 +264,7 @@ var useTableRowRenderer = ({
           onRowFocus,
           onRowBlur,
           onSelect: handleRowSelection,
-          virtualScrolling,
+          virtualised,
           renderCell
         },
         rowKey
@@ -256,7 +282,7 @@ var useTableRowRenderer = ({
       renderCell,
       rowHeight,
       selectable,
-      virtualScrolling
+      virtualised
     ]
   );
   return renderTableRow;
@@ -268,4 +294,4 @@ export {
   TableDataRow,
   EnhancedTableBody
 };
-//# sourceMappingURL=chunk-RGT6DM5W.js.map
+//# sourceMappingURL=chunk-PX6TWS5T.js.map

package/dist/chunk-PX6TWS5T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/TableParts.hooks.tsx","../src/components/data-display/Table/TableParts.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback } from 'react';\n\nimport { TableDataRow } from './TableParts';\nimport type { TableBodyProps } from './Table.types';\n\n// Row identity, selection and the row element itself. Split out of\n// EnhancedTableBody so that component is just the virtualised/plain choice.\n// A row's identity: the caller's extractor, else its id, else its position.\nconst useRowKey = (rowKeyExtractor: TableBodyProps['rowKeyExtractor']) =>\n  useCallback(\n    (rowData: Record<string, unknown>, index: number): string | number =>\n      rowKeyExtractor ? rowKeyExtractor(rowData, index) : (rowData.id as string | number) || index,\n    [rowKeyExtractor],\n  );\n\nconst useRowSelection = ({\n  selectedRows,\n  onSelectionChange,\n}: {\n  selectedRows: Array<string | number>;\n  onSelectionChange: TableBodyProps['onSelectionChange'];\n}) =>\n  useCallback(\n    (event: React.MouseEvent | React.ChangeEvent, rowKey: string | number) => {\n      // Stop propagation so selecting does not also fire the row click.\n      event.stopPropagation();\n      if (!onSelectionChange) return;\n      onSelectionChange(rowKey, !selectedRows.includes(rowKey));\n    },\n    [onSelectionChange, selectedRows],\n  );\n\ntype RowRendererProps = Pick<\n  TableBodyProps,\n  | 'columns'\n  | 'onRowClick'\n  | 'onRowFocus'\n  | 'onRowBlur'\n  | 'onSelectionChange'\n  | 'rowKeyExtractor'\n  | 'selectable'\n  | 'renderRow'\n  | 'renderCell'\n  | 'rowHeight'\n> & {\n  selectedRows: Array<string | number>;\n  /** Whether the rows are a virtual window's, drawn at exactly `rowHeight`. */\n  virtualised: boolean;\n};\n\nexport const useTableRowRenderer = ({\n  columns,\n  selectedRows,\n  onRowClick,\n  onRowFocus,\n  onRowBlur,\n  onSelectionChange,\n  rowKeyExtractor,\n  selectable,\n  renderRow,\n  renderCell,\n  virtualised,\n  rowHeight,\n}: RowRendererProps) => {\n  const getRowKey = useRowKey(rowKeyExtractor);\n  const isRowSelected = useCallback(\n    (rowKey: string | number) => selectedRows.includes(rowKey),\n    [selectedRows],\n  );\n  const handleRowSelection = useRowSelection({ selectedRows, onSelectionChange });\n\n  const renderTableRow = useCallback(\n    (rowData: Record<string, unknown>, index: number) => {\n      const rowKey = getRowKey(rowData, index);\n      const selected = isRowSelected(rowKey);\n\n      if (renderRow) return renderRow(rowData, index, selected);\n\n      return (\n        <TableDataRow\n          key={rowKey}\n          rowData={rowData}\n          rowKey={rowKey}\n          index={index}\n          columns={columns}\n          selected={selected}\n          selectable={selectable}\n          rowHeight={rowHeight}\n          onRowClick={onRowClick}\n          onRowFocus={onRowFocus}\n          onRowBlur={onRowBlur}\n          onSelect={handleRowSelection}\n          virtualised={virtualised}\n          renderCell={renderCell}\n        />\n      );\n    },\n    [\n      columns,\n      getRowKey,\n      isRowSelected,\n      handleRowSelection,\n      onRowClick,\n      onRowFocus,\n      onRowBlur,\n      renderRow,\n      renderCell,\n      rowHeight,\n      selectable,\n      virtualised,\n    ],\n  );\n\n  return renderTableRow;\n};\n","import Checkbox from '@mui/material/Checkbox/index.js';\nimport TableBody from '@mui/material/TableBody/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableHead from '@mui/material/TableHead/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport TableSortLabel from '@mui/material/TableSortLabel/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useCallback } from 'react';\n\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';\nimport { rem } from '../../../tokens/relative';\n\nimport { tableRowHeight } from './Table.helpers';\nimport { useTableRowRenderer } from './TableParts.hooks';\nimport type { ColumnConfig, TableBodyProps, TableHeaderProps, VirtualWindow } from './Table.types';\n\n// Mirrors the visible sort indicator for assistive technology; undefined when\n// the column is not sorted, which is what removes the attribute entirely.\nconst ariaSortFor = (\n  canSort: boolean,\n  isSorted: boolean,\n  direction?: 'asc' | 'desc',\n): 'ascending' | 'descending' | undefined => {\n  if (!canSort || !isSorted) return undefined;\n\n  return direction === 'asc' ? 'ascending' : 'descending';\n};\n\n/** A column's `width`/`minWidth` as CSS: a number is design px, a string as given. */\nconst columnLength = (theme: Theme, value: number | string | undefined): string | undefined =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\n// One header cell. Sorting is offered when the table is sortable and the column\n// has not opted out; aria-sort mirrors the visible indicator.\nconst HeaderCell: React.FC<{\n  column: ColumnConfig;\n  sortable?: boolean;\n  sortConfig?: { key: string; direction: 'asc' | 'desc' };\n  onSort: (columnKey: string) => void;\n}> = ({ column, sortable, sortConfig, onSort }) => {\n  const theme = useTheme();\n  const canSort = Boolean(sortable) && column.sortable !== false;\n  const isSorted = sortConfig?.key === column.key;\n\n  return (\n    <TableCell\n      align={column.align || 'left'}\n      style={{\n        minWidth: columnLength(theme, column.minWidth),\n        width: columnLength(theme, column.width),\n      }}\n      aria-sort={ariaSortFor(canSort, isSorted, sortConfig?.direction)}\n    >\n      {canSort ? (\n        <TableSortLabel\n          active={isSorted}\n          direction={isSorted ? sortConfig?.direction : 'asc'}\n          onClick={() => onSort(column.key)}\n          data-testid=\"sort-indicator\"\n          aria-label={`Sort by ${column.label}`}\n        >\n          {column.label}\n        </TableSortLabel>\n      ) : (\n        column.label\n      )}\n    </TableCell>\n  );\n};\n\nexport const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({\n  columns,\n  data,\n  sortable,\n  sortConfig,\n  onSortChange,\n  selectable,\n  selectedRows = [],\n  onSelectAll,\n  headRef }) => {\n  const handleSort = useCallback(\n    (columnKey: string) => {\n      if (!sortable || !onSortChange) return;\n      \n      const direction = \n        sortConfig?.key === columnKey && sortConfig.direction === 'asc' ? 'desc' : 'asc';\n      onSortChange(columnKey, direction);\n    },\n    [sortable, onSortChange, sortConfig]\n  );\n\n  const handleSelectAll = useCallback(\n    (event: React.ChangeEvent<globalThis.HTMLInputElement>) => {\n      if (!onSelectAll) return;\n      onSelectAll(event.target.checked);\n    },\n    [onSelectAll]\n  );\n\n  return (\n    <TableHead ref={headRef}>\n      <TableRow>\n        {selectable && (\n          <TableCell padding=\"checkbox\">\n            <Checkbox\n              indeterminate={selectedRows.length > 0 && selectedRows.length < data.length}\n              checked={selectedRows.length === data.length && data.length > 0}\n              onChange={handleSelectAll}\n              inputProps={{ 'aria-label': 'select all' }}\n            />\n          </TableCell>\n        )}\n        {columns.map((column) => (\n          <HeaderCell\n            key={column.key}\n            column={column}\n            sortable={sortable}\n            sortConfig={sortConfig}\n            onSort={handleSort}\n          />\n        ))}\n      </TableRow>\n    </TableHead>\n  );\n});\n\nEnhancedTableHeader.displayName = 'EnhancedTableHeader';\n\n/** How a virtual cell's wrapper places its content along the row, per `align`. */\nconst JUSTIFY: Record<NonNullable<ColumnConfig['align']>, React.CSSProperties['justifyContent']> = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\n/**\n * A virtual cell's content (FUT-2668). The cell has no vertical padding, and\n * this fills its content box — the pitch less the cell's bottom rule, the one\n * hairline every variant draws — so the cell's border box is exactly the pitch\n * whatever it holds. Centred vertically, placed by the column's `align`, and\n * clipped rather than allowed to grow the row.\n */\nconst VirtualCellContent: React.FC<{\n  rowHeight: number;\n  align: NonNullable<ColumnConfig['align']>;\n  children: React.ReactNode;\n}> = ({ rowHeight, align, children }) => {\n  const theme = useTheme();\n  return (\n    <div\n      style={{\n        height: `calc(${rem(theme, rowHeight)} - ${FIELD_BORDER_WIDTH}px)`,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: JUSTIFY[align],\n        overflow: 'hidden',\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n\n/** What one cell shows: the caller's `renderCell`, else the column's `render`, else the value. */\nconst cellContent = (\n  column: ColumnConfig,\n  rowData: Record<string, unknown>,\n  index: number,\n  renderCell: TableBodyProps['renderCell'],\n): React.ReactNode => {\n  const value = rowData[column.key];\n  if (renderCell) return renderCell(value, column, rowData, index);\n  return column.render ? column.render(value, rowData) : (value as React.ReactNode);\n};\n\n// One data row. Split out of the memoised renderTableRow callback so the\n// callback stays a short dispatch and the row markup is readable on its own.\n// A virtualised row stays in the table's flow at `rowHeight`, and each of its\n// cells holds its content in a `VirtualCellContent` (FUT-2668); a plain row is\n// drawn as MUI draws it.\nexport const TableDataRow: React.FC<{\n  rowData: Record<string, unknown>;\n  rowKey: string | number;\n  index: number;\n  columns: ColumnConfig[];\n  selected: boolean;\n  selectable?: boolean;\n  /** Design px; 52 when unset (`tableRowHeight`). */\n  rowHeight?: number;\n  onRowClick?: TableBodyProps['onRowClick'];\n  onRowFocus?: TableBodyProps['onRowFocus'];\n  onRowBlur?: TableBodyProps['onRowBlur'];\n  onSelect: (event: React.MouseEvent | React.ChangeEvent, rowKey: string | number) => void;\n  /** Whether the row is one of a virtual window's. */\n  virtualised: boolean;\n  renderCell?: TableBodyProps['renderCell'];\n}> = ({\n  rowData,\n  rowKey,\n  index,\n  columns,\n  selected,\n  selectable,\n  rowHeight,\n  onRowClick,\n  onRowFocus,\n  onRowBlur,\n  onSelect,\n  virtualised,\n  renderCell }) => {\n  const theme = useTheme();\n  const pitch = tableRowHeight(rowHeight);\n  const fit = (align: NonNullable<ColumnConfig['align']>, content: React.ReactNode) =>\n    virtualised ? (\n      <VirtualCellContent rowHeight={pitch} align={align}>\n        {content}\n      </VirtualCellContent>\n    ) : (\n      content\n    );\n\n  return (\n      <TableRow\n        key={String(rowKey)}\n        selected={selected}\n        className={selected ? 'selected' : ''}\n        onClick={(event: React.MouseEvent<globalThis.HTMLTableRowElement>) => onRowClick?.(event, rowData)}\n        onFocus={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowFocus?.(event, rowData)}\n        onBlur={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowBlur?.(event, rowData)}\n        style={virtualised ? { height: rem(theme, pitch) } : undefined}\n      >\n        {selectable && (\n          <TableCell padding=\"checkbox\">\n            {fit(\n              'left',\n              <Checkbox\n                checked={selected}\n                onChange={(event) => onSelect(event, rowKey)}\n                onClick={(event) => event.stopPropagation()}\n                inputProps={{ 'aria-label': `select row ${index + 1}` }}\n              />,\n            )}\n          </TableCell>\n        )}\n        {columns.map((column) => (\n          <TableCell key={column.key} align={column.align || 'left'}>\n            {fit(column.align || 'left', cellContent(column, rowData, index, renderCell))}\n          </TableCell>\n        ))}\n      </TableRow>\n  );\n};\n\n/**\n * A stand-in for the rows outside the window, `heightPx` design px tall. A bare\n * `<tr>` and `<td>` with no padding or border: none of MUI's row or cell\n * classes, so hover, striping and cell padding never reach it. Not rendered at\n * all when there is nothing to stand in for.\n */\nconst SpacerRow: React.FC<{ heightPx: number; colSpan: number }> = ({ heightPx, colSpan }) => {\n  const theme = useTheme();\n  if (heightPx <= 0) return null;\n  return (\n    <tr aria-hidden=\"true\" style={{ height: rem(theme, heightPx) }}>\n      <td colSpan={colSpan} style={{ padding: 0, border: 0 }} />\n    </tr>\n  );\n};\n\n// Only the rows in view are rendered, in the table's own flow between two\n// spacer rows standing in for the rest (FUT-2668) — an absolutely positioned\n// `<tr>` is blockified and leaves the column grid. Every height is design px,\n// drawn through `rem`. The `<tbody>` sits directly in the `<table>`; the one\n// scroll container wraps the whole table, header included (FUT-2658).\nconst VirtualisedBody: React.FC<{\n  visibleItems: VirtualWindow;\n  colSpan: number;\n  renderTableRow: (rowData: Record<string, unknown>, index: number) => React.ReactNode;\n}> = ({ visibleItems, colSpan, renderTableRow }) => (\n  <TableBody>\n    <SpacerRow heightPx={visibleItems.offsetY} colSpan={colSpan} />\n    {visibleItems.items.map((rowData, index) =>\n      renderTableRow(rowData, visibleItems.startIndex + index)\n    )}\n    <SpacerRow heightPx={visibleItems.trailingPx} colSpan={colSpan} />\n  </TableBody>\n);\n\nconst PlainBody: React.FC<{\n  data: TableBodyProps['data'];\n  renderTableRow: (rowData: Record<string, unknown>, index: number) => React.ReactNode;\n}> = ({ data, renderTableRow }) => (\n\n    <TableBody>\n      {data.map((rowData, index) => renderTableRow(rowData, index))}\n    </TableBody>\n);\n\n// Enhanced Table Body Component  \nexport const EnhancedTableBody: React.FC<TableBodyProps> = React.memo((props) => {\n  const { data, virtualWindow } = props;\n  // The row renderer takes the body's own props; its `rowHeight` stays the\n  // caller's design px, and the row resolves the default where it draws it.\n  const renderTableRow = useTableRowRenderer({\n    ...props,\n    selectedRows: props.selectedRows ?? [],\n    virtualised: Boolean(virtualWindow),\n  });\n\n  if (virtualWindow) {\n    return (\n      <VirtualisedBody\n        visibleItems={virtualWindow}\n        colSpan={props.columns.length + (props.selectable ? 1 : 0)}\n        renderTableRow={renderTableRow}\n      />\n    );\n  }\n\n  return (\n    <PlainBody data={data} renderTableRow={renderTableRow} />\n  );\n});\n\nEnhancedTableBody.displayName = 'EnhancedTableBody';\n\n// Main Table Component\n"],"mappings":"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","names":["useCallback","jsx","useCallback"]}