@linzjs/step-ag-grid 17.5.3 → 17.6.0

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

@@ -20,6 +20,7 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
 
 const GridContext = createContext({
     gridReady: false,
+    gridRenderState: () => null,
     getColDef: () => {
         console.error("no context provider for getColDef");
         return undefined;
@@ -2323,8 +2324,8 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, singleClickEdit = false, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined, ...params }) => {
-    const { gridReady, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = useContext(GridContext);
+const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined, ...params }) => {
+    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = useContext(GridContext);
     const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
     const { prePopupOps } = useContext(GridContext);
     const gridDivRef = useRef(null);
@@ -2339,42 +2340,45 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
      */
     const hasSetContentSize = useRef(false);
     const hasSetContentSizeEmpty = useRef(false);
-    const needsAutoSize = useRef(false);
+    const needsAutoSize = useRef(true);
     const setInitialContentSize = useCallback(() => {
-        if (!gridDivRef.current?.clientWidth) {
+        if (!gridDivRef.current?.clientWidth || rowData == null) {
             // Don't resize grids if they are offscreen as it doesn't work.
             needsAutoSize.current = true;
             return;
         }
-        const headerCellCount = gridDivRef.current?.getElementsByClassName("ag-header-cell-label")?.length;
-        if (headerCellCount < 2) {
-            // Don't resize grids until all the columns are visible
-            // as `autoSizeColumns` will fail silently in this case
+        const gridRendered = gridRenderState();
+        if (gridRendered === null) {
+            // Don't resize until grid has rendered, or it has 0 rows.
             needsAutoSize.current = true;
             return;
         }
-        const skipHeader = sizeColumns === "auto-skip-headers" && !isEmpty(params.rowData);
+        const skipHeader = sizeColumns === "auto-skip-headers" && gridRendered === "rows-visible";
         if (sizeColumns === "auto" || skipHeader) {
             const result = autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, includeFlex: true });
-            if (isEmpty(params.rowData)) {
+            if (gridRendered === "empty") {
                 if (!hasSetContentSizeEmpty.current && result && !hasSetContentSize.current) {
                     hasSetContentSizeEmpty.current = true;
                     params.onContentSize && params.onContentSize(result);
                 }
             }
-            else {
+            else if (gridRendered === "rows-visible") {
                 if (result && !hasSetContentSize.current) {
                     hasSetContentSize.current = true;
                     params.onContentSize && params.onContentSize(result);
                 }
             }
+            else {
+                // It should be impossible to get here
+                console.error("Unknown value returned from hasGridRendered");
+            }
         }
         if (sizeColumns !== "none") {
             sizeColumnsToFit();
         }
         setAutoSized(true);
         needsAutoSize.current = false;
-    }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
+    }, [autoSizeColumns, gridRenderState, params, rowData, sizeColumns, sizeColumnsToFit]);
     const lastOwnerDocumentRef = useRef();
     /**
      * Auto-size windows that had deferred auto-size
@@ -2394,24 +2398,17 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                 setInitialContentSize();
             }
         },
-        timeoutMs: 1000,
+        timeoutMs: 200,
     });
-    const previousGridReady = useRef(gridReady);
-    useEffect(() => {
-        if (!previousGridReady.current && gridReady) {
-            previousGridReady.current = true;
-            setInitialContentSize();
-        }
-    }, [gridReady, setInitialContentSize]);
     /**
      * On data load select the first row of the grid if required.
      */
     const hasSelectedFirstItem = useRef(false);
     useEffect(() => {
-        if (!gridReady || hasSelectedFirstItem.current || !params.rowData || !externallySelectedItemsAreInSync)
+        if (!gridReady || hasSelectedFirstItem.current || !rowData || !externallySelectedItemsAreInSync)
             return;
         hasSelectedFirstItem.current = true;
-        if (isNotEmpty(params.rowData) && isEmpty(params.externalSelectedItems)) {
+        if (isNotEmpty(rowData) && isEmpty(params.externalSelectedItems)) {
             const firstRowId = getFirstRowId();
             if (params.autoSelectFirstRow) {
                 selectRowsById([firstRowId]);
@@ -2426,7 +2423,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         gridReady,
         params.externalSelectedItems,
         params.autoSelectFirstRow,
-        params.rowData,
+        rowData,
         selectRowsById,
         getFirstRowId,
     ]);
@@ -2567,7 +2564,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
      */
     const previousRowDataLength = useRef(0);
     const onRowDataChanged = useCallback(() => {
-        const length = params.rowData?.length ?? 0;
+        const length = rowData?.length ?? 0;
         if (previousRowDataLength.current !== length) {
             setInitialContentSize();
             previousRowDataLength.current = length;
@@ -2581,7 +2578,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         const skipHeader = sizeColumns === "auto-skip-headers";
         autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
         colIdsEdited.current.clear();
-    }, [autoSizeColumns, params.rowData?.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
+    }, [autoSizeColumns, rowData?.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
     /**
      * Show/hide no rows overlay when model changes.
      */
@@ -2750,7 +2747,6 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
             const position = clientSideRowModel.getHighlightPosition(event.y, event.overNode);
             //we don't want to show the row highlight if it wouldn't result in the row moving
             const targetIndex = event.overIndex + position - (event.node.rowIndex < event.overIndex ? 1 : 0);
-            //console.log(targetIndex)
             if (event.node.rowIndex != targetIndex) {
                 clientSideRowModel.highlightRowAtPixel(event.node, event.y);
             }
@@ -2779,9 +2775,9 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     }, [params]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
-    return (jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
+    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, { rowHeight: rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
                         setInitialContentSize();
-                    }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: (event) => {
+                    }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsx(GridNoRowsOverlay, { rowCount: rowCount, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
@@ -4593,6 +4589,19 @@ const GridContextProvider = (props) => {
         gridApi?.setQuickFilter(quickFilter);
         setGridReady(!!gridApi);
     }, [quickFilter]);
+    /**
+     * Used to check if it's OK to autosize.
+     */
+    const gridRenderState = useCallback(() => {
+        if (!gridApi)
+            return null;
+        if (!gridApi.getModel().isRowsToRender())
+            return "empty";
+        if (!isEmpty(gridApi.getRenderedNodes()))
+            return "rows-visible";
+        // If there are rows to render, but there are no rendered nodes then we should wait
+        return null;
+    }, [gridApi]);
     /**
      * Expose scrollRowIntoView for playwright tests.
      */
@@ -5011,6 +5020,7 @@ const GridContextProvider = (props) => {
         });
     }, [columnApi, gridApi]);
     return (jsx(GridContext.Provider, { value: {
+            gridRenderState,
             getColDef,
             getColumns,
             getColumnIds,