@linzjs/step-ag-grid 29.11.1 → 29.11.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.11.1",
+  "version": "29.11.3",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -14,7 +14,7 @@ import {
   GetRowIdParams,
   GridOptions,
   GridReadyEvent,
-  IColumnLimit,
+  GridSizeChangedEvent,
   ModelUpdatedEvent,
   ModuleRegistry,
   RowClickedEvent,
@@ -203,7 +203,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const hasSetContentSizeEmpty = useRef(false);
   const needsAutoSize = useRef(true);
 
-  const requiresInitialSizeToFitRef = useRef(false);
   const autoSizeResultRef = useRef<AutoSizeColumnsResult | null>(null);
   const prevRowsVisibleRef = useRef(false);
   const setInitialContentSize = useCallback(() => {
@@ -250,14 +249,12 @@ 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) {
           hasSetContentSize.current = true;
-          requiresInitialSizeToFitRef.current = true;
           params.onContentSize?.(autoSizeResult);
         }
       } else {
@@ -607,9 +604,10 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    * When cell editing has completed the colId as needing auto-sizing
    */
   useEffect(() => {
-    if (lastUpdatedDep.current === updatedDep) return;
+    if (lastUpdatedDep.current === updatedDep) {
+      return;
+    }
     lastUpdatedDep.current = updatedDep;
-
     const colIds = updatingCols();
     // Updating possibly completed
     if (isEmpty(colIds)) {
@@ -648,32 +646,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     prevLoading.current = newLoading;
   }, [params.loading, rowData, showNoRowsOverlay]);
 
-  /**
-   * Resize columns to fit if required on window/container resize
-   */
-  const onGridResize = useCallback(
-    (event: AgGridEvent<TData>) => {
-      if (sizeColumns === 'fit' || (!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
-        const columnLimits = [
-          ...userSizedColIds.current.entries().map(
-            ([c, w]): IColumnLimit => ({
-              key: c,
-              minWidth: w,
-              maxWidth: w,
-            }),
-          ),
-        ];
-        defer(() => event.api.sizeColumnsToFit({ columnLimits }));
-      }
-    },
-    [sizeColumns],
-  );
-
   /**
    * Set of column I'd's that are prevented from auto-sizing as they are user set
    */
@@ -682,33 +654,29 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   /**
    * Lock/unlock column width on user edit/reset.
    */
-  const onColumnResized = useCallback(
-    (e: ColumnResizedEvent) => {
-      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();
+  const onColumnResized = useCallback((e: ColumnResizedEvent) => {
+    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;
-      }
-    },
-    [onGridResize],
-  );
+          }*/
+        break;
+      case 'autosizeColumns':
+        userSizedColIds.current.delete(colId);
+        //onGridResize(e);
+        break;
+    }
+  }, []);
 
   const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
 
@@ -885,6 +853,15 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     selectable,
   ]);
 
+  const onGridSizeChanged = useCallback(
+    (event: GridSizeChangedEvent<TData>) => {
+      if (sizeColumns === 'fit') {
+        event.api.sizeColumnsToFit();
+      }
+    },
+    [sizeColumns],
+  );
+
   return (
     <div
       data-testid={dataTestId}
@@ -909,22 +886,13 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
                 }
               : 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;
-              delay(() => {
-                sizeColumnsToFit();
-              }, 200);
-            }
-          }}
           rowHeight={rowHeight}
           animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}
           getRowId={getRowId}
-          onGridSizeChanged={onGridResize}
           suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressClickEdit={true}
+          onGridSizeChanged={onGridSizeChanged}
           onColumnVisible={setInitialContentSize}
           onRowDataUpdated={onRowDataUpdated}
           onCellFocused={onCellFocused}

package/src/contexts/GridContextProvider.tsx

@@ -10,20 +10,7 @@ import {
   RowNode,
 } from 'ag-grid-community';
 import debounce from 'debounce-promise';
-import {
-  compact,
-  defer,
-  delay,
-  difference,
-  filter,
-  isEmpty,
-  last,
-  partition,
-  pull,
-  remove,
-  sortBy,
-  sumBy,
-} from 'lodash-es';
+import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from 'lodash-es';
 import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ColDefT, GridBaseRow } from '../components';
@@ -34,8 +21,9 @@ import { waitForCondition } from '../utils/waitForCondition';
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from './GridContext';
 import { GridUpdatingContext } from './GridUpdatingContext';
 
-const colStateId = (colState: ColumnState) => colState.colId;
-const colStateFlexed = (colState: ColumnState) => !!colState.flex;
+export const colStateId = (colState: ColumnState) => colState.colId;
+export const colStateFlexed = (colState: ColumnState) => !!colState.flex;
+export const colStateNotFlexed = (colState: ColumnState) => !colState.flex;
 
 /**
  * Context for AgGrid operations.
@@ -451,27 +439,44 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         return null;
       }
       const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
-      const colStates = gridApi.getColumnState();
 
-      const relevantCols = colStates?.filter((colState) => {
-        const colId = colState.colId;
-        return (isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
-      });
-      const [flexColumns, nonFlexColumns] = partition(relevantCols, colStateFlexed);
+      const getVisibleColStates = () => {
+        const colStates = gridApi.getColumnState();
+        return colStates.filter((colState) => {
+          const colId = colState.colId;
+          return (isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
+        });
+      };
+      const getFlexColStates = () => getVisibleColStates().filter(colStateFlexed);
+      const getNonFlexColStates = () => getVisibleColStates().filter(colStateNotFlexed);
+
       // If we don't reset the flex columns auto size it causes issues with random resizing of flex columns
+      let flexColumns = getFlexColStates();
+      let width = 0;
       if (!isEmpty(flexColumns)) {
         gridApi.autoSizeColumns(flexColumns.map(colStateId), skipHeader);
+        const flexColumnIds = flexColumns.map(colStateId);
+        flexColumns = getVisibleColStates().filter((colState) => flexColumnIds.includes(colState.colId));
+        width += sumBy(
+          flexColumns.filter((col) => !col.hide),
+          'width',
+        );
         gridApi.resetColumnState();
       }
 
+      let nonFlexColumns = getNonFlexColStates();
       if (!isEmpty(nonFlexColumns)) {
         gridApi.autoSizeColumns(nonFlexColumns.map(colStateId), skipHeader);
+        const nonFlexColumnIds = nonFlexColumns.map(colStateId);
+        nonFlexColumns = getVisibleColStates().filter((colState) => nonFlexColumnIds.includes(colState.colId));
+        width += sumBy(
+          nonFlexColumns.filter((col) => !col.hide),
+          'width',
+        );
       }
+
       return {
-        width: sumBy(
-          gridApi.getColumnState().filter((col) => !col.hide),
-          'width',
-        ),
+        width,
       };
     },
     [gridApi],

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -19,13 +19,11 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1024, height: 400 }}>
-        <GridUpdatingContextProvider>
-          <GridContextProvider>
-            <Story />
-          </GridContextProvider>
-        </GridUpdatingContextProvider>
-      </div>
+      <GridUpdatingContextProvider>
+        <GridContextProvider>
+          <Story />
+        </GridContextProvider>
+      </GridUpdatingContextProvider>
     ),
   ],
 } as Meta<typeof Grid>;