material-react-table-narender 1.0.0 → 2.13.4

package/src/utils/cell.utils.ts

@@ -0,0 +1,235 @@
+import {
+  MRT_Header,
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { getMRT_RowSelectionHandler, getMRT_SelectAllHandler } from './row.utils';
+import { parseFromValuesOrFunc } from './utils';
+
+const isWinCtrlMacMeta = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+  return (
+    (event.ctrlKey && navigator.platform.toLowerCase().includes('win')) ||
+    (event.metaKey && navigator.platform.toLowerCase().includes('mac'))
+  );
+};
+
+
+export const isCellEditable = <TData extends MRT_RowData>({
+  cell,
+  table,
+}: {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const { enableEditing } = table.options;
+  const {
+    column: { columnDef },
+    row,
+  } = cell;
+  return (
+    !cell.getIsPlaceholder() &&
+    parseFromValuesOrFunc(enableEditing, row) &&
+    parseFromValuesOrFunc(columnDef.enableEditing, row) !== false
+  );
+};
+
+export const openEditingCell = <TData extends MRT_RowData>({
+  cell,
+  table,
+}: {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const {
+    options: { editDisplayMode },
+    refs: { editInputRefs },
+  } = table;
+  const { column } = cell;
+
+  if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
+    table.setEditingCell(cell);
+    queueMicrotask(() => {
+      const textField = editInputRefs.current[column.id];
+      if (textField) {
+        textField.focus();
+        textField.select?.();
+      }
+    });
+  }
+};
+
+
+export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
+  cell,
+  cellElements,
+  cellValue,
+  containerElement,
+  event,
+  header,
+  parentElement,
+  table,
+}: {
+  cell?: MRT_Cell<TData>;
+  header?: MRT_Header<TData>;
+  cellElements?: Array<HTMLTableCellElement>;
+  cellValue?: string;
+  containerElement?: HTMLTableElement;
+  event: React.KeyboardEvent<HTMLTableCellElement>;
+  parentElement?: HTMLTableRowElement;
+  table: MRT_TableInstance<TData>;
+}) => {
+  debugger;
+  if (!table.options.enableKeyboardShortcuts) return;
+  if (event.isPropagationStopped()) return;
+  const currentCell = event.currentTarget;
+
+  if (cellValue && isWinCtrlMacMeta(event) && event.key === 'c') {
+    navigator.clipboard.writeText(cellValue);
+  } else if (['Enter', ' '].includes(event.key)) {
+    if (cell?.column?.id === 'mrt-row-select') {
+      event.preventDefault();
+      getMRT_RowSelectionHandler({
+        row: cell.row,
+        table,
+        //@ts-ignore
+        staticRowIndex: +event.target.getAttribute('data-index'),
+      })(event as any);
+    } else if (
+      header?.column?.id === 'mrt-row-select' &&
+      table.options.enableSelectAll
+    ) {
+      event.preventDefault();
+      getMRT_SelectAllHandler({
+        table,
+      })(event as any);
+    } else if (
+      cell?.column?.id === 'mrt-row-expand' &&
+      (cell.row.getCanExpand() ||
+        table.options.renderDetailPanel?.({ row: cell.row, table }))
+    ) {
+      event.preventDefault();
+      cell.row.toggleExpanded();
+    } else if (
+      header?.column?.id === 'mrt-row-expand' &&
+      table.options.enableExpandAll
+    ) {
+      event.preventDefault();
+      table.toggleAllRowsExpanded();
+    } else if (cell?.column.id === 'mrt-row-pin') {
+      event.preventDefault();
+      cell.row.getIsPinned()
+        ? cell.row.pin(false)
+        : cell.row.pin(
+            table.options.rowPinningDisplayMode?.includes('bottom')
+              ? 'bottom'
+              : 'top',
+          );
+    } else if (header && isWinCtrlMacMeta(event)) {
+      const actionsButton = currentCell.querySelector(
+        `button[aria-label="${table.options.localization.columnActions}"]`,
+      );
+      if (actionsButton) {
+        (actionsButton as HTMLButtonElement).click();
+      }
+    } else if (header?.column?.getCanSort()) {
+      event.preventDefault();
+      header.column.toggleSorting();
+    }
+  } else if (
+    [
+      'ArrowRight',
+      'ArrowLeft',
+      'ArrowUp',
+      'ArrowDown',
+      'Home',
+      'End',
+      'PageUp',
+      'PageDown',
+    ].includes(event.key)
+  ) {
+    event.preventDefault();
+
+    const currentRow = parentElement || currentCell.closest('tr');
+    const tableElement = containerElement || currentCell.closest('table');
+    const allCells =
+      cellElements ||
+      Array.from(tableElement?.querySelectorAll('th, td') || []);
+    const currentCellIndex = allCells.indexOf(currentCell);
+
+    const currentIndex = parseInt(
+      currentCell.getAttribute('data-index') || '0',
+    );
+    let nextCell: HTMLElement | undefined = undefined;
+
+    //home/end first or last cell in row
+    const findEdgeCell = (rowIndex: 'c' | 'f' | 'l', edge: 'f' | 'l') => {
+      const row =
+        rowIndex === 'c'
+          ? currentRow
+          : rowIndex === 'f'
+            ? tableElement?.querySelector('tr')
+            : tableElement?.lastElementChild?.lastElementChild;
+      const rowCells = Array.from(row?.children || []);
+      const targetCell =
+        edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
+      return targetCell as HTMLElement;
+    };
+
+    //page up/down first or last cell in column
+    const findBottomTopCell = (columnIndex: number, edge: 'b' | 't') => {
+      const row =
+        edge === 't'
+          ? tableElement?.querySelector('tr')
+          : tableElement?.lastElementChild?.lastElementChild;
+      const rowCells = Array.from(row?.children || []);
+      const targetCell = rowCells[columnIndex];
+      return targetCell as HTMLElement;
+    };
+
+    const findAdjacentCell = (
+      columnIndex: number,
+      searchDirection: 'f' | 'b',
+    ) => {
+      const searchArray =
+        searchDirection === 'f'
+          ? allCells.slice(currentCellIndex + 1)
+          : allCells.slice(0, currentCellIndex).reverse();
+      return searchArray.find((cell) =>
+        cell.matches(`[data-index="${columnIndex}"]`),
+      ) as HTMLElement | undefined;
+    };
+
+    switch (event.key) {
+      case 'ArrowRight':
+        nextCell = findAdjacentCell(currentIndex + 1, 'f');
+        break;
+      case 'ArrowLeft':
+        nextCell = findAdjacentCell(currentIndex - 1, 'b');
+        break;
+      case 'ArrowUp':
+        nextCell = findAdjacentCell(currentIndex, 'b');
+        break;
+      case 'ArrowDown':
+        nextCell = findAdjacentCell(currentIndex, 'f');
+        break;
+      case 'Home':
+        nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'f' : 'c', 'f');
+        break;
+      case 'End':
+        nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'l' : 'c', 'l');
+        break;
+      case 'PageUp':
+        nextCell = findBottomTopCell(currentIndex, 't');
+        break;
+      case 'PageDown':
+        nextCell = findBottomTopCell(currentIndex, 'b');
+        break;
+    }
+
+    if (nextCell) {
+      nextCell.focus();
+    }
+  }
+};
+

package/src/utils/style.utils.ts

@@ -0,0 +1,208 @@
+import { type CSSProperties } from 'react';
+import { type TableCellProps } from '@mui/material/TableCell';
+import { type TooltipProps } from '@mui/material/Tooltip';
+import { alpha, darken, lighten } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
+import {
+  type MRT_Column,
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_TableOptions,
+  type MRT_Theme,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
+
+export const getMRTTheme = <TData extends MRT_RowData>(
+  mrtTheme: MRT_TableOptions<TData>['mrtTheme'],
+  muiTheme: Theme,
+): MRT_Theme => {
+  const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
+  const baseBackgroundColor =
+    mrtThemeOverrides?.baseBackgroundColor ??
+    (muiTheme.palette.mode === 'dark'
+      ? lighten(muiTheme.palette.background.default, 0.05)
+      : muiTheme.palette.background.default);
+  return {
+    baseBackgroundColor,
+    draggingBorderColor: muiTheme.palette.primary.main,
+    matchHighlightColor:
+      muiTheme.palette.mode === 'dark'
+        ? darken(muiTheme.palette.warning.dark, 0.25)
+        : lighten(muiTheme.palette.warning.light, 0.5),
+    menuBackgroundColor: lighten(baseBackgroundColor, 0.07),
+    pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.1),
+    selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.2),
+    ...mrtThemeOverrides,
+  };
+};
+
+export const commonCellBeforeAfterStyles = {
+  content: '""',
+  height: '100%',
+  left: 0,
+  position: 'absolute',
+  top: 0,
+  width: '100%',
+  zIndex: -1,
+};
+
+export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
+  column,
+  table,
+  theme,
+}: {
+  column?: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
+  theme: Theme;
+}) => {
+  const { baseBackgroundColor } = table.options.mrtTheme;
+  const isPinned = column?.getIsPinned();
+
+  return {
+    '&[data-pinned="true"]': {
+      '&:before': {
+        backgroundColor: alpha(
+          darken(
+            baseBackgroundColor,
+            theme.palette.mode === 'dark' ? 0.05 : 0.01,
+          ),
+          0.97,
+        ),
+        boxShadow: column
+          ? isPinned === 'left' && column.getIsLastColumn(isPinned)
+            ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+            : isPinned === 'right' && column.getIsFirstColumn(isPinned)
+              ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+              : undefined
+          : undefined,
+        ...commonCellBeforeAfterStyles,
+      },
+    },
+  };
+};
+
+export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
+  column,
+  header,
+  table,
+  tableCellProps,
+  theme,
+}: {
+  column: MRT_Column<TData>;
+  header?: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+  tableCellProps: TableCellProps;
+  theme: Theme;
+}) => {
+  const {
+    getState,
+    options: { enableColumnVirtualization, layoutMode },
+  } = table;
+  const { draggingColumn } = getState();
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const isColumnPinned =
+    columnDef.columnDefType !== 'group' && column.getIsPinned();
+
+  const widthStyles: CSSProperties = {
+    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px)`,
+  };
+
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `${
+      [0, false].includes(columnDef.grow!)
+        ? 0
+        : `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+            header?.id ?? column.id,
+          )}-size)`
+    } 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
+  }
+
+  const pinnedStyles = isColumnPinned
+    ? {
+        ...getCommonPinnedCellStyles({ column, table, theme }),
+        left:
+          isColumnPinned === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+        opacity: 0.97,
+        position: 'sticky',
+        right:
+          isColumnPinned === 'right'
+            ? `${column.getAfter('right')}px`
+            : undefined,
+      }
+    : {};
+
+  return {
+    backgroundColor: 'inherit',
+    backgroundImage: 'inherit',
+    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+    justifyContent:
+      columnDefType === 'group'
+        ? 'center'
+        : layoutMode?.startsWith('grid')
+          ? tableCellProps.align
+          : undefined,
+    opacity:
+      table.getState().draggingColumn?.id === column.id ||
+      table.getState().hoveredColumn?.id === column.id
+        ? 0.5
+        : 1,
+    position: 'relative',
+    transition: enableColumnVirtualization
+      ? 'none'
+      : `padding 150ms ease-in-out`,
+    zIndex:
+      column.getIsResizing() || draggingColumn?.id === column.id
+        ? 2
+        : columnDefType !== 'group' && isColumnPinned
+          ? 1
+          : 0,
+    ...pinnedStyles,
+    ...widthStyles,
+    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
+  };
+};
+
+export const getCommonToolbarStyles = <TData extends MRT_RowData>({
+  table,
+}: {
+  table: MRT_TableInstance<TData>;
+  theme: Theme;
+}) => ({
+  alignItems: 'flex-start',
+  backgroundColor: table.options.mrtTheme.baseBackgroundColor,
+  display: 'grid',
+  flexWrap: 'wrap-reverse',
+  minHeight: '3.5rem',
+  overflow: 'hidden',
+  position: 'relative',
+  transition: 'all 150ms ease-in-out',
+  zIndex: 1,
+});
+
+export const flipIconStyles = (theme: Theme) =>
+  theme.direction === 'rtl'
+    ? { style: { transform: 'scaleX(-1)' } }
+    : undefined;
+
+export const getCommonTooltipProps = (
+  placement?: TooltipProps['placement'],
+): Partial<TooltipProps> => ({
+  disableInteractive: true,
+  enterDelay: 1000,
+  enterNextDelay: 1000,
+  placement,
+});

package/src/utils/tanstack.helpers.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import {
+  createRow as _createRow,
+  flexRender as _flexRender,
+  type Renderable,
+} from '@tanstack/react-table';
+import {
+  type MRT_ColumnHelper,
+  type MRT_DisplayColumnDef,
+  type MRT_GroupColumnDef,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { getAllLeafColumnDefs, getColumnId } from './column.utils';
+
+export const flexRender = _flexRender as (
+  Comp: Renderable<any>,
+  props: any,
+) => JSX.Element | ReactNode;
+
+export function createMRTColumnHelper<
+  TData extends MRT_RowData,
+>(): MRT_ColumnHelper<TData> {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === 'function'
+        ? ({
+            ...column,
+            accessorFn: accessor,
+          } as any)
+        : {
+            ...column,
+            accessorKey: accessor,
+          };
+    },
+    display: (column) => column as MRT_DisplayColumnDef<TData>,
+    group: (column) => column as MRT_GroupColumnDef<TData>,
+  };
+}
+
+export const createRow = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  originalRow?: TData,
+  rowIndex = -1,
+  depth = 0,
+  subRows?: MRT_Row<TData>[],
+  parentId?: string,
+): MRT_Row<TData> =>
+  _createRow(
+    table as any,
+    'mrt-row-create',
+    originalRow ??
+      Object.assign(
+        {},
+        ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
+          [getColumnId(col)]: '',
+        })),
+      ),
+    rowIndex,
+    depth,
+    subRows as any,
+    parentId,
+  ) as MRT_Row<TData>;

package/src/utils/utils.ts

@@ -0,0 +1,23 @@
+import { type DropdownOption } from '../types';
+
+export const parseFromValuesOrFunc = <T, U>(
+  fn: ((arg: U) => T) | T | undefined,
+  arg: U,
+): T | undefined => (fn instanceof Function ? fn(arg) : fn);
+
+export const getValueAndLabel = (
+  option?: DropdownOption,
+): { label: string; value: string } => {
+  let label: string = '';
+  let value: string = '';
+  if (option) {
+    if (typeof option !== 'object') {
+      label = option;
+      value = option;
+    } else {
+      label = option.label ?? option.text ?? option.value;
+      value = option.value ?? label;
+    }
+  }
+  return { label, value };
+};

package/.editorconfig

@@ -1,13 +0,0 @@
-# Editor configuration, see http://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/.github/FUNDING.yml

@@ -1,3 +0,0 @@
-# These are supported funding model platforms
-
-github: KevinVandy

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,85 +0,0 @@
-name: '🐛 Bug report'
-description: Report a reproducible bug or regression
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thank you for reporting an issue :pray:
-
-        Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
-        - material-react-table's [Discussions tab](https://github.com/material/material-react-table/discussions)
-        - material-react-table's [Open Issues](https://github.com/KevinVandy/material-react-table/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)
-        - material-react-table's [Closed Issues](https://github.com/KevinVandy/material-react-table/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)
-
-        The more information you fill in, the better the community can help you.
-
-  - type: input
-    id: mrt-library-version
-    attributes:
-      label: material-react-table version
-      description: |
-        - Please let us know the exact version of material-react-table you were using when the issue occurred. If you are using an older version, check to see if your bug has already been solved in the latest version. 
-        - The latest version is <img alt="" src="https://badgen.net/npm/v/material-react-table" />
-      placeholder: |
-        e.g. v1.3.4
-    validations:
-      required: true
-
-  - type: input
-    id: react-library-version
-    attributes:
-      label: react & react-dom versions
-      description: Material UI V6 requires React and React-Dom v17 or higher
-      placeholder: |
-        e.g. v17.0.2
-    validations:
-      required: true
-
-  - type: textarea
-    id: description
-    attributes:
-      label: Describe the bug and the steps to reproduce it
-      description: Provide a clear and concise description of the challenge you are running into, and the steps we should take to try to reproduce your bug.
-    validations:
-      required: true
-
-  - type: textarea
-    id: link
-    attributes:
-      label: Minimal, Reproducible Example - (Optional, but Recommended)
-      description: |
-        Please add a link to a minimal reproduction. This can really speed up the diagnosis of the problem! A Code Sandbox is preferable, but simple code snippets are also acceptable here. Feel free to fork any of the official CodeSandbox examples: https://github.com/KevinVandy/material-react-table/tree/v3/apps/material-react-table-docs/examples
-      placeholder: |
-        e.g. Code Sandbox, Stackblitz, or relevant code snippets.
-    validations:
-      required: true
-
-  - type: textarea
-    id: screenshots_or_videos
-    attributes:
-      label: Screenshots or Videos (Optional)
-      description: |
-        If applicable, add screenshots or a video to help explain your problem.
-      placeholder: |
-        You can drag your video or image files inside of this editor ↓
-
-  - type: dropdown
-    attributes:
-      options:
-        - No, because I do not know how
-        - No, because I do not have time to dig into it
-        - Maybe, I'll investigate and start debugging
-        - Yes, I think I know how to fix it and will discuss it in the comments of this issue
-        - Yes, I am also opening a PR that solves the problem along side this issue
-      label: Do you intend to try to help solve this bug with your own PR?
-      description: |
-        If you think you know the cause of the problem, the fastest way to get it fixed is to suggest a fix, or fix it yourself! However, it is ok if you cannot solve this yourself and are just wanting help.
-
-  - type: checkboxes
-    id: agrees-to-terms
-    attributes:
-      label: Terms
-      description: By submitting this issue, you agree to follow our Code of Conduct and can verify that you have followed the requirements outlined above to the best of your ability.
-      options:
-        - label: I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
-          required: true

package/.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Feature Requests & Questions
-    url: https://github.com/KevinVandy/material-react-table/discussions
-    about: Please ask and answer questions here, but don't report bugs here! That's what bug reports/issues are for!
-  - name: Community Chat
-    url: https://discord.gg/5wqyRx6fnm
-    about: Join the Discord to discuss bugs, feature clarifications, and the general direction of the project!

package/.github/workflows/main.yml

@@ -1,27 +0,0 @@
-name: Upgrade Example Versions
-
-on:
-  push:
-    branches:
-      - 'v3'
-    paths:
-      - 'packages/material-react-table/package.json'
-
-jobs:
-  run-example-upgrades:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout source code
-        uses: actions/checkout@v3
-
-      - name: run-sh-script
-        run: sh upgrade-examples.sh
-
-      - name: Commit and push changes
-        run: |
-          git config --global user.name 'KevinVandy'
-          git config --global user.email 'kevinvandy@users.noreply.github.com'
-          git add -A
-          git commit -m "Upgrade Examples" || exit 0  # in case no changes present
-          git push origin ${{ github.head_ref }}