@linzjs/step-ag-grid 29.13.0 → 29.14.1

package/src/components/gridHook/useGridContextMenu.tsx

@@ -1,3 +1,5 @@
+import '../../styles/ContextMenu.scss';
+
 import { ColDef } from 'ag-grid-community';
 import { CellContextMenuEvent } from 'ag-grid-community';
 import { ReactElement, useCallback, useContext, useRef, useState } from 'react';
@@ -6,24 +8,30 @@ import { GridContext } from '../../contexts/GridContext';
 import { ControlledMenu } from '../../react-menu3';
 import { GridBaseRow } from '../types';
 
-export interface GridContextMenuComponentProps<TData extends GridBaseRow> {
+export interface GridContextMenuComponentProps<TData extends GridBaseRow, Context extends object = object> {
   selectedRows: TData[];
   clickedRow: TData;
   colDef: ColDef;
   close: () => void;
+  event?: CellContextMenuEvent;
+  context?: Context;
 }
 
-export type GridContextMenuComponent<TData extends GridBaseRow> = (
-  props: GridContextMenuComponentProps<TData>,
+export type GridContextMenuComponent<TData extends GridBaseRow, Context extends object = object> = (
+  props: GridContextMenuComponentProps<TData, Context>,
 ) => ReactElement | null;
 
-export const useGridContextMenu = <TData extends GridBaseRow>({
+export interface useGridContextMenuProps<TData extends GridBaseRow, Context extends object = object> {
+  contextMenuSelectRow?: boolean;
+  contextMenu?: GridContextMenuComponent<TData, Context>;
+  context?: Context;
+}
+
+export const useGridContextMenu = <TData extends GridBaseRow, Context extends object = object>({
   contextMenuSelectRow,
   contextMenu: ContextMenu,
-}: {
-  contextMenuSelectRow: boolean;
-  contextMenu?: GridContextMenuComponent<TData>;
-}) => {
+  context,
+}: useGridContextMenuProps<TData, Context>) => {
   const { redrawRows, prePopupOps, resetFocusedCellAfterCellEditing, getSelectedRows } = useContext(GridContext);
 
   const [isOpen, setOpen] = useState(false);
@@ -33,6 +41,7 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
   const clickedColDefRef = useRef<ColDef>(null!);
   const selectedRowsRef = useRef<any[]>([]);
   const clickedRowRef = useRef<any>(null);
+  const eventRef = useRef<CellContextMenuEvent | undefined>(undefined);
 
   const openMenu = useCallback(
     (e: PointerEvent | null | undefined) => {
@@ -59,6 +68,7 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
       clickedColDefRef.current = event.colDef;
       selectedRowsRef.current = getSelectedRows();
       clickedRowRef.current = event.data;
+      eventRef.current = event;
 
       // This is actually a pointer event
       openMenu(event.event as PointerEvent);
@@ -69,9 +79,10 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
   return {
     openMenu,
     cellContextMenu,
-    component: ContextMenu ? (
+    contextMenuComponent: ContextMenu ? (
       <>
         <ControlledMenu
+          className={'GridContextMenu'}
           anchorPoint={anchorPoint}
           state={isOpen ? 'open' : 'closed'}
           direction="right"
@@ -82,7 +93,9 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
               selectedRows={selectedRowsRef.current}
               clickedRow={clickedRowRef.current}
               colDef={clickedColDefRef.current}
+              event={eventRef.current}
               close={closeMenu}
+              context={context}
             />
           )}
         </ControlledMenu>

package/src/components/gridHook/useGridCopy.ts

@@ -0,0 +1,279 @@
+import { useShowLUIMessage } from '@linzjs/lui';
+import { CellContextMenuEvent, IRowNode } from 'ag-grid-community';
+import { compact } from 'lodash-es';
+import { ClipboardEvent as ReactClipboardEvent, MutableRefObject, useCallback } from 'react';
+
+import { useGridContext } from '../../contexts/GridContext';
+import { CopyOptionsContext, GridRangeSelectContextMenu } from '../GridRangeSelectContextMenu';
+import { agGridSelectRowColId, GridBaseRow } from '../types';
+import { useGridContextMenu } from './useGridContextMenu';
+import { CopyOptionsKey, gridCopyOptions, useGridCopySettings } from './useGridCopySettings';
+import { CellLocation, GridRanges } from './useGridRangeSelection';
+
+export const useGridCopy = <TData extends GridBaseRow>({
+  ranges,
+  rangeStartRef,
+  rangeEndRef,
+  hasSelectedMoreThanOneCellRef,
+  cellContextMenu,
+}: {
+  ranges: () => GridRanges<TData>;
+  rangeStartRef: MutableRefObject<CellLocation | null>;
+  rangeEndRef: MutableRefObject<CellLocation | null>;
+  hasSelectedMoreThanOneCellRef: MutableRefObject<boolean>;
+  cellContextMenu: (event: CellContextMenuEvent) => void;
+}) => {
+  const showToast = useShowLUIMessage();
+  const { getSelectedRowIds } = useGridContext<TData>();
+  const { getColDef, getCellValue } = useGridContext<TData>();
+  const { copyType, setCopyType } = useGridCopySettings();
+
+  const onCopy = useCallback(
+    (type: CopyOptionsKey = copyType) => {
+      const rangeStart = rangeStartRef.current;
+      const rangeEnd = rangeEndRef.current;
+      if (rangeStart === null || rangeEnd === null || !hasSelectedMoreThanOneCellRef.current) {
+        return;
+      }
+
+      if (rangeStart.rowId === rangeEnd.rowId && rangeStart.colId === rangeEnd.colId) {
+        type = 'html';
+      }
+
+      const json = type === 'json';
+      const { selectedColIds, selectedNodes } = ranges();
+      const filteredSelectedColIds = selectedColIds.filter(
+        (colId) =>
+          colId === agGridSelectRowColId ||
+          (colId !== 'gridCellFiller' && getColDef(colId)?.headerComponentParams?.exportable !== false),
+      );
+
+      const selectedRowIds = getSelectedRowIds();
+      const formatters = compact(
+        filteredSelectedColIds.map((colKey) => {
+          return (rowNode: IRowNode): string | number | boolean | null | undefined => {
+            if (colKey === agGridSelectRowColId) {
+              return selectedRowIds.includes(rowNode.data.id);
+            } else {
+              const v = getCellValue({ rowNode, colKey });
+              if (json && v !== undefined) {
+                return v;
+              }
+              const f = getCellValue({ rowNode, colKey, useFormatter: true });
+              // If it's a number, and it matches value return the original type
+              return v == f ? v : f;
+            }
+          };
+        }),
+      );
+
+      // Get and apply headers
+      const headers = filteredSelectedColIds.map((colId) => {
+        if (colId === agGridSelectRowColId) return type === 'json' ? 'selected' : 'Selected';
+        if (json) {
+          return colId;
+        }
+        return getColDef(colId)?.headerName ?? '?';
+      });
+      const maxCellLength: Record<string, number> = {};
+      headers.forEach((headerName, i) => {
+        const colId = filteredSelectedColIds[i];
+        maxCellLength[colId] = headerName.length;
+      });
+
+      const rows: string[][] = [];
+      if (type === 'csv' || type === 'html') {
+        rows.push(headers);
+      }
+      selectedNodes.forEach((node) => {
+        const row: string[] = [];
+        rows.push(row);
+        formatters.forEach((formatter, i) => {
+          const colId = filteredSelectedColIds[i];
+          let value = formatter(node);
+          if (typeof value === 'string') {
+            value = value.replaceAll('\xa0', ' ');
+          }
+          if (!json) {
+            if (value === '-' || value === '–' || value == null) {
+              value = '';
+            }
+            value = String(value);
+            if (value === '-' || value === '–') {
+              value = '';
+            }
+            maxCellLength[colId] = Math.max(maxCellLength[colId], value.length);
+          }
+
+          switch (type) {
+            case 'json':
+              value =
+                value === 'undefined' || (value !== null && typeof value === 'object') || typeof value === 'string'
+                  ? JSON.stringify(value)
+                  : value;
+              break;
+            case 'markdown':
+              value = encodeMarkdownValue(value as string);
+              break;
+            case 'csv':
+              value = encodeCSVValue(value as string);
+              break;
+          }
+          row.push(String(value));
+        });
+      });
+
+      let result = '';
+      let html = `<table style="
+            font-family: 'Open Sans', system-ui, sans-serif;
+            font-size: 10px;
+            line-height: 10px;
+            border: 1px solid #d1d9e0;
+            border-collapse: collapse;
+          ">`;
+      if (json) {
+        result += '[\n';
+      }
+      rows.forEach((row, rowIndex) => {
+        if (json) {
+          result += '  { ';
+        }
+        if (rowIndex == 1) {
+          html += '<tbody style="font-weight: 400;">';
+        }
+        if (rowIndex == 0) {
+          html += '<thead style="font-weight: 600;">';
+        }
+        if (rowIndex === 0 || (rowIndex & 1) === 1) {
+          html += '<tr>';
+        } else {
+          html += '<tr style="background-color: #f6f8fa;">';
+        }
+        if (rowIndex === 1 && type === 'html') {
+          Object.values(maxCellLength).forEach((maxLength) => {
+            result += '|' + '-'.repeat(maxLength + 2);
+          });
+          result += '|\n';
+        }
+        row.forEach((cell, i) => {
+          switch (type) {
+            case 'csv':
+              if (i !== 0) {
+                result += ', ';
+              }
+              result += cell;
+              break;
+            case 'html':
+              if (i === 0) {
+                result += '|';
+              }
+              const colId = filteredSelectedColIds[i];
+              result += ' ' + cell.padEnd(maxCellLength[colId], ' ') + ' ';
+              result += '|';
+              html +=
+                rowIndex === 0
+                  ? '<th style="border: 1px solid #d1d9e0; padding:6px 13px; text-align: left;">'
+                  : '<td style="border: 1px solid #d1d9e0; padding:6px 13px;">';
+              html += cell;
+              html += rowIndex === 0 ? '</th>' : '</td>';
+              break;
+            case 'json':
+              if (i !== 0) {
+                result += ', ';
+              }
+              result += JSON.stringify(headers[i]) + ': ' + cell;
+              break;
+          }
+        });
+        html += '</tr>';
+        if (rowIndex == 0) {
+          html += '</thead>';
+        }
+        if (rowIndex == rows.length - 1) {
+          html += '</tbody>';
+        }
+        if (json) {
+          result += ' }';
+        }
+        result += '\n';
+      });
+      if (json) {
+        result += ']\n';
+      }
+      html += '</table>';
+
+      showToast({
+        message: `${gridCopyOptions[type].text} copied`,
+        messageType: 'toast',
+        messageLevel: 'info',
+      });
+
+      if (type === 'html') {
+        const clipboardItem = new ClipboardItem({
+          'text/html': new Blob([html], { type: 'text/html' }),
+          'text/plain': new Blob([result], { type: 'text/plain' }), // fallback
+        });
+
+        void navigator.clipboard.write([clipboardItem]).catch((err) => console.error('Failed to copy: ', err));
+      } else {
+        void navigator.clipboard.writeText(result).catch((err) => console.error('Failed to copy: ', err));
+      }
+    },
+    [getCellValue, ranges, copyType],
+  );
+
+  const onCopyEvent = useCallback(
+    (e: ReactClipboardEvent<HTMLDivElement>) => {
+      const rangeStart = rangeStartRef.current;
+      const rangeEnd = rangeEndRef.current;
+      if (
+        rangeStart === null ||
+        rangeEnd === null ||
+        (rangeStart.colId === rangeEnd.colId &&
+          rangeStart.rowId === rangeEnd.rowId &&
+          !hasSelectedMoreThanOneCellRef.current)
+      ) {
+        return;
+      }
+
+      e.preventDefault();
+
+      onCopy();
+    },
+    [onCopy],
+  );
+
+  const { cellContextMenu: rangeSelectContextMenu, contextMenuComponent: rangeSelectContextMenuComponent } =
+    useGridContextMenu<TData, CopyOptionsContext>({
+      contextMenu: GridRangeSelectContextMenu<TData>,
+      context: { onCopy, copyType, setCopyType },
+    });
+
+  const rangeSelectInterceptContextMenu = useCallback(
+    (event: CellContextMenuEvent<TData>) =>
+      rangeStartRef.current == null ? cellContextMenu(event) : rangeSelectContextMenu(event),
+    [cellContextMenu, rangeSelectContextMenu],
+  );
+
+  return {
+    onCopyEvent,
+    rangeSelectInterceptContextMenu,
+    rangeSelectContextMenuComponent,
+  };
+};
+
+const encodeMarkdownValue = (value: string): string => {
+  return value.replaceAll('|', '\\|');
+};
+
+const encodeCSVValue = (value: string): string => {
+  let str = String(value);
+
+  // Check if it needs quoting
+  if (/[",\n]/.test(str)) {
+    // Escape double quotes by doubling them
+    str = '"' + str.replace(/"/g, '""') + '"';
+  }
+
+  return str;
+};

package/src/components/gridHook/useGridCopySettings.ts

@@ -0,0 +1,28 @@
+import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
+import { useCallback, useState } from 'react';
+
+export const gridCopyOptions: Record<string, { text: string; icon: IconName; developer?: boolean }> = {
+  html: { text: 'Text\xa0/\xa0HTML', icon: 'ic_product_list' },
+  csv: { text: 'CSV', icon: 'ic_csv_file' },
+  json: { text: 'Json', icon: 'ic_file_attached_outline', developer: true },
+};
+export type CopyOptionsKey = keyof typeof gridCopyOptions;
+
+const CopyOptionsStorageKey = 'stepAgGrid_defaultCopy';
+
+export const useGridCopySettings = () => {
+  const [copyType, _setCopyType] = useState<CopyOptionsKey>(() => {
+    const defaultCopy = window.localStorage.getItem(CopyOptionsStorageKey) ?? '';
+    return Object.keys(gridCopyOptions).includes(defaultCopy) ? defaultCopy : 'html';
+  });
+
+  const setCopyType = useCallback((key: CopyOptionsKey) => {
+    window.localStorage.setItem(CopyOptionsStorageKey, key);
+    _setCopyType(key);
+  }, []);
+
+  return {
+    copyType,
+    setCopyType,
+  };
+};

package/src/components/gridHook/useGridRangeSelection.ts

@@ -0,0 +1,235 @@
+import { CellMouseDownEvent, CellMouseOverEvent, IRowNode } from 'ag-grid-community';
+import { MutableRefObject, RefObject, useCallback, useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+
+import { GridBaseRow } from '../types';
+
+export interface CellLocation {
+  rowId: string;
+  colId: string;
+  timestamp: number;
+}
+
+export interface GridRanges<TData extends GridBaseRow> {
+  selectedColIds: string[];
+  selectedNodes: IRowNode<TData>[];
+}
+
+export const useGridRangeSelection = <TData extends GridBaseRow>({
+  enableRangeSelection,
+  gridDivRef,
+  rangeStartRef,
+  rangeEndRef,
+  hasSelectedMoreThanOneCellRef,
+  rangeSortedNodesRef,
+}: {
+  enableRangeSelection: boolean;
+  gridDivRef: RefObject<HTMLDivElement>;
+  rangeStartRef: MutableRefObject<CellLocation | null>;
+  rangeEndRef: MutableRefObject<CellLocation | null>;
+  hasSelectedMoreThanOneCellRef: MutableRefObject<boolean>;
+  rangeSortedNodesRef: MutableRefObject<IRowNode<TData>[] | null>;
+}) => {
+  const [refreshIntervalEnabled, setRefreshIntervalEnabled] = useState(false);
+
+  const ranges = useCallback((): GridRanges<TData> => {
+    const gridElement = gridDivRef.current!;
+    const rangeStart = rangeStartRef.current!;
+    const rangeEnd = rangeEndRef.current!;
+    const rangeSortedNodes = rangeSortedNodesRef.current!;
+    if (!gridElement || !rangeStart || !rangeEnd || !rangeSortedNodes) {
+      return {
+        selectedColIds: [],
+        selectedNodes: [],
+      };
+    }
+
+    const elStyleLeftComparator = (el1: Element, el2: Element) => elStyleLeft(el1) - elStyleLeft(el2);
+    const elStyleLeft = (el: Element): number => parseFloat((el as HTMLElement).style.left) ?? 0;
+
+    const getSortedColIds = (): string[] => {
+      //
+      const leftHeaders = [...gridElement.querySelectorAll('.ag-pinned-left-header .ag-header-cell')].sort(
+        elStyleLeftComparator,
+      );
+      const centerHeaders = [...gridElement.querySelectorAll('.ag-header-viewport .ag-header-cell')].sort(
+        elStyleLeftComparator,
+      );
+      const rightHeaders = [...gridElement.querySelectorAll('.ag-pinned-right-header .ag-header-cell')].sort(
+        elStyleLeftComparator,
+      );
+
+      return [...leftHeaders, ...centerHeaders, ...rightHeaders].map((el, i) => el.getAttribute('col-id') ?? String(i));
+    };
+
+    const sortedColIds = getSortedColIds();
+
+    const startColIndex = sortedColIds.indexOf(rangeStart.colId);
+    const endColIndex = sortedColIds.indexOf(rangeEnd.colId);
+    const selectedColIds = sortedColIds.slice(
+      Math.min(startColIndex, endColIndex),
+      Math.max(startColIndex, endColIndex) + 1,
+    );
+
+    const startRowIndex = rangeSortedNodes.findIndex((node) => node.data!.id === rangeStart.rowId);
+    const endRowIndex = rangeSortedNodes.findIndex((node) => node.data!.id === rangeEnd.rowId);
+    const selectedNodes = rangeSortedNodes.slice(
+      Math.min(startRowIndex, endRowIndex),
+      Math.max(startRowIndex, endRowIndex) + 1,
+    );
+
+    return { selectedColIds, selectedNodes };
+  }, []);
+
+  const redrawSelectedRanges = useCallback(() => {
+    const gridElement = gridDivRef.current!;
+    const { selectedColIds, selectedNodes } = ranges();
+
+    selectedColIds.forEach((colId, colIndex) => {
+      selectedNodes.forEach((node, rowIndex) => {
+        const rowId = node.data!.id;
+        const cell = gridElement.querySelector(
+          `.ag-row[row-id=${JSON.stringify(String(rowId))}] .ag-cell[col-id=${JSON.stringify(colId)}`,
+        );
+        cell?.classList.add('rangeSelect');
+        if (colIndex === 0) {
+          cell?.classList.add('rangeSelectLeft');
+        }
+        if (colIndex === selectedColIds.length - 1) {
+          cell?.classList.add('rangeSelectRight');
+        }
+        if (rowIndex === 0) {
+          cell?.classList.add('rangeSelectTop');
+        }
+        if (rowIndex === selectedNodes.length - 1) {
+          cell?.classList.add('rangeSelectBottom');
+        }
+      });
+    });
+  }, []);
+
+  const updateRangeSelectionCellClasses = useCallback(
+    (justRefresh?: boolean) => {
+      //
+      // Get all grid cols, sort by pinned, then style: left
+      const gridElement = gridDivRef.current;
+      if (!gridElement) {
+        return;
+      }
+
+      // Clear all selections
+      if (!justRefresh) {
+        gridElement
+          .querySelectorAll('.rangeSelect,.rangeSelectLeft,.rangeSelectTop,.rangeSelectRight,.rangeSelectBottom')
+          .forEach((el) => {
+            el.classList.remove(
+              'rangeSelect',
+              'rangeSelectLeft',
+              'rangeSelectTop',
+              'rangeSelectRight',
+              'rangeSelectBottom',
+            );
+          });
+      }
+
+      // if range selection multiple add .Grid-container.rangeSelectingMultiple
+      const rangeStart = rangeStartRef.current;
+      const rangeEnd = rangeEndRef.current;
+
+      if (
+        rangeStart !== null &&
+        rangeEnd !== null &&
+        (hasSelectedMoreThanOneCellRef.current ||
+          rangeStart.colId !== rangeEnd.colId ||
+          rangeStart.rowId !== rangeEnd.rowId)
+      ) {
+        gridElement.classList.add('rangeSelectingMultiple');
+        gridElement.querySelectorAll('.ag-cell-focus').forEach((el) => {
+          el.classList.remove('ag-cell-focus');
+        });
+      } else {
+        gridElement.classList.remove('rangeSelectingMultiple');
+        return;
+      }
+      const rangeSortedNodes = rangeSortedNodesRef.current;
+      if (!rangeSortedNodes) {
+        return;
+      }
+
+      redrawSelectedRanges();
+    },
+    [ranges, redrawSelectedRanges],
+  );
+
+  // Handle updates after scroll / grid refresh
+  useInterval(
+    () => {
+      updateRangeSelectionCellClasses(true);
+    },
+    refreshIntervalEnabled ? 150 : null,
+  );
+
+  const clearRangeSelection = useCallback(() => {
+    hasSelectedMoreThanOneCellRef.current = false;
+    setRefreshIntervalEnabled(false);
+
+    hasSelectedMoreThanOneCellRef.current = false;
+    rangeStartRef.current = null;
+    rangeEndRef.current = null;
+
+    updateRangeSelectionCellClasses();
+  }, [updateRangeSelectionCellClasses]);
+
+  const onCellMouseOver = useCallback(
+    (e: CellMouseOverEvent, mouseDown?: boolean) => {
+      if (!enableRangeSelection) {
+        return;
+      }
+      const button = (e.event as { buttons?: number }).buttons;
+      if (button !== 1) {
+        // TODO fix this?
+        //rangeSortedNodesRef.current = null;
+        return;
+      }
+      rangeEndRef.current = {
+        rowId: e.node.data.id,
+        colId: e.column.getColId(),
+        timestamp: Date.now(),
+      };
+
+      if (mouseDown) {
+        const sortedNodes: IRowNode<TData>[] = [];
+        e.api.forEachNodeAfterFilterAndSort((node: IRowNode<TData>) => sortedNodes.push(node));
+        rangeSortedNodesRef.current = sortedNodes;
+        setRefreshIntervalEnabled(true);
+        rangeStartRef.current = { ...rangeEndRef.current };
+      }
+
+      if (
+        rangeStartRef.current &&
+        rangeEndRef.current &&
+        (rangeStartRef.current.rowId !== rangeEndRef.current.rowId ||
+          rangeStartRef.current.colId !== rangeEndRef.current.colId)
+      ) {
+        hasSelectedMoreThanOneCellRef.current = true;
+        window.getSelection()?.removeAllRanges();
+      }
+
+      updateRangeSelectionCellClasses();
+    },
+    [enableRangeSelection, updateRangeSelectionCellClasses],
+  );
+
+  const onCellMouseDown = useCallback(
+    (e: CellMouseDownEvent) => {
+      const button = (e.event as { buttons?: number }).buttons;
+      if (button === 1) {
+        clearRangeSelection();
+      }
+      onCellMouseOver(e as unknown as CellMouseOverEvent, true);
+    },
+    [onCellMouseOver],
+  );
+
+  return { clearRangeSelection, ranges, onCellMouseDown, onCellMouseOver };
+};

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -11,6 +11,9 @@ import { GridFormEditBearing, GridFormEditBearingProps } from '../gridForm/GridF
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
 import { ColDefT, GridBaseRow } from '../types';
 
+export const GridCellBearingValueFormatter = (params: ValueFormatterParams) =>
+  bearingValueFormatter(params.value) ?? '';
+
 const GridPopoverEditBearingLike = <TData extends GridBaseRow, TValue = any>(
   colDef: GenericCellColDef<TData, TValue>,
   props: GenericCellEditorProps<GridFormEditBearingProps<TData>> & {

package/src/components/types.ts

@@ -1,6 +1,8 @@
 import { ColDef, EditableCallback, ICellRendererParams, ValueFormatterFunc, ValueGetterFunc } from 'ag-grid-community';
 import { ReactElement } from 'react';
 
+export const agGridSelectRowColId = 'ag-Grid-SelectionColumn';
+
 export interface GridBaseRow {
   id: string | number;
 }

package/src/contexts/GridContext.tsx

@@ -70,6 +70,7 @@ export interface GridContextType<TData extends GridBaseRow> {
   onBulkEditingComplete: () => Promise<void> | void;
   setOnBulkEditingComplete: (callback: (() => Promise<void> | void) | undefined) => void;
   showNoRowsOverlay: () => void;
+  getCellValue: GridApi['getCellValue'];
 }
 
 const NoContext = <T,>(): T => {
@@ -80,6 +81,7 @@ const NoContext = <T,>(): T => {
 export const GridContext = createContext<GridContextType<any>>({
   gridReady: false,
   gridRenderState: () => null,
+  getCellValue: NoContext,
   getColDef: NoContext,
   getColumns: NoContext,
   getColumnIds: NoContext,

package/src/contexts/GridContextProvider.tsx

@@ -13,7 +13,7 @@ import debounce from 'debounce-promise';
 import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from 'lodash-es';
 import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
-import { ColDefT, GridBaseRow } from '../components';
+import { agGridSelectRowColId, ColDefT, GridBaseRow } from '../components';
 import { GridCellFillerColId, isGridCellFiller } from '../components/GridCellFiller';
 import { getColId, isFlexColumn } from '../components/gridUtil';
 import { fnOrVar, isNotEmpty, sanitiseFileName, wait } from '../utils/util';
@@ -83,6 +83,8 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     [gridApi],
   );
 
+  const getCellValue = useCallback<GridApi['getCellValue']>((...props) => gridApi?.getCellValue(...props), [gridApi]);
+
   /**
    * Scroll row into view by Id.
    *
@@ -302,7 +304,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
                     // It may be that the first cell is the selection cell, this doesn't exist as a colDef
                     // so instead, I just try and select it.  If it doesn't exist selection will stay on the
                     // previously focused cell
-                    gridApi.setFocusedCell(rowIndex, 'ag-Grid-SelectionColumn');
+                    gridApi.setFocusedCell(rowIndex, agGridSelectRowColId);
                   }
                 }, 100);
             }
@@ -902,6 +904,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         getSelectedRowIds,
         getFilteredSelectedRowIds,
         getFirstRowId,
+        getCellValue,
         editingCells,
         ensureRowVisible,
         ensureSelectedRowIsVisible,