Merge branch 'master' into feat/add-eslint-rule-prefer-v9

packages/charts/react-charting/CHANGELOG.json

@@ -1,6 +1,42 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Thu, 02 Jan 2025 07:22:03 GMT",
+      "tag": "@fluentui/react-charting_v5.23.36",
+      "version": "5.23.36",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "6bd14a98fb5bec1eb26dfbada654fc1588249fa8",
+            "comment": "fix: resolve css variables in svg image data"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 01 Jan 2025 07:21:09 GMT",
+      "tag": "@fluentui/react-charting_v5.23.35",
+      "version": "5.23.35",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "bf1b91f1fd3cfb580185870b6a4b77738384f9d2",
+            "comment": "HeatMap chart bug fixes"
+          },
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "db1eb859113249615f1de99d409d330231761420",
+            "comment": "Initialization of state variables and updating for HorizontalBarChartWithAxis chart"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 31 Dec 2024 07:21:44 GMT",
       "tag": "@fluentui/react-charting_v5.23.34",

packages/charts/react-charting/CHANGELOG.md

@@ -1,9 +1,28 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Tue, 31 Dec 2024 07:21:44 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Jan 2025 07:22:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.23.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.36)
+
+Thu, 02 Jan 2025 07:22:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.35..@fluentui/react-charting_v5.23.36)
+
+### Patches
+
+- fix: resolve css variables in svg image data ([PR #33538](https://github.com/microsoft/fluentui/pull/33538) by [email protected])
+
+## [5.23.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.35)
+
+Wed, 01 Jan 2025 07:21:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.34..@fluentui/react-charting_v5.23.35)
+
+### Patches
+
+- HeatMap chart bug fixes ([PR #33525](https://github.com/microsoft/fluentui/pull/33525) by [email protected])
+- Initialization of state variables and updating for HorizontalBarChartWithAxis chart ([PR #33532](https://github.com/microsoft/fluentui/pull/33532) by [email protected])
+
 ## [5.23.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.34)
 
 Tue, 31 Dec 2024 07:21:44 GMT 

packages/charts/react-charting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.23.34",
+  "version": "5.23.36",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -127,7 +127,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
   const exportAsImage = React.useCallback(
     (opts?: IImageExportOptions) => {
       return toImage(chartRef.current?.chartContainer, {
-        background: theme.palette.white,
+        background: theme.semanticColors.bodyBackground,
         ...opts,
       });
     },

packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts

@@ -17,7 +17,8 @@ export function toImage(chartContainer?: HTMLElement | null, opts: IImageExportO
     }
 
     try {
-      const background = 'white'; // Background is coming as --var(xxx) when used with v8 wrapper in v9
+      const background =
+        typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';
       const svg = toSVG(chartContainer, background);
 
       const svgData = new XMLSerializer().serializeToString(svg.node);
@@ -65,7 +66,7 @@ function toSVG(chartContainer: HTMLElement, background: string) {
 
   const svgElements = svg.getElementsByTagName('*');
   const styleSheets = document.styleSheets;
-  const styleRules: string[] = [];
+  let styleRules: string = '';
 
   for (let i = svgElements.length - 1; i--; ) {
     svgElements[i].classList.forEach(className => {
@@ -81,14 +82,15 @@ function toSVG(chartContainer: HTMLElement, background: string) {
         const hasClassName = selectorText.split(' ').some(word => classNames.has(word));
 
         if (hasClassName) {
-          styleRules.push(rules[j].cssText);
+          styleRules += rules[j].cssText + ' ';
         }
       }
     }
   }
+  styleRules = resolveCSSVariables(chartContainer, styleRules);
 
   const xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');
-  const styleNode = xmlDocument.createCDATASection(styleRules.join(' '));
+  const styleNode = xmlDocument.createCDATASection(styleRules);
   clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node()!.appendChild(styleNode);
 
   clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);
@@ -161,12 +163,14 @@ function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHei
       textOffset = 8;
     }
 
+    const { color: textColor } = getComputedStyle(legendText!);
     legendItem
       .append('text')
       .attr('x', legendX + textOffset)
       .attr('y', svgHeight + legendY + 8)
       .attr('dominant-baseline', 'hanging')
       .attr('class', legendText!.getAttribute('class'))
+      .attr('fill', textColor)
       .text(legendText!.textContent);
     legendX += legendWidth;
   }
@@ -192,6 +196,15 @@ function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHei
   };
 }
 
+const cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
+
+function resolveCSSVariables(chartContainer: HTMLElement, styleRules: string) {
+  const containerStyles = getComputedStyle(chartContainer);
+  return styleRules.replace(cssVarRegExp, (match, group1) => {
+    return containerStyles.getPropertyValue(group1);
+  });
+}
+
 function svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise<string> {
   return new Promise((resolve, reject) => {
     const scale = opts.scale || 1;

packages/react-docsite-components/CHANGELOG.json

@@ -1,6 +1,36 @@
 {
   "name": "@fluentui/react-docsite-components",
   "entries": [
+    {
+      "date": "Thu, 02 Jan 2025 07:22:03 GMT",
+      "tag": "@fluentui/react-docsite-components_v8.13.156",
+      "version": "8.13.156",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-docsite-components",
+            "comment": "Bump @fluentui/react-monaco-editor to v1.7.274",
+            "commit": "6bd14a98fb5bec1eb26dfbada654fc1588249fa8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 01 Jan 2025 07:21:10 GMT",
+      "tag": "@fluentui/react-docsite-components_v8.13.155",
+      "version": "8.13.155",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-docsite-components",
+            "comment": "Bump @fluentui/react-monaco-editor to v1.7.273",
+            "commit": "bf1b91f1fd3cfb580185870b6a4b77738384f9d2"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 31 Dec 2024 07:21:45 GMT",
       "tag": "@fluentui/react-docsite-components_v8.13.154",

packages/react-docsite-components/CHANGELOG.md

@@ -1,9 +1,27 @@
 # Change Log - @fluentui/react-docsite-components
 
-This log was last generated on Tue, 31 Dec 2024 07:21:45 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Jan 2025 07:22:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.13.156](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.156)
+
+Thu, 02 Jan 2025 07:22:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.155..@fluentui/react-docsite-components_v8.13.156)
+
+### Patches
+
+- Bump @fluentui/react-monaco-editor to v1.7.274 ([PR #33538](https://github.com/microsoft/fluentui/pull/33538) by beachball)
+
+## [8.13.155](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.155)
+
+Wed, 01 Jan 2025 07:21:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.154..@fluentui/react-docsite-components_v8.13.155)
+
+### Patches
+
+- Bump @fluentui/react-monaco-editor to v1.7.273 ([PR #33525](https://github.com/microsoft/fluentui/pull/33525) by beachball)
+
 ## [8.13.154](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.154)
 
 Tue, 31 Dec 2024 07:21:45 GMT 

packages/react-docsite-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-docsite-components",
-  "version": "8.13.154",
+  "version": "8.13.156",
   "description": "Fluent UI React components for building documentation sites.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -42,7 +42,7 @@
     "@fluentui/public-docsite-setup": "^0.3.34",
     "@fluentui/react-hooks": "^8.8.16",
     "@fluentui/set-version": "^8.2.23",
-    "@fluentui/react-monaco-editor": "^1.7.272",
+    "@fluentui/react-monaco-editor": "^1.7.274",
     "color-check": "0.0.2",
     "markdown-to-jsx": "^7.0.0",
     "office-ui-fabric-core": "^11.0.0",

packages/react-examples/package.json

@@ -36,8 +36,8 @@
     "@fluentui/merge-styles": "^8.6.13",
     "@fluentui/react": "^8.122.3",
     "@fluentui/react-cards": "^0.205.192",
-    "@fluentui/react-charting": "^5.23.34",
-    "@fluentui/react-docsite-components": "^8.13.154",
+    "@fluentui/react-charting": "^5.23.36",
+    "@fluentui/react-docsite-components": "^8.13.156",
     "@fluentui/react-experiments": "^8.14.189",
     "@fluentui/react-file-type-icons": "^8.12.7",
     "@fluentui/react-focus": "^8.9.20",

packages/react-monaco-editor/CHANGELOG.json

@@ -1,6 +1,36 @@
 {
   "name": "@fluentui/react-monaco-editor",
   "entries": [
+    {
+      "date": "Thu, 02 Jan 2025 07:22:03 GMT",
+      "tag": "@fluentui/react-monaco-editor_v1.7.274",
+      "version": "1.7.274",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-monaco-editor",
+            "comment": "Bump @fluentui/react-charting to v5.23.36",
+            "commit": "6bd14a98fb5bec1eb26dfbada654fc1588249fa8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 01 Jan 2025 07:21:10 GMT",
+      "tag": "@fluentui/react-monaco-editor_v1.7.273",
+      "version": "1.7.273",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-monaco-editor",
+            "comment": "Bump @fluentui/react-charting to v5.23.35",
+            "commit": "bf1b91f1fd3cfb580185870b6a4b77738384f9d2"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 31 Dec 2024 07:21:45 GMT",
       "tag": "@fluentui/react-monaco-editor_v1.7.272",

packages/react-monaco-editor/CHANGELOG.md

@@ -1,9 +1,27 @@
 # Change Log - @fluentui/react-monaco-editor
 
-This log was last generated on Tue, 31 Dec 2024 07:21:45 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Jan 2025 07:22:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.7.274](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.274)
+
+Thu, 02 Jan 2025 07:22:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.273..@fluentui/react-monaco-editor_v1.7.274)
+
+### Patches
+
+- Bump @fluentui/react-charting to v5.23.36 ([PR #33538](https://github.com/microsoft/fluentui/pull/33538) by beachball)
+
+## [1.7.273](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.273)
+
+Wed, 01 Jan 2025 07:21:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.272..@fluentui/react-monaco-editor_v1.7.273)
+
+### Patches
+
+- Bump @fluentui/react-charting to v5.23.35 ([PR #33525](https://github.com/microsoft/fluentui/pull/33525) by beachball)
+
 ## [1.7.272](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.272)
 
 Tue, 31 Dec 2024 07:21:45 GMT 

packages/react-monaco-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-monaco-editor",
-  "version": "1.7.272",
+  "version": "1.7.274",
   "description": "Live React example editing using monaco",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "@fluentui/example-data": "^8.4.25",
     "@fluentui/monaco-editor": "^1.3.24",
     "@fluentui/react-hooks": "^8.8.16",
-    "@fluentui/react-charting": "^5.23.34",
+    "@fluentui/react-charting": "^5.23.36",
     "raw-loader": "4.0.2",
     "react-syntax-highlighter": "^10.1.3",
     "tslib": "^2.1.0"