@linzjs/step-ag-grid 29.11.3 → 29.12.0

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.12.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -38,6 +38,7 @@
     "clsx": "^2.1.1",
     "debounce-promise": "^3.1.2",
     "matcher": "^5.0.0",
+    "natsort": "^2.0.3",
     "react-transition-state": "^2.3.1",
     "usehooks-ts": "^3.1.1",
     "uuid": "^13.0.0"

package/src/components/Grid.tsx

@@ -23,6 +23,7 @@ import {
   RowDragMoveEvent,
   SelectionChangedEvent,
   SelectionColumnDef,
+  ValueFormatterParams,
 } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import clsx from 'clsx';
@@ -32,7 +33,7 @@ import { useInterval } from 'usehooks-ts';
 
 import { AutoSizeColumnsResult, StartCellEditingProps, useGridContext } from '../contexts/GridContext';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
-import { fnOrVar, isNotEmpty } from '../utils/util';
+import { compareNaturalInsensitive, fnOrVar, isNotEmpty } from '../utils/util';
 import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
 import { GridHeaderSelect } from './gridHeader';
 import { GridContextMenuComponent, useGridContextMenu } from './gridHook';
@@ -205,68 +206,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;
+        }
+        const autoSizeResult =
+          autoSizeResultRef.current ??
+          (await autoSizeColumns({
+            skipHeader,
+            userSizedColIds: new Set(userSizedColIds.current.keys()),
+          }));
+        // Auto-size failed retry later
+        if (!autoSizeResult) {
+          needsAutoSize.current = true;
+          return;
         }
-      } else if (gridRendered === 'rows-visible') {
-        // we have rows now so callback grid size
-        if (!hasSetContentSize.current) {
-          hasSetContentSize.current = true;
-          params.onContentSize?.(autoSizeResult);
+
+        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 +317,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 +471,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 +488,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 +599,54 @@ 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);
+      const valueFormatter = colDef.valueFormatter;
+      const sortable = colDef.sortable && params.defaultColDef?.sortable !== false;
+      let comparator = colDef.comparator;
+      if (sortable && !comparator) {
+        comparator = (value1, value2, node1, node2) => {
+          let r = 0;
+          if (typeof valueFormatter === 'function') {
+            r = compareNaturalInsensitive(
+              valueFormatter({
+                data: node1.data,
+                value: value1,
+                node: node1,
+                colDef: adjustedColDef,
+                ...NotAGridValueFormatterCall,
+              } as ValueFormatterParams<TData>),
+              valueFormatter({
+                data: node2.data,
+                value: value2,
+                node: node2,
+                colDef: adjustedColDef,
+                ...NotAGridValueFormatterCall,
+              } as ValueFormatterParams<TData>),
+            );
+          } else {
+            r = compareNaturalInsensitive(value1, value2);
+          }
+          // secondary compare as primary sort column rows are equal
+          return r === 0 ? compareNaturalInsensitive(node1.data?.id, node2.data?.id) : r;
+        };
+      }
+      const adjustedColDef = {
+        ...colDef,
+        // You cannot pass a width to a flex
+        width: !!colDef.flex ? undefined : colDef.width,
+        ...(!!colDef.flex && { 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,
+        comparator,
+      } as ColDef<TData> & { flexAutoSizeWidth?: number };
+
+      return adjustedColDef;
+    };
 
     return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
   }, [columnDefs, params.defaultColDef?.sortable, sizeColumns]);
@@ -617,7 +674,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 +869,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 +881,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 +914,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 +942,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 +957,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 +968,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}
@@ -940,3 +1003,13 @@ const quickFilterParser = (filterStr: string) => {
   // filter is exact matches exactly groups separated by commas
   return filterStr.split(',').map((str) => str.trim());
 };
+
+/**
+ * Columns to indicate to user when they debug why things are broken in the default comparator if their valueFormatter
+ * is too complicated.
+ */
+const NotAGridValueFormatterCall = {
+  column: 'Default comparator has no access to column, write your own comparator' as unknown,
+  api: 'Default comparator has no access to api, write your own comparator' as unknown,
+  context: 'Default comparator has no access to context, write your own comparator' as unknown,
+};

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,50 +434,69 @@ 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 = () => {
-        const colStates = gridApi.getColumnState();
-        return colStates.filter((colState) => {
-          const colId = colState.colId;
-          return (isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
+      try {
+        const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
+
+        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);
+
+        // 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;
+        flexColumns.forEach((colId) => {
+          const colDef = gridApi.getColumnDef(colId) as { flexAutoSizeWidth?: number } | undefined;
+          width += colDef?.flexAutoSizeWidth ?? 200;
         });
-      };
-      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 nonFlexColumns = getNonFlexColStates();
         const nonFlexColumnIds = nonFlexColumns.map(colStateId);
-        nonFlexColumns = getVisibleColStates().filter((colState) => nonFlexColumnIds.includes(colState.colId));
-        width += sumBy(
-          nonFlexColumns.filter((col) => !col.hide),
-          'width',
-        );
-      }
+        gridApi.autoSizeColumns({ colIds: nonFlexColumnIds, skipHeader });
 
-      return {
-        width,
-      };
+        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,
+        };
+      } catch (ex) {
+        console.info('autosize failed', ex);
+        return null;
+      }
     },
     [gridApi],
   );

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'}
     />