@linzjs/step-ag-grid 32.3.0 → 32.4.0

package/package.json

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

package/src/components/Grid.tsx

@@ -28,6 +28,7 @@ import {
   ValueFormatterParams,
 } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
+import isChromatic from 'chromatic/isChromatic';
 import clsx from 'clsx';
 import { defer, delay, difference, isEmpty, last, omit, xorBy } from 'lodash-es';
 import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -487,6 +488,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
             'GridCell-readonly': (ccp: CellClassParams<TData>) =>
               !suppressReadOnlyStyle && !editable(ccp as unknown as EditableCallbackParams<TData>),
           },
+          width: colDef.minWidth || 120,
         };
       }
     },
@@ -1083,7 +1085,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const onGridSizeChanged = useCallback(
     (event: GridSizeChangedEvent<TData>) => {
       if (sizeColumns === 'fit' || (['auto', 'auto-skip-headers'].includes(sizeColumns) && hasSetContentSize.current)) {
-        event.api.sizeColumnsToFit();
+        if (!isChromatic()) {
+          event.api.sizeColumnsToFit();
+        }
       }
     },
     [sizeColumns],

package/src/components/gridPopoverEdit/GridButton.tsx

@@ -18,7 +18,9 @@ const ButtonCellRenderer = <TData extends GridBaseRow>(props: ICellRendererParam
     };
     api.addEventListener('cellFocused', checkFocus);
     return () => {
-      api.removeEventListener('cellFocused', checkFocus);
+      if (!api.isDestroyed()) {
+        api.removeEventListener('cellFocused', checkFocus);
+      }
     };
   }, [api, column, node.rowIndex]);
 

package/src/components/gridPopoverEdit/GridEditBoolean.tsx

@@ -25,7 +25,11 @@ const BooleanCellRenderer = <TData extends GridBaseRow>(props: CustomCellEditorP
       }
     };
     api.addEventListener('cellFocused', checkFocus);
-    return () => void api.removeEventListener('cellFocused', checkFocus);
+    return () => {
+      if (!api.isDestroyed()) {
+        api.removeEventListener('cellFocused', checkFocus);
+      }
+    };
   }, [api, column, node.rowIndex]);
 
   const isDisabled = !fnOrVar(colDef?.editable, props);

package/src/contexts/GridContextProvider.tsx

@@ -9,6 +9,7 @@ import {
   ProcessCellForExportParams,
   RowNode,
 } from 'ag-grid-community';
+import isChromatic from 'chromatic/isChromatic';
 import debounce from 'debounce-promise';
 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';
@@ -463,6 +464,13 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         return null;
       }
 
+      // Column widths are measured from rendered content, which is non-deterministic across
+      // Chromatic's environment. Skip measuring/resizing so snapshots stay stable at their
+      // configured widths, but still resolve with a width so callers don't retry forever.
+      if (isChromatic()) {
+        return { width: sumBy(gridApi.getColumnState(), (colState) => (colState.hide ? 0 : (colState.width ?? 0))) };
+      }
+
       try {
         const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
 
@@ -530,7 +538,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    */
   const sizeColumnsToFit = useCallback(
     (paramsOrGridWidth?: ISizeColumnsToFitParams): void => {
-      if (gridApi && !gridApi?.isDestroyed()) {
+      if (gridApi && !gridApi?.isDestroyed() && !isChromatic()) {
         gridApi.sizeColumnsToFit(paramsOrGridWidth);
       }
     },
@@ -654,13 +662,13 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         const nextColumn = focusedCell?.column;
         const nextColDef = nextColumn?.getColDef();
         const rowNode = focusedCell && gridApi.getDisplayedRowAtIndex(focusedCell?.rowIndex);
-        const popupable = String(nextColDef?.cellClass).indexOf("GridCellEditableWithNoPopup") === -1
-        return (
-          !!(rowNode && nextColumn && nextColDef) &&
+        const popupable = String(nextColDef?.cellClass).indexOf('GridCellEditableWithNoPopup') === -1;
+        return !!(rowNode && nextColumn && nextColDef) &&
           nextColumn.isCellEditable(rowNode) &&
           !nextColDef.cellEditorParams?.preventAutoEdit &&
           !nextColDef.cellRendererParams?.editAction
-        ) ? popupable : null
+          ? popupable
+          : null;
       };
 
       // Just in case I've missed something, we don't want the loop to hang everything
@@ -698,7 +706,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
 
         // checkbox cells are editable but don't have a popup
         // we need to end bulk editing and just select the cell
-        const editable = focusedCellIsEditable()
+        const editable = focusedCellIsEditable();
         if (editable !== null) {
           const focusedCell = gridApi.getFocusedCell();
           if (focusedCell) {
@@ -708,7 +716,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
               return false;
             }
             if (editable) {
-              await startCellEditing({rowId, colId: focusedCell.column.getColId()});
+              await startCellEditing({ rowId, colId: focusedCell.column.getColId() });
               // Continue bulk edit
               return true;
             } else {

package/src/stories/grid/GridPopoutEditBoolean.stories.tsx

@@ -12,7 +12,7 @@ import {
   GridUpdatingContextProvider,
   primitiveToSelectOption,
 } from '../..';
-import { expect, userEvent, waitFor } from 'storybook/test';
+import { expect, userEvent, fireEvent, waitFor } from 'storybook/test';
 
 import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
@@ -132,23 +132,24 @@ export const _EditBoolean = GridPopoutEditBooleanTemplate.bind({});
 _EditBoolean.play = waitForGridReady;
 
 export const _EditBooleanRetainsFocusAfterToggle = GridPopoutEditBooleanTemplate.bind({});
-_EditBooleanRetainsFocusAfterToggle.play = async (context) => {
-  await waitForGridReady(context);
-  const { canvasElement } = context;
+_EditBooleanRetainsFocusAfterToggle.play = async ({ canvasElement }) => {
+  await waitForGridReady({ canvasElement });
 
   // Use boldMultiSelect (no async delay) so the redraw happens immediately
   const getBoolInput = () =>
     canvasElement.querySelector('.ag-cell[col-id="boldMultiSelect"] input.ag-checkbox-input') as HTMLElement;
 
-  await userEvent.click(canvasElement.querySelector('.ag-cell[col-id="boldMultiSelect"]') as HTMLElement);
-  await waitFor(() => expect(getBoolInput()).toHaveFocus(), { timeout: 500 });
+  const button = canvasElement.querySelector('.ag-cell[col-id="boldMultiSelect"]') as HTMLElement;
+  await expect(button).toBeInTheDocument();
+  await fireEvent.click(button);
+  await waitFor(() => expect(getBoolInput()).toHaveFocus(), { timeout: 1500 });
 
   // Space toggles the checkbox, which triggers redrawRows — ag-grid moves focus from the
   // input to the cell div (role="gridcell"). The shared interval should detect this and restore focus.
-  await userEvent.keyboard(' ');
+  await fireEvent.keyPress(getBoolInput(), { key: 'Space', code: 'KeySpace' });
 
   // Re-query the input each retry since redraw replaces the DOM node
-  await waitFor(() => expect(getBoolInput()).toHaveFocus(), { timeout: 500 });
+  await waitFor(() => expect(getBoolInput()).toHaveFocus(), { timeout: 1500 });
 };
 
 const selectRow = async (canvasElement: HTMLElement, rowId: string) => {