material-react-table 2.9.2 → 2.11.0

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -14,7 +14,8 @@ import {
 } from '../../types';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
+export interface MRT_EditCellTextFieldProps<TData extends MRT_RowData>
+  extends TextFieldProps<'standard'> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -23,7 +24,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   cell,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_EditCellTextFieldProps<TData>) => {
   const {
     getState,
     options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps },

package/src/components/inputs/MRT_FilterCheckbox.tsx

@@ -9,7 +9,8 @@ import {
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends CheckboxProps {
+export interface MRT_FilterCheckboxProps<TData extends MRT_RowData>
+  extends CheckboxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +19,7 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
   column,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterCheckboxProps<TData>) => {
   const {
     getState,
     options: { localization, muiFilterCheckboxProps },

package/src/components/inputs/MRT_FilterRangeFields.tsx

@@ -7,7 +7,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends BoxProps {
+export interface MRT_FilterRangeFieldsProps<TData extends MRT_RowData>
+  extends BoxProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -16,7 +17,7 @@ export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterRangeFieldsProps<TData>) => {
   return (
     <Box
       {...rest}

package/src/components/inputs/MRT_FilterRangeSlider.tsx

@@ -9,7 +9,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends SliderProps {
+export interface MRT_FilterRangeSliderProps<TData extends MRT_RowData>
+  extends SliderProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +19,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterRangeSliderProps<TData>) => {
   const {
     options: { enableColumnFilterModes, localization, muiFilterSliderProps },
     refs: { filterInputRefs },

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -30,6 +30,7 @@ import {
   type TimePickerProps,
 } from '@mui/x-date-pickers/TimePicker';
 import {
+  type DropdownOption,
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
@@ -37,7 +38,8 @@ import {
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
-interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
+export interface MRT_FilterTextFieldProps<TData extends MRT_RowData>
+  extends TextFieldProps<'standard'> {
   header: MRT_Header<TData>;
   rangeFilterIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -48,7 +50,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
   rangeFilterIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterTextFieldProps<TData>) => {
   const {
     options: {
       columnFilterModeOptions,
@@ -159,6 +161,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           ] || ''
         : (column.getFilterValue() as string) ?? '',
   );
+  const [autocompleteValue, setAutocompleteValue] =
+    useState<DropdownOption | null>(
+      isAutocompleteFilter ? (filterValue as DropdownOption | null) : null,
+    );
 
   const handleChangeDebounced = useCallback(
     debounce(
@@ -194,6 +200,11 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     textFieldProps?.onChange?.(event);
   };
 
+  const handleAutocompleteChange = (newValue: DropdownOption) => {
+    setAutocompleteValue(newValue);
+    handleChange(getValueAndLabel(newValue).value);
+  };
+
   const handleClear = () => {
     if (isMultiSelectFilter) {
       setFilterValue([]);
@@ -437,9 +448,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         <Autocomplete
           freeSolo
           getOptionLabel={(option) => getValueAndLabel(option).label}
-          onChange={(_e, newValue) =>
-            handleChange(getValueAndLabel(newValue).value)
-          }
+          onChange={(_e, newValue) => handleAutocompleteChange(newValue)}
           options={
             dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
           }
@@ -461,7 +470,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
               onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
             />
           )}
-          value={filterValue}
+          value={autocompleteValue}
         />
       ) : (
         <TextField

package/src/components/inputs/MRT_GlobalFilterTextField.tsx

@@ -16,14 +16,15 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
-interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
+export interface MRT_GlobalFilterTextFieldProps<TData extends MRT_RowData>
+  extends TextFieldProps<'standard'> {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_GlobalFilterTextFieldProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -8,11 +8,15 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getIsRowSelected } from '../../utils/row.utils';
+import {
+  getIsRowSelected,
+  getMRT_RowSelectionHandler,
+} from '../../utils/row.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends CheckboxProps {
+export interface MRT_SelectCheckboxProps<TData extends MRT_RowData>
+  extends CheckboxProps {
   row?: MRT_Row<TData>;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -23,7 +27,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_SelectCheckboxProps<TData>) => {
   const {
     getState,
     options: {
@@ -35,22 +39,12 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       rowPinningDisplayMode,
       selectAllMode,
     },
+    refs: { lastSelectedRowId },
   } = table;
   const { density, isLoading } = getState();
 
   const selectAll = !row;
 
-  const checkboxProps = {
-    ...(!row
-      ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-      : parseFromValuesOrFunc(muiSelectCheckboxProps, {
-          row,
-          staticRowIndex,
-          table,
-        })),
-    ...rest,
-  };
-
   const isStickySelection =
     enableRowPinning && rowPinningDisplayMode?.includes('select');
 
@@ -60,26 +54,22 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       : table.getIsAllRowsSelected()
     : undefined;
 
-  const onSelectionChange = (
-    event: ChangeEvent<HTMLInputElement>,
-    row: MRT_Row<TData>,
-  ) => {
-    if (row.getIsAllSubRowsSelected() && row.getCanSelectSubRows()) {
-      row.subRows?.forEach((r) => r.toggleSelected(false));
-    }
-    row.getToggleSelectedHandler()(event);
+  const isChecked = selectAll
+    ? allRowsSelected
+    : getIsRowSelected({ row, table });
 
-    if (isStickySelection) {
-      row.pin(
-        !row.getIsPinned() && event.target.checked
-          ? rowPinningDisplayMode?.includes('bottom')
-            ? 'bottom'
-            : 'top'
-          : false,
-      );
-    }
+  const checkboxProps = {
+    ...(selectAll
+      ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+      : parseFromValuesOrFunc(muiSelectCheckboxProps, {
+          row,
+          table,
+        })),
+    ...rest,
   };
 
+  const onSelectionChange = getMRT_RowSelectionHandler();
+
   const onSelectAllChange = (event: ChangeEvent<HTMLInputElement>) => {
     selectAllMode === 'all'
       ? table.getToggleAllRowsSelectedHandler()(event)
@@ -87,13 +77,14 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     if (isStickySelection) {
       table.setRowPinning({ bottom: [], top: [] });
     }
+    lastSelectedRowId.current = null;
   };
 
   const commonProps = {
     'aria-label': selectAll
       ? localization.toggleSelectAll
       : localization.toggleSelectRow,
-    checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }),
+    checked: isChecked,
     disabled:
       isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
     inputProps: {
@@ -103,7 +94,9 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     },
     onChange: (event) => {
       event.stopPropagation();
-      row ? onSelectionChange(event, row) : onSelectAllChange(event);
+      row
+        ? onSelectionChange({ event, row, staticRowIndex, table })
+        : onSelectAllChange(event);
     },
     size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small',
     ...checkboxProps,

package/src/components/menus/MRT_ActionMenuItem.tsx

@@ -0,0 +1,61 @@
+import { type ReactNode } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import MenuItem, { type MenuItemProps } from '@mui/material/MenuItem';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+
+export interface MRT_ActionMenuItemProps<TData extends MRT_RowData>
+  extends MenuItemProps {
+  icon: ReactNode;
+  label: string;
+  onOpenSubMenu?: MenuItemProps['onClick'] | MenuItemProps['onMouseEnter'];
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ActionMenuItem = <TData extends MRT_RowData>({
+  icon,
+  label,
+  onOpenSubMenu,
+  table,
+  ...rest
+}: MRT_ActionMenuItemProps<TData>) => {
+  const {
+    options: {
+      icons: { ArrowRightIcon },
+    },
+  } = table;
+
+  return (
+    <MenuItem
+      sx={{
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        minWidth: '120px',
+        my: 0,
+        py: '6px',
+      }}
+      {...rest}
+    >
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+        }}
+      >
+        <ListItemIcon>{icon}</ListItemIcon>
+        {label}
+      </Box>
+      {onOpenSubMenu && (
+        <IconButton
+          onClick={onOpenSubMenu as any}
+          onMouseEnter={onOpenSubMenu as any}
+          size="small"
+          sx={{ p: 0 }}
+        >
+          <ArrowRightIcon />
+        </IconButton>
+      )}
+    </MenuItem>
+  );
+};

package/src/components/menus/MRT_CellActionMenu.tsx

@@ -0,0 +1,109 @@
+import Menu, { type MenuProps } from '@mui/material/Menu';
+import { useTheme } from '@mui/material/styles';
+import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { openEditingCell } from '../../utils/cell.utils';
+import { getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+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>) => {
+  const {
+    getState,
+    options: {
+      editDisplayMode,
+      enableClickToCopy,
+      enableEditing,
+      icons: { ContentCopy, EditIcon },
+      localization,
+      renderCellActionMenuItems,
+    },
+    refs: { actionCellRef },
+  } = table;
+  const { actionCell, density } = getState();
+  const cell = actionCell!;
+  const { row } = cell;
+  const { column } = cell;
+  const { columnDef } = column;
+
+  const theme = useTheme();
+  const { menuBackgroundColor } = getMRTTheme(table, theme);
+
+  const handleClose = (event?: any) => {
+    event?.stopPropagation();
+    table.setActionCell(null);
+    actionCellRef.current = null;
+  };
+
+  const internalMenuItems = [
+    (parseFromValuesOrFunc(enableClickToCopy, cell) === 'context-menu' ||
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
+        'context-menu') && (
+      <MRT_ActionMenuItem
+        icon={<ContentCopy />}
+        key={'mrt-copy'}
+        label={localization.copy}
+        onClick={(event) => {
+          event.stopPropagation();
+          navigator.clipboard.writeText(cell.getValue() as string);
+          handleClose();
+        }}
+        table={table}
+      />
+    ),
+    parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (
+      <MRT_ActionMenuItem
+        icon={<EditIcon />}
+        key={'mrt-edit'}
+        label={localization.edit}
+        onClick={() => {
+          openEditingCell({ cell, table });
+          handleClose();
+        }}
+        table={table}
+      />
+    ),
+  ].filter(Boolean);
+
+  const renderActionProps = {
+    cell,
+    closeMenu: handleClose,
+    column,
+    internalMenuItems,
+    row,
+    table,
+  };
+
+  const menuItems =
+    columnDef.renderCellActionMenuItems?.(renderActionProps) ??
+    renderCellActionMenuItems?.(renderActionProps);
+
+  return (
+    (!!menuItems?.length || !!internalMenuItems?.length) && (
+      <Menu
+        MenuListProps={{
+          dense: density === 'compact',
+          sx: {
+            backgroundColor: menuBackgroundColor,
+          },
+        }}
+        anchorEl={actionCellRef.current}
+        disableScrollLock
+        onClick={(event) => event.stopPropagation()}
+        onClose={handleClose}
+        open={!!cell}
+        transformOrigin={{ horizontal: -100, vertical: 8 }}
+        {...rest}
+      >
+        {menuItems ?? internalMenuItems}
+      </Menu>
+    )
+  );
+};