@linzjs/step-ag-grid 29.13.0 → 29.14.1

package/dist/step-ag-grid.cjs

@@ -419,6 +419,9 @@ function useInterval(callback, delay) {
     savedCallback.current = callback;
   }, [callback]);
   React.useEffect(() => {
+    if (delay === null) {
+      return;
+    }
     const id = setInterval(() => {
       savedCallback.current();
     }, delay);
@@ -435,6 +438,7 @@ const NoContext = () => {
 const GridContext = React.createContext({
     gridReady: false,
     gridRenderState: () => null,
+    getCellValue: NoContext,
     getColDef: NoContext,
     getColumns: NoContext,
     getColumnIds: NoContext,
@@ -756,6 +760,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 = React.createContext({
     handleClick: () => { },
 });
@@ -2590,7 +2624,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 } = React.useContext(GridContext);
     const [isOpen, setOpen] = React.useState(false);
     const [anchorPoint, setAnchorPoint] = React.useState({ x: 0, y: 0 });
@@ -2598,6 +2632,7 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
     const clickedColDefRef = React.useRef(null);
     const selectedRowsRef = React.useRef([]);
     const clickedRowRef = React.useRef(null);
+    const eventRef = React.useRef(undefined);
     const openMenu = React.useCallback((e) => {
         if (!e)
             return;
@@ -2617,15 +2652,423 @@ 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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ControlledMenu, { anchorPoint: anchorPoint, state: isOpen ? 'open' : 'closed', direction: "right", onClose: closeMenu, children: isOpen && (jsxRuntime.jsx(ContextMenu, { selectedRows: selectedRowsRef.current, clickedRow: clickedRowRef.current, colDef: clickedColDefRef.current, close: closeMenu })) }) })) : null,
+        contextMenuComponent: ContextMenu ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ControlledMenu, { className: 'GridContextMenu', anchorPoint: anchorPoint, state: isOpen ? 'open' : 'closed', direction: "right", onClose: closeMenu, children: isOpen && (jsxRuntime.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] = React.useState(() => {
+        const defaultCopy = window.localStorage.getItem(CopyOptionsStorageKey) ?? '';
+        return Object.keys(gridCopyOptions).includes(defaultCopy) ? defaultCopy : 'html';
+    });
+    const setCopyType = React.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 = React.useMemo(() => context?.onCopy, [context?.onCopy]);
+    const onClick = React.useCallback((type) => {
+        onCopy?.(type);
+    }, [onCopy]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuHeader, { children: "Copy as" }), typedEntries(gridCopyOptions).map(([key, { icon, text, developer }]) => {
+                return ((!developer || developerContextMenu) && (jsxRuntime.jsx(MenuItem, { onClick: () => void onClick(key), children: jsxRuntime.jsxs("div", { className: 'copyMenuMenuItem', children: [jsxRuntime.jsx(lui.LuiIcon, { name: icon, alt: text, size: 'md' }), jsxRuntime.jsx("div", { className: 'copyMenuMenuItem__text', children: text })] }) }, key)));
+            }), jsxRuntime.jsx(MenuDivider, {}), jsxRuntime.jsx(MenuHeader, { children: "Set copy default" }), typedEntries(gridCopyOptions).map(([key, { text, developer }]) => {
+                return (!developer && (jsxRuntime.jsx(MenuItem, { onClick: (e) => {
+                        context?.setCopyType(key);
+                        e.keepOpen = true;
+                    }, children: jsxRuntime.jsxs("div", { className: clsx('copyMenuMenuItem', context?.copyType === key ? '' : 'copyMenuMenuItem__buttonDefault--hidden'), children: [jsxRuntime.jsx(lui.LuiIcon, { name: 'ic_tick', alt: 'CSV', size: 'sm' }), jsxRuntime.jsx("div", { className: 'copyMenuMenuItem__text', children: text })] }) }, 'default_' + key)));
+            })] }));
+};
+
+const agGridSelectRowColId = 'ag-Grid-SelectionColumn';
+
+const useGridCopy = ({ ranges, rangeStartRef, rangeEndRef, hasSelectedMoreThanOneCellRef, cellContextMenu, }) => {
+    const showToast = lui.useShowLUIMessage();
+    const { getSelectedRowIds } = useGridContext();
+    const { getColDef, getCellValue } = useGridContext();
+    const { copyType, setCopyType } = useGridCopySettings();
+    const onCopy = React.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 = lodashEs.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 = React.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 = React.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] = React.useState(false);
+    const ranges = React.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 = React.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 = React.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 = React.useCallback(() => {
+        hasSelectedMoreThanOneCellRef.current = false;
+        setRefreshIntervalEnabled(false);
+        hasSelectedMoreThanOneCellRef.current = false;
+        rangeStartRef.current = null;
+        rangeEndRef.current = null;
+        updateRangeSelectionCellClasses();
+    }, [updateRangeSelectionCellClasses]);
+    const onCellMouseOver = React.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 = React.useCallback((e) => {
+        const button = e.event.buttons;
+        if (button === 1) {
+            clearRangeSelection();
+        }
+        onCellMouseOver(e, true);
+    }, [onCellMouseOver]);
+    return { clearRangeSelection, ranges, onCellMouseDown, onCellMouseOver };
+};
 
 const GridLoadingOverlayComponentFr = (props, externalRef) => (jsxRuntime.jsx("div", { ref: externalRef, style: {
         left: 0,
@@ -2808,8 +3251,26 @@ agGridCommunity.ModuleRegistry.registerModules([agGridCommunity.AllCommunityModu
 /**
  * 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, autoSelectFirstRow, onCellFocused: paramsOnCellFocused, maxInitialWidth, suppressReadOnlyStyle = false, externalSelectedItems, setExternalSelectedItems, externalSelectedIds, setExternalSelectedIds, ...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 = false, 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 = React.useRef(false);
     const startCellEditing = React.useCallback((props) => {
@@ -2948,7 +3409,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             return;
         }
         hasSelectedFirstItem.current = true;
-        if (isNotEmpty(rowData) && lodashEs.isEmpty(externalSelectedItems)) {
+        if (isNotEmpty(rowData) && lodashEs.isEmpty(externalSelectedItems) && lodashEs.isEmpty(externalSelectedIds)) {
             const firstRowId = getFirstRowId();
             if (autoSelectFirstRow && selectable) {
                 selectRowsById([firstRowId]);
@@ -2967,6 +3428,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         selectRowsById,
         getFirstRowId,
         selectable,
+        externalSelectedIds,
     ]);
     /**
      * Ensure external selected items list is in sync with panel.
@@ -3130,15 +3592,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 = React.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 = React.useCallback((event) => {
         if (!startedEditRef.current) {
             return;
@@ -3187,6 +3640,78 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             prePopupOps();
         }
     }, [prePopupOps, startCellEditing]);
+    const { cellContextMenu, contextMenuComponent } = useGridContextMenu({
+        contextMenu,
+        contextMenuSelectRow,
+    });
+    const hasSelectedMoreThanOneCellRef = React.useRef(false);
+    const rangeStartRef = React.useRef(null);
+    const rangeEndRef = React.useRef(null);
+    const rangeSortedNodesRef = React.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 = React.useCallback(() => {
+        clearRangeSelection();
+        ensureSelectedRowIsVisible();
+    }, [clearRangeSelection, ensureSelectedRowIsVisible]);
+    /**
+     * Handle single click edits
+     */
+    const onCellClicked = React.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 = React.useRef(new Map());
+    /**
+     * Lock/unlock column width on user edit/reset.
+     */
+    const onColumnResized = React.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 = React.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.
@@ -3294,37 +3819,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 = React.useRef(new Map());
-    /**
-     * Lock/unlock column width on user edit/reset.
-     */
-    const onColumnResized = React.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 = React.useRef(null);
     const clearHighlightRowClasses = React.useCallback(() => {
         document.querySelectorAll(`.ag-row-highlight-above`)?.forEach((el) => {
@@ -3452,15 +3946,24 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 }
                 return false;
             },
-            onCellClicked: 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.hideSelectColumn, params.onRowDragEnd, rowSelection, selectColumnPinned, selectable]);
+    }, [
+        params.hideSelectColumn,
+        params.onRowDragEnd,
+        rowSelection,
+        selectColumnPinned,
+        selectable,
+        params.enableClickSelection,
+    ]);
     const onGridSizeChanged = React.useCallback((event) => {
         if (sizeColumns === 'fit' || (['auto', 'auto-skip-headers'].includes(sizeColumns) && hasSetContentSize.current)) {
             event.api.sizeColumnsToFit();
         }
     }, [sizeColumns]);
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { theme: 'legacy', rowSelection: selectable
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [contextMenuComponent, rangeSelectContextMenuComponent, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: jsxRuntime.jsx(agGridReact.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,
@@ -3470,7 +3973,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
@@ -3711,33 +4214,6 @@ const GridFilterButtons = ({ className, luiButtonProps, options, }) => {
     return (jsxRuntime.jsx("div", { className: clsx(className, 'flex-col-center'), children: jsxRuntime.jsx(lui.LuiButtonGroup, { children: options.map((option, index) => (jsxRuntime.jsx(lui.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);
 
@@ -4545,14 +5021,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') {
@@ -5348,6 +5824,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,
@@ -5500,6 +5977,7 @@ const GridContextProvider = (props) => {
         }
         return gridApi && !gridApi.isDestroyed() ? hasApiFn(gridApi) : noApiFn();
     }, [gridApi]);
+    const getCellValue = React.useCallback((...props) => gridApi?.getCellValue(...props), [gridApi]);
     /**
      * Scroll row into view by Id.
      *
@@ -5659,7 +6137,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);
                     }
@@ -6098,6 +6576,7 @@ const GridContextProvider = (props) => {
             getSelectedRowIds,
             getFilteredSelectedRowIds,
             getFirstRowId,
+            getCellValue,
             editingCells,
             ensureRowVisible,
             ensureSelectedRowIsVisible,
@@ -6288,6 +6767,7 @@ exports.GenericCellEditorComponentWrapper = GenericCellEditorComponentWrapper;
 exports.Grid = Grid;
 exports.GridButton = GridButton;
 exports.GridCell = GridCell;
+exports.GridCellBearingValueFormatter = GridCellBearingValueFormatter;
 exports.GridCellFiller = GridCellFiller;
 exports.GridCellFillerColId = GridCellFillerColId;
 exports.GridCellMultiEditor = GridCellMultiEditor;
@@ -6351,6 +6831,7 @@ exports.SubMenu = SubMenu;
 exports.TextAreaInput = TextAreaInput;
 exports.TextInputFormatted = TextInputFormatted;
 exports.TextInputValidator = TextInputValidator;
+exports.agGridSelectRowColId = agGridSelectRowColId;
 exports.bearingCorrectionRangeValidator = bearingCorrectionRangeValidator;
 exports.bearingCorrectionValueFormatter = bearingCorrectionValueFormatter;
 exports.bearingNumberParser = bearingNumberParser;