@linzjs/step-ag-grid 30.4.2 → 30.4.4

package/package.json

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

package/src/components/Grid.tsx

@@ -771,8 +771,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           } 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;
+          return r;
         };
       }
       const adjustedColDef = {

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

@@ -82,14 +82,14 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<I
         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,
+        comparator: (_v1, _v2, n1, n2) => compareNaturalInsensitive(String(n1.data?.id), String(n2.data?.id)),
       }),
       GridCell({
         colId: 'customComparatorNumeric',
-        headerName: 'Cust. comp. abs number',
+        headerName: 'Cust. comp. number',
         valueFormatter: ({ data }) => String(data?.numeric ?? ''),
         comparator: (_v1, _v2, n1, n2) => {
-          return compareNaturalInsensitive(n1.data?.numeric, n2.data?.numeric) ?? 0;
+          return compareNaturalInsensitive(n1.data?.numeric, n2.data?.numeric);
         },
       }),
     ],
@@ -148,16 +148,8 @@ Sorting.play = async (context) => {
   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('text', ['–', '2', '10', 'ade', 'ade', 'b', 'b', 'cdc', 'e', 'e']);
+  await test('text', ['e', 'e', 'cdc', 'b', 'b', 'ade', 'ade', '10', '2', '–']);
 
   await test('customComparatorText', null, [
     '1000',

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

@@ -0,0 +1,121 @@
+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,
+  GridWrapper,
+} from '../..';
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  // 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;
+  position: string;
+  age: number;
+  height: string;
+  desc: string;
+  dd: string;
+}
+
+const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell<ITestRow, ITestRow['id']>({
+        field: 'id',
+        headerName: 'Id',
+        lockVisible: true,
+        resizable: false,
+        lockPosition: 'left',
+        cellRenderer: ({ value }) => <a href={'#'}>{value}</a>,
+      }),
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
+        resizable: false,
+        lockPosition: 'left',
+        cellRendererParams: {
+          warning: ({ value }) => value === 'Tester' && 'Testers are testing',
+          info: ({ value }) => value === 'Developer' && 'Developers are awesome',
+        },
+      }),
+      GridCell({
+        field: 'desc',
+        headerName: 'Description',
+        resizable: false,
+        lockPosition: 'left',
+      }),
+      GridCell({
+        field: 'age',
+        headerName: 'Age',
+        resizable: false,
+        lockPosition: 'left',
+      }),
+      GridCell({
+        field: 'height',
+        headerName: 'Height',
+        resizable: false,
+        lockPosition: 'left',
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>([
+    { id: 1000, position: 'Tester', age: 30, height: `6'4"`, desc: 'Tests application', dd: '1' },
+    { id: 1001, position: 'Developer', age: 12, height: `5'3"`, desc: 'Develops application', dd: '2' },
+    { id: 1002, position: 'Manager', age: 65, height: `5'9"`, desc: 'Manages', dd: '3' },
+  ]);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={'readonly'}
+        {...props}
+        selectable={true}
+        rowSelection={'multiple'}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        sizeColumns={'fit'}
+        theme={'ag-theme-step-view-list-default'}
+        contextMenuSelectRow={false}
+        suppressCellFocus={true}
+      />
+    </GridWrapper>
+  );
+};
+export const SelectableListViewGrid = GridReadOnlyTemplate.bind({});

package/src/styles/GridTheme.scss

@@ -279,6 +279,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-theme-step-view-list-default.theme-specific {
 
+  .ag-header-hide-default-select .ag-labeled {
+    display: none;
+  }
+
   .ag-header-cell {
     font-size: 14px;
     font-weight: 600;
@@ -295,4 +299,4 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   .ag-header-cell {
     font-size: 14px;
   }
-}
+}