[pull] latest from ag-grid:latest

.stylelintrc.js

@@ -46,6 +46,7 @@ module.exports = {
                     '.ag-layout-print',
                     '.ag-layout-normal',
                     '.ag-layout-auto-height',
+                    '.ag-tool-panel-animating',
                 ],
             },
         ],

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

@@ -214,6 +214,7 @@
         --ag-menu-min-width: 181px;
 
         --ag-side-bar-panel-width: 200px;
+        --ag-side-bar-panel-animation-duration: 0s;
 
         --ag-font-family: 'Helvetica Neue', sans-serif;
         --ag-font-size: 14px;

community-modules/styles/src/internal/base/parts/_common-structural.scss

@@ -1595,9 +1595,7 @@
     //  ****************************
     // */
     .ag-tool-panel-wrapper {
-        display: flex;
-        overflow-y: auto;
-        overflow-x: hidden;
+        overflow: hidden;
         cursor: default;
         @include ag.selectable(none);
     }

community-modules/styles/src/internal/base/parts/_sidebar.scss

@@ -10,6 +10,24 @@
         background-color: var(--ag-control-panel-background-color);
     }
 
+    .ag-tool-panel-content {
+        display: flex;
+        height: 100%;
+        overflow: hidden auto;
+    }
+
+    .ag-tool-panel-wrapper.ag-tool-panel-animating {
+        // !important required to override .ag-hidden to tool panel remains visible while animating
+        display: block !important;
+        transition: width var(--ag-side-bar-panel-animation-duration) ease-in-out;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .ag-tool-panel-wrapper.ag-tool-panel-animating {
+            transition: none;
+        }
+    }
+
     .ag-tool-panel-external {
         display: flex;
         flex-direction: row;

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

@@ -172,6 +172,7 @@
             "description": "Style [Tool Panels](./tool-panel/), see also [Theming: Customising Tool Panels](./theming-tool-panels/)"
         },
         "sideBarBackgroundColor": {},
+        "sideBarPanelAnimationDuration": {},
         "sideBarPanelWidth": {},
         "sideButtonBackgroundColor": {},
         "sideButtonBarBackgroundColor": {},

documentation/ag-grid-docs/src/content/docs/side-bar/_examples/animation/example.spec.ts

@@ -0,0 +1,10 @@
+import { ensureGridReady, test, waitForGridContent } from '@utils/grid/test-utils';
+
+test.agExample(import.meta, () => {
+    test.eachFramework('Example', async ({ page }) => {
+        // PLACEHOLDER - MINIMAL TEST TO ENSURE GRID LOADS WITHOUT ERRORS
+        await ensureGridReady(page);
+        await waitForGridContent(page);
+        // END PLACEHOLDER
+    });
+});

documentation/ag-grid-docs/src/content/docs/side-bar/_examples/animation/index.html

@@ -0,0 +1 @@
+<div id="myGrid" style="height: 100%"></div>

documentation/ag-grid-docs/src/content/docs/side-bar/_examples/animation/main.ts

@@ -0,0 +1,42 @@
+import type { ColDef, GridApi, GridOptions } from 'ag-grid-community';
+import { ClientSideRowModelModule, ModuleRegistry, ValidationModule, createGrid, themeQuartz } from 'ag-grid-community';
+import { ColumnsToolPanelModule, FiltersToolPanelModule, SideBarModule } from 'ag-grid-enterprise';
+
+ModuleRegistry.registerModules([
+    ClientSideRowModelModule,
+    ColumnsToolPanelModule,
+    FiltersToolPanelModule,
+    SideBarModule,
+    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
+]);
+
+const myTheme = themeQuartz.withParams({
+    sideBarPanelAnimationDuration: 0.3,
+});
+
+const columnDefs: ColDef[] = [{ field: 'athlete' }, { field: 'country' }, { field: 'sport' }, { field: 'year' }];
+
+let gridApi: GridApi<IOlympicData>;
+
+const gridOptions: GridOptions<IOlympicData> = {
+    theme: myTheme,
+    columnDefs: columnDefs,
+    defaultColDef: {
+        flex: 1,
+        filter: true,
+        sortable: true,
+        resizable: true,
+    },
+    enableFilterHandlers: true,
+    sideBar: ['columns', 'filters-new'],
+};
+
+// setup the grid after the page has finished loading
+document.addEventListener('DOMContentLoaded', function () {
+    const gridDiv = document.querySelector<HTMLElement>('#myGrid')!;
+    gridApi = createGrid(gridDiv, gridOptions);
+
+    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+        .then((response) => response.json())
+        .then((data: IOlympicData[]) => gridApi!.setGridOption('rowData', data));
+});

documentation/ag-grid-docs/src/content/docs/side-bar/index.mdoc

@@ -236,6 +236,18 @@ const gridOptions = {
 
 See the [Columns Tool Panel](./tool-panel-columns/) documentation for the full list of possible parameters to this Tool Panel.
 
+## Animation
+
+By default, sidebar panels open and close instantly. You can enable a smooth slide animation using the [Theming API](./theming-api/) parameter `sideBarPanelAnimationDuration`. Set it to a value in seconds:
+
+```js
+const myTheme = themeQuartz.withParams({
+    sideBarPanelAnimationDuration: 0.3,
+});
+```
+
+{% gridExampleRunner title="Side Bar Animation" name="animation" exampleHeight=400 /%}
+
 ## Side Bar API
 
 {% note %}

documentation/ag-grid-docs/src/content/docs/tree-data-paths/index.mdoc

@@ -114,4 +114,3 @@ const gridOptions = {
 
 Refer to the [Aggregation](./aggregation/) page for more details, and [Editing Groups](./grouping-edit/)
 for editing aggregated values with cascading updates to children.
-

documentation/ag-grid-docs/src/content/docs/tree-data-self-referential/index.mdoc

@@ -100,4 +100,3 @@ const gridOptions = {
 
 Refer to the [Aggregation](./aggregation/) page for more details, and [Editing Groups](./grouping-edit/)
 for editing aggregated values with cascading updates to children.
-

external/ag-shared/.gitrepo

@@ -6,7 +6,7 @@
 [subrepo]
 	remote = https://github.com/ag-grid/ag-shared.git
 	branch = latest
-	commit = f999ddabe0d121bf65607f7c2bdab710335fab06
-	parent = 7aceeb9566b3b77349ffc42d782830af8f155b08
+	commit = 4d82650c622e0433d9b58410adc1c88a00608f9d
+	parent = e95f2f1e806d05dad1435a1336724ed0b7d9c0e6
 	method = rebase
 	cmdver = 0.4.9

external/ag-shared/scripts/install-for-cloud/install-for-cloud.sh

@@ -95,21 +95,6 @@ install_nx() {
     return 0
 }
 
-opt_enable_direnv() {
-    if ! command -v direnv &> /dev/null; then
-        log_info "direnv is not installed, skipping enablement"
-        return 0
-    fi
-
-    if direnv allow; then
-        log_info "direnv enabled successfully"
-        return 0
-    else
-        log_error "Failed to enable direnv"
-        return 2
-    fi
-}
-
 # Function to install yarn and initial dependencies
 install_yarn() {
     # Create .yarnrc to ignore engine checks
@@ -258,10 +243,6 @@ main() {
         fi
     fi
 
-    if ! opt_enable_direnv; then
-        exit 2
-    fi
-
     # Verify nx is available after installation
     if command -v nx &> /dev/null; then
         log_info "Installation completed successfully - nx is available"

external/ag-shared/scripts/snyk/snyk-to-ctrf-command.mjs

@@ -22,7 +22,20 @@ if (!fs.existsSync(snykPath)) {
 (async () => {
     console.log(`Snyk JSON file: ${snykPath}`);
     const snykJson = fs.readFileSync(snykPath, 'utf-8');
-    const snykData = JSON.parse(snykJson);
+    let snykData;
+    try {
+        snykData = JSON.parse(snykJson);
+    } catch (e) {
+        // Newer Snyk CLI versions append error objects after the main JSON array
+        // when workspace paths fail (e.g. root with "Forbidden"). Extract first document.
+        const position = e.message.match(/at position (\d+)/)?.[1];
+        if (!position) {
+            throw e;
+        }
+
+        console.log(`::warning:: Failed to parse Snyk JSON (${SNYK_JSON_FILE}). Attempting to extract valid JSON portion up to position ${position} (${e.message})`);
+        snykData = JSON.parse(snykJson.slice(0, parseInt(position, 10)));
+    }
     const ctrf = convertToCtrf(snykData);
 
     fs.mkdirSync(path.dirname(ctrfPath), { recursive: true });

package.json

@@ -118,6 +118,7 @@
       "testing/vue-package-tests",
       "testing/accessibility",
       "testing/csp",
+      "testing/vue3-tests",
       "testing/public-recipes/e2e",
       "external/ag-shared"
     ],

packages/ag-grid-community/src/main-internal.ts

@@ -447,7 +447,7 @@ export type { CellNavigationService } from './navigation/cellNavigationService';
 export type { HeaderNavigationService } from './navigation/headerNavigationService';
 export type { NavigationService } from './navigation/navigationService';
 export type { PageBoundsService } from './pagination/pageBoundsService';
-export { _BOOLEAN_MIXED_GRID_OPTIONS, _GET_ALL_GRID_OPTIONS } from './propertyKeys';
+export { _BOOLEAN_MIXED_GRID_OPTIONS, _GET_ALL_GRID_OPTIONS, _GET_SHALLOW_GRID_OPTIONS } from './propertyKeys';
 export { _PUBLIC_EVENT_HANDLERS_MAP } from './publicEventHandlersMap';
 export type { CellCtrl, ICellComp } from './rendering/cell/cellCtrl';
 export type { CheckboxCellRenderer } from './rendering/cellRenderers/checkboxCellRenderer';

packages/ag-grid-community/src/propertyKeys.ts

@@ -422,3 +422,12 @@ export const _GET_ALL_GRID_OPTIONS: () => GridOptionKey[] = () => [
     ..._BOOLEAN_MIXED_GRID_OPTIONS,
     ...OTHER_GRID_OPTIONS,
 ];
+
+// Options that only need shallow (reference) watching (only Vue atm) — primitives and functions
+export const _GET_SHALLOW_GRID_OPTIONS: () => GridOptionKey[] = () => [
+    ...STRING_GRID_OPTIONS,
+    ..._NUMBER_GRID_OPTIONS,
+    ..._FUNCTION_GRID_OPTIONS,
+    ..._BOOLEAN_GRID_OPTIONS,
+    ..._BOOLEAN_MIXED_GRID_OPTIONS,
+];

packages/ag-grid-community/src/theming/core/core-css.ts

@@ -478,6 +478,13 @@ export interface CoreParams extends SharedThemeParams {
      */
     sideBarPanelWidth: LengthValue;
 
+    /**
+     * Duration of the animation when a sidebar panel opens or closes. Set to 0
+     * to disable animations. Automatically disabled if the user has requested
+     * reduced motion in their OS accessibility settings.
+     */
+    sideBarPanelAnimationDuration: DurationValue;
+
     /**
      * Borders between the grid and side panels including the column and filter tool bars, and chart settings
      */
@@ -627,6 +634,7 @@ export const coreDefaults: Readonly<Omit<CoreParams, keyof SharedThemeParams>> =
     pinnedRowBorder: true,
     sidePanelBorder: true,
     sideBarPanelWidth: 250,
+    sideBarPanelAnimationDuration: 0,
     sideBarBackgroundColor: {
         ref: 'chromeBackgroundColor',
     },

packages/ag-grid-enterprise/src/sideBar/agSideBar.css

@@ -1,10 +1,27 @@
 .ag-tool-panel-wrapper {
-    display: flex;
-    overflow: hidden auto;
+    overflow: hidden;
     user-select: none;
     width: var(--ag-side-bar-panel-width);
 }
 
+.ag-tool-panel-content {
+    display: flex;
+    height: 100%;
+    overflow: hidden auto;
+}
+
+.ag-tool-panel-wrapper.ag-tool-panel-animating {
+    /* !important required to override .ag-hidden to tool panel remains visible while animating */
+    display: block !important;
+    transition: width var(--ag-side-bar-panel-animation-duration) ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ag-tool-panel-wrapper.ag-tool-panel-animating {
+        transition: none;
+    }
+}
+
 .ag-tool-panel-external {
     display: flex;
     flex-direction: row;

packages/ag-grid-enterprise/src/sideBar/agSideBar.ts

@@ -387,9 +387,16 @@ class AgSideBar extends Component implements ISideBar, FocusableContainer {
             return;
         }
 
+        const switchingToolPanel = !!key && !!currentlyOpenedKey;
+        const skipAnimation = switchingToolPanel || source === 'sideBarInitializing';
+
         for (const wrapper of this.toolPanelWrappers) {
             const show = key === wrapper.getToolPanelId();
-            wrapper.setDisplayed(show);
+            if (skipAnimation) {
+                wrapper.setDisplayed(show);
+            } else {
+                wrapper.animateDisplayed(show);
+            }
         }
 
         const newlyOpenedKey = this.openedItem();