@linzjs/step-ag-grid 16.0.0 → 17.0.0

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

@@ -872,6 +872,10 @@ const getEndStatus = (status, unmountOnExit) => {
   }
 };
 const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
+const nextTick = (transitState, status) => setTimeout(() => {
+  // Reading document.body.offsetTop can force browser to repaint before transition to the next state
+  isNaN(document.body.offsetTop) || transitState(status + 1);
+}, 0);
 
 const updateState = (status, setState, latestState, timeoutId, onChange) => {
   clearTimeout(timeoutId.current);
@@ -913,7 +917,7 @@ const useTransition = ({
           break;
         case PRE_ENTER:
         case PRE_EXIT:
-          timeoutId.current = setTimeout(() => transitState(status + 1), 0);
+          timeoutId.current = nextTick(transitState, status);
           break;
       }
     };
@@ -2316,13 +2320,14 @@ 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-alpine", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, ...params }) => {
+const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, ...params }) => {
     const { gridReady, 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);
     const lastSelectedIds = useRef([]);
     const [staleGrid, setStaleGrid] = useState(false);
+    const [autoSized, setAutoSized] = useState(false);
     const postSortRows = usePostSortRowsHook({ setStaleGrid });
     /**
      * onContentSize should only be called at maximum twice.
@@ -2364,6 +2369,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         if (sizeColumns !== "none") {
             sizeColumnsToFit();
         }
+        setAutoSized(true);
         needsAutoSize.current = false;
     }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
     const lastOwnerDocumentRef = useRef();
@@ -2706,7 +2712,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         }
     }, [sizeColumns, sizeColumnsToFit]);
     /**
-     * Set of column Id's that are prevented from auto-sizing as they are user set
+     * Set of column I'd's that are prevented from auto-sizing as they are user set
      */
     const userSizedColIds = useRef(new Set());
     /**
@@ -2728,9 +2734,9 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
     // 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, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { rowHeight: params.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, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { rowHeight: params.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();
-                    }, onRowDataChanged: onRowDataChanged, onCellKeyPress: 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: params.rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsx(GridNoRowsOverlay, { rowCount: rowCount, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
@@ -3044,7 +3050,7 @@ const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }) => {
             } }) }));
 };
 
-const GridFilters = ({ children }) => jsx("div", { className: "Grid-container-filters", children: children });
+const GridFilters = ({ children }) => (jsx("div", { className: "Grid-container-filters", children: children }));
 
 /**
  * Defers state change up to a minimum time since last state change.
@@ -4420,7 +4426,7 @@ const GridPopoverEditDropDown = (colDef, props) => GridCell(colDef, {
 });
 
 const GridPopoverMessage = (colDef, props) => GridCell({
-    resizable: false,
+    resizable: true,
     ...colDef,
     cellRendererParams: {
         singleClickEdit: true,
@@ -4605,7 +4611,13 @@ const GridContextProvider = (props) => {
             const gridHasNotUpdated = gridRowIdsNotUpdatedYet || gridRowIdsNotChangedYet;
             // After retry count expires we give-up and deselect all rows, then select any subset of rows that have updated
             if (gridHasNotUpdated && retryCount > 0) {
-                delay(() => _selectRowsWithOptionalFlash({ rowIds, select, flash, ifNoCellFocused, retryCount: retryCount - 1 }), 250);
+                delay(() => _selectRowsWithOptionalFlash({
+                    rowIds,
+                    select,
+                    flash,
+                    ifNoCellFocused,
+                    retryCount: retryCount - 1,
+                }), 250);
                 return;
             }
             const rowsThatNeedSelecting = sortBy(rowNodes.filter((node) => !node.isSelected()), (node) => node.data.id);
@@ -4706,13 +4718,14 @@ const GridContextProvider = (props) => {
     const autoSizeColumns = useCallback(({ skipHeader, colIds, userSizedColIds } = {}) => {
         if (!columnApi)
             return null;
-        const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds ?? []);
-        columnApi.getColumnState().forEach((col) => {
-            const colId = col.colId;
-            if ((isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId)) {
-                columnApi.autoSizeColumn(colId, skipHeader);
-            }
+        const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
+        const colsToResize = columnApi.getColumnState().filter((colState) => {
+            const colId = colState.colId;
+            return (isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId) && !colState.flex;
         });
+        if (!isEmpty(colsToResize)) {
+            columnApi.autoSizeColumns(colsToResize.map((colState) => colState.colId), skipHeader);
+        }
         return {
             width: sumBy(columnApi.getColumnState().filter((col) => !col.hide), "width"),
         };
@@ -4721,7 +4734,7 @@ const GridContextProvider = (props) => {
      * Resize columns to fit container
      */
     const sizeColumnsToFit = useCallback(() => {
-        gridApi && gridApi.sizeColumnsToFit();
+        gridApi?.sizeColumnsToFit();
     }, [gridApi]);
     const stopEditing = useCallback(() => {
         if (!gridApi)
@@ -25490,6 +25503,9 @@ const countRows = async (within) => {
     return getAllQuick({ tagName: `div[row-id]:not(:empty)` }, within).length;
 };
 const findRow = async (rowId, within) => {
+    await waitForWrapper(async () => {
+        expect(getAllQuick({ classes: ".ag-row" }).length > 0).toBe(true);
+    });
     return await findQuick({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
 };
 const queryRow = async (rowId, within) => {