npm - @fluentui/react-charts - Versions diffs - 9.2.3 → 9.3.0 - Mend

@fluentui/react-charts 9.2.3 → 9.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (347) hide show

package/lib-commonjs/components/DeclarativeChart/imageExporter.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/DeclarativeChart/imageExporter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DeclarativeChart/imageExporter.ts"],"sourcesContent":["import { create as d3Create, select as d3Select, Selection } from 'd3-selection';\nimport { resolveCSSVariables } from '../../utilities/index';\n\n/*\n {@docCategory DeclarativeChart}\n /\nexport interface ImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\nexport function toImage(chartContainer?: HTMLElement \| null, opts: ImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n if (!chartContainer) {\n return reject(new Error('Chart container is not defined'));\n }\n\n try {\n const background =\n typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';\n const svg = toSVG(chartContainer, background);\n\n const svgData = new XMLSerializer().serializeToString(svg.node);\n const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n\n svgToPng(svgDataUrl, {\n width: opts.width \|\| svg.width,\n height: opts.height \|\| svg.height,\n scale: opts.scale,\n })\n .then(resolve)\n .catch(reject);\n } catch (err) {\n return reject(err);\n }\n });\n}\n\nconst SVG_STYLE_PROPERTIES = ['display', 'fill', 'fill-opacity', 'opacity', 'stroke', 'stroke-width', 'transform'];\nconst SVG_TEXT_STYLE_PROPERTIES = ['font-family', 'font-size', 'font-weight', 'text-anchor'];\n\nfunction toSVG(chartContainer: HTMLElement, background: string) {\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n const svgElements = svg.getElementsByTagName('');\n const clonedSvgElements = clonedSvg.node()!.getElementsByTagName('');\n\n for (let i = 0; i < svgElements.length; i++) {\n if (svgElements[i].tagName.toLowerCase() === 'text') {\n copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], svgElements[i], clonedSvgElements[i]);\n } else {\n copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);\n }\n }\n\n const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n const legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight);\n const w1 = Math.max(svgWidth, legendGroup.width);\n const h1 = svgHeight + legendGroup.height;\n\n if (legendGroup.node) {\n clonedSvg.append(() => legendGroup.node);\n }\n clonedSvg\n .insert('rect', ':first-child')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', w1)\n .attr('height', h1)\n .attr('fill', background);\n clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);\n\n return {\n node: clonedSvg.node()!,\n width: w1,\n height: h1,\n };\n}\n\nconst LEGEND_RECT_STYLE_PROPERTIES_MAP = {\n 'background-color': 'fill',\n 'border-color': 'stroke',\n};\nconst LEGEND_TEXT_STYLE_PROPERTIES_MAP = {\n color: 'fill',\n 'font-family': 'font-family',\n 'font-size': 'font-size',\n 'font-weight': 'font-weight',\n opacity: 'opacity',\n};\n\nfunction cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHeight: number) {\n const legendButtons = chartContainer.querySelectorAll<HTMLElement>(`\n button.fui-legend__legend:not([data-overflowing]),\n .fui-donut__legendContainer button.fui-MenuButton,\n .fui-cart__legendContainer button.fui-MenuButton\n `);\n if (legendButtons.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = 0;\n let legendY = 8;\n let legendLine: Selection<SVGGElement, unknown, null, undefined>[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n\n for (let i = 0; i < legendButtons.length; i++) {\n const { width: legendWidth } = legendButtons[i].getBoundingClientRect();\n const legendItem = legendGroup.append('g');\n\n legendLine.push(legendItem);\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [legendItem];\n legendX = 0;\n legendY += 32;\n }\n\n let legendText: HTMLDivElement \| HTMLButtonElement \| null;\n let textOffset = 0;\n\n if (!legendButtons[i].hasAttribute('data-overflow-menu')) {\n const legendRect = legendButtons[i].querySelector<HTMLDivElement>('.fui-legend__rect');\n\n legendText = legendButtons[i].querySelector<HTMLDivElement>('.fui-legend__text');\n legendItem\n .append('rect')\n .attr('x', legendX + 8)\n .attr('y', svgHeight + legendY + 8)\n .attr('width', 12)\n .attr('height', 12)\n .attr('stroke-width', 1)\n .call(selection => copyStyle(LEGEND_RECT_STYLE_PROPERTIES_MAP, legendRect!, selection.node()!));\n textOffset = 28;\n } else {\n legendText = legendButtons[i] as HTMLButtonElement;\n // eslint-disable-next-line no-console\n console.log(legendText!.textContent);\n textOffset = 8;\n }\n\n legendItem\n .append('text')\n .attr('x', legendX + textOffset)\n .attr('y', svgHeight + legendY + 8)\n .attr('dominant-baseline', 'hanging')\n .text(legendText!.textContent)\n .call(selection => copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText!, selection.node()!));\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += 32;\n\n const centerLegends = true;\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n ln.forEach(item => {\n item.attr('transform', `translate(${offsetX}, 0)`);\n });\n });\n }\n\n return {\n node: legendGroup.node(),\n width: Math.max(...legendLineWidths),\n height: legendY,\n };\n}\n\nfunction svgToPng(svgDataUrl: string, opts: ImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n const scale = opts.scale \|\| 1;\n const w0 = opts.width \|\| 300;\n const h0 = opts.height \|\| 150;\n const w1 = scale w0;\n const h1 = scale * h0;\n\n const canvas = document.createElement('canvas');\n const img = new Image();\n\n canvas.width = w1;\n canvas.height = h1;\n\n img.onload = function () {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n return reject(new Error('Canvas context is null'));\n }\n\n ctx.clearRect(0, 0, w1, h1);\n ctx.drawImage(img, 0, 0, w1, h1);\n\n const imgData = canvas.toDataURL('image/png');\n resolve(imgData);\n };\n\n img.onerror = function (err) {\n reject(err);\n };\n\n img.src = svgDataUrl;\n });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/*\n A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n \n 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}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n\nfunction copyStyle(properties: string[] \| Record<string, string>, fromEl: Element, toEl: Element) {\n const styles = getComputedStyle(fromEl);\n if (Array.isArray(properties)) {\n properties.forEach(prop => {\n d3Select(toEl).style(prop, styles.getPropertyValue(prop));\n });\n } else {\n Object.entries(properties).forEach(([fromProp, toProp]) => {\n d3Select(toEl).style(toProp, styles.getPropertyValue(fromProp));\n });\n }\n}\n"],"names":["create","d3Create","select","d3Select","resolveCSSVariables","toImage","chartContainer","opts","Promise","resolve","reject","Error","background","svg","toSVG","svgData","XMLSerializer","serializeToString","node","svgDataUrl","btoa","unescapePonyfill","encodeURIComponent","svgToPng","width","height","scale","then","catch","err","SVG_STYLE_PROPERTIES","SVG_TEXT_STYLE_PROPERTIES","querySelector","clonedSvg","cloneNode","attr","svgElements","getElementsByTagName","clonedSvgElements","i","length","tagName","toLowerCase","copyStyle","svgWidth","svgHeight","getBoundingClientRect","legendGroup","cloneLegendsToSVG","w1","Math","max","h1","append","insert","LEGEND_RECT_STYLE_PROPERTIES_MAP","LEGEND_TEXT_STYLE_PROPERTIES_MAP","color","opacity","legendButtons","querySelectorAll","legendX","legendY","legendLine","legendLines","legendLineWidths","legendWidth","legendItem","push","pop","legendText","textOffset","hasAttribute","legendRect","call","selection","console","log","textContent","text","centerLegends","forEach","ln","idx","offsetX","item","w0","h0","canvas","document","createElement","img","Image","onload","ctx","getContext","clearRect","drawImage","imgData","toDataURL","onerror","src","hex2","hex4","str","result","index","chr","part","charAt","slice","exec","String","fromCharCode","parseInt","properties","fromEl","toEl","styles","getComputedStyle","Array","isArray","prop","style","getPropertyValue","Object","entries","fromProp","toProp"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/DeclarativeChart/imageExporter.ts"],"sourcesContent":["'use client';\n\nimport { create as d3Create, select as d3Select, Selection } from 'd3-selection';\nimport { resolveCSSVariables } from '../../utilities/index';\n\n/*\n {@docCategory DeclarativeChart}\n /\nexport interface ImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\nexport function toImage(chartContainer?: HTMLElement \| null, opts: ImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n if (!chartContainer) {\n return reject(new Error('Chart container is not defined'));\n }\n\n try {\n const background =\n typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';\n const svg = toSVG(chartContainer, background);\n\n const svgData = new XMLSerializer().serializeToString(svg.node);\n const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n\n svgToPng(svgDataUrl, {\n width: opts.width \|\| svg.width,\n height: opts.height \|\| svg.height,\n scale: opts.scale,\n })\n .then(resolve)\n .catch(reject);\n } catch (err) {\n return reject(err);\n }\n });\n}\n\nconst SVG_STYLE_PROPERTIES = ['display', 'fill', 'fill-opacity', 'opacity', 'stroke', 'stroke-width', 'transform'];\nconst SVG_TEXT_STYLE_PROPERTIES = ['font-family', 'font-size', 'font-weight', 'text-anchor'];\n\nfunction toSVG(chartContainer: HTMLElement, background: string) {\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n const svgElements = svg.getElementsByTagName('');\n const clonedSvgElements = clonedSvg.node()!.getElementsByTagName('');\n\n for (let i = 0; i < svgElements.length; i++) {\n if (svgElements[i].tagName.toLowerCase() === 'text') {\n copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], svgElements[i], clonedSvgElements[i]);\n } else {\n copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);\n }\n }\n\n const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n const legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight);\n const w1 = Math.max(svgWidth, legendGroup.width);\n const h1 = svgHeight + legendGroup.height;\n\n if (legendGroup.node) {\n clonedSvg.append(() => legendGroup.node);\n }\n clonedSvg\n .insert('rect', ':first-child')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', w1)\n .attr('height', h1)\n .attr('fill', background);\n clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);\n\n return {\n node: clonedSvg.node()!,\n width: w1,\n height: h1,\n };\n}\n\nconst LEGEND_RECT_STYLE_PROPERTIES_MAP = {\n 'background-color': 'fill',\n 'border-color': 'stroke',\n};\nconst LEGEND_TEXT_STYLE_PROPERTIES_MAP = {\n color: 'fill',\n 'font-family': 'font-family',\n 'font-size': 'font-size',\n 'font-weight': 'font-weight',\n opacity: 'opacity',\n};\n\nfunction cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHeight: number) {\n const legendButtons = chartContainer.querySelectorAll<HTMLElement>(`\n button.fui-legend__legend:not([data-overflowing]),\n .fui-donut__legendContainer button.fui-MenuButton,\n .fui-cart__legendContainer button.fui-MenuButton\n `);\n if (legendButtons.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = 0;\n let legendY = 8;\n let legendLine: Selection<SVGGElement, unknown, null, undefined>[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n\n for (let i = 0; i < legendButtons.length; i++) {\n const { width: legendWidth } = legendButtons[i].getBoundingClientRect();\n const legendItem = legendGroup.append('g');\n\n legendLine.push(legendItem);\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [legendItem];\n legendX = 0;\n legendY += 32;\n }\n\n let legendText: HTMLDivElement \| HTMLButtonElement \| null;\n let textOffset = 0;\n\n if (!legendButtons[i].hasAttribute('data-overflow-menu')) {\n const legendRect = legendButtons[i].querySelector<HTMLDivElement>('.fui-legend__rect');\n\n legendText = legendButtons[i].querySelector<HTMLDivElement>('.fui-legend__text');\n legendItem\n .append('rect')\n .attr('x', legendX + 8)\n .attr('y', svgHeight + legendY + 8)\n .attr('width', 12)\n .attr('height', 12)\n .attr('stroke-width', 1)\n .call(selection => copyStyle(LEGEND_RECT_STYLE_PROPERTIES_MAP, legendRect!, selection.node()!));\n textOffset = 28;\n } else {\n legendText = legendButtons[i] as HTMLButtonElement;\n // eslint-disable-next-line no-console\n console.log(legendText!.textContent);\n textOffset = 8;\n }\n\n legendItem\n .append('text')\n .attr('x', legendX + textOffset)\n .attr('y', svgHeight + legendY + 8)\n .attr('dominant-baseline', 'hanging')\n .text(legendText!.textContent)\n .call(selection => copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText!, selection.node()!));\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += 32;\n\n const centerLegends = true;\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n ln.forEach(item => {\n item.attr('transform', `translate(${offsetX}, 0)`);\n });\n });\n }\n\n return {\n node: legendGroup.node(),\n width: Math.max(...legendLineWidths),\n height: legendY,\n };\n}\n\nfunction svgToPng(svgDataUrl: string, opts: ImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n const scale = opts.scale \|\| 1;\n const w0 = opts.width \|\| 300;\n const h0 = opts.height \|\| 150;\n const w1 = scale w0;\n const h1 = scale * h0;\n\n const canvas = document.createElement('canvas');\n const img = new Image();\n\n canvas.width = w1;\n canvas.height = h1;\n\n img.onload = function () {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n return reject(new Error('Canvas context is null'));\n }\n\n ctx.clearRect(0, 0, w1, h1);\n ctx.drawImage(img, 0, 0, w1, h1);\n\n const imgData = canvas.toDataURL('image/png');\n resolve(imgData);\n };\n\n img.onerror = function (err) {\n reject(err);\n };\n\n img.src = svgDataUrl;\n });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/*\n A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n \n 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}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n\nfunction copyStyle(properties: string[] \| Record<string, string>, fromEl: Element, toEl: Element) {\n const styles = getComputedStyle(fromEl);\n if (Array.isArray(properties)) {\n properties.forEach(prop => {\n d3Select(toEl).style(prop, styles.getPropertyValue(prop));\n });\n } else {\n Object.entries(properties).forEach(([fromProp, toProp]) => {\n d3Select(toEl).style(toProp, styles.getPropertyValue(fromProp));\n });\n }\n}\n"],"names":["create","d3Create","select","d3Select","resolveCSSVariables","toImage","chartContainer","opts","Promise","resolve","reject","Error","background","svg","toSVG","svgData","XMLSerializer","serializeToString","node","svgDataUrl","btoa","unescapePonyfill","encodeURIComponent","svgToPng","width","height","scale","then","catch","err","SVG_STYLE_PROPERTIES","SVG_TEXT_STYLE_PROPERTIES","querySelector","clonedSvg","cloneNode","attr","svgElements","getElementsByTagName","clonedSvgElements","i","length","tagName","toLowerCase","copyStyle","svgWidth","svgHeight","getBoundingClientRect","legendGroup","cloneLegendsToSVG","w1","Math","max","h1","append","insert","LEGEND_RECT_STYLE_PROPERTIES_MAP","LEGEND_TEXT_STYLE_PROPERTIES_MAP","color","opacity","legendButtons","querySelectorAll","legendX","legendY","legendLine","legendLines","legendLineWidths","legendWidth","legendItem","push","pop","legendText","textOffset","hasAttribute","legendRect","call","selection","console","log","textContent","text","centerLegends","forEach","ln","idx","offsetX","item","w0","h0","canvas","document","createElement","img","Image","onload","ctx","getContext","clearRect","drawImage","imgData","toDataURL","onerror","src","hex2","hex4","str","result","index","chr","part","charAt","slice","exec","String","fromCharCode","parseInt","properties","fromEl","toEl","styles","getComputedStyle","Array","isArray","prop","style","getPropertyValue","Object","entries","fromProp","toProp"],"mappings":"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"}

package/lib-commonjs/components/DonutChart/Arc/Arc.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -15,7 +16,7 @@ const _useArcStylesstyles = require("./useArcStyles.styles");
 const _d3format = require("d3-format");
 const _index = require("../../../utilities/index");
 const Arc = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
-    var _props_data;
+    var _props_data, _props_activeArc, _props_data1;
     const arc = (0, _d3shape.arc)();
     const currentRef = /*#__PURE__*/ _react.createRef();
     const _isRTL = (0, _index.useRtl)();
@@ -51,8 +52,8 @@ const Arc = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend);
     }
     function _renderArcLabel(className) {
-        const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = props;
-        if (hideLabels || Math.abs(data.endAngle - data.startAngle) < Math.PI / 12 || activeArc !== data.data.legend && activeArc !== '') {
+        const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels } = props;
+        if (hideLabels || Math.abs(data.endAngle - data.startAngle) < Math.PI / 12 || !_shouldHighlightArc(data.data.legend)) {
             return null;
         }
         const [base, perp] = arc.centroid({
@@ -79,10 +80,10 @@ const Arc = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             newProps.arc.outerRadius(newProps.outerRadius);
         }
     }
-    const { href, focusedArcId } = props;
+    const { href, focusedArcId, activeArc } = props;
     //TO DO 'replace' is throwing error
     const id = props.uniqText + (typeof props.data.data.legend === 'string' ? props.data.data.legend.replace(/\s+/g, '') : '') + props.data.data.data;
-    const opacity = props.activeArc === props.data.data.legend || props.activeArc === '' ? 1 : 0.1;
+    const opacity = activeArc && activeArc.length > 0 ? activeArc.includes((_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.data.legend) ? 1 : 0.1 : 1;
     const cornerRadius = props.roundCorners ? 3 : 0;
     return /*#__PURE__*/ _react.createElement("g", {
         ref: currentRef
@@ -109,14 +110,13 @@ const Arc = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             cursor: href ? 'pointer' : 'default'
         },
         onFocus: (event)=>_onFocus(props.data.data, id, event),
-        "data-is-focusable": props.activeArc === props.data.data.legend || props.activeArc === '',
         onMouseOver: (event)=>_hoverOn(props.data.data, event),
         onMouseMove: (event)=>_hoverOn(props.data.data, event),
         onMouseLeave: _hoverOff,
-        tabIndex: _shouldHighlightArc(props.data.data.legend) ? 0 : undefined,
+        tabIndex: _shouldHighlightArc(props.data.data.legend) || ((_props_activeArc = props.activeArc) === null || _props_activeArc === void 0 ? void 0 : _props_activeArc.length) === 0 ? 0 : undefined,
         onBlur: _onBlur,
         opacity: opacity,
-        onClick: (_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.data.onClick,
+        onClick: (_props_data1 = props.data) === null || _props_data1 === void 0 ? void 0 : _props_data1.data.onClick,
         "aria-label": _getAriaLabel(),
         role: "img"
     }), _renderArcLabel(classes.arcLabel));

package/lib-commonjs/components/DonutChart/Arc/Arc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DonutChart/Arc/Arc.tsx"],"sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { useArcStyles } from './useArcStyles.styles';\nimport { ChartDataPoint } from '../index';\nimport { ArcProps } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatScientificLimitWidth, useRtl } from '../../../utilities/index';\n\n// Create a Arc within Donut Chart variant which uses these default styles and this styled subcomponent.\n/*\n Arc component within Donut Chart.\n * {@docCategory ArcDonutChart}\n /\nexport const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivElement, ArcProps>(\n (props, forwardedRef) => {\n const arc = d3Arc();\n const currentRef = React.createRef<SVGPathElement>();\n const _isRTL: boolean = useRtl();\n const classes = useArcStyles(props);\n\n React.useEffect(() => {\n _updateChart(props);\n }, [props]);\n\n function _onFocus(data: ChartDataPoint, id: string, event: React.FocusEvent<SVGPathElement, Element>): void {\n props.onFocusCallback!(data, id, event, currentRef.current);\n }\n\n function _hoverOn(data: ChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n props.hoverOnCallback!(data, mouseEvent);\n }\n\n function _hoverOff(): void {\n props.hoverLeaveCallback!();\n }\n\n function _onBlur(): void {\n props.onBlurCallback!();\n }\n\n function _getAriaLabel(): string {\n const point = props.data!.data;\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n }\n\n function _shouldHighlightArc(legend?: string): boolean {\n const { activeArc } = props;\n // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.\n return !activeArc \|\| activeArc.length === 0 \|\| legend === undefined \|\| activeArc.includes(legend);\n }\n\n function _renderArcLabel(className: string) {\n const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = props;\n\n if (\n hideLabels \|\|\n Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 \|\|\n (activeArc !== data!.data.legend && activeArc !== '')\n ) {\n return null;\n }\n\n const [base, perp] = arc.centroid({ ...data!, innerRadius, outerRadius });\n const hyp = Math.sqrt(base base + perp * perp);\n const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n const angle = (data!.startAngle + data!.endAngle) / 2;\n const arcValue = data!.value;\n\n return (\n <text\n x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n textAnchor={angle > Math.PI !== _isRTL ? 'end' : 'start'}\n dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n className={className}\n aria-hidden={true}\n >\n {showLabelsInPercent\n ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n : formatScientificLimitWidth(arcValue)}\n </text>\n );\n }\n\n function _updateChart(newProps: ArcProps): void {\n if (newProps.arc && newProps.innerRadius && newProps.outerRadius) {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n }\n }\n\n const { href, focusedArcId } = props;\n //TO DO 'replace' is throwing error\n const id =\n props.uniqText! +\n (typeof props.data!.data.legend === 'string' ? props.data!.data.legend.replace(/\\s+/g, '') : '') +\n props.data!.data.data;\n const opacity: number = props.activeArc === props.data!.data.legend \|\| props.activeArc === '' ? 1 : 0.1;\n const cornerRadius = props.roundCorners ? 3 : 0;\n return (\n <g ref={currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n // TODO innerradius and outerradius were absent\n <path\n id={id + 'focusRing'}\n d={\n arc.cornerRadius(cornerRadius)({\n ...props.data!,\n innerRadius: props.innerRadius,\n outerRadius: props.outerRadius,\n })!\n }\n className={classes.focusRing}\n />\n )}\n <path\n // TODO innerradius and outerradius were absent\n id={id}\n d={\n arc.cornerRadius(cornerRadius)({\n ...props.data!,\n innerRadius: props.innerRadius,\n outerRadius: props.outerRadius,\n })!\n }\n className={classes.root}\n style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}\n onFocus={event => _onFocus(props.data!.data, id, event)}\n data-is-focusable={props.activeArc === props.data!.data.legend \|\| props.activeArc === ''}\n onMouseOver={event => _hoverOn(props.data!.data, event)}\n onMouseMove={event => _hoverOn(props.data!.data, event)}\n onMouseLeave={_hoverOff}\n tabIndex={_shouldHighlightArc(props.data!.data.legend!) ? 0 : undefined}\n onBlur={_onBlur}\n opacity={opacity}\n onClick={props.data?.data.onClick}\n aria-label={_getAriaLabel()}\n role=\"img\"\n />\n {_renderArcLabel(classes.arcLabel)}\n </g>\n );\n },\n);\nArc.displayName = 'Arc';\n"],"names":["React","arc","d3Arc","useArcStyles","format","d3Format","formatScientificLimitWidth","useRtl","Arc","forwardRef","props","forwardedRef","currentRef","createRef","_isRTL","classes","useEffect","_updateChart","_onFocus","data","id","event","onFocusCallback","current","_hoverOn","mouseEvent","persist","hoverOnCallback","_hoverOff","hoverLeaveCallback","_onBlur","onBlurCallback","_getAriaLabel","point","legend","xAxisCalloutData","yValue","yAxisCalloutData","callOutAccessibilityData","ariaLabel","_shouldHighlightArc","activeArc","length","undefined","includes","_renderArcLabel","className","innerRadius","outerRadius","showLabelsInPercent","totalValue","hideLabels","Math","abs","endAngle","startAngle","PI","base","perp","centroid","hyp","sqrt","labelRadius","max","angle","arcValue","value","text","x","y","textAnchor","dominantBaseline","aria-hidden","newProps","href","focusedArcId","uniqText","replace","opacity","cornerRadius","roundCorners","g","ref","path","d","focusRing","root","style","fill","color","cursor","onFocus","data-is-focusable","onMouseOver","onMouseMove","onMouseLeave","tabIndex","onBlur","onClick","aria-label","role","arcLabel","displayName"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/DonutChart/Arc/Arc.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { useArcStyles } from './useArcStyles.styles';\nimport { ChartDataPoint } from '../index';\nimport { ArcProps } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatScientificLimitWidth, useRtl } from '../../../utilities/index';\n\n// Create a Arc within Donut Chart variant which uses these default styles and this styled subcomponent.\n/*\n Arc component within Donut Chart.\n * {@docCategory ArcDonutChart}\n /\nexport const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivElement, ArcProps>(\n (props, forwardedRef) => {\n const arc = d3Arc();\n const currentRef = React.createRef<SVGPathElement>();\n const _isRTL: boolean = useRtl();\n const classes = useArcStyles(props);\n\n React.useEffect(() => {\n _updateChart(props);\n }, [props]);\n\n function _onFocus(data: ChartDataPoint, id: string, event: React.FocusEvent<SVGPathElement, Element>): void {\n props.onFocusCallback!(data, id, event, currentRef.current);\n }\n\n function _hoverOn(data: ChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n props.hoverOnCallback!(data, mouseEvent);\n }\n\n function _hoverOff(): void {\n props.hoverLeaveCallback!();\n }\n\n function _onBlur(): void {\n props.onBlurCallback!();\n }\n\n function _getAriaLabel(): string {\n const point = props.data!.data;\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n }\n\n function _shouldHighlightArc(legend?: string): boolean {\n const { activeArc } = props;\n // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.\n return !activeArc \|\| activeArc.length === 0 \|\| legend === undefined \|\| activeArc.includes(legend);\n }\n\n function _renderArcLabel(className: string) {\n const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels } = props;\n\n if (\n hideLabels \|\|\n Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 \|\|\n !_shouldHighlightArc(data!.data.legend!)\n ) {\n return null;\n }\n\n const [base, perp] = arc.centroid({ ...data!, innerRadius, outerRadius });\n const hyp = Math.sqrt(base base + perp * perp);\n const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n const angle = (data!.startAngle + data!.endAngle) / 2;\n const arcValue = data!.value;\n\n return (\n <text\n x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n textAnchor={angle > Math.PI !== _isRTL ? 'end' : 'start'}\n dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n className={className}\n aria-hidden={true}\n >\n {showLabelsInPercent\n ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n : formatScientificLimitWidth(arcValue)}\n </text>\n );\n }\n\n function _updateChart(newProps: ArcProps): void {\n if (newProps.arc && newProps.innerRadius && newProps.outerRadius) {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n }\n }\n\n const { href, focusedArcId, activeArc } = props;\n //TO DO 'replace' is throwing error\n const id =\n props.uniqText! +\n (typeof props.data!.data.legend === 'string' ? props.data!.data.legend.replace(/\\s+/g, '') : '') +\n props.data!.data.data;\n const opacity: number =\n activeArc && activeArc.length > 0 ? (activeArc.includes(props.data?.data.legend!) ? 1 : 0.1) : 1;\n const cornerRadius = props.roundCorners ? 3 : 0;\n return (\n <g ref={currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n // TODO innerradius and outerradius were absent\n <path\n id={id + 'focusRing'}\n d={\n arc.cornerRadius(cornerRadius)({\n ...props.data!,\n innerRadius: props.innerRadius,\n outerRadius: props.outerRadius,\n })!\n }\n className={classes.focusRing}\n />\n )}\n <path\n // TODO innerradius and outerradius were absent\n id={id}\n d={\n arc.cornerRadius(cornerRadius)({\n ...props.data!,\n innerRadius: props.innerRadius,\n outerRadius: props.outerRadius,\n })!\n }\n className={classes.root}\n style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}\n onFocus={event => _onFocus(props.data!.data, id, event)}\n onMouseOver={event => _hoverOn(props.data!.data, event)}\n onMouseMove={event => _hoverOn(props.data!.data, event)}\n onMouseLeave={_hoverOff}\n tabIndex={_shouldHighlightArc(props.data!.data.legend!) \|\| props.activeArc?.length === 0 ? 0 : undefined}\n onBlur={_onBlur}\n opacity={opacity}\n onClick={props.data?.data.onClick}\n aria-label={_getAriaLabel()}\n role=\"img\"\n />\n {_renderArcLabel(classes.arcLabel)}\n </g>\n );\n },\n);\nArc.displayName = 'Arc';\n"],"names":["React","arc","d3Arc","useArcStyles","format","d3Format","formatScientificLimitWidth","useRtl","Arc","forwardRef","props","forwardedRef","currentRef","createRef","_isRTL","classes","useEffect","_updateChart","_onFocus","data","id","event","onFocusCallback","current","_hoverOn","mouseEvent","persist","hoverOnCallback","_hoverOff","hoverLeaveCallback","_onBlur","onBlurCallback","_getAriaLabel","point","legend","xAxisCalloutData","yValue","yAxisCalloutData","callOutAccessibilityData","ariaLabel","_shouldHighlightArc","activeArc","length","undefined","includes","_renderArcLabel","className","innerRadius","outerRadius","showLabelsInPercent","totalValue","hideLabels","Math","abs","endAngle","startAngle","PI","base","perp","centroid","hyp","sqrt","labelRadius","max","angle","arcValue","value","text","x","y","textAnchor","dominantBaseline","aria-hidden","newProps","href","focusedArcId","uniqText","replace","opacity","cornerRadius","roundCorners","g","ref","path","d","focusRing","root","style","fill","color","cursor","onFocus","onMouseOver","onMouseMove","onMouseLeave","tabIndex","onBlur","onClick","aria-label","role","arcLabel","displayName"],"mappings":"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"}

package/lib-commonjs/components/DonutChart/Arc/Arc.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DonutChart/Arc/Arc.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\nexport interface ArcProps {\n /*\n Data to render in the Arc.\n /\n data?: ArcData;\n\n /\n Data to render focused Arc\n /\n focusData?: ArcData;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n /\n shape for Arc.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n arc?: any;\n\n /\n innerRadius of the Arc.\n /\n innerRadius: number;\n\n /\n outerRadius of the Arc.\n /\n outerRadius: number;\n\n /\n Color for the Arc.\n /\n color: string;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n\n /\n Uniq string for chart\n /\n uniqText?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n Active Arc for chart\n /\n activeArc?: string;\n\n /\n internal prop for href\n /\n href?: string;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Prop to show the arc labels in percentage format\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop used to define the sum of all arc values\n /\n totalValue?: number;\n\n /\n Prop to hide the arc labels\n /\n hideLabels?: boolean;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: ArcStyles;\n\n /\n Additional CSS class(es) to apply to the Chart.\n /\n className?: string;\n\n /\n Prop to enable the round corners in the chart\n * @default false\n /\n roundCorners?: boolean;\n}\n\nexport interface ArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: ChartDataPoint;\n /\n endAngle of the Arc\n /\n endAngle: number;\n /\n index of the Arc\n /\n index: number;\n /\n padAngle of the Arc\n /\n padAngle: number;\n /\n startAngle of the Arc\n /\n startAngle: number;\n /\n value of the Arc\n /\n value: number;\n}\n\nexport interface ArcStyles {\n /\n Style set for the card header component root\n /\n root: string;\n\n /\n styles for the focus\n /\n focusRing: string;\n\n /\n Style for the arc labels\n */\n arcLabel: string;\n}\n"],"names":[],"mappings":""}
1	+ {"version":3,"sources":["../src/components/DonutChart/Arc/Arc.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\nexport interface ArcProps {\n /*\n Data to render in the Arc.\n /\n data?: ArcData;\n\n /\n Data to render focused Arc\n /\n focusData?: ArcData;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n /\n shape for Arc.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n arc?: any;\n\n /\n innerRadius of the Arc.\n /\n innerRadius: number;\n\n /\n outerRadius of the Arc.\n /\n outerRadius: number;\n\n /\n Color for the Arc.\n /\n color: string;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n\n /\n Uniq string for chart\n /\n uniqText?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n Active Arc for chart\n /\n activeArc?: string[];\n\n /\n internal prop for href\n /\n href?: string;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Prop to show the arc labels in percentage format\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop used to define the sum of all arc values\n /\n totalValue?: number;\n\n /\n Prop to hide the arc labels\n /\n hideLabels?: boolean;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: ArcStyles;\n\n /\n Additional CSS class(es) to apply to the Chart.\n /\n className?: string;\n\n /\n Prop to enable the round corners in the chart\n * @default false\n /\n roundCorners?: boolean;\n}\n\nexport interface ArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: ChartDataPoint;\n /\n endAngle of the Arc\n /\n endAngle: number;\n /\n index of the Arc\n /\n index: number;\n /\n padAngle of the Arc\n /\n padAngle: number;\n /\n startAngle of the Arc\n /\n startAngle: number;\n /\n value of the Arc\n /\n value: number;\n}\n\nexport interface ArcStyles {\n /\n Style set for the card header component root\n /\n root: string;\n\n /\n styles for the focus\n /\n focusRing: string;\n\n /\n Style for the arc labels\n */\n arcLabel: string;\n}\n"],"names":[],"mappings":""}

package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -53,7 +54,8 @@ const donutArcClassNames = {
         Be2twd7: "fy9rknc",
         Bhrd7zp: "fl43uef",
         Bg96gwp: "fwrc4pm",
-        Bkfmm31: "fhuob2q"
+        Bkfmm31: "fhuob2q",
+        Bpvj6i6: "f1l20po4"
     }
 }, {
     d: [
@@ -77,6 +79,14 @@ const donutArcClassNames = {
         ".fl43uef{font-weight:var(--fontWeightSemibold);}",
         ".fwrc4pm{line-height:var(--lineHeightBase200);}",
         ".fhuob2q{fill:var(--colorNeutralForeground1);}"
+    ],
+    m: [
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1l20po4{stroke:CanvasText;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ]
     ]
 });
 const useArcStyles = (props)=>{

package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useArcStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/*\n @internal\n / export const donutArcClassNames = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n cursor: 'default',\n outline: 'transparent',\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0')\n }\n }\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent'\n },\n arcLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1\n }\n});\n/\n Apply styling to the Arc components\n */ export const useArcStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.arcLabel)\n };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","donutArcClassNames","root","focusRing","arcLabel","useStyles","Bceei9c","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","ojy3ng","B4ncu3z","zxy5zd","bkw2yb","Bjksbd0","Be5yapy","Bkfmm31","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useArcStyles","props","_props_styles","_props_styles1","_props_styles2","className","baseStyles","styles"],"mappings":"~~;;;;;;;;;;;IAIiBK~~,kBAAkB;;;~~gBA8BN;eAAZuB;;;uBAlCoC~~,gBAAgB;~~AAI1D~~,2BAA2B;~~IAClCtB~~,IAAI,EAAE,qBAAqB;IAC3BC,SAAS,EAAE,0BAA0B;IACrCC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,~~OAAGT~~,eAAA,EAAA;~~IAAAM~~,IAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAZ,SAAA,EAAA;QAAAQ,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAb,QAAA,EAAA;QAAAc,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAJ,OAAA,EAAA;IAAA;AAAA,GAAA;~~IAAAK~~,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,~~CAoBrB~~,CAAC;AAGS,sBAAsBE,KAAK,IAAG;IACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;IACjD,MAAM,EAAEC,SAAAA,EAAW,GAAGJ,KAAK;IAC3B,MAAMK,UAAU,~~GAAGzB~~,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHH,IAAI,~~MAAEL~~,mBAAY,~~EAACI~~,kBAAkB,CAACC,IAAI,~~EAAE4B~~,UAAU,~~CAAC5B~~,IAAI,~~EAAE2B~~,SAAS,EAAE,~~AAACH~~,aAAa,~~IAAGD~~,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,~~CAACxB~~,IAAI,CAAC;QAC1KC,SAAS,~~MAAEN~~,mBAAY,~~EAACI~~,kBAAkB,CAACE,SAAS,~~EAAE2B~~,UAAU,~~CAAC3B~~,SAAS,EAAE,~~CAACwB~~,cAAc,GAAGF,KAAK,CAACM,~~MAAAA~~,~~AAAM~~,~~MAAM~~,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACxB~~,SAAS,CAAC;QACtLC,QAAQ,~~MAAEP~~,mBAAY,~~EAACI~~,kBAAkB,CAACG,QAAQ,~~EAAE0B~~,UAAU,~~CAAC1B~~,QAAQ,EAAE,~~CAACwB~~,cAAc,GAAGH,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACxB~~,QAAQ;IACrL,CAAC;AACL,CAAC"}
1	+ {"version":3,"sources":["useArcStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../../utilities/utilities';\n/*\n @internal\n / export const donutArcClassNames = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n cursor: 'default',\n outline: 'transparent',\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0')\n }\n }\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent'\n },\n arcLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n stroke: 'CanvasText'\n }\n }\n});\n/\n Apply styling to the Arc components\n */ export const useArcStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.arcLabel)\n };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","donutArcClassNames","root","focusRing","arcLabel","useStyles","Bceei9c","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","ojy3ng","B4ncu3z","zxy5zd","bkw2yb","Bjksbd0","Be5yapy","Bkfmm31","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bpvj6i6","d","p","m","useArcStyles","props","_props_styles","_props_styles1","_props_styles2","className","baseStyles","styles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAMKM,kBAAkB;;;IAiClByB,YAAY;;;;uBAtCwB,gBAAgB;AAK1D,2BAA2B;IAClCxB,IAAI,EAAE,qBAAqB;IAC3BC,SAAS,EAAE,0BAA0B;IACrCC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAZ,SAAA,EAAA;QAAAQ,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAb,QAAA,EAAA;QAAAc,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAK,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAuBrB,CAAC;AAGS,sBAAsBE,KAAK,IAAG;IACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;IACjD,MAAM,EAAEC,SAAAA,EAAW,GAAGJ,KAAK;IAC3B,MAAMK,UAAU,GAAG3B,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHH,IAAI,MAAEN,mBAAY,EAACK,kBAAkB,CAACC,IAAI,EAAE8B,UAAU,CAAC9B,IAAI,EAAE6B,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC1B,IAAI,CAAC;QAC1KC,SAAS,MAAEP,mBAAY,EAACK,kBAAkB,CAACE,SAAS,EAAE6B,UAAU,CAAC7B,SAAS,EAAE,CAAC0B,cAAc,GAAGF,KAAK,CAACM,MAAM,AAANA,MAAY,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1B,SAAS,CAAC;QACtLC,QAAQ,MAAER,mBAAY,EAACK,kBAAkB,CAACG,QAAQ,EAAE4B,UAAU,CAAC5B,QAAQ,EAAE,CAAC0B,cAAc,GAAGH,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1B,QAAQ;IACrL,CAAC;AACL,CAAC"}

package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -18,6 +19,7 @@ _export(exports, {
 });
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
+const _utilities = require("../../../utilities/utilities");
 const donutArcClassNames = {
     root: 'fui-donut-arc__root',
     focusRing: 'fui-donut-arc__focusRing',
@@ -43,7 +45,10 @@ const donutArcClassNames = {
     },
     arcLabel: {
         ..._reacttheme.typographyStyles.caption1Strong,
-        fill: _reacttheme.tokens.colorNeutralForeground1
+        fill: _reacttheme.tokens.colorNeutralForeground1,
+        [_utilities.HighContrastSelector]: {
+            stroke: 'CanvasText'
+        }
     }
 });
 const useArcStyles = (props)=>{

package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DonutChart/Arc/useArcStyles.styles.ts"],"sourcesContent":["~~import~~ { ArcProps, ArcStyles } from './Arc.types';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/*\n @internal\n /\nexport const donutArcClassNames: SlotClassNames<ArcStyles> = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n cursor: 'default',\n outline: 'transparent',\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0'),\n },\n },\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent',\n },\n arcLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n },\n});\n\n/\n Apply styling to the Arc components\n */\nexport const useArcStyles = (props: ArcProps): ArcStyles => {\n const { className } = props;\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, props.styles?.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, props.styles?.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, props.styles?.arcLabel),\n };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","donutArcClassNames","root","focusRing","arcLabel","useStyles","cursor","outline","stroke","colorNeutralBackground1","border","colorStrokeFocus2","strokeWidth","strokeWidthThickest","fill","caption1Strong","colorNeutralForeground1","useArcStyles","props","className","baseStyles","styles"],"mappings":"~~;;;;;;;;;;;IAQaK~~,kBAAAA;;;~~IAkCAgB~~,~~YAAAA;;;;uBAzCwC,~~iBAAiB;4BAC7B,wBAAwB;~~AAM1D~~,2BAAsD;IAC3Df,MAAM;IACNC,WAAW;IACXC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,~~gBAAYT~~,iBAAAA,EAAW;~~IAC3BM~~,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,~~QAAQT~~,kBAAAA,~~CAAOU~~,uBAAuB;QACtC,eAAe;YACb,sBAAsB;gBACpB,~~GAAGX~~,iBAAAA,~~CAAWY~~,MAAM,CAAC,IAAI;YAC3B;QACF;IACF;IACAP,WAAW;QACTK,~~QAAQT~~,kBAAAA,~~CAAOY~~,iBAAiB;QAChCC,~~aAAab~~,kBAAAA,~~CAAOc~~,mBAAmB;QACvCC,MAAM;IACR;IACAV,UAAU;QACR,~~GAAGJ~~,4BAAAA,~~CAAiBe~~,cAAc;QAClCD,~~MAAMf~~,kBAAAA,~~CAAOiB~~,uBAAuB;~~IACtC~~;AACF;AAKO,qBAAqB,~~CAACE~~;QAK+CA,eACIA,gBACHA;IAN3E,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAaf;IAEnB,OAAO;QACLH,~~UAAML~~,mBAAAA,~~EAAaI~~,mBAAmBC,IAAI,EAAEkB,WAAWlB,IAAI,EAAEiB,WAAAA,CAAWD,gBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAchB,IAAI;QAC1FC,~~eAAWN~~,mBAAAA,~~EAAaI~~,mBAAmBE,SAAS,EAAEiB,WAAWjB,SAAS,EAAA,CAAEe,iBAAAA,MAAMG,~~MAAM~~,~~AAANA~~,~~MAAM~~,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcf,SAAS;QACnGC,~~cAAUP~~,mBAAAA,~~EAAaI~~,mBAAmBG,QAAQ,EAAEgB,WAAWhB,QAAQ,EAAA,CAAEc,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcd,QAAQ;IACjG;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/DonutChart/Arc/useArcStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { ArcProps, ArcStyles } from './Arc.types';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { HighContrastSelector } from '../../../utilities/utilities';\n\n/*\n @internal\n /\nexport const donutArcClassNames: SlotClassNames<ArcStyles> = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n cursor: 'default',\n outline: 'transparent',\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0'),\n },\n },\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent',\n },\n arcLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n stroke: 'CanvasText',\n },\n },\n});\n\n/\n Apply styling to the Arc components\n */\nexport const useArcStyles = (props: ArcProps): ArcStyles => {\n const { className } = props;\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, props.styles?.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, props.styles?.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, props.styles?.arcLabel),\n };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","donutArcClassNames","root","focusRing","arcLabel","useStyles","cursor","outline","stroke","colorNeutralBackground1","border","colorStrokeFocus2","strokeWidth","strokeWidthThickest","fill","caption1Strong","colorNeutralForeground1","useArcStyles","props","className","baseStyles","styles"],"mappings":"AAAA;;;;;;;;;;;;IAWaM,kBAAAA;;;gBAqCAgB;eAAAA;;;uBA7CwC,iBAAiB;4BAC7B,wBAAwB;2BAE5B,+BAA+B;AAK7D,2BAAsD;IAC3Df,MAAM;IACNC,WAAW;IACXC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BO,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,QAAQV,kBAAAA,CAAOW,uBAAuB;QACtC,eAAe;YACb,sBAAsB;gBACpB,GAAGZ,iBAAAA,CAAWa,MAAM,CAAC,IAAI;YAC3B;QACF;IACF;IACAP,WAAW;QACTK,QAAQV,kBAAAA,CAAOa,iBAAiB;QAChCC,aAAad,kBAAAA,CAAOe,mBAAmB;QACvCC,MAAM;IACR;IACAV,UAAU;QACR,GAAGL,4BAAAA,CAAiBgB,cAAc;QAClCD,MAAMhB,kBAAAA,CAAOkB,uBAAuB;QACpC,CAAChB,+BAAAA,CAAqB,EAAE;YACtBQ,QAAQ;QACV;IACF;AACF;AAKO,qBAAqB,CAACU;QAK+CA,eACIA,gBACHA;IAN3E,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAaf;IAEnB,OAAO;QACLH,UAAMN,mBAAAA,EAAaK,mBAAmBC,IAAI,EAAEkB,WAAWlB,IAAI,EAAEiB,WAAAA,CAAWD,gBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAchB,IAAI;QAC1FC,eAAWP,mBAAAA,EAAaK,mBAAmBE,SAAS,EAAEiB,WAAWjB,SAAS,EAAA,CAAEe,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcf,SAAS;QACnGC,cAAUR,mBAAAA,EAAaK,mBAAmBG,QAAQ,EAAEgB,WAAWhB,QAAQ,EAAA,CAAEc,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcd,QAAQ;IACjG;AACF,EAAE"}

package/lib-commonjs/components/DonutChart/DonutChart.js CHANGED Viewed

@@ -1,4 +1,5 @@
-/* eslint-disable react/jsx-no-bind */ "use strict";
+'use client';
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -21,6 +22,7 @@ const _ChartPopover = require("../CommonComponents/ChartPopover");
 const _imageexportutils = require("../../utilities/image-export-utils");
 const MIN_LEGEND_CONTAINER_HEIGHT = 40;
 const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    var _props_legendProps;
     const _rootElem = _react.useRef(null);
     const _uniqText = (0, _reactutilities.useId)('_Pie_');
     /* eslint-disable @typescript-eslint/no-explicit-any */ let _calloutAnchorPoint;
@@ -31,11 +33,11 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const [legend, setLegend] = _react.useState('');
     const [_width, setWidth] = _react.useState(props.width || 200);
     const [_height, setHeight] = _react.useState(props.height || 200);
-    const [activeLegend, setActiveLegend] = _react.useState('');
+    const [activeLegend, setActiveLegend] = _react.useState(undefined);
     const [color, setColor] = _react.useState('');
     const [xCalloutValue, setXCalloutValue] = _react.useState('');
     const [yCalloutValue, setYCalloutValue] = _react.useState('');
-    const [selectedLegend, setSelectedLegend] = _react.useState('');
+    const [selectedLegends, setSelectedLegends] = _react.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const [focusedArcId, setFocusedArcId] = _react.useState('');
     const [dataPointCalloutProps, setDataPointCalloutProps] = _react.useState();
     const [clickPosition, setClickPosition] = _react.useState({
@@ -43,11 +45,25 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         y: 0
     });
     const [isPopoverOpen, setPopoverOpen] = _react.useState(false);
+    const prevPropsRef = _react.useRef(null);
     const _legendsRef = _react.useRef(null);
     const _isRTL = (0, _index1.useRtl)();
     _react.useEffect(()=>{
         _fitParentContainer();
     }, []);
+    _react.useEffect(()=>{
+        if (prevPropsRef.current) {
+            var _prevProps_legendProps, _props_legendProps;
+            const prevProps = prevPropsRef.current;
+            if (!(0, _index1.areArraysEqual)((_prevProps_legendProps = prevProps.legendProps) === null || _prevProps_legendProps === void 0 ? void 0 : _prevProps_legendProps.selectedLegends, (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends)) {
+                var _props_legendProps1;
+                setSelectedLegends(((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends) || []);
+            }
+        }
+        prevPropsRef.current = props;
+    }, [
+        props
+    ]);
     _react.useEffect(()=>{
         if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {
             _fitParentContainer();
@@ -88,19 +104,12 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             const legend = {
                 title: point.legend,
                 color,
-                action: ()=>{
-                    if (selectedLegend === point.legend) {
-                        setSelectedLegend('');
-                    } else {
-                        setSelectedLegend(point.legend);
-                    }
-                },
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
                     setActiveLegend(point.legend);
                 },
                 onMouseOutAction: ()=>{
-                    setActiveLegend('');
+                    setActiveLegend(undefined);
                 }
             };
             return legend;
@@ -110,10 +119,23 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             centerLegends: true,
             overflowText: props.legendsOverflowText,
             ...props.legendProps,
+            // eslint-disable-next-line react/jsx-no-bind
+            onChange: _onLegendSelectionChange,
             legendRef: _legendsRef
         });
         return legends;
     }
+    function _onLegendSelectionChange(selectedLegends, event, currentLegend) {
+        var _props_legendProps, _props_legendProps1;
+        if (props.legendProps && ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends)) {
+            setSelectedLegends(selectedLegends);
+        } else {
+            setSelectedLegends(selectedLegends.slice(-1));
+        }
+        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
+            props.legendProps.onChange(selectedLegends, event, currentLegend);
+        }
+    }
     function _focusCallback(data, id, e) {
         let cx = 0;
         let cy = 0;
@@ -121,7 +143,7 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         cx = targetRect.left + targetRect.width / 2;
         cy = targetRect.top + targetRect.height / 2;
         updatePosition(cx, cy);
-        setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
+        setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));
         setValue(data.data.toString());
         setLegend(data.legend);
         setColor(data.color);
@@ -133,7 +155,7 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _hoverCallback(data, e) {
         if (_calloutAnchorPoint !== data) {
             _calloutAnchorPoint = data;
-            setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
+            setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));
             setValue(data.data.toString());
             setLegend(data.legend);
             setColor(data.color);
@@ -153,16 +175,18 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         setPopoverOpen(false);
     }
     function _valueInsideDonut(valueInsideDonut, data) {
-        const highlightedLegend = _getHighlightedLegend();
-        if (valueInsideDonut !== undefined && (highlightedLegend !== '' || isPopoverOpen)) {
-            let legendValue = valueInsideDonut;
-            data.map((point, index)=>{
-                if (point.legend === highlightedLegend || isPopoverOpen && point.legend === legend) {
-                    legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data;
+        const highlightedLegends = _getHighlightedLegend();
+        if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {
+            const pointValue = data.find((point)=>_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;
         }
@@ -178,9 +202,16 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
      * This function returns
      * the selected legend if there is one
      * or the hovered legend if none of the legends is selected.
-     * Note: This won't work in case of multiple legends selection.
      */ function _getHighlightedLegend() {
-        return selectedLegend || activeLegend;
+        return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [
+            activeLegend
+        ] : [];
+    }
+    function _isLegendHighlighted(legend) {
+        return _getHighlightedLegend().includes(legend);
+    }
+    function _noLegendsHighlighted() {
+        return _getHighlightedLegend().length === 0;
     }
     function _isChartEmpty() {
         return !(props.data && props.data.chartData && props.data.chartData.filter((d)=>d.data > 0).length > 0);
@@ -253,7 +284,12 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         className: classes.root,
         ref: (rootElem)=>_rootElem.current = rootElem,
         onMouseLeave: _handleChartMouseLeave
-    }, /*#__PURE__*/ _react.createElement("div", {
+    }, props.xAxisAnnotation && /*#__PURE__*/ _react.createElement("text", {
+        className: classes.axisAnnotation,
+        x: _width / 2,
+        y: _height - 10,
+        textAnchor: "middle"
+    }, props.xAxisAnnotation), /*#__PURE__*/ _react.createElement("div", {
         className: classes.chartWrapper,
         ...focusAttributes
     }, /*#__PURE__*/ _react.createElement("svg", {
@@ -283,7 +319,7 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         yCalloutValue: yCalloutValue,
         culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
         clickPosition: clickPosition,
-        isPopoverOpen: !props.hideTooltip && isPopoverOpen,
+        isPopoverOpen: !props.hideTooltip && isPopoverOpen && (_noLegendsHighlighted() || _isLegendHighlighted(legend)),
         legend: legend,
         YValue: value,
         color: color,