@linzjs/step-ag-grid 29.11.4 → 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.4",
+  "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';
@@ -600,18 +601,51 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
     const adjustColDef = (colDef: ColDef<TData>): ColDef<TData> => {
       const flex = colDef.flex ?? (sizeColumns === 'fit' ? 1 : undefined);
-      return {
+      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,
-        flexAutoSizeWidth: 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: colDef.sortable && params.defaultColDef?.sortable !== false,
+        sortable,
+        comparator,
       } as ColDef<TData> & { flexAutoSizeWidth?: number };
+
+      return adjustedColDef;
     };
 
     return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
@@ -969,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/GridContextProvider.tsx

@@ -439,59 +439,64 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         return null;
       }
 
-      const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
+      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 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);
-
-      // 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 nonFlexColumns = getNonFlexColStates();
-      const nonFlexColumnIds = nonFlexColumns.map(colStateId);
-      gridApi.autoSizeColumns({ colIds: nonFlexColumnIds, skipHeader });
+        const nonFlexColumns = getNonFlexColStates();
+        const nonFlexColumnIds = nonFlexColumns.map(colStateId);
+        gridApi.autoSizeColumns({ colIds: nonFlexColumnIds, skipHeader });
 
-      const calcSubWidth = () => {
-        const updatedFlexColumns = getVisibleColStates().filter((colState) =>
-          nonFlexColumnIds.includes(colState.colId),
-        );
-        return sumBy(
-          updatedFlexColumns.filter((col) => !col.hide),
-          '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;
+        // 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;
+        width += lastSubWidth;
 
-      gridApi.sizeColumnsToFit();
-      return {
-        width,
-      };
+        gridApi.sizeColumnsToFit();
+        return {
+          width,
+        };
+      } catch (ex) {
+        console.info('autosize failed', ex);
+        return null;
+      }
     },
     [gridApi],
   );

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

@@ -0,0 +1,189 @@
+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,
+  compareNaturalInsensitive,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+  wait,
+} from '../..';
+import {
+  clickColumnHeaderToSort,
+  gridColumnValues,
+  waitForGridReady,
+  waitForGridRows,
+} from '../../utils/__tests__/storybookTestUtil';
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  args: {
+    quickFilter: true,
+    quickFilterValue: '',
+    quickFilterPlaceholder: 'Quick filter...',
+    selectable: false,
+    rowSelection: 'single',
+  }, // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  numeric?: number;
+  text?: string;
+}
+
+const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+        lockVisible: true,
+      }),
+      GridCell({
+        field: 'numeric',
+        headerName: 'Numeric',
+      }),
+      GridCell({
+        field: 'text',
+        headerName: 'Text',
+      }),
+      GridCell({
+        colId: 'customComparatorText',
+        headerName: 'Cust. comp. id as text',
+        valueFormatter: ({ data }) => data?.text ?? '',
+        comparator: (_v1, _v2, n1, n2) => compareNaturalInsensitive(String(n1.data?.id), String(n2.data?.id)) ?? 0,
+      }),
+      GridCell({
+        colId: 'customComparatorNumeric',
+        headerName: 'Cust. comp. abs number',
+        valueFormatter: ({ data }) => String(data?.numeric ?? ''),
+        comparator: (_v1, _v2, n1, n2) => {
+          return compareNaturalInsensitive(n1.data?.numeric, n2.data?.numeric) ?? 0;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>([
+    { id: 1009, numeric: -1.1, text: 'ade' },
+    { id: 1000, numeric: 1, text: 'ade' },
+    { id: 1001, numeric: 11, text: 'cdc' },
+    { id: 1002, numeric: 21, text: '2' },
+    { id: 1003, numeric: 2.1, text: '10' },
+    { id: 1004, numeric: 2.01, text: 'b' },
+    { id: 1005, numeric: 2.21, text: 'b' },
+    { id: 1006, numeric: 3, text: undefined },
+    { id: 1008, numeric: 3, text: 'e' },
+    { id: 1007, numeric: undefined, text: 'e' },
+  ]);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={'readonly'}
+        {...props}
+        selectable={true}
+        enableClickSelection={true}
+        enableSelectionWithoutKeys={true}
+        autoSelectFirstRow={true}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+      />
+    </GridWrapper>
+  );
+};
+
+export const Sorting = GridReadOnlyTemplate.bind({});
+Sorting.play = async (context) => {
+  const { canvasElement } = context;
+  await waitForGridReady(context);
+  await waitForGridRows({ grid: canvasElement });
+
+  const test = async (colId: string | null, expected: string[] | null, idExpected?: string[]) => {
+    if (colId !== null) {
+      await clickColumnHeaderToSort(colId, canvasElement);
+      await wait(500);
+      expected && expect(gridColumnValues(colId, canvasElement)).toEqual(expected);
+    }
+    idExpected && expect(gridColumnValues('id', canvasElement)).toEqual(idExpected);
+  };
+
+  // Default sort order
+  await test(null, null, ['1009', '1000', '1001', '1002', '1003', '1004', '1005', '1006', '1008', '1007']);
+
+  await test('numeric', ['–', '-1.1', '1', '2.01', '2.1', '2.21', '3', '3', '11', '21']);
+  await test('numeric', ['21', '11', '3', '3', '2.21', '2.1', '2.01', '1', '-1.1', '–']);
+
+  await test(
+    'text',
+    ['–', '2', '10', 'ade', 'ade', 'b', 'b', 'cdc', 'e', 'e'],
+    ['1006', '1002', '1003', '1000', '1009', '1004', '1005', '1001', '1007', '1008'],
+  );
+  await test(
+    'text',
+    ['e', 'e', 'cdc', 'b', 'b', 'ade', 'ade', '10', '2', '–'],
+    ['1008', '1007', '1001', '1005', '1004', '1009', '1000', '1003', '1002', '1006'],
+  );
+
+  await test('customComparatorText', null, [
+    '1000',
+    '1001',
+    '1002',
+    '1003',
+    '1004',
+    '1005',
+    '1006',
+    '1007',
+    '1008',
+    '1009',
+  ]);
+  await test('customComparatorText', null, [
+    '1009',
+    '1008',
+    '1007',
+    '1006',
+    '1005',
+    '1004',
+    '1003',
+    '1002',
+    '1001',
+    '1000',
+  ]);
+
+  await test('customComparatorNumeric', ['–', '-1.1', '1', '2.01', '2.1', '2.21', '3', '3', '11', '21']);
+  await test('customComparatorNumeric', ['21', '11', '3', '3', '2.21', '2.1', '2.01', '1', '-1.1', '–']);
+};

package/src/utils/__tests__/storybookTestUtil.ts

@@ -1,4 +1,31 @@
-import { expect, waitFor } from 'storybook/test';
+import { sortBy } from 'lodash-es';
+import { expect, userEvent, waitFor } from 'storybook/test';
+
+import { findQuick, getAllQuick } from './testQuick';
 
 export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
   waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });
+
+export const waitForGridRows = async (props?: { grid?: HTMLElement; timeout?: number }) =>
+  waitFor(() => expect(getAllQuick({ classes: '.ag-row' }, props?.grid).length > 0).toBe(true), {
+    timeout: props?.timeout ?? 4000,
+  });
+
+export const clickColumnHeaderToSort = async (colId: string, within: HTMLElement): Promise<void> => {
+  const user = userEvent.setup({
+    delay: 100,
+  });
+  const header = await findQuick({ selector: `.ag-header-cell[col-id="${colId}"]` }, within);
+  await expect(header).toBeInTheDocument();
+  // For some reason clicks in storybook don't trigger ag-grid, but manual clicks do
+  await user.click(header);
+  await user.keyboard('{Enter}');
+};
+
+export const gridColumnValues = (colId: string, within: HTMLElement): string[] => {
+  return sortBy(
+    getAllQuick({ tagName: `[col-id="${colId}"]`, classes: `.ag-cell` }, within),
+    // @ts-expect-error css style type
+    (el) => el.parentElement?.attributeStyleMap.get('transform')?.[0]?.y.value,
+  ).map((cell) => cell.innerText);
+};

package/src/utils/__tests__/testQuick.ts

@@ -25,6 +25,7 @@ export interface IQueryQuick {
   role?: string;
   classes?: string;
   child?: IQueryQuick;
+  selector?: string;
 }
 
 const escapeSelectorParam = (param: string): string => param.replace(/["\\]/g, '\\$&');
@@ -51,6 +52,7 @@ const quickSelector = <T extends HTMLElement>(
   let lastIQueryQuick = props;
   for (let loop: IQueryQuick | undefined = props; loop; loop = loop.child) {
     lastIQueryQuick = loop;
+    loop.selector && (selector += loop.selector);
     loop.tagName && (selector += loop.tagName);
     loop.ariaLabel && (selector += `[aria-label='${escapeSelectorParam(loop.ariaLabel)}']`);
     loop.role && (selector += `[role="${escapeSelectorParam(loop.role)}"]`);

package/src/utils/util.ts

@@ -1,4 +1,5 @@
 import { isEmpty, negate } from 'lodash-es';
+import natsort from 'natsort';
 
 export const isNotEmpty = negate(isEmpty);
 
@@ -58,3 +59,21 @@ export const sanitiseFileName = (filename: string): string => {
   if (!fileExt) return valid.slice().slice(0, 64);
   return valid.slice(0, -fileExt.length - 1).slice(0, 64) + '.' + fileExt;
 };
+
+const naturalSortInsensitive = natsort({ insensitive: true });
+const santitizeNaturalValue = (v: string | number | null | undefined): string => {
+  if (v === '–' || v === '-' || v == null) {
+    return '';
+  }
+  return String(v);
+};
+export const compareNaturalInsensitive = (
+  a?: object | string | number | null,
+  b?: object | string | number | null,
+): number => {
+  if ((a !== null && typeof a === 'object') || (b !== null && typeof b === 'object')) {
+    // We can't compare objects
+    return 0;
+  }
+  return naturalSortInsensitive(santitizeNaturalValue(a), santitizeNaturalValue(b));
+};