@linzjs/step-ag-grid 29.3.0 → 29.3.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.3.0",
+  "version": "29.3.2",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -83,7 +83,7 @@
     "@chromatic-com/storybook": "^4.1.1",
     "@linzjs/lui": "^23.11.1",
     "@linzjs/style": "^5.4.0",
-    "@linzjs/windows": "^5.6.0",
+    "@linzjs/windows": "^5.7.0",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",

package/src/components/Grid.tsx

@@ -172,7 +172,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     prePopupOps,
     startCellEditing,
   } = useGridContext<TData>();
-
   const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
@@ -192,8 +191,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const hasSetContentSizeEmpty = useRef(false);
   const needsAutoSize = useRef(true);
 
-  const lastFullResize = useRef<number>();
-
+  const requiresInitialSizeToFitRef = useRef(true);
   const autoSizeResultRef = useRef<AutoSizeColumnsResult | null>(null);
   const prevRowsVisibleRef = useRef(false);
   const setInitialContentSize = useCallback(() => {
@@ -225,6 +223,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         autoSizeColumns({
           skipHeader,
           userSizedColIds: new Set(userSizedColIds.current.keys()),
+          includeFlex: true,
         });
       // Auto-size failed retry later
       if (!autoSizeResult) {
@@ -240,20 +239,15 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         // We don't do this callback if we have previously had row data, or have already called back for empty
         if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
           hasSetContentSizeEmpty.current = true;
+          requiresInitialSizeToFitRef.current = true;
           params.onContentSize?.(autoSizeResult);
         }
       } else if (gridRendered === 'rows-visible') {
         // we have rows now so callback grid size
         if (!hasSetContentSize.current) {
-          // Only callback if grid size has settled
-          if (lastFullResize.current === autoSizeResult.width) {
-            hasSetContentSize.current = true;
-            params.onContentSize?.(autoSizeResult);
-          } else {
-            // Need to retry callback when size has settelled
-            lastFullResize.current = autoSizeResult.width;
-            return;
-          }
+          hasSetContentSize.current = true;
+          requiresInitialSizeToFitRef.current = true;
+          params.onContentSize?.(autoSizeResult);
         }
       } else {
         // It should be impossible to get here
@@ -261,13 +255,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       }
     }
 
-    // 2. Now we size columns to fit the grid width
-    if (sizeColumns !== 'none') {
-      sizeColumnsToFit();
-    }
     setAutoSized(true);
     needsAutoSize.current = false;
-  }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns, sizeColumnsToFit]);
+  }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns]);
 
   const lastOwnerDocumentRef = useRef<Document>();
   const wasVisibleRef = useRef(false);
@@ -613,6 +603,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const onGridResize = useCallback(
     (event: AgGridEvent<TData>) => {
+      if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
+        return;
+      }
       if (sizeColumns !== 'none') {
         // Flex columns can expand to fit after resize, but they cannot shrink less than use resized value
         // Double click column resize handle to reset this behaviour
@@ -625,7 +618,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
             }),
           ),
         ];
-        event.api.sizeColumnsToFit({ columnLimits });
+        defer(() => event.api.sizeColumnsToFit({ columnLimits }));
       }
     },
     [sizeColumns],
@@ -649,6 +642,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       if (width == null) {
         return;
       }
+
       switch (e.source) {
         case 'uiColumnResized':
           userSizedColIds.current.set(colId, width);
@@ -861,10 +855,17 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
               ? {
                   enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                   enableClickSelection: params.enableClickSelection ?? false,
-                  mode: rowSelection == 'single' ? 'singleRow' : 'multiRow',
+                  mode: rowSelection === 'single' ? 'singleRow' : 'multiRow',
                 }
               : undefined
           }
+          onDisplayedColumnsChanged={() => {
+            // This happens after an autosize event, if we don't wait for it size columns to fit doesn't work
+            if (requiresInitialSizeToFitRef.current) {
+              requiresInitialSizeToFitRef.current = false;
+              sizeColumnsToFit();
+            }
+          }}
           rowHeight={rowHeight}
           animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}

package/src/stories/grid/gridAutosize/ShowPanelResizingAgGrid/ShowPanelResizingAgGrid.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof TestShowPanelResizingAgGrid> = {
   decorators: [
     (Story) => (
       <div>
-        <PanelsContextProvider baseZIndex={500}>
+        <PanelsContextProvider baseZIndex={500} panelStateOptions={null}>
           <Story />
         </PanelsContextProvider>
       </div>