@linzjs/step-ag-grid 29.12.0 → 29.14.0

package/dist/step-ag-grid.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { LuiMiniSpinner, LuiStatusSpinner, LuiIcon, LuiButtonGroup, LuiButton, LuiCheckboxInput } from '@linzjs/lui';
+import { LuiMiniSpinner, LuiIcon, useShowLUIMessage, LuiStatusSpinner, LuiButtonGroup, LuiButton, LuiCheckboxInput } from '@linzjs/lui';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, delay, omit, sortBy, partition, compact, pick, groupBy, fromPairs, toPairs, isEqual, pull, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
+import { negate, isEmpty, findIndex, defer, debounce as debounce$1, compact, xorBy, last, difference, delay, omit, sortBy, partition, pick, groupBy, fromPairs, toPairs, isEqual, pull, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
 import React, { useRef, useLayoutEffect, useEffect, createContext, useContext, useState, useMemo, memo, forwardRef, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1, useId } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -417,6 +417,9 @@ function useInterval(callback, delay) {
     savedCallback.current = callback;
   }, [callback]);
   useEffect(() => {
+    if (delay === null) {
+      return;
+    }
     const id = setInterval(() => {
       savedCallback.current();
     }, delay);
@@ -426,147 +429,54 @@ function useInterval(callback, delay) {
   }, [delay]);
 }
 
+const NoContext = () => {
+    console.error('Missing GridContextProvider');
+    return null;
+};
 const GridContext = createContext({
     gridReady: false,
     gridRenderState: () => null,
-    getColDef: () => {
-        console.error('no context provider for getColDef');
-        return undefined;
-    },
-    getColumns: () => {
-        console.error('no context provider for getColumns');
-        return [];
-    },
-    getColumnIds: () => {
-        console.error('no context provider for getColumnIds');
-        return [];
-    },
+    getCellValue: NoContext,
+    getColDef: NoContext,
+    getColumns: NoContext,
+    getColumnIds: NoContext,
     invisibleColumnIds: undefined,
-    setInvisibleColumnIds: () => {
-        console.error('no context provider for setInvisibleColumnIds');
-    },
-    prePopupOps: () => {
-        console.error('no context provider for prePopupOps');
-    },
+    setInvisibleColumnIds: NoContext,
+    prePopupOps: NoContext,
     externallySelectedItemsAreInSync: false,
-    setApis: () => {
-        console.error('no context provider for setApis');
-    },
-    setQuickFilter: () => {
-        console.error('no context provider for setQuickFilter');
-    },
-    selectRowsById: () => {
-        console.error('no context provider for selectRows');
-    },
-    getSelectedRows: () => {
-        console.error('no context provider for getSelectedRows');
-        return [];
-    },
-    getFilteredSelectedRows: () => {
-        console.error('no context provider for getFilteredSelectedRows');
-        return [];
-    },
-    getSelectedRowIds: () => {
-        console.error('no context provider for getSelectedRowIds');
-        return [];
-    },
-    getFilteredSelectedRowIds: () => {
-        console.error('no context provider for getFilteredSelectedRowIds');
-        return [];
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    selectRowsDiff: async () => {
-        console.error('no context provider for selectRowsDiff');
-    },
-    selectRowsByIdWithFlash: () => {
-        console.error('no context provider for selectRowsWithFlash');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    selectRowsWithFlashDiff: async () => {
-        console.error('no context provider for selectRowsWithFlashDiff');
-    },
-    flashRows: () => {
-        console.error('no context provider for flashRows');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    flashRowsDiff: async () => {
-        console.error('no context provider for flashRows');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await,@typescript-eslint/no-misused-promises
-    focusByRowById: async () => {
-        console.error('no context provider for focusByRowById');
-    },
-    ensureRowVisible: () => {
-        console.error('no context provider for ensureRowVisible');
-        return true;
-    },
-    ensureSelectedRowIsVisible: () => {
-        console.error('no context provider for ensureSelectedRowIsVisible');
-    },
-    getFirstRowId: () => {
-        console.error('no context provider for getFirstRowId');
-        return -1;
-    },
-    autoSizeColumns: async () => {
-        console.error('no context provider for autoSizeColumns');
-        return Promise.resolve(null);
-    },
-    sizeColumnsToFit: () => {
-        console.error('no context provider for autoSizeAllColumns');
-        return null;
-    },
-    editingCells: () => {
-        console.error('no context provider for editingCells');
-        return false;
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    startCellEditing: async () => {
-        console.error('no context provider for startCellEditing');
-    },
-    resetFocusedCellAfterCellEditing: () => {
-        console.error('no context provider for resetFocusedCellAfterCellEditing');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    updatingCells: async () => {
-        console.error('no context provider for modifyUpdating');
-        return false;
-    },
-    redrawRows: () => {
-        console.error('no context provider for redrawRows');
-    },
-    setExternallySelectedItemsAreInSync: () => {
-        console.error('no context provider for setExternallySelectedItemsAreInSync');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    waitForExternallySelectedItemsToBeInSync: async () => {
-        console.error('no context provider for waitForExternallySelectedItemsToBeInSync');
-    },
-    addExternalFilter: () => {
-        console.error('no context provider for addExternalFilter');
-    },
-    removeExternalFilter: () => {
-        console.error('no context provider for removeExternalFilter');
-    },
-    isExternalFilterPresent: () => {
-        console.error('no context provider for isExternalFilterPresent');
-        return false;
-    },
-    doesExternalFilterPass: () => {
-        console.error('no context provider for doesExternalFilterPass');
-        return true;
-    },
-    downloadCsv: () => {
-        console.error('no context provider for downloadCsv');
-    },
-    onBulkEditingComplete: () => {
-        console.error('no context provider for onBulkEditingComplete');
-    },
-    setOnBulkEditingComplete: () => {
-        console.error('no context provider for setOnBulkEditingComplete');
-    },
-    showNoRowsOverlay: () => {
-        console.error('no context provider for showLoadingOverlay');
-    },
+    setApis: NoContext,
+    setQuickFilter: NoContext,
+    selectRowsById: NoContext,
+    getSelectedRows: NoContext,
+    getFilteredSelectedRows: NoContext,
+    getSelectedRowIds: NoContext,
+    getFilteredSelectedRowIds: NoContext,
+    selectRowsDiff: NoContext,
+    selectRowsByIdWithFlash: NoContext,
+    selectRowsWithFlashDiff: NoContext,
+    flashRows: NoContext,
+    flashRowsDiff: NoContext,
+    focusByRowById: NoContext,
+    ensureRowVisible: NoContext,
+    ensureSelectedRowIsVisible: NoContext,
+    getFirstRowId: NoContext,
+    autoSizeColumns: NoContext,
+    sizeColumnsToFit: NoContext,
+    editingCells: NoContext,
+    startCellEditing: NoContext,
+    resetFocusedCellAfterCellEditing: NoContext,
+    updatingCells: NoContext,
+    redrawRows: NoContext,
+    setExternallySelectedItemsAreInSync: NoContext,
+    waitForExternallySelectedItemsToBeInSync: NoContext,
+    addExternalFilter: NoContext,
+    removeExternalFilter: NoContext,
+    isExternalFilterPresent: NoContext,
+    doesExternalFilterPass: NoContext,
+    downloadCsv: NoContext,
+    onBulkEditingComplete: NoContext,
+    setOnBulkEditingComplete: NoContext,
+    showNoRowsOverlay: NoContext,
 });
 const useGridContext = () => useContext(GridContext);
 
@@ -848,6 +758,36 @@ const GridHeaderSelect = ({ api }) => {
             } }) }));
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$4 = ".GridContextMenu li.szh-menu__header{color:#6b6966;font-size:14px;font-weight:600;padding-left:16px;padding-right:16px;text-transform:none}.GridContextMenu li.szh-menu__item{padding-left:16px;padding-right:16px}.GridContextMenu li.szh-menu__item .copyMenuMenuItem{align-items:center;display:flex;gap:8px}.GridContextMenu li.szh-menu__item .copyMenuMenuItem__text{color:#2a292c;font-size:16px;font-weight:400;width:80px}.GridContextMenu li.szh-menu__item .copyMenuMenuItem__buttonDefault{background:none;border:2px solid #0000;display:flex;padding:6px}.GridContextMenu li.szh-menu__item .copyMenuMenuItem__buttonDefault.copyMenuMenuItem__buttonDefault--hidden:hover{border:2px solid #2a292c}.GridContextMenu li.szh-menu__item .copyMenuMenuItem__buttonDefault--hidden .LuiIcon{fill:#0000}.GridContextMenu li.szh-menu__item .LuiIcon,.GridContextMenu li.szh-menu__item .copyMenuMenuItem__buttonDefault--hidden:hover .LuiIcon{fill:#6b6966}.GridContextMenu li.szh-menu__item .LuiIcon[data-icon=ic_tick]{padding-left:4px;padding-right:4px}.GridContextMenu li.szh-menu__item--hover{background-color:#e2f3f7}";
+styleInject(css_248z$4);
+
 const EventHandlersContext = createContext({
     handleClick: () => { },
 });
@@ -2682,7 +2622,7 @@ const SubMenuFr = ({ 'aria-label': ariaLabel, className, disabled, direction, la
 };
 const SubMenu = withHovering('SubMenu', SubMenuFr);
 
-const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, }) => {
+const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, context, }) => {
     const { redrawRows, prePopupOps, resetFocusedCellAfterCellEditing, getSelectedRows } = useContext(GridContext);
     const [isOpen, setOpen] = useState(false);
     const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 });
@@ -2690,6 +2630,7 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
     const clickedColDefRef = useRef(null);
     const selectedRowsRef = useRef([]);
     const clickedRowRef = useRef(null);
+    const eventRef = useRef(undefined);
     const openMenu = useCallback((e) => {
         if (!e)
             return;
@@ -2709,16 +2650,424 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
         clickedColDefRef.current = event.colDef;
         selectedRowsRef.current = getSelectedRows();
         clickedRowRef.current = event.data;
+        eventRef.current = event;
         // This is actually a pointer event
         openMenu(event.event);
     }, [contextMenuSelectRow, getSelectedRows, openMenu]);
     return {
         openMenu,
         cellContextMenu,
-        component: ContextMenu ? (jsx(Fragment, { children: jsx(ControlledMenu, { anchorPoint: anchorPoint, state: isOpen ? 'open' : 'closed', direction: "right", onClose: closeMenu, children: isOpen && (jsx(ContextMenu, { selectedRows: selectedRowsRef.current, clickedRow: clickedRowRef.current, colDef: clickedColDefRef.current, close: closeMenu })) }) })) : null,
+        contextMenuComponent: ContextMenu ? (jsx(Fragment, { children: jsx(ControlledMenu, { className: 'GridContextMenu', anchorPoint: anchorPoint, state: isOpen ? 'open' : 'closed', direction: "right", onClose: closeMenu, children: isOpen && (jsx(ContextMenu, { selectedRows: selectedRowsRef.current, clickedRow: clickedRowRef.current, colDef: clickedColDefRef.current, event: eventRef.current, close: closeMenu, context: context })) }) })) : null,
+    };
+};
+
+const typedEntries = (obj) => Object.entries(obj);
+
+const gridCopyOptions = {
+    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 },
+};
+const CopyOptionsStorageKey = 'stepAgGrid_defaultCopy';
+const useGridCopySettings = () => {
+    const [copyType, _setCopyType] = useState(() => {
+        const defaultCopy = window.localStorage.getItem(CopyOptionsStorageKey) ?? '';
+        return Object.keys(gridCopyOptions).includes(defaultCopy) ? defaultCopy : 'html';
+    });
+    const setCopyType = useCallback((key) => {
+        window.localStorage.setItem(CopyOptionsStorageKey, key);
+        _setCopyType(key);
+    }, []);
+    return {
+        copyType,
+        setCopyType,
     };
 };
 
+const GridRangeSelectContextMenu = ({ event, context, }) => {
+    const developerContextMenu = !!event?.event?.ctrlKey && !!event?.event?.shiftKey;
+    const onCopy = useMemo(() => context?.onCopy, [context?.onCopy]);
+    const onClick = useCallback((type) => {
+        onCopy?.(type);
+    }, [onCopy]);
+    return (jsxs(Fragment, { children: [jsx(MenuHeader, { children: "Copy as" }), typedEntries(gridCopyOptions).map(([key, { icon, text, developer }]) => {
+                return ((!developer || developerContextMenu) && (jsx(MenuItem, { onClick: () => void onClick(key), children: jsxs("div", { className: 'copyMenuMenuItem', children: [jsx(LuiIcon, { name: icon, alt: text, size: 'md' }), jsx("div", { className: 'copyMenuMenuItem__text', children: text })] }) }, key)));
+            }), jsx(MenuDivider, {}), jsx(MenuHeader, { children: "Set copy default" }), typedEntries(gridCopyOptions).map(([key, { text, developer }]) => {
+                return (!developer && (jsx(MenuItem, { onClick: (e) => {
+                        context?.setCopyType(key);
+                        e.keepOpen = true;
+                    }, children: jsxs("div", { className: clsx('copyMenuMenuItem', context?.copyType === key ? '' : 'copyMenuMenuItem__buttonDefault--hidden'), children: [jsx(LuiIcon, { name: 'ic_tick', alt: 'CSV', size: 'sm' }), jsx("div", { className: 'copyMenuMenuItem__text', children: text })] }) }, 'default_' + key)));
+            })] }));
+};
+
+const agGridSelectRowColId = 'ag-Grid-SelectionColumn';
+
+const useGridCopy = ({ ranges, rangeStartRef, rangeEndRef, hasSelectedMoreThanOneCellRef, cellContextMenu, }) => {
+    const showToast = useShowLUIMessage();
+    const { getSelectedRowIds } = useGridContext();
+    const { getColDef, getCellValue } = useGridContext();
+    const { copyType, setCopyType } = useGridCopySettings();
+    const onCopy = useCallback((type = 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) => {
+                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 = {};
+        headers.forEach((headerName, i) => {
+            const colId = filteredSelectedColIds[i];
+            maxCellLength[colId] = headerName.length;
+        });
+        const rows = [];
+        if (type === 'csv' || type === 'html') {
+            rows.push(headers);
+        }
+        selectedNodes.forEach((node) => {
+            const row = [];
+            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);
+                        break;
+                    case 'csv':
+                        value = encodeCSVValue(value);
+                        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) => {
+        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({
+        contextMenu: (GridRangeSelectContextMenu),
+        context: { onCopy, copyType, setCopyType },
+    });
+    const rangeSelectInterceptContextMenu = useCallback((event) => rangeStartRef.current == null ? cellContextMenu(event) : rangeSelectContextMenu(event), [cellContextMenu, rangeSelectContextMenu]);
+    return {
+        onCopyEvent,
+        rangeSelectInterceptContextMenu,
+        rangeSelectContextMenuComponent,
+    };
+};
+const encodeMarkdownValue = (value) => {
+    return value.replaceAll('|', '\\|');
+};
+const encodeCSVValue = (value) => {
+    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;
+};
+
+const useGridRangeSelection = ({ enableRangeSelection, gridDivRef, rangeStartRef, rangeEndRef, hasSelectedMoreThanOneCellRef, rangeSortedNodesRef, }) => {
+    const [refreshIntervalEnabled, setRefreshIntervalEnabled] = useState(false);
+    const ranges = useCallback(() => {
+        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, el2) => elStyleLeft(el1) - elStyleLeft(el2);
+        const elStyleLeft = (el) => parseFloat(el.style.left) ?? 0;
+        const getSortedColIds = () => {
+            //
+            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) => {
+        //
+        // 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, mouseDown) => {
+        if (!enableRangeSelection) {
+            return;
+        }
+        const button = e.event.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 = [];
+            e.api.forEachNodeAfterFilterAndSort((node) => 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) => {
+        const button = e.event.buttons;
+        if (button === 1) {
+            clearRangeSelection();
+        }
+        onCellMouseOver(e, true);
+    }, [onCellMouseOver]);
+    return { clearRangeSelection, ranges, onCellMouseDown, onCellMouseOver };
+};
+
 const GridLoadingOverlayComponentFr = (props, externalRef) => (jsx("div", { ref: externalRef, style: {
         left: 0,
         top: 0,
@@ -2900,8 +3249,26 @@ ModuleRegistry.registerModules([AllCommunityModule]);
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, onCellFocused: paramsOnCellFocused, maxInitialWidth, suppressReadOnlyStyle = false, ...params }) => {
-    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnBulkEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, startCellEditing: propStartCellEditing, } = useGridContext();
+const Grid = ({ theme = 'ag-theme-step-default', 'data-testid': dataTestId, 
+// ─── Grid State ───────────────────────────────
+suppressReadOnlyStyle = false, 
+// ─── Data & Columns ───────────────────────────
+defaultPostSort = true, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, rowSelection = 'multiple', sizeColumns = 'auto', 
+// ─── Selection ────────────────────────────────
+autoSelectFirstRow, enableRangeSelection = true, externalSelectedIds, externalSelectedItems, selectColumnPinned = 'left', selectable, setExternalSelectedIds, setExternalSelectedItems, 
+// ─── Editing ──────────────────────────────────
+singleClickEdit = false, 
+// ─── Context Menu ─────────────────────────────
+contextMenuSelectRow = false, contextMenu, 
+// ─── Callbacks / Events ───────────────────────
+onCellFocused: paramsOnCellFocused, onColumnMoved, 
+// ─── Row Behavior ─────────────────────────────
+suppressColumnVirtualization = true, 
+// ─── Miscellaneous ────────────────────────────
+maxInitialWidth, 
+// ─── Spread Remaining Params ──────────────────
+...params }) => {
+    const { setApis, setExternallySelectedItemsAreInSync, setOnBulkEditingComplete, gridReady, gridRenderState, externallySelectedItemsAreInSync, showNoRowsOverlay, autoSizeColumns, sizeColumnsToFit, doesExternalFilterPass, ensureRowVisible, ensureSelectedRowIsVisible, focusByRowById, getColDef, getFirstRowId, isExternalFilterPresent, prePopupOps, selectRowsById, startCellEditing: propStartCellEditing, } = useGridContext();
     // CellEditingStop event happens too much for one edit
     const startedEditRef = useRef(false);
     const startCellEditing = useCallback((props) => {
@@ -2910,7 +3277,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     }, [propStartCellEditing]);
     const { updatedDep, anyUpdating, updatingCols } = useContext(GridUpdatingContext);
     const gridDivRef = useRef(null);
-    const lastSelectedIds = useRef([]);
+    const lastSelectedIds = useRef();
     const [staleGrid, setStaleGrid] = useState(false);
     const [autoSized, setAutoSized] = useState(false);
     const postSortRows = usePostSortRowsHook({ setStaleGrid });
@@ -3036,12 +3403,13 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
      */
     const hasSelectedFirstItem = useRef(false);
     useEffect(() => {
-        if (!gridReady || hasSelectedFirstItem.current || !rowData || !externallySelectedItemsAreInSync)
+        if (!gridReady || hasSelectedFirstItem.current || !rowData || !externallySelectedItemsAreInSync) {
             return;
+        }
         hasSelectedFirstItem.current = true;
-        if (isNotEmpty(rowData) && isEmpty(params.externalSelectedItems)) {
+        if (isNotEmpty(rowData) && isEmpty(externalSelectedItems) && isEmpty(externalSelectedIds)) {
             const firstRowId = getFirstRowId();
-            if (params.autoSelectFirstRow) {
+            if (autoSelectFirstRow && selectable) {
                 selectRowsById([firstRowId]);
             }
             else {
@@ -3052,31 +3420,52 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         externallySelectedItemsAreInSync,
         focusByRowById,
         gridReady,
-        params.externalSelectedItems,
-        params.autoSelectFirstRow,
+        externalSelectedItems,
+        autoSelectFirstRow,
         rowData,
         selectRowsById,
         getFirstRowId,
+        selectable,
+        externalSelectedIds,
     ]);
     /**
      * Ensure external selected items list is in sync with panel.
      */
     const synchroniseExternalStateToGridSelection = useCallback(({ api }) => {
-        if (!params.externalSelectedItems || !params.setExternalSelectedItems) {
-            setExternallySelectedItemsAreInSync(true);
-            return;
+        if (externalSelectedIds && setExternalSelectedIds) {
+            const selectedRowsIds = api.getSelectedRows().map((row) => row.id);
+            // We don't want to update selected Items if it hasn't changed to prevent excess renders
+            if (externalSelectedIds.length !== selectedRowsIds.length ||
+                isNotEmpty(xorBy(selectedRowsIds, externalSelectedIds))) {
+                setExternallySelectedItemsAreInSync(false);
+                setExternalSelectedIds([...selectedRowsIds]);
+            }
+            else {
+                setExternallySelectedItemsAreInSync(true);
+            }
         }
-        const selectedRows = api.getSelectedRows();
-        // We don't want to update selected Items if it hasn't changed to prevent excess renders
-        if (params.externalSelectedItems.length !== selectedRows.length ||
-            isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))) {
-            setExternallySelectedItemsAreInSync(false);
-            params.setExternalSelectedItems([...selectedRows]);
+        else if (externalSelectedItems && setExternalSelectedItems) {
+            const selectedRows = api.getSelectedRows();
+            // We don't want to update selected Items if it hasn't changed to prevent excess renders
+            if (externalSelectedItems.length !== selectedRows.length ||
+                isNotEmpty(xorBy(selectedRows, externalSelectedItems, (row) => row.id))) {
+                setExternallySelectedItemsAreInSync(false);
+                setExternalSelectedItems([...selectedRows]);
+            }
+            else {
+                setExternallySelectedItemsAreInSync(true);
+            }
         }
         else {
             setExternallySelectedItemsAreInSync(true);
         }
-    }, [params, setExternallySelectedItemsAreInSync]);
+    }, [
+        externalSelectedIds,
+        externalSelectedItems,
+        setExternalSelectedIds,
+        setExternalSelectedItems,
+        setExternallySelectedItemsAreInSync,
+    ]);
     /**
      * Synchronise externally selected items to grid.
      * If new ids are selected scroll them into view.
@@ -3084,19 +3473,26 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const synchroniseExternallySelectedItemsToGrid = useCallback(() => {
         if (!gridReady)
             return;
-        if (!params.externalSelectedItems) {
+        if (!externalSelectedItems && !externalSelectedIds) {
             setExternallySelectedItemsAreInSync(true);
             return;
         }
-        const selectedIds = params.externalSelectedItems.map((row) => row.id);
-        const lastNewId = last(difference(selectedIds, lastSelectedIds.current));
+        const selectedIds = externalSelectedIds ?? externalSelectedItems?.map((row) => row.id);
+        const lastNewId = last(difference(selectedIds, lastSelectedIds.current ?? []));
         if (lastNewId != null) {
             ensureRowVisible(lastNewId);
         }
         lastSelectedIds.current = selectedIds;
         selectRowsById(selectedIds);
         setExternallySelectedItemsAreInSync(true);
-    }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
+    }, [
+        gridReady,
+        externalSelectedItems,
+        externalSelectedIds,
+        selectRowsById,
+        setExternallySelectedItemsAreInSync,
+        ensureRowVisible,
+    ]);
     /**
      * Combine grid and cell editable into one function
      */
@@ -3138,7 +3534,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const columnDefs = useMemo(() => {
         return params.columnDefs.map(mapColDef);
     }, [params.columnDefs, mapColDef]);
-    const hasExternallySelectedItems = !!params.setExternalSelectedItems;
+    const hasExternallySelectedItems = !!setExternalSelectedItems || !!setExternalSelectedIds;
     /**
      * When grid is ready set the apis to the grid context and sync selected items to grid.
      */
@@ -3194,15 +3590,6 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
         }
     }, [startCellEditing]);
-    /**
-     * Handle single click edits
-     */
-    const onCellClicked = useCallback((event) => {
-        const editable = fnOrVar(event.colDef?.editable, event);
-        if ((editable && event.colDef.singleClickEdit) ?? singleClickEdit) {
-            void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
-        }
-    }, [singleClickEdit, startCellEditing]);
     const onCellEditingStopped = useCallback((event) => {
         if (!startedEditRef.current) {
             return;
@@ -3251,6 +3638,78 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             prePopupOps();
         }
     }, [prePopupOps, startCellEditing]);
+    const { cellContextMenu, contextMenuComponent } = useGridContextMenu({
+        contextMenu,
+        contextMenuSelectRow,
+    });
+    const hasSelectedMoreThanOneCellRef = useRef(false);
+    const rangeStartRef = useRef(null);
+    const rangeEndRef = useRef(null);
+    const rangeSortedNodesRef = useRef(null);
+    const { clearRangeSelection, ranges, onCellMouseDown, onCellMouseOver } = useGridRangeSelection({
+        enableRangeSelection,
+        gridDivRef,
+        rangeStartRef,
+        rangeEndRef,
+        hasSelectedMoreThanOneCellRef,
+        rangeSortedNodesRef,
+    });
+    const { onCopyEvent, rangeSelectInterceptContextMenu, rangeSelectContextMenuComponent } = useGridCopy({
+        ranges,
+        rangeStartRef,
+        rangeEndRef,
+        hasSelectedMoreThanOneCellRef,
+        cellContextMenu,
+    });
+    const onSortChanged = useCallback(() => {
+        clearRangeSelection();
+        ensureSelectedRowIsVisible();
+    }, [clearRangeSelection, ensureSelectedRowIsVisible]);
+    /**
+     * Handle single click edits
+     */
+    const onCellClicked = useCallback((event) => {
+        if (rangeStartRef.current && rangeEndRef.current) {
+            // This is to detect difference between a single click and a click drag return to cell.
+            if (rangeEndRef.current.timestamp - rangeStartRef.current.timestamp < 100) {
+                clearRangeSelection();
+            }
+            return;
+        }
+        const editable = fnOrVar(event.colDef?.editable, event);
+        if ((editable && event.colDef.singleClickEdit) ?? singleClickEdit) {
+            void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
+        }
+    }, [clearRangeSelection, singleClickEdit, startCellEditing]);
+    /**
+     * Set of column I'd's that are prevented from auto-sizing as they are user set
+     */
+    const userSizedColIds = useRef(new Map());
+    /**
+     * Lock/unlock column width on user edit/reset.
+     */
+    const onColumnResized = useCallback((e) => {
+        const colId = e.column?.getColId();
+        if (colId == null) {
+            return;
+        }
+        const width = e.column?.getActualWidth();
+        if (width == null) {
+            return;
+        }
+        switch (e.source) {
+            case 'uiColumnResized':
+                userSizedColIds.current.set(colId, width);
+                break;
+            case 'autosizeColumns':
+                userSizedColIds.current.delete(colId);
+                break;
+        }
+    }, []);
+    const columnMoved = useCallback((e) => {
+        clearRangeSelection();
+        onColumnMoved?.(e);
+    }, [clearRangeSelection, onColumnMoved]);
     /**
      * Once the grid has auto-sized we want to run fit to fit the grid in its container,
      * but we don't want the non-flex auto-sized columns to "fit" size, so suppressSizeToFit is set to true.
@@ -3268,7 +3727,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             let comparator = colDef.comparator;
             if (sortable && !comparator) {
                 comparator = (value1, value2, node1, node2) => {
-                    let r = 0;
+                    let r;
                     if (typeof valueFormatter === 'function') {
                         r = compareNaturalInsensitive(valueFormatter({
                             data: node1.data,
@@ -3358,37 +3817,6 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
         prevLoading.current = newLoading;
     }, [params.loading, rowData, showNoRowsOverlay]);
-    /**
-     * Set of column I'd's that are prevented from auto-sizing as they are user set
-     */
-    const userSizedColIds = useRef(new Map());
-    /**
-     * Lock/unlock column width on user edit/reset.
-     */
-    const onColumnResized = useCallback((e) => {
-        const colId = e.column?.getColId();
-        if (colId == null) {
-            return;
-        }
-        const width = e.column?.getActualWidth();
-        if (width == null) {
-            return;
-        }
-        switch (e.source) {
-            case 'uiColumnResized':
-                userSizedColIds.current.set(colId, width);
-                /*const colDef = e.column?.getColDef();
-                  if (!colDef?.flex) {
-                    onGridResize(e);
-                  }*/
-                break;
-            case 'autosizeColumns':
-                userSizedColIds.current.delete(colId);
-                //onGridResize(e);
-                break;
-        }
-    }, []);
-    const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
     const startDragYRef = useRef(null);
     const clearHighlightRowClasses = useCallback(() => {
         document.querySelectorAll(`.ag-row-highlight-above`)?.forEach((el) => {
@@ -3465,11 +3893,14 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
     }, [params, clearHighlightRowClasses]);
     useEffect(() => {
-        if (params.setExternalSelectedItems && selectable == null) {
-            console.warn('<Grid/> has setExternalSelectedItems parameter, but is missing selectable parameter,' +
+        if ((setExternalSelectedItems || setExternalSelectedIds) && selectable == null) {
+            console.warn('<Grid/> has setExternalSelectedItems/setExternalSelectedIds parameter, but is missing selectable parameter,' +
                 'this will cause weird delays in editing.\nIf you need to hide selection column use hideSelectColumn=true');
         }
-    }, [params.setExternalSelectedItems, selectable]);
+    }, 
+    // Only needs to run on startup
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectable]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnBulkEditingComplete(params.onBulkEditingComplete);
     const getRowId = useCallback((params) => `${params.data.id}`, []);
@@ -3513,25 +3944,24 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 }
                 return false;
             },
-            onCellClicked: params.enableSelectionWithoutKeys || params.enableClickSelection
-                ? undefined
-                : clickInputWhenContainingCellClicked,
+            // enableClickSelection = true means ag-grid auto selects row if you click outside the checkbox
+            // if it's false we have to do it.
+            onCellClicked: params.enableClickSelection ? undefined : clickInputWhenContainingCellClicked,
         };
     }, [
-        params.enableClickSelection,
-        params.enableSelectionWithoutKeys,
         params.hideSelectColumn,
         params.onRowDragEnd,
         rowSelection,
         selectColumnPinned,
         selectable,
+        params.enableClickSelection,
     ]);
     const onGridSizeChanged = useCallback((event) => {
         if (sizeColumns === 'fit' || (['auto', 'auto-skip-headers'].includes(sizeColumns) && hasSetContentSize.current)) {
             event.api.sizeColumnsToFit();
         }
     }, [sizeColumns]);
-    return (jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { theme: 'legacy', rowSelection: selectable
+    return (jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [contextMenuComponent, rangeSelectContextMenuComponent, jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: jsx(AgGridReact, { theme: 'legacy', domLayout: params.domLayout, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, getRowId: getRowId, rowData: rowData, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, animateRows: params.animateRows ?? false, doesExternalFilterPass: doesExternalFilterPass, isExternalFilterPresent: isExternalFilterPresent, maintainColumnOrder: true, noRowsOverlayComponent: noRowsOverlayComponent, onCellClicked: onCellClicked, onCellContextMenu: rangeSelectInterceptContextMenu, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellMouseDown: onCellMouseDown, onCellMouseOver: onCellMouseOver, onColumnMoved: columnMoved, onColumnResized: onColumnResized, onColumnVisible: () => void setInitialContentSize(), onGridReady: onGridReady, onGridSizeChanged: onGridSizeChanged, onModelUpdated: onModelUpdated, onRowClicked: params.onRowClicked, onRowDataUpdated: onRowDataUpdated, onRowDoubleClicked: params.onRowDoubleClicked, onRowDragCancel: clearHighlightRowClasses, onRowDragEnd: onRowDragEnd, onRowDragMove: onRowDragMove, onSelectionChanged: synchroniseExternalStateToGridSelection, onSortChanged: onSortChanged, pinnedBottomRowData: params.pinnedBottomRowData, pinnedTopRowData: params.pinnedTopRowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, preventDefaultOnContextMenu: true, quickFilterParser: quickFilterParser, rowClassRules: params.rowClassRules, rowDragText: params.rowDragText, rowHeight: rowHeight, rowSelection: selectable
                         ? {
                             enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                             enableClickSelection: params.enableClickSelection ?? false,
@@ -3541,7 +3971,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                                 headerCheckbox: false,
                             }),
                         }
-                        : undefined, selectionColumnDef: selectionColumnDef, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onGridSizeChanged: onGridSizeChanged, onColumnVisible: () => void setInitialContentSize(), onRowDataUpdated: onRowDataUpdated, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked, suppressStartEditOnTab: true }) })] }));
+                        : undefined, selectionColumnDef: selectionColumnDef, suppressCellFocus: params.suppressCellFocus, suppressClickEdit: true, suppressColumnVirtualisation: suppressColumnVirtualization, suppressStartEditOnTab: true }) })] }));
 };
 const quickFilterParser = (filterStr) => {
     // filter is exact matches exactly groups separated by commas
@@ -3782,33 +4212,6 @@ const GridFilterButtons = ({ className, luiButtonProps, options, }) => {
     return (jsx("div", { className: clsx(className, 'flex-col-center'), children: jsx(LuiButtonGroup, { children: options.map((option, index) => (jsx(LuiButton, { ...luiButtonProps, className: clsx(`lui-button lui-button-secondary`, selectedOption?.label === option.label && `lui-button-active`, luiButtonProps?.className), onClick: () => setSelectedOption(option), children: option.label }, `${index}`))) }) }));
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
 var css_248z$3 = ".GridFilterColsMultiSelect{background:#fff;font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:600;padding:8px}.GridFilterColsMultiSelect .LuiSelect-label-text{color:#6b6966;display:inline-block}.GridFilterColsMultiSelect .LuiCheckboxInput-item,.GridFilterColsMultiSelect .LuiCheckboxInput-selectAll{color:#2a292c;font-size:16px;font-weight:600;letter-spacing:0;line-height:20px;line-height:24px;margin-bottom:0}";
 styleInject(css_248z$3);
 
@@ -4616,14 +5019,14 @@ const TextInputFormatted = (props) => {
 
 const bearingValueFormatter = (value) => {
     const safeValue = typeof value === 'string' ? parseFloat(value) : value;
-    if (safeValue == null) {
+    if (safeValue == null || Number.isNaN(safeValue)) {
         return '–';
     }
     return convertDDToDMS(safeValue, false);
 };
 const bearingCorrectionValueFormatter = (value) => {
     const safeValue = value;
-    if (safeValue == null) {
+    if (safeValue == null || Number.isNaN(safeValue)) {
         return '–';
     }
     if (typeof safeValue === 'string') {
@@ -5419,6 +5822,7 @@ const GridPopoutEditMultiSelectGrid = (colDef, props) => GridCell(colDef, {
     },
 });
 
+const GridCellBearingValueFormatter = (params) => bearingValueFormatter(params.value) ?? '';
 const GridPopoverEditBearingLike = (colDef, props) => GridCell({
     valueFormatter: (params) => props.editorParams?.formatValue(params.value) ?? '',
     ...colDef,
@@ -5571,6 +5975,7 @@ const GridContextProvider = (props) => {
         }
         return gridApi && !gridApi.isDestroyed() ? hasApiFn(gridApi) : noApiFn();
     }, [gridApi]);
+    const getCellValue = useCallback((...props) => gridApi?.getCellValue(...props), [gridApi]);
     /**
      * Scroll row into view by Id.
      *
@@ -5730,7 +6135,7 @@ const GridContextProvider = (props) => {
                                     // 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);
                     }
@@ -6169,6 +6574,7 @@ const GridContextProvider = (props) => {
             getSelectedRowIds,
             getFilteredSelectedRowIds,
             getFirstRowId,
+            getCellValue,
             editingCells,
             ensureRowVisible,
             ensureSelectedRowIsVisible,
@@ -6348,5 +6754,5 @@ const useDeferredPromise = () => {
     };
 };
 
-export { ActionButton, CancelPromise, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsMultiSelect, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, TextInputValidator, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, colStateFlexed, colStateId, colStateNotFlexed, compareNaturalInsensitive, convertDDToDMS, createCheckboxMultiFilterParams, defaultValueFormatter, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, primitiveToSelectOption, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait, waitForCondition };
+export { ActionButton, CancelPromise, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellBearingValueFormatter, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsMultiSelect, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, TextInputValidator, agGridSelectRowColId, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, colStateFlexed, colStateId, colStateNotFlexed, compareNaturalInsensitive, convertDDToDMS, createCheckboxMultiFilterParams, defaultValueFormatter, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, primitiveToSelectOption, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait, waitForCondition };
 //# sourceMappingURL=step-ag-grid.esm.js.map