ag-grid-community 32.2.1 → 32.3.0

package/dist/types/theming/theme-types.d.ts

@@ -0,0 +1,206 @@
+import { type CoreParams } from './styles/core/core-css';
+export type CssFragment = string | (() => string);
+export type Feature = 'colorScheme' | 'iconSet' | 'checkboxStyle' | 'inputStyle' | 'tabStyle';
+export type ParamType = 'color' | 'colorScheme' | 'length' | 'scale' | 'border' | 'borderStyle' | 'shadow' | 'image' | 'fontFamily' | 'fontWeight' | 'duration';
+/**
+ * Return the ParamType for a given param name,
+ */
+export declare const getParamType: (arg: string) => ParamType;
+type ColorParam = CoreParamWithSuffix<'Color'>;
+type LengthParam = 'spacing' | CoreParamWithSuffix<'Padding' | 'Spacing' | 'Size' | 'Width' | 'Height' | 'Radius' | 'Indent' | 'Start' | 'End' | 'Top' | 'Bottom' | 'Horizontal' | 'Vertical'>;
+type BorderParam = CoreParamWithSuffix<'Border'>;
+type ShadowParam = CoreParamWithSuffix<'Shadow'>;
+type ImageParam = CoreParamWithSuffix<'Image'>;
+type FontFamilyParam = CoreParamWithSuffix<'Family'>;
+type DurationParam = CoreParamWithSuffix<'Duration'>;
+type CoreParamWithSuffix<Suffix extends string> = {
+    [K in keyof CoreParams]: K extends `${infer _}${Suffix}` ? K : never;
+}[keyof CoreParams];
+type AnyString = string & {};
+/**
+ * The 'brand color' for the grid, used wherever a non-neutral color is
+ * required. Selections, focus outlines and checkboxes use the accent color by
+ * default.
+ */
+export type ColorValue = string | {
+    /**
+     * The name of the color parameter to reference
+     */
+    ref: ColorParam | AnyString;
+    /**
+     * Enable color mixing. Provide a value between 0 and 1 determining the amount of the referenced color used in the mix.
+     *
+     * By default, the referenced color will be mixed with `transparent` so 0 = fully transparent and 1 = fully opaque.
+     */
+    mix?: number;
+    /**
+     * Provide a second color reference to mix with instead of `transparent` This has no effect if `mix` is unspecified.
+     */
+    onto?: ColorParam | AnyString;
+};
+/**
+ * A CSS color-scheme value, e.g. "light", "dark", or "inherit" to use the
+ * same setting as the parent application
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+ */
+export type ColorSchemeValue = 'light' | 'dark' | 'inherit' | 'normal';
+/**
+ * A CSS dimension value with length units, e.g. "1px" or "2em". Alternatively:
+ *
+ * - `4` -> "4px" (a plain JavaScript number will be given pixel units)
+ * - `{ref: "foo"}` -> use the same value as the `foo` param (`ref` must be a valid param name)
+ * - `{calc: "foo + bar * 2"}` -> Use a dynamically calculated expression. You can use param names like spacing and fontSize in the expression, as well as built-in CSS math functions like `min(spacing, fontSize)`
+ */
+export type LengthValue = number | string | {
+    /**
+     * An expression that can include param names and maths, e.g.
+     * "spacing * 2". NOTE: In CSS the `-` character is valid in variable
+     * names, so leave a space around it.
+     */
+    calc: string;
+} | {
+    ref: LengthParam | AnyString;
+};
+/**
+ * A number without units.
+ */
+export type ScaleValue = number;
+/**
+ * A CSS border value e.g. "solid 1px red". Alternatively an object containing optional properties:
+ *
+ * - `style` -> a CSS border-style, default `"solid"`
+ * - `width` -> a width in pixels, default `1`
+ * - `color` -> a ColorValue as you would pass to any color param, default `{ref: "borderColor"}`
+ *
+ * Or a reference:
+ * - `{ref: "foo"}` -> use the same value as the `foo` param (`ref` must be a valid param name)
+ *
+ * Or boolean value
+ * - `true` -> `{}` (the default border style, equivalent to `{style: "solid", width: 1, color: {ref: "borderColor"}`)
+ * - `false` -> `"none"` (no border).
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/border
+ */
+export type BorderValue = string | boolean | {
+    style?: BorderStyleValue;
+    width?: LengthValue;
+    color?: ColorValue;
+} | {
+    ref: BorderParam | AnyString;
+};
+/**
+ * A CSS box shadow value e.g. "10px 5px 5px red;". Alternatively an object containing optional properties:
+ *
+ * - `offsetX` -> number of pixels to move the shadow to the right, or a negative value to move left, default 0
+ * - `offsetY` -> number of pixels to move the shadow downwards, or a negative value to move up, default 0
+ * - `radius` -> softness of the shadow. 0 = hard edge, 10 = 10px wide blur
+ * - `spread` -> size of the shadow. 0 = same size as the shadow-casting element. 10 = 10px wider in all directions.
+ * - `color` -> color of the shadow e.g. `"red"`. Default `{ref: "foregroundColor"}`
+ *
+ * Or a reference:
+ * - `{ref: "foo"}` -> use the same value as the `foo` param (`ref` must be a valid param name)
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+ */
+export type ShadowValue = string | false | {
+    /**
+     * Positive values move the shadow to the right, negative values move left
+     *
+     * @default 0
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+     */
+    offsetX?: LengthValue;
+    /**
+     * Positive values move the shadow downwards, negative values move up
+     *
+     * @default 0
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+     */
+    offsetY?: LengthValue;
+    /**
+     * Softness of the shadow. 0 = hard edge, 10 = 10px wide blur.
+     *
+     * @default 0
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+     */
+    radius?: LengthValue;
+    /**
+     * Size of the shadow. 0 = same size as the shadow-casting element. 10 = 10px wider in all directions.
+     *
+     * @default 0
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+     */
+    spread?: LengthValue;
+    /**
+     * Shadow color. Can accept any value that is valid for a color parameter, e.g. 'red' or {ref: 'accentColor'}
+     *
+     * @default {ref: 'foregroundColor'}
+     */
+    color?: ColorValue;
+} | {
+    ref: ShadowParam | AnyString;
+};
+/**
+ * A CSS line-style value e.g. "solid" or "dashed".
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/line-style
+ */
+export type BorderStyleValue = 'none' | 'solid' | 'dotted' | 'dashed';
+/**
+ * A CSS font-family value consisting of a font name or comma-separated list of fonts in order of preference e.g. `"Roboto, -apple-system, 'Segoe UI', sans-serif"`. Alternatively:
+ *
+ * - `["Roboto", "-apple-system", "Segoe UI", "sans-serif"]` -> an array of font names in order of preference
+ * - `["Dave's Font"]` -> when passing an array, special characters in font names will automatically be escaped
+ * - `{ref: "foo"}` -> use the same value as `foo` which must be a valid font family param name
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
+ */
+export type FontFamilyValue = string | {
+    googleFont: string;
+} | Array<string | {
+    googleFont: string;
+}> | {
+    ref: FontFamilyParam | AnyString;
+};
+/**
+ * A CSS font-weight value e.g. `500` or `"bold"`
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+ */
+export type FontWeightValue = 'normal' | 'bold' | number;
+/**
+ * A CSS image value e.g. `"url(...image-url...)"`. Alternatively:
+ *
+ * - `{svg: "...XML source of SVG image..."}` -> embed an SVG as a data: uri
+ * - `{url: "https://..."}` -> a URL to load an image asset from. Can be a HTTPS URL, or image assets such as PNGs can be converted to data: URLs
+ * - `{ref: "foo"}` -> use the same value as the `foo` param (`ref` must be a valid param name)
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/image
+ */
+export type ImageValue = string | {
+    /**
+     * The URL of an image. data: URLs can be used embed assets.
+     */
+    url: string;
+} | {
+    /**
+     * The XML text of an SVG file
+     */
+    svg: string;
+} | {
+    ref: ImageParam | AnyString;
+};
+/**
+ * A CSS time value with second or millisecond units e.g. `"0.3s"` or `"300ms"`. Alternatively:
+ *
+ * - `0.4` -> "0.4s" (a plain JavaScript number is assumed to be a number of seconds.
+ * - `{ref: "foo"}` -> use the same value as the `foo` param (`ref` must be a valid param name)
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
+ */
+export type DurationValue = number | string | {
+    ref: DurationParam | AnyString;
+};
+export declare const paramValueToCss: (param: string, value: unknown) => string | false;
+export {};

package/dist/types/theming/theme-utils.d.ts

@@ -0,0 +1,8 @@
+export declare const kebabCase: (str: string) => string;
+export declare const paramToVariableName: (paramName: string) => string;
+export declare const paramToVariableExpression: (paramName: string) => string;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const logErrorMessage: (message: unknown, error?: unknown) => void;
+export declare const proportionToPercent: (value: number) => number;
+export declare const camelCase: (str: string) => string;
+export declare const memoize: <R, A = void>(fn: (arg: A) => R) => ((arg: A) => R);

package/dist/types/theming/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "32.3.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-community",
-  "version": "32.2.1",
+  "version": "32.3.0",
   "description": "Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue",
   "main": "./dist/package/main.cjs.js",
   "types": "./dist/types/main.d.ts",
@@ -88,19 +88,19 @@
   ],
   "homepage": "https://www.ag-grid.com/",
   "dependencies": {
-    "ag-charts-types": "10.2.0"
+    "ag-charts-types": "10.3.0"
   },
   "devDependencies": {
     "source-map-loader": "^5.0.0",
     "gulp": "^4.0.0",
     "gulp-replace": "^1.0.0",
     "gulp-rename": "^2.0.0",
-    "@ag-grid-community/client-side-row-model": "32.2.1",
-    "@ag-grid-community/core": "32.2.1",
-    "@ag-grid-community/csv-export": "32.2.1",
-    "@ag-grid-community/infinite-row-model": "32.2.1",
-    "@ag-grid-community/styles": "32.2.1",
-    "@ag-grid-community/theming": "32.2.1",
+    "@ag-grid-community/client-side-row-model": "32.3.0",
+    "@ag-grid-community/core": "32.3.0",
+    "@ag-grid-community/csv-export": "32.3.0",
+    "@ag-grid-community/infinite-row-model": "32.3.0",
+    "@ag-grid-community/styles": "32.3.0",
+    "@ag-grid-community/theming": "32.3.0",
     "ts-loader": "^9.5.1",
     "style-loader": "^3.3.4",
     "css-loader": "^6.10.0",

package/styles/_css-content.scss

@@ -1633,10 +1633,10 @@
           flex: 1 1 auto;
           align-self: stretch;
           align-items: center;
+          overflow: hidden;
         }
         
         .ag-header-cell-label {
-          overflow: hidden;
           text-overflow: ellipsis;
         }
         
@@ -1644,6 +1644,7 @@
           position: sticky;
           flex: none;
           max-width: 100%;
+          overflow: visible;
         }
         
         .ag-header-group-text {
@@ -1675,6 +1676,10 @@
           white-space: normal;
         }
         
+        .ag-header-cell-comp-wrapper-limited-height > div {
+          overflow: hidden;
+        }
+        
         .ag-right-aligned-header .ag-header-cell-label {
           flex-direction: row-reverse;
         }
@@ -2565,7 +2570,7 @@
           position: absolute;
         }
         
-        .ag-header-group-cell-no-group.ag-header-span-height .ag-header-cell-resize {
+        .ag-header-group-cell-no-group.ag-header-span-height {
           display: none;
         }
         
@@ -3847,11 +3852,7 @@
         }
         
         .ag-row-highlight-above::after {
-          top: -1px;
-        }
-        
-        .ag-row-highlight-above.ag-row-first::after {
-          top: 0;
+          top: 0px;
         }
         
         .ag-row-highlight-below::after {
@@ -4903,7 +4904,7 @@
           margin-right: 4px;
         }
         
-        .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
+        .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total, .ag-header-parent-hidden),
         .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group {
           border-top: var(--ag-borders-critical) var(--ag-border-color);
         }
@@ -5726,6 +5727,14 @@
           --ag-charts-justify: none !important;
         }
         
+        .ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus {
+          box-shadow: none;
+        }
+        
+        .ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus-visible {
+          box-shadow: var(--ag-input-focus-box-shadow);
+        }
+        
         .ag-date-time-list-page-title-bar {
           display: flex;
         }
@@ -7691,10 +7700,10 @@
           flex: 1 1 auto;
           align-self: stretch;
           align-items: center;
+          overflow: hidden;
         }
         
         .ag-header-cell-label {
-          overflow: hidden;
           text-overflow: ellipsis;
         }
         
@@ -7702,6 +7711,7 @@
           position: sticky;
           flex: none;
           max-width: 100%;
+          overflow: visible;
         }
         
         .ag-header-group-text {
@@ -7733,6 +7743,10 @@
           white-space: normal;
         }
         
+        .ag-header-cell-comp-wrapper-limited-height > div {
+          overflow: hidden;
+        }
+        
         .ag-right-aligned-header .ag-header-cell-label {
           flex-direction: row-reverse;
         }
@@ -8623,7 +8637,7 @@
           position: absolute;
         }
         
-        .ag-header-group-cell-no-group.ag-header-span-height .ag-header-cell-resize {
+        .ag-header-group-cell-no-group.ag-header-span-height {
           display: none;
         }
         
@@ -9905,11 +9919,7 @@
         }
         
         .ag-row-highlight-above::after {
-          top: -1px;
-        }
-        
-        .ag-row-highlight-above.ag-row-first::after {
-          top: 0;
+          top: 0px;
         }
         
         .ag-row-highlight-below::after {
@@ -10961,7 +10971,7 @@
           margin-right: 4px;
         }
         
-        .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
+        .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total, .ag-header-parent-hidden),
         .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group {
           border-top: var(--ag-borders-critical) var(--ag-border-color);
         }
@@ -11784,6 +11794,14 @@
           --ag-charts-justify: none !important;
         }
         
+        .ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus {
+          box-shadow: none;
+        }
+        
+        .ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus-visible {
+          box-shadow: var(--ag-input-focus-box-shadow);
+        }
+        
         .ag-date-time-list-page-title-bar {
           display: flex;
         }

package/styles/ag-grid-no-native-widgets.css

@@ -1611,10 +1611,10 @@ ag-grid-aurelia {
   flex: 1 1 auto;
   align-self: stretch;
   align-items: center;
+  overflow: hidden;
 }
 
 .ag-header-cell-label {
-  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -1622,6 +1622,7 @@ ag-grid-aurelia {
   position: sticky;
   flex: none;
   max-width: 100%;
+  overflow: visible;
 }
 
 .ag-header-group-text {
@@ -1653,6 +1654,10 @@ ag-grid-aurelia {
   white-space: normal;
 }
 
+.ag-header-cell-comp-wrapper-limited-height > div {
+  overflow: hidden;
+}
+
 .ag-right-aligned-header .ag-header-cell-label {
   flex-direction: row-reverse;
 }
@@ -2543,7 +2548,7 @@ ag-grid-aurelia {
   position: absolute;
 }
 
-.ag-header-group-cell-no-group.ag-header-span-height .ag-header-cell-resize {
+.ag-header-group-cell-no-group.ag-header-span-height {
   display: none;
 }
 
@@ -3825,11 +3830,7 @@ button[class^=ag-]:focus {
 }
 
 .ag-row-highlight-above::after {
-  top: -1px;
-}
-
-.ag-row-highlight-above.ag-row-first::after {
-  top: 0;
+  top: 0px;
 }
 
 .ag-row-highlight-below::after {
@@ -4881,7 +4882,7 @@ button.ag-side-button-button:focus {
   margin-right: 4px;
 }
 
-.ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
+.ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total, .ag-header-parent-hidden),
 .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group {
   border-top: var(--ag-borders-critical) var(--ag-border-color);
 }
@@ -5704,6 +5705,14 @@ button.ag-side-button-button:focus {
   --ag-charts-justify: none !important;
 }
 
+.ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus {
+  box-shadow: none;
+}
+
+.ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus-visible {
+  box-shadow: var(--ag-input-focus-box-shadow);
+}
+
 .ag-date-time-list-page-title-bar {
   display: flex;
 }