material-react-table 0.5.6 → 0.5.7

package/dist/menus/MRT_ColumnActionMenu.d.ts

@@ -1,5 +1,9 @@
 import { FC } from 'react';
 import { MRT_HeaderGroup } from '..';
+export declare const commonMenuItemStyles: {
+    py: string;
+    my: string;
+};
 interface Props {
     anchorEl: HTMLElement | null;
     column: MRT_HeaderGroup;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.6",
+  "version": "0.5.7",
   "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.",
@@ -28,7 +28,7 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "tsdx build && size-limit",
+    "build": "tsdx build && size-limit && cp -r dist material-react-table-docs/node_modules/material-react-table/dist && cp -r src material-react-table-docs/node_modules/material-react-table/src && cp -r package.json material-react-table-docs/node_modules/material-react-table/package.json",
     "build-storybook": "build-storybook",
     "format": "prettier -w .",
     "lint": "tsdx lint",
@@ -36,8 +36,7 @@
     "size": "size-limit",
     "start": "tsdx watch",
     "storybook": "start-storybook -p 6006",
-    "test": "tsdx test --passWithNoTests",
-    "upgrade": "ncu -u && npm i"
+    "test": "tsdx test --passWithNoTests"
   },
   "husky": {
     "hooks": {

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -11,6 +11,7 @@ import {
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_ColumnInstance } from '..';
+import { commonMenuItemStyles } from '../menus/MRT_ColumnActionMenu';
 
 interface Props extends IconButtonProps {}
 
@@ -47,6 +48,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
           dense: tableInstance.state.densePadding,
           disablePadding: true,
         }}
+        sx={commonMenuItemStyles}
       >
         <Box
           sx={{

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -10,9 +10,9 @@ import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
 import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
 
-const commonMenuItemStyles = {
-  display: 'flex',
-  alignItems: 'center',
+export const commonMenuItemStyles = {
+  py: '0 !important',
+  my: '0 !important',
 };
 
 interface Props {
@@ -115,7 +115,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             <ListItemIcon>
               <ClearAllIcon />
             </ListItemIcon>
-            <ListItemText>
+            <ListItemText sx={commonMenuItemStyles}>
               {localization.columnActionMenuItemClearSort}
             </ListItemText>
           </MenuItem>,
@@ -128,7 +128,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             <ListItemIcon>
               <SortIcon />
             </ListItemIcon>
-            <ListItemText>
+            <ListItemText sx={commonMenuItemStyles}>
               {localization.columnActionMenuItemSortAsc?.replace(
                 '{column}',
                 String(column.Header),
@@ -147,7 +147,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             <ListItemIcon>
               <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
             </ListItemIcon>
-            <ListItemText>
+            <ListItemText sx={commonMenuItemStyles}>
               {localization.columnActionMenuItemSortDesc?.replace(
                 '{column}',
                 String(column.Header),
@@ -166,7 +166,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             <ListItemIcon>
               <FilterListIcon />
             </ListItemIcon>
-            <ListItemText>
+            <ListItemText sx={commonMenuItemStyles}>
               {localization.filterTextFieldPlaceholder?.replace(
                 '{column}',
                 String(column.Header),
@@ -200,7 +200,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             <ListItemIcon>
               <DynamicFeedIcon />
             </ListItemIcon>
-            <ListItemText>
+            <ListItemText sx={commonMenuItemStyles}>
               {localization[
                 column.isGrouped
                   ? 'columnActionMenuItemUnGroupBy'
@@ -214,7 +214,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           <ListItemIcon>
             <VisibilityOffIcon />
           </ListItemIcon>
-          <ListItemText>
+          <ListItemText sx={commonMenuItemStyles}>
             {localization.columnActionMenuItemHideColumn?.replace(
               '{column}',
               String(column.Header),

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -2,6 +2,8 @@ import React, { FC, useMemo } from 'react';
 import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_FilterType, MRT_HeaderGroup } from '..';
+import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -100,6 +102,7 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
           onClick={() => handleSelectFilterType(type)}
           selected={type === filterType}
           value={type}
+          sx={commonMenuItemStyles}
         >
           {label}
         </MenuItem>

package/src/menus/MRT_RowActionMenu.tsx

@@ -2,6 +2,8 @@ import React, { FC } from 'react';
 import { ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
+import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -35,11 +37,13 @@ export const MRT_RowActionMenu: FC<Props> = ({
       }}
     >
       {enableRowEditing && (
-        <MenuItem onClick={handleEdit}>
+        <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
           <ListItemIcon>
             <EditIcon />
           </ListItemIcon>
-          <ListItemText>{localization.rowActionMenuItemEdit}</ListItemText>
+          <ListItemText sx={commonMenuItemStyles}>
+            {localization.rowActionMenuItemEdit}
+          </ListItemText>
         </MenuItem>
       )}
       {renderRowActionMenuItems?.(row, tableInstance, () =>