@12-apps/ui 6.39.1 → 6.39.2
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/LazyImage/LazyImage.js +1 -1
- package/dist/_internal/components/data-display/Table/Table.helpers.js +10 -3
- package/dist/_internal/components/data-display/Table/Table.hooks.js +1 -1
- package/dist/_internal/components/data-display/Table/Table.js +4 -4
- package/dist/_internal/components/data-display/Table/TableParts.hooks.js +2 -3
- package/dist/_internal/components/data-display/Table/TableParts.js +2 -3
- package/dist/_internal/components/data-display/index.js +5 -5
- package/dist/_internal/components/index.js +9 -9
- package/dist/_internal/components/utility/WorkflowStep/WorkflowStep.helpers.js +15 -1
- package/dist/_internal/components/utility/WorkflowStep/WorkflowStep.js +17 -4
- package/dist/_internal/components/utility/WorkflowStep/WorkflowStep.parts.js +15 -2
- package/dist/_internal/components/utility/WorkflowStep/WorkflowStepRow.js +16 -3
- package/dist/_internal/components/utility/index.js +17 -4
- package/dist/{chunk-YZVR5ROE.js → chunk-5HQNHZ6Z.js} +12 -10
- package/dist/chunk-5HQNHZ6Z.js.map +1 -0
- package/dist/{chunk-3YOXVNO4.js → chunk-BOGTTXPA.js} +32 -30
- package/dist/chunk-BOGTTXPA.js.map +1 -0
- package/dist/{chunk-MC4KYGSX.js → chunk-GFQ4U6WZ.js} +3 -5
- package/dist/chunk-GFQ4U6WZ.js.map +1 -0
- package/dist/{chunk-5LWB4BYX.js → chunk-RGT6DM5W.js} +21 -47
- package/dist/chunk-RGT6DM5W.js.map +1 -0
- package/dist/{chunk-FF2D7V7T.js → chunk-SDK5LPPC.js} +13 -10
- package/dist/chunk-SDK5LPPC.js.map +1 -0
- package/dist/{chunk-SNURSSTN.js → chunk-VLOUXTEM.js} +3 -3
- package/dist/{chunk-V5KKBMAT.js → chunk-VXQOSADY.js} +6 -3
- package/dist/{chunk-V5KKBMAT.js.map → chunk-VXQOSADY.js.map} +1 -1
- package/dist/{chunk-BVLMKSHX.js → chunk-WDVNRW3Q.js} +2 -2
- package/dist/chunk-XS3REOPN.js +86 -0
- package/dist/chunk-XS3REOPN.js.map +1 -0
- package/dist/data-display/LazyImage.js +1 -1
- package/dist/data-display/Table.js +4 -4
- package/dist/types/components/data-display/LazyImage/LazyImage.d.ts.map +1 -1
- package/dist/types/components/data-display/LazyImage/LazyImage.types.d.ts +15 -3
- package/dist/types/components/data-display/LazyImage/LazyImage.types.d.ts.map +1 -1
- package/dist/types/components/data-display/Table/Table.d.ts.map +1 -1
- package/dist/types/components/data-display/Table/Table.helpers.d.ts +20 -0
- 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 +8 -11
- package/dist/types/components/data-display/Table/Table.hooks.d.ts.map +1 -1
- package/dist/types/components/data-display/Table/Table.types.d.ts +17 -2
- package/dist/types/components/data-display/Table/Table.types.d.ts.map +1 -1
- package/dist/types/components/data-display/Table/TableParts.d.ts.map +1 -1
- package/dist/types/components/utility/WorkflowStep/WorkflowStep.helpers.d.ts +6 -1
- package/dist/types/components/utility/WorkflowStep/WorkflowStep.helpers.d.ts.map +1 -1
- package/dist/types/components/utility/WorkflowStep/WorkflowStep.parts.d.ts.map +1 -1
- package/dist/utility/WorkflowStep.js +17 -4
- package/package.json +1 -1
- package/src/components/data-display/LazyImage/LazyImage.md +22 -15
- package/src/components/data-display/LazyImage/LazyImage.tsx +26 -9
- package/src/components/data-display/LazyImage/LazyImage.types.ts +15 -3
- package/src/components/data-display/Table/Table.helpers.ts +93 -0
- package/src/components/data-display/Table/Table.hooks.ts +20 -11
- package/src/components/data-display/Table/Table.tsx +34 -31
- package/src/components/data-display/Table/Table.types.ts +18 -2
- package/src/components/data-display/Table/TableParts.tsx +23 -52
- package/src/components/utility/WorkflowStep/WorkflowStep.helpers.ts +9 -3
- package/src/components/utility/WorkflowStep/WorkflowStep.parts.tsx +1 -5
- package/dist/chunk-3YOXVNO4.js.map +0 -1
- package/dist/chunk-5LWB4BYX.js.map +0 -1
- package/dist/chunk-FF2D7V7T.js.map +0 -1
- package/dist/chunk-JWZJSXI5.js +0 -29
- package/dist/chunk-JWZJSXI5.js.map +0 -1
- package/dist/chunk-MC4KYGSX.js.map +0 -1
- package/dist/chunk-YZVR5ROE.js.map +0 -1
- /package/dist/{chunk-SNURSSTN.js.map → chunk-VLOUXTEM.js.map} +0 -0
- /package/dist/{chunk-BVLMKSHX.js.map → chunk-WDVNRW3Q.js.map} +0 -0
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
useVirtualScrolling
|
|
3
|
-
} from "./chunk-YZVR5ROE.js";
|
|
4
1
|
import {
|
|
5
2
|
tableRowHeight
|
|
6
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-XS3REOPN.js";
|
|
7
4
|
import {
|
|
8
5
|
rem
|
|
9
6
|
} from "./chunk-YKCAJ2TN.js";
|
|
@@ -12,7 +9,6 @@ import {
|
|
|
12
9
|
import { useCallback as useCallback2 } from "react";
|
|
13
10
|
|
|
14
11
|
// src/components/data-display/Table/TableParts.tsx
|
|
15
|
-
import Box from "@mui/material/Box/index.js";
|
|
16
12
|
import Checkbox from "@mui/material/Checkbox/index.js";
|
|
17
13
|
import TableBody from "@mui/material/TableBody/index.js";
|
|
18
14
|
import TableCell from "@mui/material/TableCell/index.js";
|
|
@@ -62,7 +58,8 @@ var EnhancedTableHeader = React.memo(({
|
|
|
62
58
|
onSortChange,
|
|
63
59
|
selectable,
|
|
64
60
|
selectedRows = [],
|
|
65
|
-
onSelectAll
|
|
61
|
+
onSelectAll,
|
|
62
|
+
headRef
|
|
66
63
|
}) => {
|
|
67
64
|
const handleSort = useCallback(
|
|
68
65
|
(columnKey) => {
|
|
@@ -79,7 +76,7 @@ var EnhancedTableHeader = React.memo(({
|
|
|
79
76
|
},
|
|
80
77
|
[onSelectAll]
|
|
81
78
|
);
|
|
82
|
-
return /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
79
|
+
return /* @__PURE__ */ jsx(TableHead, { ref: headRef, children: /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
83
80
|
selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
|
|
84
81
|
Checkbox,
|
|
85
82
|
{
|
|
@@ -154,51 +151,28 @@ var TableDataRow = ({
|
|
|
154
151
|
String(rowKey)
|
|
155
152
|
);
|
|
156
153
|
};
|
|
157
|
-
var VirtualisedBody = ({ visibleItems, rowHeight,
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
TableBody,
|
|
170
|
-
{
|
|
171
|
-
style: {
|
|
172
|
-
height: visibleItems.totalHeight,
|
|
173
|
-
position: "relative"
|
|
174
|
-
},
|
|
175
|
-
children: visibleItems.items.map(
|
|
176
|
-
(rowData, index) => renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)
|
|
177
|
-
)
|
|
178
|
-
}
|
|
179
|
-
)
|
|
180
|
-
}
|
|
181
|
-
);
|
|
182
|
-
};
|
|
154
|
+
var VirtualisedBody = ({ visibleItems, rowHeight, renderTableRow }) => /* @__PURE__ */ jsx(
|
|
155
|
+
TableBody,
|
|
156
|
+
{
|
|
157
|
+
style: {
|
|
158
|
+
height: visibleItems.totalHeight,
|
|
159
|
+
position: "relative"
|
|
160
|
+
},
|
|
161
|
+
children: visibleItems.items.map(
|
|
162
|
+
(rowData, index) => renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)
|
|
163
|
+
)
|
|
164
|
+
}
|
|
165
|
+
);
|
|
183
166
|
var PlainBody = ({ data, renderTableRow }) => /* @__PURE__ */ jsx(TableBody, { children: data.map((rowData, index) => renderTableRow(rowData, index)) });
|
|
184
167
|
var EnhancedTableBody = React.memo((props) => {
|
|
185
|
-
const { data,
|
|
168
|
+
const { data, virtualWindow } = props;
|
|
186
169
|
const renderTableRow = useTableRowRenderer({ ...props, selectedRows: props.selectedRows ?? [] });
|
|
187
|
-
|
|
188
|
-
const { visibleItems, handleScroll } = useVirtualScrolling(
|
|
189
|
-
data,
|
|
190
|
-
rowHeight || 40,
|
|
191
|
-
typeof containerHeight === "number" ? containerHeight : 400,
|
|
192
|
-
overscan
|
|
193
|
-
);
|
|
194
|
-
if (virtualScrolling && containerHeight && rowHeight) {
|
|
170
|
+
if (virtualWindow) {
|
|
195
171
|
return /* @__PURE__ */ jsx(
|
|
196
172
|
VirtualisedBody,
|
|
197
173
|
{
|
|
198
|
-
visibleItems,
|
|
199
|
-
rowHeight,
|
|
200
|
-
containerHeight,
|
|
201
|
-
onScroll: handleScroll,
|
|
174
|
+
visibleItems: virtualWindow,
|
|
175
|
+
rowHeight: tableRowHeight(props.rowHeight),
|
|
202
176
|
renderTableRow
|
|
203
177
|
}
|
|
204
178
|
);
|
|
@@ -294,4 +268,4 @@ export {
|
|
|
294
268
|
TableDataRow,
|
|
295
269
|
EnhancedTableBody
|
|
296
270
|
};
|
|
297
|
-
//# sourceMappingURL=chunk-
|
|
271
|
+
//# sourceMappingURL=chunk-RGT6DM5W.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Table/TableParts.hooks.tsx","../src/components/data-display/Table/TableParts.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback } from 'react';\n\nimport { TableDataRow } from './TableParts';\nimport type { TableBodyProps } from './Table.types';\n\n// Row identity, selection and the row element itself. Split out of\n// EnhancedTableBody so that component is just the virtualised/plain choice.\n// A row's identity: the caller's extractor, else its id, else its position.\nconst useRowKey = (rowKeyExtractor: TableBodyProps['rowKeyExtractor']) =>\n useCallback(\n (rowData: Record<string, unknown>, index: number): string | number =>\n rowKeyExtractor ? rowKeyExtractor(rowData, index) : (rowData.id as string | number) || index,\n [rowKeyExtractor],\n );\n\nconst useRowSelection = ({\n selectedRows,\n onSelectionChange,\n}: {\n selectedRows: Array<string | number>;\n onSelectionChange: TableBodyProps['onSelectionChange'];\n}) =>\n useCallback(\n (event: React.MouseEvent | React.ChangeEvent, rowKey: string | number) => {\n // Stop propagation so selecting does not also fire the row click.\n event.stopPropagation();\n if (!onSelectionChange) return;\n onSelectionChange(rowKey, !selectedRows.includes(rowKey));\n },\n [onSelectionChange, selectedRows],\n );\n\nexport const useTableRowRenderer = ({\n columns,\n selectedRows,\n onRowClick,\n onRowFocus,\n onRowBlur,\n onSelectionChange,\n rowKeyExtractor,\n selectable,\n renderRow,\n renderCell,\n virtualScrolling,\n rowHeight,\n}: Pick<\n TableBodyProps,\n | 'columns'\n | 'onRowClick'\n | 'onRowFocus'\n | 'onRowBlur'\n | 'onSelectionChange'\n | 'rowKeyExtractor'\n | 'selectable'\n | 'renderRow'\n | 'renderCell'\n | 'virtualScrolling'\n | 'rowHeight'\n> & { selectedRows: Array<string | number> }) => {\n const getRowKey = useRowKey(rowKeyExtractor);\n const isRowSelected = useCallback(\n (rowKey: string | number) => selectedRows.includes(rowKey),\n [selectedRows],\n );\n const handleRowSelection = useRowSelection({ selectedRows, onSelectionChange });\n\n const renderTableRow = useCallback(\n (rowData: Record<string, unknown>, index: number, offsetY: number = 0) => {\n const rowKey = getRowKey(rowData, index);\n const selected = isRowSelected(rowKey);\n\n if (renderRow) return renderRow(rowData, index, selected);\n\n return (\n <TableDataRow\n key={rowKey}\n rowData={rowData}\n rowKey={rowKey}\n index={index}\n offsetY={offsetY}\n columns={columns}\n selected={selected}\n selectable={selectable}\n rowHeight={rowHeight}\n onRowClick={onRowClick}\n onRowFocus={onRowFocus}\n onRowBlur={onRowBlur}\n onSelect={handleRowSelection}\n virtualScrolling={virtualScrolling}\n renderCell={renderCell}\n />\n );\n },\n [\n columns,\n getRowKey,\n isRowSelected,\n handleRowSelection,\n onRowClick,\n onRowFocus,\n onRowBlur,\n renderRow,\n renderCell,\n rowHeight,\n selectable,\n virtualScrolling,\n ],\n );\n\n return renderTableRow;\n};\n","import Checkbox from '@mui/material/Checkbox/index.js';\nimport TableBody from '@mui/material/TableBody/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableHead from '@mui/material/TableHead/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport TableSortLabel from '@mui/material/TableSortLabel/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useCallback } from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport { tableRowHeight } from './Table.helpers';\nimport { useTableRowRenderer } from './TableParts.hooks';\nimport type { ColumnConfig, TableBodyProps, TableHeaderProps, VirtualWindow } from './Table.types';\n\n// Mirrors the visible sort indicator for assistive technology; undefined when\n// the column is not sorted, which is what removes the attribute entirely.\nconst ariaSortFor = (\n canSort: boolean,\n isSorted: boolean,\n direction?: 'asc' | 'desc',\n): 'ascending' | 'descending' | undefined => {\n if (!canSort || !isSorted) return undefined;\n\n return direction === 'asc' ? 'ascending' : 'descending';\n};\n\n/** A column's `width`/`minWidth` as CSS: a number is design px, a string as given. */\nconst columnLength = (theme: Theme, value: number | string | undefined): string | undefined =>\n typeof value === 'number' ? rem(theme, value) : value;\n\n// One header cell. Sorting is offered when the table is sortable and the column\n// has not opted out; aria-sort mirrors the visible indicator.\nconst HeaderCell: React.FC<{\n column: ColumnConfig;\n sortable?: boolean;\n sortConfig?: { key: string; direction: 'asc' | 'desc' };\n onSort: (columnKey: string) => void;\n}> = ({ column, sortable, sortConfig, onSort }) => {\n const theme = useTheme();\n const canSort = Boolean(sortable) && column.sortable !== false;\n const isSorted = sortConfig?.key === column.key;\n\n return (\n <TableCell\n align={column.align || 'left'}\n style={{\n minWidth: columnLength(theme, column.minWidth),\n width: columnLength(theme, column.width),\n }}\n aria-sort={ariaSortFor(canSort, isSorted, sortConfig?.direction)}\n >\n {canSort ? (\n <TableSortLabel\n active={isSorted}\n direction={isSorted ? sortConfig?.direction : 'asc'}\n onClick={() => onSort(column.key)}\n data-testid=\"sort-indicator\"\n aria-label={`Sort by ${column.label}`}\n >\n {column.label}\n </TableSortLabel>\n ) : (\n column.label\n )}\n </TableCell>\n );\n};\n\nexport const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({\n columns,\n data,\n sortable,\n sortConfig,\n onSortChange,\n selectable,\n selectedRows = [],\n onSelectAll,\n headRef }) => {\n const handleSort = useCallback(\n (columnKey: string) => {\n if (!sortable || !onSortChange) return;\n \n const direction = \n sortConfig?.key === columnKey && sortConfig.direction === 'asc' ? 'desc' : 'asc';\n onSortChange(columnKey, direction);\n },\n [sortable, onSortChange, sortConfig]\n );\n\n const handleSelectAll = useCallback(\n (event: React.ChangeEvent<globalThis.HTMLInputElement>) => {\n if (!onSelectAll) return;\n onSelectAll(event.target.checked);\n },\n [onSelectAll]\n );\n\n return (\n <TableHead ref={headRef}>\n <TableRow>\n {selectable && (\n <TableCell padding=\"checkbox\">\n <Checkbox\n indeterminate={selectedRows.length > 0 && selectedRows.length < data.length}\n checked={selectedRows.length === data.length && data.length > 0}\n onChange={handleSelectAll}\n inputProps={{ 'aria-label': 'select all' }}\n />\n </TableCell>\n )}\n {columns.map((column) => (\n <HeaderCell\n key={column.key}\n column={column}\n sortable={sortable}\n sortConfig={sortConfig}\n onSort={handleSort}\n />\n ))}\n </TableRow>\n </TableHead>\n );\n});\n\nEnhancedTableHeader.displayName = 'EnhancedTableHeader';\n\n// One data row. Split out of the memoised renderTableRow callback so the\n// callback stays a short dispatch and the row markup is readable on its own.\nexport const TableDataRow: React.FC<{\n rowData: Record<string, unknown>;\n rowKey: string | number;\n index: number;\n /** Where a virtualised row sits, in design px — drawn through `rem`, like its height. */\n offsetY: number;\n columns: ColumnConfig[];\n selected: boolean;\n selectable?: boolean;\n /** Design px; 52 when unset (`tableRowHeight`). */\n rowHeight?: number;\n onRowClick?: TableBodyProps['onRowClick'];\n onRowFocus?: TableBodyProps['onRowFocus'];\n onRowBlur?: TableBodyProps['onRowBlur'];\n onSelect: (event: React.MouseEvent | React.ChangeEvent, rowKey: string | number) => void;\n virtualScrolling?: boolean;\n renderCell?: TableBodyProps['renderCell'];\n}> = ({\n rowData,\n rowKey,\n index,\n offsetY,\n columns,\n selected,\n selectable,\n rowHeight,\n onRowClick,\n onRowFocus,\n onRowBlur,\n onSelect,\n virtualScrolling,\n renderCell }) => {\n const theme = useTheme();\n return (\n <TableRow\n key={String(rowKey)}\n selected={selected}\n className={selected ? 'selected' : ''}\n onClick={(event: React.MouseEvent<globalThis.HTMLTableRowElement>) => onRowClick?.(event, rowData)}\n onFocus={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowFocus?.(event, rowData)}\n onBlur={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowBlur?.(event, rowData)}\n style={virtualScrolling ? { \n transform: `translateY(${rem(theme, offsetY)})`,\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n height: rem(theme, tableRowHeight(rowHeight)) } : undefined}\n >\n {selectable && (\n <TableCell padding=\"checkbox\">\n <Checkbox\n checked={selected}\n onChange={(event) => onSelect(event, rowKey)}\n onClick={(event) => event.stopPropagation()}\n inputProps={{ 'aria-label': `select row ${index + 1}` }}\n />\n </TableCell>\n )}\n {columns.map((column) => {\n const value = rowData[column.key];\n return (\n <TableCell key={column.key} align={column.align || 'left'}>\n {renderCell \n ? renderCell(value, column, rowData, index)\n : column.render \n ? column.render(value, rowData) \n : (value as React.ReactNode)\n }\n </TableCell>\n );\n })}\n </TableRow>\n );\n};\n\n// Only the rows in view are rendered, positioned by absolute offset inside a\n// body sized to the full data set. `rowHeight` and every offset are design px,\n// drawn through `rem`. The `<tbody>` sits directly in the `<table>`; the one\n// scroll container wraps the whole table, header included (FUT-2658).\nconst VirtualisedBody: React.FC<{\n visibleItems: VirtualWindow;\n rowHeight: number;\n renderTableRow: (\n rowData: Record<string, unknown>,\n index: number,\n offsetY?: number,\n ) => React.ReactNode;\n}> = ({ visibleItems, rowHeight, renderTableRow }) => (\n <TableBody\n style={{\n height: visibleItems.totalHeight,\n position: 'relative' }}\n >\n {visibleItems.items.map((rowData, index) => \n renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)\n )}\n </TableBody>\n);\n\nconst PlainBody: React.FC<{\n data: TableBodyProps['data'];\n renderTableRow: (rowData: Record<string, unknown>, index: number) => React.ReactNode;\n}> = ({ data, renderTableRow }) => (\n\n <TableBody>\n {data.map((rowData, index) => renderTableRow(rowData, index))}\n </TableBody>\n);\n\n// Enhanced Table Body Component \nexport const EnhancedTableBody: React.FC<TableBodyProps> = React.memo((props) => {\n const { data, virtualWindow } = props;\n // The row renderer takes the body's own props; its `rowHeight` stays the\n // caller's design px, and the row resolves the default where it draws it.\n const renderTableRow = useTableRowRenderer({ ...props, selectedRows: props.selectedRows ?? [] });\n\n if (virtualWindow) {\n return (\n <VirtualisedBody\n visibleItems={virtualWindow}\n rowHeight={tableRowHeight(props.rowHeight)}\n renderTableRow={renderTableRow}\n />\n );\n }\n\n return (\n <PlainBody data={data} renderTableRow={renderTableRow} />\n );\n});\n\nEnhancedTableBody.displayName = 'EnhancedTableBody';\n\n// Main Table Component\n"],"mappings":"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","names":["useCallback","jsx","useCallback"]}
|
|
@@ -56,18 +56,17 @@ var FallbackContainer = styled(Box)(({ theme }) => ({
|
|
|
56
56
|
left: 0
|
|
57
57
|
}));
|
|
58
58
|
var styleLength = (theme, value) => typeof value === "number" ? rem(theme, value) : value;
|
|
59
|
-
var
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
};
|
|
59
|
+
var isFraction = (value) => typeof value === "number" && value > 0 && value <= 1;
|
|
60
|
+
var sxLength = (theme, value) => isFraction(value) ? `${value * 100}%` : styleLength(theme, value);
|
|
61
|
+
var innerLength = (theme, value) => isFraction(value) ? "100%" : styleLength(theme, value);
|
|
63
62
|
var SkeletonIndicator = ({ props }) => {
|
|
64
63
|
const theme = useTheme();
|
|
65
64
|
return /* @__PURE__ */ jsx(
|
|
66
65
|
Skeleton,
|
|
67
66
|
{
|
|
68
67
|
variant: "rectangular",
|
|
69
|
-
width:
|
|
70
|
-
height:
|
|
68
|
+
width: innerLength(theme, props.width || "100%"),
|
|
69
|
+
height: innerLength(theme, props.height || 200),
|
|
71
70
|
animation: props.skeletonProps.animation || "pulse",
|
|
72
71
|
intensity: props.skeletonProps.intensity,
|
|
73
72
|
borderRadius: styleLength(theme, props.borderRadius),
|
|
@@ -137,7 +136,11 @@ var ErrorFallback = ({ props, metrics }) => {
|
|
|
137
136
|
return /* @__PURE__ */ jsx(
|
|
138
137
|
FallbackContainer,
|
|
139
138
|
{
|
|
140
|
-
sx: {
|
|
139
|
+
sx: {
|
|
140
|
+
width: innerLength(theme, width),
|
|
141
|
+
height: innerLength(theme, height),
|
|
142
|
+
borderRadius: styleLength(theme, borderRadius)
|
|
143
|
+
},
|
|
141
144
|
"data-testid": `${testId}-fallback`,
|
|
142
145
|
children: fallback
|
|
143
146
|
}
|
|
@@ -158,8 +161,8 @@ var LazyImage = React.memo(function LazyImage2(rawProps) {
|
|
|
158
161
|
const { width, height, borderRadius, alt } = props;
|
|
159
162
|
const testId = props["data-testid"];
|
|
160
163
|
const metrics = {
|
|
161
|
-
width:
|
|
162
|
-
height:
|
|
164
|
+
width: innerLength(theme, width),
|
|
165
|
+
height: innerLength(theme, height),
|
|
163
166
|
objectFit: props.objectFit,
|
|
164
167
|
objectPosition: props.objectPosition,
|
|
165
168
|
borderRadius: styleLength(theme, borderRadius)
|
|
@@ -217,4 +220,4 @@ LazyImage.displayName = "LazyImage";
|
|
|
217
220
|
export {
|
|
218
221
|
LazyImage
|
|
219
222
|
};
|
|
220
|
-
//# sourceMappingURL=chunk-
|
|
223
|
+
//# sourceMappingURL=chunk-SDK5LPPC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Skeleton } from '../../layout/Skeleton';\nimport type { ResolvedLazyImageProps } from './LazyImage.hooks';\nimport { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';\nimport type { LazyImageProps } from './LazyImage.types';\nimport { sheen } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst ImageContainer = styled(Box)(() => ({\n position: 'relative',\n display: 'inline-block',\n overflow: 'hidden',\n}));\n\nconst StyledImage = styled('img')<{\n fadeIn?: boolean;\n fadeInDuration?: number;\n isLoaded?: boolean;\n}>(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({\n display: 'block',\n maxWidth: '100%',\n height: 'auto',\n opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : 'none',\n}));\n\nconst SpinnerOverlay = styled(Box)(({ theme }) => ({\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: sheen(theme, 0.8),\n borderRadius: '50%',\n padding: theme.spacing(1),\n}));\n\nconst FallbackContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.action.disabledBackground,\n color: theme.palette.text.secondary,\n width: '100%',\n height: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n}));\n\ntype Length = number | string | undefined;\n\n/** A length prop as React `style` and MUI's `Skeleton` read it: a number is design px. */\nconst styleLength = (theme: Theme, value: Length): string | undefined =>\n typeof value === 'number' ? rem(theme, value) : value;\n\n/**\n * A width or height above 0 and up to 1 is a fraction of the container's parent, as in `sx`.\n * A negative number is no fraction: it stays a (negative, so invalid) length.\n */\nconst isFraction = (value: Length): value is number =>\n typeof value === 'number' && value > 0 && value <= 1;\n\n/**\n * A length prop as `sx` reads it on a width or height: a number of 1 or less is\n * a fraction of the parent, and that stays so; any other number is design px.\n */\nconst sxLength = (theme: Theme, value: Length): string | undefined =>\n isFraction(value) ? `${value * 100}%` : styleLength(theme, value);\n\n/**\n * A width or height for what is drawn inside the container. The container alone\n * takes a fraction, so everything in it fills it: a percentage here is measured\n * against the container and would stack (FUT-2666). Otherwise the same as `styleLength`.\n */\nconst innerLength = (theme: Theme, value: Length): string | undefined =>\n isFraction(value) ? '100%' : styleLength(theme, value);\n\n/** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */\ninterface BoxMetrics {\n width?: string;\n height?: string;\n objectFit: NonNullable<LazyImageProps['objectFit']>;\n objectPosition: string;\n borderRadius?: string;\n}\n\ninterface IndicatorProps {\n props: ResolvedLazyImageProps;\n metrics: BoxMetrics;\n}\n\nconst SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {\n const theme = useTheme();\n return (\n <Skeleton\n variant=\"rectangular\"\n width={innerLength(theme, props.width || '100%')}\n height={innerLength(theme, props.height || 200)}\n animation={props.skeletonProps.animation || 'pulse'}\n intensity={props.skeletonProps.intensity}\n borderRadius={styleLength(theme, props.borderRadius)}\n data-testid={`${props['data-testid']}-skeleton`}\n />\n );\n};\n\nconst SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {\n const theme = useTheme();\n const { spinnerProps } = props;\n\n return (\n <SpinnerOverlay>\n <CircularProgress\n size={styleLength(theme, spinnerProps.size || 40)}\n thickness={spinnerProps.thickness || 4}\n sx={{ color: spinnerProps.color || theme.palette.primary.main }}\n data-testid={`${props['data-testid']}-spinner`}\n />\n </SpinnerOverlay>\n );\n};\n\nconst PlaceholderIndicator: React.FC<IndicatorProps & { hasSrc: boolean }> = ({\n props,\n metrics,\n hasSrc,\n}) => {\n // Once a src has been chosen the real <img> is on screen, so the placeholder\n // would only stack behind it.\n if (!props.placeholder || hasSrc) return null;\n\n return (\n <StyledImage\n src={props.placeholder}\n alt={`${props.alt} (loading)`}\n style={metrics}\n data-testid={`${props['data-testid']}-placeholder`}\n />\n );\n};\n\nconst LoadingIndicator: React.FC<\n IndicatorProps & { kind: NonNullable<LazyImageProps['loadingState']>; hasSrc: boolean }\n> = ({ kind, hasSrc, ...rest }) => {\n switch (kind) {\n case 'skeleton':\n return <SkeletonIndicator {...rest} />;\n case 'spinner':\n return <SpinnerIndicator {...rest} />;\n case 'placeholder':\n return <PlaceholderIndicator {...rest} hasSrc={hasSrc} />;\n default:\n return null;\n }\n};\n\nconst ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {\n const theme = useTheme();\n const { alt, fallback, width, height, borderRadius } = props;\n const testId = props['data-testid'];\n\n if (!fallback) return null;\n\n if (typeof fallback === 'string') {\n return (\n <StyledImage\n src={fallback}\n alt={`${alt} (fallback)`}\n style={metrics}\n fadeIn={false}\n isLoaded={true}\n data-testid={`${testId}-fallback`}\n />\n );\n }\n\n return (\n <FallbackContainer\n sx={{\n width: innerLength(theme, width),\n height: innerLength(theme, height),\n borderRadius: styleLength(theme, borderRadius),\n }}\n data-testid={`${testId}-fallback`}\n >\n {fallback}\n </FallbackContainer>\n );\n};\n\n/**\n * LazyImage component with enhanced features for optimized image loading\n * Supports lazy loading, placeholders, error handling, and various loading states\n */\nexport const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {\n const props = resolveLazyImageProps(rawProps);\n const theme = useTheme();\n const {\n state,\n containerRef,\n effectiveLoadingState,\n handleImageLoad,\n handleImageError,\n showImage,\n showLoading,\n } = useLazyImage(props);\n\n const { width, height, borderRadius, alt } = props;\n const testId = props['data-testid'];\n const metrics: BoxMetrics = {\n width: innerLength(theme, width),\n height: innerLength(theme, height),\n objectFit: props.objectFit,\n objectPosition: props.objectPosition,\n borderRadius: styleLength(theme, borderRadius),\n };\n\n return (\n <ImageContainer\n ref={containerRef}\n className={props.className}\n sx={{\n width: sxLength(theme, width || 'auto'),\n height: sxLength(theme, height || 'auto'),\n // The same px length the image gets (`metrics`): in `sx` a bare number\n // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).\n borderRadius: metrics.borderRadius,\n }}\n data-testid={testId}\n >\n {showLoading && (\n <LoadingIndicator\n kind={effectiveLoadingState}\n props={props}\n metrics={metrics}\n hasSrc={Boolean(state.currentSrc)}\n />\n )}\n\n {showImage && (\n <StyledImage\n src={state.currentSrc || undefined}\n alt={alt}\n onLoad={handleImageLoad}\n onError={handleImageError}\n fadeIn={props.fadeIn}\n fadeInDuration={props.fadeInDuration}\n isLoaded={!state.isLoading}\n decoding={props.decoding}\n loading={props.lazy ? 'lazy' : props.loading}\n style={{ ...metrics, ...props.sx }}\n aria-label={props['aria-label'] || alt}\n aria-describedby={props['aria-describedby']}\n role={props.role}\n data-testid={`${testId}-img`}\n {...imgPassThrough(props)}\n />\n )}\n\n {state.hasError && <ErrorFallback props={props} metrics={metrics} />}\n </ImageContainer>\n );\n});\n\nLazyImage.displayName = 'LazyImage';\n"],"mappings":"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","names":["LazyImage"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
StepRow
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-WDVNRW3Q.js";
|
|
4
4
|
import {
|
|
5
5
|
resolveWorkflowStepProps,
|
|
6
6
|
withDerivedStatus
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-VXQOSADY.js";
|
|
8
8
|
|
|
9
9
|
// src/components/utility/WorkflowStep/WorkflowStep.tsx
|
|
10
10
|
import Box from "@mui/material/Box/index.js";
|
|
@@ -104,4 +104,4 @@ export {
|
|
|
104
104
|
WorkflowStep,
|
|
105
105
|
WorkflowStep_default
|
|
106
106
|
};
|
|
107
|
-
//# sourceMappingURL=chunk-
|
|
107
|
+
//# sourceMappingURL=chunk-VLOUXTEM.js.map
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {
|
|
2
|
+
paletteKey
|
|
3
|
+
} from "./chunk-7ZPUN7TV.js";
|
|
1
4
|
import {
|
|
2
5
|
neutralTones
|
|
3
6
|
} from "./chunk-FQ6UW7IY.js";
|
|
@@ -12,14 +15,14 @@ var INDICATOR_SIZE = {
|
|
|
12
15
|
};
|
|
13
16
|
var indicatorSizeFor = (size) => INDICATOR_SIZE[size] ?? INDICATOR_SIZE.md;
|
|
14
17
|
var stepPalette = (theme, color) => {
|
|
15
|
-
|
|
18
|
+
const key = paletteKey(color || "primary");
|
|
19
|
+
if (key === "grey") {
|
|
16
20
|
const main = neutralTones(theme).emphasis;
|
|
17
21
|
return {
|
|
18
22
|
main,
|
|
19
23
|
contrastText: theme.palette.getContrastText(main)
|
|
20
24
|
};
|
|
21
25
|
}
|
|
22
|
-
const key = color || "primary";
|
|
23
26
|
return theme.palette[key];
|
|
24
27
|
};
|
|
25
28
|
var stepColors = (theme, palette, { isActive, isCompleted, isError, variant }) => {
|
|
@@ -83,4 +86,4 @@ export {
|
|
|
83
86
|
withDerivedStatus,
|
|
84
87
|
resolveWorkflowStepProps
|
|
85
88
|
};
|
|
86
|
-
//# sourceMappingURL=chunk-
|
|
89
|
+
//# sourceMappingURL=chunk-VXQOSADY.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/utility/WorkflowStep/WorkflowStep.helpers.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { WorkflowStepItem, WorkflowStepProps } from './WorkflowStep.types';\nimport { neutralTones } from '../../../tokens/ink';\n\ntype StepColor = NonNullable<WorkflowStepProps['color']>;\ntype StepSize = NonNullable<WorkflowStepProps['size']>;\n\nconst INDICATOR_SIZE: Record<StepSize, number> = {\n xs: 20,\n sm: 24,\n md: 32,\n lg: 40,\n xl: 48,\n};\n\nexport const indicatorSizeFor = (size?: StepSize): number =>\n INDICATOR_SIZE[size as StepSize] ?? INDICATOR_SIZE.md;\n\ninterface StepPalette {\n main: string;\n contrastText: string;\n}\n\n
|
|
1
|
+
{"version":3,"sources":["../src/components/utility/WorkflowStep/WorkflowStep.helpers.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { WorkflowStepItem, WorkflowStepProps } from './WorkflowStep.types';\nimport { neutralTones } from '../../../tokens/ink';\nimport { paletteKey } from '../../../tokens/scales';\n\ntype StepColor = NonNullable<WorkflowStepProps['color']>;\ntype StepSize = NonNullable<WorkflowStepProps['size']>;\n\nconst INDICATOR_SIZE: Record<StepSize, number> = {\n xs: 20,\n sm: 24,\n md: 32,\n lg: 40,\n xl: 48,\n};\n\nexport const indicatorSizeFor = (size?: StepSize): number =>\n INDICATOR_SIZE[size as StepSize] ?? INDICATOR_SIZE.md;\n\ninterface StepPalette {\n main: string;\n contrastText: string;\n}\n\n/**\n * The step's colour pair, keyed through `paletteKey` so `danger` reads MUI's\n * `error` (the palette has no `danger`). `neutral` lands on `grey`, a ramp with\n * no `main`, so its pair is derived from the ramp — with the contrast computed,\n * not assumed.\n */\nexport const stepPalette = (theme: Theme, color?: StepColor): StepPalette => {\n const key = paletteKey(color || 'primary');\n if (key === 'grey') {\n const main = neutralTones(theme).emphasis;\n return {\n main,\n contrastText: theme.palette.getContrastText(main),\n };\n }\n\n return theme.palette[key];\n};\n\nexport interface StepColors {\n backgroundColor: string;\n borderColor: string;\n textColor: string;\n}\n\ninterface StepState {\n isActive: boolean;\n isCompleted: boolean;\n isError: boolean;\n variant?: WorkflowStepProps['variant'];\n}\n\n/**\n * An indicator is one of four things, in priority order: failed, done, the step\n * you are on, or still ahead. Only the active one respects `variant` — an active\n * outlined step stays hollow with a coloured rim.\n */\nexport const stepColors = (\n theme: Theme,\n palette: StepPalette,\n { isActive, isCompleted, isError, variant }: StepState,\n): StepColors => {\n if (isError) {\n return {\n backgroundColor: theme.palette.error.main,\n borderColor: theme.palette.error.main,\n textColor: theme.palette.error.contrastText,\n };\n }\n\n if (isCompleted) {\n return {\n backgroundColor: palette.main,\n borderColor: palette.main,\n textColor: palette.contrastText,\n };\n }\n\n if (isActive) {\n const filled = variant === 'filled';\n return {\n backgroundColor: filled ? palette.main : theme.palette.background.paper,\n borderColor: palette.main,\n textColor: filled ? palette.contrastText : palette.main,\n };\n }\n\n return {\n backgroundColor: neutralTones(theme).track,\n borderColor: neutralTones(theme).track,\n textColor: theme.palette.text.secondary,\n };\n};\n\n/**\n * A step that declares `error` keeps it; the rest are positioned against\n * `currentStep`, so a caller only has to move one number to advance the workflow.\n */\nexport const withDerivedStatus = (\n steps: WorkflowStepItem[],\n currentStep: number,\n): WorkflowStepItem[] =>\n steps.map((step, index) => {\n const derivable =\n step.status === 'pending' || step.status === 'current' || step.status === 'completed';\n\n if (!derivable) return { ...step, status: step.status };\n\n if (index < currentStep) return { ...step, status: 'completed' as const };\n if (index === currentStep) return { ...step, status: 'current' as const };\n return { ...step, status: 'pending' as const };\n });\n\ntype WorkflowDefaultedKeys =\n | 'currentStep'\n | 'variant'\n | 'orientation'\n | 'color'\n | 'size'\n | 'showProgress'\n | 'animated'\n | 'interactive'\n | 'showNumbers'\n | 'showIcons'\n | 'disabled';\n\ntype ResolvedWorkflowStepProps = WorkflowStepProps &\n Required<Pick<WorkflowStepProps, WorkflowDefaultedKeys>>;\n\nconst WORKFLOW_DEFAULTS: Pick<WorkflowStepProps, WorkflowDefaultedKeys> = {\n currentStep: 0,\n variant: 'default',\n orientation: 'horizontal',\n color: 'primary',\n size: 'md',\n showProgress: true,\n animated: true,\n interactive: false,\n showNumbers: true,\n showIcons: false,\n disabled: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: WorkflowStepProps): Partial<WorkflowStepProps> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<WorkflowStepProps>;\n\nexport const resolveWorkflowStepProps = (\n props: WorkflowStepProps,\n): ResolvedWorkflowStepProps =>\n ({ ...WORKFLOW_DEFAULTS, ...definedProps(props) }) as ResolvedWorkflowStepProps;\n"],"mappings":";;;;;;;;AASA,IAAM,iBAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,mBAAmB,CAAC,SAC/B,eAAe,IAAgB,KAAK,eAAe;AAa9C,IAAM,cAAc,CAAC,OAAc,UAAmC;AAC3E,QAAM,MAAM,WAAW,SAAS,SAAS;AACzC,MAAI,QAAQ,QAAQ;AAClB,UAAM,OAAO,aAAa,KAAK,EAAE;AACjC,WAAO;AAAA,MACL;AAAA,MACA,cAAc,MAAM,QAAQ,gBAAgB,IAAI;AAAA,IAClD;AAAA,EACF;AAEA,SAAO,MAAM,QAAQ,GAAG;AAC1B;AAoBO,IAAM,aAAa,CACxB,OACA,SACA,EAAE,UAAU,aAAa,SAAS,QAAQ,MAC3B;AACf,MAAI,SAAS;AACX,WAAO;AAAA,MACL,iBAAiB,MAAM,QAAQ,MAAM;AAAA,MACrC,aAAa,MAAM,QAAQ,MAAM;AAAA,MACjC,WAAW,MAAM,QAAQ,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,MAAI,aAAa;AACf,WAAO;AAAA,MACL,iBAAiB,QAAQ;AAAA,MACzB,aAAa,QAAQ;AAAA,MACrB,WAAW,QAAQ;AAAA,IACrB;AAAA,EACF;AAEA,MAAI,UAAU;AACZ,UAAM,SAAS,YAAY;AAC3B,WAAO;AAAA,MACL,iBAAiB,SAAS,QAAQ,OAAO,MAAM,QAAQ,WAAW;AAAA,MAClE,aAAa,QAAQ;AAAA,MACrB,WAAW,SAAS,QAAQ,eAAe,QAAQ;AAAA,IACrD;AAAA,EACF;AAEA,SAAO;AAAA,IACL,iBAAiB,aAAa,KAAK,EAAE;AAAA,IACrC,aAAa,aAAa,KAAK,EAAE;AAAA,IACjC,WAAW,MAAM,QAAQ,KAAK;AAAA,EAChC;AACF;AAMO,IAAM,oBAAoB,CAC/B,OACA,gBAEA,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,QAAM,YACJ,KAAK,WAAW,aAAa,KAAK,WAAW,aAAa,KAAK,WAAW;AAE5E,MAAI,CAAC,UAAW,QAAO,EAAE,GAAG,MAAM,QAAQ,KAAK,OAAO;AAEtD,MAAI,QAAQ,YAAa,QAAO,EAAE,GAAG,MAAM,QAAQ,YAAqB;AACxE,MAAI,UAAU,YAAa,QAAO,EAAE,GAAG,MAAM,QAAQ,UAAmB;AACxE,SAAO,EAAE,GAAG,MAAM,QAAQ,UAAmB;AAC/C,CAAC;AAkBH,IAAM,oBAAoE;AAAA,EACxE,aAAa;AAAA,EACb,SAAS;AAAA,EACT,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AACZ;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAEK,IAAM,2BAA2B,CACtC,WAEC,EAAE,GAAG,mBAAmB,GAAG,aAAa,KAAK,EAAE;","names":[]}
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
StepContentComponent,
|
|
4
4
|
StepIndicatorComponent,
|
|
5
5
|
StepItemRow
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-GFQ4U6WZ.js";
|
|
7
7
|
|
|
8
8
|
// src/components/utility/WorkflowStep/WorkflowStepRow.tsx
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -78,4 +78,4 @@ var StepRow = ({
|
|
|
78
78
|
export {
|
|
79
79
|
StepRow
|
|
80
80
|
};
|
|
81
|
-
//# sourceMappingURL=chunk-
|
|
81
|
+
//# sourceMappingURL=chunk-WDVNRW3Q.js.map
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import {
|
|
2
|
+
rem
|
|
3
|
+
} from "./chunk-YKCAJ2TN.js";
|
|
4
|
+
|
|
5
|
+
// src/components/data-display/Table/Table.helpers.ts
|
|
6
|
+
var tableRowHeight = (rowHeight) => rowHeight ?? 52;
|
|
7
|
+
var scrollHeight = (theme, containerHeight) => {
|
|
8
|
+
const box = containerHeight || 400;
|
|
9
|
+
return typeof box === "number" ? rem(theme, box) : box;
|
|
10
|
+
};
|
|
11
|
+
var scrollerStyle = (theme, p) => p.virtualScrolling ? { height: scrollHeight(theme, p.containerHeight), overflow: "auto" } : void 0;
|
|
12
|
+
var virtualHeight = (p) => p.virtualScrolling && typeof p.containerHeight === "number" && p.containerHeight > 0 && tableRowHeight(p.rowHeight) > 0 ? p.containerHeight : void 0;
|
|
13
|
+
var TABLE_DEFAULTS = {
|
|
14
|
+
variant: "default",
|
|
15
|
+
stripeColor: "neutral",
|
|
16
|
+
glow: false,
|
|
17
|
+
pulse: false,
|
|
18
|
+
hoverable: false,
|
|
19
|
+
loading: false,
|
|
20
|
+
density: "normal",
|
|
21
|
+
stickyHeader: false,
|
|
22
|
+
selectable: false,
|
|
23
|
+
selectedRows: [],
|
|
24
|
+
sortable: false,
|
|
25
|
+
virtualScrolling: false,
|
|
26
|
+
overscan: 5,
|
|
27
|
+
responsive: false,
|
|
28
|
+
showColumnToggle: true
|
|
29
|
+
};
|
|
30
|
+
var definedProps = (props) => Object.fromEntries(
|
|
31
|
+
Object.entries(props).filter(([, value]) => value !== void 0)
|
|
32
|
+
);
|
|
33
|
+
var TABLE_OWN_KEYS = {
|
|
34
|
+
emptyText: true,
|
|
35
|
+
variant: true,
|
|
36
|
+
stripeColor: true,
|
|
37
|
+
glow: true,
|
|
38
|
+
pulse: true,
|
|
39
|
+
hoverable: true,
|
|
40
|
+
loading: true,
|
|
41
|
+
onRowClick: true,
|
|
42
|
+
onRowFocus: true,
|
|
43
|
+
onRowBlur: true,
|
|
44
|
+
density: true,
|
|
45
|
+
selectable: true,
|
|
46
|
+
selectedRows: true,
|
|
47
|
+
onSelectionChange: true,
|
|
48
|
+
rowKeyExtractor: true,
|
|
49
|
+
sortable: true,
|
|
50
|
+
sortConfig: true,
|
|
51
|
+
onSortChange: true,
|
|
52
|
+
filterable: true,
|
|
53
|
+
filterConfig: true,
|
|
54
|
+
onFilterChange: true,
|
|
55
|
+
columns: true,
|
|
56
|
+
data: true,
|
|
57
|
+
virtualScrolling: true,
|
|
58
|
+
rowHeight: true,
|
|
59
|
+
overscan: true,
|
|
60
|
+
responsive: true,
|
|
61
|
+
columnPriorities: true,
|
|
62
|
+
responsiveBreakpoints: true,
|
|
63
|
+
showColumnToggle: true,
|
|
64
|
+
containerHeight: true,
|
|
65
|
+
loadingComponent: true,
|
|
66
|
+
emptyStateComponent: true,
|
|
67
|
+
keyboardNavigation: true,
|
|
68
|
+
renderRow: true,
|
|
69
|
+
renderCell: true,
|
|
70
|
+
draggableRows: true,
|
|
71
|
+
onRowsReorder: true,
|
|
72
|
+
fixedColumns: true,
|
|
73
|
+
rowStyleConfig: true
|
|
74
|
+
};
|
|
75
|
+
var NOT_FORWARDED = /* @__PURE__ */ new Set([...Object.keys(TABLE_OWN_KEYS), "children"]);
|
|
76
|
+
var tableDomProps = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => !NOT_FORWARDED.has(key)));
|
|
77
|
+
|
|
78
|
+
export {
|
|
79
|
+
tableRowHeight,
|
|
80
|
+
scrollerStyle,
|
|
81
|
+
virtualHeight,
|
|
82
|
+
TABLE_DEFAULTS,
|
|
83
|
+
definedProps,
|
|
84
|
+
tableDomProps
|
|
85
|
+
};
|
|
86
|
+
//# sourceMappingURL=chunk-XS3REOPN.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 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":[]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import "../chunk-WG2WFANT.js";
|
|
2
2
|
import {
|
|
3
3
|
Table
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-BOGTTXPA.js";
|
|
5
5
|
import "../chunk-POV2KL2P.js";
|
|
6
|
+
import "../chunk-5HQNHZ6Z.js";
|
|
6
7
|
import "../chunk-XIXR2L3L.js";
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
9
|
-
import "../chunk-JWZJSXI5.js";
|
|
8
|
+
import "../chunk-RGT6DM5W.js";
|
|
9
|
+
import "../chunk-XS3REOPN.js";
|
|
10
10
|
import "../chunk-YKCAJ2TN.js";
|
|
11
11
|
import "../chunk-PZ5AY32C.js";
|
|
12
12
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LazyImage.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/LazyImage/LazyImage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"LazyImage.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/LazyImage/LazyImage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA6LxD;;;GAGG;AACH,eAAO,MAAM,SAAS,4CAoEpB,CAAC"}
|
|
@@ -11,11 +11,20 @@ export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement
|
|
|
11
11
|
*/
|
|
12
12
|
alt: string;
|
|
13
13
|
/**
|
|
14
|
-
* Width of the image
|
|
14
|
+
* Width of the image. A number above 1 is design px, scaled with the theme's
|
|
15
|
+
* type scale. A number above 0 and up to 1 is a fraction of the
|
|
16
|
+
* container's parent, as in `sx`: `0.5` is `50%`. The container takes it and
|
|
17
|
+
* the image, its skeleton and its fallback fill the container.
|
|
18
|
+
* A string is any CSS length and passes through untouched.
|
|
15
19
|
*/
|
|
16
20
|
width?: number | string;
|
|
17
21
|
/**
|
|
18
|
-
* Height of the image
|
|
22
|
+
* Height of the image. A number above 1 is design px, scaled with the theme's
|
|
23
|
+
* type scale. A number above 0 and up to 1 is a fraction of the
|
|
24
|
+
* container's parent, as in `sx`: `0.5` is `50%`. The container takes it and
|
|
25
|
+
* the image, its skeleton and its fallback fill the container. A fractional
|
|
26
|
+
* height takes effect only when the parent has a definite height.
|
|
27
|
+
* A string is any CSS length and passes through untouched.
|
|
19
28
|
*/
|
|
20
29
|
height?: number | string;
|
|
21
30
|
/**
|
|
@@ -139,7 +148,10 @@ export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement
|
|
|
139
148
|
thickness?: number;
|
|
140
149
|
};
|
|
141
150
|
/**
|
|
142
|
-
*
|
|
151
|
+
* Inline CSS for the `<img>` (its `style`), not MUI's `sx`: theme values and
|
|
152
|
+
* nested selectors such as `'&:hover'` do not apply. The image's box clips
|
|
153
|
+
* anything painted outside the image, such as a shadow, so put those on a
|
|
154
|
+
* wrapping element.
|
|
143
155
|
*/
|
|
144
156
|
sx?: React.CSSProperties;
|
|
145
157
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LazyImage.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/LazyImage/LazyImage.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;AACtF,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC;AAEpF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAC/E;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ
|
|
1
|
+
{"version":3,"file":"LazyImage.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/LazyImage/LazyImage.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -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;AAwCzC,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,CA4BA,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"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import type { Theme } from '@mui/material/styles/index.js';
|
|
2
|
+
import type React from 'react';
|
|
1
3
|
import type { TableProps } from './Table.types';
|
|
2
4
|
/**
|
|
3
5
|
* A virtualised row's height in design px: the caller's `rowHeight`, else 52.
|
|
@@ -5,6 +7,24 @@ import type { TableProps } from './Table.types';
|
|
|
5
7
|
* where it is drawn (`rem`) and where the window is positioned with it (`remPx`).
|
|
6
8
|
*/
|
|
7
9
|
export declare const tableRowHeight: (rowHeight: number | undefined) => number;
|
|
10
|
+
/**
|
|
11
|
+
* The table's one scroll container (FUT-2658): `containerHeight` tall when
|
|
12
|
+
* `virtualScrolling` is on, holding the header and the body. Inline, so the
|
|
13
|
+
* height it was given reads back off the element.
|
|
14
|
+
*/
|
|
15
|
+
export declare const scrollerStyle: (theme: Theme, p: TableProps) => React.CSSProperties | undefined;
|
|
16
|
+
/**
|
|
17
|
+
* The window's height in design px when the body is virtualised — only a
|
|
18
|
+
* numeric `containerHeight` virtualises; a string sizes the scroller alone.
|
|
19
|
+
*/
|
|
20
|
+
export declare const virtualHeight: (p: TableProps) => number | undefined;
|
|
8
21
|
export declare const TABLE_DEFAULTS: Partial<TableProps>;
|
|
9
22
|
export declare const definedProps: (props: TableProps) => Partial<TableProps>;
|
|
23
|
+
/**
|
|
24
|
+
* What the caller passed that is MUI's or the DOM's — `className`, `id`,
|
|
25
|
+
* `style`, `aria-*`, `data-*`, DOM handlers, `sx`, `size`, `padding`,
|
|
26
|
+
* `component` — for `MuiTable` to spread onto the `<table>`. `children` is
|
|
27
|
+
* placed by the table itself.
|
|
28
|
+
*/
|
|
29
|
+
export declare const tableDomProps: (props: TableProps) => Record<string, unknown>;
|
|
10
30
|
//# sourceMappingURL=Table.helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.helpers.ts"],"names":[],"mappings":"
|
|
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;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,EAAE,GAAG,UAAU,KAAG,KAAK,CAAC,aAAa,GAAG,SACqB,CAAC;AAExG;;;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"}
|
|
@@ -1,20 +1,17 @@
|
|
|
1
|
-
import type { ColumnConfig, TableProps } from './Table.types';
|
|
1
|
+
import type { ColumnConfig, TableProps, VirtualWindow } from './Table.types';
|
|
2
2
|
/**
|
|
3
3
|
* The virtual window. `rowHeight` and `containerHeight` are design px: the
|
|
4
4
|
* window is computed in the px `scrollTop` is measured in (`remPx`), and what it
|
|
5
5
|
* hands back to draw with stays in design px (`offsetY`) or is CSS already
|
|
6
6
|
* (`totalHeight`), so the rows and the window share one pitch at any type scale.
|
|
7
|
+
*
|
|
8
|
+
* The scroller holds the header as well as the body, so the `<tbody>` starts
|
|
9
|
+
* the header's height into it. `handleScroll` measures that height from
|
|
10
|
+
* `headerRef` in the same live px as `scrollTop`, and the window subtracts it
|
|
11
|
+
* before dividing by the pitch (FUT-2658).
|
|
7
12
|
*/
|
|
8
|
-
export declare const useVirtualScrolling: (data: Record<string, unknown>[], rowHeight: number, containerHeight: number, overscan?: number) => {
|
|
9
|
-
visibleItems:
|
|
10
|
-
startIndex: number;
|
|
11
|
-
endIndex: number;
|
|
12
|
-
items: Record<string, unknown>[];
|
|
13
|
-
/** Every row at the scaled pitch, as CSS. */
|
|
14
|
-
totalHeight: string;
|
|
15
|
-
/** Where the first mounted row sits, in design px. */
|
|
16
|
-
offsetY: number;
|
|
17
|
-
};
|
|
13
|
+
export declare const useVirtualScrolling: (data: Record<string, unknown>[], rowHeight: number, containerHeight: number, overscan?: number, headerRef?: React.RefObject<HTMLElement | null>) => {
|
|
14
|
+
visibleItems: VirtualWindow;
|
|
18
15
|
handleScroll: (e: React.UIEvent<HTMLDivElement>) => void;
|
|
19
16
|
};
|
|
20
17
|
export declare const useTableSelection: ({ columns, data, responsive, columnPriorities, selectedRows, rowKeyExtractor, onSelectionChange, }: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.hooks.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Table/Table.hooks.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE7E;;;;;;;;;;GAUG;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;;sBA2BV,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"}
|