material-react-table-narender 1.0.0 → 2.13.3

package/packages/material-react-table/src/components/menus/MRT_ActionMenuItem.tsx

@@ -1,62 +0,0 @@
-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',
-      }}
-      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/packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -1,349 +0,0 @@
-import { type MouseEvent, useState } from 'react';
-import Menu, { type MenuProps } from '@mui/material/Menu';
-import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
-import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
-import {
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
-
-export interface MRT_ColumnActionMenuProps<TData extends MRT_RowData>
-  extends Partial<MenuProps> {
-  anchorEl: HTMLElement | null;
-  header: MRT_Header<TData>;
-  setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  table: MRT_TableInstance<TData>;
-}
-
-export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
-  anchorEl,
-  header,
-  setAnchorEl,
-  table,
-  ...rest
-}: MRT_ColumnActionMenuProps<TData>) => {
-  const {
-    getAllLeafColumns,
-    getState,
-    options: {
-      columnFilterDisplayMode,
-      columnFilterModeOptions,
-      enableColumnFilterModes,
-      enableColumnFilters,
-      enableColumnPinning,
-      enableColumnResizing,
-      enableGrouping,
-      enableHiding,
-      enableSorting,
-      enableSortingRemoval,
-      icons: {
-        ClearAllIcon,
-        DynamicFeedIcon,
-        FilterListIcon,
-        FilterListOffIcon,
-        PushPinIcon,
-        RestartAltIcon,
-        SortIcon,
-        ViewColumnIcon,
-        VisibilityOffIcon,
-      },
-      localization,
-      mrtTheme: { menuBackgroundColor },
-      renderColumnActionsMenuItems,
-    },
-    refs: { filterInputRefs },
-    setColumnFilterFns,
-    setColumnOrder,
-    setColumnSizingInfo,
-    setShowColumnFilters,
-  } = table;
-  const { column } = header;
-  const { columnDef } = column;
-  const { columnSizing, columnVisibility, density, showColumnFilters } =
-    getState();
-  const columnFilterValue = column.getFilterValue();
-
-  const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
-    useState<HTMLElement | null>(null);
-
-  const handleClearSort = () => {
-    column.clearSorting();
-    setAnchorEl(null);
-  };
-
-  const handleSortAsc = () => {
-    column.toggleSorting(false);
-    setAnchorEl(null);
-  };
-
-  const handleSortDesc = () => {
-    column.toggleSorting(true);
-    setAnchorEl(null);
-  };
-
-  const handleResetColumnSize = () => {
-    setColumnSizingInfo((old) => ({ ...old, isResizingColumn: false }));
-    column.resetSize();
-    setAnchorEl(null);
-  };
-
-  const handleHideColumn = () => {
-    column.toggleVisibility(false);
-    setAnchorEl(null);
-  };
-
-  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
-    column.pin(pinDirection);
-    setAnchorEl(null);
-  };
-
-  const handleGroupByColumn = () => {
-    column.toggleGrouping();
-    setColumnOrder((old: any) => ['mrt-row-expand', ...old]);
-    setAnchorEl(null);
-  };
-
-  const handleClearFilter = () => {
-    column.setFilterValue(undefined);
-    setAnchorEl(null);
-    if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
-      setColumnFilterFns((prev) => ({
-        ...prev,
-        [header.id]: allowedColumnFilterOptions?.[0] ?? 'fuzzy',
-      }));
-    }
-  };
-
-  const handleFilterByColumn = () => {
-    setShowColumnFilters(true);
-    queueMicrotask(() => filterInputRefs.current?.[`${column.id}-0`]?.focus());
-    setAnchorEl(null);
-  };
-
-  const handleShowAllColumns = () => {
-    getAllLeafColumns()
-      .filter((col) => col.columnDef.enableHiding !== false)
-      .forEach((col) => col.toggleVisibility(true));
-    setAnchorEl(null);
-  };
-
-  const handleOpenFilterModeMenu = (event: MouseEvent<HTMLElement>) => {
-    event.stopPropagation();
-    setFilterMenuAnchorEl(event.currentTarget);
-  };
-
-  const isSelectFilter = !!columnDef.filterSelectOptions;
-
-  const allowedColumnFilterOptions =
-    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
-
-  const showFilterModeSubMenu =
-    enableColumnFilterModes &&
-    columnDef.enableColumnFilterModes !== false &&
-    !isSelectFilter &&
-    (allowedColumnFilterOptions === undefined ||
-      !!allowedColumnFilterOptions?.length);
-
-  const internalColumnMenuItems = [
-    ...(enableSorting && column.getCanSort()
-      ? [
-          enableSortingRemoval !== false && (
-            <MRT_ActionMenuItem
-              icon={<ClearAllIcon />}
-              key={0}
-              label={localization.clearSort}
-              onClick={handleClearSort}
-              table={table}
-            />
-          ),
-          <MRT_ActionMenuItem
-            disabled={column.getIsSorted() === 'asc'}
-            icon={
-              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
-            }
-            key={1}
-            label={localization.sortByColumnAsc?.replace(
-              '{column}',
-              String(columnDef.header),
-            )}
-            onClick={handleSortAsc}
-            table={table}
-          />,
-          <MRT_ActionMenuItem
-            disabled={column.getIsSorted() === 'desc'}
-            divider={enableColumnFilters || enableGrouping || enableHiding}
-            icon={<SortIcon />}
-            key={2}
-            label={localization.sortByColumnDesc?.replace(
-              '{column}',
-              String(columnDef.header),
-            )}
-            onClick={handleSortDesc}
-            table={table}
-          />,
-        ]
-      : []),
-    ...(enableColumnFilters && column.getCanFilter()
-      ? [
-          <MRT_ActionMenuItem
-            disabled={
-              !columnFilterValue ||
-              (Array.isArray(columnFilterValue) &&
-                !columnFilterValue.filter((value) => value).length)
-            }
-            icon={<FilterListOffIcon />}
-            key={3}
-            label={localization.clearFilter}
-            onClick={handleClearFilter}
-            table={table}
-          />,
-          columnFilterDisplayMode === 'subheader' && (
-            <MRT_ActionMenuItem
-              disabled={showColumnFilters && !enableColumnFilterModes}
-              divider={enableGrouping || enableHiding}
-              icon={<FilterListIcon />}
-              key={4}
-              label={localization.filterByColumn?.replace(
-                '{column}',
-                String(columnDef.header),
-              )}
-              onClick={
-                showColumnFilters
-                  ? handleOpenFilterModeMenu
-                  : handleFilterByColumn
-              }
-              onOpenSubMenu={
-                showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined
-              }
-              table={table}
-            />
-          ),
-          showFilterModeSubMenu && (
-            <MRT_FilterOptionMenu
-              anchorEl={filterMenuAnchorEl}
-              header={header}
-              key={5}
-              onSelect={handleFilterByColumn}
-              setAnchorEl={setFilterMenuAnchorEl}
-              table={table}
-            />
-          ),
-        ].filter(Boolean)
-      : []),
-    ...(enableGrouping && column.getCanGroup()
-      ? [
-          <MRT_ActionMenuItem
-            divider={enableColumnPinning}
-            icon={<DynamicFeedIcon />}
-            key={6}
-            label={localization[
-              column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
-            ]?.replace('{column}', String(columnDef.header))}
-            onClick={handleGroupByColumn}
-            table={table}
-          />,
-        ]
-      : []),
-    ...(enableColumnPinning && column.getCanPin()
-      ? [
-          <MRT_ActionMenuItem
-            disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
-            icon={<PushPinIcon style={{ transform: 'rotate(90deg)' }} />}
-            key={7}
-            label={localization.pinToLeft}
-            onClick={() => handlePinColumn('left')}
-            table={table}
-          />,
-          <MRT_ActionMenuItem
-            disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
-            icon={<PushPinIcon style={{ transform: 'rotate(-90deg)' }} />}
-            key={8}
-            label={localization.pinToRight}
-            onClick={() => handlePinColumn('right')}
-            table={table}
-          />,
-          <MRT_ActionMenuItem
-            disabled={!column.getIsPinned()}
-            divider={enableHiding}
-            icon={<PushPinIcon />}
-            key={9}
-            label={localization.unpin}
-            onClick={() => handlePinColumn(false)}
-            table={table}
-          />,
-        ]
-      : []),
-    ...(enableColumnResizing && column.getCanResize()
-      ? [
-          <MRT_ActionMenuItem
-            disabled={!columnSizing[column.id]}
-            icon={<RestartAltIcon />}
-            key={10}
-            label={localization.resetColumnSize}
-            onClick={handleResetColumnSize}
-            table={table}
-          />,
-        ]
-      : []),
-    ...(enableHiding
-      ? [
-          <MRT_ActionMenuItem
-            disabled={!column.getCanHide()}
-            icon={<VisibilityOffIcon />}
-            key={11}
-            label={localization.hideColumn?.replace(
-              '{column}',
-              String(columnDef.header),
-            )}
-            onClick={handleHideColumn}
-            table={table}
-          />,
-          <MRT_ActionMenuItem
-            disabled={
-              !Object.values(columnVisibility).filter((visible) => !visible)
-                .length
-            }
-            icon={<ViewColumnIcon />}
-            key={12}
-            label={localization.showAllColumns?.replace(
-              '{column}',
-              String(columnDef.header),
-            )}
-            onClick={handleShowAllColumns}
-            table={table}
-          />,
-        ]
-      : []),
-  ].filter(Boolean);
-
-  return (
-    <Menu
-      MenuListProps={{
-        dense: density === 'compact',
-        sx: {
-          backgroundColor: menuBackgroundColor,
-        },
-      }}
-      anchorEl={anchorEl}
-      disableScrollLock
-      onClose={() => setAnchorEl(null)}
-      open={!!anchorEl}
-      {...rest}
-    >
-      {columnDef.renderColumnActionsMenuItems?.({
-        closeMenu: () => setAnchorEl(null),
-        column,
-        internalColumnMenuItems,
-        table,
-      }) ??
-        renderColumnActionsMenuItems?.({
-          closeMenu: () => setAnchorEl(null),
-          column,
-          internalColumnMenuItems,
-          table,
-        }) ??
-        internalColumnMenuItems}
-    </Menu>
-  );
-};

package/packages/material-react-table/src/components/menus/MRT_RowActionMenu.tsx

@@ -1,86 +0,0 @@
-import { ReactNode, useMemo, type MouseEvent } from 'react';
-import Menu, { type MenuProps } from '@mui/material/Menu';
-import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
-import { parseFromValuesOrFunc } from '../../utils/utils';
-
-export interface MRT_RowActionMenuProps<TData extends MRT_RowData>
-  extends Partial<MenuProps> {
-  anchorEl: HTMLElement | null;
-  handleEdit: (event: MouseEvent) => void;
-  row: MRT_Row<TData>;
-  setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  staticRowIndex?: number;
-  table: MRT_TableInstance<TData>;
-}
-
-export const MRT_RowActionMenu = <TData extends MRT_RowData>({
-  anchorEl,
-  handleEdit,
-  row,
-  setAnchorEl,
-  staticRowIndex,
-  table,
-  ...rest
-}: MRT_RowActionMenuProps<TData>) => {
-  const {
-    getState,
-    options: {
-      editDisplayMode,
-      enableEditing,
-      icons: { EditIcon },
-      localization,
-      mrtTheme: { menuBackgroundColor },
-      renderRowActionMenuItems,
-    },
-  } = table;
-  const { density } = getState();
-
-  const menuItems = useMemo(() => {
-    const items: ReactNode[] = [];
-    const editItem = parseFromValuesOrFunc(enableEditing, row) &&
-      ['modal', 'row'].includes(editDisplayMode!) && (
-        <MRT_ActionMenuItem
-          key={'edit'}
-          icon={<EditIcon />}
-          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);
-    return items;
-  }, [renderRowActionMenuItems, row, staticRowIndex, table]);
-
-  if (!menuItems.length) return null;
-
-  return (
-    <Menu
-      MenuListProps={{
-        dense: density === 'compact',
-        sx: {
-          backgroundColor: menuBackgroundColor,
-        },
-      }}
-      anchorEl={anchorEl}
-      disableScrollLock
-      onClick={(event) => event.stopPropagation()}
-      onClose={() => setAnchorEl(null)}
-      open={!!anchorEl}
-      {...rest}
-    >
-      {menuItems}
-    </Menu>
-  );
-};

package/packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx

@@ -1,58 +0,0 @@
-import Box from '@mui/material/Box';
-import CircularProgress, {
-  type CircularProgressProps,
-} from '@mui/material/CircularProgress';
-import { alpha } from '@mui/material/styles';
-import { type MRT_RowData, type MRT_TableInstance } from '../../types';
-import { parseFromValuesOrFunc } from '../../utils/utils';
-
-export interface MRT_TableLoadingOverlayProps<TData extends MRT_RowData>
-  extends CircularProgressProps {
-  table: MRT_TableInstance<TData>;
-}
-
-export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
-  table,
-  ...rest
-}: MRT_TableLoadingOverlayProps<TData>) => {
-  const {
-    options: {
-      id,
-      localization,
-      mrtTheme: { baseBackgroundColor },
-      muiCircularProgressProps,
-    },
-  } = table;
-
-  const circularProgressProps = {
-    ...parseFromValuesOrFunc(muiCircularProgressProps, { table }),
-    ...rest,
-  };
-
-  return (
-    <Box
-      sx={{
-        alignItems: 'center',
-        backgroundColor: alpha(baseBackgroundColor, 0.5),
-        bottom: 0,
-        display: 'flex',
-        justifyContent: 'center',
-        left: 0,
-        maxHeight: '100vh',
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        width: '100%',
-        zIndex: 3,
-      }}
-    >
-      {circularProgressProps?.Component ?? (
-        <CircularProgress
-          aria-label={localization.noRecordsToDisplay}
-          id={`mrt-progress-${id}`}
-          {...circularProgressProps}
-        />
-      )}
-    </Box>
-  );
-};

package/packages/material-react-table/src/components/table/MRT_TablePaper.tsx

@@ -1,89 +0,0 @@
-import Paper, { type PaperProps } from '@mui/material/Paper';
-import { useTheme } from '@mui/material/styles';
-import { MRT_TableContainer } from './MRT_TableContainer';
-import { type MRT_RowData, type MRT_TableInstance } from '../../types';
-import { parseFromValuesOrFunc } from '../../utils/utils';
-import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
-import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
-
-export interface MRT_TablePaperProps<TData extends MRT_RowData>
-  extends PaperProps {
-  table: MRT_TableInstance<TData>;
-}
-
-export const MRT_TablePaper = <TData extends MRT_RowData>({
-  table,
-  ...rest
-}: MRT_TablePaperProps<TData>) => {
-  const {
-    getState,
-    options: {
-      enableBottomToolbar,
-      enableTopToolbar,
-      mrtTheme: { baseBackgroundColor },
-      muiTablePaperProps,
-      renderBottomToolbar,
-      renderTopToolbar,
-    },
-    refs: { tablePaperRef },
-  } = table;
-  const { isFullScreen } = getState();
-
-  const paperProps = {
-    ...parseFromValuesOrFunc(muiTablePaperProps, { table }),
-    ...rest,
-  };
-
-  const theme = useTheme();
-
-  return (
-    <Paper
-      elevation={2}
-      onKeyDown={(e) => e.key === 'Escape' && table.setIsFullScreen(false)}
-      {...paperProps}
-      ref={(ref: HTMLDivElement) => {
-        tablePaperRef.current = ref;
-        if (paperProps?.ref) {
-          //@ts-ignore
-          paperProps.ref.current = ref;
-        }
-      }}
-      style={{
-        ...(isFullScreen
-          ? {
-              bottom: 0,
-              height: '100dvh',
-              left: 0,
-              margin: 0,
-              maxHeight: '100dvh',
-              maxWidth: '100dvw',
-              padding: 0,
-              position: 'fixed',
-              right: 0,
-              top: 0,
-              width: '100dvw',
-              zIndex: theme.zIndex.modal,
-            }
-          : {}),
-        ...paperProps?.style,
-      }}
-      sx={(theme) => ({
-        backgroundColor: baseBackgroundColor,
-        backgroundImage: 'unset',
-        overflow: 'hidden',
-        transition: 'all 100ms ease-in-out',
-        ...(parseFromValuesOrFunc(paperProps?.sx, theme) as any),
-      })}
-    >
-      {enableTopToolbar &&
-        (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
-          <MRT_TopToolbar table={table} />
-        ))}
-      <MRT_TableContainer table={table} />
-      {enableBottomToolbar &&
-        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
-          <MRT_BottomToolbar table={table} />
-        ))}
-    </Paper>
-  );
-};