[pull] latest from ag-grid:latest

documentation/ag-grid-docs/src/components/changelog/Changelog.tsx

@@ -262,6 +262,29 @@ export const Changelog = () => {
         };
     }, []);
 
+    const [filterBreakingChanges, setFilterBreakingChanges] = useState(false);
+
+    const toggleFilterBreakingChanges = () => {
+        setFilterBreakingChanges((prev) => !prev);
+    };
+
+    const isExternalFilterPresent = useCallback(() => {
+        return !!filterBreakingChanges;
+    }, [filterBreakingChanges]);
+
+    const doesExternalFilterPass = useCallback(
+        (node) => {
+            if (filterBreakingChanges && node.data.breakingChangesNotes) {
+                return true;
+            } else if (filterBreakingChanges) {
+                return false;
+            }
+
+            return true;
+        },
+        [filterBreakingChanges]
+    );
+
     const COLUMN_DEFS = useMemo(
         () => [
             IssueColDef,
@@ -282,6 +305,9 @@ export const Changelog = () => {
                 filter: 'agSetColumnFilter',
                 width: 145,
                 sort: 'desc',
+                filterParams: {
+                    suppressSorting: true,
+                },
             },
             IssueTypeColDef,
             {
@@ -327,8 +353,13 @@ export const Changelog = () => {
                     onChange={handleSearchQueryChange}
                 ></input>
                 <span className={classnames(styles.searchExplainer, 'text-secondary')}>
-                    Find changelog items by issue number, summary content, or version
+                    Find by issue number, summary content, or version
                 </span>
+
+                <label className={classnames(styles.searchBreakingText, 'text-secondary')}>
+                    Breaking changes:
+                    <input type="checkbox" checked={filterBreakingChanges} onChange={toggleFilterBreakingChanges} />
+                </label>
             </div>
 
             <Grid
@@ -348,6 +379,8 @@ export const Changelog = () => {
                 onFirstDataRendered={() => {
                     applyFixVersionFilter();
                 }}
+                doesExternalFilterPass={doesExternalFilterPass}
+                isExternalFilterPresent={isExternalFilterPresent}
             ></Grid>
         </div>
     );

documentation/ag-grid-docs/src/components/theme-builder/components/presets/PresetSelector.tsx

@@ -56,7 +56,12 @@ const SelectButton = ({ preset, scrollerRef, presetClass }: SelectButtonProps) =
                 theme = theme.withPart(part);
             }
             wrapper.style.setProperty('--page-background-color', preset.pageBackgroundColor);
-            theme._startUse({ styleContainer: wrapper, loadThemeGoogleFonts: true });
+            theme._startUse({
+                styleContainer: wrapper,
+                loadThemeGoogleFonts: true,
+                cssLayer: undefined,
+                nonce: undefined,
+            });
             setThemeClass(theme._getCssClass());
 
             style.textContent = theme._getPerGridCss(presetClass) || '';

documentation/ag-grid-docs/src/content/api-documentation/grid-options/properties.json

@@ -1854,6 +1854,12 @@
                 "name": "CSS Layers",
                 "url": "./theming-css/#css-layers"
             }
+        },
+        "styleNonce": {
+            "more": {
+                "name": "Security",
+                "url": "./security#style-src"
+            }
         }
     },
     "tooltips": {

documentation/ag-grid-docs/src/content/docs/performance-test/_examples/lots-of-cells-components/index.html

@@ -0,0 +1,9 @@
+<div class="test-container" style="height: 100%; display: flex; flex-direction: column">
+    <div>
+        <button onclick="onSetData()">Set Data</button>
+        <button onclick="onClearData()">Clear Data</button>
+        <button onclick="onScroll()">Scroll</button>
+        <span id="output">Time taken:</span>
+    </div>
+    <div id="myGrid" style="flex-grow: 1"></div>
+</div>

documentation/ag-grid-docs/src/content/docs/performance-test/_examples/lots-of-cells-components/main.ts

@@ -0,0 +1,186 @@
+import type { ColDef, GridApi, GridOptions } from 'ag-grid-community';
+import { ClientSideRowModelModule, ModuleRegistry, ValidationModule, createGrid } from 'ag-grid-community';
+
+import { MissionResultRenderer } from './missionResultRenderer_typescript';
+
+ModuleRegistry.registerModules([ClientSideRowModelModule, ValidationModule /* Development Only */]);
+
+const repeat = (arr: any[], n: number) => Array(n).fill(arr).flat();
+
+const cols: ColDef[] = [
+    { field: 'athlete' },
+    { field: 'gold' },
+    { field: 'silver' },
+    { field: 'bronze' },
+    { field: 'total' },
+    { field: 'age' },
+    { field: 'country' },
+    { field: 'sport' },
+    { field: 'year' },
+    { field: 'date' },
+];
+
+let gridApi: GridApi<IOlympicData>;
+
+const gridOptions: GridOptions<IOlympicData> = {
+    columnDefs: repeat(cols, 10),
+    suppressColumnVirtualisation: true,
+    rowBuffer: 300,
+    defaultColDef: {
+        initialWidth: 100,
+        cellRenderer: MissionResultRenderer,
+    },
+    rowData: [],
+};
+
+function outputText(time?: number) {
+    const text = `Time taken: ${time ? Math.round(time) + 'ms' : '....'}`;
+    console.log(text);
+    document.querySelector<HTMLElement>('#output')!.innerText = text;
+}
+
+function onScroll() {
+    const start = performance.now();
+    outputText();
+    requestIdleCallback(() => {
+        outputText(performance.now() - start);
+    });
+    const eBodyViewport = document.querySelector<HTMLElement>('.ag-body-viewport')!;
+    const currScroll = eBodyViewport.scrollTop;
+    eBodyViewport.scroll(0, currScroll! + 5000);
+}
+
+function onClearData() {
+    const start = performance.now();
+    outputText();
+    requestIdleCallback(() => {
+        outputText(Math.round(performance.now() - start));
+    });
+    gridApi!.setGridOption('rowData', []);
+}
+
+function onSetData() {
+    const start = performance.now();
+    outputText();
+    requestIdleCallback(() => {
+        outputText(performance.now() - start);
+    });
+    gridApi!.setGridOption('rowData', repeat(data, 100));
+}
+
+// setup the grid after the page has finished loading
+document.addEventListener('DOMContentLoaded', () => {
+    const gridDiv = document.querySelector<HTMLElement>('#myGrid')!;
+    gridApi = createGrid(gridDiv, gridOptions);
+});
+
+const data: IOlympicData[] = [
+    {
+        athlete: 'Michael Phelps',
+        age: 23,
+        country: 'United States',
+        sport: 'Swimming',
+        year: 2008,
+        date: '24/08/2008',
+        gold: 8,
+        silver: 0,
+        bronze: 0,
+        total: 8,
+    },
+    {
+        athlete: 'Michael Phelps',
+        age: 19,
+        country: 'United States',
+        sport: 'Swimming',
+        year: 2004,
+        date: '29/08/2004',
+        gold: 6,
+        silver: 0,
+        bronze: 2,
+        total: 8,
+    },
+    {
+        athlete: 'Michael Phelps',
+        age: 27,
+        country: 'United States',
+        sport: 'Swimming',
+        year: 2012,
+        date: '12/08/2012',
+        gold: 4,
+        silver: 2,
+        bronze: 0,
+        total: 6,
+    },
+    {
+        athlete: 'Natalie Coughlin',
+        age: 25,
+        country: 'United States',
+        sport: 'Swimming',
+        year: 2008,
+        date: '24/08/2008',
+        gold: 1,
+        silver: 2,
+        bronze: 3,
+        total: 6,
+    },
+    {
+        athlete: 'Aleksey Nemov',
+        age: 24,
+        country: 'Russia',
+        sport: 'Gymnastics',
+        year: 2000,
+        date: '01/10/2000',
+        gold: 2,
+        silver: 1,
+        bronze: 3,
+        total: 6,
+    },
+    {
+        athlete: 'Alicia Coutts',
+        age: 24,
+        country: 'Australia',
+        sport: 'Swimming',
+        year: 2012,
+        date: '12/08/2012',
+        gold: 1,
+        silver: 3,
+        bronze: 1,
+        total: 5,
+    },
+    {
+        athlete: 'Missy Franklin',
+        age: 17,
+        country: 'United States',
+        sport: 'Swimming',
+        year: 2012,
+        date: '12/08/2012',
+        gold: 4,
+        silver: 0,
+        bronze: 1,
+        total: 5,
+    },
+    {
+        athlete: 'Ryan Lochte',
+        age: 27,
+        country: 'United States',
+        sport: 'Swimming',
+        year: 2012,
+        date: '12/08/2012',
+        gold: 2,
+        silver: 2,
+        bronze: 1,
+        total: 5,
+    },
+    {
+        athlete: 'Allison Schmitt',
+        age: 22,
+        country: 'United States',
+        sport: 'Swimming',
+        year: 2012,
+        date: '12/08/2012',
+        gold: 3,
+        silver: 1,
+        bronze: 1,
+        total: 5,
+    },
+];

documentation/ag-grid-docs/src/content/docs/performance-test/_examples/lots-of-cells-components/missionResultRenderer.component_angular.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+import type { ICellRendererAngularComp } from 'ag-grid-angular';
+import type { ICellRendererParams } from 'ag-grid-community';
+
+interface MissionCellRendererParams extends ICellRendererParams {
+    src?: (params: boolean) => string;
+}
+
+@Component({
+    selector: 'app-mission-result-renderer',
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <span :class="missionSpan">
+            @if (value()) {
+                <img [alt]="value()" [src]="value()" [height]="30" :class="missionIcon" />
+            }
+        </span>
+    `,
+    styles: [
+        'img { width: auto; height: auto; } span {display: flex; height: 100%; justify-content: center; align-items: center} ',
+    ],
+})
+export class MissionResultRenderer implements ICellRendererAngularComp {
+    value = signal<string>('');
+    agInit(params: MissionCellRendererParams): void {
+        this.refresh(params);
+    }
+
+    refresh(params: MissionCellRendererParams): boolean {
+        if (params.src) {
+            this.value.set(params.src(params.value));
+        } else {
+            const defaultSrc = `https://www.ag-grid.com/example-assets/icons/${
+                params.value ? 'tick-in-circle' : 'cross-in-circle'
+            }.png`;
+            this.value.set(defaultSrc);
+        }
+        return true;
+    }
+}

documentation/ag-grid-docs/src/content/docs/performance-test/_examples/lots-of-cells-components/missionResultRenderer_reactFunctionalTs.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import type { CustomCellRendererProps } from 'ag-grid-react';
+
+interface MissionCellRendererParams extends CustomCellRendererProps {
+    src?: (params: boolean) => string;
+}
+
+export default (params: MissionCellRendererParams) => {
+    const defaultImgSrc = `https://www.ag-grid.com/example-assets/icons/${
+        params.value ? 'tick-in-circle' : 'cross-in-circle'
+    }.png`;
+    const imgSrc = params.src ? params.src(params.value) : defaultImgSrc;
+
+    return <span className="missionSpan">{<img alt={`${params.value}`} src={imgSrc} className="missionIcon" />}</span>;
+};

documentation/ag-grid-docs/src/content/docs/performance-test/_examples/lots-of-cells-components/missionResultRenderer_typescript.ts

@@ -0,0 +1,34 @@
+import type { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';
+
+interface MissionCellRendererParams extends ICellRendererParams {
+    src?: (params: boolean) => string;
+}
+
+export class MissionResultRenderer implements ICellRendererComp {
+    eGui!: HTMLSpanElement;
+
+    init(params: MissionCellRendererParams) {
+        const icon: HTMLImageElement = document.createElement('img');
+        if (params.src) {
+            icon.src = params.src(params.value);
+        } else {
+            icon.src = `https://www.ag-grid.com/example-assets/icons/${
+                params.value ? 'tick-in-circle' : 'cross-in-circle'
+            }.png`;
+        }
+        icon.setAttribute('class', 'missionIcon');
+
+        this.eGui = document.createElement('span');
+        this.eGui.setAttribute('class', 'missionSpan');
+        this.eGui.appendChild(icon);
+    }
+
+    getGui() {
+        return this.eGui;
+    }
+
+    // Required: Get the cell to refresh.
+    refresh(params: ICellRendererParams): boolean {
+        return false;
+    }
+}