Merge branch 'users/srmukher/LegendsMultiSel' of https://github.com/m…

…icrosoft/fluentui into users/srmukher/LegendsMultiSel
microsoft · Dec 20, 2024 · 943cff8 · 943cff8
2 parents 568ca4e + 0e62c96
commit 943cff8
Show file tree

Hide file tree

Showing 100 changed files with 1,086 additions and 259 deletions.
diff --git a/change/@fluentui-react-1bdbe475-2d17-453e-b058-b152322278cd.json b/change/@fluentui-react-1bdbe475-2d17-453e-b058-b152322278cd.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update react.api.md",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-charting-6dbae5bf-a46a-4276-a3bf-3629fd5542ec.json b/change/@fluentui-react-charting-6dbae5bf-a46a-4276-a3bf-3629fd5542ec.json
diff --git a/...4c197bf1-3dca-480d-aa17-d97a170246ff.json → ...f56dc096-9891-4d5c-ae30-4d8a6ac5b481.json b/...4c197bf1-3dca-480d-aa17-d97a170246ff.json → ...f56dc096-9891-4d5c-ae30-4d8a6ac5b481.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "Enabled Multi Select behaviour of Controlled legends",
+  "comment": "Ensure type safety of dependent fields",
   "packageName": "@fluentui/react-charting",
   "email": "[email protected]",
   "dependentChangeType": "patch"

diff --git a/change/@fluentui-react-dialog-ce4d9fc2-0bea-4c0a-9683-8e86082cd6ad.json b/change/@fluentui-react-dialog-ce4d9fc2-0bea-4c0a-9683-8e86082cd6ad.json
diff --git a/change/@fluentui-react-menu-0feb2146-938a-4fbf-bb2b-2d0d6b7e40b8.json b/change/@fluentui-react-menu-0feb2146-938a-4fbf-bb2b-2d0d6b7e40b8.json
diff --git a/change/@fluentui-react-motion-f4f8b668-785c-48d9-9d8f-2410472b12f4.json b/change/@fluentui-react-motion-f4f8b668-785c-48d9-9d8f-2410472b12f4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: handle case when Animation.persist() does not exist",
+  "packageName": "@fluentui/react-motion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-01148df2-489e-4ed3-8b39-6a65518b17c3.json b/change/@fluentui-react-popover-01148df2-489e-4ed3-8b39-6a65518b17c3.json
diff --git a/change/@fluentui-react-rating-94e96782-4be8-468e-b1a3-0b2ac9a76c62.json b/change/@fluentui-react-rating-94e96782-4be8-468e-b1a3-0b2ac9a76c62.json
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
     "@griffel/webpack-loader": "2.2.10",
     "@jest/reporters": "29.7.0",
     "@mdx-js/loader": "2.3.0",
-    "@microsoft/api-extractor": "7.38.5",
+    "@microsoft/api-extractor": "7.39.0",
     "@microsoft/api-extractor-model": "7.28.3",
     "@microsoft/eslint-plugin-sdl": "0.1.9",
     "@microsoft/load-themed-styles": "1.10.26",
@@ -336,11 +336,11 @@
     "tmp": "0.2.1",
     "ts-jest": "29.1.1",
     "ts-loader": "9.4.2",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "tslib": "2.6.3",
-    "typescript": "5.2.2",
+    "typescript": "5.3.3",
     "vinyl": "2.2.0",
     "webpack": "5.94.0",
     "webpack-bundle-analyzer": "4.10.1",
@@ -379,7 +379,6 @@
     "swc-loader": "^0.2.6",
     "prettier": "2.8.8",
     "puppeteer": "19.6.0",
-    "@microsoft/api-extractor/typescript": "5.2.2",
     "ws": "8.17.1"
   },
   "nx": {

diff --git a/packages/charts/react-charting/CHANGELOG.json b/packages/charts/react-charting/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Wed, 18 Dec 2024 07:20:30 GMT",
+      "tag": "@fluentui/react-charting_v5.23.27",
+      "version": "5.23.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "870fdfd57db59eb0c549c6c12645fc50130970a4",
+            "comment": "Enabled Multi Select behaviour of Controlled legends"
+          },
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "835c01b1fd7bcdf86d28f95963950e0e5285319c",
+            "comment": "Mode check for declarative area chart "
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 17 Dec 2024 07:21:19 GMT",
       "tag": "@fluentui/react-charting_v5.23.26",

diff --git a/packages/charts/react-charting/CHANGELOG.md b/packages/charts/react-charting/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Tue, 17 Dec 2024 07:21:19 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Dec 2024 07:20:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.23.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.27)
+
+Wed, 18 Dec 2024 07:20:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.26..@fluentui/react-charting_v5.23.27)
+
+### Patches
+
+- Enabled Multi Select behaviour of Controlled legends ([PR #33479](https://github.com/microsoft/fluentui/pull/33479) by [email protected])
+- Mode check for declarative area chart  ([PR #33467](https://github.com/microsoft/fluentui/pull/33467) by [email protected])
+
 ## [5.23.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.26)
 
 Tue, 17 Dec 2024 07:21:19 GMT 

diff --git a/packages/charts/react-charting/package.json b/packages/charts/react-charting/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.23.26",
+  "version": "5.23.27",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
@@ -141,7 +141,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           <LineChart
             {...transformPlotlyJsonToScatterChartProps({ data, layout }, false, colorMap, isDarkTheme)}
             legendProps={{
-              ...legendProps,
+              onChange: onActiveLegendsChange,
               canSelectMultipleLegends: true,
               selectedLegends: activeLegends,
             }}

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -65,19 +65,19 @@ export const transformPlotlyJsonToDonutProps = (
     };
   });
 
-  const width: number = layout?.width || 440;
-  const height: number = layout?.height || 220;
-  const hideLabels = firstData.textinfo ? !['value', 'percent'].includes(firstData.textinfo) : false;
-  const donutMarginHorizontal = hideLabels ? 0 : 80;
-  const donutMarginVertical = 40 + (hideLabels ? 0 : 40);
+  const width: number = typeof layout?.width === 'number' ? layout?.width : 440;
+  const height: number = typeof layout?.height === 'number' ? layout?.height : 220;
+  const hideLabels: boolean = firstData.textinfo ? !['value', 'percent'].includes(firstData.textinfo) : false;
+  const donutMarginHorizontal: number = hideLabels ? 0 : 80;
+  const donutMarginVertical: number = 40 + (hideLabels ? 0 : 40);
   const innerRadius: number = firstData.hole
     ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2)
     : 0;
 
   const styles: IDonutChartProps['styles'] = {
     root: {
       '[class^="arcLabel"]': {
-        fontSize: firstData.textfont?.size,
+        ...(typeof firstData.textfont?.size === 'number' ? { fontSize: firstData.textfont.size } : {}),
       },
     },
   };
@@ -225,8 +225,8 @@ export const transformPlotlyJsonToVBCProps = (
     const totalDataPoints = d3Merge(buckets).length;
 
     buckets.forEach(bucket => {
-      const legend = series.name || `Series ${index + 1}`;
-      const color = getColor(legend, colorMap, isDarkTheme);
+      const legend: string = series.name || `Series ${index + 1}`;
+      const color: string = getColor(legend, colorMap, isDarkTheme);
       let y = bucket.length;
 
       if (series.histnorm === 'percent') {
@@ -259,7 +259,7 @@ export const transformPlotlyJsonToVBCProps = (
 
   return {
     data: vbcData,
-    chartTitle: layout?.title,
+    chartTitle: typeof layout?.title === 'string' ? layout?.title : '',
     // width: layout?.width,
     // height: layout?.height,
     hideLegend: true,
@@ -281,7 +281,7 @@ export const transformPlotlyJsonToScatterChartProps = (
     const isString = typeof xValues[0] === 'string';
     const isXDate = isDateArray(xValues);
     const isXNumber = isNumberArray(xValues);
-    const legend = series.name || `Series ${index + 1}`;
+    const legend: string = series.name || `Series ${index + 1}`;
     const lineColor = getColor(legend, colorMap, isDarkTheme);
 
     return {
@@ -295,7 +295,7 @@ export const transformPlotlyJsonToScatterChartProps = (
   });
 
   const chartProps: IChartProps = {
-    chartTitle: layout.title || '',
+    chartTitle: typeof layout.title === 'string' ? layout.title : '',
     lineChartData: chartData,
   };
 
@@ -333,24 +333,24 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
     })
     .flat();
 
-  const chartHeight = layout.height || 450;
-  const margin = layout.margin?.l || 0;
-  const padding = layout.margin?.pad || 0;
-  const availableHeight = chartHeight - margin - padding;
+  const chartHeight: number = typeof layout.height === 'number' ? layout.height : 450;
+  const margin: number = typeof layout.margin?.l === 'number' ? layout.margin?.l : 0;
+  const padding: number = typeof layout.margin?.pad === 'number' ? layout.margin?.pad : 0;
+  const availableHeight: number = chartHeight - margin - padding;
   const numberOfBars = data[0].y.length;
   const scalingFactor = 0.01;
   const gapFactor = 1 / (1 + scalingFactor * numberOfBars);
   const barHeight = availableHeight / (numberOfBars * (1 + gapFactor));
 
   return {
     data: chartData,
-    chartTitle: layout.title || '',
+    chartTitle: typeof layout.title === 'string' ? layout.title : '',
     barHeight,
     showYAxisLables: true,
     styles: {
       root: {
         height: chartHeight,
-        width: layout.width || 600,
+        width: typeof layout.width === 'number' ? layout.width : 600,
       },
     },
   };
@@ -378,7 +378,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
     });
   });
   const heatmapData: IHeatMapChartData = {
-    legend: firstData.name || '',
+    legend: typeof firstData.name === 'string' ? firstData.name : '',
     data: heatmapDataPoints,
     value: 0,
   };
@@ -432,17 +432,17 @@ export const transformPlotlyJsonToSankeyProps = (
     }),
   };
 
-  const width: number = layout?.width || 440;
-  const height: number = layout?.height || 220;
+  const width: number = typeof layout?.width === 'number' ? layout?.width : 440;
+  const height: number = typeof layout?.height === 'number' ? layout?.height : 220;
   const styles: ISankeyChartProps['styles'] = {
     root: {
-      fontSize: layout.font?.size,
+      ...(typeof layout.font?.size === 'number' ? { fontSize: layout.font?.size } : {}),
     },
   };
   const shouldResize: number = width + height;
   return {
     data: {
-      chartTitle: layout?.title,
+      chartTitle: typeof layout?.title === 'string' ? layout?.title : '',
       SankeyChartData: sankeyChartData,
     },
     width,
@@ -494,15 +494,15 @@ export const transformPlotlyJsonToGaugeProps = (
 
   return {
     segments,
-    chartValue: firstData.value,
-    chartTitle: firstData.title?.text,
+    chartValue: typeof firstData.value === 'number' ? firstData.value : 0,
+    chartTitle: typeof firstData.title?.text === 'string' ? firstData.title?.text : '',
     sublabel,
     // range values can be null
-    minValue: firstData.gauge?.axis?.range?.[0] ?? undefined,
-    maxValue: firstData.gauge?.axis?.range?.[1] ?? undefined,
+    minValue: typeof firstData.gauge?.axis?.range?.[0] === 'number' ? firstData.gauge?.axis?.range?.[0] : undefined,
+    maxValue: typeof firstData.gauge?.axis?.range?.[1] === 'number' ? firstData.gauge?.axis?.range?.[1] : undefined,
     chartValueFormat: () => firstData.value,
-    width: layout?.width,
-    height: layout?.height,
+    width: typeof layout?.width === 'number' ? layout?.width : 0,
+    height: typeof layout?.height === 'number' ? layout?.height : 0,
     hideLegend: true,
     styles,
   };

diff --git a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx
@@ -130,11 +130,10 @@ export class Arc extends React.Component<IArcProps, IArcState> {
 
   private _renderArcLabel = (className: string) => {
     const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props;
-
     if (
       hideLabels ||
       Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||
-      !this._shouldHighlightArc(activeArc!, data!.data.legend!)
+      (activeArc && activeArc.length > 0 && !this._shouldHighlightArc(activeArc!, data!.data.legend!))
     ) {
       return null;
     }

diff --git a/packages/charts/react-charts-preview/library/CHANGELOG.json b/packages/charts/react-charts-preview/library/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-charts-preview",
   "entries": [
+    {
+      "date": "Wed, 18 Dec 2024 10:59:37 GMT",
+      "tag": "@fluentui/react-charts-preview_v0.1.5",
+      "version": "0.1.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charts-preview",
+            "comment": "Bump @fluentui/react-overflow to v9.2.5",
+            "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charts-preview",
+            "comment": "Bump @fluentui/react-popover to v9.9.29",
+            "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 16 Dec 2024 16:26:49 GMT",
       "tag": "@fluentui/react-charts-preview_v0.1.4",

diff --git a/packages/charts/react-charts-preview/library/CHANGELOG.md b/packages/charts/react-charts-preview/library/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-charts-preview
 
-This log was last generated on Mon, 16 Dec 2024 16:26:49 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts-preview_v0.1.5)
+
+Wed, 18 Dec 2024 10:59:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts-preview_v0.1.4..@fluentui/react-charts-preview_v0.1.5)
+
+### Patches
+
+- Bump @fluentui/react-overflow to v9.2.5 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball)
+- Bump @fluentui/react-popover to v9.9.29 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball)
+
 ## [0.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts-preview_v0.1.4)
 
 Mon, 16 Dec 2024 16:26:49 GMT 

diff --git a/packages/charts/react-charts-preview/library/package.json b/packages/charts/react-charts-preview/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charts-preview",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "React web chart controls for Microsoft fluentui v9 system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,8 +39,8 @@
   "dependencies": {
     "@fluentui/react-button": "^9.3.98",
     "@fluentui/react-jsx-runtime": "^9.0.48",
-    "@fluentui/react-overflow": "^9.2.4",
-    "@fluentui/react-popover": "^9.9.28",
+    "@fluentui/react-overflow": "^9.2.5",
+    "@fluentui/react-popover": "^9.9.29",
     "@fluentui/react-shared-contexts": "^9.21.2",
     "@fluentui/react-tabster": "^9.23.2",
     "@fluentui/react-theme": "^9.1.24",