[pull] latest from ag-grid:latest

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

@@ -18,7 +18,6 @@ export type Preset = {
 export const lightModePreset: Preset = {
     pageBackgroundColor: '#FAFAFA',
     params: {
-        headerFontSize: 14,
         browserColorScheme: 'light',
     },
 };
@@ -34,7 +33,6 @@ export const darkModePreset: Preset = {
             mix: 0.07,
             onto: 'backgroundColor',
         },
-        headerFontSize: 14,
     },
 };
 
@@ -56,7 +54,6 @@ export const allPresets: Preset[] = [
             borderRadius: 0,
             headerBackgroundColor: '#21222C',
             headerTextColor: '#68FF8E',
-            headerFontSize: 14,
             headerFontWeight: 700,
             headerVerticalPaddingScale: 1.5,
             cellTextColor: '#50F178',
@@ -119,7 +116,6 @@ export const allPresets: Preset[] = [
             borderRadius: 20,
             headerBackgroundColor: '#182226',
             headerTextColor: '#FFFFFF',
-            headerFontSize: 14,
             headerFontWeight: 500,
             headerVerticalPaddingScale: 0.9,
             rowVerticalPaddingScale: 1.2,
@@ -144,7 +140,6 @@ export const allPresets: Preset[] = [
             wrapperBorderRadius: 0,
             headerFontWeight: 600,
             oddRowBackgroundColor: '#F9FAFB',
-            headerFontSize: 14,
             wrapperBorder: false,
             rowBorder: false,
             columnBorder: false,

documentation/ag-grid-docs/src/content/docs/theming-theme-builder/index.mdoc

@@ -7,6 +7,8 @@ The [Theme Builder](/theme-builder/) provides a visual interface for creating an
 
 ## Exporting Themes
 
+{% imageCaption imagePath="resources/theme-builder-export.png" alt="Theme Builder export panel showing JavaScript code" centered=true constrained=false /%}
+
 To export your theme from Theme Builder:
 
 1. Click the "Import / Export" button at the bottom left of the Theme Builder
@@ -31,10 +33,12 @@ To use the exported theme, pass the theme object to the `theme` grid option, see
 
 ## Importing Themes
 
+{% imageCaption imagePath="resources/theme-builder-import.png" alt="Theme Builder import panel" centered=true constrained=false /%}
+
 Theme Builder can import existing theme code. Select the "Import" tab and drag or upload a code file, or paste in code.
 
 {% note %}
 The import feature is designed to handle code generated by the Theme Builder, and will still work if the code is lightly edited such as adding, removing, and changing values, or reformatting.
 
-If you plan to re-import your themes, avoid making structural changes, e.g. using variable references like `accentColor: ourDesignSystem.brandColor`
+If you plan to re-import your themes, preserve the essential format of the file where values are `parameterName: literal-value` pairs. For example, avoid refactoring it to use variable references like `accentColor: ourDesignSystem.brandColor`
 {% /note %}

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

@@ -2,6 +2,7 @@ import type { BaseCssChangeKeys, CssVariable } from './agStack/core/baseEnvironm
 import { BaseEnvironment } from './agStack/core/baseEnvironment';
 import type { Theme } from './agStack/theming/theme';
 import type { ThemeImpl } from './agStack/theming/themeImpl';
+import type { ParamType } from './agStack/theming/themeTypeUtils';
 import type { NamedBean } from './context/bean';
 import type { BeanCollection } from './context/context';
 import type { AgEventTypeParams } from './events';
@@ -14,46 +15,22 @@ import { coreCSS } from './theming/core/core.css-GENERATED';
 import { themeQuartz } from './theming/parts/theme/themes';
 import { _error, _warn } from './validation/logging';
 
-const CELL_HORIZONTAL_PADDING: CssVariable<CssChangeKeys> = {
-    changeKey: 'cellHorizontalPadding',
-    type: 'length',
-    defaultValue: 16,
-};
-
-const INDENTATION_LEVEL: CssVariable<CssChangeKeys> = {
-    changeKey: 'indentationLevel',
-    type: 'length',
-    defaultValue: 0,
-    noWarn: true,
-    cacheDefault: true,
-};
-
-const ROW_GROUP_INDENT_SIZE: CssVariable<CssChangeKeys> = {
-    changeKey: 'rowGroupIndentSize',
-    type: 'length',
-    defaultValue: 0,
-};
-
-const ROW_HEIGHT: CssVariable<CssChangeKeys> = {
-    changeKey: 'rowHeight',
-    type: 'length',
-    defaultValue: 42,
-};
-const HEADER_HEIGHT: CssVariable<CssChangeKeys> = {
-    changeKey: 'headerHeight',
-    type: 'length',
-    defaultValue: 48,
-};
-const ROW_BORDER_WIDTH: CssVariable<CssChangeKeys> = {
-    changeKey: 'rowBorderWidth',
-    type: 'border',
-    defaultValue: 1,
-};
-const PINNED_BORDER_WIDTH: CssVariable<CssChangeKeys> = {
-    changeKey: 'pinnedRowBorderWidth',
-    type: 'border',
-    defaultValue: 1,
-};
+const cssVariable = <K extends keyof CssChangeKeys>(
+    changeKey: K,
+    type: ParamType,
+    defaultValue: number,
+    noWarn?: boolean,
+    cacheDefault?: boolean
+): CssVariable<CssChangeKeys> => ({ changeKey, type, defaultValue, noWarn, cacheDefault });
+
+const CELL_HORIZONTAL_PADDING = cssVariable('cellHorizontalPadding', 'length', 16);
+const INDENTATION_LEVEL = cssVariable('indentationLevel', 'length', 0, true, true);
+const ROW_GROUP_INDENT_SIZE = cssVariable('rowGroupIndentSize', 'length', 0);
+const ROW_HEIGHT = cssVariable('rowHeight', 'length', 42);
+const HEADER_HEIGHT = cssVariable('headerHeight', 'length', 48);
+const ROW_BORDER_WIDTH = cssVariable('rowBorderWidth', 'border', 1);
+const PINNED_BORDER_WIDTH = cssVariable('pinnedRowBorderWidth', 'border', 1);
+const HEADER_ROW_BORDER_WIDTH = cssVariable('headerRowBorderWidth', 'border', 1);
 
 export function _addAdditionalCss(cssMap: Map<string, string[]>, modules: Module[]): void {
     for (const module of modules.sort((a, b) => a.moduleName.localeCompare(b.moduleName))) {
@@ -93,6 +70,10 @@ export class Environment
         return this.getCSSVariablePixelValue(ROW_BORDER_WIDTH);
     }
 
+    public getHeaderRowBorderWidth(): number {
+        return this.getCSSVariablePixelValue(HEADER_ROW_BORDER_WIDTH);
+    }
+
     public getDefaultRowHeight(): number {
         return this.getCSSVariablePixelValue(ROW_HEIGHT);
     }
@@ -205,6 +186,7 @@ export class Environment
 
 interface CssChangeKeys extends BaseCssChangeKeys {
     headerHeight: true;
+    headerRowBorderWidth: true;
     rowHeight: true;
     rowBorderWidth: true;
     pinnedRowBorderWidth: true;

packages/ag-grid-community/src/filter/provided/date/dateFilterHandler.test.ts

@@ -109,6 +109,49 @@ describe('presetDateFilterTypeRelativeFromToMap', () => {
     );
 });
 
+describe('getFirstDayOfWeek', () => {
+    const base = new Date('2020-04-08T12:34:56.000Z');
+    const originalLocale = (Intl as any).Locale;
+    const originalNavigator = typeof navigator === 'undefined' ? undefined : navigator;
+
+    beforeEach(() => {
+        jest.resetModules();
+    });
+
+    afterEach(() => {
+        (Intl as any).Locale = originalLocale;
+        if (originalNavigator) {
+            Object.defineProperty(globalThis, 'navigator', { configurable: true, value: originalNavigator });
+        } else {
+            delete (globalThis as any).navigator;
+        }
+    });
+
+    it('uses Intl.Locale.getWeekInfo when available', () => {
+        const getWeekInfo = jest.fn(() => ({ firstDay: 0 }));
+        class MockLocale {
+            getWeekInfo() {
+                return getWeekInfo();
+            }
+        }
+
+        (Intl as any).Locale = MockLocale;
+        Object.defineProperty(globalThis, 'navigator', {
+            configurable: true,
+            value: { language: 'en-US', languages: ['en-US'] },
+        });
+
+        jest.isolateModules(() => {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const { presetDateFilterTypeRelativeFromToMap: map } = require('./dateFilterHandler');
+            const result = map.setStartOfWeek(new Date(base));
+            expect(result.toUTCString()).toContain('Sun, 05 Apr 2020');
+        });
+
+        expect(getWeekInfo).toHaveBeenCalledTimes(1);
+    });
+});
+
 describe('getOrRefreshRangeCacheItem', () => {
     const key = 'today' as ISimpleFilterModelPresetType;
 

packages/ag-grid-community/src/filter/provided/date/dateFilterHandler.ts

@@ -100,14 +100,14 @@ const getFirstDayOfWeek = (): number => {
 
     if (locale && typeof Intl !== 'undefined' && typeof (Intl as any).Locale === 'function') {
         try {
-            const weekInfo = new (Intl as any).Locale(locale).weekInfo;
+            const weekInfo = new (Intl as any).Locale(locale).getWeekInfo?.();
             firstDay = weekInfo?.firstDay;
         } catch {
             firstDay = undefined;
         }
     }
 
-    cachedFirstDayOfWeek = firstDay ? firstDay % 7 : DEFAULT_FIRST_DAY_OF_WEEK;
+    cachedFirstDayOfWeek = firstDay == null ? DEFAULT_FIRST_DAY_OF_WEEK : firstDay % 7;
     return cachedFirstDayOfWeek;
 };
 

packages/ag-grid-community/src/headerRendering/gridHeaderCtrl.ts

@@ -18,6 +18,7 @@ export class GridHeaderCtrl extends BeanStub {
     private comp: IGridHeaderComp;
     public eGui: HTMLElement;
     public headerHeight: number;
+    private headerHeightWithBorder: number;
 
     public setComp(comp: IGridHeaderComp, eGui: HTMLElement, eFocusableElement: HTMLElement): void {
         this.comp = comp;
@@ -91,21 +92,21 @@ export class GridHeaderCtrl extends BeanStub {
 
         totalHeaderHeight += groupHeight;
         totalHeaderHeight += headerHeight;
+        const headerBorderWidth = beans.environment.getHeaderRowBorderWidth();
+        const totalHeaderHeightWithBorder = totalHeaderHeight + headerBorderWidth;
 
-        if (this.headerHeight === totalHeaderHeight) {
-            return;
+        if (this.headerHeightWithBorder !== totalHeaderHeightWithBorder) {
+            this.headerHeightWithBorder = totalHeaderHeightWithBorder;
+            const px = `${totalHeaderHeightWithBorder}px`;
+            this.comp.setHeightAndMinHeight(px);
         }
 
-        this.headerHeight = totalHeaderHeight;
-
-        // one extra pixel is needed here to account for the
-        // height of the border
-        const px = `${totalHeaderHeight + 1}px`;
-        this.comp.setHeightAndMinHeight(px);
-
-        this.eventSvc.dispatchEvent({
-            type: 'headerHeightChanged',
-        });
+        if (this.headerHeight !== totalHeaderHeight) {
+            this.headerHeight = totalHeaderHeight;
+            this.eventSvc.dispatchEvent({
+                type: 'headerHeightChanged',
+            });
+        }
     }
 
     private onPivotModeChanged(beans: BeanCollection): void {