material-react-table 0.4.9 → 0.5.2

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,31 +1,7 @@
 import React, { FC, Fragment } from 'react';
-import {
-  Alert as MuiAlert,
-  Chip,
-  Collapse,
-  styled,
-  useMediaQuery,
-} from '@mui/material';
+import { Alert, Box, Chip, Collapse, useMediaQuery } from '@mui/material';
 import { useMRT } from '../useMRT';
 
-const Alert = styled(MuiAlert, {
-  shouldForwardProp: (prop) =>
-    prop !== 'displayAbsolute' && prop !== 'toolbarPosition',
-})<{ displayAbsolute?: boolean; toolbarPosition?: 'top' | 'bottom' }>(
-  ({ displayAbsolute, toolbarPosition }) => ({
-    borderRadius: 0,
-    fontSize: '1rem',
-    left: 0,
-    marginLeft: !displayAbsolute ? '-0.5rem' : undefined,
-    padding: toolbarPosition === 'bottom' ? '0 1rem' : '0.5rem 1.25rem',
-    position: displayAbsolute ? 'absolute' : 'relative',
-    right: 0,
-    top: 0,
-    width: `calc(100% - ${displayAbsolute ? '2.5rem' : '1.5rem'})`,
-    zIndex: 2,
-  }),
-);
-
 interface Props {}
 
 export const MRT_ToolbarAlertBanner: FC<Props> = () => {
@@ -89,13 +65,27 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
       timeout={displayAbsolute ? 0 : 200}
     >
       <Alert
-        displayAbsolute={displayAbsolute}
-        icon={false}
         color="info"
+        icon={false}
+        sx={{
+          borderRadius: 0,
+          fontSize: '1rem',
+          left: 0,
+          p: 0,
+          position: displayAbsolute ? 'absolute' : 'relative',
+          right: 0,
+          minHeight: '3.5rem',
+          top: 0,
+          width: '100%',
+          zIndex: 2,
+          ...alertProps?.sx,
+        }}
         {...alertProps}
       >
-        {selectMessage}
-        {groupedByMessage}
+        <Box sx={{ p: '0.5rem 1rem' }}>
+          {selectMessage}
+          {groupedByMessage}
+        </Box>
       </Alert>
     </Collapse>
   );

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,28 +1,10 @@
 import React, { FC } from 'react';
-import { alpha, styled, Toolbar as MuiToolbar } from '@mui/material';
+import { alpha, Toolbar } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 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)})`,
-  bottom: fullScreen ? '0' : undefined,
-  display: 'flex',
-  justifyContent: 'space-between',
-  overflowY: 'hidden',
-  padding: '0 0.5rem !important',
-  position: fullScreen ? 'fixed' : undefined,
-  width: 'calc(100% - 1rem)',
-  zIndex: 1,
-}));
-
 interface Props {}
 
 export const MRT_ToolbarBottom: FC<Props> = () => {
@@ -31,7 +13,6 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
     manualPagination,
     muiTableToolbarBottomProps,
     positionPagination,
-    fullScreen,
     positionToolbarActions,
     positionToolbarAlertBanner,
     tableInstance,
@@ -43,7 +24,28 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
       : muiTableToolbarBottomProps;
 
   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)})`,
+          bottom: tableInstance.state.fullScreen ? '0' : undefined,
+          display: 'flex',
+          justifyContent: 'space-between',
+          overflowY: 'hidden',
+          p: '0 0.5rem !important',
+          position: tableInstance.state.fullScreen ? 'fixed' : undefined,
+          width: 'calc(100% - 1rem)',
+          zIndex: 1,
+          ...toolbarProps?.sx,
+        } as any)
+      }
+    >
       {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
         <MRT_ToolbarInternalButtons />
       ) : (

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,17 +1,11 @@
 import React, { FC } from 'react';
-import { styled } from '@mui/material';
-import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
+import { Box } from '@mui/material';
+import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
-import { useMRT } from '../useMRT';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
+import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
-import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
-
-const ToolbarButtonsContainer = styled('div')({
-  display: 'flex',
-  gap: '0.5rem',
-  alignItems: 'center',
-});
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
@@ -41,12 +35,19 @@ export const MRT_ToolbarInternalButtons: FC<Props> = () => {
   }
 
   return (
-    <ToolbarButtonsContainer>
+    <Box
+      sx={{
+        display: 'flex',
+        gap: '0.5rem',
+        alignItems: 'center',
+        p: '0 0.5rem',
+      }}
+    >
       {!disableGlobalFilter && <MRT_ToggleSearchButton />}
       {!disableFilters && <MRT_ToggleFiltersButton />}
       {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
       {!disableDensePaddingToggle && <MRT_ToggleDensePaddingButton />}
       {!disableFullScreenToggle && <MRT_FullScreenToggleButton />}
-    </ToolbarButtonsContainer>
+    </Box>
   );
 };

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> = () => {
@@ -45,7 +16,6 @@ export const MRT_ToolbarTop: FC<Props> = () => {
     muiTableToolbarTopProps,
     positionPagination,
     positionToolbarActions,
-    fullScreen,
     positionToolbarAlertBanner,
     renderToolbarCustomActions,
     tableInstance,
@@ -57,17 +27,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: tableInstance.state.fullScreen ? 'sticky' : undefined,
+          top: tableInstance.state.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/src/useMRT.tsx

@@ -27,9 +27,6 @@ import { MaterialReactTableProps } from './MaterialReactTable';
 export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
   anyRowsCanExpand: boolean;
   anyRowsExpanded: boolean;
-  currentEditingRow: MRT_Row<D> | null;
-  densePadding: boolean;
-  fullScreen: boolean;
   icons: MRT_Icons;
   localization: MRT_Localization;
   setCurrentEditingRow: (currentRowEditingId: MRT_Row<D> | null) => void;
@@ -37,8 +34,6 @@ export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
   setFullScreen: (fullScreen: boolean) => void;
   setShowFilters: (showFilters: boolean) => void;
   setShowSearch: (showSearch: boolean) => void;
-  showFilters: boolean;
-  showSearch: boolean;
   tableInstance: MRT_TableInstance<D>;
 };
 
@@ -61,18 +56,6 @@ export const MaterialReactTableProvider = <D extends {}>(
   if (props.enableColumnResizing)
     hooks.unshift(useResizeColumns, useFlexLayout);
 
-  const tableInstance = useTable<D>(props, ...hooks) as MRT_TableInstance<D>;
-
-  const anyRowsCanExpand = useMemo(
-    // @ts-ignore
-    () => tableInstance.rows.some((row: MRT_Row) => row.canExpand),
-    [tableInstance.rows],
-  );
-  const anyRowsExpanded = useMemo(
-    // @ts-ignore
-    () => tableInstance.rows.some((row: MRT_Row) => row.isExpanded),
-    [tableInstance.rows],
-  );
   const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row | null>(
     null,
   );
@@ -86,7 +69,44 @@ export const MaterialReactTableProvider = <D extends {}>(
     props.initialState?.showFilters ?? false,
   );
   const [showSearch, setShowSearch] = useState(
-    props.initialState?.showSearchTextField ?? false,
+    props.initialState?.showSearch ?? false,
+  );
+
+  const tableInstance = useTable<D>(
+    {
+      ...props,
+      useControlledState: (state) =>
+        useMemo(
+          () => ({
+            ...state,
+            currentEditingRow,
+            densePadding,
+            fullScreen,
+            showFilters,
+            showSearch,
+            //@ts-ignore
+            ...props?.useControlledState?.(state),
+          }),
+          [
+            currentEditingRow,
+            densePadding,
+            fullScreen,
+            showFilters,
+            showSearch,
+            state,
+          ],
+        ),
+    },
+    ...hooks,
+  ) as MRT_TableInstance<D>;
+
+  const anyRowsCanExpand = useMemo(
+    () => tableInstance.rows.some((row) => row.canExpand),
+    [tableInstance.rows],
+  );
+  const anyRowsExpanded = useMemo(
+    () => tableInstance.rows.some((row) => row.isExpanded),
+    [tableInstance.rows],
   );
 
   return (
@@ -95,16 +115,11 @@ export const MaterialReactTableProvider = <D extends {}>(
         ...props,
         anyRowsCanExpand,
         anyRowsExpanded,
-        currentEditingRow,
-        densePadding,
         setCurrentEditingRow,
         setDensePadding,
-        fullScreen,
         setFullScreen,
         setShowFilters,
         setShowSearch,
-        showFilters,
-        showSearch,
         //@ts-ignore
         tableInstance,
       }}

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',
-}));