material-react-table 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -14,88 +14,88 @@ export const mrtFilterOptions = (
   localization: MRT_Localization,
 ): MRT_InternalFilterOption[] => [
   {
+    divider: false,
+    label: localization.filterFuzzy,
     option: 'fuzzy',
     symbol: '≈',
-    label: localization.filterFuzzy,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterContains,
     option: 'contains',
     symbol: '*',
-    label: localization.filterContains,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterStartsWith,
     option: 'startsWith',
     symbol: 'a',
-    label: localization.filterStartsWith,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterEndsWith,
     option: 'endsWith',
     symbol: 'z',
-    label: localization.filterEndsWith,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterEquals,
     option: 'equals',
     symbol: '=',
-    label: localization.filterEquals,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterNotEquals,
     option: 'notEquals',
     symbol: '≠',
-    label: localization.filterNotEquals,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterBetween,
     option: 'between',
     symbol: '⇿',
-    label: localization.filterBetween,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterBetweenInclusive,
     option: 'betweenInclusive',
     symbol: '⬌',
-    label: localization.filterBetweenInclusive,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterGreaterThan,
     option: 'greaterThan',
     symbol: '>',
-    label: localization.filterGreaterThan,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterGreaterThanOrEqualTo,
     option: 'greaterThanOrEqualTo',
     symbol: '≥',
-    label: localization.filterGreaterThanOrEqualTo,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterLessThan,
     option: 'lessThan',
     symbol: '<',
-    label: localization.filterLessThan,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterLessThanOrEqualTo,
     option: 'lessThanOrEqualTo',
     symbol: '≤',
-    label: localization.filterLessThanOrEqualTo,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterEmpty,
     option: 'empty',
     symbol: '∅',
-    label: localization.filterEmpty,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterNotEmpty,
     option: 'notEmpty',
     symbol: '!∅',
-    label: localization.filterNotEmpty,
-    divider: false,
   },
 ];
 
@@ -133,7 +133,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
     setColumnFilterFns,
     setGlobalFilterFn,
   } = table;
-  const { globalFilterFn, density } = getState();
+  const { density, globalFilterFn } = getState();
   const { column } = header ?? {};
   const { columnDef } = column ?? {};
   const currentFilterValue = column?.getFilterValue();
@@ -156,7 +156,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
             allowedColumnFilterOptions?.includes(filterOption.option)
           : (!globalFilterModeOptions ||
               globalFilterModeOptions.includes(filterOption.option)) &&
-            ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option),
+            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option),
       ),
     [],
   );
@@ -232,13 +232,13 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
-      onClose={() => setAnchorEl(null)}
-      open={!!anchorEl}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       {(header && column && columnDef
         ? columnDef.renderColumnFilterModeMenuItems?.({
@@ -259,7 +259,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
             table,
           })) ??
         internalFilterOptions.map(
-          ({ option, label, divider, symbol }, index) => (
+          ({ divider, label, option, symbol }, index) => (
             <MenuItem
               divider={divider}
               key={index}

package/src/menus/MRT_RowActionMenu.tsx

@@ -7,8 +7,8 @@ import {
   commonListItemStyles,
   commonMenuItemStyles,
 } from './MRT_ColumnActionMenu';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   anchorEl: HTMLElement | null;
@@ -28,8 +28,8 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
-      icons: { EditIcon },
       enableEditing,
+      icons: { EditIcon },
       localization,
       renderRowActionMenuItems,
     },
@@ -38,13 +38,13 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClick={(event) => event.stopPropagation()}
-      onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      onClick={(event) => event.stopPropagation()}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       {parseFromValuesOrFunc(enableEditing, row) && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
@@ -57,9 +57,9 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
         </MenuItem>
       )}
       {renderRowActionMenuItems?.({
+        closeMenu: () => setAnchorEl(null),
         row,
         table,
-        closeMenu: () => setAnchorEl(null),
       })}
     </Menu>
   );

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -29,15 +29,15 @@ export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
     getLeftLeafColumns,
     getRightLeafColumns,
     getState,
-    toggleAllColumnsVisible,
     options: {
       enableColumnOrdering,
-      enableHiding,
       enableColumnPinning,
+      enableHiding,
       localization,
     },
+    toggleAllColumnsVisible,
   } = table;
-  const { density, columnOrder, columnPinning } = getState();
+  const { columnOrder, columnPinning, density } = getState();
 
   const hideAllColumns = () => {
     getAllLeafColumns()
@@ -75,12 +75,12 @@ export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       <Box
         sx={{

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -28,17 +28,17 @@ export const MRT_ShowHideColumnsMenuItems = <
   TData extends Record<string, any>,
 >({
   allColumns,
+  column,
   hoveredColumn,
   setHoveredColumn,
-  column,
   table,
 }: Props<TData>) => {
   const {
     getState,
     options: {
       enableColumnOrdering,
-      enableHiding,
       enableColumnPinning,
+      enableHiding,
       localization,
     },
     setColumnOrder,
@@ -89,19 +89,19 @@ export const MRT_ShowHideColumnsMenuItems = <
     <>
       <MenuItem
         disableRipple
-        ref={menuItemRef as any}
         onDragEnter={handleDragEnter}
+        ref={menuItemRef as any}
         sx={(theme) => ({
           alignItems: 'center',
           justifyContent: 'flex-start',
           my: 0,
           opacity: isDragging ? 0.5 : 1,
-          outlineOffset: '-2px',
           outline: isDragging
             ? `2px dashed ${theme.palette.divider}`
             : hoveredColumn?.id === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : 'none',
+          outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',
         })}
@@ -135,6 +135,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             ))}
           {enableHiding ? (
             <FormControlLabel
+              checked={switchChecked}
               componentsProps={{
                 typography: {
                   sx: {
@@ -143,7 +144,6 @@ export const MRT_ShowHideColumnsMenuItems = <
                   },
                 },
               }}
-              checked={switchChecked}
               control={
                 <Tooltip
                   arrow

package/src/modals/MRT_EditRowModal.tsx

@@ -4,9 +4,9 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Stack from '@mui/material/Stack';
 import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   open: boolean;
@@ -21,15 +21,15 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
     getState,
     options: {
       localization,
-      onEditingRowCancel,
-      onCreatingRowCancel,
-      renderEditRowModalContent,
-      renderCreateRowModalContent,
       muiCreateRowModalProps,
       muiEditRowModalProps,
+      onCreatingRowCancel,
+      onEditingRowCancel,
+      renderCreateRowModalContent,
+      renderEditRowModalContent,
     },
-    setEditingRow,
     setCreatingRow,
+    setEditingRow,
   } = table;
   const { creatingRow, editingRow } = getState();
   const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
@@ -71,14 +71,14 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
     >
       {((creatingRow &&
         renderCreateRowModalContent?.({
+          internalEditComponents,
           row,
           table,
-          internalEditComponents,
         })) ||
         renderEditRowModalContent?.({
+          internalEditComponents,
           row,
           table,
-          internalEditComponents,
         })) ?? (
         <>
           <DialogTitle sx={{ textAlign: 'center' }}>

package/src/sortingFns.ts

@@ -1,4 +1,4 @@
-import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
+import { type RankingInfo, compareItems } from '@tanstack/match-sorter-utils';
 import { type Row, sortingFns } from '@tanstack/react-table';
 import { type MRT_Row } from './types';
 

package/src/table/MRT_Table.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useMemo } from 'react';
 import {
-  defaultRangeExtractor,
-  useVirtualizer,
   type Range,
   type Virtualizer,
+  defaultRangeExtractor,
+  useVirtualizer,
 } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
-import { MRT_TableHead } from '../head/MRT_TableHead';
-import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
-import { MRT_TableFooter } from '../footer/MRT_TableFooter';
+import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
 import { parseCSSVarId, parseFromValuesOrFunc } from '../column.utils';
+import { MRT_TableFooter } from '../footer/MRT_TableFooter';
+import { MRT_TableHead } from '../head/MRT_TableHead';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -26,9 +26,9 @@ export const MRT_Table = <TData extends Record<string, any>>({
       columnVirtualizerInstanceRef,
       columnVirtualizerOptions,
       columns,
+      enableColumnPinning,
       enableColumnResizing,
       enableColumnVirtualization,
-      enableColumnPinning,
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
@@ -147,6 +147,7 @@ export const MRT_Table = <TData extends Record<string, any>>({
       <Table
         stickyHeader={enableStickyHeader || isFullScreen}
         {...tableProps}
+        style={{ ...columnSizeVars, ...tableProps?.style }}
         sx={(theme) => ({
           borderCollapse: 'separate',
           display: layoutMode === 'grid' ? 'grid' : 'table',
@@ -154,7 +155,6 @@ export const MRT_Table = <TData extends Record<string, any>>({
             layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,
           ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
         })}
-        style={{ ...columnSizeVars, ...tableProps?.style }}
       >
         {enableTableHead && <MRT_TableHead {...props} />}
         {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (

package/src/table/MRT_TableContainer.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 import TableContainer from '@mui/material/TableContainer';
 import { MRT_Table } from './MRT_Table';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditRowModal } from '../modals';
 import { type MRT_TableInstance } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -23,9 +23,9 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
       enableStickyHeader,
       muiTableContainerProps,
     },
-    refs: { tableContainerRef, bottomToolbarRef, topToolbarRef },
+    refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
   } = table;
-  const { isFullScreen, creatingRow, editingRow } = getState();
+  const { creatingRow, editingRow, isFullScreen } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -62,20 +62,20 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
           }
         }
       }}
+      style={{
+        maxHeight: isFullScreen
+          ? `calc(100vh - ${totalToolbarHeight}px)`
+          : undefined,
+        ...tableContainerProps?.style,
+      }}
       sx={(theme) => ({
-        maxWidth: '100%',
         maxHeight: enableStickyHeader
           ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
           : undefined,
+        maxWidth: '100%',
         overflow: 'auto',
         ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
       })}
-      style={{
-        maxHeight: isFullScreen
-          ? `calc(100vh - ${totalToolbarHeight}px)`
-          : undefined,
-        ...tableContainerProps?.style,
-      }}
     >
       <MRT_Table table={table} />
       {(createModalOpen || editModalOpen) && (

package/src/table/MRT_TablePaper.tsx

@@ -1,9 +1,9 @@
 import Paper from '@mui/material/Paper';
-import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
-import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TableContainer } from './MRT_TableContainer';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
+import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -38,13 +38,7 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
           tablePaperProps.ref.current = ref;
         }
       }}
-      sx={(theme) => ({
-        overflow: 'hidden',
-        transition: 'all 100ms ease-in-out',
-        ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),
-      })}
       style={{
-        ...tablePaperProps?.style,
         ...(isFullScreen
           ? {
               bottom: 0,
@@ -61,7 +55,13 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
               zIndex: 10,
             }
           : {}),
+        ...tablePaperProps?.style,
       }}
+      sx={(theme) => ({
+        overflow: 'hidden',
+        transition: 'all 100ms ease-in-out',
+        ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),
+      })}
     >
       {enableTopToolbar &&
         (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -1,14 +1,14 @@
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { alpha } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
-import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_TopToolbar';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -98,8 +98,8 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
           }}
         >
           {enablePagination &&
-            ['bottom', 'both'].includes(positionPagination ?? '') && (
-              <MRT_TablePagination table={table} position="bottom" />
+            ['both', 'bottom'].includes(positionPagination ?? '') && (
+              <MRT_TablePagination position="bottom" table={table} />
             )}
         </Box>
       </Box>

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,7 +1,7 @@
 import Collapse from '@mui/material/Collapse';
 import LinearProgress from '@mui/material/LinearProgress';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   isTopToolbar: boolean;
@@ -13,8 +13,8 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
-    options: { muiLinearProgressProps },
     getState,
+    options: { muiLinearProgressProps },
   } = table;
   const { isLoading, showProgressBars } = getState();
 
@@ -27,17 +27,17 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
     <Collapse
       in={isLoading || showProgressBars}
       mountOnEnter
-      unmountOnExit
       sx={{
         bottom: isTopToolbar ? 0 : undefined,
         position: 'absolute',
         top: !isTopToolbar ? 0 : undefined,
         width: '100%',
       }}
+      unmountOnExit
     >
       <LinearProgress
-        aria-label="Loading"
         aria-busy="true"
+        aria-label="Loading"
         sx={{ position: 'relative' }}
         {...linearProgressProps}
       />

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,31 +1,31 @@
 import { type ChangeEvent } from 'react';
 import TablePagination from '@mui/material/TablePagination';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
-  position?: 'top' | 'bottom';
+  position?: 'bottom' | 'top';
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TablePagination = <TData extends Record<string, any>>({
-  table,
   position = 'bottom',
+  table,
 }: Props<TData>) => {
   const {
     getPrePaginationRowModel,
     getState,
-    setPageIndex,
-    setPageSize,
     options: {
-      muiTablePaginationProps,
       enableToolbarInternalActions,
       localization,
+      muiTablePaginationProps,
       rowCount,
     },
+    setPageIndex,
+    setPageSize,
   } = table;
   const {
-    pagination: { pageSize = 10, pageIndex = 0 },
+    pagination: { pageIndex = 0, pageSize = 10 },
     showGlobalFilter,
   } = getState();
 
@@ -53,7 +53,7 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
           ? localization.goToNextPage
           : localization.goToPreviousPage
       }
-      labelDisplayedRows={({ from, to, count }) =>
+      labelDisplayedRows={({ count, from, to }) =>
         `${from}-${to} ${localization.of} ${count}`
       }
       labelRowsPerPage={localization.rowsPerPage}
@@ -69,28 +69,28 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
       showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
       SelectProps={{
-        sx: { m: '0 1rem 0 1ch' },
         MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } },
+        sx: { m: '0 1rem 0 1ch' },
         ...tablePaginationProps?.SelectProps,
       }}
       sx={(theme) => ({
-        '& .MuiTablePagination-toolbar': {
-          display: 'flex',
-          alignItems: 'center',
-        },
-        '& .MuiTablePagination-selectLabel': {
-          m: '0 -1px',
-        },
-        '&. MuiInputBase-root': {
+        '& . MuiTablePagination-select': {
           m: '0 1px',
         },
-        '& . MuiTablePagination-select': {
+        '& .MuiTablePagination-actions': {
           m: '0 1px',
         },
         '& .MuiTablePagination-displayedRows': {
           m: '0 1px',
         },
-        '& .MuiTablePagination-actions': {
+        '& .MuiTablePagination-selectLabel': {
+          m: '0 -1px',
+        },
+        '& .MuiTablePagination-toolbar': {
+          alignItems: 'center',
+          display: 'flex',
+        },
+        '&. MuiInputBase-root': {
           m: '0 1px',
         },
         mt:

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -4,8 +4,8 @@ import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   stackAlertBanner: boolean;
@@ -22,8 +22,8 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
     getState,
     options: {
       localization,
-      muiToolbarAlertBannerProps,
       muiToolbarAlertBannerChipProps,
+      muiToolbarAlertBannerProps,
       positionToolbarAlertBanner,
       rowCount,
     },
@@ -81,13 +81,13 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
           borderRadius: 0,
           fontSize: '1rem',
           left: 0,
-          p: 0,
-          position: 'relative',
           mb: stackAlertBanner
             ? 0
             : positionToolbarAlertBanner === 'bottom'
             ? '-1rem'
             : undefined,
+          p: 0,
+          position: 'relative',
           right: 0,
           top: 0,
           width: '100%',