Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 7x 7x 200x 200x 200x 200x | import React from "react";
import { Box, Pagination, TablePagination, useMediaQuery } from "@mui/material";
// EI-1178 — exported so the unit tests can drive the sx object directly
// (jsdom does not resolve MUI's className-generated styles, so we assert
// the source-of-truth object instead of computed styles).
//
// Root cause of the misalignment: the `.MuiTablePagination-select` override
// previously only set top/bottom padding (8px each), leaving the inner
// MUI-rendered <div class="MuiSelect-select"> as `display: block`. The
// "50" value text sat at the TOP of the padded box while MUI's absolutely-
// positioned chevron icon stayed centered, producing the reported visual
// misalignment.
//
// Fix: keep the paddings (so the click target stays the same size) and
// add `display: inline-flex` + `alignItems: center` + `lineHeight: 1` so
// the value text is vertically centered within the padded box.
export const COMBINED_PAGINATION_TABLE_SX = {
"& .MuiTablePagination-selectLabel": {
margin: 0,
},
"& .MuiTablePagination-displayedRows": {
margin: 0,
},
"& .MuiTablePagination-select": {
paddingTop: "8px",
paddingBottom: "8px",
display: "inline-flex",
alignItems: "center",
lineHeight: 1,
},
"& .MuiTablePagination-toolbar": {
minHeight: "52px",
paddingLeft: 0,
},
};
const CombinedPagination = ({ pagination, basicPage, tablePage }) => {
const isMobile = useMediaQuery("(max-width:900px)");
const { isPage: basicPageNumber, rowsPerPage: basicRowsPerPage, pageChange } = basicPage;
const { isPage: tablePageNumber, rowsPerPage: tableRowsPerPage, tablePageChange, tableRowsPageChange } = tablePage;
return (
<Box
id="combined-pagination"
sx={{
display: "flex",
flexDirection: isMobile ? "column" : "row",
alignItems: "center",
justifyContent: isMobile ? "center" : "space-around",
gap: isMobile ? 0.5 : 0,
mt: 2,
}}
>
<Box id="basic-pagination">
<Pagination
count={Math.ceil((pagination?.overAllEntries || 1) / (basicRowsPerPage || 1))}
page={(basicPageNumber || 0) + 1}
onChange={pageChange}
shape="rounded"
variant="outlined"
showFirstButton
showLastButton
size={isMobile ? "small" : "medium"}
siblingCount={isMobile ? 0 : 1}
boundaryCount={isMobile ? 1 : 1}
/>
</Box>
<Box id="table-pagination" sx={{ display: "flex", alignItems: "center" }}>
<TablePagination
component="div"
page={tablePageNumber || 0}
count={pagination?.overAllEntries || 0}
onPageChange={tablePageChange}
rowsPerPage={tableRowsPerPage || 1}
onRowsPerPageChange={tableRowsPageChange}
rowsPerPageOptions={[1, 5, 10, 25, 50]}
SelectProps={{
// EI-1178 — stable hook for the AIO E2E to target the
// dropdown's clickable surface regardless of MUI version.
id: "pagination-rows-per-page-select",
}}
sx={COMBINED_PAGINATION_TABLE_SX}
/>
</Box>
</Box>
);
};
export default CombinedPagination;
|