@linzjs/step-ag-grid 29.11.3 → 29.11.4

package/package.json

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

package/src/components/Grid.tsx

@@ -205,68 +205,79 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
   const autoSizeResultRef = useRef<AutoSizeColumnsResult | null>(null);
   const prevRowsVisibleRef = useRef(false);
-  const setInitialContentSize = useCallback(() => {
-    if (!gridDivRef.current?.clientWidth || rowData == null) {
-      // Don't resize grids if they are offscreen as it doesn't work.
-      needsAutoSize.current = true;
-      return;
-    }
-
-    const gridRendered = gridRenderState();
-    if (gridRendered === null) {
-      // Don't resize until grid has rendered, or it has 0 rows.
-      needsAutoSize.current = true;
+  const initialContentSizeInProgressRef = useRef(false);
+  const setInitialContentSize = useCallback(async (): Promise<void> => {
+    if (initialContentSizeInProgressRef.current) {
       return;
     }
+    initialContentSizeInProgressRef.current = true;
+    try {
+      needsAutoSize.current = false;
 
-    // 1. First we autosize to get the size of the columns on an infinite grid.
-    if (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') {
-      // You can't skip headers until the grid has content
-      const rowsVisible = gridRendered === 'rows-visible';
-      const skipHeader = sizeColumns === 'auto-skip-headers' && rowsVisible;
-      // If grid was empty and now has content we need to autosize
-      if (rowsVisible !== prevRowsVisibleRef.current && rowsVisible) {
-        prevRowsVisibleRef.current = rowsVisible;
-        autoSizeResultRef.current = null;
+      if (!gridDivRef.current?.clientWidth || rowData == null) {
+        // Don't resize grids if they are offscreen as it doesn't work.
+        needsAutoSize.current = true;
+        return;
       }
-      const autoSizeResult =
-        autoSizeResultRef.current ??
-        autoSizeColumns({
-          skipHeader,
-          userSizedColIds: new Set(userSizedColIds.current.keys()),
-        });
-      // Auto-size failed retry later
-      if (!autoSizeResult) {
+
+      const gridRendered = gridRenderState();
+      if (gridRendered === null) {
+        // Don't resize until grid has rendered, or it has 0 rows.
         needsAutoSize.current = true;
         return;
       }
 
-      autoSizeResultRef.current = autoSizeResult;
-      // Calculate the auto-sized width, limit it to maxInitialWidth
-      autoSizeResult.width = maxInitialWidth ? Math.min(autoSizeResult.width, maxInitialWidth) : autoSizeResult.width;
-      if (gridRendered === 'empty') {
-        // If the grid is empty we still do an onContentSize callback, we will do another callback when grid has data
-        // 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;
-          params.onContentSize?.(autoSizeResult);
+      // 1. First we autosize to get the size of the columns on an infinite grid.
+      if (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') {
+        // You can't skip headers until the grid has content
+        const rowsVisible = gridRendered === 'rows-visible';
+        const skipHeader = sizeColumns === 'auto-skip-headers' && rowsVisible;
+        // If grid was empty and now has content we need to autosize
+        if (rowsVisible !== prevRowsVisibleRef.current && rowsVisible) {
+          prevRowsVisibleRef.current = rowsVisible;
+          autoSizeResultRef.current = null;
         }
-      } else if (gridRendered === 'rows-visible') {
-        // we have rows now so callback grid size
-        if (!hasSetContentSize.current) {
-          hasSetContentSize.current = true;
-          params.onContentSize?.(autoSizeResult);
+        const autoSizeResult =
+          autoSizeResultRef.current ??
+          (await autoSizeColumns({
+            skipHeader,
+            userSizedColIds: new Set(userSizedColIds.current.keys()),
+          }));
+        // Auto-size failed retry later
+        if (!autoSizeResult) {
+          needsAutoSize.current = true;
+          return;
+        }
+
+        autoSizeResultRef.current = autoSizeResult;
+        // Calculate the auto-sized width, limit it to maxInitialWidth
+        autoSizeResult.width = maxInitialWidth ? Math.min(autoSizeResult.width, maxInitialWidth) : autoSizeResult.width;
+        if (gridRendered === 'empty') {
+          // If the grid is empty we still do an onContentSize callback, we will do another callback when grid has data
+          // 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;
+            params.onContentSize?.(autoSizeResult);
+          }
+        } else if (gridRendered === 'rows-visible') {
+          // we have rows now so callback grid size
+          if (!hasSetContentSize.current) {
+            hasSetContentSize.current = true;
+            params.onContentSize?.(autoSizeResult);
+          }
+        } else {
+          // It should be impossible to get here
+          console.error('Unknown value returned from hasGridRendered');
         }
       } else {
-        // It should be impossible to get here
-        console.error('Unknown value returned from hasGridRendered');
+        sizeColumnsToFit();
       }
-    } else {
-      sizeColumnsToFit();
-    }
 
-    setAutoSized(true);
-    needsAutoSize.current = false;
+      setAutoSized(true);
+      needsAutoSize.current = false;
+    } finally {
+      initialContentSizeInProgressRef.current = false;
+    }
   }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns, sizeColumnsToFit]);
 
   const lastOwnerDocumentRef = useRef<Document>();
@@ -305,8 +316,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       needsAutoSize.current ||
       (!hasSetContentSize.current && (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers'))
     ) {
-      needsAutoSize.current = false;
-      setInitialContentSize();
+      void setInitialContentSize();
     }
   }, 200);
 
@@ -460,11 +470,14 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     if (previousRowDataLength.current !== length) {
       // We need to autosize all cells again
       autoSizeResultRef.current = null;
-      setInitialContentSize();
       previousRowDataLength.current = length;
+      void setInitialContentSize();
+      return;
     }
 
-    if (lastUpdatedDep.current === updatedDep || isEmpty(colIdsEdited.current)) return;
+    if (lastUpdatedDep.current === updatedDep || isEmpty(colIdsEdited.current)) {
+      return;
+    }
     lastUpdatedDep.current = updatedDep;
 
     // Don't update while there are spinners
@@ -474,7 +487,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
     const skipHeader = sizeColumns === 'auto-skip-headers';
     if ((sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && hasSetContentSize.current) {
-      autoSizeColumns({
+      void autoSizeColumns({
         skipHeader,
         userSizedColIds: new Set(userSizedColIds.current.keys()),
         colIds: colIdsEdited.current,
@@ -585,11 +598,21 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       children: colDef.children.map((colDef) => adjustColDefOrGroup(colDef)),
     });
 
-    const adjustColDef = (colDef: ColDef<TData>): ColDef<TData> => ({
-      ...colDef,
-      suppressSizeToFit: (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && !colDef.flex,
-      sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
-    });
+    const adjustColDef = (colDef: ColDef<TData>): ColDef<TData> => {
+      const flex = colDef.flex ?? (sizeColumns === 'fit' ? 1 : undefined);
+      return {
+        ...colDef,
+        // You cannot pass a width to a flex
+        width: !!colDef.flex ? undefined : colDef.width,
+        flexAutoSizeWidth: colDef.width,
+        // If this is allowed flex columns don't size based on flex
+        suppressSizeToFit: true,
+        // Auto-sizing flex columns breaks everything
+        flex,
+        suppressAutoSize: !!flex,
+        sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
+      } as ColDef<TData> & { flexAutoSizeWidth?: number };
+    };
 
     return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
   }, [columnDefs, params.defaultColDef?.sortable, sizeColumns]);
@@ -617,7 +640,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         if (sizeColumns === 'auto' || skipHeader) {
           defer(() => {
             if (hasSetContentSize.current) {
-              autoSizeColumns({
+              void autoSizeColumns({
                 skipHeader,
                 userSizedColIds: new Set(userSizedColIds.current.keys()),
                 colIds: colIdsEdited.current,
@@ -812,9 +835,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     [columnDefs, params.loading, params.noRowsMatchingOverlayText, params.noRowsOverlayText, rowData, rowHeight],
   );
 
-  const selectionColumnDef = useMemo((): SelectionColumnDef => {
+  const selectionColumnDef = useMemo((): SelectionColumnDef | undefined => {
     // Note this has to be 1 for hidden otherwise ag-grid does crazy things whilst resizing
-    const selectWidth = params.hideSelectColumn ? 0 : selectable && params.onRowDragEnd ? 76 : 48;
+    const selectWidth = params.onRowDragEnd ? 76 : 48;
     return {
       suppressNavigable: params.hideSelectColumn,
       rowDrag: !!params.onRowDragEnd,
@@ -824,6 +847,8 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       headerComponentParams: {
         exportable: false,
       },
+      suppressAutoSize: true,
+      suppressSizeToFit: true,
       headerClass: clsx('ag-header-hide-default-select', params.onRowDragEnd && 'ag-header-select-draggable'),
       headerComponent: rowSelection == 'multiple' ? GridHeaderSelect : undefined,
       suppressHeaderKeyboardEvent: (e) => {
@@ -855,7 +880,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
   const onGridSizeChanged = useCallback(
     (event: GridSizeChangedEvent<TData>) => {
-      if (sizeColumns === 'fit') {
+      if (sizeColumns === 'fit' || (['auto', 'auto-skip-headers'].includes(sizeColumns) && hasSetContentSize.current)) {
         event.api.sizeColumnsToFit();
       }
     },
@@ -883,9 +908,14 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
                   enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                   enableClickSelection: params.enableClickSelection ?? false,
                   mode: rowSelection === 'single' ? 'singleRow' : 'multiRow',
+                  ...(params.hideSelectColumn && {
+                    checkboxes: false,
+                    headerCheckbox: false,
+                  }),
                 }
               : undefined
           }
+          selectionColumnDef={selectionColumnDef}
           rowHeight={rowHeight}
           animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}
@@ -893,7 +923,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressClickEdit={true}
           onGridSizeChanged={onGridSizeChanged}
-          onColumnVisible={setInitialContentSize}
+          onColumnVisible={() => void setInitialContentSize()}
           onRowDataUpdated={onRowDataUpdated}
           onCellFocused={onCellFocused}
           onCellKeyDown={onCellKeyPress}
@@ -904,7 +934,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           onColumnResized={onColumnResized}
           defaultColDef={defaultColDef}
           columnDefs={columnDefsAdjusted}
-          selectionColumnDef={selectionColumnDef}
           rowData={rowData}
           postSortRows={params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows}
           onModelUpdated={onModelUpdated}

package/src/contexts/GridContext.tsx

@@ -45,7 +45,7 @@ export interface GridContextType<TData extends GridBaseRow> {
   ensureRowVisible: (id: number | string) => boolean;
   ensureSelectedRowIsVisible: () => void;
   getFirstRowId: () => number;
-  autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
+  autoSizeColumns: (props?: AutoSizeColumnsProps) => Promise<AutoSizeColumnsResult>;
   sizeColumnsToFit: (paramsOrGridWidth?: ISizeColumnsToFitParams) => void;
   startCellEditing: ({ rowId, colId }: StartCellEditingProps) => Promise<void>;
   // Restores the previous focus after cell editing
@@ -153,9 +153,9 @@ export const GridContext = createContext<GridContextType<any>>({
     console.error('no context provider for getFirstRowId');
     return -1;
   },
-  autoSizeColumns: () => {
+  autoSizeColumns: async () => {
     console.error('no context provider for autoSizeColumns');
-    return null;
+    return Promise.resolve(null);
   },
   sizeColumnsToFit: () => {
     console.error('no context provider for autoSizeAllColumns');

package/src/contexts/GridContextProvider.tsx

@@ -434,10 +434,11 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Then we size the flexed columns.
    */
   const autoSizeColumns = useCallback(
-    ({ skipHeader, colIds, userSizedColIds }: AutoSizeColumnsProps = {}): AutoSizeColumnsResult => {
+    async ({ skipHeader, colIds, userSizedColIds }: AutoSizeColumnsProps = {}): Promise<AutoSizeColumnsResult> => {
       if (!gridApi || !gridApi.getColumnState()) {
         return null;
       }
+
       const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
 
       const getVisibleColStates = () => {
@@ -450,31 +451,44 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
       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();
+      // You cannot autosize flex columns it will break layout randomly
+      // So, a flex column is assumed to be 150 wide, unless width is provided
+      const flexColumns = getFlexColStates().map(colStateId);
       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();
-      }
+      flexColumns.forEach((colId) => {
+        const colDef = gridApi.getColumnDef(colId) as { flexAutoSizeWidth?: number } | undefined;
+        width += colDef?.flexAutoSizeWidth ?? 200;
+      });
+
+      const nonFlexColumns = getNonFlexColStates();
+      const nonFlexColumnIds = nonFlexColumns.map(colStateId);
+      gridApi.autoSizeColumns({ colIds: nonFlexColumnIds, skipHeader });
 
-      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),
+      const calcSubWidth = () => {
+        const updatedFlexColumns = getVisibleColStates().filter((colState) =>
+          nonFlexColumnIds.includes(colState.colId),
+        );
+        return sumBy(
+          updatedFlexColumns.filter((col) => !col.hide),
           'width',
         );
+      };
+
+      // ag-grid updates widths asynchronously, so we wait here for the default calculated width to change
+      let lastSubWidth = calcSubWidth();
+      const endTime = Date.now() + 1000;
+      while (Date.now() < endTime) {
+        await wait(40);
+        const newSubWidth = calcSubWidth();
+        if (lastSubWidth !== newSubWidth) {
+          lastSubWidth = newSubWidth;
+          break;
+        }
       }
 
+      width += lastSubWidth;
+
+      gridApi.sizeColumnsToFit();
       return {
         width,
       };

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

@@ -35,13 +35,11 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props
       GridCell({
         field: 'id',
         headerName: 'Id',
-        flex: 2,
       }),
       GridCell(
         {
           field: 'name',
           headerName: 'Popout Generic Edit',
-          flex: 1,
         },
         {
           multiEdit: true,
@@ -55,7 +53,13 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props
 
   const [rowData] = useState([
     { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345' },
-    { id: 1001, name: 'PEG V SD523', nameType: 'PEG', numba: 'V', plan: 'SD 523' },
+    {
+      id: 1001,
+      name: 'PEG V SD523',
+      nameType: 'PEG',
+      numba: 'V',
+      plan: 'SD 523',
+    },
   ] as IFormTestRow[]);
 
   return (
@@ -64,6 +68,8 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
+      hideSelectColumn={true}
+      selectable={true}
       rowData={rowData}
       domLayout={'autoHeight'}
     />

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

@@ -0,0 +1,84 @@
+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 { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../../..';
+import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
+import { FormTest, IFormTestRow } from '../FormTest';
+
+export default {
+  title: 'Components / Grid Size',
+  component: Grid,
+  args: {
+    quickFilterValue: '',
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <GridUpdatingContextProvider>
+        <GridContextProvider>
+          <Story />
+        </GridContextProvider>
+      </GridUpdatingContextProvider>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridCell(
+        {
+          field: 'name',
+          headerName: 'Popout Generic Edit',
+          flex: 1,
+        },
+        {
+          multiEdit: true,
+          editor: FormTest,
+          editorParams: {},
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345' },
+    {
+      id: 1001,
+      name: 'PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523',
+      nameType: 'PEG',
+      numba: 'V',
+      plan: 'SD 523',
+    },
+  ] as IFormTestRow[]);
+
+  return (
+    <>
+      Auto-size. Col 1 should autosize, Col 2 should flex to fill.
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        hideSelectColumn={true}
+        selectable={true}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+      />
+    </>
+  );
+};
+
+export const _AutoSize = GridPopoutEditGenericTemplate.bind({});
+_AutoSize.play = waitForGridReady;

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

@@ -0,0 +1,84 @@
+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 { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../../..';
+import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
+import { FormTest, IFormTestRow } from '../FormTest';
+
+export default {
+  title: 'Components / Grid Size',
+  component: Grid,
+  args: {
+    quickFilterValue: '',
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <GridUpdatingContextProvider>
+        <GridContextProvider>
+          <Story />
+        </GridContextProvider>
+      </GridUpdatingContextProvider>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridCell(
+        {
+          field: 'name',
+          headerName: 'Popout Generic Edit',
+        },
+        {
+          multiEdit: true,
+          editor: FormTest,
+          editorParams: {},
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345' },
+    {
+      id: 1001,
+      name: 'PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523',
+      nameType: 'PEG',
+      numba: 'V',
+      plan: 'SD 523',
+    },
+  ] as IFormTestRow[]);
+
+  return (
+    <>
+      Equisized flex columns spread across container
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        sizeColumns={'fit'}
+        hideSelectColumn={true}
+        selectable={true}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+      />
+    </>
+  );
+};
+
+export const _FitSize = GridPopoutEditGenericTemplate.bind({});
+_FitSize.play = waitForGridReady;

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

@@ -0,0 +1,86 @@
+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 { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../../..';
+import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
+import { FormTest, IFormTestRow } from '../FormTest';
+
+export default {
+  title: 'Components / Grid Size',
+  component: Grid,
+  args: {
+    quickFilterValue: '',
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <GridUpdatingContextProvider>
+        <GridContextProvider>
+          <Story />
+        </GridContextProvider>
+      </GridUpdatingContextProvider>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+        flex: 2,
+      }),
+      GridCell(
+        {
+          field: 'name',
+          headerName: 'Popout Generic Edit',
+          flex: 1,
+        },
+        {
+          multiEdit: true,
+          editor: FormTest,
+          editorParams: {},
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345' },
+    {
+      id: 1001,
+      name: 'PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523',
+      nameType: 'PEG',
+      numba: 'V',
+      plan: 'SD 523',
+    },
+  ] as IFormTestRow[]);
+
+  return (
+    <>
+      1:3 flex columns spread across container. These columns should not be the same size.
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        sizeColumns={'fit'}
+        hideSelectColumn={true}
+        selectable={true}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+      />
+    </>
+  );
+};
+
+export const _FitSizeFlex = GridPopoutEditGenericTemplate.bind({});
+_FitSizeFlex.play = waitForGridReady;