material-react-table 1.10.0 → 1.11.1

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -5,7 +5,6 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
-import { MRT_ShowHideColumnsMenu } from './MRT_ShowHideColumnsMenu';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 export const commonMenuItemStyles = {
@@ -67,12 +66,11 @@ export const MRT_ColumnActionMenu = ({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { columnSizing, columnVisibility, density } = getState();
+  const { columnSizing, columnVisibility, density, showColumnFilters } =
+    getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
-  const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] =
-    useState<null | HTMLElement>(null);
 
   const handleClearSort = () => {
     column.clearSorting();
@@ -132,13 +130,6 @@ export const MRT_ColumnActionMenu = ({
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
-  const handleOpenShowHideColumnsMenu = (
-    event: React.MouseEvent<HTMLElement>,
-  ) => {
-    event.stopPropagation();
-    setShowHideColumnsMenuAnchorEl(event.currentTarget);
-  };
-
   const isSelectFilter = !!columnDef.filterSelectOptions;
 
   const allowedColumnFilterOptions =
@@ -238,9 +229,14 @@ export const MRT_ColumnActionMenu = ({
             </Box>
           </MenuItem>,
           <MenuItem
+            disabled={showColumnFilters && !enableColumnFilterModes}
             divider={enableGrouping || enableHiding}
             key={1}
-            onClick={handleFilterByColumn}
+            onClick={
+              showColumnFilters
+                ? handleOpenFilterModeMenu
+                : handleFilterByColumn
+            }
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
@@ -386,22 +382,7 @@ export const MRT_ColumnActionMenu = ({
               String(columnDef.header),
             )}
           </Box>
-          <IconButton
-            onClick={handleOpenShowHideColumnsMenu}
-            onMouseEnter={handleOpenShowHideColumnsMenu}
-            size="small"
-            sx={{ p: 0 }}
-          >
-            <ArrowRightIcon />
-          </IconButton>
         </MenuItem>,
-        <MRT_ShowHideColumnsMenu
-          anchorEl={showHideColumnsMenuAnchorEl}
-          isSubMenu
-          key={2}
-          setAnchorEl={setShowHideColumnsMenuAnchorEl}
-          table={table}
-        />,
       ]}
     </Menu>
   );

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -18,7 +18,6 @@ export const MRT_ShowHideColumnsMenu = <
   TData extends Record<string, any> = {},
 >({
   anchorEl,
-  isSubMenu,
   setAnchorEl,
   table,
 }: Props<TData>) => {
@@ -88,12 +87,12 @@ export const MRT_ShowHideColumnsMenu = <
       <Box
         sx={{
           display: 'flex',
-          justifyContent: isSubMenu ? 'center' : 'space-between',
+          justifyContent: 'space-between',
           p: '0.5rem',
           pt: 0,
         }}
       >
-        {!isSubMenu && enableHiding && (
+        {enableHiding && (
           <Button
             disabled={!getIsSomeColumnsVisible()}
             onClick={hideAllColumns}
@@ -101,7 +100,7 @@ export const MRT_ShowHideColumnsMenu = <
             {localization.hideAll}
           </Button>
         )}
-        {!isSubMenu && enableColumnOrdering && (
+        {enableColumnOrdering && (
           <Button
             onClick={() =>
               table.setColumnOrder(
@@ -112,7 +111,7 @@ export const MRT_ShowHideColumnsMenu = <
             {localization.resetOrder}
           </Button>
         )}
-        {!isSubMenu && enablePinning && (
+        {enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
             onClick={() => table.resetColumnPinning(true)}
@@ -135,7 +134,6 @@ export const MRT_ShowHideColumnsMenu = <
           allColumns={allColumns}
           column={column}
           hoveredColumn={hoveredColumn}
-          isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
           setHoveredColumn={setHoveredColumn}
           table={table}

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -20,7 +20,6 @@ interface Props<TData extends Record<string, any> = {}> {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
   hoveredColumn: MRT_Column<TData> | null;
-  isSubMenu?: boolean;
   setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
   table: MRT_TableInstance<TData>;
 }
@@ -32,7 +31,6 @@ export const MRT_ShowHideColumnsMenuItems = <
   hoveredColumn,
   setHoveredColumn,
   column,
-  isSubMenu,
   table,
 }: Props<TData>) => {
   const {
@@ -115,8 +113,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             gap: '8px',
           }}
         >
-          {!isSubMenu &&
-            columnDefType !== 'group' &&
+          {columnDefType !== 'group' &&
             enableColumnOrdering &&
             !allColumns.some(
               (col) => col.columnDef.columnDefType === 'group',
@@ -130,8 +127,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             ) : (
               <Box sx={{ width: '28px' }} />
             ))}
-          {!isSubMenu &&
-            enablePinning &&
+          {enablePinning &&
             (column.getCanPin() ? (
               <MRT_ColumnPinningButtons column={column} table={table} />
             ) : (
@@ -158,7 +154,7 @@ export const MRT_ShowHideColumnsMenuItems = <
                   <Switch />
                 </Tooltip>
               }
-              disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
+              disabled={!column.getCanHide()}
               label={columnDef.header}
               onChange={() => handleToggleColumnHidden(column)}
             />
@@ -174,7 +170,6 @@ export const MRT_ShowHideColumnsMenuItems = <
           allColumns={allColumns}
           column={c}
           hoveredColumn={hoveredColumn}
-          isSubMenu={isSubMenu}
           key={`${i}-${c.id}`}
           setHoveredColumn={setHoveredColumn}
           table={table}