material-react-table 0.6.1 → 0.6.4

package/dist/toolbar/MRT_LinearProgressBar.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_LinearProgressBar: FC<Props>;
+export {};

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -1,4 +1,15 @@
 import { FC } from 'react';
+import { Theme } from '@mui/material';
+import { MRT_TableInstance } from '..';
+export declare const commonToolbarStyles: (theme: Theme, tableInstance: MRT_TableInstance) => {
+    backgroundColor: string;
+    backgroundImage: string;
+    display: string;
+    opacity: number;
+    p: string;
+    width: string;
+    zIndex: number;
+};
 interface Props {
 }
 export declare const MRT_ToolbarTop: FC<Props>;

package/dist/useMRT.d.ts

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, PropsWithChildren, SetStateAction } from 'react';
 import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import { MRT_FILTER_TYPE } from './enums';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
@@ -8,6 +9,9 @@ export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     anyRowsExpanded: boolean;
     icons: MRT_Icons;
     idPrefix: string;
+    filterTypes: {
+        [key in MRT_FILTER_TYPE]: any;
+    };
     localization: MRT_Localization;
     setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
     setCurrentFilterTypes: Dispatch<SetStateAction<{

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { MRT_ColumnInterface } from '.';
+export declare const findLowestLevelCols: (columns: MRT_ColumnInterface[]) => MRT_ColumnInterface<{}>[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.1",
+  "version": "0.6.4",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -20,7 +20,7 @@ import {
   Column,
   ColumnInstance,
   FilterType,
-  // ColumnInterface,
+  ColumnInterface,
   HeaderGroup,
   Row,
   TableInstance,
@@ -78,6 +78,7 @@ import { MRT_TableContainer } from './table/MRT_TableContainer';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FILTER_TYPE } from './enums';
+import { defaultFilterFNs } from './filtersFNs';
 
 export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseExpandedOptions<D> &
@@ -89,7 +90,7 @@ export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseRowSelectOptions<D> &
   UseRowStateOptions<D> &
   UseSortByOptions<D> & {
-    columns: (Column<D> & MRT_ColumnInterface)[];
+    columns: MRT_ColumnInterface[];
     data: D[];
     initialState?: Partial<MRT_TableState>;
   };
@@ -106,66 +107,69 @@ export type MRT_TableInstance<D extends {} = {}> = TableInstance<D> &
   UseRowStateInstanceProps<D> &
   UseSortByInstanceProps<D> & {
     columns: (Column<D> & MRT_ColumnInstance<D>)[];
-    headerGroups: MRT_HeaderGroup<D>[];
     footerGroups: MRT_HeaderGroup<D>[];
-    state: MRT_TableState<D>;
-    rows: MRT_Row<D>[];
+    getToggleAllRowsExpandedProps: () => void;
+    headerGroups: MRT_HeaderGroup<D>[];
     page: MRT_Row<D>[];
     resetResizing: () => void;
-    getToggleAllRowsExpandedProps: () => void;
+    rows: MRT_Row<D>[];
+    state: MRT_TableState<D>;
   };
 
-export type MRT_ColumnInterface<D extends {} = {}> =
-  // ColumnInterface<D> &
+export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
   UseFiltersColumnOptions<D> &
-    UseGlobalFiltersColumnOptions<D> &
-    UseGroupByColumnOptions<D> &
-    UseResizeColumnsColumnOptions<D> &
-    UseSortByColumnOptions<D> & {
-      Edit?: ({
-        cell,
-        onChange,
-      }: {
-        cell: MRT_Cell<D>;
-        onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-      }) => ReactNode;
-      Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
-      Footer?: string;
-      Header?: string;
-      disableFilters?: boolean;
-      editable?: boolean;
-      filter?: MRT_FilterType | string | FilterType<D>;
-      filterSelectOptions?: (string | { text: string; value: string })[];
-      muiTableBodyCellEditTextFieldProps?:
-        | TextFieldProps
-        | ((cell: MRT_Cell<D>) => TextFieldProps);
-      muiTableBodyCellProps?:
-        | TableCellProps
-        | ((cell: MRT_Cell<D>) => TableCellProps);
-      muiTableFooterCellProps?:
-        | TableCellProps
-        | ((column: Column<D>) => TableCellProps);
-      muiTableHeadCellFilterTextFieldProps?:
-        | TextFieldProps
-        | ((column: Column<D>) => TextFieldProps);
-      muiTableHeadCellProps?:
-        | TableCellProps
-        | ((column: Column<D>) => TableCellProps);
-      onCellEditChange?: (
-        event: ChangeEvent<HTMLInputElement>,
-        cell: MRT_Cell<D>,
-      ) => void;
-      onFilterChange?: (
-        event: ChangeEvent<HTMLInputElement>,
-        filterValue: any,
-      ) => void;
-    };
+  UseGlobalFiltersColumnOptions<D> &
+  UseGroupByColumnOptions<D> &
+  UseResizeColumnsColumnOptions<D> &
+  UseSortByColumnOptions<D> & {
+    Edit?: ({
+      cell,
+      onChange,
+    }: {
+      cell: MRT_Cell<D>;
+      onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    }) => ReactNode;
+    Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
+    Footer?: string;
+    Header?: string;
+    accessor?: string;
+    columns?: MRT_ColumnInterface<D>[];
+    disableFilters?: boolean;
+    editable?: boolean;
+    filter?: MRT_FilterType | string | FilterType<D>;
+    filterSelectOptions?: (string | { text: string; value: string })[];
+    filterTypes?: (MRT_FILTER_TYPE | string)[];
+    muiTableBodyCellEditTextFieldProps?:
+      | TextFieldProps
+      | ((cell: MRT_Cell<D>) => TextFieldProps);
+    muiTableBodyCellProps?:
+      | TableCellProps
+      | ((cell: MRT_Cell<D>) => TableCellProps);
+    muiTableFooterCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    muiTableHeadCellFilterTextFieldProps?:
+      | TextFieldProps
+      | ((column: Column<D>) => TextFieldProps);
+    muiTableHeadCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    onCellEditChange?: (
+      event: ChangeEvent<HTMLInputElement>,
+      cell: MRT_Cell<D>,
+    ) => void;
+    onFilterChange?: (
+      event: ChangeEvent<HTMLInputElement>,
+      filterValue: any,
+    ) => void;
+  };
 
 export type MRT_ColumnInstance<D extends {} = {}> = ColumnInstance<D> &
   UseFiltersColumnProps<D> &
   UseGroupByColumnProps<D> &
   UseResizeColumnsColumnProps<D> &
-  UseSortByColumnProps<D> & {
+  UseSortByColumnProps<D> &
+  MRT_ColumnInterface<D> & {
     columns?: MRT_ColumnInstance<D>[];
   };
 
@@ -185,7 +189,9 @@ export type MRT_Row<D extends {} = {}> = Row<D> &
 
 export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
   UseGroupByCellProps<D> &
-  UseRowStateCellProps<D> & {};
+  UseRowStateCellProps<D> & {
+    column: MRT_ColumnInstance<D>;
+  };
 
 export type MRT_FilterType = MRT_FILTER_TYPE | Function;
 
@@ -232,6 +238,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     enableRowEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelection?: boolean;
+    filterTypes?: { [key in MRT_FILTER_TYPE]: any };
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
     hideToolbarBottom?: boolean;
@@ -360,8 +367,10 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     ) => ReactNode;
   };
 
-export default <D extends {}>({
+export default <D extends {} = {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
+  filterTypes,
+  globalFilter = 'fuzzy',
   icons,
   localization,
   positionActionsColumn = 'first',
@@ -371,7 +380,12 @@ export default <D extends {}>({
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
+    //@ts-ignore
     defaultColumn={defaultColumn}
+    //@ts-ignore
+    filterTypes={{ ...defaultFilterFNs, ...filterTypes }}
+    //@ts-ignore
+    globalFilter={globalFilter}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}

package/src/body/MRT_TableBody.tsx

@@ -28,7 +28,9 @@ export const MRT_TableBody: FC<Props> = () => {
   return (
     <TableBody
       {...tableBodyProps}
-      sx={{ overflowY: 'hidden', ...tableBodyProps?.sx }}
+      sx={{
+        ...tableBodyProps?.sx,
+      }}
     >
       {rows.map((row: MRT_Row) => {
         tableInstance.prepareRow(row);

package/src/filtersFNs.ts

@@ -1,31 +1,21 @@
 import { matchSorter } from 'match-sorter';
 import { MRT_Row } from '.';
 
-export const fuzzySearchFN = (
+export const fuzzy = (
   rows: MRT_Row[],
-  columnIds: string[],
+  columnIds: string[] | string,
   filterValue: string | number,
 ) =>
   matchSorter(rows, filterValue.toString().trim(), {
-    keys: columnIds.map((c) => `values.${c}`),
+    keys: Array.isArray(columnIds)
+      ? columnIds.map((c) => `values.${c}`)
+      : [`values.${columnIds}`],
     sorter: (rankedItems) => rankedItems,
   });
 
-fuzzySearchFN.autoRemove = (val: any) => !val;
+fuzzy.autoRemove = (val: any) => !val;
 
-export const fuzzyFilterFN = (
-  rows: MRT_Row[],
-  id: string,
-  filterValue: string | number,
-) =>
-  matchSorter(rows, filterValue.toString().trim(), {
-    keys: [`values.${id}`],
-    sorter: (rankedItems) => rankedItems,
-  });
-
-fuzzyFilterFN.autoRemove = (val: any) => !val;
-
-export const containsFilterFN = (
+export const contains = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -38,9 +28,9 @@ export const containsFilterFN = (
       .includes(filterValue.toString().toLowerCase().trim()),
   );
 
-containsFilterFN.autoRemove = (val: any) => !val;
+contains.autoRemove = (val: any) => !val;
 
-export const startsWithFilterFN = (
+export const startsWith = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -53,9 +43,9 @@ export const startsWithFilterFN = (
       .startsWith(filterValue.toString().toLowerCase().trim()),
   );
 
-startsWithFilterFN.autoRemove = (val: any) => !val;
+startsWith.autoRemove = (val: any) => !val;
 
-export const endsWithFilterFN = (
+export const endsWith = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -68,9 +58,9 @@ export const endsWithFilterFN = (
       .endsWith(filterValue.toString().toLowerCase().trim()),
   );
 
-endsWithFilterFN.autoRemove = (val: any) => !val;
+endsWith.autoRemove = (val: any) => !val;
 
-export const equalsFilterFN = (
+export const equals = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -81,9 +71,9 @@ export const equalsFilterFN = (
       filterValue.toString().toLowerCase().trim(),
   );
 
-equalsFilterFN.autoRemove = (val: any) => !val;
+equals.autoRemove = (val: any) => !val;
 
-export const notEqualsFilterFN = (
+export const notEquals = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -94,9 +84,9 @@ export const notEqualsFilterFN = (
       filterValue.toString().toLowerCase().trim(),
   );
 
-notEqualsFilterFN.autoRemove = (val: any) => !val;
+notEquals.autoRemove = (val: any) => !val;
 
-export const greaterThanFilterFN = (
+export const greaterThan = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -108,9 +98,9 @@ export const greaterThanFilterFN = (
         filterValue.toString().toLowerCase().trim(),
   );
 
-greaterThanFilterFN.autoRemove = (val: any) => !val;
+greaterThan.autoRemove = (val: any) => !val;
 
-export const lessThanFilterFN = (
+export const lessThan = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -122,34 +112,33 @@ export const lessThanFilterFN = (
         filterValue.toString().toLowerCase().trim(),
   );
 
-lessThanFilterFN.autoRemove = (val: any) => !val;
+lessThan.autoRemove = (val: any) => !val;
 
-export const emptyFilterFN = (
+export const empty = (
   rows: MRT_Row[],
   id: string,
   _filterValue: string | number,
 ) => rows.filter((row) => !row.values[id].toString().toLowerCase().trim());
 
-emptyFilterFN.autoRemove = (val: any) => !val;
+empty.autoRemove = (val: any) => !val;
 
-export const notEmptyFilterFN = (
+export const notEmpty = (
   rows: MRT_Row[],
   id: string,
   _filterValue: string | number,
 ) => rows.filter((row) => !!row.values[id].toString().toLowerCase().trim());
 
-notEmptyFilterFN.autoRemove = (val: any) => !val;
+notEmpty.autoRemove = (val: any) => !val;
 
 export const defaultFilterFNs = {
-  contains: containsFilterFN,
-  empty: emptyFilterFN,
-  endsWith: endsWithFilterFN,
-  equals: equalsFilterFN,
-  fuzzy: fuzzyFilterFN,
-  globalFuzzy: fuzzySearchFN,
-  greaterThan: greaterThanFilterFN,
-  lessThan: lessThanFilterFN,
-  notEmpty: notEmptyFilterFN,
-  notEquals: notEqualsFilterFN,
-  startsWith: startsWithFilterFN,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  lessThan,
+  notEmpty,
+  notEquals,
+  startsWith,
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -77,6 +77,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     return <>{column.Filter?.({ column })}</>;
   }
 
+  const filterId = `mrt-${idPrefix}-${column.id}-filter-text-field`;
   const filterType = tableInstance.state.currentFilterTypes[column.id];
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
@@ -98,7 +99,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     <>
       <TextField
         fullWidth
-        id={`mrt-${idPrefix}-${column.id}-filter-text-field`}
+        id={filterId}
         inputProps={{
           disabled: !!filterChipLabel,
           sx: {
@@ -108,17 +109,28 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           title: filterPlaceholder,
         }}
         helperText={
-          filterType instanceof Function
-            ? ''
-            : localization.filterMode.replace(
-                '{filterType}',
-                // @ts-ignore
-                localization[
-                  `filter${
-                    filterType.charAt(0).toUpperCase() + filterType.slice(1)
-                  }`
-                ],
-              )
+          <label htmlFor={filterId}>
+            {filterType instanceof Function
+              ? localization.filterMode.replace(
+                  '{filterType}',
+                  // @ts-ignore
+                  localization[
+                    `filter${
+                      filterType.name.charAt(0).toUpperCase() +
+                      filterType.name.slice(1)
+                    }`
+                  ] ?? '',
+                ) ?? ''
+              : localization.filterMode.replace(
+                  '{filterType}',
+                  // @ts-ignore
+                  localization[
+                    `filter${
+                      filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                    }`
+                  ],
+                )}
+          </label>
         }
         FormHelperTextProps={{
           sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },
@@ -149,6 +161,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
               <Tooltip arrow title={localization.changeFilterMode}>
                 <span>
                   <IconButton
+                    aria-label={localization.changeFilterMode}
                     onClick={handleFilterMenuOpen}
                     size="small"
                     sx={{ height: '1.75rem', width: '1.75rem' }}

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -102,15 +102,16 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleShowAllColumns = () => {
+    tableInstance.toggleHideAllColumns(false);
+    setAnchorEl(null);
+  };
+
   const handleOpenFilterModeMenu = (event: React.MouseEvent<HTMLElement>) => {
     event.stopPropagation();
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
-  const handleShowAllColumns = () => {
-    tableInstance.toggleHideAllColumns(false);
-  };
-
   const handleOpenShowHideColumnsMenu = (
     event: React.MouseEvent<HTMLElement>,
   ) => {

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -4,16 +4,16 @@ import { useMRT } from '../useMRT';
 import type { MRT_FilterType, MRT_HeaderGroup } from '..';
 import { MRT_FILTER_TYPE } from '../enums';
 import {
-  containsFilterFN,
-  emptyFilterFN,
-  endsWithFilterFN,
-  equalsFilterFN,
-  fuzzyFilterFN,
-  greaterThanFilterFN,
-  lessThanFilterFN,
-  notEmptyFilterFN,
-  notEqualsFilterFN,
-  startsWithFilterFN,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  lessThan,
+  notEmpty,
+  notEquals,
+  startsWith,
 } from '../filtersFNs';
 
 const commonMenuItemStyles = {
@@ -48,61 +48,61 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
         type: MRT_FILTER_TYPE.FUZZY,
         label: localization.filterFuzzy,
         divider: false,
-        fn: fuzzyFilterFN,
+        fn: fuzzy,
       },
       {
         type: MRT_FILTER_TYPE.CONTAINS,
         label: localization.filterContains,
         divider: true,
-        fn: containsFilterFN,
+        fn: contains,
       },
       {
         type: MRT_FILTER_TYPE.STARTS_WITH,
         label: localization.filterStartsWith,
         divider: false,
-        fn: startsWithFilterFN,
+        fn: startsWith,
       },
       {
         type: MRT_FILTER_TYPE.ENDS_WITH,
         label: localization.filterEndsWith,
         divider: true,
-        fn: endsWithFilterFN,
+        fn: endsWith,
       },
       {
         type: MRT_FILTER_TYPE.EQUALS,
         label: localization.filterEquals,
         divider: false,
-        fn: equalsFilterFN,
+        fn: equals,
       },
       {
         type: MRT_FILTER_TYPE.NOT_EQUALS,
         label: localization.filterNotEquals,
         divider: true,
-        fn: notEqualsFilterFN,
+        fn: notEquals,
       },
       {
         type: MRT_FILTER_TYPE.GREATER_THAN,
         label: localization.filterGreaterThan,
         divider: false,
-        fn: greaterThanFilterFN,
+        fn: greaterThan,
       },
       {
         type: MRT_FILTER_TYPE.LESS_THAN,
         label: localization.filterLessThan,
         divider: true,
-        fn: lessThanFilterFN,
+        fn: lessThan,
       },
       {
         type: MRT_FILTER_TYPE.EMPTY,
         label: localization.filterEmpty,
         divider: false,
-        fn: emptyFilterFN,
+        fn: empty,
       },
       {
         type: MRT_FILTER_TYPE.NOT_EMPTY,
         label: localization.filterNotEmpty,
         divider: false,
-        fn: notEmptyFilterFN,
+        fn: notEmpty,
       },
     ],
     [],

package/src/table/MRT_TableContainer.tsx

@@ -1,11 +1,5 @@
-import React, { FC, useEffect, useRef } from 'react';
-import {
-  LinearProgress,
-  Paper,
-  TableContainer,
-  Collapse,
-  Box,
-} from '@mui/material';
+import React, { FC, useEffect } from 'react';
+import { Paper, TableContainer, Box } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Table } from './MRT_Table';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
@@ -17,28 +11,17 @@ export const MRT_TableContainer: FC<Props> = () => {
   const {
     hideToolbarBottom,
     hideToolbarTop,
-    isFetching,
-    isLoading,
-    muiLinearProgressProps,
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
   const fullScreen = tableInstance.state.fullScreen;
-  const originalBodyOverflowStyle = useRef<string | undefined>();
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      originalBodyOverflowStyle.current = document?.body?.style?.overflow;
-    }
-  }, []);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
       if (fullScreen) {
         document.body.style.overflow = 'hidden';
       } else {
-        document.body.style.overflow =
-          originalBodyOverflowStyle.current ?? 'auto';
+        document.body.style.overflow = 'auto';
       }
     }
   }, [fullScreen]);
@@ -48,11 +31,6 @@ export const MRT_TableContainer: FC<Props> = () => {
       ? muiTableContainerProps(tableInstance)
       : muiTableContainerProps;
 
-  const linearProgressProps =
-    muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps(tableInstance)
-      : muiLinearProgressProps;
-
   return (
     <TableContainer
       component={Paper}
@@ -62,6 +40,7 @@ export const MRT_TableContainer: FC<Props> = () => {
         height: fullScreen ? '100%' : undefined,
         left: fullScreen ? '0' : undefined,
         m: fullScreen ? '0' : undefined,
+        overflowY: !fullScreen ? 'hidden' : undefined,
         position: fullScreen ? 'fixed' : undefined,
         right: fullScreen ? '0' : undefined,
         top: fullScreen ? '0' : undefined,
@@ -72,9 +51,6 @@ export const MRT_TableContainer: FC<Props> = () => {
       }}
     >
       {!hideToolbarTop && <MRT_ToolbarTop />}
-      <Collapse in={isFetching || isLoading} unmountOnExit>
-        <LinearProgress {...linearProgressProps} />
-      </Collapse>
       <Box
         sx={{
           maxWidth: '100%',