material-react-table 0.18.0 → 0.19.0

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -17,14 +17,14 @@ interface Props {
   allColumns: MRT_Column[];
   column: MRT_Column;
   isSubMenu?: boolean;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   allColumns,
   column,
   isSubMenu,
-  instance,
+  table,
 }) => {
   const {
     getState,
@@ -35,11 +35,10 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
       localization,
     },
     setColumnOrder,
-  } = instance;
-
+  } = table;
   const { columnOrder } = getState();
-
-  const { columnDef, columnDefType } = column;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
 
   const [, dropRef] = useDrop({
     accept: 'column',
@@ -94,11 +93,13 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
         >
           {columnDefType !== 'group' &&
             enableColumnOrdering &&
-            !allColumns.some((col) => col.columnDefType === 'group') &&
+            !allColumns.some(
+              (col) => col.columnDef.columnDefType === 'group',
+            ) &&
             (columnDef.enableColumnOrdering !== false ? (
               <MRT_GrabHandleButton
                 ref={dragRef as Ref<HTMLButtonElement>}
-                instance={instance}
+                table={table}
               />
             ) : (
               <Box sx={{ width: '28px' }} />
@@ -106,7 +107,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           {enablePinning &&
             !isSubMenu &&
             (column.getCanPin() ? (
-              <MRT_ColumnPinningButtons column={column} instance={instance} />
+              <MRT_ColumnPinningButtons column={column} table={table} />
             ) : (
               <Box sx={{ width: '70px' }} />
             ))}
@@ -152,7 +153,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           key={`${i}-${c.id}`}
           column={c}
           isSubMenu={isSubMenu}
-          instance={instance}
+          table={table}
         />
       ))}
     </>

package/src/sortingFns.ts

@@ -1,8 +1,12 @@
 import { compareItems, RankingInfo } from '@tanstack/match-sorter-utils';
 import { Row, sortingFns } from '@tanstack/react-table';
-import type { MRT_Row } from '.';
+import { MRT_Row } from '.';
 
-const fuzzy = (rowA: MRT_Row, rowB: MRT_Row, columnId: string) => {
+const fuzzy = <D extends Record<string, any> = {}>(
+  rowA: Row<D>,
+  rowB: Row<D>,
+  columnId: string,
+) => {
   let dir = 0;
   if (rowA.columnFiltersMeta[columnId]) {
     dir = compareItems(
@@ -17,9 +21,13 @@ const fuzzy = (rowA: MRT_Row, rowB: MRT_Row, columnId: string) => {
 };
 
 export const MRT_SortingFns = {
+  ...sortingFns,
   fuzzy,
 };
 
-export const rankGlobalFuzzy = (rowA: MRT_Row, rowB: MRT_Row) =>
+export const rankGlobalFuzzy = <D extends Record<string, any> = {}>(
+  rowA: MRT_Row<D>,
+  rowB: MRT_Row<D>,
+) =>
   Math.max(...Object.values(rowB.columnFiltersMeta).map((v: any) => v.rank)) -
   Math.max(...Object.values(rowA.columnFiltersMeta).map((v: any) => v.rank));

package/src/table/MRT_Table.tsx

@@ -7,10 +7,10 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   tableContainerRef: RefObject<HTMLDivElement>;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_Table: FC<Props> = ({ tableContainerRef, instance }) => {
+export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
   const {
     getState,
     options: {
@@ -21,13 +21,12 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, instance }) => {
       enableTableHead,
       muiTableProps,
     },
-  } = instance;
-
+  } = table;
   const { isFullScreen } = getState();
 
   const tableProps =
     muiTableProps instanceof Function
-      ? muiTableProps({ instance })
+      ? muiTableProps({ table })
       : muiTableProps;
 
   return (
@@ -42,12 +41,9 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, instance }) => {
         ...tableProps?.sx,
       }}
     >
-      {enableTableHead && <MRT_TableHead instance={instance} />}
-      <MRT_TableBody
-        tableContainerRef={tableContainerRef}
-        instance={instance}
-      />
-      {enableTableFooter && <MRT_TableFooter instance={instance} />}
+      {enableTableHead && <MRT_TableHead table={table} />}
+      <MRT_TableBody tableContainerRef={tableContainerRef} table={table} />
+      {enableTableFooter && <MRT_TableFooter table={table} />}
     </Table>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -7,10 +7,10 @@ const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableContainer: FC<Props> = ({ instance }) => {
+export const MRT_TableContainer: FC<Props> = ({ table }) => {
   const {
     getState,
     options: {
@@ -19,15 +19,14 @@ export const MRT_TableContainer: FC<Props> = ({ instance }) => {
       muiTableContainerProps,
       tableId,
     },
-  } = instance;
-
+  } = table;
   const { isFullScreen } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
   const tableContainerProps =
     muiTableContainerProps instanceof Function
-      ? muiTableContainerProps({ instance })
+      ? muiTableContainerProps({ table })
       : muiTableContainerProps;
 
   useIsomorphicLayoutEffect(() => {
@@ -68,7 +67,7 @@ export const MRT_TableContainer: FC<Props> = ({ instance }) => {
         ...tableContainerProps?.style,
       }}
     >
-      <MRT_Table tableContainerRef={tableContainerRef} instance={instance} />
+      <MRT_Table tableContainerRef={tableContainerRef} table={table} />
     </TableContainer>
   );
 };

package/src/table/MRT_TablePaper.tsx

@@ -8,15 +8,14 @@ import { MRT_TableContainer } from './MRT_TableContainer';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TablePaper: FC<Props> = ({ instance }) => {
+export const MRT_TablePaper: FC<Props> = ({ table }) => {
   const {
     getState,
     options: { enableToolbarBottom, enableToolbarTop, muiTablePaperProps },
-  } = instance;
-
+  } = table;
   const { isFullScreen } = getState();
 
   useEffect(() => {
@@ -31,7 +30,7 @@ export const MRT_TablePaper: FC<Props> = ({ instance }) => {
 
   const tablePaperProps =
     muiTablePaperProps instanceof Function
-      ? muiTablePaperProps({ instance })
+      ? muiTablePaperProps({ table })
       : muiTablePaperProps;
 
   return (
@@ -53,9 +52,9 @@ export const MRT_TablePaper: FC<Props> = ({ instance }) => {
           width: isFullScreen ? '100vw' : undefined,
         }}
       >
-        {enableToolbarTop && <MRT_ToolbarTop instance={instance} />}
-        <MRT_TableContainer instance={instance} />
-        {enableToolbarBottom && <MRT_ToolbarBottom instance={instance} />}
+        {enableToolbarTop && <MRT_ToolbarTop table={table} />}
+        <MRT_TableContainer table={table} />
+        {enableToolbarBottom && <MRT_ToolbarBottom table={table} />}
       </Paper>
     </DndProvider>
   );

package/src/table/MRT_TableRoot.tsx

@@ -1,11 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
-  FilterFn,
-  ReactTableGenerics,
-  Table,
   TableState,
-  createTable,
-  filterFns,
   getCoreRowModel,
   getExpandedRowModel,
   getFacetedRowModel,
@@ -13,14 +8,12 @@ import {
   getGroupedRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  useTableInstance,
-  sortingFns,
+  useReactTable,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
   MRT_ColumnDef,
-  MRT_FilterFn,
-  MRT_FILTER_OPTION,
+  MRT_FilterOption,
   MRT_Row,
   MRT_TableInstance,
   MRT_TableState,
@@ -33,14 +26,11 @@ import { MaterialReactTableProps } from '../MaterialReactTable';
 import { MRT_TablePaper } from './MRT_TablePaper';
 import { Box, Dialog, Grow } from '@mui/material';
 import {
-  createDataColumn,
-  createDisplayColumn,
-  createGroup,
+  prepareColumns,
   getAllLeafColumnDefs,
   getDefaultColumnOrderIds,
 } from '../utils';
 import { MRT_FilterFns } from '../filtersFns';
-import { MRT_SortingFns } from '../sortingFns';
 
 export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   props: MaterialReactTableProps<D>,
@@ -84,125 +74,114 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   );
 
   const [currentFilterFns, setCurrentFilterFns] = useState<{
-    [key: string]: MRT_FilterFn;
+    [key: string]: MRT_FilterOption;
   }>(() =>
     Object.assign(
       {},
-      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map((c) => ({
-        [c.id as string]:
-          c.filterFn ??
-          initialState?.currentFilterFns?.[c.id] ??
-          (!!c.filterSelectOptions?.length ? 'equals' : 'fuzzy'),
-      })),
+      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef<D>[]).map(
+        (col) => ({
+          [col.id?.toString() ?? col.accessorKey?.toString() ?? '']:
+            col.filterFn instanceof Function
+              ? col.filterFn.name ?? 'custom'
+              : col.filterFn ??
+                initialState?.currentFilterFns?.[
+                  col.id?.toString() ?? col.accessorKey?.toString() ?? ''
+                ] ??
+                (!!col.filterSelectOptions?.length ? 'equals' : 'fuzzy'),
+        }),
+      ),
     ),
   );
 
-  const [currentGlobalFilterFn, setCurrentGlobalFilterFn] = useState<
-    MRT_FILTER_OPTION | FilterFn<ReactTableGenerics> | string | number | symbol
-  >(props.globalFilterFn ?? 'fuzzy');
+  const [currentGlobalFilterFn, setCurrentGlobalFilterFn] =
+    useState<MRT_FilterOption>(
+      props.globalFilterFn instanceof String
+        ? (props.globalFilterFn as MRT_FilterOption)
+        : 'fuzzy',
+    );
 
-  const table = useMemo(
+  const displayColumns = useMemo(
     () =>
-      // @ts-ignore
-      createTable().setOptions({
-        filterFns: { ...filterFns, ...MRT_FilterFns, ...props.filterFns },
-        getCoreRowModel: getCoreRowModel(),
-        getExpandedRowModel: getExpandedRowModel(),
-        getFacetedRowModel: getFacetedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getGroupedRowModel: getGroupedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        sortingFns: { ...sortingFns, ...MRT_SortingFns, ...props.sortingFns },
-      }) as Table<D>,
-    [],
+      (
+        [
+          columnOrder.includes('mrt-row-actions') && {
+            Cell: ({ cell }) => (
+              <MRT_ToggleRowActionMenuButton
+                row={cell.row as any}
+                table={table}
+              />
+            ),
+            columnDefType: 'display',
+            header: props.localization?.actions,
+            id: 'mrt-row-actions',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
+            size: 70,
+          },
+          columnOrder.includes('mrt-expand') && {
+            Cell: ({ cell }) => (
+              <MRT_ExpandButton row={cell.row as any} table={table} />
+            ),
+            Header: () =>
+              props.enableExpandAll ? (
+                <MRT_ExpandAllButton table={table} />
+              ) : null,
+            columnDefType: 'display',
+            header: props.localization?.expand,
+            id: 'mrt-expand',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
+            size: 60,
+          },
+          columnOrder.includes('mrt-select') && {
+            Cell: ({ cell }) => (
+              <MRT_SelectCheckbox row={cell.row as any} table={table} />
+            ),
+            Header: () =>
+              props.enableSelectAll ? (
+                <MRT_SelectCheckbox selectAll table={table} />
+              ) : null,
+            columnDefType: 'display',
+            header: props.localization?.select,
+            id: 'mrt-select',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
+            size: 60,
+          },
+          columnOrder.includes('mrt-row-numbers') && {
+            Cell: ({ cell }) => cell.row.index + 1,
+            Header: () => props.localization?.rowNumber,
+            columnDefType: 'display',
+            header: props.localization?.rowNumbers,
+            id: 'mrt-row-numbers',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
+            size: 60,
+          },
+        ] as MRT_ColumnDef<D>[]
+      ).filter(Boolean),
+    [
+      columnOrder,
+      props.editingMode,
+      props.enableEditing,
+      props.enableExpandAll,
+      props.enableExpanding,
+      props.enableGrouping,
+      props.enableRowActions,
+      props.enableRowNumbers,
+      props.enableRowSelection,
+      props.enableSelectAll,
+      props.localization,
+      props.muiTableBodyCellProps,
+      props.muiTableHeadCellProps,
+      props.positionActionsColumn,
+    ],
   );
 
-  const displayColumns = useMemo(() => {
-    return [
-      columnOrder.includes('mrt-row-actions') &&
-        createDisplayColumn(table, {
-          Cell: ({ cell }) => (
-            <MRT_ToggleRowActionMenuButton
-              row={cell.row as any}
-              instance={instance}
-            />
-          ),
-          header: props.localization?.actions,
-          id: 'mrt-row-actions',
-          muiTableBodyCellProps: props.muiTableBodyCellProps,
-          muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 70,
-        }),
-      columnOrder.includes('mrt-expand') &&
-        createDisplayColumn(table, {
-          Cell: ({ cell }) => (
-            <MRT_ExpandButton row={cell.row as any} instance={instance} />
-          ),
-          Header: () =>
-            props.enableExpandAll ? (
-              <MRT_ExpandAllButton instance={instance} />
-            ) : null,
-          header: props.localization?.expand,
-          id: 'mrt-expand',
-          muiTableBodyCellProps: props.muiTableBodyCellProps,
-          muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 60,
-        }),
-      columnOrder.includes('mrt-select') &&
-        createDisplayColumn(table, {
-          Cell: ({ cell }) => (
-            <MRT_SelectCheckbox row={cell.row as any} instance={instance} />
-          ),
-          Header: () =>
-            props.enableSelectAll ? (
-              <MRT_SelectCheckbox selectAll instance={instance} />
-            ) : null,
-          header: props.localization?.select,
-          id: 'mrt-select',
-          muiTableBodyCellProps: props.muiTableBodyCellProps,
-          muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 60,
-        }),
-      columnOrder.includes('mrt-row-numbers') &&
-        createDisplayColumn(table, {
-          Cell: ({ cell }) => cell.row.index + 1,
-          Header: () => props.localization?.rowNumber,
-          header: props.localization?.rowNumbers,
-          id: 'mrt-row-numbers',
-          muiTableBodyCellProps: props.muiTableBodyCellProps,
-          muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 60,
-        }),
-    ].filter(Boolean) as MRT_ColumnDef<D>[];
-  }, [
-    columnOrder,
-    props.editingMode,
-    props.enableEditing,
-    props.enableExpandAll,
-    props.enableExpanding,
-    props.enableGrouping,
-    props.enableRowActions,
-    props.enableRowNumbers,
-    props.enableRowSelection,
-    props.enableSelectAll,
-    props.localization,
-    props.muiTableBodyCellProps,
-    props.muiTableHeadCellProps,
-    props.positionActionsColumn,
-    table,
-  ]);
-
-  const columns = useMemo(
-    () => [
-      ...displayColumns,
-      ...props.columns.map((column) =>
-        column.columns
-          ? createGroup(table, column as any, currentFilterFns)
-          : createDataColumn(table, column as any, currentFilterFns),
-      ),
-    ],
-    [table, props.columns, currentFilterFns],
+  const columnDefs = useMemo(
+    () =>
+      prepareColumns([...displayColumns, ...props.columns], currentFilterFns),
+    [currentFilterFns, displayColumns, props.columns],
   );
 
   const data: D[] = useMemo(
@@ -213,8 +192,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             Object.assign(
               {},
               ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(
-                (c) => ({
-                  [c.id]: null,
+                (col) => ({
+                  [col.id ?? col.accessorKey ?? '']: null,
                 }),
               ),
             ),
@@ -224,17 +203,24 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   );
 
   //@ts-ignore
-  const instance = {
-    //@ts-ignore
-    ...useTableInstance(table, {
+  const table = {
+    ...useReactTable({
+      getCoreRowModel: getCoreRowModel(),
+      getExpandedRowModel: getExpandedRowModel(),
+      getFacetedRowModel: getFacetedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getGroupedRowModel: getGroupedRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
       onColumnOrderChange: setColumnOrder,
       ...props,
       //@ts-ignore
-      columns,
+      columns: columnDefs,
       data,
-      getSubRows: (row) => (row as MRT_Row)?.subRows,
+      getSubRows: (row) => row?.subRows,
       //@ts-ignore
-      globalFilterFn: currentGlobalFilterFn,
+      globalFilterFn:
+        MRT_FilterFns[currentGlobalFilterFn] ?? MRT_FilterFns.fuzzy,
       initialState,
       state: {
         columnOrder,
@@ -277,9 +263,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         open={isFullScreen}
         transitionDuration={400}
       >
-        <MRT_TablePaper instance={instance} />
+        <MRT_TablePaper table={table} />
       </Dialog>
-      {!isFullScreen && <MRT_TablePaper instance={instance} />}
+      {!isFullScreen && <MRT_TablePaper table={table} />}
     </>
   );
 };

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -4,20 +4,19 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   alignTo: 'bottom' | 'top';
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_LinearProgressBar: FC<Props> = ({ alignTo, instance }) => {
+export const MRT_LinearProgressBar: FC<Props> = ({ alignTo, table }) => {
   const {
     options: { muiLinearProgressProps },
     getState,
-  } = instance;
-
+  } = table;
   const { isLoading, showProgressBars } = getState();
 
   const linearProgressProps =
     muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps({ instance })
+      ? muiLinearProgressProps({ table })
       : muiLinearProgressProps;
 
   return (

package/src/toolbar/MRT_TablePagination.tsx

@@ -3,11 +3,11 @@ import { TablePagination } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
   position: 'top' | 'bottom';
 }
 
-export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
+export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
   const {
     getPrePaginationRowModel,
     getState,
@@ -18,26 +18,24 @@ export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
       enableToolbarInternalActions,
       rowCount,
     },
-  } = instance;
-
+  } = table;
   const {
     pagination: { pageSize = 10, pageIndex = 0 },
     showGlobalFilter,
   } = getState();
 
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const showFirstLastPageButtons = totalRowCount / pageSize > 2;
+
   const tablePaginationProps =
     muiTablePaginationProps instanceof Function
-      ? muiTablePaginationProps({ instance })
+      ? muiTablePaginationProps({ table })
       : muiTablePaginationProps;
 
   const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
     setPageSize(+event.target.value);
   };
 
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
-
-  const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-
   return (
     <TablePagination
       SelectProps={{

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,28 +1,27 @@
 import React, { FC, Fragment } from 'react';
-import { Alert, Box, Chip, Collapse } from '@mui/material';
+import { Alert, AlertTitle, Box, Chip, Collapse } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
   stackAlertBanner?: boolean;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_ToolbarAlertBanner: FC<Props> = ({
   stackAlertBanner,
-  instance,
+  table,
 }) => {
   const {
     getPrePaginationRowModel,
     getSelectedRowModel,
     getState,
     options: { localization, muiTableToolbarAlertBannerProps },
-  } = instance;
-
+  } = table;
   const { grouping, showAlertBanner } = getState();
 
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
-      ? muiTableToolbarAlertBannerProps({ instance })
+      ? muiTableToolbarAlertBannerProps({ table })
       : muiTableToolbarAlertBannerProps;
 
   const selectMessage =
@@ -47,8 +46,8 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
             {index > 0 ? localization.thenBy : ''}
             <Chip
               color="secondary"
-              label={instance.getColumn(columnId).columnDef.header}
-              onDelete={() => instance.getColumn(columnId).toggleGrouping()}
+              label={table.getColumn(columnId).columnDef.header}
+              onDelete={() => table.getColumn(columnId).toggleGrouping()}
             />
           </Fragment>
         ))}
@@ -63,6 +62,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
       <Alert
         color="info"
         icon={false}
+        {...alertProps}
         sx={{
           borderRadius: 0,
           fontSize: '1rem',
@@ -75,9 +75,13 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
           zIndex: 2,
           ...alertProps?.sx,
         }}
-        {...alertProps}
       >
+        {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
         <Box sx={{ p: '0.5rem 1rem' }}>
+          {alertProps?.children}
+          {alertProps?.children && (selectMessage || groupedByMessage) && (
+            <br />
+          )}
           {selectMessage}
           {selectMessage && groupedByMessage && <br />}
           {groupedByMessage}