diff --git a/change/@fluentui-codemods-64d49103-6d6d-4ef0-93f0-2339233931e5.json b/change/@fluentui-codemods-64d49103-6d6d-4ef0-93f0-2339233931e5.json deleted file mode 100644 index f67a35684218e..0000000000000 --- a/change/@fluentui-codemods-64d49103-6d6d-4ef0-93f0-2339233931e5.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "chore: remove usage of \"export *\"", - "packageName": "@fluentui/codemods", - "email": "olfedias@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-charting-14c34b26-6050-4fa3-8ab9-ccfc1661f953.json b/change/@fluentui-react-charting-14c34b26-6050-4fa3-8ab9-ccfc1661f953.json new file mode 100644 index 0000000000000..dc02c066b09c8 --- /dev/null +++ b/change/@fluentui-react-charting-14c34b26-6050-4fa3-8ab9-ccfc1661f953.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Support changing legends programatically at runtime and bug fixes", + "packageName": "@fluentui/react-charting", + "email": "atishay.jain@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-charting-4a2b4230-b5e3-4cea-9777-4e1670b33156.json b/change/@fluentui-react-charting-4a2b4230-b5e3-4cea-9777-4e1670b33156.json new file mode 100644 index 0000000000000..d0644dd55b79b --- /dev/null +++ b/change/@fluentui-react-charting-4a2b4230-b5e3-4cea-9777-4e1670b33156.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Full Yaxis labels in HeatMap chart", + "packageName": "@fluentui/react-charting", + "email": "74965306+Anush2303@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-charting-891c4db7-8af3-489e-80f8-b8a02b227536.json b/change/@fluentui-react-charting-891c4db7-8af3-489e-80f8-b8a02b227536.json new file mode 100644 index 0000000000000..9c9a1d6e8eddd --- /dev/null +++ b/change/@fluentui-react-charting-891c4db7-8af3-489e-80f8-b8a02b227536.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Support for multiple legend selection for Vertical Stacked Bar Chart ", + "packageName": "@fluentui/react-charting", + "email": "120183316+srmukher@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-charting-d99f14e6-dd3a-4f33-a8b3-9e28ea5bcfab.json b/change/@fluentui-react-charting-d99f14e6-dd3a-4f33-a8b3-9e28ea5bcfab.json new file mode 100644 index 0000000000000..a1be1b61112df --- /dev/null +++ b/change/@fluentui-react-charting-d99f14e6-dd3a-4f33-a8b3-9e28ea5bcfab.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Enabling multiple legend selection for Grouped Vertical Bar Chart", + "packageName": "@fluentui/react-charting", + "email": "120183316+srmukher@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-icon-provider-a7f6eac5-5e7c-40b4-ae8c-4b3dab5bc372.json b/change/@fluentui-react-icon-provider-a7f6eac5-5e7c-40b4-ae8c-4b3dab5bc372.json deleted file mode 100644 index 7949b00332d92..0000000000000 --- a/change/@fluentui-react-icon-provider-a7f6eac5-5e7c-40b4-ae8c-4b3dab5bc372.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "chore: remove usage of \"export *\"", - "packageName": "@fluentui/react-icon-provider", - "email": "olfedias@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-theme-576e3635-ea2b-48cd-b8bd-f35566e66189.json b/change/@fluentui-theme-576e3635-ea2b-48cd-b8bd-f35566e66189.json deleted file mode 100644 index aa1ed0df91a3a..0000000000000 --- a/change/@fluentui-theme-576e3635-ea2b-48cd-b8bd-f35566e66189.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "chore: remove usage of \"export *\"", - "packageName": "@fluentui/theme", - "email": "olfedias@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-web-components-f87a2b96-d977-4138-8cb9-8cad4b13d8a8.json b/change/@fluentui-web-components-f87a2b96-d977-4138-8cb9-8cad4b13d8a8.json deleted file mode 100644 index f9cd17c85f0c5..0000000000000 --- a/change/@fluentui-web-components-f87a2b96-d977-4138-8cb9-8cad4b13d8a8.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "prerelease", - "comment": "fix tooltip positioning styles for 'below-end' option", - "packageName": "@fluentui/web-components", - "email": "863023+radium-v@users.noreply.github.com", - "dependentChangeType": "patch" -} diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json index 58c63f07e88b3..0cdaa9ab5e688 100644 --- a/packages/azure-themes/CHANGELOG.json +++ b/packages/azure-themes/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/azure-themes", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/azure-themes_v8.6.115", + "version": "8.6.115", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/azure-themes_v8.6.114", diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md index 024ff14c00d60..d719297e62b5b 100644 --- a/packages/azure-themes/CHANGELOG.md +++ b/packages/azure-themes/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/azure-themes -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.6.115](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.115) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.114..@fluentui/azure-themes_v8.6.115) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.6.114](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.114) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json index 2136423a78502..0bfd7b970ea7a 100644 --- a/packages/azure-themes/package.json +++ b/packages/azure-themes/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/azure-themes", - "version": "8.6.114", + "version": "8.6.115", "description": "Azure themes for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.2", "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } diff --git a/packages/charts/react-charting/CHANGELOG.json b/packages/charts/react-charting/CHANGELOG.json index 3937b8e683973..544d5695e1975 100644 --- a/packages/charts/react-charting/CHANGELOG.json +++ b/packages/charts/react-charting/CHANGELOG.json @@ -1,6 +1,69 @@ { "name": "@fluentui/react-charting", "entries": [ + { + "date": "Thu, 26 Dec 2024 07:21:14 GMT", + "tag": "@fluentui/react-charting_v5.23.31", + "version": "5.23.31", + "comments": { + "patch": [ + { + "author": "110246001+krkshitij@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "0dd9a713b54a6d5b5929ac7febd1c7e44c83efca", + "comment": "fix: remove duplicate legends in vertical bar chart" + } + ] + } + }, + { + "date": "Wed, 25 Dec 2024 07:21:55 GMT", + "tag": "@fluentui/react-charting_v5.23.30", + "version": "5.23.30", + "comments": { + "patch": [ + { + "author": "120183316+srmukher@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "fa08fec97a5bc070e2866633c792f7066f0c86e8", + "comment": "Legends multi selection for Donut Charts" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:57 GMT", + "tag": "@fluentui/react-charting_v5.23.29", + "version": "5.23.29", + "comments": { + "patch": [ + { + "author": "110246001+krkshitij@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee", + "comment": "feat: add functionality to export chart as image" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react-focus to v8.9.20", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/theme-samples to v8.7.191", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 20 Dec 2024 07:20:00 GMT", "tag": "@fluentui/react-charting_v5.23.28", diff --git a/packages/charts/react-charting/CHANGELOG.md b/packages/charts/react-charting/CHANGELOG.md index 6c3807c6aee3f..b442b9b82e387 100644 --- a/packages/charts/react-charting/CHANGELOG.md +++ b/packages/charts/react-charting/CHANGELOG.md @@ -1,9 +1,39 @@ # Change Log - @fluentui/react-charting -This log was last generated on Fri, 20 Dec 2024 07:20:00 GMT and should not be manually modified. +This log was last generated on Thu, 26 Dec 2024 07:21:14 GMT and should not be manually modified. +## [5.23.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.31) + +Thu, 26 Dec 2024 07:21:14 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.30..@fluentui/react-charting_v5.23.31) + +### Patches + +- fix: remove duplicate legends in vertical bar chart ([PR #33518](https://github.com/microsoft/fluentui/pull/33518) by 110246001+krkshitij@users.noreply.github.com) + +## [5.23.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.30) + +Wed, 25 Dec 2024 07:21:55 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.29..@fluentui/react-charting_v5.23.30) + +### Patches + +- Legends multi selection for Donut Charts ([PR #33447](https://github.com/microsoft/fluentui/pull/33447) by 120183316+srmukher@users.noreply.github.com) + +## [5.23.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.29) + +Mon, 23 Dec 2024 07:22:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.28..@fluentui/react-charting_v5.23.29) + +### Patches + +- feat: add functionality to export chart as image ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by 110246001+krkshitij@users.noreply.github.com) +- Bump @fluentui/react-focus to v8.9.20 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/theme-samples to v8.7.191 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [5.23.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.28) Fri, 20 Dec 2024 07:20:00 GMT diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index 54135c0d0cea0..aab87b0a2ee12 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/packages/charts/react-charting/etc/react-charting.api.md @@ -12,6 +12,7 @@ import { IFocusZoneProps } from '@fluentui/react-focus'; import { IHoverCardStyleProps } from '@fluentui/react/lib/HoverCard'; import { IHoverCardStyles } from '@fluentui/react/lib/HoverCard'; import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet'; +import { IRefObject } from '@fluentui/react/lib/Utilities'; import { IRenderFunction } from '@fluentui/react/lib/Utilities'; import { IStyle } from '@fluentui/react/lib/Styling'; import { IStyle as IStyle_2 } from '@fluentui/react'; @@ -125,6 +126,7 @@ export const DeclarativeChart: React_2.FunctionComponent; // @public export interface DeclarativeChartProps extends React_2.RefAttributes { chartSchema: Schema; + componentRef?: IRefObject; onSchemaChange?: (eventData: Schema) => void; } @@ -267,6 +269,7 @@ export interface ICartesianChartProps { // @deprecated chartLabel?: string; className?: string; + componentRef?: IRefObject; customDateTimeFormatter?: (dateTime: Date) => string; dateLocalizeOptions?: Intl.DateTimeFormatOptions; enabledLegendsWrapLines?: boolean; @@ -352,6 +355,12 @@ export interface ICartesianChartStyles { yAxis?: IStyle; } +// @public (undocumented) +export interface IChart { + // (undocumented) + chartContainer: HTMLElement | null; +} + // @public (undocumented) export interface IChartDataPoint { callOutAccessibilityData?: IAccessibilityProps; @@ -481,6 +490,12 @@ export interface IDataPoint { y: number; } +// @public (undocumented) +export interface IDeclarativeChart { + // (undocumented) + exportAsImage: (opts?: IImageExportOptions) => Promise; +} + // @public (undocumented) export interface IDonutChart { } @@ -488,6 +503,7 @@ export interface IDonutChart { // @public export interface IDonutChartProps extends ICartesianChartProps { calloutProps?: Partial; + componentRef?: IRefObject; culture?: string; data?: IChartProps; enableGradient?: boolean; @@ -536,6 +552,7 @@ export interface IGaugeChartProps { chartValue: number; chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string); className?: string; + componentRef?: IRefObject; culture?: string; enableGradient?: boolean; height?: number; @@ -704,6 +721,7 @@ export interface IHeatMapChartProps extends Pick; rangeValuesForColorScale: string[]; + showYAxisLables?: boolean; styles?: IStyleFunctionOrObject; xAxisDateFormatString?: string; xAxisNumberFormatString?: string; @@ -832,6 +850,18 @@ export interface IHorizontalDataPoint { y: number; } +// @public (undocumented) +export interface IImageExportOptions { + // (undocumented) + background?: string; + // (undocumented) + height?: number; + // (undocumented) + scale?: number; + // (undocumented) + width?: number; +} + // @public export interface ILegend { action?: VoidFunction; @@ -1068,6 +1098,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { maxOfYVal?: number; onChartMouseLeave?: () => void; points: any; + ref?: IRefObject; showYAxisLables?: boolean; showYAxisLablesTooltip?: boolean; stringDatasetForYAxisDomain?: string[]; @@ -1198,8 +1229,10 @@ export interface ISankeyChartData { export interface ISankeyChartProps { accessibility?: ISankeyChartAccessibilityProps; borderColorsForNodes?: string[]; + calloutProps?: Partial; className?: string; colorsForNodes?: string[]; + componentRef?: IRefObject; data: IChartProps; enableReflow?: boolean; formatNumberOptions?: Intl.NumberFormatOptions; diff --git a/packages/charts/react-charting/package.json b/packages/charts/react-charting/package.json index cb9875c26eff9..2cd7632a4fd70 100644 --- 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.28", + "version": "5.23.31", "description": "React web charting controls for Microsoft fluentui system.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -39,8 +39,8 @@ "jest-canvas-mock": "2.4.0" }, "dependencies": { - "@fluentui/react-focus": "^8.9.19", - "@fluentui/theme-samples": "^8.7.190", + "@fluentui/react-focus": "^8.9.20", + "@fluentui/theme-samples": "^8.7.191", "@microsoft/load-themed-styles": "^1.10.26", "@types/d3-array": "^3.0.0", "@types/d3-axis": "^3.0.0", @@ -66,7 +66,7 @@ "tslib": "^2.1.0" }, "peerDependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.2", "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "react": ">=16.8.0 <19.0.0", diff --git a/packages/charts/react-charting/src/DeclarativeChart.ts b/packages/charts/react-charting/src/DeclarativeChart.ts index dadcd45467913..ca97cd8fc995f 100644 --- a/packages/charts/react-charting/src/DeclarativeChart.ts +++ b/packages/charts/react-charting/src/DeclarativeChart.ts @@ -1 +1 @@ -export * from './components/DeclarativeChart/DeclarativeChart'; +export * from './components/DeclarativeChart/index'; diff --git a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx index 686fe0babe863..227eb8686eaac 100644 --- a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -3,7 +3,13 @@ import { max as d3Max, bisector } from 'd3-array'; import { pointer } from 'd3-selection'; import { select as d3Select } from 'd3-selection'; import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape'; -import { classNamesFunction, find, getId, memoizeFunction } from '@fluentui/react/lib/Utilities'; +import { + classNamesFunction, + find, + getId, + initializeComponentRef, + memoizeFunction, +} from '@fluentui/react/lib/Utilities'; import { IAccessibilityProps, CartesianChart, @@ -38,6 +44,7 @@ import { } from '../../utilities/index'; import { ILegend, Legends } from '../Legends/index'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; +import { IChart } from '../../types/index'; const getClassNames = classNamesFunction(); @@ -82,7 +89,7 @@ export interface IAreaChartState extends IBasestate { activePoint: string; } -export class AreaChartBase extends React.Component { +export class AreaChartBase extends React.Component implements IChart { public static defaultProps: Partial = { useUTC: true, }; @@ -119,9 +126,13 @@ export class AreaChartBase extends React.Component; public constructor(props: IAreaChartProps) { super(props); + + initializeComponentRef(this); + this._createSet = memoizeFunction(this._createDataSet); this.state = { selectedLegend: props.legendProps?.selectedLegend ?? '', @@ -148,9 +159,16 @@ export class AreaChartBase extends React.Component { @@ -249,6 +268,10 @@ export class AreaChartBase extends React.Component(); const ChartHoverCard = React.lazy(() => import('../../utilities/ChartHoverCard/ChartHoverCard').then(module => ({ default: module.ChartHoverCard })), ); +const chartTypesToCheck = [ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart]; export interface ICartesianChartState { containerWidth: number; @@ -63,9 +66,12 @@ export interface ICartesianChartState { * 2.Callout * 3.Fit parent Continer */ -export class CartesianChartBase extends React.Component { +export class CartesianChartBase + extends React.Component + implements IChart +{ + public chartContainer: HTMLDivElement; private _classNames: IProcessedStyleSet; - private chartContainer: HTMLDivElement; private legendContainer: HTMLDivElement; private minLegendContainerHeight: number = 32; private xAxisElement: SVGSVGElement | null; @@ -137,14 +143,11 @@ export class CartesianChartBase extends React.Component point.y), - `.${this._classNames.yAxis} text`, + if (chartTypesToCheck.includes(this.props.chartType) && this.props.showYAxisLables && this.yAxisElement) { + const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength( + this.props.chartType, + this.props.points, + this._classNames.yAxis!, ); if (this.state.startFromX !== maxYAxisLabelLength) { this.setState({ @@ -190,14 +193,11 @@ export class CartesianChartBase extends React.Component point.y), - `.${this._classNames.yAxis} text`, + if (chartTypesToCheck.includes(this.props.chartType) && this.props.showYAxisLables && this.yAxisElement) { + const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength( + this.props.chartType, + this.props.points, + this._classNames.yAxis!, ); if (this.state.startFromX !== maxYAxisLabelLength) { this.setState({ @@ -216,6 +216,25 @@ export class CartesianChartBase extends React.Component { + if (chartType === ChartTypes.HeatMapChart) { + return calculateLongestLabelWidth( + points[0].data.map((point: IHeatMapChartDataPoint) => point.y), + `.${className} text`, + ); + } else { + return calculateLongestLabelWidth( + points.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y), + `.${className} text`, + ); + } + }; + public render(): JSX.Element { const { calloutProps, @@ -234,7 +253,7 @@ export class CartesianChartBase extends React.Component ); } + /** * Dedicated function to return the Callout JSX Element , which can further be used to only call this when * only the calloutprops and charthover props changes. diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts index 227d38446e64e..d9363dd636742 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; +import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { ITheme, IStyle } from '@fluentui/react/lib/Styling'; import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet'; import { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus'; @@ -7,6 +7,7 @@ import { ICalloutProps } from '@fluentui/react/lib/Callout'; import { ILegendsProps } from '../Legends/index'; import { IAccessibilityProps, + IChart, IDataPoint, IGroupedVerticalBarChartData, IHeatMapChartDataPoint, @@ -445,6 +446,12 @@ export interface ICartesianChartProps { * Used for enabling negative values in Y axis. */ supportNegativeData?: boolean; + + /** + * Optional callback to access the IChart interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: IRefObject; } export interface IYValueHover { @@ -690,4 +697,9 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { isRtl: boolean, barWidth: number | undefined, ) => ScaleBand; + + /** + * Callback to access the public methods and properties of the component. + */ + ref?: IRefObject; } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index c75490160da75..dd95be6c4768b 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -1,15 +1,19 @@ /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react'; +import { useTheme } from '@fluentui/react'; +import { IRefObject } from '@fluentui/react/lib/Utilities'; import { DonutChart } from '../DonutChart/index'; import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index'; import { + isArrayOrTypedArray, + isDateArray, + isNumberArray, + sanitizeJson, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, - isDateArray, - isNumberArray, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, @@ -24,12 +28,8 @@ import { SankeyChart } from '../SankeyChart/SankeyChart'; import { GaugeChart } from '../GaugeChart/index'; import { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index'; import { VerticalBarChart } from '../VerticalBarChart/index'; -import { useTheme } from '@fluentui/react/lib/Theme'; - -export const UseIsDarkTheme = (): boolean => { - const theme = useTheme(); - return theme?.isInverted ?? false; -}; +import { IImageExportOptions, toImage } from './imageExporter'; +import { IChart } from '../../types/index'; /** * DeclarativeChart schema. @@ -56,6 +56,19 @@ export interface DeclarativeChartProps extends React.RefAttributes void; + + /** + * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: IRefObject; +} + +/** + * {@docCategory DeclarativeChart} + */ +export interface IDeclarativeChart { + exportAsImage: (opts?: IImageExportOptions) => Promise; } const useColorMapping = () => { @@ -71,15 +84,22 @@ export const DeclarativeChart: React.FunctionComponent = HTMLDivElement, DeclarativeChartProps >((props, forwardedRef) => { - const { plotlySchema } = props.chartSchema; - const { data, layout, selectedLegends } = plotlySchema; + const { plotlySchema } = sanitizeJson(props.chartSchema); + const { data, layout } = plotlySchema; + let { selectedLegends } = plotlySchema; const xValues = data[0].x; const isXDate = isDateArray(xValues); const isXNumber = isNumberArray(xValues); const colorMap = useColorMapping(); - const isDarkTheme = UseIsDarkTheme(); + const theme = useTheme(); + const isDarkTheme = theme?.isInverted ?? false; + const chartRef = React.useRef(null); + + if (!isArrayOrTypedArray(selectedLegends)) { + selectedLegends = []; + } - const [activeLegends, setActiveLegends] = React.useState(selectedLegends ?? []); + const [activeLegends, setActiveLegends] = React.useState(selectedLegends); const onActiveLegendsChange = (keys: string[]) => { setActiveLegends(keys); if (props.onSchemaChange) { @@ -87,18 +107,47 @@ export const DeclarativeChart: React.FunctionComponent = } }; + React.useEffect(() => { + // eslint-disable-next-line @typescript-eslint/no-shadow + const { plotlySchema } = sanitizeJson(props.chartSchema); + // eslint-disable-next-line @typescript-eslint/no-shadow + const { selectedLegends } = plotlySchema; + setActiveLegends(selectedLegends ?? []); + }, [props.chartSchema]); + const legendProps = { canSelectMultipleLegends: false, onChange: onActiveLegendsChange, - ...(activeLegends.length > 0 && { selectedLegend: activeLegends[0] }), + selectedLegend: activeLegends.slice(0, 1)[0], }; + const exportAsImage = React.useCallback( + (opts?: IImageExportOptions) => { + return toImage(chartRef.current?.chartContainer, { + background: theme.palette.white, + ...opts, + }); + }, + [theme], + ); + + React.useImperativeHandle( + props.componentRef, + () => ({ + exportAsImage, + }), + [exportAsImage], + ); + switch (data[0].type) { case 'pie': return ( ); case 'bar': @@ -108,6 +157,8 @@ export const DeclarativeChart: React.FunctionComponent = ); } else { @@ -116,6 +167,8 @@ export const DeclarativeChart: React.FunctionComponent = ); } @@ -123,6 +176,8 @@ export const DeclarativeChart: React.FunctionComponent = ); } @@ -134,17 +189,17 @@ export const DeclarativeChart: React.FunctionComponent = ); } return ( ); } @@ -152,18 +207,35 @@ export const DeclarativeChart: React.FunctionComponent = ); case 'heatmap': - return ; + return ( + + ); case 'sankey': - return ; + return ( + + ); case 'indicator': if (data?.[0]?.mode?.includes('gauge')) { return ( ); } @@ -173,10 +245,12 @@ export const DeclarativeChart: React.FunctionComponent = ); default: - return
Unsupported Schema
; + throw new Error('Unsupported chart schema'); } }); DeclarativeChart.displayName = 'DeclarativeChart'; diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 368fbda214df2..a405d1a78cd83 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -259,7 +259,6 @@ export const transformPlotlyJsonToVBCProps = ( chartTitle: typeof layout?.title === 'string' ? layout?.title : '', // width: layout?.width, // height: layout?.height, - hideLegend: true, barWidth: 24, supportNegativeData: true, }; @@ -391,6 +390,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr domainValuesForColorScale, rangeValuesForColorScale, hideLegend: true, + showYAxisLables: true, }; }; @@ -505,11 +505,32 @@ export const transformPlotlyJsonToGaugeProps = ( }; }; +const MAX_DEPTH = 8; +export const sanitizeJson = (jsonObject: any, depth: number = 0): any => { + if (depth > MAX_DEPTH) { + throw new Error('Maximum json depth exceeded'); + } + + if (typeof jsonObject === 'object' && jsonObject !== null) { + for (const key in jsonObject) { + if (jsonObject.hasOwnProperty(key)) { + if (typeof jsonObject[key] === 'string') { + jsonObject[key] = jsonObject[key].replace(//g, '>'); + } else { + jsonObject[key] = sanitizeJson(jsonObject[key], depth + 1); + } + } + } + } + + return jsonObject; +}; + function isTypedArray(a: any) { return ArrayBuffer.isView(a) && !(a instanceof DataView); } -function isArrayOrTypedArray(a: any) { +export function isArrayOrTypedArray(a: any) { return Array.isArray(a) || isTypedArray(a); } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts new file mode 100644 index 0000000000000..a51400a5582a2 --- /dev/null +++ b/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts @@ -0,0 +1,266 @@ +import { create as d3Create, select as d3Select, Selection } from 'd3-selection'; + +/** + * {@docCategory DeclarativeChart} + */ +export interface IImageExportOptions { + width?: number; + height?: number; + scale?: number; + background?: string; +} + +export function toImage(chartContainer?: HTMLElement | null, opts: IImageExportOptions = {}): Promise { + return new Promise((resolve, reject) => { + if (!chartContainer) { + return reject(new Error('Chart container is not defined')); + } + + try { + const background = opts.background || 'white'; + const svg = toSVG(chartContainer, background); + + const svgData = new XMLSerializer().serializeToString(svg.node); + const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData))); + + svgToPng(svgDataUrl, { + width: opts.width || svg.width, + height: opts.height || svg.height, + scale: opts.scale, + }) + .then(resolve) + .catch(reject); + } catch (err) { + return reject(err); + } + }); +} + +function toSVG(chartContainer: HTMLElement, background: string) { + const svg = chartContainer.querySelector('svg'); + if (!svg) { + throw new Error('SVG not found'); + } + + const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect(); + const classNames = new Set(); + const legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames); + const w1 = Math.max(svgWidth, legendGroup.width); + const h1 = svgHeight + legendGroup.height; + const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement) + .attr('width', null) + .attr('height', null) + .attr('viewBox', null); + + if (legendGroup.node) { + clonedSvg.append(() => legendGroup.node); + } + clonedSvg + .insert('rect', ':first-child') + .attr('x', 0) + .attr('y', 0) + .attr('width', w1) + .attr('height', h1) + .attr('fill', background); + + const svgElements = svg.getElementsByTagName('*'); + const styleSheets = document.styleSheets; + const styleRules: string[] = []; + + for (let i = svgElements.length - 1; i--; ) { + svgElements[i].classList.forEach(className => { + classNames.add(`.${className}`); + }); + } + + for (let i = 0; i < styleSheets.length; i++) { + const rules = styleSheets[i].cssRules; + for (let j = 0; j < rules.length; j++) { + if (rules[j].constructor.name === 'CSSStyleRule') { + const selectorText = (rules[j] as CSSStyleRule).selectorText; + const hasClassName = selectorText.split(' ').some(word => classNames.has(word)); + + if (hasClassName) { + styleRules.push(rules[j].cssText); + } + } + } + } + + const xmlDocument = new DOMParser().parseFromString('', 'image/svg+xml'); + const styleNode = xmlDocument.createCDATASection(styleRules.join(' ')); + 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}`); + + return { + node: clonedSvg.node()!, + width: w1, + height: h1, + }; +} + +function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHeight: number, classNames: Set) { + const legendButtons = chartContainer.querySelectorAll(` + button[class^="legend-"], + [class^="legendContainer-"] div[class^="overflowIndicationTextStyle-"], + [class^="legendsContainer-"] div[class^="overflowIndicationTextStyle-"] + `); + if (legendButtons.length === 0) { + return { + node: null, + width: 0, + height: 0, + }; + } + + const legendGroup = d3Create('svg:g'); + let legendX = 0; + let legendY = 8; + let legendLine: Selection[] = []; + const legendLines: (typeof legendLine)[] = []; + const legendLineWidths: number[] = []; + + for (let i = 0; i < legendButtons.length; i++) { + const { width: legendWidth } = legendButtons[i].getBoundingClientRect(); + const legendItem = legendGroup.append('g'); + + legendLine.push(legendItem); + if (legendX + legendWidth > svgWidth && legendLine.length > 1) { + legendLine.pop(); + legendLines.push(legendLine); + legendLineWidths.push(legendX); + + legendLine = [legendItem]; + legendX = 0; + legendY += 32; + } + + let legendText: HTMLDivElement | null; + let textOffset = 0; + + if (legendButtons[i].tagName.toLowerCase() === 'button') { + const legendRect = legendButtons[i].querySelector('[class^="rect"]'); + const { backgroundColor: legendColor, borderColor: legendBorderColor } = getComputedStyle(legendRect!); + + legendText = legendButtons[i].querySelector('[class^="text"]'); + legendText!.classList.forEach(className => classNames.add(`.${className}`)); + legendItem + .append('rect') + .attr('x', legendX + 8) + .attr('y', svgHeight + legendY + 8) + .attr('width', 12) + .attr('height', 12) + .attr('fill', legendColor) + .attr('stroke-width', 1) + .attr('stroke', legendBorderColor); + textOffset = 28; + } else { + legendText = legendButtons[i] as HTMLDivElement; + legendText.classList.forEach(className => classNames.add(`.${className}`)); + textOffset = 8; + } + + legendItem + .append('text') + .attr('x', legendX + textOffset) + .attr('y', svgHeight + legendY + 8) + .attr('dominant-baseline', 'hanging') + .attr('class', legendText!.getAttribute('class')) + .text(legendText!.textContent); + legendX += legendWidth; + } + + legendLines.push(legendLine); + legendLineWidths.push(legendX); + legendY += 32; + + const centerLegends = true; + if (centerLegends) { + legendLines.forEach((ln, idx) => { + const offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0); + ln.forEach(item => { + item.attr('transform', `translate(${offsetX}, 0)`); + }); + }); + } + + return { + node: legendGroup.node(), + width: Math.max(...legendLineWidths), + height: legendY, + }; +} + +function svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise { + return new Promise((resolve, reject) => { + const scale = opts.scale || 1; + const w0 = opts.width || 300; + const h0 = opts.height || 150; + const w1 = scale * w0; + const h1 = scale * h0; + + const canvas = document.createElement('canvas'); + const img = new Image(); + + canvas.width = w1; + canvas.height = h1; + + img.onload = function () { + const ctx = canvas.getContext('2d'); + if (!ctx) { + return reject(new Error('Canvas context is null')); + } + + ctx.clearRect(0, 0, w1, h1); + ctx.drawImage(img, 0, 0, w1, h1); + + const imgData = canvas.toDataURL('image/png'); + resolve(imgData); + }; + + img.onerror = function (err) { + reject(err); + }; + + img.src = svgDataUrl; + }); +} + +const hex2 = /^[\da-f]{2}$/i; +const hex4 = /^[\da-f]{4}$/i; + +/** + * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library. + * + * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js} + */ +function unescapePonyfill(str: string) { + let result = ''; + const length = str.length; + let index = 0; + let chr; + let part; + while (index < length) { + chr = str.charAt(index++); + if (chr === '%') { + if (str.charAt(index) === 'u') { + part = str.slice(index + 1, index + 5); + if (hex4.exec(part)) { + result += String.fromCharCode(parseInt(part, 16)); + index += 5; + continue; + } + } else { + part = str.slice(index, index + 2); + if (hex2.exec(part)) { + result += String.fromCharCode(parseInt(part, 16)); + index += 2; + continue; + } + } + } + result += chr; + } + return result; +} diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/index.ts b/packages/charts/react-charting/src/components/DeclarativeChart/index.ts new file mode 100644 index 0000000000000..64d5b58644526 --- /dev/null +++ b/packages/charts/react-charting/src/components/DeclarativeChart/index.ts @@ -0,0 +1,2 @@ +export * from './DeclarativeChart'; +export type { IImageExportOptions } from './imageExporter'; diff --git a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx index 7d7baef968045..ff1b9a261948b 100644 --- a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx +++ b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx @@ -31,12 +31,11 @@ export class Arc extends React.Component { } public render(): JSX.Element { - const { arc, href, focusedArcId } = this.props; + const { arc, href, focusedArcId, activeArc } = this.props; const getClassNames = classNamesFunction(); const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\s+/, '') + this.props.data!.data.data; const opacity: number = - this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '' ? 1 : 0.1; - + activeArc && activeArc.length > 0 ? (activeArc.includes(this.props.data?.data.legend!) ? 1 : 0.1) : 1; const startAngle = this.props.data?.startAngle ?? 0; const endAngle = (this.props.data?.endAngle ?? 0) - startAngle; const cornerRadius = this.props.roundCorners ? 3 : 0; @@ -70,7 +69,9 @@ export class Arc extends React.Component { d={arc.cornerRadius(cornerRadius)(this.props.data)} onFocus={this._onFocus.bind(this, this.props.data!.data, id)} className={classNames.root} - data-is-focusable={this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === ''} + data-is-focusable={ + this._shouldHighlightArc(this.props.data!.data.legend!) || this.props.activeArc?.length === 0 + } onMouseOver={this._hoverOn.bind(this, this.props.data!.data)} onMouseMove={this._hoverOn.bind(this, this.props.data!.data)} onMouseLeave={this._hoverOff} @@ -123,13 +124,18 @@ export class Arc extends React.Component { return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`; }; - private _renderArcLabel = (className: string) => { - const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props; + private _shouldHighlightArc = (legend?: string): boolean => { + const { activeArc } = this.props; + // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active. + return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend); + }; + private _renderArcLabel = (className: string) => { + const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels } = this.props; if ( hideLabels || Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 || - (activeArc !== data!.data.legend && activeArc !== '') + !this._shouldHighlightArc(data!.data.legend!) ) { return null; } diff --git a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.types.ts b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.types.ts index 6de0cdd0afc77..6bff5071cd7e6 100644 --- a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.types.ts +++ b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.types.ts @@ -73,7 +73,7 @@ export interface IArcProps { /** * Active Arc for chart */ - activeArc?: string; + activeArc?: string[]; /** * internal prop for href diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx index e531b39dd3fe7..e1bdcc6cef078 100644 --- a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx +++ b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, initializeComponentRef } from '@fluentui/react/lib/Utilities'; import { ScaleOrdinal } from 'd3-scale'; import { IProcessedStyleSet } from '@fluentui/react/lib/Styling'; import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; @@ -9,6 +9,7 @@ import { Pie } from './Pie/index'; import { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index'; import { getAccessibleDataObject, getColorFromToken, getNextColor, getNextGradient } from '../../utilities/index'; import { convertToLocaleString } from '../../utilities/locale-util'; +import { IChart } from '../../types/index'; const getClassNames = classNamesFunction(); const LEGEND_CONTAINER_HEIGHT = 40; @@ -24,12 +25,12 @@ export interface IDonutChartState { xCalloutValue?: string; yCalloutValue?: string; focusedArcId?: string; - selectedLegend: string; dataPointCalloutProps?: IChartDataPoint; callOutAccessibilityData?: IAccessibilityProps; + selectedLegends: string[]; } -export class DonutChartBase extends React.Component { +export class DonutChartBase extends React.Component implements IChart { public static defaultProps: Partial = { innerRadius: 0, hideLabels: true, @@ -63,18 +64,21 @@ export class DonutChartBase extends React.Component d.data! >= 0)); const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!); - return !this._isChartEmpty() ? (
{ this.setState({ showHover: false, @@ -240,23 +256,17 @@ export class DonutChartBase extends React.Component { - if (this.state.selectedLegend === point.legend) { - this.setState({ selectedLegend: '' }); - } else { - this.setState({ selectedLegend: point.legend! }); - } - }, hoverAction: () => { this._handleChartMouseLeave(); this.setState({ activeLegend: point.legend! }); }, onMouseOutAction: () => { - this.setState({ activeLegend: '' }); + this.setState({ activeLegend: undefined }); }, }; return legend; }); + const legends = ( ); return legends; } + private _onLegendSelectionChange( + selectedLegends: string[], + event: React.MouseEvent, + currentLegend?: ILegend, + ): void { + if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) { + this.setState({ selectedLegends }); + } else { + this.setState({ selectedLegends: selectedLegends.slice(-1) }); + } + if (this.props.legendProps?.onChange) { + this.props.legendProps.onChange(selectedLegends, event, currentLegend); + } + } + private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => { this._currentHoverElement = element; this.setState({ /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */ - showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend, + showHover: this._noLegendsHighlighted() || this._isLegendHighlighted(data.legend), value: data.data!.toString(), legend: data.legend, color: data.color!, @@ -299,7 +326,7 @@ export class DonutChartBase extends React.Component { - if (point.legend === highlightedLegend || (this.state.showHover && point.legend === this.state.legend)) { - legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!; + const highlightedLegends = this._getHighlightedLegend(); + if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || this.state.showHover)) { + const pointValue = data.find(point => this._isLegendHighlighted(point.legend)); + return pointValue + ? pointValue.yAxisCalloutData + ? pointValue.yAxisCalloutData + : pointValue.data! + : valueInsideDonut; + } else if (highlightedLegends.length > 0) { + let totalValue = 0; + data.forEach(point => { + if (highlightedLegends.includes(point.legend!)) { + totalValue += point.data!; } - return; }); - return legendValue; + return totalValue; } else { return valueInsideDonut; } @@ -351,12 +384,23 @@ export class DonutChartBase extends React.Component 0 + ? this.state.selectedLegends + : this.state.activeLegend + ? [this.state.activeLegend] + : []; } + private _isLegendHighlighted = (legend: string | undefined): boolean => { + return this._getHighlightedLegend().includes(legend!); + }; + + private _noLegendsHighlighted = (): boolean => { + return this._getHighlightedLegend().length === 0; + }; + private _isChartEmpty(): boolean { return !( this.props.data && diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChart.types.ts b/packages/charts/react-charting/src/components/DonutChart/DonutChart.types.ts index ed1405d2aeca0..4adaaebb045af 100644 --- a/packages/charts/react-charting/src/components/DonutChart/DonutChart.types.ts +++ b/packages/charts/react-charting/src/components/DonutChart/DonutChart.types.ts @@ -1,8 +1,8 @@ import { IStyle } from '@fluentui/react/lib/Styling'; -import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; +import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index'; import { ICalloutProps } from '@fluentui/react/lib/Callout'; -import { IChartProps, IChartDataPoint } from './index'; +import { IChartProps, IChartDataPoint, IChart } from './index'; export interface IDonutChart {} @@ -69,6 +69,12 @@ export interface IDonutChartProps extends ICartesianChartProps { * @default false */ roundCorners?: boolean; + + /** + * Optional callback to access the IChart interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: IRefObject; } /** diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx index db7dcb00b7e58..16bb8f56bc206 100644 --- a/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx +++ b/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx @@ -18,6 +18,9 @@ describe('Donut chart interactions', () => { beforeEach(() => { sharedBeforeEach(); jest.spyOn(global.Math, 'random').mockReturnValue(0.1); + // Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like + // getComputedTextLength() which will otherwise lead to a crash if mounted + jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '20000'); }); afterEach(() => { jest.spyOn(global.Math, 'random').mockRestore(); @@ -70,7 +73,7 @@ describe('Donut chart interactions', () => { test('Should highlight the corresponding Pie on mouse over on legends', () => { // Arrange - const { container } = render(); + const { container } = render(); // Act const legend = screen.queryByText('first'); @@ -157,9 +160,6 @@ describe('Donut chart interactions', () => { }); test('Should change value inside donut with the legend value on mouseOver legend ', () => { - // Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like - // getComputedTextLength() which will otherwise lead to a crash if mounted - jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '1000'); // Arrange const { container } = render( , @@ -184,6 +184,38 @@ describe('Donut chart interactions', () => { // Assert expect(container).toMatchSnapshot(); }); + + // add test for legend multi select + test('Should select multiple legends on click', () => { + // Arrange + const { container } = render( + , + ); + + // Act + const firstLegend = screen.queryByText('first')?.closest('button'); + const secondLegend = screen.queryByText('second')?.closest('button'); + expect(firstLegend).toBeDefined(); + expect(secondLegend).toBeDefined(); + fireEvent.click(firstLegend!); + fireEvent.click(secondLegend!); + + // Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(secondLegend).toHaveAttribute('aria-selected', 'true'); + + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?first/i)[0]).toHaveStyle('opacity: 1.0'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveStyle('opacity: 1.0'); + expect(getById(container, /Pie.*?third/i)[0]).toHaveStyle('opacity: 0.1'); + }); }); describe('Donut Chart - axe-core', () => { diff --git a/packages/charts/react-charting/src/components/DonutChart/Pie/Pie.types.ts b/packages/charts/react-charting/src/components/DonutChart/Pie/Pie.types.ts index aa9ca9b2dc44a..f5629edf8aede 100644 --- a/packages/charts/react-charting/src/components/DonutChart/Pie/Pie.types.ts +++ b/packages/charts/react-charting/src/components/DonutChart/Pie/Pie.types.ts @@ -54,7 +54,7 @@ export interface IPieProps { /** * Active Arc for chart */ - activeArc?: string; + activeArc?: string[]; /** * string for callout id diff --git a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx index 87102b1ebacd3..238b14273b69a 100644 --- a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx +++ b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { arc as d3Arc } from 'd3-shape'; -import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities'; import { IGaugeChartProps, IGaugeChartSegment, @@ -26,6 +26,7 @@ import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { IYValueHover } from '../../index'; import { SVGTooltipText } from '../../utilities/SVGTooltipText'; import { select as d3Select } from 'd3-selection'; +import { IChart } from '../../types/index'; const GAUGE_MARGIN = 16; const LABEL_WIDTH = 36; @@ -120,7 +121,7 @@ export interface IExtendedSegment extends IGaugeChartSegment { end: number; } -export class GaugeChartBase extends React.Component { +export class GaugeChartBase extends React.Component implements IChart { private _classNames: IProcessedStyleSet; private _isRTL: boolean; private _innerRadius: number; @@ -136,6 +137,8 @@ export class GaugeChartBase extends React.Component { const { hideMinMax, chartTitle, sublabel } = this.props; diff --git a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.types.ts b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.types.ts index 648dc7abeca07..9374a764dc3ca 100644 --- a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.types.ts +++ b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.types.ts @@ -1,7 +1,7 @@ import { IStyle, ITheme } from '@fluentui/react/lib/Styling'; -import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; +import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { ILegendsProps } from '../Legends/index'; -import { IAccessibilityProps } from '../../types/index'; +import { IAccessibilityProps, IChart } from '../../types/index'; import { ICalloutProps } from '@fluentui/react/lib/Callout'; /** @@ -168,6 +168,12 @@ export interface IGaugeChartProps { * @default false */ roundCorners?: boolean; + + /** + * Optional callback to access the IChart interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: IRefObject; } /** diff --git a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx index a35d3ff5b7065..5463ed42f02e5 100644 --- a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx @@ -3,7 +3,14 @@ import { max as d3Max } from 'd3-array'; import { select as d3Select } from 'd3-selection'; import { Axis as D3Axis } from 'd3-axis'; import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale'; -import { classNamesFunction, getId, getRTL, memoizeFunction, warnDeprecations } from '@fluentui/react/lib/Utilities'; +import { + classNamesFunction, + getId, + getRTL, + initializeComponentRef, + memoizeFunction, + warnDeprecations, +} from '@fluentui/react/lib/Utilities'; import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { FocusZoneDirection } from '@fluentui/react-focus'; @@ -39,6 +46,7 @@ import { IRefArrayData, Legends, } from '../../index'; +import { IChart } from '../../types/index'; const COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART'; const getClassNames = classNamesFunction(); @@ -65,12 +73,13 @@ export interface IGroupedVerticalBarChartState extends IBasestate { dataPointCalloutProps?: IGVBarChartSeriesPoint; callOutAccessibilityData?: IAccessibilityProps; calloutLegend: string; + selectedLegends: string[]; } -export class GroupedVerticalBarChartBase extends React.Component< - IGroupedVerticalBarChartProps, - IGroupedVerticalBarChartState -> { +export class GroupedVerticalBarChartBase + extends React.Component + implements IChart +{ public static defaultProps: Partial = { maxBarWidth: 24, }; @@ -100,16 +109,20 @@ export class GroupedVerticalBarChartBase extends React.Component< private _groupWidth: number; private _xAxisInnerPadding: number; private _xAxisOuterPadding: number; + private _cartesianChartRef: React.RefObject; public constructor(props: IGroupedVerticalBarChartProps) { super(props); + + initializeComponentRef(this); + this._createSet = memoizeFunction((data: IGroupedVerticalBarChartData[]) => this._createDataSetOfGVBC(data)); this.state = { color: '', dataForHoverCard: 0, isCalloutVisible: false, refSelected: null, - selectedLegend: props.legendProps?.selectedLegend ?? '', + selectedLegends: props.legendProps?.selectedLegends || [], xCalloutValue: '', yCalloutValue: '', YValueHover: [], @@ -129,6 +142,15 @@ export class GroupedVerticalBarChartBase extends React.Component< this._tooltipId = getId('GVBCTooltipId_'); this._emptyChartId = getId('_GVBC_empty'); this._domainMargin = MIN_DOMAIN_MARGIN; + this._cartesianChartRef = React.createRef(); + } + + public componentDidUpdate(prevProps: IGroupedVerticalBarChartProps): void { + if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) { + this.setState({ + selectedLegend: this.props.legendProps?.selectedLegend ?? '', + }); + } } public render(): React.ReactNode { @@ -203,6 +225,7 @@ export class GroupedVerticalBarChartBase extends React.Component< xAxisOuterPadding: this._xAxisOuterPadding, })} barwidth={this._barWidth} + ref={this._cartesianChartRef} /* eslint-disable react/jsx-no-bind */ children={() => { return {this._groupedVerticalBarGraph}; @@ -218,6 +241,10 @@ export class GroupedVerticalBarChartBase extends React.Component< ); } + public get chartContainer(): HTMLElement | null { + return this._cartesianChartRef.current?.chartContainer || null; + } + private _getMinMaxOfYAxis = () => { return { startValue: 0, endValue: 0 }; }; @@ -307,7 +334,7 @@ export class GroupedVerticalBarChartBase extends React.Component< this.setState({ refSelected: mouseEvent, /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */ - isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend, + isCalloutVisible: this._noLegendHighlighted() || this._legendHighlighted(pointData.legend), calloutLegend: pointData.legend, dataForHoverCard: pointData.data, color: pointData.color, @@ -343,7 +370,7 @@ export class GroupedVerticalBarChartBase extends React.Component< this.setState({ refSelected: obj.refElement, /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */ - isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend, + isCalloutVisible: this._noLegendHighlighted() || this._legendHighlighted(pointData.legend), calloutLegend: pointData.legend, dataForHoverCard: pointData.data, color: pointData.color, @@ -555,18 +582,6 @@ export class GroupedVerticalBarChartBase extends React.Component< }); }; - private _onLegendClick(legendTitle: string): void { - if (this.state.selectedLegend === legendTitle) { - this.setState({ - selectedLegend: '', - }); - } else { - this.setState({ - selectedLegend: legendTitle, - }); - } - } - private _onLegendHover(legendTitle: string): void { this.setState({ activeLegend: legendTitle, @@ -598,9 +613,6 @@ export class GroupedVerticalBarChartBase extends React.Component< const legend: ILegend = { title: point.legend, color, - action: () => { - this._onLegendClick(point.legend); - }, hoverAction: () => { this._handleChartMouseLeave(); this._onLegendHover(point.legend); @@ -620,10 +632,26 @@ export class GroupedVerticalBarChartBase extends React.Component< enabledWrapLines={this.props.enabledLegendsWrapLines} focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard} {...this.props.legendProps} + onChange={this._onLegendSelectionChange.bind(this)} /> ); }; + private _onLegendSelectionChange( + selectedLegends: string[], + event: React.MouseEvent, + currentLegend?: ILegend, + ): void { + if (this.props.legendProps?.canSelectMultipleLegends) { + this.setState({ selectedLegends }); + } else { + this.setState({ selectedLegends: selectedLegends.slice(-1) }); + } + if (this.props.legendProps?.onChange) { + this.props.legendProps.onChange(selectedLegends, event, currentLegend); + } + } + private _getAxisData = (yAxisData: IAxisData) => { if (yAxisData && yAxisData.yAxisDomainValues.length) { const { yAxisDomainValues: domainValue } = yAxisData; @@ -638,19 +666,24 @@ export class GroupedVerticalBarChartBase extends React.Component< * 2. hovering: if there is no selected legend and the user hovers over it */ private _legendHighlighted = (legendTitle: string) => { - return ( - this.state.selectedLegend === legendTitle || - (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle) - ); + return this._getHighlightedLegend().includes(legendTitle!); }; /** * This function checks if none of the legends is selected or hovered. */ private _noLegendHighlighted = () => { - return this.state.selectedLegend === '' && this.state.activeLegend === ''; + return this._getHighlightedLegend().length === 0; }; + private _getHighlightedLegend() { + return this.state.selectedLegends.length > 0 + ? this.state.selectedLegends + : this.state.activeLegend + ? [this.state.activeLegend] + : []; + } + private _getAriaLabel = (point: IGVBarChartSeriesPoint, xAxisPoint: string): string => { const xValue = point.xAxisCalloutData || xAxisPoint; const legend = point.legend; diff --git a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx index 5797d95beeb16..b6ed4f6f7ef09 100644 --- a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx +++ b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx @@ -139,6 +139,206 @@ const chartPoints = [ }, ]; +const dataGVBC = [ + { + name: 'Jan - Mar', + series: [ + { + key: 'series1', + data: 33000, + color: DefaultPalette.blue, + legend: '2022', + xAxisCalloutData: '2022/04/30', + yAxisCalloutData: '29%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 29%', + }, + }, + { + key: 'series2', + data: 44000, + color: DefaultPalette.green, + legend: '2023', + xAxisCalloutData: '2023/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 44%', + }, + }, + { + key: 'series3', + data: 54000, + color: DefaultPalette.red, + legend: '2024', + xAxisCalloutData: '2024/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 44%', + }, + }, + { + key: 'series4', + data: 24000, + color: DefaultPalette.yellow, + legend: '2021', + xAxisCalloutData: '2021/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 44%', + }, + }, + ], + }, + { + name: 'Apr - Jun', + series: [ + { + key: 'series1', + data: 33000, + color: DefaultPalette.blue, + legend: '2022', + xAxisCalloutData: '2022/05/30', + yAxisCalloutData: '29%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 29%', + }, + }, + { + key: 'series2', + data: 3000, + color: DefaultPalette.green, + legend: '2023', + xAxisCalloutData: '2023/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 3%', + }, + }, + { + key: 'series3', + data: 9000, + color: DefaultPalette.red, + legend: '2024', + xAxisCalloutData: '2024/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 3%', + }, + }, + { + key: 'series4', + data: 12000, + color: DefaultPalette.yellow, + legend: '2021', + xAxisCalloutData: '2021/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 3%', + }, + }, + ], + }, + + { + name: 'Jul - Sep', + series: [ + { + key: 'series1', + data: 14000, + color: DefaultPalette.blue, + legend: '2022', + xAxisCalloutData: '2022/06/30', + yAxisCalloutData: '13%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 13%', + }, + }, + { + key: 'series2', + data: 50000, + color: DefaultPalette.green, + legend: '2023', + xAxisCalloutData: '2023/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 50%', + }, + }, + { + key: 'series3', + data: 60000, + color: DefaultPalette.red, + legend: '2024', + xAxisCalloutData: '2024/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 50%', + }, + }, + { + key: 'series4', + data: 10000, + color: DefaultPalette.yellow, + legend: '2021', + xAxisCalloutData: '2021/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 50%', + }, + }, + ], + }, + { + name: 'Oct - Dec', + series: [ + { + key: 'series1', + data: 33000, + color: DefaultPalette.blue, + legend: '2022', + xAxisCalloutData: '2022/07/30', + yAxisCalloutData: '29%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 29%', + }, + }, + { + key: 'series2', + data: 3000, + color: DefaultPalette.green, + legend: '2023', + xAxisCalloutData: '2023/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 3%', + }, + }, + { + key: 'series3', + data: 6000, + color: DefaultPalette.red, + legend: '2024', + xAxisCalloutData: '2024/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 3%', + }, + }, + { + key: 'series4', + data: 15000, + color: DefaultPalette.yellow, + legend: '2021', + xAxisCalloutData: '2021/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 3%', + }, + }, + ], + }, +]; + describe('Grouped Vertical bar chart rendering', () => { beforeEach(updateChartWidthAndHeight); afterEach(sharedAfterEach); @@ -350,6 +550,40 @@ describe('Grouped vertical bar chart - Subcomponent Legends', () => { expect(bars[5]).toHaveAttribute('opacity', ''); }, ); + + testWithoutWait( + 'Should select multiple legends on click', + GroupedVerticalBarChart, + { data: dataGVBC, legendProps: { canSelectMultipleLegends: true } }, + container => { + const firstLegend = screen.queryByText('2023')?.closest('button'); + const secondLegend = screen.queryByText('2024')?.closest('button'); + + expect(firstLegend).toBeDefined(); + expect(secondLegend).toBeDefined(); + + fireEvent.click(firstLegend!); + fireEvent.click(secondLegend!); + + // Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(secondLegend).toHaveAttribute('aria-selected', 'true'); + + const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); + expect(bars[0]).toHaveAttribute('opacity', '0.1'); + expect(bars[1]).toHaveAttribute('opacity', ''); + expect(bars[2]).toHaveAttribute('opacity', ''); + expect(bars[3]).toHaveAttribute('opacity', '0.1'); + expect(bars[4]).toHaveAttribute('opacity', '0.1'); + expect(bars[5]).toHaveAttribute('opacity', ''); + expect(bars[6]).toHaveAttribute('opacity', ''); + expect(bars[7]).toHaveAttribute('opacity', '0.1'); + expect(bars[8]).toHaveAttribute('opacity', '0.1'); + expect(bars[9]).toHaveAttribute('opacity', ''); + expect(bars[10]).toHaveAttribute('opacity', ''); + expect(bars[11]).toHaveAttribute('opacity', '0.1'); + }, + ); }); describe('Grouped vertical bar chart - Subcomponent callout', () => { diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index 4aa3d4e2a2377..d9cb9969c73c7 100644 --- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -1,7 +1,7 @@ import { CartesianChart, IChildProps, IModifiedCartesianChartProps } from '../../components/CommonComponents/index'; -import { IAccessibilityProps, IHeatMapChartData, IHeatMapChartDataPoint } from '../../types/IDataPoint'; +import { IAccessibilityProps, IChart, IHeatMapChartData, IHeatMapChartDataPoint } from '../../types/IDataPoint'; import { scaleLinear as d3ScaleLinear } from 'd3-scale'; -import { classNamesFunction, getId, memoizeFunction } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, initializeComponentRef, memoizeFunction } from '@fluentui/react/lib/Utilities'; import { FocusZoneDirection } from '@fluentui/react-focus'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { IProcessedStyleSet } from '@fluentui/react/lib/Styling'; @@ -87,7 +87,7 @@ export interface IHeatMapChartState { callOutAccessibilityData?: IAccessibilityProps; } const getClassNames = classNamesFunction(); -export class HeatMapChartBase extends React.Component { +export class HeatMapChartBase extends React.Component implements IChart { private _classNames: IProcessedStyleSet; private _stringXAxisDataPoints: string[]; private _stringYAxisDataPoints: string[]; @@ -114,8 +114,14 @@ export class HeatMapChartBase extends React.Component; + public constructor(props: IHeatMapChartProps) { super(props); + + initializeComponentRef(this); + /** * below funciton creates a new data set from the prop * @data and also finds all the unique x-axis datapoints @@ -145,6 +151,15 @@ export class HeatMapChartBase extends React.Component { @@ -231,6 +248,10 @@ export class HeatMapChartBase extends React.Component { return { startValue: 0, endValue: 0 }; }; @@ -250,7 +271,7 @@ export class HeatMapChartBase extends React.Component { + this.margins = margins; + }; + private _getOpacity = (legendTitle: string): string => { const opacity = this._legendHighlighted(legendTitle) || this._noLegendHighlighted() ? '1' : '0.1'; return opacity; diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts index 178f3aa7dfa37..6593212253b7c 100644 --- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts +++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts @@ -108,6 +108,11 @@ export interface IHeatMapChartProps extends Pick - 10 + + + 10 + - 20 + + + 20 + @@ -1334,9 +1360,22 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu - yPoint p1 + + + yPoint p1 + - yPoint p2 + + + yPoint p2 + diff --git a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx index 8cb522e55edd4..ad609a82fb5a3 100644 --- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx +++ b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { max as d3Max } from 'd3-array'; import { select as d3Select } from 'd3-selection'; import { scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale'; -import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities'; import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { ILegend } from '../../components/Legends/Legends.types'; @@ -13,6 +13,7 @@ import { IHorizontalBarChartWithAxisDataPoint, IRefArrayData, IMargins, + IChart, } from '../../types/IDataPoint'; import { IChildProps, IYValueHover } from '../CommonComponents/CartesianChart.types'; import { CartesianChart } from '../CommonComponents/CartesianChart'; @@ -58,10 +59,10 @@ export interface IHorizontalBarChartWithAxisState extends IBasestate { type ColorScale = (_p?: number) => string; -export class HorizontalBarChartWithAxisBase extends React.Component< - IHorizontalBarChartWithAxisProps, - IHorizontalBarChartWithAxisState -> { +export class HorizontalBarChartWithAxisBase + extends React.Component + implements IChart +{ private _points: IHorizontalBarChartWithAxisDataPoint[]; private _barHeight: number; private _colors: string[]; @@ -77,9 +78,13 @@ export class HorizontalBarChartWithAxisBase extends React.Component< private _xAxisType: XAxisTypes; private _yAxisType: YAxisType; private _calloutAnchorPoint: IHorizontalBarChartWithAxisDataPoint | null; + private _cartesianChartRef: React.RefObject; public constructor(props: IHorizontalBarChartWithAxisProps) { super(props); + + initializeComponentRef(this); + this.state = { color: '', dataForHoverCard: 0, @@ -105,6 +110,15 @@ export class HorizontalBarChartWithAxisBase extends React.Component< this.props.data! && this.props.data!.length > 0 ? (getTypeOfAxis(this.props.data![0].y, false) as YAxisType) : YAxisType.StringAxis; + this._cartesianChartRef = React.createRef(); + } + + public componentDidUpdate(prevProps: IHorizontalBarChartWithAxisProps): void { + if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) { + this.setState({ + selectedLegend: this.props.legendProps?.selectedLegend ?? '', + }); + } } public render(): JSX.Element { @@ -163,6 +177,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component< getGraphData={this._getGraphData} getAxisData={this._getAxisData} onChartMouseLeave={this._handleChartMouseLeave} + ref={this._cartesianChartRef} /* eslint-disable react/jsx-no-bind */ children={(props: IChildProps) => { return ( @@ -175,6 +190,10 @@ export class HorizontalBarChartWithAxisBase extends React.Component< ); } + public get chartContainer(): HTMLElement | null { + return this._cartesianChartRef.current?.chartContainer || null; + } + private _getDomainNRangeValues = ( points: IHorizontalBarChartWithAxisDataPoint[], margins: IMargins, diff --git a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx index 55c0370d59076..0e1f48c853f56 100644 --- a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx +++ b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx @@ -4,7 +4,14 @@ import { select as d3Select, pointer } from 'd3-selection'; import { bisector } from 'd3-array'; import { ILegend, Legends } from '../Legends/index'; import { line as d3Line, curveLinear as d3curveLinear } from 'd3-shape'; -import { classNamesFunction, getId, find, memoizeFunction, getRTL } from '@fluentui/react/lib/Utilities'; +import { + classNamesFunction, + getId, + find, + memoizeFunction, + getRTL, + initializeComponentRef, +} from '@fluentui/react/lib/Utilities'; import { IAccessibilityProps, CartesianChart, @@ -42,6 +49,7 @@ import { createStringYAxis, formatDate, } from '../../utilities/index'; +import { IChart } from '../../types/index'; type NumericAxis = D3Axis; const getClassNames = classNamesFunction(); @@ -146,7 +154,7 @@ export interface ILineChartState extends IBasestate { activeLine: number | null; } -export class LineChartBase extends React.Component { +export class LineChartBase extends React.Component implements IChart { public static defaultProps: Partial = { enableReflow: true, useUTC: true, @@ -178,9 +186,13 @@ export class LineChartBase extends React.Component; constructor(props: ILineChartProps) { super(props); + + initializeComponentRef(this); + this.state = { hoverXValue: '', activeLegend: '', @@ -210,6 +222,7 @@ export class LineChartBase extends React.Component this._createLegends(data)); this._firstRenderOptimization = true; this._emptyChartId = getId('_LineChart_empty'); + this._cartesianChartRef = React.createRef(); props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && @@ -217,8 +230,19 @@ export class LineChartBase extends React.Component 0, + }); + } + /** note that height and width are not used to resize or set as dimesions of the chart, - * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart + * fitParentContainer is responsible for setting the height and width or resizing of the svg/chart */ if ( prevProps.height !== this.props.height || @@ -293,6 +317,7 @@ export class LineChartBase extends React.Component { @@ -349,6 +374,10 @@ export class LineChartBase extends React.Component { +export class SankeyChartBase extends React.Component implements IChart { public static defaultProps: Partial = { enableReflow: true, }; - private chartContainer: HTMLDivElement; + public chartContainer: HTMLDivElement; private _reqID: number; private readonly _calloutId: string; private readonly _linkId: string; @@ -628,6 +629,9 @@ export class SankeyChartBase extends React.Component; + + /** + * props for the callout in the chart + */ + calloutProps?: Partial; } /** diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 9e793a25b87c6..5a01b1ac417d6 100644 --- a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -9,7 +9,7 @@ import { scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime, } from 'd3-scale'; -import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities'; import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { @@ -53,6 +53,7 @@ import { formatDate, getNextGradient, } from '../../utilities/index'; +import { IChart } from '../../types/index'; enum CircleVisbility { show = 'visibility', @@ -76,7 +77,10 @@ export interface IVerticalBarChartState extends IBasestate { type ColorScale = (_p?: number) => string; -export class VerticalBarChartBase extends React.Component { +export class VerticalBarChartBase + extends React.Component + implements IChart +{ public static defaultProps: Partial = { maxBarWidth: 24, useUTC: true, @@ -102,9 +106,13 @@ export class VerticalBarChartBase extends React.Component; public constructor(props: IVerticalBarChartProps) { super(props); + + initializeComponentRef(this); + this.state = { color: '', dataForHoverCard: 0, @@ -129,6 +137,15 @@ export class VerticalBarChartBase extends React.Component { return ( @@ -230,6 +248,10 @@ export class VerticalBarChartBase extends React.Component = {}; data.forEach((point: IVerticalBarChartDataPoint, _index: number) => { let color: string = !useSingleColor ? point.color! : this._createColors()(1); @@ -1076,16 +1099,19 @@ export class VerticalBarChartBase extends React.Component { // mapping data to the format Legends component needs const legend: ILegend = { - title: point.legend!, + title: legendTitle, color, action: () => { - this._onLegendClick(point.legend!); + this._onLegendClick(legendTitle); }, hoverAction: () => { this._handleChartMouseLeave(); - this._onLegendHover(point.legend!); + this._onLegendHover(legendTitle); }, onMouseOutAction: () => { this._onLegendLeave(); diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap b/packages/charts/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap index 885b42fed8c1d..7107331244fac 100644 --- a/packages/charts/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap +++ b/packages/charts/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap @@ -14400,7 +14400,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with aria-label="undefined" aria-posinset="1" aria-selected="false" - aria-setsize="4" + aria-setsize="1" class= { @@ -14455,300 +14455,6 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
-
- -
-
- -
-
- -
-
-
diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 7e1dc04719647..a8ac01812bc96 100644 --- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -9,7 +9,14 @@ import { scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime, } from 'd3-scale'; -import { classNamesFunction, getId, getRTL, warnDeprecations, memoizeFunction } from '@fluentui/react/lib/Utilities'; +import { + classNamesFunction, + getId, + getRTL, + warnDeprecations, + memoizeFunction, + initializeComponentRef, +} from '@fluentui/react/lib/Utilities'; import { IPalette, IProcessedStyleSet } from '@fluentui/react/lib/Styling'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { ILegend, Legends } from '../Legends/index'; @@ -53,6 +60,7 @@ import { formatDate, getNextGradient, } from '../../utilities/index'; +import { IChart } from '../../types/index'; const getClassNames = classNamesFunction(); type NumericAxis = D3Axis; @@ -93,11 +101,12 @@ export interface IVerticalStackedBarChartState extends IBasestate { activeXAxisDataPoint: number | string | Date; callOutAccessibilityData?: IAccessibilityProps; calloutLegend: string; + selectedLegends: string[]; } -export class VerticalStackedBarChartBase extends React.Component< - IVerticalStackedBarChartProps, - IVerticalStackedBarChartState -> { +export class VerticalStackedBarChartBase + extends React.Component + implements IChart +{ public static defaultProps: Partial = { maxBarWidth: 24, useUTC: true, @@ -123,13 +132,17 @@ export class VerticalStackedBarChartBase extends React.Component< private _emptyChartId: string; private _xAxisInnerPadding: number; private _xAxisOuterPadding: number; + private _cartesianChartRef: React.RefObject; public constructor(props: IVerticalStackedBarChartProps) { super(props); + + initializeComponentRef(this); + this.state = { isCalloutVisible: false, - selectedLegend: props.legendProps?.selectedLegend ?? '', - activeLegend: '', + selectedLegends: props.legendProps?.selectedLegends || [], + activeLegend: undefined, refSelected: null, dataForHoverCard: 0, color: '', @@ -154,9 +167,16 @@ export class VerticalStackedBarChartBase extends React.Component< this._createLegendsForLine = memoizeFunction((data: IVerticalStackedChartProps[]) => this._getLineLegends(data)); this._emptyChartId = getId('_VSBC_empty'); this._domainMargin = MIN_DOMAIN_MARGIN; + this._cartesianChartRef = React.createRef(); } public componentDidUpdate(prevProps: IVerticalStackedBarChartProps): void { + if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) { + this.setState({ + selectedLegend: this.props.legendProps?.selectedLegend ?? '', + }); + } + if ( prevProps.height !== this.props.height || prevProps.width !== this.props.width || @@ -238,6 +258,7 @@ export class VerticalStackedBarChartBase extends React.Component< xAxisInnerPadding: this._xAxisInnerPadding, xAxisOuterPadding: this._xAxisOuterPadding, })} + ref={this._cartesianChartRef} /* eslint-disable react/jsx-no-bind */ children={(props: IChildProps) => { return ( @@ -269,6 +290,10 @@ export class VerticalStackedBarChartBase extends React.Component< ); } + public get chartContainer(): HTMLElement | null { + return this._cartesianChartRef.current?.chartContainer || null; + } + /** * This function tells us what to focus either the whole stack as focusable item. * or each individual item in the stack as focusable item. basically it depends @@ -281,7 +306,7 @@ export class VerticalStackedBarChartBase extends React.Component< const { isCalloutForStack = false } = this.props; let shouldFocusStackOnly: boolean = false; if (_isHavingLines) { - if (this.state.selectedLegend !== '') { + if (this._getHighlightedLegend().length === 1) { shouldFocusStackOnly = false; } else { shouldFocusStackOnly = true; @@ -380,7 +405,7 @@ export class VerticalStackedBarChartBase extends React.Component< const xScaleBandwidthTranslate = this._xAxisType !== XAxisTypes.StringAxis ? 0 : xScale.bandwidth() / 2; Object.keys(lineObject).forEach((item: string, index: number) => { - const shouldHighlight = this._legendHighlighted(item) || this._noLegendHighlighted(); // item is legend name + const shouldHighlight = this._isLegendHighlighted(item) || this._noLegendHighlighted(); // item is legend name for (let i = 1; i < lineObject[item].length; i++) { const x1 = xScale(lineObject[item][i - 1].xItem.xAxisPoint); const useSecondaryYScale = @@ -418,7 +443,7 @@ export class VerticalStackedBarChartBase extends React.Component< strokeLinecap="round" stroke={lineObject[item][i].color} transform={`translate(${xScaleBandwidthTranslate}, 0)`} - {...(this.state.selectedLegend === item && { + {...(this._isLegendHighlighted(item) && { onMouseOver: this._lineHover.bind(this, lineObject[item][i - 1]), onMouseLeave: this._lineHoverOut, })} @@ -438,11 +463,11 @@ export class VerticalStackedBarChartBase extends React.Component< circlePoint.useSecondaryYScale && secondaryYScale ? secondaryYScale(circlePoint.y) : yScale(circlePoint.y) } onMouseOver={ - this.state.selectedLegend === item + this._isLegendHighlighted(item) ? this._lineHover.bind(this, circlePoint) : this._onStackHover.bind(this, circlePoint.xItem) } - {...(this.state.selectedLegend === item && { + {...(this._isLegendHighlighted(item) && { onMouseLeave: this._lineHoverOut, })} r={this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius} @@ -454,7 +479,7 @@ export class VerticalStackedBarChartBase extends React.Component< // When no legend is highlighted: Line points are automatically displayed along with the bars // at the same x-axis point in the stack callout. So to prevent an increase in focusable elements // and avoid conveying duplicate info, make these line points non-focusable. - data-is-focusable={this._legendHighlighted(item)} + data-is-focusable={this._isLegendHighlighted(item)} ref={e => (circleRef.refElement = e)} onFocus={this._lineFocus.bind(this, circlePoint, circleRef)} onBlur={this._lineHoverOut} @@ -475,11 +500,11 @@ export class VerticalStackedBarChartBase extends React.Component< xAxisPoint: string | number | Date, legend: string, ): { visibility: CircleVisbility; radius: number } => { - const { selectedLegend, activeXAxisDataPoint } = this.state; - if (selectedLegend !== '') { - if (xAxisPoint === activeXAxisDataPoint && selectedLegend === legend) { + const { activeXAxisDataPoint } = this.state; + if (!this._noLegendHighlighted()) { + if (xAxisPoint === activeXAxisDataPoint && this._isLegendHighlighted(legend)) { return { visibility: CircleVisbility.show, radius: 8 }; - } else if (selectedLegend === legend) { + } else if (this._isLegendHighlighted(legend)) { return { visibility: CircleVisbility.show, radius: 0.3 }; } else { return { visibility: CircleVisbility.hide, radius: 0 }; @@ -549,18 +574,6 @@ export class VerticalStackedBarChartBase extends React.Component< : null; }; - private _onLegendClick(legendTitle: string): void { - if (this.state.selectedLegend === legendTitle) { - this.setState({ - selectedLegend: '', - }); - } else { - this.setState({ - selectedLegend: legendTitle, - }); - } - } - private _onLegendHover(legendTitle: string): void { this.setState({ activeLegend: legendTitle, @@ -569,7 +582,7 @@ export class VerticalStackedBarChartBase extends React.Component< private _onLegendLeave(): void { this.setState({ - activeLegend: '', + activeLegend: undefined, }); } @@ -604,9 +617,6 @@ export class VerticalStackedBarChartBase extends React.Component< const legend: ILegend = { title: point.legend, color, - action: () => { - this._onLegendClick(point.legend); - }, hoverAction: allowHoverOnLegend ? () => { this._handleChartMouseLeave(); @@ -626,9 +636,6 @@ export class VerticalStackedBarChartBase extends React.Component< title: point.title, color: point.color, isLineLegendInBarChart: true, - action: () => { - this._onLegendClick(point.title); - }, hoverAction: allowHoverOnLegend ? () => { this._handleChartMouseLeave(); @@ -649,10 +656,34 @@ export class VerticalStackedBarChartBase extends React.Component< focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard} overflowText={this.props.legendsOverflowText} {...this.props.legendProps} + onChange={this._onLegendSelectionChange.bind(this)} /> ); } + private _onLegendSelectionChange( + selectedLegends: string[], + event: React.MouseEvent, + currentLegend?: ILegend, + ): void { + if (this.props.legendProps?.canSelectMultipleLegends) { + this.setState({ selectedLegends }); + } else { + this.setState({ selectedLegends: selectedLegends.slice(-1) }); + } + if (this.props.legendProps?.onChange) { + this.props.legendProps.onChange(selectedLegends, event, currentLegend); + } + } + + private _getHighlightedLegend() { + return this.state.selectedLegends.length > 0 + ? this.state.selectedLegends + : this.state.activeLegend + ? [this.state.activeLegend] + : []; + } + private _onRectHover( xAxisPoint: string, point: IVSChartDataPoint, @@ -680,7 +711,7 @@ export class VerticalStackedBarChartBase extends React.Component< * Show the callout if highlighted bar is focused/hovered * and Hide it if unhighlighted bar is focused/hovered */ - isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend, + isCalloutVisible: this._noLegendHighlighted() || this._isLegendHighlighted(point.legend), calloutLegend: point.legend, dataForHoverCard: point.data, color, @@ -734,6 +765,13 @@ export class VerticalStackedBarChartBase extends React.Component< stack: IVerticalStackedChartProps, refSelected: React.MouseEvent | SVGGElement, ): void { + if (!this._noLegendHighlighted()) { + stack = { + ...stack, + chartData: stack.chartData.filter(dataPoint => this._isLegendHighlighted(dataPoint.legend)), + lineData: stack.lineData?.filter(dataPoint => this._isLegendHighlighted(dataPoint.legend)), + }; + } const lineData = stack.lineData; const isLinesPresent: boolean = lineData !== undefined && lineData.length > 0; if (isLinesPresent) { @@ -742,9 +780,10 @@ export class VerticalStackedBarChartBase extends React.Component< item.shouldDrawBorderBottom = true; }); } + this.setState({ refSelected, - isCalloutVisible: true, + isCalloutVisible: stack.chartData.length > 0 || (stack.lineData?.length ?? 0) > 0, YValueHover: isLinesPresent ? [...lineData!.sort((a, b) => (a.data! < b.data! ? 1 : -1)), ...stack.chartData.slice().reverse()] : stack.chartData.slice().reverse(), @@ -870,7 +909,7 @@ export class VerticalStackedBarChartBase extends React.Component< const ref: IRefArrayData = {}; - const shouldHighlight = this._legendHighlighted(point.legend) || this._noLegendHighlighted() ? true : false; + const shouldHighlight = this._isLegendHighlighted(point.legend) || this._noLegendHighlighted() ? true : false; this._classNames = getClassNames(this.props.styles!, { theme: this.props.theme!, shouldHighlight, @@ -977,7 +1016,7 @@ export class VerticalStackedBarChartBase extends React.Component< barLabel = barTotalValue; } else { barsToDisplay.forEach(point => { - if (this._legendHighlighted(point.legend)) { + if (this._isLegendHighlighted(point.legend)) { showLabel = true; barLabel += point.data; } @@ -1103,18 +1142,15 @@ export class VerticalStackedBarChartBase extends React.Component< * 1. selection: if the user clicks on it * 2. hovering: if there is no selected legend and the user hovers over it */ - private _legendHighlighted = (legendTitle: string) => { - return ( - this.state.selectedLegend === legendTitle || - (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle) - ); + private _isLegendHighlighted = (legendTitle: string): boolean => { + return this._getHighlightedLegend().includes(legendTitle); }; /** * This function checks if none of the legends is selected or hovered. */ private _noLegendHighlighted = () => { - return this.state.selectedLegend === '' && this.state.activeLegend === ''; + return this._getHighlightedLegend().length === 0; }; private _getAriaLabel = (singleChartData: IVerticalStackedChartProps, point?: IVSChartDataPoint): string => { diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx index d3a36f9ac55d9..025dc39d66596 100644 --- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx +++ b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx @@ -503,13 +503,30 @@ describe('Vertical stacked bar chart - Subcomponent Legends', () => { { data: simplePointsWithLine, calloutProps: { doNotLayer: true } }, container => { // eslint-disable-next-line - const handleMouseClick = jest.spyOn(VerticalStackedBarChartBase.prototype as any, '_onLegendClick'); + const handleMouseClick = jest.spyOn(VerticalStackedBarChartBase.prototype as any, '_onLegendSelectionChange'); const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button'); fireEvent.click(legends[0]); // Assert expect(handleMouseClick).toHaveBeenCalled(); }, ); + + testWithoutWait( + 'Should select multiple legends on click', + VerticalStackedBarChart, + { data: simplePoints, legendProps: { canSelectMultipleLegends: true }, calloutProps: { doNotLayer: true } }, + container => { + const firstLegend = screen.queryByText('Metadata1')?.closest('button'); + const secondLegend = screen.queryByText('Metadata2')?.closest('button'); + expect(firstLegend).toBeDefined(); + expect(secondLegend).toBeDefined(); + fireEvent.click(firstLegend!); + fireEvent.click(secondLegend!); + //Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(secondLegend).toHaveAttribute('aria-selected', 'true'); + }, + ); }); describe('Vertical stacked bar chart - Subcomponent callout', () => { diff --git a/packages/charts/react-charting/src/index.ts b/packages/charts/react-charting/src/index.ts index c27c09d143045..2ae3660ac7f75 100644 --- a/packages/charts/react-charting/src/index.ts +++ b/packages/charts/react-charting/src/index.ts @@ -97,6 +97,7 @@ export type { IVerticalStackedChartProps, SLink, SNode, + IChart, } from './types/index'; export type { IChartHoverCardProps, @@ -135,7 +136,7 @@ export { DataVizPalette, getColorFromToken, getNextColor } from './utilities/col export { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients'; export type { IGaugeChartProps, IGaugeChartSegment, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart'; export { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart'; -export type { DeclarativeChartProps, Schema } from './DeclarativeChart'; +export type { DeclarativeChartProps, Schema, IDeclarativeChart, IImageExportOptions } from './DeclarativeChart'; export { DeclarativeChart } from './DeclarativeChart'; import './version'; diff --git a/packages/charts/react-charting/src/types/IDataPoint.ts b/packages/charts/react-charting/src/types/IDataPoint.ts index 7e4127b26f2ee..dda593a408f4f 100644 --- a/packages/charts/react-charting/src/types/IDataPoint.ts +++ b/packages/charts/react-charting/src/types/IDataPoint.ts @@ -814,3 +814,10 @@ export interface ICustomizedCalloutData { x: number | string | Date; values: ICustomizedCalloutDataPoint[]; } + +/** + * {@docCategory Chart} + */ +export interface IChart { + chartContainer: HTMLElement | null; +} diff --git a/packages/codemods/CHANGELOG.json b/packages/codemods/CHANGELOG.json index 909e250cea9cd..2056607f1acf2 100644 --- a/packages/codemods/CHANGELOG.json +++ b/packages/codemods/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/codemods", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:57 GMT", + "tag": "@fluentui/codemods_v8.4.27", + "version": "8.4.27", + "comments": { + "patch": [ + { + "author": "olfedias@microsoft.com", + "package": "@fluentui/codemods", + "commit": "dc7bb663e3d93a19b611cf1892556d69c57b1269", + "comment": "chore: remove usage of \"export *\"" + } + ] + } + }, { "date": "Thu, 11 Jul 2024 07:33:36 GMT", "tag": "@fluentui/codemods_v8.4.26", diff --git a/packages/codemods/CHANGELOG.md b/packages/codemods/CHANGELOG.md index 4a1409ea50e39..6548074ea7a59 100644 --- a/packages/codemods/CHANGELOG.md +++ b/packages/codemods/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/codemods -This log was last generated on Tue, 09 Jul 2024 07:36:39 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:57 GMT and should not be manually modified. +## [8.4.27](https://github.com/microsoft/fluentui/tree/@fluentui/codemods_v8.4.27) + +Mon, 23 Dec 2024 07:22:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/codemods_v8.4.26..@fluentui/codemods_v8.4.27) + +### Patches + +- chore: remove usage of "export *" ([PR #33448](https://github.com/microsoft/fluentui/pull/33448) by olfedias@microsoft.com) + ## [8.4.26](https://github.com/microsoft/fluentui/tree/@fluentui/codemods_v8.4.26) Tue, 09 Jul 2024 07:36:39 GMT diff --git a/packages/codemods/package.json b/packages/codemods/package.json index 1db4b8f33dea6..27f6a4cb2f7ab 100644 --- a/packages/codemods/package.json +++ b/packages/codemods/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/codemods", - "version": "8.4.26", + "version": "8.4.27", "description": "Tool enabling easy upgrades to new Fluent UI versions", "main": "lib-commonjs/index.js", "typings": "lib-commonjs/index.d.ts", diff --git a/packages/common-styles/package.json b/packages/common-styles/package.json index f0885441ef4be..967855f1ddef0 100644 --- a/packages/common-styles/package.json +++ b/packages/common-styles/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/common-styles", - "version": "1.2.64", + "version": "1.2.65", "description": "Common style definitions for Fluent UI React components", "repository": { "type": "git", diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json index cd7b601762174..ee7822c53498d 100644 --- a/packages/cra-template/package.json +++ b/packages/cra-template/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/cra-template", - "version": "8.4.191", + "version": "8.4.192", "description": "Create React App template for Fluent UI React (@fluentui/react)", "repository": { "type": "git", diff --git a/packages/fluent2-theme/CHANGELOG.json b/packages/fluent2-theme/CHANGELOG.json index c3eb267246098..89f6555b6712d 100644 --- a/packages/fluent2-theme/CHANGELOG.json +++ b/packages/fluent2-theme/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/fluent2-theme", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.119", + "version": "8.107.119", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/fluent2-theme_v8.107.118", diff --git a/packages/fluent2-theme/CHANGELOG.md b/packages/fluent2-theme/CHANGELOG.md index b12fed6710f4d..218220c278046 100644 --- a/packages/fluent2-theme/CHANGELOG.md +++ b/packages/fluent2-theme/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/fluent2-theme -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.107.119](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.119) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.118..@fluentui/fluent2-theme_v8.107.119) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.107.118](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.118) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/fluent2-theme/package.json b/packages/fluent2-theme/package.json index 21281ce32040f..ce8b5b9ad32cf 100644 --- a/packages/fluent2-theme/package.json +++ b/packages/fluent2-theme/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/fluent2-theme", - "version": "8.107.118", + "version": "8.107.119", "description": "A Fluent2 theme for Fluent UI React 8.x", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.2", "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } diff --git a/packages/font-icons-mdl2/CHANGELOG.json b/packages/font-icons-mdl2/CHANGELOG.json index c3c1f5f6eb79e..cda94a3050c54 100644 --- a/packages/font-icons-mdl2/CHANGELOG.json +++ b/packages/font-icons-mdl2/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/font-icons-mdl2", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/font-icons-mdl2_v8.5.57", + "version": "8.5.57", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/font-icons-mdl2", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/font-icons-mdl2_v8.5.56", diff --git a/packages/font-icons-mdl2/CHANGELOG.md b/packages/font-icons-mdl2/CHANGELOG.md index c9b879908dd1e..caae1ea746007 100644 --- a/packages/font-icons-mdl2/CHANGELOG.md +++ b/packages/font-icons-mdl2/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/font-icons-mdl2 -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.5.57](https://github.com/microsoft/fluentui/tree/@fluentui/font-icons-mdl2_v8.5.57) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/font-icons-mdl2_v8.5.56..@fluentui/font-icons-mdl2_v8.5.57) + +### Patches + +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.5.56](https://github.com/microsoft/fluentui/tree/@fluentui/font-icons-mdl2_v8.5.56) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/font-icons-mdl2/package.json b/packages/font-icons-mdl2/package.json index 31cc66ab231ae..c1b5b5a4e4bac 100644 --- a/packages/font-icons-mdl2/package.json +++ b/packages/font-icons-mdl2/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/font-icons-mdl2", - "version": "8.5.56", + "version": "8.5.57", "description": "Fluent UI React icon set.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ }, "dependencies": { "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, diff --git a/packages/foundation-legacy/CHANGELOG.json b/packages/foundation-legacy/CHANGELOG.json index e4ea346e5508c..d7708bd4ff75a 100644 --- a/packages/foundation-legacy/CHANGELOG.json +++ b/packages/foundation-legacy/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/foundation-legacy", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/foundation-legacy_v8.4.23", + "version": "8.4.23", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/foundation-legacy_v8.4.22", diff --git a/packages/foundation-legacy/CHANGELOG.md b/packages/foundation-legacy/CHANGELOG.md index c80687b70d060..ed3c079575ece 100644 --- a/packages/foundation-legacy/CHANGELOG.md +++ b/packages/foundation-legacy/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/foundation-legacy -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.4.23](https://github.com/microsoft/fluentui/tree/@fluentui/foundation-legacy_v8.4.23) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/foundation-legacy_v8.4.22..@fluentui/foundation-legacy_v8.4.23) + +### Patches + +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.4.22](https://github.com/microsoft/fluentui/tree/@fluentui/foundation-legacy_v8.4.22) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/foundation-legacy/package.json b/packages/foundation-legacy/package.json index 947bc28531dd6..f36c7e4806ad9 100644 --- a/packages/foundation-legacy/package.json +++ b/packages/foundation-legacy/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/foundation-legacy", - "version": "8.4.22", + "version": "8.4.23", "description": "Legacy utilities for building Fluent UI React components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,7 +35,7 @@ "dependencies": { "@fluentui/merge-styles": "^8.6.13", "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json index 232b8ff065b87..1f7233662aa52 100644 --- a/packages/react-cards/CHANGELOG.json +++ b/packages/react-cards/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-cards", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-cards_v0.205.191", + "version": "0.205.191", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/foundation-legacy to v8.4.23", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-cards_v0.205.190", diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md index cadec79291f3e..6b47697a3ed42 100644 --- a/packages/react-cards/CHANGELOG.md +++ b/packages/react-cards/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-cards -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [0.205.191](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.191) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.190..@fluentui/react-cards_v0.205.191) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/foundation-legacy to v8.4.23 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [0.205.190](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.190) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json index 8c58a51a68bec..9ab5eee1ce962 100644 --- a/packages/react-cards/package.json +++ b/packages/react-cards/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-cards", - "version": "0.205.190", + "version": "0.205.191", "description": "Deprecated experimental Card container components for Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -33,8 +33,8 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", - "@fluentui/foundation-legacy": "^8.4.22", + "@fluentui/react": "^8.122.2", + "@fluentui/foundation-legacy": "^8.4.23", "@fluentui/set-version": "^8.2.23", "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^2.1.0" diff --git a/packages/react-components/react-message-bar/library/package.json b/packages/react-components/react-message-bar/library/package.json index f4091aa19bfce..4fd78689ddb5a 100644 --- a/packages/react-components/react-message-bar/library/package.json +++ b/packages/react-components/react-message-bar/library/package.json @@ -21,8 +21,8 @@ "@fluentui/react-button": "^9.3.98", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-jsx-runtime": "^9.0.48", - "@fluentui/react-motion": "^9.6.4", - "@fluentui/react-motion-components-preview": "^0.4.0", + "@fluentui/react-motion": "^9.6.5", + "@fluentui/react-motion-components-preview": "^0.4.1", "@fluentui/react-shared-contexts": "^9.21.2", "@fluentui/react-link": "^9.3.5", "@fluentui/react-theme": "^9.1.24", diff --git a/packages/react-components/react-migration-v8-v9/library/package.json b/packages/react-components/react-migration-v8-v9/library/package.json index 05702c7ce4348..f02d0b19a7977 100644 --- a/packages/react-components/react-migration-v8-v9/library/package.json +++ b/packages/react-components/react-migration-v8-v9/library/package.json @@ -19,8 +19,8 @@ }, "dependencies": { "@ctrl/tinycolor": "3.3.4", - "@fluentui/fluent2-theme": "^8.107.118", - "@fluentui/react": "^8.122.1", + "@fluentui/fluent2-theme": "^8.107.119", + "@fluentui/react": "^8.122.2", "@fluentui/react-components": "^9.56.8", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-hooks": "^8.8.16", diff --git a/packages/react-components/react-toast/stories/src/Toast/DismissAll.stories.tsx b/packages/react-components/react-toast/stories/src/Toast/DismissAll.stories.tsx index a7788ea9cc833..6bda21d352b60 100644 --- a/packages/react-components/react-toast/stories/src/Toast/DismissAll.stories.tsx +++ b/packages/react-components/react-toast/stories/src/Toast/DismissAll.stories.tsx @@ -7,7 +7,7 @@ export const DismissAll = () => { const notify = () => dispatchToast( - 'This is a toast + This is a toast , { intent: 'info' }, ); diff --git a/packages/react-date-time/CHANGELOG.json b/packages/react-date-time/CHANGELOG.json index 4fe366a2523ab..bf59d451eb37f 100644 --- a/packages/react-date-time/CHANGELOG.json +++ b/packages/react-date-time/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-date-time", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-date-time_v8.7.191", + "version": "8.7.191", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-date-time", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-date-time_v8.7.190", diff --git a/packages/react-date-time/CHANGELOG.md b/packages/react-date-time/CHANGELOG.md index 39d8f943c0233..cebff715da268 100644 --- a/packages/react-date-time/CHANGELOG.md +++ b/packages/react-date-time/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-date-time -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.7.191](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.191) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-date-time_v8.7.190..@fluentui/react-date-time_v8.7.191) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.7.190](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.190) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-date-time/package.json b/packages/react-date-time/package.json index 1e887155c4dd5..9153ceb7bfae2 100644 --- a/packages/react-date-time/package.json +++ b/packages/react-date-time/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-date-time", - "version": "8.7.190", + "version": "8.7.191", "description": "Date and time related React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.2", "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" }, diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json index 2585b860f11c5..78bf626151878 100644 --- a/packages/react-docsite-components/CHANGELOG.json +++ b/packages/react-docsite-components/CHANGELOG.json @@ -1,6 +1,63 @@ { "name": "@fluentui/react-docsite-components", "entries": [ + { + "date": "Thu, 26 Dec 2024 07:21:14 GMT", + "tag": "@fluentui/react-docsite-components_v8.13.151", + "version": "8.13.151", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.269", + "commit": "0dd9a713b54a6d5b5929ac7febd1c7e44c83efca" + } + ] + } + }, + { + "date": "Wed, 25 Dec 2024 07:21:56 GMT", + "tag": "@fluentui/react-docsite-components_v8.13.150", + "version": "8.13.150", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.268", + "commit": "fa08fec97a5bc070e2866633c792f7066f0c86e8" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-docsite-components_v8.13.149", + "version": "8.13.149", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.267", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 20 Dec 2024 07:20:01 GMT", "tag": "@fluentui/react-docsite-components_v8.13.148", diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md index 0d0d9c53d902c..f7655bfe68fee 100644 --- a/packages/react-docsite-components/CHANGELOG.md +++ b/packages/react-docsite-components/CHANGELOG.md @@ -1,9 +1,38 @@ # Change Log - @fluentui/react-docsite-components -This log was last generated on Fri, 20 Dec 2024 07:20:01 GMT and should not be manually modified. +This log was last generated on Thu, 26 Dec 2024 07:21:14 GMT and should not be manually modified. +## [8.13.151](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.151) + +Thu, 26 Dec 2024 07:21:14 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.150..@fluentui/react-docsite-components_v8.13.151) + +### Patches + +- Bump @fluentui/react-monaco-editor to v1.7.269 ([PR #33518](https://github.com/microsoft/fluentui/pull/33518) by beachball) + +## [8.13.150](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.150) + +Wed, 25 Dec 2024 07:21:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.149..@fluentui/react-docsite-components_v8.13.150) + +### Patches + +- Bump @fluentui/react-monaco-editor to v1.7.268 ([PR #33447](https://github.com/microsoft/fluentui/pull/33447) by beachball) + +## [8.13.149](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.149) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.148..@fluentui/react-docsite-components_v8.13.149) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.267 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.13.148](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.148) Fri, 20 Dec 2024 07:20:01 GMT diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json index 85d4c1e9845d1..270e70065522b 100644 --- a/packages/react-docsite-components/package.json +++ b/packages/react-docsite-components/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-docsite-components", - "version": "8.13.148", + "version": "8.13.151", "description": "Fluent UI React components for building documentation sites.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,14 +35,14 @@ "react-dom": ">=16.8.0 <19.0.0" }, "dependencies": { - "@fluentui/react": "^8.122.1", - "@fluentui/theme": "^2.6.63", + "@fluentui/react": "^8.122.2", + "@fluentui/theme": "^2.6.64", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.25", "@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.266", + "@fluentui/react-monaco-editor": "^1.7.269", "color-check": "0.0.2", "markdown-to-jsx": "^7.0.0", "office-ui-fabric-core": "^11.0.0", diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index 842f999d0a77c..e1f86fe7dba5b 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -27,27 +27,27 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/azure-themes": "^8.6.114", + "@fluentui/azure-themes": "^8.6.115", "@fluentui/date-time-utilities": "^8.6.9", "@fluentui/dom-utilities": "^2.3.9", "@fluentui/example-data": "^8.4.25", - "@fluentui/font-icons-mdl2": "^8.5.56", - "@fluentui/foundation-legacy": "^8.4.22", + "@fluentui/font-icons-mdl2": "^8.5.57", + "@fluentui/foundation-legacy": "^8.4.23", "@fluentui/merge-styles": "^8.6.13", - "@fluentui/react": "^8.122.1", - "@fluentui/react-cards": "^0.205.190", - "@fluentui/react-charting": "^5.23.28", - "@fluentui/react-docsite-components": "^8.13.148", - "@fluentui/react-experiments": "^8.14.187", - "@fluentui/react-file-type-icons": "^8.12.6", - "@fluentui/react-focus": "^8.9.19", + "@fluentui/react": "^8.122.2", + "@fluentui/react-cards": "^0.205.191", + "@fluentui/react-charting": "^5.23.31", + "@fluentui/react-docsite-components": "^8.13.151", + "@fluentui/react-experiments": "^8.14.188", + "@fluentui/react-file-type-icons": "^8.12.7", + "@fluentui/react-focus": "^8.9.20", "@fluentui/react-hooks": "^8.8.16", - "@fluentui/react-icons-mdl2": "^1.3.81", + "@fluentui/react-icons-mdl2": "^1.3.82", "@fluentui/react-window-provider": "^2.2.28", - "@fluentui/scheme-utilities": "^8.3.64", - "@fluentui/style-utilities": "^8.11.5", - "@fluentui/theme": "^2.6.63", - "@fluentui/theme-samples": "^8.7.190", + "@fluentui/scheme-utilities": "^8.3.65", + "@fluentui/style-utilities": "^8.11.6", + "@fluentui/theme": "^2.6.64", + "@fluentui/theme-samples": "^8.7.191", "@fluentui/utilities": "^8.15.19", "@microsoft/load-themed-styles": "^1.10.26", "d3-fetch": "3.0.1", diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx index e1e95218a39a9..4009fddcc5287 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -1,11 +1,39 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; -import { Toggle } from '@fluentui/react/lib/Toggle'; -import { DeclarativeChart, DeclarativeChartProps, Schema } from '@fluentui/react-charting'; +import { TextField, ITextFieldStyles } from '@fluentui/react/lib/TextField'; +import { DeclarativeChart, DeclarativeChartProps, IDeclarativeChart, Schema } from '@fluentui/react-charting'; + +interface IErrorBoundaryProps { + children: React.ReactNode; +} + +interface IErrorBoundaryState { + hasError: boolean; + error: string; +} + +class ErrorBoundary extends React.Component { + public static getDerivedStateFromError(error: Error) { + // Update state so the next render will show the fallback UI. + return { hasError: true, error: `${error.message} ${error.stack}` }; + } + + constructor(props: IErrorBoundaryProps) { + super(props); + this.state = { hasError: false, error: '' }; + } + + public render() { + if (this.state.hasError) { + return

${this.state.error}

; + } + + return this.props.children; + } +} interface IDeclarativeChartState { selectedChoice: string; - preSelectLegends: boolean; selectedLegends: string; } @@ -37,14 +65,39 @@ const schemas: any[] = [ const dropdownStyles = { dropdown: { width: 200 } }; +const textFieldStyles: Partial = { root: { maxWidth: 300 } }; + +function fileSaver(url: string) { + const saveLink = document.createElement('a'); + saveLink.href = url; + saveLink.download = 'converted-image.png'; + document.body.appendChild(saveLink); + saveLink.click(); + document.body.removeChild(saveLink); +} + export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarativeChartState> { + private _declarativeChartRef: React.RefObject; + private _lastKnownValidLegends: string[] | undefined; + constructor(props: DeclarativeChartProps) { super(props); + const defaultselection = 'donutchart'; + const selectedPlotlySchema = this._getSchemaByKey(defaultselection); + const { selectedLegends } = selectedPlotlySchema; this.state = { - selectedChoice: 'donutchart', - preSelectLegends: false, - selectedLegends: '', + selectedChoice: defaultselection, + selectedLegends: JSON.stringify(selectedLegends), }; + + this._declarativeChartRef = React.createRef(); + this._lastKnownValidLegends = selectedLegends; + } + + public componentDidMount() { + document.addEventListener('contextmenu', e => { + e.preventDefault(); + }); } public render(): JSX.Element { @@ -52,16 +105,21 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati } private _onChange = (ev: React.FormEvent, option: IDropdownOption): void => { - this.setState({ selectedChoice: option.key as string, selectedLegends: '' }); + const selectedPlotlySchema = this._getSchemaByKey(option.key as string); + const { selectedLegends } = selectedPlotlySchema; + this.setState({ selectedChoice: option.key as string, selectedLegends: JSON.stringify(selectedLegends) }); }; - private _onTogglePreselectLegends = (ev: React.MouseEvent, checked: boolean) => { - this.setState({ preSelectLegends: checked }); + private _onSelectedLegendsEdited = ( + event: React.FormEvent, + newValue?: string, + ): void => { + this.setState({ selectedLegends: newValue ?? '' }); }; private _handleChartSchemaChanged = (eventData: Schema) => { const { selectedLegends } = eventData.plotlySchema; - this.setState({ selectedLegends: selectedLegends.join(', ') }); + this.setState({ selectedLegends: JSON.stringify(selectedLegends) }); }; private _getSchemaByKey(key: string): any { @@ -70,17 +128,23 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati } private _createDeclarativeChart(): JSX.Element { - const selectedPlotlySchema = this._getSchemaByKey(this.state.selectedChoice); - const uniqueKey = `${this.state.selectedChoice}_${this.state.preSelectLegends}`; - let inputSchema: Schema = { plotlySchema: selectedPlotlySchema }; - - if (this.state.preSelectLegends === false) { - const { data, layout } = selectedPlotlySchema; - inputSchema = { plotlySchema: { data, layout } }; + const uniqueKey = `${this.state.selectedChoice}`; + const currentPlotlySchema = this._getSchemaByKey(this.state.selectedChoice); + const { data, layout } = currentPlotlySchema; + if (this.state.selectedLegends === '') { + this._lastKnownValidLegends = undefined; + } else { + try { + this._lastKnownValidLegends = JSON.parse(this.state.selectedLegends); + } catch (error) { + // Nothing to do here + } } + const plotlySchema = { data, layout, selectedLegends: this._lastKnownValidLegends }; + const inputSchema: Schema = { plotlySchema }; return ( - <> +
    -

+
- +
- Legend selection changed : {this.state.selectedLegends} - + + ); } } diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx index 71be65bd695da..ac96c767bef0e 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx @@ -14,6 +14,7 @@ import { Toggle } from '@fluentui/react/lib/Toggle'; interface IDonutChartState { enableGradient: boolean; roundCorners: boolean; + legendMultiSelect: boolean; } export class DonutChartBasicExample extends React.Component { @@ -22,6 +23,7 @@ export class DonutChartBasicExample extends React.Component +    +
); @@ -92,4 +159,8 @@ export class DonutChartBasicExample extends React.Component, checked: boolean) => { this.setState({ roundCorners: checked }); }; + + private _onToggleLegendMultiSelect = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ legendMultiSelect: checked }); + }; } diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx index d514c24099ff2..be8a4d5999a24 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx @@ -16,6 +16,7 @@ interface IGroupedBarChartState { hideLabels: boolean; enableGradient: boolean; roundCorners: boolean; + selectMultipleLegends: boolean; } export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGroupedBarChartState> { @@ -29,6 +30,7 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr hideLabels: false, enableGradient: false, roundCorners: false, + selectMultipleLegends: false, }; } @@ -60,6 +62,10 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr this.setState({ roundCorners: checked }); }; + private _onLegendMultiSelectChange = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ selectMultipleLegends: checked }); + }; + private _basicExample(): JSX.Element { const data = [ { @@ -87,6 +93,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 44%', }, }, + { + key: 'series3', + data: 54000, + color: getColorFromToken(DataVizPalette.color5), + legend: '2024', + xAxisCalloutData: '2024/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 44%', + }, + }, + { + key: 'series4', + data: 24000, + color: getColorFromToken(DataVizPalette.color6), + legend: '2021', + xAxisCalloutData: '2021/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 44%', + }, + }, ], }, { @@ -114,6 +142,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 3%', }, }, + { + key: 'series3', + data: 9000, + color: getColorFromToken(DataVizPalette.color5), + legend: '2024', + xAxisCalloutData: '2024/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 3%', + }, + }, + { + key: 'series4', + data: 12000, + color: getColorFromToken(DataVizPalette.color6), + legend: '2021', + xAxisCalloutData: '2021/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 3%', + }, + }, ], }, @@ -142,6 +192,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 50%', }, }, + { + key: 'series3', + data: 60000, + color: getColorFromToken(DataVizPalette.color5), + legend: '2024', + xAxisCalloutData: '2024/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 50%', + }, + }, + { + key: 'series4', + data: 10000, + color: getColorFromToken(DataVizPalette.color6), + legend: '2021', + xAxisCalloutData: '2021/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 50%', + }, + }, ], }, { @@ -169,6 +241,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 3%', }, }, + { + key: 'series3', + data: 6000, + color: getColorFromToken(DataVizPalette.color5), + legend: '2024', + xAxisCalloutData: '2024/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 3%', + }, + }, + { + key: 'series4', + data: 15000, + color: getColorFromToken(DataVizPalette.color6), + legend: '2021', + xAxisCalloutData: '2021/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 3%', + }, + }, ], }, ]; @@ -234,6 +328,13 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr    +    +
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx index d8c71162218f1..d90e45872e488 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx @@ -21,6 +21,7 @@ interface IVerticalStackedBarState { margins: {}; enableGradient: boolean; roundCorners: boolean; + legendMultiSelect: boolean; } export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVerticalStackedBarState> { @@ -41,6 +42,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe }, enableGradient: false, roundCorners: false, + legendMultiSelect: false, }; } @@ -94,6 +96,10 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe this.setState({ roundCorners: checked }); }; + private _onToggleLegendMultiSelect = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ legendMultiSelect: checked }); + }; + private _basicExample(): JSX.Element { const { showLine } = this.state; const firstChartPoints: IVSChartDataPoint[] = [ @@ -307,6 +313,13 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe    +    + {this.state.showAxisTitles && (
@@ -321,6 +334,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe lineOptions={lineOptions} legendProps={{ allowFocusOnLegends: true, + canSelectMultipleLegends: this.state.legendMultiSelect, }} hideLabels={this.state.hideLabels} enableReflow={true} @@ -344,6 +358,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe lineOptions={lineOptions} legendProps={{ allowFocusOnLegends: true, + canSelectMultipleLegends: this.state.legendMultiSelect, }} hideLabels={this.state.hideLabels} enableReflow={true} diff --git a/packages/react-experiments/CHANGELOG.json b/packages/react-experiments/CHANGELOG.json index 6102a91b98870..47874318cf96e 100644 --- a/packages/react-experiments/CHANGELOG.json +++ b/packages/react-experiments/CHANGELOG.json @@ -1,6 +1,45 @@ { "name": "@fluentui/react-experiments", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-experiments_v8.14.188", + "version": "8.14.188", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/foundation-legacy to v8.4.23", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/font-icons-mdl2 to v8.5.57", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-experiments_v8.14.187", diff --git a/packages/react-experiments/CHANGELOG.md b/packages/react-experiments/CHANGELOG.md index 6765724d55c64..6d96dd164dcfb 100644 --- a/packages/react-experiments/CHANGELOG.md +++ b/packages/react-experiments/CHANGELOG.md @@ -1,9 +1,22 @@ # Change Log - @fluentui/react-experiments -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.14.188](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.188) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.14.187..@fluentui/react-experiments_v8.14.188) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/foundation-legacy to v8.4.23 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/font-icons-mdl2 to v8.5.57 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.14.187](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.187) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json index 82aefbe7f34ae..ad659c153a951 100644 --- a/packages/react-experiments/package.json +++ b/packages/react-experiments/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-experiments", - "version": "8.14.187", + "version": "8.14.188", "description": "Experimental React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -38,16 +38,16 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", - "@fluentui/theme": "^2.6.63", + "@fluentui/react": "^8.122.2", + "@fluentui/theme": "^2.6.64", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.25", - "@fluentui/foundation-legacy": "^8.4.22", - "@fluentui/font-icons-mdl2": "^8.5.56", + "@fluentui/foundation-legacy": "^8.4.23", + "@fluentui/font-icons-mdl2": "^8.5.57", "@fluentui/merge-styles": "^8.6.13", "@fluentui/react-hooks": "^8.8.16", "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "@fluentui/utilities": "^8.15.19", "deep-assign": "^2.0.0", "prop-types": "^15.7.2", diff --git a/packages/react-file-type-icons/CHANGELOG.json b/packages/react-file-type-icons/CHANGELOG.json index af4fd46f31705..46f5e3ffdc0b2 100644 --- a/packages/react-file-type-icons/CHANGELOG.json +++ b/packages/react-file-type-icons/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-file-type-icons", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-file-type-icons_v8.12.7", + "version": "8.12.7", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-file-type-icons", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-file-type-icons_v8.12.6", diff --git a/packages/react-file-type-icons/CHANGELOG.md b/packages/react-file-type-icons/CHANGELOG.md index 818517d7db89a..9db6c3fde7e9d 100644 --- a/packages/react-file-type-icons/CHANGELOG.md +++ b/packages/react-file-type-icons/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-file-type-icons -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.12.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-file-type-icons_v8.12.7) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-file-type-icons_v8.12.6..@fluentui/react-file-type-icons_v8.12.7) + +### Patches + +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.12.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-file-type-icons_v8.12.6) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-file-type-icons/package.json b/packages/react-file-type-icons/package.json index 7828077df3dcb..d6daa5e700488 100644 --- a/packages/react-file-type-icons/package.json +++ b/packages/react-file-type-icons/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-file-type-icons", - "version": "8.12.6", + "version": "8.12.7", "description": "Fluent UI React file type icon set.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ }, "dependencies": { "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-focus/CHANGELOG.json b/packages/react-focus/CHANGELOG.json index b15de9b3c8a50..151892d1415cd 100644 --- a/packages/react-focus/CHANGELOG.json +++ b/packages/react-focus/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-focus", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-focus_v8.9.20", + "version": "8.9.20", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-focus", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-focus_v8.9.19", diff --git a/packages/react-focus/CHANGELOG.md b/packages/react-focus/CHANGELOG.md index 2d05140c9d56c..0905a2bebf260 100644 --- a/packages/react-focus/CHANGELOG.md +++ b/packages/react-focus/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-focus -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.9.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-focus_v8.9.20) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-focus_v8.9.19..@fluentui/react-focus_v8.9.20) + +### Patches + +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.9.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-focus_v8.9.19) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-focus/package.json b/packages/react-focus/package.json index 77e8958bb5eb8..c96fce9f88f01 100644 --- a/packages/react-focus/package.json +++ b/packages/react-focus/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-focus", - "version": "8.9.19", + "version": "8.9.20", "description": "Focus helpers to be used in React applications.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -38,7 +38,7 @@ "@fluentui/keyboard-key": "^0.4.23", "@fluentui/merge-styles": "^8.6.13", "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, diff --git a/packages/react-icon-provider/CHANGELOG.json b/packages/react-icon-provider/CHANGELOG.json index e56287fc560af..279b00f9d91cd 100644 --- a/packages/react-icon-provider/CHANGELOG.json +++ b/packages/react-icon-provider/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-icon-provider", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:57 GMT", + "tag": "@fluentui/react-icon-provider_v1.3.78", + "version": "1.3.78", + "comments": { + "patch": [ + { + "author": "olfedias@microsoft.com", + "package": "@fluentui/react-icon-provider", + "commit": "dc7bb663e3d93a19b611cf1892556d69c57b1269", + "comment": "chore: remove usage of \"export *\"" + }, + { + "author": "beachball", + "package": "@fluentui/react-icon-provider", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-icon-provider_v1.3.77", diff --git a/packages/react-icon-provider/CHANGELOG.md b/packages/react-icon-provider/CHANGELOG.md index d76f29b8bdc46..581fad04ef790 100644 --- a/packages/react-icon-provider/CHANGELOG.md +++ b/packages/react-icon-provider/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-icon-provider -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:57 GMT and should not be manually modified. +## [1.3.78](https://github.com/microsoft/fluentui/tree/@fluentui/react-icon-provider_v1.3.78) + +Mon, 23 Dec 2024 07:22:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-icon-provider_v1.3.77..@fluentui/react-icon-provider_v1.3.78) + +### Patches + +- chore: remove usage of "export *" ([PR #33448](https://github.com/microsoft/fluentui/pull/33448) by olfedias@microsoft.com) +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [1.3.77](https://github.com/microsoft/fluentui/tree/@fluentui/react-icon-provider_v1.3.77) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-icon-provider/package.json b/packages/react-icon-provider/package.json index 90170cc79f37c..1887d0aa9743b 100644 --- a/packages/react-icon-provider/package.json +++ b/packages/react-icon-provider/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-icon-provider", - "version": "1.3.77", + "version": "1.3.78", "description": "Package for applying icon overrides to Fluent UI React SVG icons", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -30,7 +30,7 @@ }, "dependencies": { "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-icons-mdl2-branded/CHANGELOG.json b/packages/react-icons-mdl2-branded/CHANGELOG.json index 2e095626b23d9..3b43601e0d564 100644 --- a/packages/react-icons-mdl2-branded/CHANGELOG.json +++ b/packages/react-icons-mdl2-branded/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-icons-mdl2-branded", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-icons-mdl2-branded_v1.2.84", + "version": "1.2.84", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-icons-mdl2-branded", + "comment": "Bump @fluentui/react-icons-mdl2 to v1.3.82", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-icons-mdl2-branded_v1.2.83", diff --git a/packages/react-icons-mdl2-branded/CHANGELOG.md b/packages/react-icons-mdl2-branded/CHANGELOG.md index 65be76ca927a4..ac6983eb3f8db 100644 --- a/packages/react-icons-mdl2-branded/CHANGELOG.md +++ b/packages/react-icons-mdl2-branded/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-icons-mdl2-branded -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [1.2.84](https://github.com/microsoft/fluentui/tree/@fluentui/react-icons-mdl2-branded_v1.2.84) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-icons-mdl2-branded_v1.2.83..@fluentui/react-icons-mdl2-branded_v1.2.84) + +### Patches + +- Bump @fluentui/react-icons-mdl2 to v1.3.82 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [1.2.83](https://github.com/microsoft/fluentui/tree/@fluentui/react-icons-mdl2-branded_v1.2.83) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-icons-mdl2-branded/package.json b/packages/react-icons-mdl2-branded/package.json index cc6afcf48e61a..55901e2cff2b1 100644 --- a/packages/react-icons-mdl2-branded/package.json +++ b/packages/react-icons-mdl2-branded/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-icons-mdl2-branded", - "version": "1.2.83", + "version": "1.2.84", "description": "Branded SVG icons from the MDL2 icon set", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -26,7 +26,7 @@ }, "dependencies": { "@fluentui/set-version": "^8.2.23", - "@fluentui/react-icons-mdl2": "^1.3.81", + "@fluentui/react-icons-mdl2": "^1.3.82", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-icons-mdl2/CHANGELOG.json b/packages/react-icons-mdl2/CHANGELOG.json index 2d0eabf3d4577..c88e85870ebf0 100644 --- a/packages/react-icons-mdl2/CHANGELOG.json +++ b/packages/react-icons-mdl2/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-icons-mdl2", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-icons-mdl2_v1.3.82", + "version": "1.3.82", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-icons-mdl2", + "comment": "Bump @fluentui/react-icon-provider to v1.3.78", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-icons-mdl2_v1.3.81", diff --git a/packages/react-icons-mdl2/CHANGELOG.md b/packages/react-icons-mdl2/CHANGELOG.md index 922b24ecbf6d2..ffdc164ec2720 100644 --- a/packages/react-icons-mdl2/CHANGELOG.md +++ b/packages/react-icons-mdl2/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-icons-mdl2 -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [1.3.82](https://github.com/microsoft/fluentui/tree/@fluentui/react-icons-mdl2_v1.3.82) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-icons-mdl2_v1.3.81..@fluentui/react-icons-mdl2_v1.3.82) + +### Patches + +- Bump @fluentui/react-icon-provider to v1.3.78 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [1.3.81](https://github.com/microsoft/fluentui/tree/@fluentui/react-icons-mdl2_v1.3.81) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-icons-mdl2/package.json b/packages/react-icons-mdl2/package.json index 95d461669d6d0..a624f56180a31 100644 --- a/packages/react-icons-mdl2/package.json +++ b/packages/react-icons-mdl2/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-icons-mdl2", - "version": "1.3.81", + "version": "1.3.82", "description": "SVG icon components for @fluentui/react", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -31,7 +31,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/react-icon-provider": "^1.3.77", + "@fluentui/react-icon-provider": "^1.3.78", "@fluentui/set-version": "^8.2.23", "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json index 740f2aa7273fb..a7a0bd2fd0049 100644 --- a/packages/react-monaco-editor/CHANGELOG.json +++ b/packages/react-monaco-editor/CHANGELOG.json @@ -1,6 +1,57 @@ { "name": "@fluentui/react-monaco-editor", "entries": [ + { + "date": "Thu, 26 Dec 2024 07:21:14 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.269", + "version": "1.7.269", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.31", + "commit": "0dd9a713b54a6d5b5929ac7febd1c7e44c83efca" + } + ] + } + }, + { + "date": "Wed, 25 Dec 2024 07:21:56 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.268", + "version": "1.7.268", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.30", + "commit": "fa08fec97a5bc070e2866633c792f7066f0c86e8" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.267", + "version": "1.7.267", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.29", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 20 Dec 2024 07:20:01 GMT", "tag": "@fluentui/react-monaco-editor_v1.7.266", diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md index 5e394b3022200..57d5169f3a74b 100644 --- a/packages/react-monaco-editor/CHANGELOG.md +++ b/packages/react-monaco-editor/CHANGELOG.md @@ -1,9 +1,37 @@ # Change Log - @fluentui/react-monaco-editor -This log was last generated on Fri, 20 Dec 2024 07:20:01 GMT and should not be manually modified. +This log was last generated on Thu, 26 Dec 2024 07:21:14 GMT and should not be manually modified. +## [1.7.269](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.269) + +Thu, 26 Dec 2024 07:21:14 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.268..@fluentui/react-monaco-editor_v1.7.269) + +### Patches + +- Bump @fluentui/react-charting to v5.23.31 ([PR #33518](https://github.com/microsoft/fluentui/pull/33518) by beachball) + +## [1.7.268](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.268) + +Wed, 25 Dec 2024 07:21:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.267..@fluentui/react-monaco-editor_v1.7.268) + +### Patches + +- Bump @fluentui/react-charting to v5.23.30 ([PR #33447](https://github.com/microsoft/fluentui/pull/33447) by beachball) + +## [1.7.267](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.267) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.266..@fluentui/react-monaco-editor_v1.7.267) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/react-charting to v5.23.29 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [1.7.266](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.266) Fri, 20 Dec 2024 07:20:01 GMT diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json index a2341d0e51366..863b640d1168a 100644 --- a/packages/react-monaco-editor/package.json +++ b/packages/react-monaco-editor/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-monaco-editor", - "version": "1.7.266", + "version": "1.7.269", "description": "Live React example editing using monaco", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -29,12 +29,12 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.2", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.25", "@fluentui/monaco-editor": "^1.3.24", "@fluentui/react-hooks": "^8.8.16", - "@fluentui/react-charting": "^5.23.28", + "@fluentui/react-charting": "^5.23.31", "raw-loader": "4.0.2", "react-syntax-highlighter": "^10.1.3", "tslib": "^2.1.0" diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json index 36540852fabb6..c948f42776450 100644 --- a/packages/react/CHANGELOG.json +++ b/packages/react/CHANGELOG.json @@ -1,6 +1,45 @@ { "name": "@fluentui/react", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react_v8.122.2", + "version": "8.122.2", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/foundation-legacy to v8.4.23", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/font-icons-mdl2 to v8.5.57", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/react-focus to v8.9.20", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 20 Dec 2024 07:20:00 GMT", "tag": "@fluentui/react_v8.122.1", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index d1c8e9d03ad91..c8404343b171a 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,9 +1,22 @@ # Change Log - @fluentui/react -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.122.2](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.122.2) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.122.1..@fluentui/react_v8.122.2) + +### Patches + +- Bump @fluentui/foundation-legacy to v8.4.23 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/font-icons-mdl2 to v8.5.57 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/react-focus to v8.9.20 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.122.1](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.122.1) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react/package.json b/packages/react/package.json index 3f47bf8370927..aadd5c64e631d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react", - "version": "8.122.1", + "version": "8.122.2", "description": "Reusable React components for building web experiences.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -49,16 +49,16 @@ }, "dependencies": { "@fluentui/date-time-utilities": "^8.6.9", - "@fluentui/foundation-legacy": "^8.4.22", - "@fluentui/font-icons-mdl2": "^8.5.56", + "@fluentui/foundation-legacy": "^8.4.23", + "@fluentui/font-icons-mdl2": "^8.5.57", "@fluentui/merge-styles": "^8.6.13", - "@fluentui/react-focus": "^8.9.19", + "@fluentui/react-focus": "^8.9.20", "@fluentui/react-hooks": "^8.8.16", "@fluentui/react-portal-compat-context": "^9.0.13", "@fluentui/react-window-provider": "^2.2.28", "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", - "@fluentui/theme": "^2.6.63", + "@fluentui/style-utilities": "^8.11.6", + "@fluentui/theme": "^2.6.64", "@fluentui/utilities": "^8.15.19", "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^2.1.0" diff --git a/packages/scheme-utilities/CHANGELOG.json b/packages/scheme-utilities/CHANGELOG.json index e32b174e3b411..286d4a7cce389 100644 --- a/packages/scheme-utilities/CHANGELOG.json +++ b/packages/scheme-utilities/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/scheme-utilities", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/scheme-utilities_v8.3.65", + "version": "8.3.65", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/scheme-utilities", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 11 Oct 2024 16:51:54 GMT", "tag": "@fluentui/scheme-utilities_v8.3.64", diff --git a/packages/scheme-utilities/CHANGELOG.md b/packages/scheme-utilities/CHANGELOG.md index b29a08fa5eca2..672ba9930d593 100644 --- a/packages/scheme-utilities/CHANGELOG.md +++ b/packages/scheme-utilities/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/scheme-utilities -This log was last generated on Fri, 11 Oct 2024 16:51:54 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.3.65](https://github.com/microsoft/fluentui/tree/@fluentui/scheme-utilities_v8.3.65) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/scheme-utilities_v8.3.64..@fluentui/scheme-utilities_v8.3.65) + +### Patches + +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.3.64](https://github.com/microsoft/fluentui/tree/@fluentui/scheme-utilities_v8.3.64) Fri, 11 Oct 2024 16:51:54 GMT diff --git a/packages/scheme-utilities/package.json b/packages/scheme-utilities/package.json index 8c4ac73026bed..6e9000458bf0f 100644 --- a/packages/scheme-utilities/package.json +++ b/packages/scheme-utilities/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/scheme-utilities", - "version": "8.3.64", + "version": "8.3.65", "description": "Fluent UI React subtheme generator.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/theme": "^2.6.63", + "@fluentui/theme": "^2.6.64", "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" }, diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 84dddf49a54ff..475a239e4ec6b 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -22,11 +22,11 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", - "@fluentui/theme": "^2.6.63", + "@fluentui/react": "^8.122.2", + "@fluentui/theme": "^2.6.64", "@storybook/addon-essentials": "7.6.20", - "@fluentui/azure-themes": "^8.6.114", - "@fluentui/theme-samples": "^8.7.190", + "@fluentui/azure-themes": "^8.6.115", + "@fluentui/theme-samples": "^8.7.191", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/style-utilities/CHANGELOG.json b/packages/style-utilities/CHANGELOG.json index 73a4347b05adc..bd87297069b25 100644 --- a/packages/style-utilities/CHANGELOG.json +++ b/packages/style-utilities/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/style-utilities", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/style-utilities_v8.11.6", + "version": "8.11.6", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/style-utilities", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/style-utilities_v8.11.5", diff --git a/packages/style-utilities/CHANGELOG.md b/packages/style-utilities/CHANGELOG.md index 83f44fad2be29..6f6a079756c1b 100644 --- a/packages/style-utilities/CHANGELOG.md +++ b/packages/style-utilities/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/style-utilities -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.11.6](https://github.com/microsoft/fluentui/tree/@fluentui/style-utilities_v8.11.6) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/style-utilities_v8.11.5..@fluentui/style-utilities_v8.11.6) + +### Patches + +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.11.5](https://github.com/microsoft/fluentui/tree/@fluentui/style-utilities_v8.11.5) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/style-utilities/package.json b/packages/style-utilities/package.json index cb3191659822c..334e74ff56327 100644 --- a/packages/style-utilities/package.json +++ b/packages/style-utilities/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/style-utilities", - "version": "8.11.5", + "version": "8.11.6", "description": "Styling helpers for Fluent UI React.", "repository": { "type": "git", @@ -32,7 +32,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/theme": "^2.6.63", + "@fluentui/theme": "^2.6.64", "@fluentui/merge-styles": "^8.6.13", "@fluentui/set-version": "^8.2.23", "@fluentui/utilities": "^8.15.19", diff --git a/packages/theme-samples/CHANGELOG.json b/packages/theme-samples/CHANGELOG.json index f94148ab5eeb5..c46b6beef089a 100644 --- a/packages/theme-samples/CHANGELOG.json +++ b/packages/theme-samples/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/theme-samples", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/theme-samples_v8.7.191", + "version": "8.7.191", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/theme-samples", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/theme-samples", + "comment": "Bump @fluentui/scheme-utilities to v8.3.65", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/theme-samples_v8.7.190", diff --git a/packages/theme-samples/CHANGELOG.md b/packages/theme-samples/CHANGELOG.md index 065794127c86c..2b26dea032ea9 100644 --- a/packages/theme-samples/CHANGELOG.md +++ b/packages/theme-samples/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/theme-samples -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.7.191](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.191) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme-samples_v8.7.190..@fluentui/theme-samples_v8.7.191) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/scheme-utilities to v8.3.65 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.7.190](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.190) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/theme-samples/package.json b/packages/theme-samples/package.json index da948c6ead801..f6e4dddae6f30 100644 --- a/packages/theme-samples/package.json +++ b/packages/theme-samples/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/theme-samples", - "version": "8.7.190", + "version": "8.7.191", "description": "Sample themes for use with Fabric components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -26,9 +26,9 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.2", "@fluentui/set-version": "^8.2.23", - "@fluentui/scheme-utilities": "^8.3.64", + "@fluentui/scheme-utilities": "^8.3.65", "tslib": "^2.1.0" }, "exports": { diff --git a/packages/theme/CHANGELOG.json b/packages/theme/CHANGELOG.json index 94b391e3427fd..383c73f51fa8f 100644 --- a/packages/theme/CHANGELOG.json +++ b/packages/theme/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/theme", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/theme_v2.6.64", + "version": "2.6.64", + "comments": { + "patch": [ + { + "author": "olfedias@microsoft.com", + "package": "@fluentui/theme", + "commit": "dc7bb663e3d93a19b611cf1892556d69c57b1269", + "comment": "chore: remove usage of \"export *\"" + } + ] + } + }, { "date": "Tue, 05 Nov 2024 00:59:52 GMT", "tag": "@fluentui/theme_v2.6.63", diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md index 3bc704261e691..a6e4242eb6dce 100644 --- a/packages/theme/CHANGELOG.md +++ b/packages/theme/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/theme -This log was last generated on Fri, 11 Oct 2024 16:51:54 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [2.6.64](https://github.com/microsoft/fluentui/tree/@fluentui/theme_v2.6.64) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme_v2.6.63..@fluentui/theme_v2.6.64) + +### Patches + +- chore: remove usage of "export *" ([PR #33448](https://github.com/microsoft/fluentui/pull/33448) by olfedias@microsoft.com) + ## [2.6.63](https://github.com/microsoft/fluentui/tree/@fluentui/theme_v2.6.63) Fri, 11 Oct 2024 16:51:54 GMT diff --git a/packages/theme/package.json b/packages/theme/package.json index f5c8396cf6f5a..268aac8ec4cfe 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/theme", - "version": "2.6.63", + "version": "2.6.64", "description": "Basic building blocks for Fluent UI React Component themes", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/web-components/CHANGELOG.json b/packages/web-components/CHANGELOG.json index 2265505fd7569..b815e91343186 100644 --- a/packages/web-components/CHANGELOG.json +++ b/packages/web-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/web-components", "entries": [ + { + "date": "Mon, 23 Dec 2024 04:07:55 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.75", + "version": "3.0.0-beta.75", + "comments": { + "prerelease": [ + { + "author": "863023+radium-v@users.noreply.github.com", + "package": "@fluentui/web-components", + "commit": "622c4aacdb5a1ab601287a9adb1064a640388f4f", + "comment": "fix tooltip positioning styles for 'below-end' option" + } + ] + } + }, { "date": "Fri, 06 Dec 2024 04:07:47 GMT", "tag": "@fluentui/web-components_v3.0.0-beta.74", diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md index 53250ca589424..c166b3f8f9394 100644 --- a/packages/web-components/CHANGELOG.md +++ b/packages/web-components/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/web-components -This log was last generated on Fri, 06 Dec 2024 04:07:47 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 04:07:55 GMT and should not be manually modified. +## [3.0.0-beta.75](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.75) + +Mon, 23 Dec 2024 04:07:55 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.74..@fluentui/web-components_v3.0.0-beta.75) + +### Changes + +- fix tooltip positioning styles for 'below-end' option ([PR #33494](https://github.com/microsoft/fluentui/pull/33494) by 863023+radium-v@users.noreply.github.com) + ## [3.0.0-beta.74](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.74) Fri, 06 Dec 2024 04:07:47 GMT diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 7ecb89c6c89e4..489e639ac1b4b 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,7 +1,7 @@ { "name": "@fluentui/web-components", "description": "A library of Fluent Web Components", - "version": "3.0.0-beta.74", + "version": "3.0.0-beta.75", "author": { "name": "Microsoft", "url": "https://discord.gg/FcSNfg4"