@linzjs/step-ag-grid 32.2.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.2.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/gridForm/GridFormSubComponentTextInput.tsx

@@ -2,7 +2,11 @@ import { ReactElement, useCallback, useContext, useEffect } from 'react';
 
 import { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
 import { TextInputFormatted } from '../../lui/TextInputFormatted';
-import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
+import {
+  TextInputValidator,
+  textInputValidatorPropsToSummary,
+  TextInputValidatorProps,
+} from '../../utils/textValidator';
 import { CellEditorCommon } from '../GridCell';
 import { GridBaseRow } from '../types';
 
@@ -41,6 +45,7 @@ export const GridFormSubComponentTextInput = <TData extends GridBaseRow>(
       placeholder={props.placeholder}
       style={{ width: '100%' }}
       allowTabToSave={true}
+      validationSummary={textInputValidatorPropsToSummary(props)}
     />
   );
 };

package/src/components/gridForm/GridFormTextInput.tsx

@@ -2,7 +2,11 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { TextInputFormatted } from '../../lui/TextInputFormatted';
-import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
+import {
+  TextInputValidator,
+  textInputValidatorPropsToSummary,
+  TextInputValidatorProps,
+} from '../../utils/textValidator';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
 import { GridBaseRow } from '../types';
@@ -63,6 +67,7 @@ export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormText
         style={{ width: props.width ?? 240 }}
         placeholder={props.placeholder ?? 'Type here'}
         helpText={helpText}
+        validationSummary={textInputValidatorPropsToSummary(props)}
       />
     </div>,
   );

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/lui/TextInputFormatted.test.tsx

@@ -0,0 +1,22 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, test } from 'vitest';
+
+import { TextInputFormatted } from './TextInputFormatted';
+
+describe('TextInputFormatted', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('sets data-validationsummary attribute from validationSummary prop', () => {
+    render(<TextInputFormatted value={''} onChange={() => {}} validationSummary={'required,maxLength=10'} />);
+
+    expect(screen.getByRole('textbox').getAttribute('data-validationsummary')).toBe('required,maxLength=10');
+  });
+
+  test('omits data-validationsummary attribute when validationSummary prop is not set', () => {
+    render(<TextInputFormatted value={''} onChange={() => {}} />);
+
+    expect(screen.getByRole('textbox').hasAttribute('data-validationsummary')).toBe(false);
+  });
+});

package/src/lui/TextInputFormatted.tsx

@@ -15,6 +15,7 @@ export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes
   error?: ReactElement | string | boolean | null;
   formatted?: string;
   allowTabToSave?: boolean;
+  validationSummary?: string;
 }
 
 export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
@@ -32,13 +33,22 @@ export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
           type={'text'}
           spellCheck={true}
           defaultValue={props.value}
-          {...omit(props, ['error', 'value', 'helpText', 'formatted', 'className', 'allowTabToSave'])}
+          {...omit(props, [
+            'error',
+            'value',
+            'helpText',
+            'formatted',
+            'className',
+            'allowTabToSave',
+            'validationSummary',
+          ])}
           className={'LuiTextInput-input'}
           onMouseEnter={(e) => {
             e.currentTarget.focus();
             props.onMouseEnter?.(e);
           }}
           data-allowtabtosave={props.allowTabToSave}
+          data-validationsummary={props.validationSummary}
         />
         <span className={'LuiTextInput-formatted'}>{props.formatted}</span>
       </span>

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) => {

package/src/utils/textValidator.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from 'vitest';
 
 import { GridBaseRow } from '../components/types';
-import { TextInputValidator, TextInputValidatorProps } from './textValidator';
+import { textInputValidatorPropsToSummary, TextInputValidator, TextInputValidatorProps } from './textValidator';
 
 describe('TextInputValidator', () => {
   test('number format', () => {
@@ -115,3 +115,47 @@ describe('TextInputValidator', () => {
     expect(TextInputValidator({ maxBytes: 2 }, 'a–', { id: 0 }, {})).toBe('Must be no longer than 2 bytes');
   });
 });
+
+describe('textInputValidatorPropsToSummary', () => {
+  test('empty props gives empty summary', () => {
+    expect(textInputValidatorPropsToSummary({})).toBe('');
+  });
+
+  test('required', () => {
+    expect(textInputValidatorPropsToSummary({ required: true })).toBe('required');
+    expect(textInputValidatorPropsToSummary({ required: false })).toBe('');
+  });
+
+  test('maxLength and maxBytes', () => {
+    expect(textInputValidatorPropsToSummary({ maxLength: 10 })).toBe('maxLength=10');
+    expect(textInputValidatorPropsToSummary({ maxBytes: 20 })).toBe('maxBytes=20');
+  });
+
+  test('invalid callback', () => {
+    expect(textInputValidatorPropsToSummary({ invalid: () => null })).toBe('invalid');
+  });
+
+  test('numberFormat fields', () => {
+    expect(
+      textInputValidatorPropsToSummary({
+        numberFormat: { precision: 3, scale: 2, gtMin: 0, geMin: 1, ltMax: 100, leMax: 99, notZero: true },
+      }),
+    ).toBe('precision=3,scale=2,gtMin=0,geMin=1,ltMax=100,leMax=99,notZero');
+  });
+
+  test('numberFormat with no set fields contributes nothing', () => {
+    expect(textInputValidatorPropsToSummary({ numberFormat: {} })).toBe('');
+  });
+
+  test('combines multiple props in order', () => {
+    expect(
+      textInputValidatorPropsToSummary({
+        required: true,
+        maxLength: 10,
+        maxBytes: 20,
+        invalid: () => null,
+        numberFormat: { scale: 2 },
+      }),
+    ).toBe('required,maxLength=10,maxBytes=20,invalid,scale=2');
+  });
+});

package/src/utils/textValidator.ts

@@ -81,3 +81,24 @@ export const TextInputValidator = <TData extends GridBaseRow>(
   }
   return null;
 };
+
+export const textInputValidatorPropsToSummary = <TData extends GridBaseRow>(
+  props: TextInputValidatorProps<TData>,
+): string => {
+  const parts: string[] = [];
+  if (props.required) parts.push('required');
+  if (props.maxLength != null) parts.push(`maxLength=${props.maxLength}`);
+  if (props.maxBytes != null) parts.push(`maxBytes=${props.maxBytes}`);
+  if (props.invalid) parts.push('invalid');
+  const nf = props.numberFormat;
+  if (nf) {
+    if (nf.precision != null) parts.push(`precision=${nf.precision}`);
+    if (nf.scale != null) parts.push(`scale=${nf.scale}`);
+    if (nf.gtMin != null) parts.push(`gtMin=${nf.gtMin}`);
+    if (nf.geMin != null) parts.push(`geMin=${nf.geMin}`);
+    if (nf.ltMax != null) parts.push(`ltMax=${nf.ltMax}`);
+    if (nf.leMax != null) parts.push(`leMax=${nf.leMax}`);
+    if (nf.notZero) parts.push('notZero');
+  }
+  return parts.join(',');
+};