@cutting/material-react-table 5.0.0-beta.2 → 5.1.0

package/src/components/menus/MRT_ActionMenuItem.tsx

@@ -1,16 +1,12 @@
-import { Box } from '@mui/material';
-import { IconButton } from '@mui/material';
-import { ListItemIcon } from '@mui/material';
-import { MenuItem, type MenuItemProps } from '@mui/material';
-import { type ReactNode } from 'react';
+import { Box, IconButton, ListItemIcon, MenuItem, type MenuItemProps } from '@mui/material';
+import { type MouseEventHandler, type ReactNode } from 'react';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-export interface MRT_ActionMenuItemProps<TData extends MRT_RowData>
-  extends MenuItemProps {
+export interface MRT_ActionMenuItemProps<TData extends MRT_RowData> extends MenuItemProps {
   icon: ReactNode;
   label: string;
-  onOpenSubMenu?: MenuItemProps['onClick'] | MenuItemProps['onMouseEnter'];
+  onOpenSubMenu?: MouseEventHandler<HTMLElement>;
   table: MRT_TableInstance<TData>;
 }
 
@@ -20,7 +16,7 @@ export const MRT_ActionMenuItem = <TData extends MRT_RowData>({
   onOpenSubMenu,
   table,
   ...rest
-}: MRT_ActionMenuItemProps<TData>) => {
+}: MRT_ActionMenuItemProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { ArrowRightIcon },
@@ -49,12 +45,7 @@ export const MRT_ActionMenuItem = <TData extends MRT_RowData>({
         {label}
       </Box>
       {onOpenSubMenu && (
-        <IconButton
-          onClick={onOpenSubMenu as any}
-          onMouseEnter={onOpenSubMenu as any}
-          size="small"
-          sx={{ p: 0 }}
-        >
+        <IconButton onClick={onOpenSubMenu} onMouseEnter={onOpenSubMenu} size="small" sx={{ p: 0 }}>
           <ArrowRightIcon />
         </IconButton>
       )}

package/src/components/menus/MRT_CellActionMenu.tsx

@@ -5,15 +5,14 @@ import { openEditingCell } from '../../utils/cell.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 
-export interface MRT_CellActionMenuProps<TData extends MRT_RowData>
-  extends Partial<MenuProps> {
+export interface MRT_CellActionMenuProps<TData extends MRT_RowData> extends Partial<MenuProps> {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_CellActionMenu = <TData extends MRT_RowData>({
   table,
   ...rest
-}: MRT_CellActionMenuProps<TData>) => {
+}: MRT_CellActionMenuProps<TData>): JSX.Element | false => {
   const {
     options: {
       editDisplayMode,
@@ -32,16 +31,15 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
   const { column } = cell;
   const { columnDef } = column;
 
-  const handleClose = (event?: any) => {
-    event?.stopPropagation();
+  const handleClose = (event?: { stopPropagation?: () => void }) => {
+    event?.stopPropagation?.();
     table.setActionCell(null);
     actionCellRef.current = null;
   };
 
   const internalMenuItems = [
     (parseFromValuesOrFunc(enableClickToCopy, cell) === 'context-menu' ||
-      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
-        'context-menu') && (
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === 'context-menu') && (
       <MRT_ActionMenuItem
         icon={<ContentCopy />}
         key={'mrt-copy'}
@@ -78,8 +76,7 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
   };
 
   const menuItems =
-    columnDef.renderCellActionMenuItems?.(renderActionProps) ??
-    renderCellActionMenuItems?.(renderActionProps);
+    columnDef.renderCellActionMenuItems?.(renderActionProps) ?? renderCellActionMenuItems?.(renderActionProps);
 
   return (
     (!!menuItems?.length || !!internalMenuItems?.length) && (

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -1,17 +1,12 @@
 import { Menu, type MenuProps } from '@mui/material';
 import { type MouseEvent, useState } from 'react';
 
-import {
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getColumnFilterInfo } from '../../utils/column.utils';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 
-export interface MRT_ColumnActionMenuProps<TData extends MRT_RowData>
-  extends Partial<MenuProps> {
+export interface MRT_ColumnActionMenuProps<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header: MRT_Header<TData>;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
@@ -24,7 +19,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   setAnchorEl,
   table,
   ...rest
-}: MRT_ColumnActionMenuProps<TData>) => {
+}: MRT_ColumnActionMenuProps<TData>): JSX.Element => {
   const {
     getAllLeafColumns,
     options: {
@@ -60,12 +55,10 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { columnSizing, columnVisibility, density, showColumnFilters } =
-    table.state;
+  const { columnSizing, columnVisibility, density, showColumnFilters } = table.state;
   const columnFilterValue = column.getFilterValue();
 
-  const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
-    useState<HTMLElement | null>(null);
+  const [filterMenuAnchorEl, setFilterMenuAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleClearSort = () => {
     column.clearSorting();
@@ -100,7 +93,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
 
   const handleGroupByColumn = () => {
     column.toggleGrouping();
-    setColumnOrder((old: any) => ['mrt-row-expand', ...old]);
+    setColumnOrder((old) => ['mrt-row-expand', ...old]);
     setAnchorEl(null);
   };
 
@@ -135,15 +128,13 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
 
   const isSelectFilter = !!columnDef.filterSelectOptions;
 
-  const { allowedColumnFilterOptions, currentFilterOption } =
-    getColumnFilterInfo({ header, table });
+  const { allowedColumnFilterOptions, currentFilterOption } = getColumnFilterInfo({ header, table });
 
   const showFilterModeSubMenu =
     enableColumnFilterModes &&
     columnDef.enableColumnFilterModes !== false &&
     !isSelectFilter &&
-    (allowedColumnFilterOptions === undefined ||
-      !!allowedColumnFilterOptions?.length);
+    (allowedColumnFilterOptions === undefined || !!allowedColumnFilterOptions?.length);
 
   const internalColumnMenuItems = [
     ...(enableSorting && column.getCanSort()
@@ -160,14 +151,9 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
           ),
           <MRT_ActionMenuItem
             disabled={column.getIsSorted() === 'asc'}
-            icon={
-              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
-            }
+            icon={<SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />}
             key={1}
-            label={localization.sortByColumnAsc?.replace(
-              '{column}',
-              String(columnDef.header),
-            )}
+            label={localization.sortByColumnAsc?.replace('{column}', String(columnDef.header))}
             onClick={handleSortAsc}
             table={table}
           />,
@@ -176,10 +162,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
             divider={enableColumnFilters || enableGrouping || enableHiding}
             icon={<SortIcon />}
             key={2}
-            label={localization.sortByColumnDesc?.replace(
-              '{column}',
-              String(columnDef.header),
-            )}
+            label={localization.sortByColumnDesc?.replace('{column}', String(columnDef.header))}
             onClick={handleSortDesc}
             table={table}
           />,
@@ -190,8 +173,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
           <MRT_ActionMenuItem
             disabled={
               !columnFilterValue ||
-              (Array.isArray(columnFilterValue) &&
-                !columnFilterValue.filter((value) => value).length)
+              (Array.isArray(columnFilterValue) && !columnFilterValue.filter((value) => value).length)
             }
             icon={<FilterListOffIcon />}
             key={3}
@@ -205,18 +187,9 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
               divider={enableGrouping || enableHiding}
               icon={<FilterListIcon />}
               key={4}
-              label={localization.filterByColumn?.replace(
-                '{column}',
-                String(columnDef.header),
-              )}
-              onClick={
-                showColumnFilters
-                  ? handleOpenFilterModeMenu
-                  : handleFilterByColumn
-              }
-              onOpenSubMenu={
-                showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined
-              }
+              label={localization.filterByColumn?.replace('{column}', String(columnDef.header))}
+              onClick={showColumnFilters ? handleOpenFilterModeMenu : handleFilterByColumn}
+              onOpenSubMenu={showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined}
               table={table}
             />
           ),
@@ -238,9 +211,10 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
             divider={enableColumnPinning}
             icon={<DynamicFeedIcon />}
             key={6}
-            label={localization[
-              column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
-            ]?.replace('{column}', String(columnDef.header))}
+            label={localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
             onClick={handleGroupByColumn}
             table={table}
           />,
@@ -293,24 +267,15 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
             disabled={!column.getCanHide()}
             icon={<VisibilityOffIcon />}
             key={11}
-            label={localization.hideColumn?.replace(
-              '{column}',
-              String(columnDef.header),
-            )}
+            label={localization.hideColumn?.replace('{column}', String(columnDef.header))}
             onClick={handleHideColumn}
             table={table}
           />,
           <MRT_ActionMenuItem
-            disabled={
-              !Object.values(columnVisibility).filter((visible) => !visible)
-                .length
-            }
+            disabled={!Object.values(columnVisibility).filter((visible) => !visible).length}
             icon={<ViewColumnIcon />}
             key={12}
-            label={localization.showAllColumns?.replace(
-              '{column}',
-              String(columnDef.header),
-            )}
+            label={localization.showAllColumns?.replace('{column}', String(columnDef.header))}
             onClick={handleShowAllColumns}
             table={table}
           />,

package/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -1,5 +1,5 @@
 import { Menu, type MenuProps } from '@mui/material';
-import { useMemo } from 'react';
+import { useState } from 'react';
 
 import {
   type MRT_FilterOption,
@@ -11,9 +11,7 @@ import {
 } from '../../types';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 
-export const mrtFilterOptions = (
-  localization: MRT_Localization,
-): MRT_InternalFilterOption[] => [
+export const mrtFilterOptions = (localization: MRT_Localization): MRT_InternalFilterOption[] => [
   {
     divider: false,
     label: localization.filterFuzzy,
@@ -105,12 +103,12 @@ const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
 const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
 
-export interface MRT_FilterOptionMenuProps<TData extends MRT_RowData>
-  extends Partial<MenuProps> {
+export interface MRT_FilterOptionMenuProps<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header<TData>;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  // oxlint-disable-next-line typescript/no-explicit-any
   setFilterValue?: (filterValue: any) => void;
   table: MRT_TableInstance<TData>;
 }
@@ -123,7 +121,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   setFilterValue,
   table,
   ...rest
-}: MRT_FilterOptionMenuProps<TData>) => {
+}: MRT_FilterOptionMenuProps<TData>): JSX.Element => {
   const {
     options: {
       columnFilterModeOptions,
@@ -141,27 +139,21 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   const { columnDef } = column ?? {};
   const currentFilterValue = column?.getFilterValue();
 
-  let allowedColumnFilterOptions =
-    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+  let allowedColumnFilterOptions = columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   if (rangeVariants.includes(columnDef?.filterVariant as string)) {
-    allowedColumnFilterOptions = [
-      ...rangeModes,
-      ...(allowedColumnFilterOptions ?? []),
-    ].filter((option) => rangeModes.includes(option));
+    allowedColumnFilterOptions = [...rangeModes, ...(allowedColumnFilterOptions ?? [])].filter((option) =>
+      rangeModes.includes(option),
+    );
   }
 
-  const internalFilterOptions = useMemo(
-    () =>
-      mrtFilterOptions(localization).filter((filterOption) =>
-        columnDef
-          ? allowedColumnFilterOptions === undefined ||
-            allowedColumnFilterOptions?.includes(filterOption.option)
-          : (!globalFilterModeOptions ||
-              globalFilterModeOptions.includes(filterOption.option)) &&
-            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option),
-      ),
-    [],
+  const [internalFilterOptions] = useState(() =>
+    mrtFilterOptions(localization).filter((filterOption) =>
+      columnDef
+        ? allowedColumnFilterOptions === undefined || allowedColumnFilterOptions?.includes(filterOption.option)
+        : (!globalFilterModeOptions || globalFilterModeOptions.includes(filterOption.option)) &&
+          ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option),
+    ),
   );
 
   const handleSelectFilterMode = (option: MRT_FilterOption) => {
@@ -171,7 +163,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
       setGlobalFilterFn(option);
     } else if (option !== prevFilterMode) {
       // column filter mode
-      setColumnFilterFns((prev: { [key: string]: any }) => ({
+      setColumnFilterFns((prev) => ({
         ...prev,
         [header.id]: option,
       }));
@@ -179,37 +171,24 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
       // reset filter value and/or perform new filter render
       if (emptyModes.includes(option)) {
         // will now be empty/notEmpty filter mode
-        if (
-          currentFilterValue !== ' ' &&
-          !emptyModes.includes(prevFilterMode)
-        ) {
+        if (currentFilterValue !== ' ' && !emptyModes.includes(prevFilterMode)) {
           column.setFilterValue(' ');
         } else if (currentFilterValue) {
           column.setFilterValue(currentFilterValue); // perform new filter render
         }
-      } else if (
-        columnDef?.filterVariant === 'multi-select' ||
-        arrModes.includes(option as string)
-      ) {
+      } else if (columnDef?.filterVariant === 'multi-select' || arrModes.includes(option as string)) {
         // will now be array filter mode
-        if (
-          currentFilterValue instanceof String ||
-          (currentFilterValue as Array<any>)?.length
-        ) {
+        if (currentFilterValue instanceof String || (currentFilterValue as Array<unknown>)?.length) {
           column.setFilterValue([]);
           setFilterValue?.([]);
         } else if (currentFilterValue) {
           column.setFilterValue(currentFilterValue); // perform new filter render
         }
-      } else if (
-        columnDef?.filterVariant?.includes('range') ||
-        rangeModes.includes(option as MRT_FilterOption)
-      ) {
+      } else if (columnDef?.filterVariant?.includes('range') || rangeModes.includes(option as MRT_FilterOption)) {
         // will now be range filter mode
         if (
           !Array.isArray(currentFilterValue) ||
-          (!(currentFilterValue as Array<any>)?.every((v) => v === '') &&
-            !rangeModes.includes(prevFilterMode))
+          (!(currentFilterValue as Array<unknown>)?.every((v) => v === '') && !rangeModes.includes(prevFilterMode))
         ) {
           column.setFilterValue(['', '']);
           setFilterValue?.('');
@@ -221,10 +200,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
         if (Array.isArray(currentFilterValue)) {
           column.setFilterValue('');
           setFilterValue?.('');
-        } else if (
-          currentFilterValue === ' ' &&
-          emptyModes.includes(prevFilterMode)
-        ) {
+        } else if (currentFilterValue === ' ' && emptyModes.includes(prevFilterMode)) {
           column.setFilterValue(undefined);
         } else {
           column.setFilterValue(currentFilterValue); // perform new filter render
@@ -235,8 +211,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
     onSelect?.();
   };
 
-  const filterOption =
-    !!header && columnDef ? columnDef._filterFn : globalFilterFn;
+  const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
 
   return (
     <Menu
@@ -257,13 +232,13 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
     >
       {(header && column && columnDef
         ? (columnDef.renderColumnFilterModeMenuItems?.({
-            column: column as any,
+            column,
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
             table,
           }) ??
           renderColumnFilterModeMenuItems?.({
-            column: column as any,
+            column,
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
             table,
@@ -273,20 +248,18 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
             onSelectFilterMode: handleSelectFilterMode,
             table,
           })) ??
-        internalFilterOptions.map(
-          ({ divider, label, option, symbol }, index) => (
-            <MRT_ActionMenuItem
-              divider={divider}
-              icon={symbol}
-              key={index}
-              label={label}
-              onClick={() => handleSelectFilterMode(option as MRT_FilterOption)}
-              selected={option === filterOption}
-              table={table}
-              value={option}
-            />
-          ),
-        )}
+        internalFilterOptions.map(({ divider, label, option, symbol }, index) => (
+          <MRT_ActionMenuItem
+            divider={divider}
+            icon={symbol}
+            key={index}
+            label={label}
+            onClick={() => handleSelectFilterMode(option as MRT_FilterOption)}
+            selected={option === filterOption}
+            table={table}
+            value={option}
+          />
+        ))}
     </Menu>
   );
 };

package/src/components/menus/MRT_RowActionMenu.tsx

@@ -1,16 +1,11 @@
 import { Menu, type MenuProps } from '@mui/material';
 import { type MouseEvent, type ReactNode, useMemo } from 'react';
 
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 
-export interface MRT_RowActionMenuProps<TData extends MRT_RowData>
-  extends Partial<MenuProps> {
+export interface MRT_RowActionMenuProps<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   handleEdit: (event: MouseEvent) => void;
   row: MRT_Row<TData>;
@@ -27,7 +22,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   ...rest
-}: MRT_RowActionMenuProps<TData>) => {
+}: MRT_RowActionMenuProps<TData>): JSX.Element | null => {
   const {
     options: {
       editDisplayMode,
@@ -42,28 +37,44 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
 
   const menuItems = useMemo(() => {
     const items: ReactNode[] = [];
-    const editItem = parseFromValuesOrFunc(enableEditing, row) &&
-      ['modal', 'row'].includes(editDisplayMode!) && (
-        <MRT_ActionMenuItem
-          icon={<EditIcon />}
-          key={'edit'}
-          label={localization.edit}
-          onClick={handleEdit}
-          table={table}
-        />
-      );
-    if (editItem) items.push(editItem);
+    const editItem = parseFromValuesOrFunc(enableEditing, row) && ['modal', 'row'].includes(editDisplayMode!) && (
+      <MRT_ActionMenuItem
+        icon={<EditIcon />}
+        key={'edit'}
+        label={localization.edit}
+        onClick={handleEdit}
+        table={table}
+      />
+    );
+    if (editItem) {
+      items.push(editItem);
+    }
     const rowActionMenuItems = renderRowActionMenuItems?.({
       closeMenu: () => setAnchorEl(null),
       row,
       staticRowIndex,
       table,
     });
-    if (rowActionMenuItems?.length) items.push(...rowActionMenuItems);
+    if (rowActionMenuItems?.length) {
+      items.push(...rowActionMenuItems);
+    }
     return items;
-  }, [renderRowActionMenuItems, row, staticRowIndex, table]);
+  }, [
+    EditIcon,
+    editDisplayMode,
+    enableEditing,
+    handleEdit,
+    localization.edit,
+    renderRowActionMenuItems,
+    row,
+    setAnchorEl,
+    staticRowIndex,
+    table,
+  ]);
 
-  if (!menuItems.length) return null;
+  if (!menuItems.length) {
+    return null;
+  }
 
   return (
     <Menu