release v3.0.0 - mui v6 and keyboard navigation features

Author: KevinVandy

apps/material-react-table-docs/components/navigation/TopBar.tsx

@@ -102,7 +102,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
           sx={{
             display: 'flex',
             justifyContent: 'space-between',
-            p: '2px 4px',
+            p: '2px 8px',
           }}
           disableGutters
           variant="dense"

apps/material-react-table-docs/pages/changelog.mdx

@@ -33,6 +33,7 @@ import Head from 'next/head';
   - `renderCellActionMenuItems`
   - `renderColumnActionsMenuItems`
   - `renderColumnFilterModeMenuItems`
+- Fixed top pagination and searchbox sometimes overlapping
 
 See the entire [v3 migration guide](/docs/getting-started/migrating-to-v3) for more details.
 

apps/material-react-table-docs/pages/docs/guides/customize-components.mdx

@@ -134,6 +134,8 @@ Each `mui...Prop` has multiple options for you to add styling to the component.
 
 #### The SX Prop
 
+> NOTE: These docs are still written for the Emotion version of the `sx` prop. Pigment CSS docs will be added here later.
+
 The recommended way to style Material UI components in Material React Table will be the [`sx` prop](https://mui.com/system/basics/#the-sx-prop) throughout this docs site, as it is both the most simple and the most powerful way to style Material UI components as of Material UI V6. They can work and be as simple as a `style` prop, but behind the scenes, they work more like emotion styled-components by using `mui/system`.
 
 Don't worry, `className` and `style` props will still work, but let's show off some of the more elegant syntax you can use with the `sx` table option.

apps/material-react-table-docs/pages/index.tsx

@@ -7,6 +7,8 @@ import {
   Stack,
   Typography,
   Link as MuiLink,
+  Alert,
+  AlertTitle,
 } from '@mui/material';
 import { ArrowForwardIos } from '@mui/icons-material';
 import { HomeCards } from '../components/mdx/HomeCards';
@@ -24,6 +26,15 @@ const HomePage = () => {
   return (
     <>
       <Stack sx={{ maxWidth: '1200px', m: 'auto' }}>
+        <Alert severity="success" variant="outlined" sx={{}}>
+          <AlertTitle>
+            Material React Table V3 was released September 5th, 2024!
+          </AlertTitle>
+          <Typography>Upgrade to MRT V3 and Material UI V6 Today!</Typography>
+          <MuiLink href="/docs/getting-started/migrating-to-v3">
+            View the V3 Migration Guide here.
+          </MuiLink>
+        </Alert>
         <Typography
           sx={{
             textAlign: 'center',

packages/material-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0-rc.0",
+  "version": "3.0.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

packages/material-react-table/src/components/table/MRT_TablePaper.tsx

@@ -38,7 +38,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
   const theme = useTheme();
 
   return (
-    <FocusTrap open={isFullScreen}>
+    <FocusTrap disableEnforceFocus open={isFullScreen}>
       <Paper
         elevation={2}
         onKeyDown={(e) => e.key === 'Escape' && table.setIsFullScreen(false)}

packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx

@@ -49,7 +49,6 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   } = table;
   const {
     pagination: { pageIndex = 0, pageSize = 10 },
-    showGlobalFilter,
   } = getState();
 
   const paginationProps = {
@@ -95,9 +94,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
         justifyContent: { md: 'space-between', sm: 'center' },
         justifySelf: 'flex-end',
         mt:
-          position === 'top' &&
-          enableToolbarInternalActions &&
-          !showGlobalFilter
+          position === 'top' && enableToolbarInternalActions
             ? '3rem'
             : undefined,
         position: 'relative',

packages/material-react-table/src/locales/no.ts

@@ -93,5 +93,6 @@ export const MRT_Localization_NO: MRT_Localization = {
   unpinAll: 'Løsne alle',
 
   ungroupByColumn: 'Oppgrupper etter {column}',
-  selectedCountOfRowCountRowsSelected: '{selected} av {count} rader valgt',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} av {rowCount} rader valgt',
 };