[pull] latest from ag-grid:latest

community-modules/styles/src/internal/base/_base-variables.scss

@@ -242,6 +242,9 @@
 
         --ag-filter-panel-apply-button-color: var(--ag-foreground-color);
         --ag-filter-panel-apply-button-background-color: var(--ag-background-color);
+
+        --ag-column-panel-apply-button-color: var(--ag-foreground-color);
+        --ag-column-panel-apply-button-background-color: var(--ag-background-color);
         --ag-filter-panel-card-subtle-color: var(--ag-foreground-color);
         --ag-filter-panel-card-subtle-hover-color: var(--ag-foreground-color);
 

community-modules/styles/src/internal/base/parts/_columns-tool-panel.scss

@@ -1,14 +1,6 @@
 @use 'ag';
 
 @mixin output {
-    :where(.ag-column-panel.ag-column-panel-deferred),
-    :where(.ag-column-panel.ag-column-panel-deferred) :where(.ag-column-panel-column-select),
-    :where(.ag-column-panel.ag-column-panel-deferred) :where(.ag-column-drop-vertical),
-    :where(.ag-column-panel.ag-column-panel-deferred) :where(.ag-column-panel-defer-mode-toggle),
-    :where(.ag-column-panel.ag-column-panel-deferred) :where(.ag-column-panel-buttons) {
-        background-color: var(--ag-cell-batch-edit-background-color);
-    }
-
     .ag-pivot-mode-panel {
         min-height: var(--ag-header-height);
         height: var(--ag-header-height);
@@ -46,31 +38,32 @@
 
     .ag-column-panel-buttons {
         display: flex;
-        flex-wrap: wrap;
-        gap: var(--ag-widget-vertical-spacing) var(--ag-widget-horizontal-spacing);
         justify-content: flex-end;
         overflow: hidden;
-        padding: var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding);
-        border-top: var(--ag-borders-secondary) var(--ag-secondary-border-color);
-    }
+        padding: var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding) 0;
+        flex-wrap: wrap;
+        gap: var(--ag-widget-vertical-spacing) var(--ag-widget-horizontal-spacing);
 
-    .ag-column-panel-defer-mode-toggle {
-        display: flex;
-        align-items: center;
-        gap: var(--ag-widget-horizontal-spacing);
-        padding: var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding);
-        border-top: var(--ag-borders-secondary) var(--ag-secondary-border-color);
+        .ag-standard-button {
+            transition:
+                background-color 0.25s ease-in-out,
+                color 0.25s ease-in-out;
+        }
     }
 
-    .ag-column-panel-defer-mode-select {
-        display: flex;
-        align-items: center;
+    .ag-column-panel-buttons:last-child {
+        padding-bottom: var(--ag-widget-container-vertical-padding);
     }
 
     .ag-column-panel-buttons-button {
         line-height: 1.5;
     }
 
+    .ag-column-panel .ag-standard-button.ag-column-panel-buttons-apply-button {
+        color: var(--ag-column-panel-apply-button-color);
+        background-color: var(--ag-column-panel-apply-button-background-color);
+    }
+
     .ag-column-group-icons,
     .ag-column-select-header-icon {
         color: var(--ag-secondary-foreground-color);

community-modules/styles/src/internal/themes/alpine/_alpine-variables.scss

@@ -51,6 +51,9 @@
     --ag-menu-background-color: var(--ag-header-background-color);
     --ag-filter-panel-apply-button-color: var(--ag-background-color);
     --ag-filter-panel-apply-button-background-color: var(--ag-alpine-active-color);
+
+    --ag-column-panel-apply-button-color: var(--ag-background-color);
+    --ag-column-panel-apply-button-background-color: var(--ag-alpine-active-color);
     --ag-column-drag-indicator-color: var(--ag-alpine-active-color);
 
     // derived and blended colours (these are static versions of the dynamic colour blends
@@ -133,6 +136,7 @@
     --ag-find-match-color: var(--ag-background-color);
     --ag-find-active-match-color: var(--ag-background-color);
     --ag-filter-panel-apply-button-color: var(--ag-foreground-color);
+    --ag-column-panel-apply-button-color: var(--ag-foreground-color);
 
     --ag-row-loading-skeleton-effect-color: #{color.change(#cacbcc, $alpha: 0.4)};
 

community-modules/styles/src/internal/themes/balham/_balham-variables.scss

@@ -38,6 +38,9 @@
     --ag-panel-background-color: var(--ag-header-background-color);
     --ag-filter-panel-apply-button-color: var(--ag-background-color);
     --ag-filter-panel-apply-button-background-color: var(--ag-balham-active-color);
+
+    --ag-column-panel-apply-button-color: var(--ag-background-color);
+    --ag-column-panel-apply-button-background-color: var(--ag-balham-active-color);
     --ag-column-drag-indicator-color: var(--ag-balham-active-color);
 
     // derived and blended colours (these are static versions of the dynamic colour blends
@@ -106,6 +109,7 @@
     --ag-find-match-color: var(--ag-background-color);
     --ag-find-active-match-color: var(--ag-background-color);
     --ag-filter-panel-apply-button-color: var(--ag-foreground-color);
+    --ag-column-panel-apply-button-color: var(--ag-foreground-color);
 
     // override blended colors from balham theme
     --ag-secondary-foreground-color: var(--ag-foreground-color);

community-modules/styles/src/internal/themes/material/_material-variables.scss

@@ -42,6 +42,9 @@
     --ag-filter-panel-apply-button-color: var(--ag-material-primary-color);
     --ag-filter-panel-apply-button-background-color: transparent;
 
+    --ag-column-panel-apply-button-color: var(--ag-material-primary-color);
+    --ag-column-panel-apply-button-background-color: transparent;
+
     // derived colours (no color blending)
     --ag-range-selection-border-color: var(--ag-material-primary-color);
     --ag-checkbox-checked-color: var(--ag-material-accent-color);

community-modules/styles/src/internal/themes/quartz/_quartz-variables.scss

@@ -113,6 +113,9 @@
 
     --ag-filter-panel-apply-button-color: var(--ag-background-color);
     --ag-filter-panel-apply-button-background-color: var(--ag-active-color);
+
+    --ag-column-panel-apply-button-color: var(--ag-background-color);
+    --ag-column-panel-apply-button-background-color: var(--ag-active-color);
 }
 
 @mixin -dark-vars {
@@ -143,6 +146,7 @@
     --ag-find-match-color: var(--ag-background-color);
     --ag-find-active-match-color: var(--ag-background-color);
     --ag-filter-panel-apply-button-color: var(--ag-foreground-color);
+    --ag-column-panel-apply-button-color: var(--ag-foreground-color);
 
     --ag-popup-shadow: 0 0px 20px rgba(0, 0, 0, 0.3);
 

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

@@ -3,13 +3,12 @@
         "codeSrc": "grid-api.AUTO.json",
         "validate": true,
         "undocumentedProperties": {
-            "sortChanged": "TODO: undocumented property, to resolve in AG-16879",
-            "flushAllAnimationFrames": "TODO: undocumented property, to resolve in AG-16879",
-            "getColumnDef": "TODO: undocumented property, to resolve in AG-16879",
-            "filterChanged": "TODO: undocumented property, to resolve in AG-16879",
-            "getInfiniteRowCount": "TODO: undocumented property, to resolve in AG-16879",
-            "flushServerSideAsyncTransactions": "TODO: undocumented property, to resolve in AG-16879",
-            "dispatchEvent": "TODO: undocumented property, to resolve in AG-16879"
+            "flushAllAnimationFrames": "Not recommended for users so not documented",
+            "flushServerSideAsyncTransactions": "Not recommended for users to not documented",
+            "dispatchEvent": "This is for internal use, purposefully undocumented",
+            "sortChanged": "Bug in the undocumentedProperties check, this is not an api method",
+            "filterChanged": "Bug in the undocumentedProperties check, this is not an api method",
+            "getColumnDef": "Duplicate, users can just use getColumnDefs."
         }
     },
     "gridOptions": {

documentation/ag-grid-docs/src/content/api-documentation/grid-events/events.json

@@ -3,13 +3,7 @@
         "codeSrc": "grid-options.AUTO.json",
         "validate": true,
         "onlyEvents": true,
-        "undocumentedProperties": {
-            "bulkEditingStarted": "TODO: undocumented property, to resolve in AG-16879",
-            "bulkEditingStopped": "TODO: undocumented property, to resolve in AG-16879",
-            "dragCancelled": "TODO: undocumented property, to resolve in AG-16879",
-            "rowResizeStarted": "TODO: undocumented property, to resolve in AG-16879",
-            "rowResizeEnded": "TODO: undocumented property, to resolve in AG-16879"
-        }
+        "undocumentedProperties": {}
     },
     "accessories": {
         "meta": {
@@ -227,6 +221,18 @@
                 "url": "./cell-editing-batch/#batch-editing-lifecycle"
             }
         },
+        "bulkEditingStarted": {
+            "more": {
+                "name": "Bulk Cell Edit",
+                "url": "./cell-selection/#bulk-cell-edit"
+            }
+        },
+        "bulkEditingStopped": {
+            "more": {
+                "name": "Bulk Cell Edit",
+                "url": "./cell-selection/#bulk-cell-edit"
+            }
+        },
         "undoStarted": {
             "more": {
                 "name": "Undo / Redo Events",
@@ -393,9 +399,30 @@
         "rowGroupOpened": {},
         "expandOrCollapseAll": {}
     },
-    "miscellaneous": {
+    "rowEvents": {
         "meta": {
-            "displayName": "Miscellaneous"
+            "displayName": "Row Size",
+            "page": {
+                "name": "Row Resizing",
+                "url": "./row-numbers/#row-resizing"
+            }
+        },
+        "rowResizeStarted": {
+            "more": {
+                "name": "Row Resizing",
+                "url": "./row-numbers/#row-resizing"
+            }
+        },
+        "rowResizeEnded": {
+            "more": {
+                "name": "Row Resizing",
+                "url": "./row-numbers/#row-resizing"
+            }
+        }
+    },
+    "gridLifecycle": {
+        "meta": {
+            "displayName": "Grid Lifecycle"
         },
         "gridReady": {
             "more": {
@@ -415,25 +442,36 @@
                 "url": "./grid-lifecycle/#first-data-rendered"
             }
         },
+        "modelUpdated": {},
+        "stateUpdated": {
+            "more": {
+                "name": "Grid State",
+                "url": "./grid-state/"
+            }
+        }
+    },
+    "viewport": {
+        "meta": {
+            "displayName": "Viewport"
+        },
         "gridSizeChanged": {
             "more": {
                 "name": "Grid Layout",
                 "url": "./grid-size/"
             }
         },
-        "modelUpdated": {},
         "virtualRowRemoved": {},
         "viewportChanged": {},
         "bodyScroll": {},
-        "bodyScrollEnd": {},
+        "bodyScrollEnd": {}
+    },
+    "dragAndDrop": {
+        "meta": {
+            "displayName": "Drag and Drop"
+        },
         "dragStarted": {},
         "dragStopped": {},
-        "stateUpdated": {
-            "more": {
-                "name": "Grid State",
-                "url": "./grid-state/"
-            }
-        }
+        "dragCancelled": {}
     },
     "find": {
         "meta": {

documentation/ag-grid-docs/src/content/docs/cell-data-types/index.mdoc

@@ -42,20 +42,32 @@ The following example demonstrates the pre-defined cell data types (most of whic
 
 ## Inferring Data Types
 
-By default, the grid will infer cell data types the first time that row data is passed into the grid.
+By default, when using the Client-Side Row Model, the grid will infer cell data types the first time that row data is passed into the grid given the following conditions:
 
-For inference to work for a column, it must contain non-null values and have the `field` property set. The resolved column definition (including the default column definition and column types) must also not have the Value Getter, Value Parser or reference data properties set, or be using [Sparklines](./sparklines-overview/). If these conditions are not met, no cell data type will be set (it will need to be defined directly on the column if desired).
+**The column must:**
 
-{% note %}
-Because `'dateTime'` corresponds to cell values that are `Date` objects, there is no easy way to tell them apart from regular `'date'` columns. If you wish to enable `'dateTime'`'s higher precision fields, please explicitly specify `cellDataType: 'dateTime'` in the corresponding `columnDefs` entry.
-{% /note %}
+-   Have a `field` property set
+-   Contain at least one non-null value
+
+**The column must not:**
+
+-   Have a `valueGetter`, `valueParser`, or `refData` property set on the resolved column definition (including the default column definition and column types)
+-   Use [Sparklines](./sparklines-overview/)
+
+If any condition is not met, no cell data type will be inferred. You can still set one explicitly via `cellDataType` on the column definition.
+
+Where inference is possible but the values do not match any pre-defined type, it defaults to `'object'`.
+
+### Disabling Inference
+
+Set `cellDataType: false` on an individual column, or on the [Default Column Definition](./column-definitions/#default-column-definitions) to disable it globally.
 
-Data type inference can be disabled by setting `cellDataType = false` on an individual column, or for all columns on the [Default Column Definition](./column-definitions/#default-column-definitions).
+### Date vs DateTime
 
-Note that where inference is possible, but it does not match any of the pre-defined cell data types, it will default to `object`.
+Because `'dateTime'` values are `Date` objects — the same as `'date'` — the grid cannot distinguish between them during inference. To use the higher-precision `'dateTime'` type, set `cellDataType: 'dateTime'` explicitly on the column definition.
 
 {% note %}
-Inferring cell data types only works for the Client-Side Row Model. For other row models, you will need to define cell data types for each column.
+Inference only works with the Client-Side Row Model. For other row models, define `cellDataType` explicitly on each column.
 {% /note %}
 
 ## Pre-Defined Cell Data Types
@@ -192,7 +204,7 @@ The following properties are set:
 -   `cellEditorParams.useFormatter = true` so that the cell editor uses the Value Formatter.
 -   A `comparator` is defined to allow [Custom Sorting](./row-sorting/#custom-sorting) using the Value Formatter.
 -   When the [Text Filter](./filter-text/) is used, a [Filter Value Getter](./column-properties/#reference-filtering-filterValueGetter) is used to convert the value with the Value Formatter.
--   When the [Set Filter](./filter-set) is used, `filterParams.valueFormatter` is set to format the values using the Value Formatter.
+-   When the [Set Filter](./filter-set) is used with [Complex Objects](./filter-set-filter-list/#complex-objects), `filterParams.valueFormatter` is set to format the values using the Value Formatter.
 
 ### Pre-Defined Cell Data Type Example
 

documentation/ag-grid-docs/src/content/docs/filter-set-filter-list/index.mdoc

@@ -83,7 +83,7 @@ In the code above, the same value formatter is supplied to the Column and Filter
 
 There is not a one-to-one mapping between Filter List items and rows (as values from multiple rows may map to the same Filter List item), so the Value Formatter for the Filter List will not be passed `node` or `data` params, and should just format based on the `value`.
 
-If the data contains [Missing Values](#missing-values), the Value Formatter will need to handle how to display the blank values (e.g. return `'(Blanks)'`).
+If the data contains [Missing Values](#missing-values), the Value Formatter will need to handle how to display the blank values (e.g. return `'(Blanks)'`). If the data contains complex objects, see [Complex Objects](#complex-objects) for how to use the Value Formatter alongside a Key Creator.
 
 The following example shows how Set Filter values are formatted using a Value Formatter. Note the following:
 
@@ -310,14 +310,18 @@ If there are missing / empty values in the row data of the grid, or missing valu
 
 The Set Filter internally maintains the original type of the cell values, but always uses strings for the keys. E.g. if the cell contains a number, the Filter Model will contain those numbers converted to strings, but if you specified a value formatter, that would use the values with type number.
 
-### Complex Objects
+## Complex Objects
 
 If you are providing complex objects as values, then you need to provide both a Key Creator function and a Value Formatter function when using the Set Filter.
 
 The Key Creator generates a unique string key from the complex object (note that if the key is `null`, `undefined` or `''` it will be converted to `null`, the same as for [Missing Values](#missing-values)). This key is used within the Filter Model, and to compare objects. You can either provide a Key Creator within the filter params, which will be specific to the Set Filter, or you can provide one in the Column Definition that is shared with other features such as grouping.
 
 The Value Formatter is used to generate the label that is displayed to the user within the Filter List. You can provide the Value Formatter in the filter params.
 
+{% note %}
+See [Cell Data Types - Object](/javascript-data-grid/cell-data-types/#object) for more information on working with complex objects in AG Grid.
+{% /note %}
+
 ```{% frameworkTransform=true spaceBetweenProperties=true %}
 const gridOptions = {
     columnDefs: [

documentation/ag-grid-docs/src/content/docs/grid-lifecycle/index.mdoc

@@ -31,7 +31,7 @@ The `firstDataRendered` event fires the first time data is rendered into the gri
 
 The `rowDataUpdated` event fires every time the grid's data changes, by [Updating Row Data](./data-update-row-data/) or
 by applying [Transaction Updates](./data-update-transactions/). In the [Server Side Row Model](./server-side-model), use
-the [Model Updated Event](./grid-events/#reference-miscellaneous-modelUpdated) instead.
+the [Model Updated Event](./grid-events/#reference-gridLifecycle-modelUpdated) instead.
 
 In this example the time at which `firstDataRendered` and `rowDataUpdated` are fired is recorded above the grid. Note that `firstDataRendered` is only set on the initial load of the grid and is not updated when reloading data.
 

documentation/ag-grid-docs/src/content/docs/grid-state/index.mdoc

@@ -37,7 +37,7 @@ The current grid state can be retrieved by listening to the state updated event,
 
 The state is also passed in the [Grid Pre-Destroyed Event](./grid-lifecycle/#grid-pre-destroyed), which can be used to get the state when the grid is destroyed.
 
-{% apiDocumentation source="grid-events/events.json" section="miscellaneous" names=["stateUpdated", "gridPreDestroyed"] /%}
+{% apiDocumentation source="grid-events/events.json" section="gridLifecycle" names=["stateUpdated", "gridPreDestroyed"] /%}
 
 ## State Contents
 

documentation/ag-grid-docs/src/content/docs/row-dragging-unmanaged/index.mdoc

@@ -46,7 +46,7 @@ Typically a drag will fire the following events:
 Additional `rowDragLeave` and `rowDragEnter` events are fired if the mouse leaves or re-enters the grid. If the drag is finished outside of the grid, then the `rowDragLeave` is the last event fired and no `rowDragEnd` is fired, as the drag did not end on the grid.
 
 {% note %}
-When the Grid is created, a [Drop Zone](./row-dragging-to-external-dropzone/) that is responsible for firing all the Row Drag Events is added to the Grid Body. This why Row Drag Events (including `rowDragEnd`) are only fired when they happen on top of the Grid. If you need to monitor when a Row Drag ends outside of the Grid, for example, use the [DragStopped](./grid-events/#reference-miscellaneous-dragStopped) event.
+When the Grid is created, a [Drop Zone](./row-dragging-to-external-dropzone/) that is responsible for firing all the Row Drag Events is added to the Grid Body. This why Row Drag Events (including `rowDragEnd`) are only fired when they happen on top of the Grid. If you need to monitor when a Row Drag ends outside of the Grid, for example, use the [DragStopped](./grid-events/#reference-dragAndDrop-dragStopped) event.
 {% /note %}
 
 Each of the four row drag events extend the `RowDragEvent` interface.

documentation/ag-grid-docs/src/content/docs/row-numbers/index.mdoc

@@ -68,6 +68,12 @@ const gridOptions = {
 The Row Resizer feature does not work when columns are configured with [Auto Row Height](./row-height/#auto-row-height).
 {% /note %}
 
+### Row Resize Events
+
+The following events are fired when a row resize operation starts and ends.
+
+{% apiDocumentation source="grid-events/events.json" section="rowEvents" names=["rowResizeStarted", "rowResizeEnded"] /%}
+
 ## Value Export
 
 By default, when working with exporters such as [CSV Export](./csv-export/) or [Excel Export](./excel-export/), the value of the Row Numbers column is not exported.

documentation/ag-grid-docs/src/content/docs/tool-panel-columns/_examples/deferred-apply-mode/main.ts

@@ -88,7 +88,7 @@ const gridOptions: GridOptions<IOlympicData> = {
                 iconKey: 'columns',
                 toolPanel: 'agColumnsToolPanel',
                 toolPanelParams: {
-                    deferApply: true,
+                    buttons: ['cancel', 'apply'],
                 },
             },
         ],