add module to FilterOptionsMenu

add module to ShowHideColumnsMenu
remove isSubMenu from ShowHideColumnsMenu

Author: naughton

packages/mantine-react-table/src/menus/MRT_FilterOptionMenu.module.css

@@ -0,0 +1,6 @@
+.symbol {
+  font-size: var(--mantine-font-size-xl);
+  text-align: center;
+  width: 2ch;
+  transform: translateY(-0.1em);
+}

packages/mantine-react-table/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useMemo } from 'react';
-import { Flex, Menu } from '@mantine/core';
+import { Menu } from '@mantine/core';
 import {
   type MRT_FilterOption,
   type MRT_Header,
@@ -8,6 +8,8 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
+import classes from './MRT_FilterOptionMenu.module.css';
+
 export const mrtFilterOptions = (
   localization: MRT_Localization,
 ): MRT_InternalFilterOption[] => [
@@ -246,28 +248,10 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
                   handleSelectFilterMode(option as MRT_FilterOption)
                 }
                 color={option === filterOption ? 'blue' : undefined}
-                style={
-                  {
-                    // TODO: move to module
-                    // '& > .mantine-Menu-itemLabel': {
-                    //   display: 'flex',
-                    //   flexWrap: 'nowrap',
-                    //   gap: '1ch',
-                    // },
-                  }
-                }
                 value={option}
+                leftSection={<span className={classes.symbol}>{symbol}</span>}
               >
-                <Flex
-                  style={{
-                    fontSize: '20px',
-                    transform: 'translateY(-2px)',
-                    width: '2ch',
-                  }}
-                >
-                  {symbol}
-                </Flex>
-                <Flex align="center">{label}</Flex>
+                {label}
               </Menu.Item>
               {divider && <Menu.Divider />}
             </Fragment>

packages/mantine-react-table/src/menus/MRT_ShowHideColumnsMenu.module.css

@@ -0,0 +1,9 @@
+.root {
+  max-height: calc(80vh - 100px);
+  overflow-y: auto;
+  .content {
+    padding: 8px;
+    gap: 8px;
+    justify-content: space-between;
+  }
+}

packages/mantine-react-table/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,18 +1,20 @@
+import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 import { Button, Divider, Flex, Menu } from '@mantine/core';
+
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import { getDefaultColumnOrderIds } from '../column.utils';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
+import classes from './MRT_ShowHideColumnsMenu.module.css';
+
 interface Props<TData extends Record<string, any> = {}> {
-  isSubMenu?: boolean;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ShowHideColumnsMenu = <
   TData extends Record<string, any> = {},
 >({
-  isSubMenu,
   table,
 }: Props<TData>) => {
   const {
@@ -70,20 +72,9 @@ export const MRT_ShowHideColumnsMenu = <
   );
 
   return (
-    <Menu.Dropdown
-      style={{
-        maxHeight: 'calc(80vh - 100px)',
-        overflowY: 'auto',
-      }}
-    >
-      <Flex
-        style={{
-          justifyContent: isSubMenu ? 'center' : 'space-between',
-          padding: '8px',
-          gap: '8px',
-        }}
-      >
-        {!isSubMenu && enableHiding && (
+    <Menu.Dropdown className={clsx('mrt-show-hide-columns-menu', classes.root)}>
+      <Flex className={clsx(classes.content)}>
+        {enableHiding && (
           <Button
             disabled={!getIsSomeColumnsVisible()}
             onClick={hideAllColumns}
@@ -92,7 +83,7 @@ export const MRT_ShowHideColumnsMenu = <
             {localization.hideAll}
           </Button>
         )}
-        {!isSubMenu && enableColumnOrdering && (
+        {enableColumnOrdering && (
           <Button
             onClick={() =>
               table.setColumnOrder(
@@ -104,7 +95,7 @@ export const MRT_ShowHideColumnsMenu = <
             {localization.resetOrder}
           </Button>
         )}
-        {!isSubMenu && enablePinning && (
+        {enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
             onClick={() => table.resetColumnPinning(true)}
@@ -129,7 +120,6 @@ export const MRT_ShowHideColumnsMenu = <
           allColumns={allColumns}
           column={column}
           hoveredColumn={hoveredColumn}
-          isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
           setHoveredColumn={setHoveredColumn}
           table={table}

packages/mantine-react-table/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -26,7 +26,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>;
 }
@@ -38,7 +37,6 @@ export const MRT_ShowHideColumnsMenuItems = <
   hoveredColumn,
   setHoveredColumn,
   column,
-  isSubMenu,
   table,
 }: Props<TData>) => {
   const theme = useMantineTheme();
@@ -112,8 +110,7 @@ export const MRT_ShowHideColumnsMenuItems = <
         )}
       >
         <Box className={classes.menu}>
-          {!isSubMenu &&
-            columnDefType !== 'group' &&
+          {columnDefType !== 'group' &&
             enableColumnOrdering &&
             !allColumns.some(
               (col) => col.columnDef.columnDefType === 'group',
@@ -127,8 +124,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             ) : (
               <Box className={classes.grab} />
             ))}
-          {!isSubMenu &&
-            enablePinning &&
+          {enablePinning &&
             (column.getCanPin() ? (
               <MRT_ColumnPinningButtons column={column} table={table} />
             ) : (
@@ -142,7 +138,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             >
               <Switch
                 checked={switchChecked}
-                disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
+                disabled={!column.getCanHide()}
                 label={columnDef.header}
                 onChange={() => handleToggleColumnHidden(column)}
                 className={classes.switch}
@@ -158,7 +154,6 @@ export const MRT_ShowHideColumnsMenuItems = <
           allColumns={allColumns}
           column={c}
           hoveredColumn={hoveredColumn}
-          isSubMenu={isSubMenu}
           key={`${i}-${c.id}`}
           setHoveredColumn={setHoveredColumn}
           table={table}