material-react-table 0.40.1 → 0.40.4

package/dist/esm/menus/MRT_FilterOptionMenu.d.ts

@@ -4,7 +4,7 @@ import { MRT_Localization } from '../localization';
 export declare const mrtFilterOptions: (localization: MRT_Localization) => MRT_InternalFilterOption[];
 interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
-    header?: MRT_Header;
+    header?: MRT_Header<TData>;
     onSelect?: () => void;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance<TData>;

package/dist/esm/menus/MRT_RowActionMenu.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, MouseEvent } from 'react';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
-    handleEdit: () => void;
+    handleEdit: (event: MouseEvent) => void;
     row: MRT_Row;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance;

package/dist/index.d.ts

@@ -408,10 +408,12 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => TableCellProps);
-    renderColumnFilterModeMenuItems?: ({ table, column, }: {
-        table: MRT_TableInstance<TData>;
+    renderColumnFilterModeMenuItems?: ({ column, internalFilterOptions, onSelectFilterMode, table, }: {
         column: MRT_Column<TData>;
-    }) => ReactNode[];
+        internalFilterOptions: MRT_InternalFilterOption[];
+        onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     sortingFn?: MRT_SortingFn;
 };
 declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.40.1",
+  "version": "0.40.4",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -49,13 +49,13 @@
     "storybook": "start-storybook -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@faker-js/faker": "^7.4.0",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.10.1",
+    "@mui/icons-material": "^5.10.2",
+    "@mui/material": "^5.10.2",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",

package/src/MaterialReactTable.tsx

@@ -363,12 +363,16 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
         column: MRT_Column<TData>;
       }) => TableCellProps);
   renderColumnFilterModeMenuItems?: ({
-    table,
     column,
+    internalFilterOptions,
+    onSelectFilterMode,
+    table,
   }: {
-    table: MRT_TableInstance<TData>;
     column: MRT_Column<TData>;
-  }) => ReactNode[];
+    internalFilterOptions: MRT_InternalFilterOption[];
+    onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
   sortingFn?: MRT_SortingFn;
 };
 
@@ -920,7 +924,6 @@ export default <TData extends Record<string, any> = {}>({
     editingMode={editingMode}
     enableBottomToolbar={enableBottomToolbar}
     enableColumnActions={enableColumnActions}
-    enableColumnFilterModes={enableColumnFilterModes}
     enableColumnFilters={enableColumnFilters}
     enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
@@ -929,7 +932,6 @@ export default <TData extends Record<string, any> = {}>({
     enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
-    enableGlobalFilterModes={enableGlobalFilterModes}
     enableGlobalFilterRankedResults={enableGlobalFilterRankedResults}
     enableGrouping={enableGrouping}
     enableHiding={enableHiding}

package/src/buttons/MRT_CopyButton.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { MouseEvent, ReactNode, useState } from 'react';
 import { Button, Tooltip } from '@mui/material';
 import { MRT_Cell, MRT_TableInstance } from '..';
 
@@ -21,7 +21,8 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
 
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = (text: unknown) => {
+  const handleCopy = (event: MouseEvent, text: unknown) => {
+    event.stopPropagation();
     navigator.clipboard.writeText(text as string);
     setCopied(true);
     setTimeout(() => setCopied(false), 4000);
@@ -54,7 +55,7 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
       title={copied ? localization.copiedToClipboard : localization.clickToCopy}
     >
       <Button
-        onClick={() => handleCopy(cell.getValue())}
+        onClick={(e) => handleCopy(e, cell.getValue())}
         size="small"
         type="button"
         variant="text"

package/src/buttons/MRT_EditActionButtons.tsx

@@ -47,7 +47,10 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
   };
 
   return (
-    <Box sx={{ display: 'flex', gap: '0.75rem' }}>
+    <Box
+      onClick={(e) => e.stopPropagation()}
+      sx={{ display: 'flex', gap: '0.75rem' }}
+    >
       {variant === 'icon' ? (
         <>
           <Tooltip arrow title={localization.cancel}>

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
@@ -24,8 +24,10 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
       ? muiExpandButtonProps({ table, row })
       : muiExpandButtonProps;
 
-  const handleToggleExpand = () => {
+  const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
     row.toggleExpanded();
+    iconButtonProps?.onClick?.(event);
   };
 
   return (
@@ -39,8 +41,8 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
         <IconButton
           aria-label={localization.expand}
           disabled={!row.getCanExpand() && !renderDetailPanel}
-          onClick={handleToggleExpand}
           {...iconButtonProps}
+          onClick={handleToggleExpand}
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -37,6 +37,10 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
         onDragEnd={onDragEnd}
         size="small"
         {...iconButtonProps}
+        onClick={(e) => {
+          e.stopPropagation();
+          iconButtonProps?.onClick?.(e);
+        }}
         sx={(theme) => ({
           cursor: 'grab',
           m: 0,

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -16,12 +16,16 @@ const commonIconButtonStyles = {
 };
 
 interface Props {
-  cell: MRT_Cell
+  cell: MRT_Cell;
   row: MRT_Row;
   table: MRT_TableInstance;
 }
 
-export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ cell, row, table }) => {
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
+  cell,
+  row,
+  table,
+}) => {
   const {
     getState,
     options: {
@@ -45,7 +49,8 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ cell, row, table }) =
     setAnchorEl(event.currentTarget);
   };
 
-  const handleStartEditMode = () => {
+  const handleStartEditMode = (event: MouseEvent) => {
+    event.stopPropagation();
     setEditingRow({ ...row });
     setAnchorEl(null);
   };

package/src/inputs/MRT_EditCellTextField.tsx

@@ -2,7 +2,6 @@ import React, {
   ChangeEvent,
   FocusEvent,
   KeyboardEvent,
-  MouseEvent,
   useState,
 } from 'react';
 import { TextField, TextFieldProps } from '@mui/material';
@@ -101,11 +100,14 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
       label={showLabel ? column.columnDef.header : undefined}
       margin="none"
       name={column.id}
-      onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
       placeholder={columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}
+      onClick={(e) => {
+        e.stopPropagation();
+        textFieldProps?.onClick?.(e);
+      }}
       onBlur={handleBlur}
       onChange={handleChange}
       onKeyDown={handleEnterKeyDown}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -58,6 +58,10 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
         }
         size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}
+        onClick={(e) => {
+          e.stopPropagation();
+          checkboxProps?.onClick?.(e);
+        }}
         sx={(theme) => ({
           height: density === 'compact' ? '1.75rem' : '2.5rem',
           width: density === 'compact' ? '1.75rem' : '2.5rem',

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -99,7 +99,7 @@ export const mrtFilterOptions = (
 
 interface Props<TData extends Record<string, any> = {}> {
   anchorEl: HTMLElement | null;
-  header?: MRT_Header;
+  header?: MRT_Header<TData>;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   table: MRT_TableInstance<TData>;
@@ -177,8 +177,14 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         dense: density === 'compact',
       }}
     >
-      {(header && column
-        ? renderColumnFilterModeMenuItems?.({
+      {(header && column && columnDef
+        ? columnDef.renderColumnFilterModeMenuItems?.({
+            column: column as any,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          }) ??
+          renderColumnFilterModeMenuItems?.({
             column: column as any,
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { Box, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 import {
@@ -8,7 +8,7 @@ import {
 
 interface Props {
   anchorEl: HTMLElement | null;
-  handleEdit: () => void;
+  handleEdit: (event: MouseEvent) => void;
   row: MRT_Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   table: MRT_TableInstance;