@fluentui/react-charts 9.2.4 → 9.3.1

package/lib/components/DeclarativeChart/imageExporter.js

@@ -1,3 +1,4 @@
+'use client';
 import { create as d3Create, select as d3Select } from 'd3-selection';
 import { resolveCSSVariables } from '../../utilities/index';
 export function toImage(chartContainer, opts = {}) {

package/lib/components/DeclarativeChart/imageExporter.js.map

@@ -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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"}
+{"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/components/DonutChart/Arc/Arc.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { arc as d3Arc } from 'd3-shape';
 import { useArcStyles } from './useArcStyles.styles';
@@ -8,7 +9,7 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
  * Arc component within Donut Chart.
  * {@docCategory ArcDonutChart}
  */ export const Arc = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    var _props_data;
+    var _props_data, _props_activeArc, _props_data1;
     const arc = d3Arc();
     const currentRef = /*#__PURE__*/ React.createRef();
     const _isRTL = useRtl();
@@ -44,8 +45,8 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
         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({
@@ -72,10 +73,10 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
             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
@@ -102,14 +103,13 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
             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/components/DonutChart/Arc/Arc.js.map

@@ -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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"}
+{"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/components/DonutChart/Arc/Arc.types.js.map

@@ -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":"AA6IA,WAeC"}
+{"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":"AA6IA,WAeC"}

package/lib/components/DonutChart/Arc/useArcStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../../utilities/utilities';
@@ -33,7 +35,7 @@ const useStyles = /*#__PURE__*/__styles({
   arcLabel: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
-    Bhrd7zp: "figsok6",
+    Bhrd7zp: "fl43uef",
     Bg96gwp: "fwrc4pm",
     Bkfmm31: "fhuob2q",
     Bpvj6i6: "f1l20po4"
@@ -41,7 +43,7 @@ const useStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f158kwzp{cursor:default;}", [".f1391ufr{outline:transparent;}", {
     p: -1
-  }], ".f1yuyku4{stroke:var(--colorNeutralBackground1);}", ".f138xzbb selectors::-moz-focus-inner{border-top-width:0;}", ".fny96iz selectors::-moz-focus-inner{border-right-width:0;}", ".fi0bkha selectors::-moz-focus-inner{border-left-width:0;}", ".f1jv8gm3 selectors::-moz-focus-inner{border-bottom-width:0;}", ".frcfrt5{stroke:var(--colorStrokeFocus2);}", ".f9nnx8l{stroke-width:var(--strokeWidthThickest);}", ".f1au8mb3{fill:transparent;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"],
+  }], ".f1yuyku4{stroke:var(--colorNeutralBackground1);}", ".f138xzbb selectors::-moz-focus-inner{border-top-width:0;}", ".fny96iz selectors::-moz-focus-inner{border-right-width:0;}", ".fi0bkha selectors::-moz-focus-inner{border-left-width:0;}", ".f1jv8gm3 selectors::-moz-focus-inner{border-bottom-width:0;}", ".frcfrt5{stroke:var(--colorStrokeFocus2);}", ".f9nnx8l{stroke-width:var(--strokeWidthThickest);}", ".f1au8mb3{fill:transparent;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".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)"
   }]]

package/lib/components/DonutChart/Arc/useArcStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"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"],"sources":["useArcStyles.styles.js"],"sourcesContent":["import { 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.caption1,\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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAG;EAClCC,IAAI,EAAE,qBAAqB;EAC3BC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAO,IAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,SAAA;IAAAQ,MAAA;IAAAK,OAAA;IAAAC,OAAA;EAAA;EAAAb,QAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAJ,OAAA;IAAAK,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,YAAY,GAAIC,KAAK,IAAG;EACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;EACjD,MAAM;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAG3B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEN,YAAY,CAACK,kBAAkB,CAACC,IAAI,EAAE8B,UAAU,CAAC9B,IAAI,EAAE6B,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC1B,IAAI,CAAC;IAC1KC,SAAS,EAAEP,YAAY,CAACK,kBAAkB,CAACE,SAAS,EAAE6B,UAAU,CAAC7B,SAAS,EAAE,CAAC0B,cAAc,GAAGF,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1B,SAAS,CAAC;IACtLC,QAAQ,EAAER,YAAY,CAACK,kBAAkB,CAACG,QAAQ,EAAE4B,UAAU,CAAC5B,QAAQ,EAAE,CAAC0B,cAAc,GAAGH,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1B,QAAQ;EACrL,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAG;EAClCC,IAAI,EAAE,qBAAqB;EAC3BC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAO,IAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,SAAA;IAAAQ,MAAA;IAAAK,OAAA;IAAAC,OAAA;EAAA;EAAAb,QAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAJ,OAAA;IAAAK,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,YAAY,GAAIC,KAAK,IAAG;EACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;EACjD,MAAM;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAG3B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEN,YAAY,CAACK,kBAAkB,CAACC,IAAI,EAAE8B,UAAU,CAAC9B,IAAI,EAAE6B,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC1B,IAAI,CAAC;IAC1KC,SAAS,EAAEP,YAAY,CAACK,kBAAkB,CAACE,SAAS,EAAE6B,UAAU,CAAC7B,SAAS,EAAE,CAAC0B,cAAc,GAAGF,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1B,SAAS,CAAC;IACtLC,QAAQ,EAAER,YAAY,CAACK,kBAAkB,CAACG,QAAQ,EAAE4B,UAAU,CAAC5B,QAAQ,EAAE,CAAC0B,cAAc,GAAGH,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1B,QAAQ;EACrL,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/DonutChart/Arc/useArcStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../../utilities/utilities';
@@ -27,7 +28,7 @@ import { HighContrastSelector } from '../../../utilities/utilities';
         fill: 'transparent'
     },
     arcLabel: {
-        ...typographyStyles.caption1,
+        ...typographyStyles.caption1Strong,
         fill: tokens.colorNeutralForeground1,
         [HighContrastSelector]: {
             stroke: 'CanvasText'

package/lib/components/DonutChart/Arc/useArcStyles.styles.raw.js.map

@@ -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';\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.caption1,\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","caption1","colorNeutralForeground1","useArcStyles","props","className","baseStyles","styles"],"mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,SAASC,oBAAoB,QAAQ,+BAA+B;AAEpE;;CAEC,GACD,OAAO,MAAMC,qBAAgD;IAC3DC,MAAM;IACNC,WAAW;IACXC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BO,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,QAAQV,OAAOW,uBAAuB;QACtC,eAAe;YACb,sBAAsB;gBACpB,GAAGZ,WAAWa,MAAM,CAAC,IAAI;YAC3B;QACF;IACF;IACAP,WAAW;QACTK,QAAQV,OAAOa,iBAAiB;QAChCC,aAAad,OAAOe,mBAAmB;QACvCC,MAAM;IACR;IACAV,UAAU;QACR,GAAGL,iBAAiBgB,QAAQ;QAC5BD,MAAMhB,OAAOkB,uBAAuB;QACpC,CAAChB,qBAAqB,EAAE;YACtBQ,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMS,eAAe,CAACC;QAK+CA,eACIA,gBACHA;IAN3E,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAaf;IAEnB,OAAO;QACLH,MAAMN,aAAaK,mBAAmBC,IAAI,EAAEkB,WAAWlB,IAAI,EAAEiB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAchB,IAAI;QAC1FC,WAAWP,aAAaK,mBAAmBE,SAAS,EAAEiB,WAAWjB,SAAS,GAAEe,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcf,SAAS;QACnGC,UAAUR,aAAaK,mBAAmBG,QAAQ,EAAEgB,WAAWhB,QAAQ,GAAEc,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcd,QAAQ;IACjG;AACF,EAAE"}
+{"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;AAGA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,SAASC,oBAAoB,QAAQ,+BAA+B;AAEpE;;CAEC,GACD,OAAO,MAAMC,qBAAgD;IAC3DC,MAAM;IACNC,WAAW;IACXC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BO,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,QAAQV,OAAOW,uBAAuB;QACtC,eAAe;YACb,sBAAsB;gBACpB,GAAGZ,WAAWa,MAAM,CAAC,IAAI;YAC3B;QACF;IACF;IACAP,WAAW;QACTK,QAAQV,OAAOa,iBAAiB;QAChCC,aAAad,OAAOe,mBAAmB;QACvCC,MAAM;IACR;IACAV,UAAU;QACR,GAAGL,iBAAiBgB,cAAc;QAClCD,MAAMhB,OAAOkB,uBAAuB;QACpC,CAAChB,qBAAqB,EAAE;YACtBQ,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMS,eAAe,CAACC;QAK+CA,eACIA,gBACHA;IAN3E,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAaf;IAEnB,OAAO;QACLH,MAAMN,aAAaK,mBAAmBC,IAAI,EAAEkB,WAAWlB,IAAI,EAAEiB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAchB,IAAI;QAC1FC,WAAWP,aAAaK,mBAAmBE,SAAS,EAAEiB,WAAWjB,SAAS,GAAEe,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcf,SAAS;QACnGC,UAAUR,aAAaK,mBAAmBG,QAAQ,EAAEgB,WAAWhB,QAAQ,GAAEc,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcd,QAAQ;IACjG;AACF,EAAE"}

package/lib/components/DonutChart/DonutChart.js

@@ -1,8 +1,9 @@
+'use client';
 /* eslint-disable react/jsx-no-bind */ import * as React from 'react';
 import { Pie } from './Pie/index';
 import { useDonutChartStyles } from './useDonutChartStyles.styles';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
-import { getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';
+import { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';
 import { Legends } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
@@ -14,6 +15,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
  * Donutchart component.
  * {@docCategory DonutChart}
  */ export const DonutChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    var _props_legendProps;
     const _rootElem = React.useRef(null);
     const _uniqText = useId('_Pie_');
     /* eslint-disable @typescript-eslint/no-explicit-any */ let _calloutAnchorPoint;
@@ -24,11 +26,11 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
     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({
@@ -36,11 +38,25 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         y: 0
     });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const prevPropsRef = React.useRef(null);
     const _legendsRef = React.useRef(null);
     const _isRTL = useRtl();
     React.useEffect(()=>{
         _fitParentContainer();
     }, []);
+    React.useEffect(()=>{
+        if (prevPropsRef.current) {
+            var _prevProps_legendProps, _props_legendProps;
+            const prevProps = prevPropsRef.current;
+            if (!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();
@@ -81,19 +97,12 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
             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;
@@ -103,10 +112,23 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
             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;
@@ -114,7 +136,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         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);
@@ -126,7 +148,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
     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);
@@ -146,16 +168,18 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         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;
         }
@@ -171,9 +195,16 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
      * 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);
@@ -281,7 +312,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         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,