) => {\n if (props.loading) {\n return ;\n }\n if (props.rowCount === 0) {\n return (\n \n \n {props.noRowsOverlayText ?? 'There are currently no rows'}\n
\n );\n }\n if (props.filteredRowCount === 0) {\n return (\n \n \n {props.noRowsMatchingOverlayText ?? 'All rows have been filtered'}\n
\n );\n }\n return ;\n};\n\nexport const GridNoRowsOverlay = forwardRef(GridNoRowsOverlayFr);\n","import { IRowNode } from 'ag-grid-community';\nimport { ColumnState } from 'ag-grid-community';\nimport { PostSortRowsParams } from 'ag-grid-community';\nimport { isEmpty } from 'lodash-es';\nimport { useCallback, useContext, useRef } from 'react';\n\nimport { GridContext } from '../contexts/GridContext';\n\ninterface PostSortRowsHookProps {\n setStaleGrid: (stale: boolean) => void;\n}\n\n/**\n * Retains last sort order from via .\n * Then applies this sort until next sort column change.\n * Handles stale sort, when you edit a row but don't want to re-sort.\n */\nexport const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) => {\n const { redrawRows } = useContext(GridContext);\n\n // On first run we need to init the first backed up sort order\n const initialised = useRef(false);\n\n // Used to detect sort order has changed since last run\n const lastSortOrderHash = useRef('');\n\n // Used to detect if sort order was the same, has the direction changed\n const previousRowSortIndexRef = useRef>({});\n\n // stale sort is when there's a sort and user edits a row\n // this applies a class to the div wrapping the grid which in turn adds a * beside the sort arrow\n const sortWasStale = useRef(false);\n\n // Previous col sort is stored and reapplied if the sort direction changes on the same column and the sort was stale\n // As a sort on a stale row should just resort, not change sort direction\n const previousColSort = useRef([]);\n\n const previousQuickFilter = useRef('');\n\n return useCallback(\n ({ api, nodes }: PostSortRowsParams) => {\n // Grid is destroyed\n if (!api) return;\n\n const previousRowSortIndex = previousRowSortIndexRef.current;\n\n const hashNode = (node: IRowNode | undefined) => {\n return node ? JSON.stringify(node.data) : '';\n };\n\n const copyCurrentSortSettings = (): ColumnState[] =>\n api.getColumnState().map((row) => ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }));\n\n const backupSortOrder = () => {\n for (const x in previousRowSortIndex) delete previousRowSortIndex[x];\n nodes.forEach((node, index) => (previousRowSortIndex[`${node.data.id}`] = { index, hash: hashNode(node) }));\n };\n\n // Check if column is the first sorted column. Note: column is preconfigured to sort its sortIndex is null not 1\n const isFirstSortColumn = (row: ColumnState) => row.sort && [0, null].includes(row.sortIndex ?? null);\n\n const isSameColumnAndDifferentSort = (col1: ColumnState | undefined, col2: ColumnState | undefined) =>\n col1 && col2 && col1.colId === col2.colId && col1.sort != col2.sort;\n\n const restorePreviousSortColumnState = () => api.applyColumnState({ state: previousColSort.current });\n\n const sortNodesByPreviousSort = () => {\n nodes.sort(\n (a, b) =>\n (previousRowSortIndex[`${a.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER) -\n (previousRowSortIndex[`${b.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER),\n );\n };\n\n // On first load copy the current sort\n if (!initialised.current) {\n initialised.current = true;\n previousColSort.current = copyCurrentSortSettings();\n }\n\n const newSortOrder = JSON.stringify(copyCurrentSortSettings());\n let sortOrderChanged = newSortOrder != lastSortOrderHash.current;\n\n const quickFilter = api.getQuickFilter();\n if (previousQuickFilter.current != quickFilter) {\n previousQuickFilter.current = quickFilter ?? '';\n sortOrderChanged = true;\n }\n\n if (isEmpty(previousRowSortIndex)) {\n backupSortOrder();\n }\n\n if (sortOrderChanged) {\n const thisFirstCol = copyCurrentSortSettings().find(isFirstSortColumn);\n const previousFirstCol = previousColSort.current.find(isFirstSortColumn);\n\n // Change to sort can be: (in the context of stale sort do...)\n // - no sort to sorted (do nothing)\n // - asc to desc (resort as asc, and remove stale sort)\n // - desc to no sort (resort as desc, and remove stale sort)\n const wasSortChangedOnSameColumn =\n previousFirstCol && (!thisFirstCol || isSameColumnAndDifferentSort(previousFirstCol, thisFirstCol));\n\n // if sort was stale, and we're here, someone has clicked a stale sort order (^*) in the column header\n if (sortWasStale.current && wasSortChangedOnSameColumn) {\n // Sort was an existing priority 1 column\n // We want to re-sort with the old sort direction and clear stale sort\n sortWasStale.current = false;\n setStaleGrid(false);\n\n // trigger a recapture of sort order\n lastSortOrderHash.current = '';\n restorePreviousSortColumnState();\n } else {\n // Sort was on a different column so clear sort and sort like normal\n if (sortWasStale.current) {\n sortWasStale.current = false;\n setStaleGrid(false);\n }\n // Columns were sorted so retain the sort\n backupSortOrder();\n lastSortOrderHash.current = newSortOrder;\n }\n } else {\n let firstChangedNodeIndex = -1;\n let lastNewNode: IRowNode | undefined = undefined;\n let changedRowCount = 0;\n let newRowCount = 0;\n let index = 0;\n for (const node of nodes) {\n const psr = previousRowSortIndex[`${node.data.id}`];\n if (psr) {\n if (psr.hash != hashNode(node)) {\n if (firstChangedNodeIndex === -1) firstChangedNodeIndex = index;\n changedRowCount++;\n }\n } else {\n lastNewNode = node;\n newRowCount++;\n }\n index++;\n }\n\n let wasStale = false;\n if (changedRowCount === 0 && newRowCount === 1) {\n // insert new row at end\n const newIndex = index - 1;\n previousRowSortIndex[`${lastNewNode?.data.id}`] = { index: newIndex, hash: hashNode(lastNewNode) };\n wasStale = true;\n } else if (changedRowCount === 2 && newRowCount === 0) {\n // This must be a swap rows (sometimes it's not, needs further attention)\n backupSortOrder();\n wasStale = false;\n } else if (changedRowCount > 1 && newRowCount === 1) {\n // This must be a insert so, insert new row near the row that changed\n previousRowSortIndex[`${lastNewNode?.data.id}`] = {\n index: firstChangedNodeIndex + 0.5,\n hash: hashNode(lastNewNode),\n };\n wasStale = true;\n // For some reason AgGrid mis-positions the inserted row.\n if (lastNewNode) {\n redrawRows();\n }\n } else if (changedRowCount == 1 && newRowCount === 0) {\n // User edited one row so, do nothing, retain sort\n wasStale = true;\n } else if (changedRowCount !== 0 || newRowCount != 0) {\n // too many rows changed, resort\n backupSortOrder();\n }\n\n if (wasStale) {\n // Check if the sort order the aggrid passed matches our stale sort order\n const stillStale =\n Object.keys(previousRowSortIndex).length != nodes.length ||\n nodes.some((node, index) => previousRowSortIndex[`${node.data.id}`]?.index !== index);\n\n // If we haven't already processed a stale sort then...\n if (stillStale && !sortWasStale.current) {\n // backup sort state, so we can restore it when sort is clicked on a stale column\n previousColSort.current = copyCurrentSortSettings();\n sortWasStale.current = true;\n setStaleGrid(true);\n }\n }\n sortNodesByPreviousSort();\n }\n },\n [redrawRows, setStaleGrid],\n );\n};\n","import {\n AgGridEvent,\n AllCommunityModule,\n CellClassParams,\n CellClickedEvent,\n CellDoubleClickedEvent,\n CellFocusedEvent,\n CellKeyDownEvent,\n ColDef,\n ColGroupDef,\n ColumnMovedEvent,\n ColumnResizedEvent,\n EditableCallback,\n EditableCallbackParams,\n GetRowIdParams,\n GridOptions,\n GridReadyEvent,\n GridSizeChangedEvent,\n IRowNode,\n ModelUpdatedEvent,\n ModuleRegistry,\n RowClickedEvent,\n RowDoubleClickedEvent,\n RowDragEndEvent,\n RowDragMoveEvent,\n SelectionChangedEvent,\n SelectionColumnDef,\n ValueFormatterParams,\n} from 'ag-grid-community';\nimport { AgGridReact } from 'ag-grid-react';\nimport clsx from 'clsx';\nimport { defer, delay, difference, isEmpty, last, omit, xorBy } from 'lodash-es';\nimport { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { AutoSizeColumnsResult, StartCellEditingProps, useGridContext } from '../contexts/GridContext';\nimport { GridUpdatingContext } from '../contexts/GridUpdatingContext';\nimport { isStorybook } from '../utils/storybook';\nimport { useInterval } from '../utils/useInterval';\nimport { compareNaturalInsensitive, fnOrVar, isNotEmpty } from '../utils/util';\nimport { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';\nimport { GridHeaderSelect } from './gridHeader';\nimport { GridContextMenuComponent, useGridContextMenu } from './gridHook';\nimport { useGridCopy } from './gridHook/useGridCopy';\nimport { CellLocation, useGridRangeSelection } from './gridHook/useGridRangeSelection';\nimport { GridNoRowsOverlay } from './GridNoRowsOverlay';\nimport { usePostSortRowsHook } from './PostSortRowsHook';\nimport { ColDefT, GridBaseRow, GridOnRowDragEndProps } from './types';\n\nModuleRegistry.registerModules([AllCommunityModule]);\n\nexport interface GridProps {\n ['data-testid']?: string;\n theme?: string;\n\n // ─── Grid State ────────────────────────────────────────────────\n loading?: boolean;\n readOnly?: boolean;\n suppressReadOnlyStyle?: boolean;\n\n // ─── Data & Columns ────────────────────────────────────────────\n columnDefs: ColDef[] | ColGroupDef[];\n defaultColDef?: GridOptions['defaultColDef'];\n defaultPostSort?: boolean;\n domLayout?: GridOptions['domLayout'];\n pinnedBottomRowData?: GridOptions['pinnedBottomRowData'];\n pinnedTopRowData?: GridOptions['pinnedTopRowData'];\n rowData: GridOptions['rowData'];\n rowClassRules?: GridOptions['rowClassRules'];\n rowHeight?: number;\n rowSelection?: 'single' | 'multiple';\n sizeColumns?: 'fit' | 'auto' | 'auto-skip-headers' | 'none';\n\n // ─── Selection ────────────────────────────────────────────────\n autoSelectFirstRow?: boolean;\n enableClickSelection?: boolean;\n enableRangeSelection?: boolean;\n enableSelectionWithoutKeys?: boolean;\n enableMultilineBulkEdit?: boolean;\n externalSelectedIds?: TData['id'][];\n externalSelectedItems?: TData[];\n hideSelectColumn?: boolean;\n hideSelectedRow?: boolean;\n selectColumnPinned?: ColDef['pinned'];\n selectable?: boolean;\n setExternalSelectedIds?: (ids: TData['id'][]) => void;\n setExternalSelectedItems?: (items: TData[]) => void;\n\n // ─── Editing ──────────────────────────────────────────────────\n onBulkEditingComplete?: () => Promise | void;\n singleClickEdit?: boolean;\n\n // ─── Context Menu ─────────────────────────────────────────────\n contextMenu?: GridContextMenuComponent;\n contextMenuSelectRow?: boolean;\n\n // ─── Callbacks / Events ───────────────────────────────────────\n onCellFocused?: (props: { colDef: ColDef; data: TData }) => void;\n onColumnMoved?: GridOptions['onColumnMoved'];\n onContentSize?: (props: { width: number }) => void;\n\n /**\n * @deprecated You should drive your app off selection states. This will be deleted.\n */\n onRowClicked?: (event: RowClickedEvent) => void;\n /**\n * @deprecated You should drive your app off selection states. This will be deleted.\n */\n onRowDoubleClicked?: (event: RowDoubleClickedEvent) => void;\n onRowDragEnd?: (props: GridOnRowDragEndProps) => Promise | void;\n\n // ─── Row Behavior ─────────────────────────────────────────────\n animateRows?: boolean;\n alwaysShowVerticalScroll?: boolean;\n rowDragText?: GridOptions['rowDragText'];\n\n // ─── Overlays / Messages ──────────────────────────────────────\n noRowsOverlayText?: string;\n noRowsMatchingOverlayText?: string;\n\n // ─── Miscellaneous ────────────────────────────────────────────\n maxInitialWidth?: number;\n suppressCellFocus?: boolean;\n suppressColumnVirtualization?: GridOptions['suppressColumnVirtualisation'];\n}\n\n/**\n * Wrapper for AgGrid to add commonly used functionality.\n */\nexport const Grid = ({\n theme = 'ag-theme-step-default',\n 'data-testid': dataTestId,\n\n // ─── Grid State ───────────────────────────────\n suppressReadOnlyStyle = false,\n\n // ─── Data & Columns ───────────────────────────\n defaultPostSort = true,\n rowData,\n rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,\n rowSelection = 'multiple',\n sizeColumns = 'auto',\n\n // ─── Selection ────────────────────────────────\n autoSelectFirstRow,\n enableRangeSelection = false,\n externalSelectedIds,\n externalSelectedItems,\n selectColumnPinned = 'left',\n selectable,\n setExternalSelectedIds,\n setExternalSelectedItems,\n\n // ─── Editing ──────────────────────────────────\n singleClickEdit = false,\n enableMultilineBulkEdit = false,\n\n // ─── Context Menu ─────────────────────────────\n contextMenuSelectRow = false,\n contextMenu,\n\n // ─── Callbacks / Events ───────────────────────\n onCellFocused: paramsOnCellFocused,\n onColumnMoved,\n\n // ─── Row Behavior ─────────────────────────────\n suppressColumnVirtualization = true,\n\n // ─── Miscellaneous ────────────────────────────\n maxInitialWidth,\n\n // ─── Spread Remaining Params ──────────────────\n ...params\n}: GridProps): ReactElement => {\n const {\n setApis,\n setExternallySelectedItemsAreInSync,\n setOnBulkEditingComplete,\n gridReady,\n gridRenderState,\n externallySelectedItemsAreInSync,\n showNoRowsOverlay,\n autoSizeColumns,\n sizeColumnsToFit,\n doesExternalFilterPass,\n ensureRowVisible,\n ensureSelectedRowIsVisible,\n focusByRowById,\n getColDef,\n getFirstRowId,\n isExternalFilterPresent,\n prePopupOps,\n selectRowsById,\n\n startCellEditing: propStartCellEditing,\n } = useGridContext();\n\n // CellEditingStop event happens too much for one edit\n const startedEditRef = useRef(false);\n const startCellEditing = useCallback(\n (props: StartCellEditingProps) => {\n startedEditRef.current = true;\n return propStartCellEditing(props);\n },\n [propStartCellEditing],\n );\n\n const { updatedDep, anyUpdating, updatingCols } = useContext(GridUpdatingContext);\n\n const gridDivRef = useRef(null);\n const lastSelectedIds = useRef(undefined);\n\n const [staleGrid, setStaleGrid] = useState(false);\n const [autoSized, setAutoSized] = useState(false);\n\n const postSortRows = usePostSortRowsHook({ setStaleGrid });\n\n /**\n * onContentSize should only be called at maximum twice.\n * Once when an empty grid is loaded.\n * And again when the grid has content.\n */\n const hasSetContentSize = useRef(false);\n const hasSetContentSizeEmpty = useRef(false);\n const needsAutoSize = useRef(true);\n\n const autoSizeResultRef = useRef(null);\n const prevRowsVisibleRef = useRef(false);\n const initialContentSizeInProgressRef = useRef(false);\n const setInitialContentSize = useCallback(async (): Promise => {\n if (initialContentSizeInProgressRef.current) {\n return;\n }\n initialContentSizeInProgressRef.current = true;\n try {\n needsAutoSize.current = false;\n\n if (!gridDivRef.current?.clientWidth || rowData == null) {\n // Don't resize grids if they are offscreen as it doesn't work.\n needsAutoSize.current = true;\n return;\n }\n\n const gridRendered = gridRenderState();\n if (gridRendered === null) {\n // Don't resize until grid has rendered, or it has 0 rows.\n needsAutoSize.current = true;\n return;\n }\n\n // 1. First we autosize to get the size of the columns on an infinite grid.\n if (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') {\n // You can't skip headers until the grid has content\n const rowsVisible = gridRendered === 'rows-visible';\n const skipHeader = sizeColumns === 'auto-skip-headers' && rowsVisible;\n // If grid was empty and now has content we need to autosize\n if (rowsVisible !== prevRowsVisibleRef.current && rowsVisible) {\n prevRowsVisibleRef.current = rowsVisible;\n autoSizeResultRef.current = null;\n }\n const autoSizeResult =\n autoSizeResultRef.current ??\n (await autoSizeColumns({\n skipHeader,\n userSizedColIds: new Set(userSizedColIds.current.keys()),\n }));\n // Auto-size failed retry later\n if (!autoSizeResult) {\n needsAutoSize.current = true;\n return;\n }\n\n autoSizeResultRef.current = autoSizeResult;\n // Calculate the auto-sized width, limit it to maxInitialWidth\n autoSizeResult.width = maxInitialWidth ? Math.min(autoSizeResult.width, maxInitialWidth) : autoSizeResult.width;\n if (gridRendered === 'empty') {\n // If the grid is empty we still do an onContentSize callback, we will do another callback when grid has data\n // We don't do this callback if we have previously had row data, or have already called back for empty\n if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {\n hasSetContentSizeEmpty.current = true;\n params.onContentSize?.(autoSizeResult);\n }\n } else if (gridRendered === 'rows-visible') {\n // we have rows now so callback grid size\n if (!hasSetContentSize.current) {\n hasSetContentSize.current = true;\n params.onContentSize?.(autoSizeResult);\n }\n } else {\n // It should be impossible to get here\n console.error('Unknown value returned from hasGridRendered');\n }\n } else {\n sizeColumnsToFit();\n }\n\n setAutoSized(true);\n needsAutoSize.current = false;\n } finally {\n initialContentSizeInProgressRef.current = false;\n }\n }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns, sizeColumnsToFit]);\n\n const lastOwnerDocumentRef = useRef(undefined);\n const wasVisibleRef = useRef(false);\n\n /**\n * Auto-size windows that had deferred auto-size\n * Reset focus if panel went from invisible to visible.\n */\n useInterval(() => {\n // If grid has become visible after previously being hidden, then refocus the last focused cell.\n const visible = !!gridDivRef.current?.checkVisibility?.();\n if (visible && !wasVisibleRef.current) {\n wasVisibleRef.current = true;\n const el = (window as any).__stepaggrid_lastfocuseventtarget;\n if (el) {\n // Setting this to null will cause a new refocus event\n (window as any).__stepaggrid_lastfocuseventtarget = null;\n // Check element is still part of document\n if (el.checkVisibility()) {\n el.focus();\n }\n }\n }\n wasVisibleRef.current = visible;\n\n // Check if window has been popped out and needs resize\n const currentDocument = gridDivRef.current?.ownerDocument;\n if (currentDocument !== lastOwnerDocumentRef.current) {\n lastOwnerDocumentRef.current = currentDocument;\n if (currentDocument) {\n needsAutoSize.current = true;\n }\n }\n if (\n needsAutoSize.current ||\n (!hasSetContentSize.current && (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers'))\n ) {\n void setInitialContentSize();\n }\n }, 200);\n\n /**\n * On data load select the first row of the grid if required.\n */\n const hasSelectedFirstItem = useRef(false);\n useEffect(() => {\n if (!gridReady || hasSelectedFirstItem.current || !rowData || !externallySelectedItemsAreInSync) {\n return;\n }\n hasSelectedFirstItem.current = true;\n if (isNotEmpty(rowData) && isEmpty(externalSelectedItems) && isEmpty(externalSelectedIds)) {\n const firstRowId = getFirstRowId();\n if (autoSelectFirstRow && selectable) {\n selectRowsById([firstRowId]);\n } else {\n if (!isStorybook) {\n focusByRowById(firstRowId, true);\n }\n }\n }\n }, [\n externallySelectedItemsAreInSync,\n focusByRowById,\n gridReady,\n externalSelectedItems,\n autoSelectFirstRow,\n rowData,\n selectRowsById,\n getFirstRowId,\n selectable,\n externalSelectedIds,\n ]);\n\n /**\n * Ensure external selected items list is in sync with panel.\n */\n const synchroniseExternalStateToGridSelection = useCallback(\n ({ api }: SelectionChangedEvent) => {\n if (externalSelectedIds && setExternalSelectedIds) {\n const selectedRowsIds = api.getSelectedRows().map((row: TData) => row.id);\n\n // We don't want to update selected Items if it hasn't changed to prevent excess renders\n if (\n externalSelectedIds.length !== selectedRowsIds.length ||\n isNotEmpty(xorBy(selectedRowsIds, externalSelectedIds))\n ) {\n setExternallySelectedItemsAreInSync(false);\n setExternalSelectedIds([...selectedRowsIds]);\n } else {\n setExternallySelectedItemsAreInSync(true);\n }\n } else if (externalSelectedItems && setExternalSelectedItems) {\n const selectedRows = api.getSelectedRows();\n\n // We don't want to update selected Items if it hasn't changed to prevent excess renders\n if (\n externalSelectedItems.length !== selectedRows.length ||\n isNotEmpty(xorBy(selectedRows, externalSelectedItems, (row) => row.id))\n ) {\n setExternallySelectedItemsAreInSync(false);\n setExternalSelectedItems([...selectedRows]);\n } else {\n setExternallySelectedItemsAreInSync(true);\n }\n } else {\n setExternallySelectedItemsAreInSync(true);\n }\n },\n [\n externalSelectedIds,\n externalSelectedItems,\n setExternalSelectedIds,\n setExternalSelectedItems,\n setExternallySelectedItemsAreInSync,\n ],\n );\n\n /**\n * Synchronise externally selected items to grid.\n * If new ids are selected scroll them into view.\n */\n const synchroniseExternallySelectedItemsToGrid = useCallback(() => {\n if (!gridReady) return;\n if (!externalSelectedItems && !externalSelectedIds) {\n setExternallySelectedItemsAreInSync(true);\n return;\n }\n\n const selectedIds = externalSelectedIds ?? externalSelectedItems?.map((row) => row.id);\n const lastNewId = last(difference(selectedIds, lastSelectedIds.current ?? []));\n if (lastNewId != null) {\n ensureRowVisible(lastNewId);\n }\n lastSelectedIds.current = selectedIds;\n selectRowsById(selectedIds);\n setExternallySelectedItemsAreInSync(true);\n }, [\n gridReady,\n externalSelectedItems,\n externalSelectedIds,\n selectRowsById,\n setExternallySelectedItemsAreInSync,\n ensureRowVisible,\n ]);\n\n /**\n * Combine grid and cell editable into one function\n */\n const combineEditables =\n (...editables: (boolean | EditableCallback | undefined)[]) =>\n (params: EditableCallbackParams): boolean => {\n const results = editables.map((editable) => fnOrVar(editable, params));\n // If editable is not set anywhere then it's non-editable\n if (results.every((v) => v == null)) return false;\n // If any editable value is or returns false then it's non-editable\n return !results.some((v) => v == false);\n };\n\n /**\n * Synchronise externally selected items to grid on externalSelectedItems change\n */\n useEffect(synchroniseExternallySelectedItemsToGrid, [synchroniseExternallySelectedItemsToGrid]);\n\n const mapColDef = useCallback(\n (colDef: ColDef | ColGroupDef): ColDef | ColGroupDef => {\n if ('children' in colDef) {\n return {\n ...colDef,\n children: colDef.children.map(mapColDef),\n };\n } else {\n const colDefEditable = colDef.editable;\n const ignoreGridReadOnly = (colDef as ColDefT