chore: update dependency for MUI

app/components/Table/Pagination.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import PaginationUnstyled from '@mui/base/TablePaginationUnstyled';
-import { Dropdown, Button } from '@button-inc/bcgov-theme';
-import styled from 'styled-components';
+import { IconButtonProps, TablePagination } from '@mui/material';
 
 interface Props {
   /**
@@ -25,51 +23,14 @@ export const DEFAULT_PAGE_SIZE = 20;
 
 const PAGE_SIZE_OPTIONS = [20, 50, 100];
 
-const paginationComponents = {
-  select: Dropdown,
-  toolbar: styled.div`
-    display: flex;
-    font-size: 0.8rem;
-    justify-content: flex-end;
-    align-items: baseline;
-    & > * {
-      margin-right: 0.5rem;
-    }
-  `,
-};
-
-const actionButtonProps = {
-  variant: 'secondary',
+const actionButtonProps: IconButtonProps = {
   size: 'small',
   style: {
     padding: '0.33rem 0.50rem',
     marginRight: '0.2rem',
   },
 };
 
-const paginationComponentsProps = {
-  actions: {
-    components: {
-      FirstButton: Button,
-      LastButton: Button,
-      NextButton: Button,
-      BackButton: Button,
-    },
-    componentsProps: {
-      firstButton: actionButtonProps,
-      lastButton: actionButtonProps,
-      nextButton: actionButtonProps,
-      backButton: actionButtonProps,
-    },
-    showFirstButton: true,
-    showLastButton: true,
-  },
-  select: {
-    size: 'small',
-    style: { width: '3.5rem' },
-  },
-};
-
 const FilterableTablePagination: React.FunctionComponent<Props> = ({
   totalCount,
   pageSize = DEFAULT_PAGE_SIZE,
@@ -96,17 +57,29 @@ const FilterableTablePagination: React.FunctionComponent<Props> = ({
       aria-disabled={disabled}
       className={disabled ? 'disabled' : ''}
     >
-      <PaginationUnstyled
-        component="div"
+      <TablePagination
+        rowsPerPageOptions={PAGE_SIZE_OPTIONS}
+        colSpan={3}
         count={totalCount}
-        page={activePage}
         rowsPerPage={pageSize}
-        rowsPerPageOptions={PAGE_SIZE_OPTIONS}
+        page={activePage}
+        labelRowsPerPage="Items per page:"
+        showFirstButton
+        showLastButton
+        slotProps={{
+          select: {
+            size: 'small',
+            style: { width: '3.5rem' },
+          },
+          actions: {
+            firstButton: actionButtonProps,
+            lastButton: actionButtonProps,
+            nextButton: actionButtonProps,
+            previousButton: actionButtonProps,
+          },
+        }}
         onPageChange={handlePageChange}
         onRowsPerPageChange={handlePageSizeChange}
-        labelRowsPerPage="Items per page:"
-        slots={paginationComponents}
-        slotProps={paginationComponentsProps as any}
       />
     </td>
   );

app/package.json

@@ -46,7 +46,7 @@
     "@growthbook/growthbook-react": "^0.9.0",
     "@mui/base": "^5.0.0-alpha.115",
     "@mui/icons-material": "^5.14.13",
-    "@mui/material": "^5.14.13",
+    "@mui/material": "^5.16.5",
     "@mui/x-date-pickers": "^6.16.2",
     "@rjsf/core": "^5.17.1",
     "@rjsf/utils": "^5.17.1",

app/tests/components/Table/Pagination.test.tsx

@@ -137,9 +137,13 @@ describe('PaginationBar', () => {
         </tfoot>
       </table>
     );
-    fireEvent.change(screen.getByLabelText(/items per page/i), {
-      target: { value: 50 },
+    const pageSizeSelect = screen.getByRole('combobox', {
+      name: /items per page/i,
     });
+    fireEvent.mouseDown(pageSizeSelect);
+
+    const pageSizeOption = screen.getByRole('option', { name: /50/i });
+    fireEvent.click(pageSizeOption);
 
     expect(handlePageSizeChange).toHaveBeenCalledWith(50);
   });