@linzjs/step-ag-grid 29.14.1 → 29.16.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.14.1",
+  "version": "29.16.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -44,14 +44,14 @@
     "uuid": "^13.0.0"
   },
   "scripts": {
-    "build": "run-s clean lint css bundle",
+    "build": "run-s clean linters css bundle",
     "yalc": "run-s clean css bundle && yalc push",
     "clean": "rimraf dist && mkdirp ./dist",
     "bundle": "rollup -c",
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
     "test": "cross-env NODE_OPTIONS='--no-experimental-global-navigator' vitest run",
     "test:watch": "vitest --watch",
-    "lint": "run-s lint:eslint lint:circulardeps",
+    "linters": "run-s lint:eslint lint:circulardeps",
     "lint:eslint": "eslint ./src --ext .js,.ts,.tsx --cache --ignore-path .gitignore",
     "lint:circulardeps": "npx madge --circular --extensions ts,tsx ./src",
     "lint:fix": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
@@ -59,7 +59,6 @@
     "build-storybook": "storybook build",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "semantic-release": "semantic-release",
     "upgrade": "npx ncu -i --format group"
   },
   "eslintConfig": {
@@ -80,30 +79,29 @@
     ]
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.53.2",
-    "@swc/core-linux-x64-gnu": "^1.15.1"
+    "@rollup/rollup-linux-x64-gnu": "^4.53.3",
+    "@swc/core-linux-x64-gnu": "^1.15.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.2",
-    "@linzjs/lui": "^23.14.2",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@linzjs/lui": "^24.3.1",
     "@linzjs/style": "^5.4.0",
-    "@linzjs/windows": "^8.1.0",
-    "@rollup/plugin-commonjs": "^28.0.8",
+    "@linzjs/windows": "^8.3.0",
+    "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-docs": "^9.1.12",
-    "@storybook/addon-links": "^9.1.12",
-    "@storybook/react": "^9.1.12",
-    "@storybook/react-vite": "^9.1.12",
+    "@storybook/addon-docs": "^9.1.16",
+    "@storybook/addon-links": "^9.1.16",
+    "@storybook/react": "^9.1.16",
+    "@storybook/react-vite": "^9.1.16",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/debounce-promise": "^3.1.9",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.17.0",
-    "@types/react": "^18.3.23",
+    "@types/node": "^22.19.2",
+    "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
     "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
@@ -112,11 +110,11 @@
     "ag-grid-react": "34.2.0",
     "babel-preset-react-app": "^10.1.0",
     "canvas": "^3.2.0",
-    "chromatic": "^13.3.3",
+    "chromatic": "^13.3.4",
     "cross-env": "^10.1.0",
     "css-loader": "^7.1.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.1.12",
+    "eslint-plugin-storybook": "^9.1.16",
     "jsdom": "^26.1.0",
     "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",
@@ -127,20 +125,19 @@
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rimraf": "^6.1.0",
-    "rollup": "^4.53.2",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.53.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "^1.94.0",
+    "sass": "^1.96.0",
     "sass-loader": "^16.0.6",
-    "semantic-release": "^24.2.9",
-    "storybook": "^9.1.12",
+    "storybook": "^9.1.16",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2",
+    "vite": "^7.2.7",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"

package/src/components/Grid.tsx

@@ -85,6 +85,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   // ─── Editing ──────────────────────────────────────────────────
   onBulkEditingComplete?: () => Promise<void> | void;
   singleClickEdit?: boolean;
+  stopEditingWhenCellsLoseFocus?: boolean;
 
   // ─── Context Menu ─────────────────────────────────────────────
   contextMenu?: GridContextMenuComponent<TData>;
@@ -149,6 +150,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
   // ─── Editing ──────────────────────────────────
   singleClickEdit = false,
+  stopEditingWhenCellsLoseFocus = false,
 
   // ─── Context Menu ─────────────────────────────
   contextMenuSelectRow = false,
@@ -1079,6 +1081,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
                 }
               : undefined
           }
+          stopEditingWhenCellsLoseFocus={stopEditingWhenCellsLoseFocus}
           selectionColumnDef={selectionColumnDef}
           suppressCellFocus={params.suppressCellFocus}
           suppressClickEdit={true}

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -8,6 +8,7 @@ import { createRoot, Root } from 'react-dom/client';
 export interface CheckboxMultiFilterParams extends IFilterParams {
   labels?: Record<string, string>;
   labelFormatter?: (value: string) => string;
+  customOrder?: string[];
 }
 
 export interface CheckboxMultiFilterModel {
@@ -91,9 +92,18 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
       values.add(norm);
     });
 
+    const { customOrder } = this.params;
+    const orderMap = customOrder?.length ? new Map(customOrder.map((val, idx) => [val, idx])) : null;
+
     return Array.from(values).sort((a, b) => {
-      if (a === EMPTY_KEY && b !== EMPTY_KEY) return -1;
-      if (b === EMPTY_KEY && a !== EMPTY_KEY) return 1;
+      if (orderMap) {
+        const aIdx = orderMap.get(a) ?? Infinity;
+        const bIdx = orderMap.get(b) ?? Infinity;
+        if (aIdx !== bIdx) return aIdx - bIdx;
+      }
+
+      if (a === EMPTY_KEY) return b === EMPTY_KEY ? 0 : -1;
+      if (b === EMPTY_KEY) return 1;
       return a.localeCompare(b);
     });
   }
@@ -155,10 +165,14 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   }
 
   isFilterActive(): boolean {
-    return this.selectedValues.size > 0;
+    return this.selectedValues.size !== this.allValues.length;
   }
 
   doesFilterPass(p: IDoesFilterPassParams): boolean {
+    if (this.selectedValues.size === 0) {
+      return false;
+    }
+
     const field = this.params.colDef.field as string;
     if (!p.data || typeof p.data !== 'object') {
       return this.selectedValues.has(EMPTY_KEY);
@@ -170,7 +184,10 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   }
 
   getModel(): CheckboxMultiFilterModel | null {
-    return this.selectedValues.size > 0 ? { values: Array.from(this.selectedValues) } : null;
+    if (this.selectedValues.size !== this.allValues.length) {
+      return { values: Array.from(this.selectedValues) };
+    }
+    return null;
   }
 
   setModel(model: CheckboxMultiFilterModel | null): void {
@@ -189,7 +206,9 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
 export const createCheckboxMultiFilterParams = (
   labels: Record<string, string> = {},
   labelFormatter?: (value: string) => string,
+  customOrder?: string[],
 ): Partial<CheckboxMultiFilterParams> => ({
   labels: { [EMPTY_KEY]: DEFAULT_EMPTY_LABEL, ...labels },
   labelFormatter,
+  customOrder,
 });

package/src/stories/grid/GridCopy.stories.tsx

@@ -123,17 +123,7 @@ const GridCopyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITest
   const [rowData] = useState<ITestRow[]>(() => {
     const random = new SeededRandomForTests(1000);
     let id = 1000;
-    const positions = [
-      undefined,
-      'Tester',
-      'Developer',
-      'Lawyer',
-      'Barrista """',
-      'Manager',
-      'CEO',
-      'CTO',
-      'Architect',
-    ];
+    const positions = [undefined, 'Tester', 'Developer', 'Lawyer', 'Barista """', 'Manager', 'CEO', 'CTO', 'Architect'];
     const result: ITestRow[] = [];
     for (let i = 0; i < 1000; i++) {
       result.push({
@@ -159,7 +149,6 @@ const GridCopyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITest
         {...props}
         enableRangeSelection={true}
         selectable={true}
-        enableClickSelection={true}
         enableSelectionWithoutKeys={true}
         autoSelectFirstRow={true}
         externalSelectedIds={externalSelectedIds}

package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx

@@ -57,11 +57,15 @@ const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (pr
         field: 'position',
         headerName: 'Position',
         filter: GridFilterColumnsMultiSelect,
-        filterParams: createCheckboxMultiFilterParams({
-          Developer: 'FE Dev',
-          Manager: 'Tech Manager',
-          __EMPTY__: 'None',
-        }),
+        filterParams: createCheckboxMultiFilterParams(
+          {
+            Developer: 'FE Dev',
+            Manager: 'Tech Manager',
+            __EMPTY__: 'None',
+          },
+          undefined,
+          ['Manager', 'Developer', '__EMPTY__', 'Tester'],
+        ),
       }),
       GridCell({
         field: 'desc',