@12-apps/ui 6.39.15 → 6.39.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_internal/components/data-display/Table/Table.helpers.js +7 -1
- package/dist/_internal/components/data-display/Table/Table.hooks.js +1 -1
- package/dist/_internal/components/data-display/Table/Table.js +5 -5
- package/dist/_internal/components/data-display/Table/Table.styles.js +1 -1
- package/dist/_internal/components/data-display/Table/TableParts.hooks.js +2 -2
- package/dist/_internal/components/data-display/Table/TableParts.js +2 -2
- package/dist/_internal/components/data-display/index.js +5 -5
- package/dist/_internal/components/index.js +5 -5
- package/dist/{chunk-CCK7FB2V.js → chunk-BVHIKXCN.js} +8 -3
- package/dist/{chunk-CCK7FB2V.js.map → chunk-BVHIKXCN.js.map} +1 -1
- package/dist/{chunk-PX6TWS5T.js → chunk-IBGP3VSR.js} +2 -2
- package/dist/{chunk-5QD6YGZ2.js → chunk-KTCOJFZB.js} +33 -26
- package/dist/chunk-KTCOJFZB.js.map +1 -0
- package/dist/{chunk-XS3REOPN.js → chunk-NHEWST3N.js} +12 -2
- package/dist/chunk-NHEWST3N.js.map +1 -0
- package/dist/{chunk-LH7KMYHC.js → chunk-RZSMRBOX.js} +19 -2
- package/dist/chunk-RZSMRBOX.js.map +1 -0
- package/dist/data-display/Table.js +5 -5
- package/dist/types/components/data-display/Table/Table.d.ts.map +1 -1
- package/dist/types/components/data-display/Table/Table.helpers.d.ts +21 -3
- package/dist/types/components/data-display/Table/Table.helpers.d.ts.map +1 -1
- package/dist/types/components/data-display/Table/Table.hooks.d.ts +7 -3
- package/dist/types/components/data-display/Table/Table.hooks.d.ts.map +1 -1
- package/dist/types/components/data-display/Table/Table.styles.d.ts.map +1 -1
- package/dist/types/components/data-display/Table/Table.types.d.ts +5 -2
- package/dist/types/components/data-display/Table/Table.types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/data-display/Table/Table.helpers.ts +38 -4
- package/src/components/data-display/Table/Table.hooks.ts +40 -5
- package/src/components/data-display/Table/Table.md +9 -3
- package/src/components/data-display/Table/Table.styles.ts +8 -3
- package/src/components/data-display/Table/Table.tsx +9 -4
- package/src/components/data-display/Table/Table.types.ts +5 -2
- package/dist/chunk-5QD6YGZ2.js.map +0 -1
- package/dist/chunk-LH7KMYHC.js.map +0 -1
- package/dist/chunk-XS3REOPN.js.map +0 -1
- /package/dist/{chunk-PX6TWS5T.js.map → chunk-IBGP3VSR.js.map} +0 -0
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
import {
|
|
2
2
|
TABLE_DEFAULTS,
|
|
3
|
+
containerStyle,
|
|
3
4
|
definedProps,
|
|
5
|
+
headerRefFor,
|
|
6
|
+
scrollerRadiusStyle,
|
|
4
7
|
scrollerStyle,
|
|
5
8
|
tableDomProps,
|
|
6
9
|
tableRowHeight,
|
|
7
10
|
virtualHeight
|
|
8
|
-
} from "../../../../chunk-
|
|
11
|
+
} from "../../../../chunk-NHEWST3N.js";
|
|
9
12
|
import "../../../../chunk-YKCAJ2TN.js";
|
|
10
13
|
import "../../../../chunk-PZ5AY32C.js";
|
|
11
14
|
export {
|
|
12
15
|
TABLE_DEFAULTS,
|
|
16
|
+
containerStyle,
|
|
13
17
|
definedProps,
|
|
18
|
+
headerRefFor,
|
|
19
|
+
scrollerRadiusStyle,
|
|
14
20
|
scrollerStyle,
|
|
15
21
|
tableDomProps,
|
|
16
22
|
tableRowHeight,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Table
|
|
3
|
-
} from "../../../../chunk-
|
|
4
|
-
import "../../../../chunk-
|
|
5
|
-
import "../../../../chunk-
|
|
6
|
-
import "../../../../chunk-
|
|
7
|
-
import "../../../../chunk-
|
|
3
|
+
} from "../../../../chunk-KTCOJFZB.js";
|
|
4
|
+
import "../../../../chunk-IBGP3VSR.js";
|
|
5
|
+
import "../../../../chunk-BVHIKXCN.js";
|
|
6
|
+
import "../../../../chunk-RZSMRBOX.js";
|
|
7
|
+
import "../../../../chunk-NHEWST3N.js";
|
|
8
8
|
import "../../../../chunk-XIXR2L3L.js";
|
|
9
9
|
import "../../../../chunk-PZBK3F52.js";
|
|
10
10
|
import "../../../../chunk-YKCAJ2TN.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useTableRowRenderer
|
|
3
|
-
} from "../../../../chunk-
|
|
4
|
-
import "../../../../chunk-
|
|
3
|
+
} from "../../../../chunk-IBGP3VSR.js";
|
|
4
|
+
import "../../../../chunk-NHEWST3N.js";
|
|
5
5
|
import "../../../../chunk-PZBK3F52.js";
|
|
6
6
|
import "../../../../chunk-YKCAJ2TN.js";
|
|
7
7
|
import "../../../../chunk-PZ5AY32C.js";
|
|
@@ -2,8 +2,8 @@ import {
|
|
|
2
2
|
EnhancedTableBody,
|
|
3
3
|
EnhancedTableHeader,
|
|
4
4
|
TableDataRow
|
|
5
|
-
} from "../../../../chunk-
|
|
6
|
-
import "../../../../chunk-
|
|
5
|
+
} from "../../../../chunk-IBGP3VSR.js";
|
|
6
|
+
import "../../../../chunk-NHEWST3N.js";
|
|
7
7
|
import "../../../../chunk-PZBK3F52.js";
|
|
8
8
|
import "../../../../chunk-YKCAJ2TN.js";
|
|
9
9
|
import "../../../../chunk-PZ5AY32C.js";
|
|
@@ -31,11 +31,11 @@ import "../../../chunk-IM4DMKH4.js";
|
|
|
31
31
|
import "../../../chunk-WG2WFANT.js";
|
|
32
32
|
import {
|
|
33
33
|
Table
|
|
34
|
-
} from "../../../chunk-
|
|
35
|
-
import "../../../chunk-
|
|
36
|
-
import "../../../chunk-
|
|
37
|
-
import "../../../chunk-
|
|
38
|
-
import "../../../chunk-
|
|
34
|
+
} from "../../../chunk-KTCOJFZB.js";
|
|
35
|
+
import "../../../chunk-IBGP3VSR.js";
|
|
36
|
+
import "../../../chunk-BVHIKXCN.js";
|
|
37
|
+
import "../../../chunk-RZSMRBOX.js";
|
|
38
|
+
import "../../../chunk-NHEWST3N.js";
|
|
39
39
|
import "../../../chunk-XIXR2L3L.js";
|
|
40
40
|
import "../../../chunk-JBE3LH4C.js";
|
|
41
41
|
import {
|
|
@@ -417,11 +417,11 @@ import "../../chunk-IM4DMKH4.js";
|
|
|
417
417
|
import "../../chunk-WG2WFANT.js";
|
|
418
418
|
import {
|
|
419
419
|
Table
|
|
420
|
-
} from "../../chunk-
|
|
421
|
-
import "../../chunk-
|
|
422
|
-
import "../../chunk-
|
|
423
|
-
import "../../chunk-
|
|
424
|
-
import "../../chunk-
|
|
420
|
+
} from "../../chunk-KTCOJFZB.js";
|
|
421
|
+
import "../../chunk-IBGP3VSR.js";
|
|
422
|
+
import "../../chunk-BVHIKXCN.js";
|
|
423
|
+
import "../../chunk-RZSMRBOX.js";
|
|
424
|
+
import "../../chunk-NHEWST3N.js";
|
|
425
425
|
import "../../chunk-XIXR2L3L.js";
|
|
426
426
|
import "../../chunk-JBE3LH4C.js";
|
|
427
427
|
import {
|
|
@@ -182,8 +182,13 @@ var tableStyles = ({
|
|
|
182
182
|
}) => {
|
|
183
183
|
const densityConfig = getDensityConfig(theme, density);
|
|
184
184
|
return {
|
|
185
|
-
|
|
186
|
-
|
|
185
|
+
// `overflow: hidden` makes the `<table>` a scroll container, which stops
|
|
186
|
+
// a `stickyHeader`'s `<thead>` sticking within it — a sticky element
|
|
187
|
+
// sticks within its nearest ancestor scroll container (FUT-2677). With
|
|
188
|
+
// `stickyHeader`, the rounded clip moves to the `TableContainer` instead
|
|
189
|
+
// (`containerStyle` and `scrollerRadiusStyle` in `Table.helpers.ts`), which already clips a
|
|
190
|
+
// scrolling table.
|
|
191
|
+
...stickyHeader ? {} : { borderRadius: theme.spacing(1), overflow: "hidden" },
|
|
187
192
|
transition: "all 0.3s ease",
|
|
188
193
|
position: "relative",
|
|
189
194
|
// Density styles
|
|
@@ -216,4 +221,4 @@ var tableStyles = ({
|
|
|
216
221
|
export {
|
|
217
222
|
tableStyles
|
|
218
223
|
};
|
|
219
|
-
//# sourceMappingURL=chunk-
|
|
224
|
+
//# sourceMappingURL=chunk-BVHIKXCN.js.map
|
|
@@ -1 +1 @@
|
|
|
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":[]}
|
|
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 // `overflow: hidden` makes the `<table>` a scroll container, which stops\n // a `stickyHeader`'s `<thead>` sticking within it — a sticky element\n // sticks within its nearest ancestor scroll container (FUT-2677). With\n // `stickyHeader`, the rounded clip moves to the `TableContainer` instead\n // (`containerStyle` and `scrollerRadiusStyle` in `Table.helpers.ts`), which already clips a\n // scrolling table.\n ...(stickyHeader ? {} : { borderRadius: theme.spacing(1), 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":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
tableRowHeight
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-NHEWST3N.js";
|
|
4
4
|
import {
|
|
5
5
|
FIELD_BORDER_WIDTH
|
|
6
6
|
} from "./chunk-PZBK3F52.js";
|
|
@@ -294,4 +294,4 @@ export {
|
|
|
294
294
|
TableDataRow,
|
|
295
295
|
EnhancedTableBody
|
|
296
296
|
};
|
|
297
|
-
//# sourceMappingURL=chunk-
|
|
297
|
+
//# sourceMappingURL=chunk-IBGP3VSR.js.map
|
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
import {
|
|
2
2
|
EnhancedTableBody,
|
|
3
3
|
EnhancedTableHeader
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-IBGP3VSR.js";
|
|
5
5
|
import {
|
|
6
6
|
tableStyles
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-BVHIKXCN.js";
|
|
8
8
|
import {
|
|
9
9
|
useTableSelection,
|
|
10
10
|
useVirtualScrolling
|
|
11
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-RZSMRBOX.js";
|
|
12
12
|
import {
|
|
13
13
|
TABLE_DEFAULTS,
|
|
14
|
+
containerStyle,
|
|
14
15
|
definedProps,
|
|
15
|
-
|
|
16
|
+
headerRefFor,
|
|
17
|
+
scrollerRadiusStyle,
|
|
16
18
|
tableDomProps,
|
|
17
19
|
tableRowHeight,
|
|
18
20
|
virtualHeight
|
|
19
|
-
} from "./chunk-
|
|
21
|
+
} from "./chunk-NHEWST3N.js";
|
|
20
22
|
import {
|
|
21
23
|
EmptyRow,
|
|
22
24
|
NoDataPlaceholder
|
|
@@ -69,24 +71,29 @@ var TableShell = ({
|
|
|
69
71
|
header,
|
|
70
72
|
rest,
|
|
71
73
|
children
|
|
72
|
-
}) =>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
74
|
+
}) => (
|
|
75
|
+
// The loading and empty shells are not scrollers (no `containerHeight`), so
|
|
76
|
+
// they get only the rounded clip `stickyHeader` moves off the `<table>`,
|
|
77
|
+
// never a height (FUT-2677).
|
|
78
|
+
/* @__PURE__ */ jsx(TableContainer, { style: scrollerRadiusStyle(useTheme(), stickyHeader), children: /* @__PURE__ */ jsxs(
|
|
79
|
+
StyledTable,
|
|
80
|
+
{
|
|
81
|
+
ref: innerRef,
|
|
82
|
+
customVariant: variant,
|
|
83
|
+
stripeColor,
|
|
84
|
+
glow,
|
|
85
|
+
pulse,
|
|
86
|
+
hoverable,
|
|
87
|
+
density,
|
|
88
|
+
stickyHeader,
|
|
89
|
+
...rest,
|
|
90
|
+
children: [
|
|
91
|
+
header,
|
|
92
|
+
children
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
) })
|
|
96
|
+
);
|
|
90
97
|
var SKELETON_ROW_COUNT = 5;
|
|
91
98
|
var LoadingSkeletonRows = ({ columns }) => {
|
|
92
99
|
const theme = useTheme();
|
|
@@ -126,13 +133,13 @@ var AdvancedTable = ({ resolved: p, selection, innerRef, rest }) => {
|
|
|
126
133
|
tableRowHeight(p.rowHeight) || 40,
|
|
127
134
|
windowHeight ?? 400,
|
|
128
135
|
p.overscan,
|
|
129
|
-
headRef
|
|
136
|
+
headerRefFor(windowHeight, headRef)
|
|
130
137
|
);
|
|
131
138
|
return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
|
|
132
139
|
/* @__PURE__ */ jsx(
|
|
133
140
|
TableContainer,
|
|
134
141
|
{
|
|
135
|
-
style:
|
|
142
|
+
style: containerStyle(theme, p),
|
|
136
143
|
onScroll: windowHeight ? handleScroll : void 0,
|
|
137
144
|
children: /* @__PURE__ */ jsxs(
|
|
138
145
|
StyledTable,
|
|
@@ -298,4 +305,4 @@ Table.displayName = "Table";
|
|
|
298
305
|
export {
|
|
299
306
|
Table
|
|
300
307
|
};
|
|
301
|
-
//# sourceMappingURL=chunk-
|
|
308
|
+
//# sourceMappingURL=chunk-KTCOJFZB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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 } 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 {\n TABLE_DEFAULTS,\n containerStyle,\n definedProps,\n headerRefFor,\n scrollerRadiusStyle,\n tableDomProps,\n tableRowHeight,\n virtualHeight,\n} from './Table.helpers';\nimport { useTableSelection, useVirtualScrolling } 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// Helper function to get stripe color from theme\nconst StyledTable = styled(MuiTable, {\n shouldForwardProp: (prop) =>\n !['customVariant', 'glow', 'pulse', 'hoverable', 'density', 'stickyHeader', 'stripeColor', 'virtualised'].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 virtualised?: boolean;\n}>(({ theme, customVariant, glow, pulse, hoverable, density, stickyHeader, stripeColor = 'neutral', virtualised }) => {\n return tableStyles({\n theme,\n customVariant,\n glow,\n pulse,\n hoverable,\n density,\n stickyHeader,\n stripeColor,\n virtualised });\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 // The loading and empty shells are not scrollers (no `containerHeight`), so\n // they get only the rounded clip `stickyHeader` moves off the `<table>`,\n // never a height (FUT-2677).\n <TableContainer style={scrollerRadiusStyle(useTheme(), stickyHeader)}>\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 </TableContainer>\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 StyledTable cannot cross a module\n// 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\n// The virtual window lives here, with the one scroller whose offset drives it;\n// the header's ref lets it subtract the height the `<thead>` pushes the body down.\nconst AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerRef, rest }) => {\n const theme = useTheme();\n const finalColumns = columnsFor(p, selection);\n const showToggle = showsColumnToggle(p, selection);\n const headRef = React.useRef<globalThis.HTMLTableSectionElement>(null);\n const windowHeight = virtualHeight(p);\n const { visibleItems, handleScroll } = useVirtualScrolling(\n p.data ?? [],\n tableRowHeight(p.rowHeight) || 40,\n windowHeight ?? 400,\n p.overscan,\n headerRefFor(windowHeight, headRef),\n );\n\n return (\n <Box position=\"relative\">\n <TableContainer\n style={containerStyle(theme, p)}\n onScroll={windowHeight ? handleScroll : undefined}\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 virtualised={Boolean(windowHeight)}\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 headRef={headRef}\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 virtualWindow={windowHeight ? visibleItems : undefined}\n rowHeight={p.rowHeight}\n />\n </StyledTable>\n </TableContainer>\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 } = 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 // Only MUI's and the DOM's own props reach the `<table>` (FUT-2658).\n const rest = tableDomProps(tableProps);\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":[]}
|
|
@@ -8,7 +8,14 @@ var scrollHeight = (theme, containerHeight) => {
|
|
|
8
8
|
const box = containerHeight || 400;
|
|
9
9
|
return typeof box === "number" ? rem(theme, box) : box;
|
|
10
10
|
};
|
|
11
|
-
var scrollerStyle = (theme, p) => p.virtualScrolling ? { height: scrollHeight(theme, p.containerHeight), overflow: "auto" } : void 0;
|
|
11
|
+
var scrollerStyle = (theme, p) => p.virtualScrolling || p.containerHeight ? { height: scrollHeight(theme, p.containerHeight), overflow: "auto" } : void 0;
|
|
12
|
+
var scrollerRadiusStyle = (theme, stickyHeader) => stickyHeader ? { borderRadius: theme.spacing(1) } : void 0;
|
|
13
|
+
var containerStyle = (theme, p) => {
|
|
14
|
+
const scroller = scrollerStyle(theme, p);
|
|
15
|
+
const radius = scrollerRadiusStyle(theme, p.stickyHeader);
|
|
16
|
+
return scroller || radius ? { ...scroller, ...radius } : void 0;
|
|
17
|
+
};
|
|
18
|
+
var headerRefFor = (windowHeight, headRef) => windowHeight ? headRef : void 0;
|
|
12
19
|
var virtualHeight = (p) => p.virtualScrolling && typeof p.containerHeight === "number" && p.containerHeight > 0 && tableRowHeight(p.rowHeight) > 0 ? p.containerHeight : void 0;
|
|
13
20
|
var TABLE_DEFAULTS = {
|
|
14
21
|
variant: "default",
|
|
@@ -78,9 +85,12 @@ var tableDomProps = (props) => Object.fromEntries(Object.entries(props).filter((
|
|
|
78
85
|
export {
|
|
79
86
|
tableRowHeight,
|
|
80
87
|
scrollerStyle,
|
|
88
|
+
scrollerRadiusStyle,
|
|
89
|
+
containerStyle,
|
|
90
|
+
headerRefFor,
|
|
81
91
|
virtualHeight,
|
|
82
92
|
TABLE_DEFAULTS,
|
|
83
93
|
definedProps,
|
|
84
94
|
tableDomProps
|
|
85
95
|
};
|
|
86
|
-
//# sourceMappingURL=chunk-
|
|
96
|
+
//# sourceMappingURL=chunk-NHEWST3N.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Table/Table.helpers.ts"],"sourcesContent":["import type { TableProps as MuiTableProps } from '@mui/material/Table/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport type { TableProps } from './Table.types';\n\n/**\n * A virtualised row's height in design px: the caller's `rowHeight`, else 52.\n * Resolved here rather than in {@link TABLE_DEFAULTS} so the one number is read\n * where it is drawn (`rem`) and where the window is positioned with it (`remPx`).\n */\nexport const tableRowHeight = (rowHeight: number | undefined): number => rowHeight ?? 52;\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/**\n * The table's one scroll container (FUT-2658): `containerHeight` tall\n * whenever it is set, or 400 when `virtualScrolling` is on and it is not,\n * holding the header and the body. `containerHeight` sizes the scroller with\n * or without `virtualScrolling` (FUT-2677) — no consumer relies on the old\n * virtual-only gate, and `stickyHeader` needs this box to stick inside.\n * Inline, so the height it was given reads back off the element. A\n * `containerHeight` of 0 counts as unset: a zero-height scroller shows nothing.\n */\nexport const scrollerStyle = (theme: Theme, p: TableProps): React.CSSProperties | undefined =>\n p.virtualScrolling || p.containerHeight\n ? { height: scrollHeight(theme, p.containerHeight), overflow: 'auto' }\n : undefined;\n\n/**\n * With `stickyHeader`, the scroller takes over the rounded clip the `<table>`\n * gives up (`tableStyles`, FUT-2677) — the caller's container owns it on the\n * basic (children) path, and the loading/empty shells get it too, so their\n * corners do not change between states.\n */\nexport const scrollerRadiusStyle = (\n theme: Theme,\n stickyHeader: boolean | undefined,\n): React.CSSProperties | undefined => (stickyHeader ? { borderRadius: theme.spacing(1) } : undefined);\n\n/** `scrollerStyle` and, with `stickyHeader`, the rounded clip it takes over. */\nexport const containerStyle = (theme: Theme, p: TableProps): React.CSSProperties | undefined => {\n const scroller = scrollerStyle(theme, p);\n const radius = scrollerRadiusStyle(theme, p.stickyHeader);\n return scroller || radius ? { ...scroller, ...radius } : undefined;\n};\n\n/**\n * Only a virtualised table needs its header measured — a plain one never\n * reads `scroll.headerPx`, so it gets no `ResizeObserver` either (FUT-2678).\n */\nexport const headerRefFor = (\n windowHeight: number | undefined,\n headRef: React.RefObject<globalThis.HTMLTableSectionElement | null>,\n): React.RefObject<globalThis.HTMLTableSectionElement | null> | undefined =>\n windowHeight ? headRef : undefined;\n\n/**\n * The window's height in design px when the body is virtualised — only a\n * numeric `containerHeight` virtualises; a string sizes the scroller alone.\n */\nexport const virtualHeight = (p: TableProps): number | undefined =>\n p.virtualScrolling && typeof p.containerHeight === 'number' && p.containerHeight > 0 &&\n tableRowHeight(p.rowHeight) > 0\n ? p.containerHeight\n : undefined;\n\nexport const TABLE_DEFAULTS: Partial<TableProps> = {\n variant: 'default',\n stripeColor: 'neutral',\n glow: false,\n pulse: false,\n hoverable: false,\n loading: false,\n density: 'normal',\n stickyHeader: false,\n selectable: false,\n selectedRows: [],\n sortable: false,\n virtualScrolling: false,\n overscan: 5,\n responsive: false,\n showColumnToggle: true,\n};\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default as a destructuring default would. Eighteen separate\n// destructuring defaults were most of this component's branch count.\nexport const definedProps = (props: TableProps): Partial<TableProps> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<TableProps>;\n\n// The container + styled table + optional header, shared by the loading, empty\n// and populated renders.\n\n/** A key `Table` declares on top of MUI's own `TableProps`. */\ntype TableOwnKey = Exclude<keyof TableProps, keyof MuiTableProps>;\n\n/**\n * Every key {@link TableOwnKey} names. None is an HTML attribute: each is read\n * by the table and drawn by its parts, so none may reach the `<table>`\n * (FUT-2658). A `Record` over the key union makes the list exhaustive — a prop\n * added to `Table.types.ts` does not compile until it is named here.\n */\nconst TABLE_OWN_KEYS: Record<TableOwnKey, true> = {\n emptyText: true,\n variant: true,\n stripeColor: true,\n glow: true,\n pulse: true,\n hoverable: true,\n loading: true,\n onRowClick: true,\n onRowFocus: true,\n onRowBlur: true,\n density: true,\n selectable: true,\n selectedRows: true,\n onSelectionChange: true,\n rowKeyExtractor: true,\n sortable: true,\n sortConfig: true,\n onSortChange: true,\n filterable: true,\n filterConfig: true,\n onFilterChange: true,\n columns: true,\n data: true,\n virtualScrolling: true,\n rowHeight: true,\n overscan: true,\n responsive: true,\n columnPriorities: true,\n responsiveBreakpoints: true,\n showColumnToggle: true,\n containerHeight: true,\n loadingComponent: true,\n emptyStateComponent: true,\n keyboardNavigation: true,\n renderRow: true,\n renderCell: true,\n draggableRows: true,\n onRowsReorder: true,\n fixedColumns: true,\n rowStyleConfig: true,\n};\n\nconst NOT_FORWARDED = new Set<string>([...Object.keys(TABLE_OWN_KEYS), 'children']);\n\n/**\n * What the caller passed that is MUI's or the DOM's — `className`, `id`,\n * `style`, `aria-*`, `data-*`, DOM handlers, `sx`, `size`, `padding`,\n * `component` — for `MuiTable` to spread onto the `<table>`. `children` is\n * placed by the table itself.\n */\nexport const tableDomProps = (props: TableProps): Record<string, unknown> =>\n Object.fromEntries(Object.entries(props).filter(([key]) => !NOT_FORWARDED.has(key)));\n"],"mappings":";;;;;AAaO,IAAM,iBAAiB,CAAC,cAA0C,aAAa;AAGtF,IAAM,eAAe,CAAC,OAAc,oBAAyD;AAC3F,QAAM,MAAM,mBAAmB;AAC/B,SAAO,OAAO,QAAQ,WAAW,IAAI,OAAO,GAAG,IAAI;AACrD;AAWO,IAAM,gBAAgB,CAAC,OAAc,MAC1C,EAAE,oBAAoB,EAAE,kBACpB,EAAE,QAAQ,aAAa,OAAO,EAAE,eAAe,GAAG,UAAU,OAAO,IACnE;AAQC,IAAM,sBAAsB,CACjC,OACA,iBACqC,eAAe,EAAE,cAAc,MAAM,QAAQ,CAAC,EAAE,IAAI;AAGpF,IAAM,iBAAiB,CAAC,OAAc,MAAmD;AAC9F,QAAM,WAAW,cAAc,OAAO,CAAC;AACvC,QAAM,SAAS,oBAAoB,OAAO,EAAE,YAAY;AACxD,SAAO,YAAY,SAAS,EAAE,GAAG,UAAU,GAAG,OAAO,IAAI;AAC3D;AAMO,IAAM,eAAe,CAC1B,cACA,YAEA,eAAe,UAAU;AAMpB,IAAM,gBAAgB,CAAC,MAC5B,EAAE,oBAAoB,OAAO,EAAE,oBAAoB,YAAY,EAAE,kBAAkB,KACnF,eAAe,EAAE,SAAS,IAAI,IAC1B,EAAE,kBACF;AAEC,IAAM,iBAAsC;AAAA,EACjD,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc,CAAC;AAAA,EACf,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,kBAAkB;AACpB;AAKO,IAAM,eAAe,CAAC,UAC3B,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAcF,IAAM,iBAA4C;AAAA,EAChD,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,cAAc;AAAA,EACd,gBAAgB;AAClB;AAEA,IAAM,gBAAgB,oBAAI,IAAY,CAAC,GAAG,OAAO,KAAK,cAAc,GAAG,UAAU,CAAC;AAQ3E,IAAM,gBAAgB,CAAC,UAC5B,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,MAAM,CAAC,cAAc,IAAI,GAAG,CAAC,CAAC;","names":[]}
|
|
@@ -5,10 +5,27 @@ import {
|
|
|
5
5
|
// src/components/data-display/Table/Table.hooks.ts
|
|
6
6
|
import { useTheme } from "@mui/material/styles/index.js";
|
|
7
7
|
import useMediaQuery from "@mui/material/useMediaQuery/index.js";
|
|
8
|
-
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
8
|
+
import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
|
|
9
|
+
var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
|
|
9
10
|
var useVirtualScrolling = (data, rowHeight, containerHeight, overscan = 5, headerRef) => {
|
|
10
11
|
const theme = useTheme();
|
|
11
12
|
const [scroll, setScroll] = useState({ scrollTop: 0, headerPx: 0 });
|
|
13
|
+
const measureHeader = useCallback(() => {
|
|
14
|
+
setScroll((prev) => {
|
|
15
|
+
const headerPx = headerRef?.current?.offsetHeight ?? 0;
|
|
16
|
+
return headerPx === prev.headerPx ? prev : { ...prev, headerPx };
|
|
17
|
+
});
|
|
18
|
+
}, [headerRef]);
|
|
19
|
+
useIsomorphicLayoutEffect(() => {
|
|
20
|
+
measureHeader();
|
|
21
|
+
}, [measureHeader]);
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
const header = headerRef?.current;
|
|
24
|
+
if (!header || typeof ResizeObserver === "undefined") return void 0;
|
|
25
|
+
const observer = new ResizeObserver(() => measureHeader());
|
|
26
|
+
observer.observe(header);
|
|
27
|
+
return () => observer.disconnect();
|
|
28
|
+
}, [headerRef, measureHeader]);
|
|
12
29
|
const visibleItems = useMemo(() => {
|
|
13
30
|
const pitch = remPx(theme, rowHeight);
|
|
14
31
|
const bodyScrollTop = Math.max(0, scroll.scrollTop - scroll.headerPx);
|
|
@@ -118,4 +135,4 @@ export {
|
|
|
118
135
|
useVirtualScrolling,
|
|
119
136
|
useTableSelection
|
|
120
137
|
};
|
|
121
|
-
//# sourceMappingURL=chunk-
|
|
138
|
+
//# sourceMappingURL=chunk-RZSMRBOX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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, useLayoutEffect, useMemo, useState } from 'react';\n\n// A server render has no layout to measure, and React warns about\n// `useLayoutEffect` there; the effect below only measures, so on the server\n// it can be a plain (never-run) effect.\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\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. That height is measured once after mount, and\n * again from a `ResizeObserver` on `headerRef` whenever it changes —\n * `handleScroll` also measures it on every scroll, so a scroll still carries\n * the latest height, but nothing depends on that any more (FUT-2678: a\n * resize with no scroll event used to leave the window off until the next\n * one). The window subtracts the measured height before dividing by the pitch\n * (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 measureHeader = useCallback(() => {\n setScroll((prev) => {\n const headerPx = headerRef?.current?.offsetHeight ?? 0;\n return headerPx === prev.headerPx ? prev : { ...prev, headerPx };\n });\n }, [headerRef]);\n\n // Once after mount, so a header measured before any scroll or resize is\n // still right the first time the window is drawn.\n useIsomorphicLayoutEffect(() => {\n measureHeader();\n }, [measureHeader]);\n\n // Then on every change the header makes on its own: a responsive column\n // hidden or shown, a label wrapping at a new width, a web font loading, a\n // `density` change. Where `ResizeObserver` is undefined, only the mount\n // measurement above and `handleScroll` below still apply.\n useEffect(() => {\n const header = headerRef?.current;\n if (!header || typeof ResizeObserver === 'undefined') return undefined;\n\n const observer = new ResizeObserver(() => measureHeader());\n observer.observe(header);\n return () => observer.disconnect();\n }, [headerRef, measureHeader]);\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":[]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import "../chunk-WG2WFANT.js";
|
|
2
2
|
import {
|
|
3
3
|
Table
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
6
|
-
import "../chunk-
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-KTCOJFZB.js";
|
|
5
|
+
import "../chunk-IBGP3VSR.js";
|
|
6
|
+
import "../chunk-BVHIKXCN.js";
|
|
7
|
+
import "../chunk-RZSMRBOX.js";
|
|
8
|
+
import "../chunk-NHEWST3N.js";
|
|
9
9
|
import "../chunk-XIXR2L3L.js";
|
|
10
10
|
import "../chunk-PZBK3F52.js";
|
|
11
11
|
import "../chunk-YKCAJ2TN.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAEV,YAAY,EACZ,UAAU,EACV,gBAAgB,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAEV,YAAY,EACZ,UAAU,EACV,gBAAgB,EAAC,MAAM,eAAe,CAAC;AA4CzC,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CA+BA,CAAC;AAqBF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;AAyMxF,eAAO,MAAM,KAAK,kGAiEjB,CAAC"}
|
|
@@ -8,11 +8,29 @@ import type { TableProps } from './Table.types';
|
|
|
8
8
|
*/
|
|
9
9
|
export declare const tableRowHeight: (rowHeight: number | undefined) => number;
|
|
10
10
|
/**
|
|
11
|
-
* The table's one scroll container (FUT-2658): `containerHeight` tall
|
|
12
|
-
* `virtualScrolling` is on
|
|
13
|
-
*
|
|
11
|
+
* The table's one scroll container (FUT-2658): `containerHeight` tall
|
|
12
|
+
* whenever it is set, or 400 when `virtualScrolling` is on and it is not,
|
|
13
|
+
* holding the header and the body. `containerHeight` sizes the scroller with
|
|
14
|
+
* or without `virtualScrolling` (FUT-2677) — no consumer relies on the old
|
|
15
|
+
* virtual-only gate, and `stickyHeader` needs this box to stick inside.
|
|
16
|
+
* Inline, so the height it was given reads back off the element. A
|
|
17
|
+
* `containerHeight` of 0 counts as unset: a zero-height scroller shows nothing.
|
|
14
18
|
*/
|
|
15
19
|
export declare const scrollerStyle: (theme: Theme, p: TableProps) => React.CSSProperties | undefined;
|
|
20
|
+
/**
|
|
21
|
+
* With `stickyHeader`, the scroller takes over the rounded clip the `<table>`
|
|
22
|
+
* gives up (`tableStyles`, FUT-2677) — the caller's container owns it on the
|
|
23
|
+
* basic (children) path, and the loading/empty shells get it too, so their
|
|
24
|
+
* corners do not change between states.
|
|
25
|
+
*/
|
|
26
|
+
export declare const scrollerRadiusStyle: (theme: Theme, stickyHeader: boolean | undefined) => React.CSSProperties | undefined;
|
|
27
|
+
/** `scrollerStyle` and, with `stickyHeader`, the rounded clip it takes over. */
|
|
28
|
+
export declare const containerStyle: (theme: Theme, p: TableProps) => React.CSSProperties | undefined;
|
|
29
|
+
/**
|
|
30
|
+
* Only a virtualised table needs its header measured — a plain one never
|
|
31
|
+
* reads `scroll.headerPx`, so it gets no `ResizeObserver` either (FUT-2678).
|
|
32
|
+
*/
|
|
33
|
+
export declare const headerRefFor: (windowHeight: number | undefined, headRef: React.RefObject<globalThis.HTMLTableSectionElement | null>) => React.RefObject<globalThis.HTMLTableSectionElement | null> | undefined;
|
|
16
34
|
/**
|
|
17
35
|
* The window's height in design px when the body is virtualised — only a
|
|
18
36
|
* numeric `containerHeight` virtualises; a string sizes the scroller alone.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,GAAG,SAAS,KAAG,MAAyB,CAAC;AAQzF
|
|
1
|
+
{"version":3,"file":"Table.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,GAAG,SAAS,KAAG,MAAyB,CAAC;AAQzF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,EAAE,GAAG,UAAU,KAAG,KAAK,CAAC,aAAa,GAAG,SAGnE,CAAC;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAC9B,OAAO,KAAK,EACZ,cAAc,OAAO,GAAG,SAAS,KAChC,KAAK,CAAC,aAAa,GAAG,SAA4E,CAAC;AAEtG,gFAAgF;AAChF,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,EAAE,GAAG,UAAU,KAAG,KAAK,CAAC,aAAa,GAAG,SAIlF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GACvB,cAAc,MAAM,GAAG,SAAS,EAChC,SAAS,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,uBAAuB,GAAG,IAAI,CAAC,KAClE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,uBAAuB,GAAG,IAAI,CAAC,GAAG,SAC5B,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,GAAG,UAAU,KAAG,MAAM,GAAG,SAIxC,CAAC;AAEhB,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,UAAU,CAgB9C,CAAC;AAKF,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,OAAO,CAAC,UAAU,CAGzC,CAAC;AA2D3B;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,UAAU,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CACc,CAAC"}
|
|
@@ -7,9 +7,13 @@ import type { ColumnConfig, TableProps, VirtualWindow } from './Table.types';
|
|
|
7
7
|
* pitch at any type scale.
|
|
8
8
|
*
|
|
9
9
|
* The scroller holds the header as well as the body, so the `<tbody>` starts
|
|
10
|
-
* the header's height into it.
|
|
11
|
-
*
|
|
12
|
-
*
|
|
10
|
+
* the header's height into it. That height is measured once after mount, and
|
|
11
|
+
* again from a `ResizeObserver` on `headerRef` whenever it changes —
|
|
12
|
+
* `handleScroll` also measures it on every scroll, so a scroll still carries
|
|
13
|
+
* the latest height, but nothing depends on that any more (FUT-2678: a
|
|
14
|
+
* resize with no scroll event used to leave the window off until the next
|
|
15
|
+
* one). The window subtracts the measured height before dividing by the pitch
|
|
16
|
+
* (FUT-2658).
|
|
13
17
|
*/
|
|
14
18
|
export declare const useVirtualScrolling: (data: Record<string, unknown>[], rowHeight: number, containerHeight: number, overscan?: number, headerRef?: React.RefObject<HTMLElement | null>) => {
|
|
15
19
|
visibleItems: VirtualWindow;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.hooks.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.hooks.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE7E;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,mBAAmB,GAC9B,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/B,WAAW,MAAM,EACjB,iBAAiB,MAAM,EACvB,WAAU,MAAU,EACpB,YAAY,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;sBAqDV,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC;CAQnE,CAAC;AAqDF,eAAO,MAAM,iBAAiB,GAAI,oGAQ/B;IACD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,YAAY,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAClC,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACnF,iBAAiB,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC;CACrD;;;;;;;oCAgBoD,MAAM,GAAG,MAAM,YAAY,OAAO;gCAYtC,OAAO;CAyBvD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAqMpE,eAAO,MAAM,WAAW,GAAI,mGASX;IACf,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,KAAG,
|
|
1
|
+
{"version":3,"file":"Table.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAqMpE,eAAO,MAAM,WAAW,GAAI,mGASX;IACf,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,KAAG,SAyDH,CAAA"}
|
|
@@ -190,8 +190,11 @@ export interface TableProps extends Omit<MuiTableProps, 'variant'> {
|
|
|
190
190
|
*/
|
|
191
191
|
showColumnToggle?: boolean;
|
|
192
192
|
/**
|
|
193
|
-
*
|
|
194
|
-
*
|
|
193
|
+
* The scroller's height — with or without `virtualScrolling` (FUT-2677).
|
|
194
|
+
* The 400 default applies only when `virtualScrolling` is on and this is
|
|
195
|
+
* unset; without it, no `containerHeight` means no height at all. A number
|
|
196
|
+
* is design px, scaled with the theme's type scale; a string is used as
|
|
197
|
+
* given.
|
|
195
198
|
*/
|
|
196
199
|
containerHeight?: number | string;
|
|
197
200
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEhE,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,KAAK,EAAE,OAAO,CAAC;QACf,QAAQ,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;KAC5F,CAAC;CACH;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/E,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/D,aAAa,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CACrD;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE;QACZ,WAAW,CAAC,EAAE;YACZ,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;YACd,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;YACd,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;SACf,CAAC;KACH,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAClC,iBAAiB,EAAE,CAAC,YAAY,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;CACxF;AAED,yEAAyE;AACzE,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAE1C,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC;IAChE;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAEnE;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAE/B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAEjH;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAEjH;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAIhH;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAEnC;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAEvF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAEjC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE5B;;OAEG;IACH,qBAAqB,CAAC,EAAE;QACtB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IAEF;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B
|
|
1
|
+
{"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -20,12 +20,46 @@ const scrollHeight = (theme: Theme, containerHeight: number | string | undefined
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
/**
|
|
23
|
-
* The table's one scroll container (FUT-2658): `containerHeight` tall
|
|
24
|
-
* `virtualScrolling` is on
|
|
25
|
-
*
|
|
23
|
+
* The table's one scroll container (FUT-2658): `containerHeight` tall
|
|
24
|
+
* whenever it is set, or 400 when `virtualScrolling` is on and it is not,
|
|
25
|
+
* holding the header and the body. `containerHeight` sizes the scroller with
|
|
26
|
+
* or without `virtualScrolling` (FUT-2677) — no consumer relies on the old
|
|
27
|
+
* virtual-only gate, and `stickyHeader` needs this box to stick inside.
|
|
28
|
+
* Inline, so the height it was given reads back off the element. A
|
|
29
|
+
* `containerHeight` of 0 counts as unset: a zero-height scroller shows nothing.
|
|
26
30
|
*/
|
|
27
31
|
export const scrollerStyle = (theme: Theme, p: TableProps): React.CSSProperties | undefined =>
|
|
28
|
-
p.virtualScrolling
|
|
32
|
+
p.virtualScrolling || p.containerHeight
|
|
33
|
+
? { height: scrollHeight(theme, p.containerHeight), overflow: 'auto' }
|
|
34
|
+
: undefined;
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* With `stickyHeader`, the scroller takes over the rounded clip the `<table>`
|
|
38
|
+
* gives up (`tableStyles`, FUT-2677) — the caller's container owns it on the
|
|
39
|
+
* basic (children) path, and the loading/empty shells get it too, so their
|
|
40
|
+
* corners do not change between states.
|
|
41
|
+
*/
|
|
42
|
+
export const scrollerRadiusStyle = (
|
|
43
|
+
theme: Theme,
|
|
44
|
+
stickyHeader: boolean | undefined,
|
|
45
|
+
): React.CSSProperties | undefined => (stickyHeader ? { borderRadius: theme.spacing(1) } : undefined);
|
|
46
|
+
|
|
47
|
+
/** `scrollerStyle` and, with `stickyHeader`, the rounded clip it takes over. */
|
|
48
|
+
export const containerStyle = (theme: Theme, p: TableProps): React.CSSProperties | undefined => {
|
|
49
|
+
const scroller = scrollerStyle(theme, p);
|
|
50
|
+
const radius = scrollerRadiusStyle(theme, p.stickyHeader);
|
|
51
|
+
return scroller || radius ? { ...scroller, ...radius } : undefined;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Only a virtualised table needs its header measured — a plain one never
|
|
56
|
+
* reads `scroll.headerPx`, so it gets no `ResizeObserver` either (FUT-2678).
|
|
57
|
+
*/
|
|
58
|
+
export const headerRefFor = (
|
|
59
|
+
windowHeight: number | undefined,
|
|
60
|
+
headRef: React.RefObject<globalThis.HTMLTableSectionElement | null>,
|
|
61
|
+
): React.RefObject<globalThis.HTMLTableSectionElement | null> | undefined =>
|
|
62
|
+
windowHeight ? headRef : undefined;
|
|
29
63
|
|
|
30
64
|
/**
|
|
31
65
|
* The window's height in design px when the body is virtualised — only a
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { useTheme } from '@mui/material/styles/index.js';
|
|
2
2
|
import useMediaQuery from '@mui/material/useMediaQuery/index.js';
|
|
3
|
-
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
3
|
+
import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
|
|
4
|
+
|
|
5
|
+
// A server render has no layout to measure, and React warns about
|
|
6
|
+
// `useLayoutEffect` there; the effect below only measures, so on the server
|
|
7
|
+
// it can be a plain (never-run) effect.
|
|
8
|
+
const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
|
|
4
9
|
|
|
5
10
|
import { remPx } from '../../../tokens/relative';
|
|
6
11
|
|
|
@@ -14,9 +19,13 @@ import type { ColumnConfig, TableProps, VirtualWindow } from './Table.types';
|
|
|
14
19
|
* pitch at any type scale.
|
|
15
20
|
*
|
|
16
21
|
* The scroller holds the header as well as the body, so the `<tbody>` starts
|
|
17
|
-
* the header's height into it.
|
|
18
|
-
*
|
|
19
|
-
*
|
|
22
|
+
* the header's height into it. That height is measured once after mount, and
|
|
23
|
+
* again from a `ResizeObserver` on `headerRef` whenever it changes —
|
|
24
|
+
* `handleScroll` also measures it on every scroll, so a scroll still carries
|
|
25
|
+
* the latest height, but nothing depends on that any more (FUT-2678: a
|
|
26
|
+
* resize with no scroll event used to leave the window off until the next
|
|
27
|
+
* one). The window subtracts the measured height before dividing by the pitch
|
|
28
|
+
* (FUT-2658).
|
|
20
29
|
*/
|
|
21
30
|
export const useVirtualScrolling = (
|
|
22
31
|
data: Record<string, unknown>[],
|
|
@@ -28,7 +37,33 @@ export const useVirtualScrolling = (
|
|
|
28
37
|
const theme = useTheme();
|
|
29
38
|
// Both live px, as the browser measures them.
|
|
30
39
|
const [scroll, setScroll] = useState({ scrollTop: 0, headerPx: 0 });
|
|
31
|
-
|
|
40
|
+
|
|
41
|
+
const measureHeader = useCallback(() => {
|
|
42
|
+
setScroll((prev) => {
|
|
43
|
+
const headerPx = headerRef?.current?.offsetHeight ?? 0;
|
|
44
|
+
return headerPx === prev.headerPx ? prev : { ...prev, headerPx };
|
|
45
|
+
});
|
|
46
|
+
}, [headerRef]);
|
|
47
|
+
|
|
48
|
+
// Once after mount, so a header measured before any scroll or resize is
|
|
49
|
+
// still right the first time the window is drawn.
|
|
50
|
+
useIsomorphicLayoutEffect(() => {
|
|
51
|
+
measureHeader();
|
|
52
|
+
}, [measureHeader]);
|
|
53
|
+
|
|
54
|
+
// Then on every change the header makes on its own: a responsive column
|
|
55
|
+
// hidden or shown, a label wrapping at a new width, a web font loading, a
|
|
56
|
+
// `density` change. Where `ResizeObserver` is undefined, only the mount
|
|
57
|
+
// measurement above and `handleScroll` below still apply.
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
const header = headerRef?.current;
|
|
60
|
+
if (!header || typeof ResizeObserver === 'undefined') return undefined;
|
|
61
|
+
|
|
62
|
+
const observer = new ResizeObserver(() => measureHeader());
|
|
63
|
+
observer.observe(header);
|
|
64
|
+
return () => observer.disconnect();
|
|
65
|
+
}, [headerRef, measureHeader]);
|
|
66
|
+
|
|
32
67
|
const visibleItems = useMemo((): VirtualWindow => {
|
|
33
68
|
const pitch = remPx(theme, rowHeight);
|
|
34
69
|
const bodyScrollTop = Math.max(0, scroll.scrollTop - scroll.headerPx);
|
|
@@ -53,7 +53,7 @@ import { Table } from '@procurement/ui';
|
|
|
53
53
|
- **selectable** `boolean` - Enable row selection
|
|
54
54
|
- **selectedRows** `(string | number)[]` - Currently selected row IDs
|
|
55
55
|
- **onSelectionChange** `(rows: (string | number)[]) => void` - Selection change handler
|
|
56
|
-
- **stickyHeader** `boolean` - Keep header fixed when scrolling
|
|
56
|
+
- **stickyHeader** `boolean` - Keep header fixed when scrolling. Sticks inside the `containerHeight` scroller — set both together, or the header has nothing to stick within
|
|
57
57
|
- **responsive** `boolean` - Enable responsive column hiding
|
|
58
58
|
- **virtualScrolling** `boolean` - Enable virtual scrolling for large datasets
|
|
59
59
|
- **loading** `boolean` - Show loading state
|
|
@@ -67,7 +67,7 @@ import { Table } from '@procurement/ui';
|
|
|
67
67
|
|
|
68
68
|
### Container Props
|
|
69
69
|
|
|
70
|
-
- **containerHeight** `number` - Fixed height for scrollable container
|
|
70
|
+
- **containerHeight** `number | string` - Fixed height for the scrollable container, with or without `virtualScrolling` — a number is design px, a string is used as given (e.g. `'50vh'`)
|
|
71
71
|
- **rowHeight** `number` - Height per row (for virtual scrolling)
|
|
72
72
|
- **overscan** `number` - Number of rows to render outside viewport
|
|
73
73
|
|
|
@@ -246,4 +246,10 @@ const columns = [
|
|
|
246
246
|
</TableBody>
|
|
247
247
|
</Table>
|
|
248
248
|
</TableContainer>
|
|
249
|
-
```
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
On this path the caller supplies its own `TableContainer`, so the rounded clip
|
|
252
|
+
is the caller's. Without `stickyHeader` the `<table>` still rounds and clips
|
|
253
|
+
itself, as above; with `stickyHeader` the `<table>` does not, and the
|
|
254
|
+
caller's own container should carry the radius that used to be the
|
|
255
|
+
`<table>`'s (`theme.spacing(1)` at the default theme).
|
|
@@ -220,10 +220,15 @@ export const tableStyles = ({
|
|
|
220
220
|
virtualised?: boolean;
|
|
221
221
|
}): CSSObject => {
|
|
222
222
|
const densityConfig = getDensityConfig(theme, density);
|
|
223
|
-
|
|
223
|
+
|
|
224
224
|
return {
|
|
225
|
-
|
|
226
|
-
|
|
225
|
+
// `overflow: hidden` makes the `<table>` a scroll container, which stops
|
|
226
|
+
// a `stickyHeader`'s `<thead>` sticking within it — a sticky element
|
|
227
|
+
// sticks within its nearest ancestor scroll container (FUT-2677). With
|
|
228
|
+
// `stickyHeader`, the rounded clip moves to the `TableContainer` instead
|
|
229
|
+
// (`containerStyle` and `scrollerRadiusStyle` in `Table.helpers.ts`), which already clips a
|
|
230
|
+
// scrolling table.
|
|
231
|
+
...(stickyHeader ? {} : { borderRadius: theme.spacing(1), overflow: 'hidden' }),
|
|
227
232
|
transition: 'all 0.3s ease',
|
|
228
233
|
position: 'relative',
|
|
229
234
|
|
|
@@ -21,8 +21,10 @@ import type {
|
|
|
21
21
|
TableStripeColor} from './Table.types';
|
|
22
22
|
import {
|
|
23
23
|
TABLE_DEFAULTS,
|
|
24
|
+
containerStyle,
|
|
24
25
|
definedProps,
|
|
25
|
-
|
|
26
|
+
headerRefFor,
|
|
27
|
+
scrollerRadiusStyle,
|
|
26
28
|
tableDomProps,
|
|
27
29
|
tableRowHeight,
|
|
28
30
|
virtualHeight,
|
|
@@ -84,7 +86,10 @@ const TableShell: React.FC<{
|
|
|
84
86
|
header,
|
|
85
87
|
rest,
|
|
86
88
|
children }) => (
|
|
87
|
-
|
|
89
|
+
// The loading and empty shells are not scrollers (no `containerHeight`), so
|
|
90
|
+
// they get only the rounded clip `stickyHeader` moves off the `<table>`,
|
|
91
|
+
// never a height (FUT-2677).
|
|
92
|
+
<TableContainer style={scrollerRadiusStyle(useTheme(), stickyHeader)}>
|
|
88
93
|
<StyledTable
|
|
89
94
|
ref={innerRef}
|
|
90
95
|
customVariant={variant}
|
|
@@ -198,13 +203,13 @@ const AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerR
|
|
|
198
203
|
tableRowHeight(p.rowHeight) || 40,
|
|
199
204
|
windowHeight ?? 400,
|
|
200
205
|
p.overscan,
|
|
201
|
-
headRef,
|
|
206
|
+
headerRefFor(windowHeight, headRef),
|
|
202
207
|
);
|
|
203
208
|
|
|
204
209
|
return (
|
|
205
210
|
<Box position="relative">
|
|
206
211
|
<TableContainer
|
|
207
|
-
style={
|
|
212
|
+
style={containerStyle(theme, p)}
|
|
208
213
|
onScroll={windowHeight ? handleScroll : undefined}
|
|
209
214
|
>
|
|
210
215
|
<StyledTable
|
|
@@ -229,8 +229,11 @@ export interface TableProps extends Omit<MuiTableProps, 'variant'> {
|
|
|
229
229
|
showColumnToggle?: boolean;
|
|
230
230
|
|
|
231
231
|
/**
|
|
232
|
-
*
|
|
233
|
-
*
|
|
232
|
+
* The scroller's height — with or without `virtualScrolling` (FUT-2677).
|
|
233
|
+
* The 400 default applies only when `virtualScrolling` is on and this is
|
|
234
|
+
* unset; without it, no `containerHeight` means no height at all. A number
|
|
235
|
+
* is design px, scaled with the theme's type scale; a string is used as
|
|
236
|
+
* given.
|
|
234
237
|
*/
|
|
235
238
|
containerHeight?: number | string;
|
|
236
239
|
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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 } 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 {\n TABLE_DEFAULTS,\n definedProps,\n scrollerStyle,\n tableDomProps,\n tableRowHeight,\n virtualHeight,\n} from './Table.helpers';\nimport { useTableSelection, useVirtualScrolling } 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// Helper function to get stripe color from theme\nconst StyledTable = styled(MuiTable, {\n shouldForwardProp: (prop) =>\n !['customVariant', 'glow', 'pulse', 'hoverable', 'density', 'stickyHeader', 'stripeColor', 'virtualised'].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 virtualised?: boolean;\n}>(({ theme, customVariant, glow, pulse, hoverable, density, stickyHeader, stripeColor = 'neutral', virtualised }) => {\n return tableStyles({\n theme,\n customVariant,\n glow,\n pulse,\n hoverable,\n density,\n stickyHeader,\n stripeColor,\n virtualised });\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 <TableContainer>\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 </TableContainer>\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 StyledTable cannot cross a module\n// 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\n// The virtual window lives here, with the one scroller whose offset drives it;\n// the header's ref lets it subtract the height the `<thead>` pushes the body down.\nconst AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerRef, rest }) => {\n const theme = useTheme();\n const finalColumns = columnsFor(p, selection);\n const showToggle = showsColumnToggle(p, selection);\n const headRef = React.useRef<globalThis.HTMLTableSectionElement>(null);\n const windowHeight = virtualHeight(p);\n const { visibleItems, handleScroll } = useVirtualScrolling(\n p.data ?? [],\n tableRowHeight(p.rowHeight) || 40,\n windowHeight ?? 400,\n p.overscan,\n headRef,\n );\n\n return (\n <Box position=\"relative\">\n <TableContainer\n style={scrollerStyle(theme, p)}\n onScroll={windowHeight ? handleScroll : undefined}\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 virtualised={Boolean(windowHeight)}\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 headRef={headRef}\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 virtualWindow={windowHeight ? visibleItems : undefined}\n rowHeight={p.rowHeight}\n />\n </StyledTable>\n </TableContainer>\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 } = 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 // Only MUI's and the DOM's own props reach the `<table>` (FUT-2658).\n const rest = tableDomProps(tableProps);\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":[]}
|
|
@@ -1 +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":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/Table/Table.helpers.ts"],"sourcesContent":["import type { TableProps as MuiTableProps } from '@mui/material/Table/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport type { TableProps } from './Table.types';\n\n/**\n * A virtualised row's height in design px: the caller's `rowHeight`, else 52.\n * Resolved here rather than in {@link TABLE_DEFAULTS} so the one number is read\n * where it is drawn (`rem`) and where the window is positioned with it (`remPx`).\n */\nexport const tableRowHeight = (rowHeight: number | undefined): number => rowHeight ?? 52;\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/**\n * The table's one scroll container (FUT-2658): `containerHeight` tall when\n * `virtualScrolling` is on, holding the header and the body. Inline, so the\n * height it was given reads back off the element.\n */\nexport const scrollerStyle = (theme: Theme, p: TableProps): React.CSSProperties | undefined =>\n p.virtualScrolling ? { height: scrollHeight(theme, p.containerHeight), overflow: 'auto' } : undefined;\n\n/**\n * The window's height in design px when the body is virtualised — only a\n * numeric `containerHeight` virtualises; a string sizes the scroller alone.\n */\nexport const virtualHeight = (p: TableProps): number | undefined =>\n p.virtualScrolling && typeof p.containerHeight === 'number' && p.containerHeight > 0 &&\n tableRowHeight(p.rowHeight) > 0\n ? p.containerHeight\n : undefined;\n\nexport const TABLE_DEFAULTS: Partial<TableProps> = {\n variant: 'default',\n stripeColor: 'neutral',\n glow: false,\n pulse: false,\n hoverable: false,\n loading: false,\n density: 'normal',\n stickyHeader: false,\n selectable: false,\n selectedRows: [],\n sortable: false,\n virtualScrolling: false,\n overscan: 5,\n responsive: false,\n showColumnToggle: true,\n};\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default as a destructuring default would. Eighteen separate\n// destructuring defaults were most of this component's branch count.\nexport const definedProps = (props: TableProps): Partial<TableProps> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<TableProps>;\n\n// The container + styled table + optional header, shared by the loading, empty\n// and populated renders.\n\n/** A key `Table` declares on top of MUI's own `TableProps`. */\ntype TableOwnKey = Exclude<keyof TableProps, keyof MuiTableProps>;\n\n/**\n * Every key {@link TableOwnKey} names. None is an HTML attribute: each is read\n * by the table and drawn by its parts, so none may reach the `<table>`\n * (FUT-2658). A `Record` over the key union makes the list exhaustive — a prop\n * added to `Table.types.ts` does not compile until it is named here.\n */\nconst TABLE_OWN_KEYS: Record<TableOwnKey, true> = {\n emptyText: true,\n variant: true,\n stripeColor: true,\n glow: true,\n pulse: true,\n hoverable: true,\n loading: true,\n onRowClick: true,\n onRowFocus: true,\n onRowBlur: true,\n density: true,\n selectable: true,\n selectedRows: true,\n onSelectionChange: true,\n rowKeyExtractor: true,\n sortable: true,\n sortConfig: true,\n onSortChange: true,\n filterable: true,\n filterConfig: true,\n onFilterChange: true,\n columns: true,\n data: true,\n virtualScrolling: true,\n rowHeight: true,\n overscan: true,\n responsive: true,\n columnPriorities: true,\n responsiveBreakpoints: true,\n showColumnToggle: true,\n containerHeight: true,\n loadingComponent: true,\n emptyStateComponent: true,\n keyboardNavigation: true,\n renderRow: true,\n renderCell: true,\n draggableRows: true,\n onRowsReorder: true,\n fixedColumns: true,\n rowStyleConfig: true,\n};\n\nconst NOT_FORWARDED = new Set<string>([...Object.keys(TABLE_OWN_KEYS), 'children']);\n\n/**\n * What the caller passed that is MUI's or the DOM's — `className`, `id`,\n * `style`, `aria-*`, `data-*`, DOM handlers, `sx`, `size`, `padding`,\n * `component` — for `MuiTable` to spread onto the `<table>`. `children` is\n * placed by the table itself.\n */\nexport const tableDomProps = (props: TableProps): Record<string, unknown> =>\n Object.fromEntries(Object.entries(props).filter(([key]) => !NOT_FORWARDED.has(key)));\n"],"mappings":";;;;;AAaO,IAAM,iBAAiB,CAAC,cAA0C,aAAa;AAGtF,IAAM,eAAe,CAAC,OAAc,oBAAyD;AAC3F,QAAM,MAAM,mBAAmB;AAC/B,SAAO,OAAO,QAAQ,WAAW,IAAI,OAAO,GAAG,IAAI;AACrD;AAOO,IAAM,gBAAgB,CAAC,OAAc,MAC1C,EAAE,mBAAmB,EAAE,QAAQ,aAAa,OAAO,EAAE,eAAe,GAAG,UAAU,OAAO,IAAI;AAMvF,IAAM,gBAAgB,CAAC,MAC5B,EAAE,oBAAoB,OAAO,EAAE,oBAAoB,YAAY,EAAE,kBAAkB,KACnF,eAAe,EAAE,SAAS,IAAI,IAC1B,EAAE,kBACF;AAEC,IAAM,iBAAsC;AAAA,EACjD,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc,CAAC;AAAA,EACf,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,kBAAkB;AACpB;AAKO,IAAM,eAAe,CAAC,UAC3B,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAcF,IAAM,iBAA4C;AAAA,EAChD,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,cAAc;AAAA,EACd,gBAAgB;AAClB;AAEA,IAAM,gBAAgB,oBAAI,IAAY,CAAC,GAAG,OAAO,KAAK,cAAc,GAAG,UAAU,CAAC;AAQ3E,IAAM,gBAAgB,CAAC,UAC5B,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,MAAM,CAAC,cAAc,IAAI,GAAG,CAAC,CAAC;","names":[]}
|
|
File without changes
|