@linzjs/step-ag-grid 32.4.2 → 32.6.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "32.4.2",
+  "version": "32.6.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -77,17 +77,17 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",
     "@linzjs/lui": "^24.20.0",
-    "@linzjs/windows": "^13.0.0",
+    "@linzjs/windows": "^15.0.0",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "rollup-plugin-esbuild": "^6.2.1",
-    "@storybook/addon-docs": "^10.5.7",
-    "@storybook/addon-links": "^10.5.7",
-    "@storybook/react-vite": "^10.5.7",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-links": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.3",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "^14.6.6",
     "@types/debounce-promise": "^3.1.9",
     "@types/jest": "^30.0.0",
     "@types/jsdom": "^28.0.3",
@@ -95,29 +95,29 @@
     "@types/node": "^24.13.3",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
-    "@vitejs/plugin-react": "^6.0.5",
-    "@vitest/ui": "^4.1.10",
+    "@vitejs/plugin-react": "6.0.5",
+    "@vitest/ui": "^4.1.11",
     "chromatic": "^17.8.0",
     "cross-env": "^10.1.0",
     "husky": "^9.1.7",
     "jsdom": "29.1.1",
     "lodash-es": "^4.18.1",
     "npm-run-all": "^4.1.5",
-    "oxfmt": "^0.62.0",
-    "oxlint": "^1.77.0",
+    "oxfmt": "^0.64.0",
+    "oxlint": "^1.79.0",
     "postcss": "^8.5.26",
     "postcss-scss": "^4.0.9",
     "react": ">=19",
     "react-dom": "^19.2.8",
-    "rollup": "^4.62.4",
+    "rollup": "4.62.5",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.102.0",
-    "storybook": "^10.5.7",
+    "sass": "^1.103.1",
+    "storybook": "^10.5.10",
     "typescript": "^7.0.2",
-    "vite": "^8.2.1",
-    "vitest": "^4.1.10"
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
   },
   "husky": {
     "hooks": {

package/src/components/Grid.tsx

@@ -28,13 +28,13 @@ 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';
 
 import { AutoSizeColumnsResult, StartCellEditingProps, useGridContext } from '../contexts/GridContext';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
+import { isChromatic } from '../utils/isChromatic';
 import { isStorybook } from '../utils/storybook';
 import { useInterval } from '../utils/useInterval';
 import { compareNaturalInsensitive, fnOrVar, isNotEmpty } from '../utils/util';

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,3 +1,4 @@
+import { useFilterCharacters } from '@linzjs/lui';
 import { ReactElement, useCallback, useMemo, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
@@ -13,6 +14,7 @@ export interface GridFormTextAreaProps<TData extends GridBaseRow>
   width?: string | number;
   onSave?: (props: { selectedRows: TData[]; value: string }) => Promise<boolean>;
   helpText?: string;
+  disableUnicodeCharacterFilter?: boolean;
 }
 
 export const GridFormTextArea = <TData extends GridBaseRow>(props: GridFormTextAreaProps<TData>): ReactElement => {
@@ -21,6 +23,8 @@ export const GridFormTextArea = <TData extends GridBaseRow>(props: GridFormTextA
   const initValue = useMemo(() => (initialVale == null ? '' : `${initialVale}`), [initialVale]);
   const [value, setValue] = useState(initValue);
 
+  const { filterInputEvent } = useFilterCharacters();
+
   const helpText = props.helpText ?? 'Press tab to save';
 
   const invalid = useCallback(() => TextInputValidator(props, value, data, {}), [props, value, data]);
@@ -53,7 +57,12 @@ export const GridFormTextArea = <TData extends GridBaseRow>(props: GridFormTextA
     <div className={'subComponent'} style={{ display: 'flex', flexDirection: 'row', width: props.width ?? 240 }}>
       <TextAreaInput
         value={value}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => {
+          if (!props.disableUnicodeCharacterFilter) {
+            filterInputEvent(e);
+          }
+          setValue(e.target.value);
+        }}
         error={invalid()}
         placeholder={props.placeholder ?? 'Type here'}
         helpText={helpText}

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,3 +1,4 @@
+import { useFilterCharacters } from '@linzjs/lui';
 import { useCallback, useMemo, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
@@ -18,6 +19,7 @@ export interface GridFormTextInputProps<TData extends GridBaseRow>
   width?: string | number;
   onSave?: (props: { selectedRows: TData[]; value: string }) => Promise<boolean>;
   helpText?: string;
+  disableUnicodeCharacterFilter?: boolean;
 }
 
 export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormTextInputProps<TData>) => {
@@ -28,6 +30,8 @@ export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormText
   const initValue = useMemo(() => (initialVale == null ? '' : `${initialVale}`), [initialVale]);
   const [value, setValue] = useState(initValue);
 
+  const { filterInputEvent } = useFilterCharacters();
+
   const invalid = useCallback(() => TextInputValidator<TData>(props, value, data, {}), [data, props, value]);
 
   const save = useCallback(
@@ -61,7 +65,12 @@ export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormText
     <div style={{ display: 'flex', flexDirection: 'row' }} className={'FormTest subComponent'}>
       <TextInputFormatted
         value={value}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => {
+          if (!props.disableUnicodeCharacterFilter) {
+            filterInputEvent(e);
+          }
+          setValue(e.target.value);
+        }}
         error={invalid()}
         formatted={props.units}
         style={{ width: props.width ?? 240 }}

package/src/contexts/GridContextProvider.tsx

@@ -9,7 +9,6 @@ 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';
@@ -17,6 +16,7 @@ import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, us
 import { agGridSelectRowColId, ColDefT, GridBaseRow } from '../components';
 import { GridCellFillerColId, isGridCellFiller } from '../components/GridCellFiller';
 import { getColId, isFlexColumn } from '../components/gridUtil';
+import { isChromatic } from '../utils/isChromatic';
 import { fnOrVar, isNotEmpty, sanitiseFileName, wait } from '../utils/util';
 import { waitForCondition } from '../utils/waitForCondition';
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from './GridContext';

package/src/index.ts

@@ -14,6 +14,7 @@ export * from './react-menu3/index';
 export * from './react-menu3/types';
 export * from './utils/bearing';
 export * from './utils/deferredPromise';
+export * from './utils/isChromatic';
 export * from './utils/textMatcher';
 export * from './utils/textValidator';
 export * from './utils/util';

package/src/lui/FormError.scss

@@ -2,6 +2,7 @@
 
 .FormError {
   display: flex;
+  line-height: 24px;
 
   &-helpText {
     font-size: 0.75rem;

package/src/stories/components/ActionButton.stories.tsx

@@ -1,5 +1,4 @@
 import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useCallback } from 'react';

package/src/stories/grid/GridCopy.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { LuiMessagingContextProvider } from '@linzjs/lui';
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
@@ -45,7 +40,7 @@ export default {
   decorators: [
     (Story) => (
       <LuiMessagingContextProvider version="v2">
-        <div style={{ maxWidth: 1024, height: '80vh', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ width: 1024, height: '80vh', display: 'flex', flexDirection: 'column' }}>
           <GridUpdatingContextProvider>
             <GridContextProvider>
               <Story />

package/src/stories/grid/GridDragRow.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useCallback, useMemo, useState } from 'react';
 
@@ -39,7 +34,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
 

package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import {
   createCheckboxMultiFilterParams,

package/src/stories/grid/GridInlineText.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { expect, screen, userEvent, within } from 'storybook/test';

package/src/stories/grid/GridNoRowsOverlay.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { expect, within } from 'storybook/test';
 

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { GridPopoverEditDropDown } from '../../components/gridPopoverEdit/GridPopoverEditDropDown';
 import { GridPopoverTextArea } from '../../components/gridPopoverEdit/GridPopoverTextArea';

package/src/stories/grid/GridPinnedRow.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
 
@@ -33,7 +28,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 1024, height: 260, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: 1024, height: 260, display: 'flex', flexDirection: 'column' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />

package/src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { ReactElement, useCallback, useContext, useMemo, useState } from 'react';
 

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

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
 

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useCallback, useContext, useMemo, useState } from 'react';
 

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
 

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useCallback, useMemo, useState } from 'react';
 

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { isEmpty, partition } from 'lodash-es';
 import { useMemo, useState } from 'react';

package/src/stories/grid/GridPopoverEditMultiSelectGrid.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { countBy, mergeWith, pull, range, union } from 'lodash-es';
 import { useMemo, useState } from 'react';

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { ReactElement, useCallback, useMemo, useState } from 'react';
 import { expect, fn, screen, userEvent } from 'storybook/test';
@@ -51,7 +46,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />

package/src/stories/grid/GridSorting.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
 import { expect } from 'storybook/test';
@@ -44,7 +39,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />

package/src/stories/grid/GridViewList.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
 
@@ -29,7 +24,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />

package/src/stories/grid/GridViewSelectableList.stories.tsx

@@ -1,8 +1,3 @@
-import '../../styles/GridTheme.scss';
-import '../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
 
@@ -29,7 +24,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />

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

@@ -1,12 +1,10 @@
-import '../../../styles/GridTheme.scss';
-import '../../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
+import { expect } from 'storybook/test';
 
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../../..';
+import { ChromaticAllowGridAutosize } from '../../../utils/isChromatic';
+import { findQuick } from '../../../utils/__tests__/testQuick';
 import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
 import { FormTest, IFormTestRow } from '../FormTest';
 
@@ -19,12 +17,15 @@ export default {
   },
   decorators: [
     (Story) => (
-      <GridUpdatingContextProvider>
-        <GridContextProvider>
-          <Story />
-        </GridContextProvider>
-      </GridUpdatingContextProvider>
+      <div style={{ width: 1024, height: 600, display: 'flex', flexDirection: 'column' }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
     ),
+    ChromaticAllowGridAutosize,
   ],
 } as Meta<typeof Grid>;
 
@@ -81,4 +82,20 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props
 };
 
 export const _AutoSize = GridPopoutEditGenericTemplate.bind({});
-_AutoSize.play = waitForGridReady;
+_AutoSize.play = async (context) => {
+  await waitForGridReady(context);
+  const { canvasElement } = context;
+
+  const idHeader = await findQuick({ selector: '.ag-header-cell[col-id="id"]' }, canvasElement);
+  const nameHeader = await findQuick({ selector: '.ag-header-cell[col-id="name"]' }, canvasElement);
+  const headerViewport = await findQuick({ selector: '.ag-header-viewport' }, canvasElement);
+
+  const idWidth = idHeader.getBoundingClientRect().width;
+  const nameWidth = nameHeader.getBoundingClientRect().width;
+  const availableWidth = headerViewport.getBoundingClientRect().width;
+
+  // id has no flex, so it autosizes to its short content ("Id" / "1000") rather than filling space
+  await expect(idWidth).toBeLessThan(150);
+  // name has flex: 1, so it flexes to consume all remaining space
+  await expect(Math.abs(idWidth + nameWidth - availableWidth)).toBeLessThan(4);
+};

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

@@ -1,12 +1,10 @@
-import '../../../styles/GridTheme.scss';
-import '../../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
+import { expect } from 'storybook/test';
 
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../../..';
+import { ChromaticAllowGridAutosize } from '../../../utils/isChromatic';
+import { findQuick } from '../../../utils/__tests__/testQuick';
 import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
 import { FormTest, IFormTestRow } from '../FormTest';
 
@@ -19,12 +17,15 @@ export default {
   },
   decorators: [
     (Story) => (
-      <GridUpdatingContextProvider>
-        <GridContextProvider>
-          <Story />
-        </GridContextProvider>
-      </GridUpdatingContextProvider>
+      <div style={{ width: 1024, height: 600, display: 'flex', flexDirection: 'column' }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
     ),
+    ChromaticAllowGridAutosize,
   ],
 } as Meta<typeof Grid>;
 
@@ -81,4 +82,19 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props
 };
 
 export const _FitSize = GridPopoutEditGenericTemplate.bind({});
-_FitSize.play = waitForGridReady;
+_FitSize.play = async (context) => {
+  await waitForGridReady(context);
+  const { canvasElement } = context;
+
+  const idHeader = await findQuick({ selector: '.ag-header-cell[col-id="id"]' }, canvasElement);
+  const nameHeader = await findQuick({ selector: '.ag-header-cell[col-id="name"]' }, canvasElement);
+  const headerViewport = await findQuick({ selector: '.ag-header-viewport' }, canvasElement);
+
+  const idWidth = idHeader.getBoundingClientRect().width;
+  const nameWidth = nameHeader.getBoundingClientRect().width;
+  const availableWidth = headerViewport.getBoundingClientRect().width;
+
+  // Both columns default to flex: 1 under sizeColumns='fit', so they should split the container evenly
+  await expect(Math.abs(idWidth - nameWidth)).toBeLessThanOrEqual(2);
+  await expect(Math.abs(idWidth + nameWidth - availableWidth)).toBeLessThanOrEqual(4);
+};

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

@@ -1,12 +1,10 @@
-import '../../../styles/GridTheme.scss';
-import '../../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
+import { expect } from 'storybook/test';
 
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../../..';
+import { ChromaticAllowGridAutosize } from '../../../utils/isChromatic';
+import { findQuick } from '../../../utils/__tests__/testQuick';
 import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
 import { FormTest, IFormTestRow } from '../FormTest';
 
@@ -19,12 +17,15 @@ export default {
   },
   decorators: [
     (Story) => (
-      <GridUpdatingContextProvider>
-        <GridContextProvider>
-          <Story />
-        </GridContextProvider>
-      </GridUpdatingContextProvider>
+      <div style={{ width: 1024, height: 600, display: 'flex', flexDirection: 'column' }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
     ),
+    ChromaticAllowGridAutosize,
   ],
 } as Meta<typeof Grid>;
 
@@ -83,4 +84,19 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props
 };
 
 export const _FitSizeFlex = GridPopoutEditGenericTemplate.bind({});
-_FitSizeFlex.play = waitForGridReady;
+_FitSizeFlex.play = async (context) => {
+  await waitForGridReady(context);
+  const { canvasElement } = context;
+
+  const idHeader = await findQuick({ selector: '.ag-header-cell[col-id="id"]' }, canvasElement);
+  const nameHeader = await findQuick({ selector: '.ag-header-cell[col-id="name"]' }, canvasElement);
+  const headerViewport = await findQuick({ selector: '.ag-header-viewport' }, canvasElement);
+
+  const idWidth = idHeader.getBoundingClientRect().width;
+  const nameWidth = nameHeader.getBoundingClientRect().width;
+  const availableWidth = headerViewport.getBoundingClientRect().width;
+
+  // id has flex: 2, name has flex: 1, so id should be twice the width of name
+  await expect(Math.abs(idWidth - nameWidth * 2)).toBeLessThan(2);
+  await expect(Math.abs(idWidth + nameWidth - availableWidth)).toBeLessThan(4);
+};

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
 import { GridPopoverContext } from '../../../contexts/GridPopoverContext';

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
 import { GridPopoverContext } from '../../../contexts/GridPopoverContext';