@linzjs/step-ag-grid 32.1.0 → 32.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "32.1.0",
+  "version": "32.2.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -27,7 +27,7 @@
     "node": ">=22"
   },
   "peerDependencies": {
-    "@linzjs/lui": ">=21",
+    "@linzjs/lui": ">=24",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
@@ -46,7 +46,7 @@
     "build": "node --eval \"fs.mkdirSync('./dist', { recursive: true })\" && run-s clean lintall css bundle",
     "yalc": "run-s clean css bundle && yalc push",
     "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
-    "bundle": "rollup -c",
+    "bundle": "tsc -p tsconfig.json && rollup -c",
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
     "test": "cross-env vitest run",
     "test:watch": "vitest --watch",
@@ -59,7 +59,7 @@
     "build-storybook": "storybook build",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "upgrade": "npx ncu -i --format group",
+    "upgrade": "npx npm-check-updates -i --format group -c 1d",
     "prepare": "husky"
   },
   "browserslist": {
@@ -75,50 +75,49 @@
     ]
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.2.1",
-    "@linzjs/lui": "^24.17.0",
-    "@linzjs/windows": "^11.2.0",
+    "@chromatic-com/storybook": "^5.3.0",
+    "@linzjs/lui": "^24.20.0",
+    "@linzjs/windows": "^13.0.0",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/addon-links": "^10.4.6",
-    "@storybook/react": "^10.4.6",
-    "@storybook/react-vite": "^10.4.6",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "@storybook/addon-docs": "^10.5.7",
+    "@storybook/addon-links": "^10.5.7",
+    "@storybook/react-vite": "^10.5.7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/user-event": "^14.6.3",
     "@types/debounce-promise": "^3.1.9",
     "@types/jest": "^30.0.0",
     "@types/jsdom": "^28.0.3",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.13.2",
-    "@types/react": "^18.3.27",
+    "@types/node": "^24.13.3",
+    "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
-    "@vitejs/plugin-react": "^6.0.3",
-    "@vitest/ui": "^4.1.9",
-    "chromatic": "^17.6.0",
+    "@vitejs/plugin-react": "^6.0.5",
+    "@vitest/ui": "^4.1.10",
+    "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.56.0",
-    "oxlint": "^1.71.0",
-    "postcss": "^8.5.15",
+    "oxfmt": "^0.62.0",
+    "oxlint": "^1.77.0",
+    "postcss": "^8.5.26",
     "postcss-scss": "^4.0.9",
     "react": ">=19",
-    "react-dom": "^19.2.7",
-    "rollup": "^4.62.2",
+    "react-dom": "^19.2.8",
+    "rollup": "^4.62.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.37.0",
-    "sass": "^1.101.0",
-    "storybook": "^10.4.6",
-    "typescript": "^6.0.3",
-    "vite": "^8.1.0",
-    "vitest": "^4.1.9"
+    "sass": "^1.102.0",
+    "storybook": "^10.5.7",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.1",
+    "vitest": "^4.1.10"
   },
   "husky": {
     "hooks": {

package/src/components/Grid.tsx

@@ -1106,6 +1106,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       <div style={{ flex: 1 }} ref={gridDivRef} onCopy={onCopyEvent}>
         <AgGridReact
           theme={'legacy'}
+          tooltipShowDelay={500}
           domLayout={params.domLayout}
           defaultColDef={defaultColDef}
           columnDefs={columnDefsAdjusted}

package/src/components/gridPopoverEdit/GridEditBoolean.tsx

@@ -2,6 +2,7 @@ import { CellFocusedEvent, IRowNode } from 'ag-grid-community';
 import { CustomCellEditorProps } from 'ag-grid-react';
 import clsx from 'clsx';
 import { useCallback, useEffect, useRef } from 'react';
+import { isEmpty } from 'lodash-es';
 
 import { useGridContext } from '../../contexts/GridContext';
 import { fnOrVar } from '../../utils/util';
@@ -11,10 +12,11 @@ import { GenericCellColDef } from '../gridRender';
 import { ColDefT, GridBaseRow } from '../types';
 import { useSharedInterval } from '../../utils/useSharedInterval';
 
-const BooleanCellRenderer = (props: CustomCellEditorProps) => {
+const BooleanCellRenderer = <TData extends GridBaseRow>(props: CustomCellEditorProps) => {
   const { onValueChange, value, api, node, column, colDef, data, eGridCell } = props;
   const inputRef = useRef<HTMLInputElement>(null);
-  const { updatingCells, redrawRows, resetFocusedCellAfterCellEditing, prePopupOps } = useGridContext();
+  const { updatingCells, redrawRows, resetFocusedCellAfterCellEditing, getSelectedRows, prePopupOps } =
+    useGridContext<TData>();
 
   useEffect(() => {
     const checkFocus = (event: CellFocusedEvent) => {
@@ -38,9 +40,26 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
       return;
     }
 
+    const multiEdit = params.multiEdit ?? false;
+    let selectedRows: TData[] = [];
+    if (multiEdit) {
+      // Sort clicked row to top among all selected rows
+      selectedRows = getSelectedRows<TData>().sort((a, b) => {
+        const aa = a.id === data.id;
+        const bb = b.id === data.id;
+        if (aa && !bb) return -1;
+        if (!aa && bb) return 1;
+        return 0;
+      });
+    }
+    if (isEmpty(selectedRows)) {
+      selectedRows = [data as TData];
+    }
+    const selectedRowIds = selectedRows.map((row) => row.id);
+
     const nodes: IRowNode[] = [];
     api.forEachNode((n) => {
-      if (n.data.id === data.id) {
+      if (selectedRowIds.includes(n.data.id)) {
         nodes.push(n);
       }
     });
@@ -50,7 +69,6 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
     const checked = !value;
     onValueChange(checked);
     const field = props.colDef?.field ?? props.colDef?.colId ?? '';
-    const selectedRows = nodes.map((node) => node.data);
     void updatingCells({ selectedRows, field }, async () => {
       redrawRows(nodes);
       return params.onClick({ selectedRows, selectedRowIds: selectedRows.map((r) => r.id), checked });
@@ -59,12 +77,13 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
     });
   }, [
     api,
-    data.id,
+    data,
     onValueChange,
     prePopupOps,
     props.colDef?.cellEditorParams,
     props.colDef?.colId,
     props.colDef?.field,
+    getSelectedRows,
     redrawRows,
     resetFocusedCellAfterCellEditing,
     updatingCells,
@@ -75,9 +94,16 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
     if (isDisabled) {
       return;
     }
-    const cell: HTMLElement | null = eGridCell?.querySelector('.ag-cell-focus .grid-edit-boolean input.ag-checkbox-input:not(:disabled)');
-    if (cell && cell.ownerDocument.activeElement !== cell) {
-      cell.focus();
+    const cell: HTMLElement | null = eGridCell?.querySelector(
+      '.ag-cell-focus .grid-edit-boolean input.ag-checkbox-input:not(:disabled)',
+    );
+    if (cell) {
+      // When you redraw a cell the activeElement moves to the cell div away from input
+      // Refocus here if the cell div is active back to the input
+      const activeElement = cell.ownerDocument.activeElement;
+      if (activeElement && activeElement.getAttribute('role') === 'gridcell' && activeElement !== cell) {
+        cell.focus();
+      }
     }
   });
 
@@ -105,6 +131,7 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
 };
 
 export interface GridEditBooleanEditorProps<TData extends GridBaseRow> extends CellEditorCommon {
+  multiEdit?: boolean;
   onClick: (props: {
     selectedRows: TData[];
     selectedRowIds: TData['id'][];

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

package/src/stories/grid/GridPopoutEditBoolean.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';
 
@@ -16,10 +11,17 @@ import {
   GridPopoverEditDropDown,
   GridUpdatingContextProvider,
   primitiveToSelectOption,
-  wait,
 } from '../..';
+import { expect, userEvent, waitFor } from 'storybook/test';
+
 import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
-import { IFormTestRow } from './FormTest';
+
+interface IBoolTestRow {
+  id: number;
+  name: string;
+  boldSingleSelect: boolean;
+  boldMultiSelect: boolean;
+}
 
 export default {
   title: 'Components / Grids',
@@ -39,11 +41,11 @@ export default {
 
 const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
   const [rowData, setRowData] = useState([
-    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345', bold: true },
-    { id: 1001, name: 'PEG V SD523', nameType: 'PEG', numba: 'V', plan: 'SD 523', bold: false },
-  ] as IFormTestRow[]);
+    { id: 1000, name: 'IS IS DP12345', boldSingleSelect: true, boldMultiSelect: false },
+    { id: 1001, name: 'PEG V SD523', boldSingleSelect: true, boldMultiSelect: false },
+  ] as IBoolTestRow[]);
 
-  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+  const columnDefs: ColDefT<IBoolTestRow>[] = useMemo(
     () => [
       GridCell({
         field: 'id',
@@ -63,16 +65,15 @@ const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
       ),
       GridEditBoolean(
         {
-          field: 'bold',
+          field: 'boldSingleSelect',
+          headerName: 'Bold single-select',
         },
         {
+          // multiEdit defaults to false — only the clicked row is updated
           onClick: async ({ selectedRowIds, checked }) => {
-            await wait(1000);
-            setRowData((rowData) => {
-              // eslint-disable-next-line no-console
-              console.log('onchange', selectedRowIds, checked);
-              return rowData.map((row) => (selectedRowIds.includes(row.id) ? { ...row, bold: checked } : row));
-            });
+            setRowData((prev) =>
+              prev.map((row) => (selectedRowIds.includes(row.id) ? { ...row, boldSingleSelect: checked } : row)),
+            );
             return true;
           },
         },
@@ -95,16 +96,15 @@ const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
       ),
       GridEditBoolean(
         {
-          colId: 'bold2',
-          field: 'bold',
+          field: 'boldMultiSelect',
+          headerName: 'Bold multi-select',
         },
         {
+          multiEdit: true,
           onClick: async ({ selectedRowIds, checked }) => {
-            setRowData((rowData) => {
-              // eslint-disable-next-line no-console
-              console.log('onchange', selectedRowIds, checked);
-              return rowData.map((row) => (selectedRowIds.includes(row.id) ? { ...row, bold: checked } : row));
-            });
+            setRowData((prev) =>
+              prev.map((row) => (selectedRowIds.includes(row.id) ? { ...row, boldMultiSelect: checked } : row)),
+            );
             return true;
           },
         },
@@ -119,9 +119,9 @@ const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
         theme={'ag-theme-step-view-list-default'}
         columnDefs={columnDefs}
         rowData={rowData}
-        selectable={false}
+        selectable={true}
         singleClickEdit={true}
-        rowSelection="single"
+        rowSelection="multiple"
         domLayout={'autoHeight'}
       />
     </>
@@ -130,3 +130,89 @@ const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
 
 export const _EditBoolean = GridPopoutEditBooleanTemplate.bind({});
 _EditBoolean.play = waitForGridReady;
+
+export const _EditBooleanRetainsFocusAfterToggle = GridPopoutEditBooleanTemplate.bind({});
+_EditBooleanRetainsFocusAfterToggle.play = async (context) => {
+  await waitForGridReady(context);
+  const { canvasElement } = context;
+
+  // Use boldMultiSelect (no async delay) so the redraw happens immediately
+  const getBoolInput = () =>
+    canvasElement.querySelector('.ag-cell[col-id="boldMultiSelect"] input.ag-checkbox-input') as HTMLElement;
+
+  await userEvent.click(canvasElement.querySelector('.ag-cell[col-id="boldMultiSelect"]') as HTMLElement);
+  await waitFor(() => expect(getBoolInput()).toHaveFocus(), { timeout: 500 });
+
+  // Space toggles the checkbox, which triggers redrawRows — ag-grid moves focus from the
+  // input to the cell div (role="gridcell"). The shared interval should detect this and restore focus.
+  await userEvent.keyboard(' ');
+
+  // Re-query the input each retry since redraw replaces the DOM node
+  await waitFor(() => expect(getBoolInput()).toHaveFocus(), { timeout: 500 });
+};
+
+const selectRow = async (canvasElement: HTMLElement, rowId: string) => {
+  await userEvent.click(
+    canvasElement.querySelector(`.ag-row[row-id="${rowId}"] .ag-cell[col-id="ag-Grid-SelectionColumn"]`) as HTMLElement,
+  );
+  await waitFor(() =>
+    expect(canvasElement.querySelector(`.ag-row[row-id="${rowId}"].ag-row-selected`)).toBeInTheDocument(),
+  );
+};
+
+const getBoolInput = (canvasElement: HTMLElement, rowId: string, colId: string) =>
+  canvasElement.querySelector(
+    `.ag-row[row-id="${rowId}"] .ag-cell[col-id="${colId}"] input.ag-checkbox-input`,
+  ) as HTMLInputElement;
+
+export const _EditBooleanSingleSelectOnlyAffectsClickedRow = GridPopoutEditBooleanTemplate.bind({});
+_EditBooleanSingleSelectOnlyAffectsClickedRow.play = async (context) => {
+  await waitForGridReady(context);
+  const { canvasElement } = context;
+
+  // Select both rows so we can prove single-select ignores the multi-row selection
+  await selectRow(canvasElement, '1000');
+  await selectRow(canvasElement, '1001');
+
+  // Both rows start with boldSingleSelect: true
+  await waitFor(() => {
+    expect(getBoolInput(canvasElement, '1000', 'boldSingleSelect').checked).toBe(true);
+    expect(getBoolInput(canvasElement, '1001', 'boldSingleSelect').checked).toBe(true);
+  });
+
+  // Click row 1000's boldSingleSelect — multiEdit defaults to false, so only row 1000 changes
+  await userEvent.click(
+    canvasElement.querySelector('.ag-row[row-id="1000"] .ag-cell[col-id="boldSingleSelect"]') as HTMLElement,
+  );
+
+  await waitFor(() => {
+    expect(getBoolInput(canvasElement, '1000', 'boldSingleSelect').checked).toBe(false);
+    expect(getBoolInput(canvasElement, '1001', 'boldSingleSelect').checked).toBe(true); // unchanged
+  });
+};
+
+export const _EditBooleanMultiSelectEditsAllSelectedRows = GridPopoutEditBooleanTemplate.bind({});
+_EditBooleanMultiSelectEditsAllSelectedRows.play = async (context) => {
+  await waitForGridReady(context);
+  const { canvasElement } = context;
+
+  // Select both rows before clicking
+  await selectRow(canvasElement, '1000');
+  await selectRow(canvasElement, '1001');
+
+  // Both rows start with boldMultiSelect: false
+  await waitFor(() => {
+    expect(getBoolInput(canvasElement, '1000', 'boldMultiSelect').checked).toBe(false);
+    expect(getBoolInput(canvasElement, '1001', 'boldMultiSelect').checked).toBe(false);
+  });
+
+  // Click row 1000's boldMultiSelect — multiEdit: true, so all selected rows change
+  await userEvent.click(
+    canvasElement.querySelector('.ag-row[row-id="1000"] .ag-cell[col-id="boldMultiSelect"]') as HTMLElement,
+  );
+
+  await waitFor(() => {
+    expect(getBoolInput(canvasElement, '1000', 'boldMultiSelect').checked).toBe(true);
+    expect(getBoolInput(canvasElement, '1001', 'boldMultiSelect').checked).toBe(true); // also changed
+  });
+};

package/src/utils/util.ts

@@ -54,7 +54,7 @@ export const fnOrVar = (fn: any, param?: any) => (typeof fn === 'function' ? fn(
 export const sanitiseFileName = (filename: string): string => {
   const valid = filename
     .trim()
-    .replaceAll(/([\/\\])+/g, '-')
+    .replaceAll(/([/\\])+/g, '-')
     .replaceAll(/\s+/g, '_')
     .replaceAll(/[^\w\-āēīōūĀĒĪŌŪ.]/g, '');
   const parts = valid.split('.');

package/dist/vite.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfigFnObject;
-export default _default;