material-react-table 0.4.8 → 0.5.1

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,40 +1,11 @@
 import React, { FC } from 'react';
-import { alpha, styled, Toolbar as MuiToolbar } from '@mui/material';
+import { alpha, Box, Toolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 import { useMRT } from '../useMRT';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
-const Toolbar = styled(MuiToolbar, {
-  shouldForwardProp: (prop) => prop !== 'fullScreen',
-})<{ fullScreen?: boolean }>(({ fullScreen, theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  backgroundImage: `linear-gradient(${alpha(
-    theme.palette.common.white,
-    0.05,
-  )},${alpha(theme.palette.common.white, 0.05)})`,
-  display: 'grid',
-  padding: '0 0.5rem !important',
-  position: fullScreen ? 'sticky' : undefined,
-  top: fullScreen ? '0' : undefined,
-  width: 'calc(100% - 1rem)',
-  zIndex: 1,
-}));
-
-const ToolbarTopRow = styled('div')({
-  padding: '0.5rem',
-  display: 'flex',
-  justifyContent: 'space-between',
-});
-
-const ToolbarActionsContainer = styled('div')({
-  display: 'flex',
-  gap: '0.5rem',
-  position: 'relative',
-  zIndex: 3,
-});
-
 interface Props {}
 
 export const MRT_ToolbarTop: FC<Props> = () => {
@@ -57,17 +28,49 @@ export const MRT_ToolbarTop: FC<Props> = () => {
       : muiTableToolbarTopProps;
 
   return (
-    <Toolbar fullScreen={fullScreen} variant="dense" {...toolbarProps}>
+    <Toolbar
+      variant="dense"
+      {...toolbarProps}
+      sx={(theme) =>
+        ({
+          backgroundColor: theme.palette.background.default,
+          backgroundImage: `linear-gradient(${alpha(
+            theme.palette.common.white,
+            0.05,
+          )},${alpha(theme.palette.common.white, 0.05)})`,
+          display: 'grid',
+          p: '0 !important',
+          position: fullScreen ? 'sticky' : undefined,
+          top: fullScreen ? '0' : undefined,
+          width: '100%',
+          zIndex: 1,
+          ...toolbarProps?.sx,
+        } as any)
+      }
+    >
       {positionToolbarAlertBanner === 'top' && <MRT_ToolbarAlertBanner />}
-      <ToolbarTopRow>
+      <Box
+        sx={{
+          p: '0.5rem',
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
         {renderToolbarCustomActions?.(tableInstance) ?? <span />}
-        <ToolbarActionsContainer>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: '0.5rem',
+            position: 'relative',
+            zIndex: 3,
+          }}
+        >
           {!disableGlobalFilter && <MRT_SearchTextField />}
           {!hideToolbarInternalActions && positionToolbarActions === 'top' && (
             <MRT_ToolbarInternalButtons />
           )}
-        </ToolbarActionsContainer>
-      </ToolbarTopRow>
+        </Box>
+      </Box>
       <div>
         {!manualPagination &&
           ['top', 'both'].includes(positionPagination ?? '') && (

package/dist/table/MRT_TableButtonCell.d.ts

@@ -1,3 +0,0 @@
-export declare const MRT_TableButtonCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    densePadding?: boolean | undefined;
-}, {}, {}>;

package/src/table/MRT_TableButtonCell.tsx

@@ -1,9 +0,0 @@
-import { styled, TableCell as MuiTableCell } from '@mui/material';
-
-export const MRT_TableButtonCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding',
-})<{ densePadding?: boolean }>(({ densePadding }) => ({
-  padding: densePadding ? '1px' : '0.6rem',
-  textAlign: 'center',
-  transition: 'all 0.2s ease-in-out',
-}));