@navinc/base-react-components
Version:
Nav's Pattern Library
47 lines • 2.77 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
// @ts-expect-error -- mui doesn't support ESM
import { buttonBaseClasses } from '@mui/material/node/ButtonBase/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiPaginationPkg, { paginationClasses } from '@mui/material/node/Pagination/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiPaginationItemPkg, { paginationItemClasses } from '@mui/material/node/PaginationItem/index.js';
import { styled, useTheme } from 'styled-components';
import { useIsLargerThanPhone } from './use-media-query.js';
import { Icon } from './icon.js';
import { interopDefault } from '@navinc/utils';
const MuiPagination = interopDefault(muiPaginationPkg);
const MuiPaginationItem = interopDefault(muiPaginationItemPkg);
const UnstyledPagination = ({ 'data-testid': dataTestId = '', className, count, disabled, onChange, page, }) => {
const theme = useTheme();
const isDesktop = useIsLargerThanPhone();
return (_jsx(MuiPagination, { className: className, count: count, "data-testid": dataTestId ? `pagination ${dataTestId}` : 'pagination', disabled: disabled, onChange: onChange, page: page, shape: "rounded", siblingCount: isDesktop ? 1 : 0, sx: {
// centers the pagination
[`&.${paginationClasses.root}`]: {
display: 'flex',
justifyContent: 'center',
},
// pagination item style overrides
[`& .${paginationItemClasses.root}`]: {
borderRadius: '8px',
color: theme.navNeutral400,
fontFamily: theme.fontPrimary,
},
// selected pagination item button style overrides
[`& .${buttonBaseClasses.root}.${paginationItemClasses.selected}`]: {
backgroundColor: `${theme.navPrimary} !important`,
color: `${theme.navNeutralLight} !important`,
},
// disabled selected pagination item button style overrides
[`& .${buttonBaseClasses.root}.${paginationItemClasses.selected}.${paginationItemClasses.disabled}`]: {
opacity: 0.38,
},
}, renderItem: (item) => (_jsx(MuiPaginationItem, Object.assign({ slots: {
previous: () => _jsx(Icon, { name: "actions/carrot-left", size: "16" }),
next: () => _jsx(Icon, { name: "actions/carrot-right", size: "16" }),
} }, item))) }));
};
/**
* The `<Pagination />` component is a wrapper for [Material UI's Pagination component](https://mui.com/material-ui/react-pagination/).
*/
export const Pagination = styled(UnstyledPagination).withConfig({ displayName: "brc-sc-Pagination", componentId: "brc-sc-114fsjg" }) ``;
//# sourceMappingURL=pagination.js.map