@cutting/material-react-table 4.0.0

package/src/components/inputs/MRT_GlobalFilterTextField.tsx

@@ -0,0 +1,160 @@
+import Collapse from '@mui/material/Collapse';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField, { type TextFieldProps } from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
+import { debounce } from '@mui/material/utils';
+import {
+  type ChangeEvent,
+  type MouseEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getTextFieldSlotProps } from '../../utils/slotProps.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
+
+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
+}: MRT_GlobalFilterTextFieldProps<TData>) => {
+  const {
+    getState,
+    options: {
+      enableGlobalFilterModes,
+      icons: { CloseIcon, SearchIcon },
+      localization,
+      manualFiltering,
+      muiSearchTextFieldProps,
+    },
+    refs: { searchInputRef },
+    setGlobalFilter,
+  } = table;
+  const { globalFilter, showGlobalFilter } = getState();
+
+  const textFieldProps = {
+    ...parseFromValuesOrFunc(muiSearchTextFieldProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const isMounted = useRef(false);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [searchValue, setSearchValue] = useState(globalFilter ?? '');
+
+  const handleChangeDebounced = useCallback(
+    debounce(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        setGlobalFilter(event.target.value ?? undefined);
+      },
+      manualFiltering ? 500 : 250,
+    ),
+    [],
+  );
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value);
+    handleChangeDebounced(event);
+  };
+
+  const handleGlobalFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClear = () => {
+    setSearchValue('');
+    setGlobalFilter(undefined);
+  };
+
+  useEffect(() => {
+    if (isMounted.current) {
+      if (globalFilter === undefined) {
+        handleClear();
+      } else {
+        setSearchValue(globalFilter);
+      }
+    }
+    isMounted.current = true;
+  }, [globalFilter]);
+
+  const consumerSlots = getTextFieldSlotProps(textFieldProps.slotProps);
+
+  return (
+    <Collapse
+      in={showGlobalFilter}
+      mountOnEnter
+      orientation="horizontal"
+      unmountOnExit
+    >
+      <TextField
+        onChange={handleChange}
+        placeholder={localization.search}
+        size="small"
+        value={searchValue ?? ''}
+        variant="outlined"
+        {...textFieldProps}
+        inputRef={(inputRef) => {
+          searchInputRef.current = inputRef;
+          if (textFieldProps?.inputRef) {
+            textFieldProps.inputRef = inputRef;
+          }
+        }}
+        slotProps={{
+          htmlInput: { autoComplete: 'off', ...consumerSlots.htmlInput },
+          input: {
+            endAdornment: (
+              <InputAdornment position="end">
+                <Tooltip title={localization.clearSearch ?? ''}>
+                  <span>
+                    <IconButton
+                      aria-label={localization.clearSearch}
+                      disabled={!searchValue?.length}
+                      onClick={handleClear}
+                      size="small"
+                    >
+                      <CloseIcon />
+                    </IconButton>
+                  </span>
+                </Tooltip>
+              </InputAdornment>
+            ),
+            startAdornment: enableGlobalFilterModes ? (
+              <InputAdornment position="start">
+                <Tooltip title={localization.changeSearchMode}>
+                  <IconButton
+                    aria-label={localization.changeSearchMode}
+                    onClick={handleGlobalFilterMenuOpen}
+                    size="small"
+                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                  >
+                    <SearchIcon />
+                  </IconButton>
+                </Tooltip>
+              </InputAdornment>
+            ) : (
+              <SearchIcon style={{ marginRight: '4px' }} />
+            ),
+            ...consumerSlots.input,
+            sx: { mb: 0, ...consumerSlots.input?.sx },
+          },
+        }}
+      />
+      <MRT_FilterOptionMenu
+        anchorEl={anchorEl}
+        onSelect={handleClear}
+        setAnchorEl={setAnchorEl}
+        table={table}
+      />
+    </Collapse>
+  );
+};

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -0,0 +1,136 @@
+import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
+import Radio, { type RadioProps } from '@mui/material/Radio';
+import { type Theme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import { type MouseEvent } from 'react';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import {
+  getIsRowSelected,
+  getMRT_RowSelectionHandler,
+  getMRT_SelectAllHandler,
+} from '../../utils/row.utils';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_SelectCheckboxProps<TData extends MRT_RowData>
+  extends CheckboxProps {
+  row?: MRT_Row<TData>;
+  staticRowIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
+  row,
+  staticRowIndex,
+  table,
+  ...rest
+}: MRT_SelectCheckboxProps<TData>) => {
+  const {
+    getState,
+    options: {
+      enableMultiRowSelection,
+      localization,
+      muiSelectAllCheckboxProps,
+      muiSelectCheckboxProps,
+      selectAllMode,
+    },
+  } = table;
+  const { density, isLoading } = getState();
+
+  const selectAll = !row;
+
+  const allRowsSelected = selectAll
+    ? selectAllMode === 'page'
+      ? table.getIsAllPageRowsSelected()
+      : table.getIsAllRowsSelected()
+    : undefined;
+
+  const isChecked = selectAll
+    ? allRowsSelected
+    : getIsRowSelected({ row, table });
+
+  const checkboxProps = {
+    ...(selectAll
+      ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+      : parseFromValuesOrFunc(muiSelectCheckboxProps, {
+          row,
+          staticRowIndex,
+          table,
+        })),
+    ...rest,
+  };
+
+  const onSelectionChange = row
+    ? getMRT_RowSelectionHandler({
+        row,
+        staticRowIndex,
+        table,
+      })
+    : undefined;
+
+  const onSelectAllChange = getMRT_SelectAllHandler({ table });
+
+  const commonProps = {
+    'aria-label': selectAll
+      ? localization.toggleSelectAll
+      : localization.toggleSelectRow,
+    checked: isChecked,
+    disabled:
+      isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
+    onChange: (event) => {
+      event.stopPropagation();
+      selectAll ? onSelectAllChange(event) : onSelectionChange!(event);
+    },
+    size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small',
+    slotProps: {
+      input: {
+        'aria-label': selectAll
+          ? localization.toggleSelectAll
+          : localization.toggleSelectRow,
+      },
+    },
+    ...checkboxProps,
+    onClick: (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      checkboxProps?.onClick?.(e);
+    },
+    sx: (theme: Theme) => ({
+      height: density === 'compact' ? '1.75rem' : '2.5rem',
+      m: density !== 'compact' ? '-0.4rem' : undefined,
+      width: density === 'compact' ? '1.75rem' : '2.5rem',
+      zIndex: 0,
+      ...parseFromValuesOrFunc(checkboxProps?.sx, theme),
+    }),
+    title: undefined,
+  } as CheckboxProps | RadioProps;
+
+  return (
+    <Tooltip
+      {...getCommonTooltipProps()}
+      title={
+        checkboxProps?.title ??
+        (selectAll
+          ? localization.toggleSelectAll
+          : localization.toggleSelectRow)
+      }
+    >
+      {enableMultiRowSelection === false ? (
+        <Radio {...(commonProps as any)} />
+      ) : (
+        <Checkbox
+          indeterminate={
+            !isChecked && selectAll
+              ? table.getIsSomeRowsSelected()
+              : row?.getIsSomeSelected() && row.getCanSelectSubRows()
+          }
+          {...commonProps}
+        />
+      )}
+    </Tooltip>
+  );
+};

package/src/components/menus/MRT_ActionMenuItem.tsx

@@ -0,0 +1,63 @@
+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 ReactNode } from 'react';
+
+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',
+      }}
+      tabIndex={0}
+      {...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,108 @@
+import Menu, { type MenuProps } from '@mui/material/Menu';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+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> {
+  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,
+      mrtTheme: { menuBackgroundColor },
+      renderCellActionMenuItems,
+    },
+    refs: { actionCellRef },
+  } = table;
+  const { actionCell, density } = getState();
+  const cell = actionCell!;
+  const { row } = cell;
+  const { column } = cell;
+  const { columnDef } = column;
+
+  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
+        anchorEl={actionCellRef.current}
+        disableScrollLock
+        onClick={(event) => event.stopPropagation()}
+        onClose={handleClose}
+        open={!!cell}
+        slotProps={{
+          list: {
+            dense: density === 'compact',
+            sx: {
+              backgroundColor: menuBackgroundColor,
+            },
+          },
+        }}
+        transformOrigin={{ horizontal: -100, vertical: 8 }}
+        {...rest}
+      >
+        {menuItems ?? internalMenuItems}
+      </Menu>
+    )
+  );
+};