@linzjs/step-ag-grid 29.5.0 → 29.6.0

package/dist/GridTheme.scss

@@ -58,31 +58,30 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
-// Don't hide the drag handle
-.ag-theme-step-default.theme-specific .ag-drag-handle.ag-row-drag, .ag-theme-step-compact.theme-specific div.ag-drag-handle.ag-row-drag {
-  opacity: 1 !important;
-}
+.ag-theme-step-default.theme-specific,
+.ag-theme-step-compact.theme-specific {
+  // Don't hide the drag handle
+  .ag-drag-handle.ag-row-drag {
+    opacity: 1 !important;
+  }
 
-.ag-header-hide-default-select .ag-labeled {
-  display: none;
-}
+  .ag-header-hide-default-select .ag-labeled {
+    display: none;
+  }
 
-.ag-header-hide-default-select .ag-wrapper.ag-checkbox-input-wrapper {
-  margin-right: 9px;
-}
+  div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn'] {
+    padding-left: 40px;
+  }
 
-div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn'] {
-  padding-left: 40px;
-}
+  div.ag-header-cell:not(.ag-header-select-draggable)[col-id='ag-Grid-SelectionColumn'] {
+    padding-left: 12px;
+  }
 
-.ag-drag-handle.ag-row-drag {
-  .ag-icon.ag-icon-grip {
-    margin: auto;
+  div.ag-cell-wrapper {
+    margin-left: 4px;
+    margin-right: 4px;
   }
-}
 
-.ag-theme-step-default.theme-specific,
-.ag-theme-step-compact.theme-specific {
   div.ag-center-cols-viewport {
     // when using domLayout={"autoHeight"}, ag grid has a default min-height
     // set to 150px so the !important is necessary here
@@ -158,6 +157,9 @@ div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn']
     }
   }
 
+  div.ag-cell-wrapper .ag-selection-checkbox {
+    margin: 0;
+  }
 
   .ag-cell {
     display: flex;

package/dist/src/components/gridFilter/GridFilterColumnsMultiSelect.d.ts

@@ -0,0 +1,30 @@
+import './GridFilterColumnsMultiSelect.scss';
+import type { IDoesFilterPassParams, IFilterComp, IFilterParams } from 'ag-grid-community';
+export interface CheckboxMultiFilterParams extends IFilterParams {
+    labels?: Record<string, string>;
+    labelFormatter?: (value: string) => string;
+}
+export interface CheckboxMultiFilterModel {
+    values: string[];
+}
+export declare class GridFilterColumnsMultiSelect implements IFilterComp {
+    private params;
+    private selectedValues;
+    private labels;
+    private allValues;
+    private gui;
+    private labelFormatter?;
+    private reactRoot;
+    private loadFieldValues;
+    init(params: CheckboxMultiFilterParams): void;
+    private render;
+    private handleToggleAll;
+    private handleToggleOne;
+    getGui(): HTMLElement;
+    isFilterActive(): boolean;
+    doesFilterPass(params: IDoesFilterPassParams): boolean;
+    getModel(): CheckboxMultiFilterModel | null;
+    setModel(model: CheckboxMultiFilterModel | null): void;
+    destroy(): void;
+}
+export declare const createCheckboxMultiFilterParams: (labels?: Record<string, string>, labelFormatter?: (value: string) => string) => Partial<CheckboxMultiFilterParams>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.5.0",
+  "version": "29.6.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -76,22 +76,22 @@
     ]
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.52.3",
+    "@rollup/rollup-linux-x64-gnu": "^4.52.4",
     "@swc/core-linux-x64-gnu": "^1.13.20"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
-    "@linzjs/lui": "^23.11.1",
+    "@linzjs/lui": "^23.14.2",
     "@linzjs/style": "^5.4.0",
     "@linzjs/windows": "^5.7.0",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-docs": "^9.1.8",
-    "@storybook/addon-links": "^9.1.8",
-    "@storybook/react": "^9.1.8",
-    "@storybook/react-vite": "^9.1.8",
+    "@storybook/addon-docs": "^9.1.12",
+    "@storybook/addon-links": "^9.1.12",
+    "@storybook/react": "^9.1.12",
+    "@storybook/react-vite": "^9.1.12",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -111,7 +111,7 @@
     "cross-env": "^10.1.0",
     "css-loader": "^7.1.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.1.8",
+    "eslint-plugin-storybook": "^9.1.12",
     "jsdom": "^26.1.0",
     "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",
@@ -123,7 +123,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.52.3",
+    "rollup": "^4.52.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -131,11 +131,11 @@
     "sass": "^1.93.2",
     "sass-loader": "^16.0.5",
     "semantic-release": "^24.2.9",
-    "storybook": "^9.1.8",
+    "storybook": "^9.1.12",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.10",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"

package/src/components/gridFilter/GridFilterColumnsMultiSelect.scss

@@ -0,0 +1,20 @@
+@use "@linzjs/lui/dist/scss/Core" as lui;
+
+.GridFilterColsMultiSelect {
+    background: #fff;
+    padding: 8px;
+    @include lui.font-semibold();
+
+    .LuiCheckboxInput-selectAll,
+    .LuiCheckboxInput-item {
+        color: lui.$charcoal;
+        line-height: 20px;
+        margin-bottom: 0;
+        font-weight: 600;
+        font-style: SemiBold;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0%;
+
+    }
+}

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -0,0 +1,189 @@
+import './GridFilterColumnsMultiSelect.scss';
+
+import { LuiCheckboxInput } from '@linzjs/lui';
+import type { IDoesFilterPassParams, IFilterComp, IFilterParams } from 'ag-grid-community';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+
+export interface CheckboxMultiFilterParams extends IFilterParams {
+  labels?: Record<string, string>;
+  labelFormatter?: (value: string) => string;
+}
+
+export interface CheckboxMultiFilterModel {
+  values: string[];
+}
+
+interface FilterUIProps {
+  allValues: string[];
+  selected: Set<string>;
+  labels: Record<string, string>;
+  labelFormatter?: (value: string) => string;
+  onToggleAll: (checked: boolean) => void;
+  onToggleOne: (value: string, checked: boolean) => void;
+}
+
+const FilterUI: React.FC<FilterUIProps> = ({
+  allValues,
+  selected,
+  labels,
+  labelFormatter,
+  onToggleAll,
+  onToggleOne,
+}) => {
+  const allChecked = allValues.length > 0 && selected.size === allValues.length;
+
+  const getDisplayLabel = (raw: string): string => {
+    const mapped = labels[raw] ?? raw;
+    return labelFormatter ? labelFormatter(mapped) : mapped;
+  };
+
+  return (
+    <div className="GridFilterColsMultiSelect">
+      <span className="LuiSelect-label-text">Filter column</span>
+
+      <LuiCheckboxInput
+        className="LuiCheckboxInput-selectAll"
+        label={'Select All'}
+        value="true"
+        isChecked={allChecked}
+        onChange={(e) => onToggleAll(e.target.checked)}
+      />
+      {allValues.map((val) => (
+        <LuiCheckboxInput
+          key={val}
+          className="LuiCheckboxInput-item"
+          label={getDisplayLabel(val)}
+          value={val}
+          isChecked={selected.has(val)}
+          onChange={(e) => onToggleOne(val, e.target.checked)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export class GridFilterColumnsMultiSelect implements IFilterComp {
+  private params!: CheckboxMultiFilterParams;
+  private selectedValues = new Set<string>();
+  private labels: Record<string, string> = {};
+  private allValues: string[] = [];
+  private gui!: HTMLElement;
+  private labelFormatter?: (value: string) => string;
+  private reactRoot: Root | null = null;
+
+  private loadFieldValues(): string[] {
+    const field = this.params.colDef.field as string;
+    const values = new Set<string>();
+
+    this.params.api.forEachNode((node) => {
+      const data = node.data;
+      const cellValue = data?.[field];
+      if (
+        data &&
+        typeof data === 'object' &&
+        field in data &&
+        typeof cellValue === 'string' &&
+        cellValue !== undefined &&
+        cellValue !== null
+      ) {
+        values.add(cellValue);
+      }
+    });
+
+    return Array.from(values).sort();
+  }
+
+  init(params: CheckboxMultiFilterParams): void {
+    this.params = params;
+    this.labels = { ...params.labels };
+    this.labelFormatter = params.labelFormatter;
+
+    this.allValues = this.loadFieldValues();
+
+    this.gui = document.createElement('div');
+    this.reactRoot = createRoot(this.gui);
+    this.render();
+  }
+
+  private render(): void {
+    if (!this.reactRoot) return;
+
+    this.reactRoot.render(
+      <FilterUI
+        allValues={this.allValues}
+        selected={this.selectedValues}
+        labels={this.labels}
+        labelFormatter={this.labelFormatter}
+        onToggleAll={this.handleToggleAll.bind(this)}
+        onToggleOne={this.handleToggleOne.bind(this)}
+      />,
+    );
+  }
+
+  private handleToggleAll(checked: boolean): void {
+    if (checked) {
+      this.allValues.forEach((val) => this.selectedValues.add(val));
+    } else {
+      this.selectedValues.clear();
+    }
+    this.render();
+    this.params.filterChangedCallback();
+  }
+
+  private handleToggleOne(value: string, checked: boolean): void {
+    if (checked) {
+      this.selectedValues.add(value);
+    } else {
+      this.selectedValues.delete(value);
+    }
+    this.render();
+    this.params.filterChangedCallback();
+  }
+
+  getGui(): HTMLElement {
+    return this.gui;
+  }
+
+  isFilterActive(): boolean {
+    return this.selectedValues.size > 0;
+  }
+
+  doesFilterPass(params: IDoesFilterPassParams): boolean {
+    const field = this.params.colDef.field as string;
+    if (!params.data || typeof params.data !== 'object' || !(field in params.data)) {
+      return false;
+    }
+
+    const cellValue = (params.data as Record<string, unknown>)[field];
+    if (typeof cellValue !== 'string') {
+      return false;
+    }
+
+    return this.selectedValues.has(cellValue);
+  }
+
+  getModel(): CheckboxMultiFilterModel | null {
+    return this.selectedValues.size > 0 ? { values: Array.from(this.selectedValues) } : null;
+  }
+
+  setModel(model: CheckboxMultiFilterModel | null): void {
+    this.selectedValues = new Set(model?.values || []);
+    this.render();
+  }
+
+  destroy(): void {
+    if (this.reactRoot) {
+      this.reactRoot.unmount();
+      this.reactRoot = null;
+    }
+  }
+}
+
+export const createCheckboxMultiFilterParams = (
+  labels: Record<string, string> = {},
+  labelFormatter?: (value: string) => string,
+): Partial<CheckboxMultiFilterParams> => ({
+  labels,
+  labelFormatter,
+});

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

@@ -0,0 +1,122 @@
+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 {
+  createCheckboxMultiFilterParams,
+  GridFilterColumnsMultiSelect,
+} from 'components/gridFilter/GridFilterColumnsMultiSelect';
+import { useMemo, useState } from 'react';
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridFilterButtons,
+  GridFilterQuick,
+  GridFilters,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1024, height: 400, display: 'flex' }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  desc: string;
+}
+
+const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridCell({
+        field: 'position',
+        headerName: 'Position',
+        filter: GridFilterColumnsMultiSelect,
+        filterParams: createCheckboxMultiFilterParams({
+          Developer: 'FE Dev',
+          Manager: 'Tech Manager',
+        }),
+      }),
+      GridCell({
+        field: 'desc',
+        headerName: 'Description',
+        flex: 1,
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    {
+      id: 1000,
+      position: 'Tester',
+      age: 30,
+      desc: 'Integration tester - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lectus neque. Nunc congue magna ut lorem pretium, vitae congue lorem malesuada. Etiam eget eleifend sapien, sed egestas felis. Aliquam ac augue sapien.',
+    },
+    { id: 1001, position: 'Developer', age: 12, desc: 'Frontend developer' },
+    { id: 1002, position: 'Manager', age: 65, desc: 'Technical Manager' },
+    { id: 1003, position: 'Tester', age: 30, desc: 'E2E tester' },
+    { id: 1004, position: 'Developer', age: 12, desc: 'Fullstack Developer' },
+    { id: 1005, position: 'Developer', age: 12, desc: 'Backend Developer' },
+    { id: 1006, position: 'Architect', age: 30, desc: 'Architect' },
+  ]);
+
+  return (
+    <GridWrapper>
+      <GridFilters>
+        <GridFilterQuick quickFilterPlaceholder={'Custom placeholder...'} />
+        <GridFilterButtons<ITestRow>
+          luiButtonProps={{ style: { whiteSpace: 'nowrap' } }}
+          options={[
+            {
+              label: 'All',
+            },
+            {
+              label: 'Developers',
+              filter: (row) => row.position === 'Developer',
+            },
+            {
+              label: 'Testers',
+              filter: (row) => row.position === 'Tester',
+            },
+          ]}
+        />
+      </GridFilters>
+      <Grid
+        {...props}
+        rowSelection={'multiple'}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        sizeColumns={'auto-skip-headers'}
+      />
+    </GridWrapper>
+  );
+};
+
+export const _FilterColumnsMultiSelectExample = GridFilterColumnsMultiSelectTemplate.bind({});
+_FilterColumnsMultiSelectExample.play = waitForGridReady;

package/src/styles/GridTheme.scss

@@ -58,31 +58,30 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
-// Don't hide the drag handle
-.ag-theme-step-default.theme-specific .ag-drag-handle.ag-row-drag, .ag-theme-step-compact.theme-specific div.ag-drag-handle.ag-row-drag {
-  opacity: 1 !important;
-}
+.ag-theme-step-default.theme-specific,
+.ag-theme-step-compact.theme-specific {
+  // Don't hide the drag handle
+  .ag-drag-handle.ag-row-drag {
+    opacity: 1 !important;
+  }
 
-.ag-header-hide-default-select .ag-labeled {
-  display: none;
-}
+  .ag-header-hide-default-select .ag-labeled {
+    display: none;
+  }
 
-.ag-header-hide-default-select .ag-wrapper.ag-checkbox-input-wrapper {
-  margin-right: 9px;
-}
+  div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn'] {
+    padding-left: 40px;
+  }
 
-div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn'] {
-  padding-left: 40px;
-}
+  div.ag-header-cell:not(.ag-header-select-draggable)[col-id='ag-Grid-SelectionColumn'] {
+    padding-left: 12px;
+  }
 
-.ag-drag-handle.ag-row-drag {
-  .ag-icon.ag-icon-grip {
-    margin: auto;
+  div.ag-cell-wrapper {
+    margin-left: 4px;
+    margin-right: 4px;
   }
-}
 
-.ag-theme-step-default.theme-specific,
-.ag-theme-step-compact.theme-specific {
   div.ag-center-cols-viewport {
     // when using domLayout={"autoHeight"}, ag grid has a default min-height
     // set to 150px so the !important is necessary here
@@ -158,6 +157,9 @@ div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn']
     }
   }
 
+  div.ag-cell-wrapper .ag-selection-checkbox {
+    margin: 0;
+  }
 
   .ag-cell {
     display: flex;