import _extends from "@babel/runtime/helpers/esm/extends"; import * as React from 'react'; import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination'; import { styled } from '@mui/material/styles'; import { useGridSelector } from '../hooks/utils/useGridSelector'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector'; import { jsx as _jsx } from "react/jsx-runtime"; const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({ [`& .${tablePaginationClasses.selectLabel}`]: { display: 'none', [theme.breakpoints.up('sm')]: { display: 'block' } }, [`& .${tablePaginationClasses.input}`]: { display: 'none', [theme.breakpoints.up('sm')]: { display: 'inline-flex' } } })); export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const paginationState = useGridSelector(apiRef, gridPaginationSelector); const lastPage = React.useMemo(() => Math.floor(paginationState.rowCount / (paginationState.pageSize || 1)), [paginationState.rowCount, paginationState.pageSize]); const handlePageSizeChange = React.useCallback(event => { const newPageSize = Number(event.target.value); apiRef.current.setPageSize(newPageSize); }, [apiRef]); const handlePageChange = React.useCallback((event, page) => { apiRef.current.setPage(page); }, [apiRef]); if (process.env.NODE_ENV !== 'production') { // eslint-disable-next-line react-hooks/rules-of-hooks const warnedOnceMissingPageSizeInRowsPerPageOptions = React.useRef(false); if (!warnedOnceMissingPageSizeInRowsPerPageOptions.current && !rootProps.autoPageSize && !rootProps.rowsPerPageOptions.includes(rootProps.pageSize ?? paginationState.pageSize)) { console.warn([`MUI: The page size \`${rootProps.pageSize ?? paginationState.pageSize}\` is not preset in the \`rowsPerPageOptions\``, `Add it to show the pagination select.`].join('\n')); warnedOnceMissingPageSizeInRowsPerPageOptions.current = true; } } return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({ ref: ref, component: "div", count: paginationState.rowCount, page: paginationState.page <= lastPage ? paginationState.page : lastPage, rowsPerPageOptions: rootProps.rowsPerPageOptions?.includes(paginationState.pageSize) ? rootProps.rowsPerPageOptions : [], rowsPerPage: paginationState.pageSize, onPageChange: handlePageChange, onRowsPerPageChange: handlePageSizeChange }, apiRef.current.getLocaleText('MuiTablePagination'), props)); });