npm - @fluentui/react-charts - Versions diffs - 9.3.10 → 9.3.12 - Mend

@fluentui/react-charts 9.3.10 → 9.3.12

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 (22) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,43 @@
 # Change Log - @fluentui/react-charts
-This log was last generated on Fri, 30 Jan 2026 12:55:24 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.3.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.12)
+Wed, 25 Feb 2026 13:28:23 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.11..@fluentui/react-charts_v9.3.12)
+### Patches
+- fix: add  missing "use client" directive to client components and styles ([PR #35719](https://github.com/microsoft/fluentui/pull/35719) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-button to v9.8.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-overflow to v9.7.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-popover to v9.13.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-tabster to v9.26.13 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-tooltip to v9.9.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+## [9.3.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.11)
+Thu, 12 Feb 2026 10:46:13 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.10..@fluentui/react-charts_v9.3.11)
+### Patches
+- A11y fix: updated focus-visible outline data ([PR #35718](https://github.com/microsoft/fluentui/pull/35718) by 132879294+v-baambati@users.noreply.github.com)
+- Bump @fluentui/react-button to v9.8.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-overflow to v9.7.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-popover to v9.13.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-tooltip to v9.9.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
 ## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.10)
-Fri, 30 Jan 2026 12:55:24 GMT
+Fri, 30 Jan 2026 12:55:50 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.9..@fluentui/react-charts_v9.3.10)
 ### Patches

package/lib/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __styles } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const useAnnotationOnlyChartStyles = /*#__PURE__*/__styles({

package/lib/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","qhf8xq","mc9l5x","Beiy3e4","Belr9w4","De3pzq","sj55zd","Bahqtrf","content","Bh6795r","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","title","fsow6f","d","p"],"sources":["useAnnotationOnlyChartStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const useAnnotationOnlyChartStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n rowGap: '8px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: typographyStyles.body1.fontFamily\n },\n content: {\n position: 'relative',\n flexGrow: 1,\n backgroundColor: 'transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box'\n },\n title: {\n textAlign: 'center'\n }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,4BAA4B,gBAAGH,QAAA;EAAAI,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAJ,MAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAoB3C,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","qhf8xq","mc9l5x","Beiy3e4","Belr9w4","De3pzq","sj55zd","Bahqtrf","content","Bh6795r","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","title","fsow6f","d","p"],"sources":["useAnnotationOnlyChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const useAnnotationOnlyChartStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n rowGap: '8px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: typographyStyles.body1.fontFamily\n },\n content: {\n position: 'relative',\n flexGrow: 1,\n backgroundColor: 'transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box'\n },\n title: {\n textAlign: 'center'\n }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,4BAA4B,gBAAGH,QAAA;EAAAI,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAJ,MAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAoB3C,CAAC","ignoreList":[]}

package/lib/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const useAnnotationOnlyChartStyles = makeStyles({

package/lib/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.ts"],"sourcesContent":["~~import~~ { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const useAnnotationOnlyChartStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n rowGap: '8px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: typographyStyles.body1.fontFamily,\n },\n content: {\n position: 'relative',\n flexGrow: 1,\n backgroundColor: 'transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n },\n title: {\n textAlign: 'center',\n },\n});\n"],"names":["makeStyles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","position","display","flexDirection","rowGap","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","fontFamily","body1","content","flexGrow","borderRadius","borderRadiusMedium","boxSizing","title","textAlign"],"mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,+BAA+BH,WAAW;IACrDI,MAAM;QACJC,UAAU;QACVC,SAAS;QACTC,eAAe;QACfC,QAAQ;QACRC,iBAAiBR,OAAOS,uBAAuB;QAC/CC,OAAOV,OAAOW,uBAAuB;QACrCC,YAAYX,iBAAiBY,KAAK,CAACD,UAAU;IAC/C;IACAE,SAAS;QACPV,UAAU;QACVW,UAAU;QACVP,iBAAiB;QACjBQ,cAAchB,OAAOiB,kBAAkB;QACvCC,WAAW;IACb;IACAC,OAAO;QACLC,WAAW;IACb;AACF,GAAG"}
1	+ {"version":3,"sources":["../src/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const useAnnotationOnlyChartStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n rowGap: '8px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: typographyStyles.body1.fontFamily,\n },\n content: {\n position: 'relative',\n flexGrow: 1,\n backgroundColor: 'transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n },\n title: {\n textAlign: 'center',\n },\n});\n"],"names":["makeStyles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","position","display","flexDirection","rowGap","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","fontFamily","body1","content","flexGrow","borderRadius","borderRadiusMedium","boxSizing","title","textAlign"],"mappings":"AAAA;AAEA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,+BAA+BH,WAAW;IACrDI,MAAM;QACJC,UAAU;QACVC,SAAS;QACTC,eAAe;QACfC,QAAQ;QACRC,iBAAiBR,OAAOS,uBAAuB;QAC/CC,OAAOV,OAAOW,uBAAuB;QACrCC,YAAYX,iBAAiBY,KAAK,CAACD,UAAU;IAC/C;IACAE,SAAS;QACPV,UAAU;QACVW,UAAU;QACVP,iBAAiB;QACjBQ,cAAchB,OAAOiB,kBAAkB;QACvCC,WAAW;IACb;IACAC,OAAO;QACLC,WAAW;IACb;AACF,GAAG"}

package/lib/components/Legends/useLegendsStyles.styles.js CHANGED Viewed

@@ -67,6 +67,11 @@ const useStyles = /*#__PURE__*/__styles({
     Bf4jedk: "fy77jfu",
     ixv5ic: "f4ji673",
     Bkoo3cm: "fbcj00p",
+    F23esa: 0,
+    Icej2d: 0,
+    B9gsw3i: 0,
+    swriq4: "fzc3p5w",
+    awn1t: "f9kwof",
     Blj5yig: "f15ldg54",
     Fdtwhm: "f1mwmwal"
   },
@@ -221,6 +226,11 @@ const useStyles = /*#__PURE__*/__styles({
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
   }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fbcj00p{forced-color-adjust:none;}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fzc3p5w:focus-visible{outline:var(--strokeWidthThick) solid canvasText;}}", {
+    p: -1,
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f9kwof:focus-visible{outline-offset:calc(var(--strokeWidthThick) * -1);}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
   }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15ldg54:hover{color:HighlightText;}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
   }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1mwmwal:hover{forced-color-adjust:none;}}", {

package/lib/components/Legends/useLegendsStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","Huce71","a9b677","Bt984gj","Brf1p80","Bceei9c","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B9bfxx9","Bf4jedk","ixv5ic","Bkoo3cm","Blj5yig","Fdtwhm","Blctwrt","Bh9kdj0","t21cq0","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","sj55zd","Bvjb7m6","qhf8xq","fsow6f","Bz10aip","Bhzewxz","oyh7mz","B2u0y6b","B4uzyy","Be2s5ez","u6pn5x","smv486","B1nu0jp","B0n5ga8","Bm2nyyq","xrcqlc","wywymt","Gp14am","vfts7","Bhxzhr1","Du69r6","xawz","Bh6795r","Bnnss6s","fkmc3a","jrapky","Frg6f3","B6of3ja","B74szlk","mc9l5x","i8kkvl","Belr9w4","rmohyg","d","p","m","useLegendStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","_props_styles9","className","baseStyles","styles"],"sources":["useLegendsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n/*\n @internal\n */ export const legendClassNames = {\n root: 'fui-legend__root',\n legend: 'fui-legend__legend',\n rect: 'fui-legend__rect',\n shape: 'fui-legend__shape',\n triangle: 'fui-legend__triangle',\n text: 'fui-legend__text',\n hoverChange: 'fui-legend__hoverChange',\n resizableArea: 'fui-legend__resizableArea',\n legendContainer: 'fui-legend__legendContainer',\n annotation: 'fui-legend__annotation'\n};\nconst useStyles = makeStyles({\n root: {\n // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n // in responsive charts where legends consist of multiple words.\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center'\n },\n legend: {\n // setting display to flex does not work\n // display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n cursor: 'pointer',\n border: 'none',\n padding: `${LEGEND_PADDING}px`,\n textTransform: 'capitalize',\n // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n // cartesian charts to resize properly within a flexbox or grid layout.\n minWidth: 0,\n [HighContrastSelector]: {\n color: 'WindowText',\n forcedColorAdjust: 'none'\n },\n '&:hover': {\n [HighContrastSelector]: {\n color: 'HighlightText',\n forcedColorAdjust: 'none'\n }\n }\n },\n rect: {\n [HighContrastSelector]: {\n content: 'var(--rect-content-high-contrast)',\n opacity: 'var(--rect-opacity-high-contrast)'\n },\n width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n border: `${LEGEND_SHAPE_BORDER}px solid`\n },\n shape: {\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`\n },\n // TO DO Add props when these styles are used in the component\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n marginRight: tokens.spacingHorizontalS\n },\n // TO DO Add props when these styles are used in the component\n text: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n // TO DO Add props when these styles are used in the component\n hoverChange: {\n width: '12px',\n height: '12px',\n marginRight: tokens.spacingHorizontalS,\n border: '1px solid'\n },\n resizableArea: {\n position: 'relative',\n textAlign: 'left',\n transform: 'translate(-50%, 0)',\n top: 'auto',\n left: '50%',\n minWidth: '200px',\n maxWidth: '800px',\n '::after': {\n padding: '1px 4px 1px',\n borderTop: '-2px',\n borderLeft: '-2px'\n }\n },\n legendContainer: {\n flex: '0 1 auto',\n margin: '4px'\n },\n annotation: {\n display: 'flex',\n alignItems: 'center',\n gap: '4px'\n }\n});\nexport const useLegendStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;\n const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n const baseStyles = useStyles();\n return {\n root: mergeClasses(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n legend: mergeClasses(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.legend),\n rect: mergeClasses(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.rect),\n shape: mergeClasses(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.shape),\n triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null \|\| _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),\n text: mergeClasses(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null \|\| _props_styles5 === void 0 ? void 0 : _props_styles5.text),\n hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null \|\| _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),\n resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null \|\| _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),\n legendContainer: mergeClasses(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null \|\| _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),\n annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null \|\| _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)\n };\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","Huce71","a9b677","Bt984gj","Brf1p80","Bceei9c","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B9bfxx9","Bf4jedk","ixv5ic","Bkoo3cm","F23esa","Icej2d","B9gsw3i","swriq4","awn1t","Blj5yig","Fdtwhm","Blctwrt","Bh9kdj0","t21cq0","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","sj55zd","Bvjb7m6","qhf8xq","fsow6f","Bz10aip","Bhzewxz","oyh7mz","B2u0y6b","B4uzyy","Be2s5ez","u6pn5x","smv486","B1nu0jp","B0n5ga8","Bm2nyyq","xrcqlc","wywymt","Gp14am","vfts7","Bhxzhr1","Du69r6","xawz","Bh6795r","Bnnss6s","fkmc3a","jrapky","Frg6f3","B6of3ja","B74szlk","mc9l5x","i8kkvl","Belr9w4","rmohyg","d","p","m","useLegendStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","_props_styles9","className","baseStyles","styles"],"sources":["useLegendsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n/*\n @internal\n / export const legendClassNames = {\n root: 'fui-legend__root',\n legend: 'fui-legend__legend',\n rect: 'fui-legend__rect',\n shape: 'fui-legend__shape',\n triangle: 'fui-legend__triangle',\n text: 'fui-legend__text',\n hoverChange: 'fui-legend__hoverChange',\n resizableArea: 'fui-legend__resizableArea',\n legendContainer: 'fui-legend__legendContainer',\n annotation: 'fui-legend__annotation'\n};\nconst useStyles = makeStyles({\n root: {\n // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n // in responsive charts where legends consist of multiple words.\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center'\n },\n legend: {\n // setting display to flex does not work\n // display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n cursor: 'pointer',\n border: 'none',\n padding: `${LEGEND_PADDING}px`,\n textTransform: 'capitalize',\n // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n // cartesian charts to resize properly within a flexbox or grid layout.\n minWidth: 0,\n [HighContrastSelector]: {\n color: 'WindowText',\n forcedColorAdjust: 'none',\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid canvasText`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`\n }\n },\n '&:hover': {\n [HighContrastSelector]: {\n color: 'HighlightText',\n forcedColorAdjust: 'none'\n }\n }\n },\n rect: {\n [HighContrastSelector]: {\n content: 'var(--rect-content-high-contrast)',\n opacity: 'var(--rect-opacity-high-contrast)'\n },\n width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n border: `${LEGEND_SHAPE_BORDER}px solid`\n },\n shape: {\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`\n },\n // TO DO Add props when these styles are used in the component\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n marginRight: tokens.spacingHorizontalS\n },\n // TO DO Add props when these styles are used in the component\n text: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n // TO DO Add props when these styles are used in the component\n hoverChange: {\n width: '12px',\n height: '12px',\n marginRight: tokens.spacingHorizontalS,\n border: '1px solid'\n },\n resizableArea: {\n position: 'relative',\n textAlign: 'left',\n transform: 'translate(-50%, 0)',\n top: 'auto',\n left: '50%',\n minWidth: '200px',\n maxWidth: '800px',\n '::after': {\n padding: '1px 4px 1px',\n borderTop: '-2px',\n borderLeft: '-2px'\n }\n },\n legendContainer: {\n flex: '0 1 auto',\n margin: '4px'\n },\n annotation: {\n display: 'flex',\n alignItems: 'center',\n gap: '4px'\n }\n});\nexport const useLegendStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;\n const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n const baseStyles = useStyles();\n return {\n root: mergeClasses(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n legend: mergeClasses(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.legend),\n rect: mergeClasses(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.rect),\n shape: mergeClasses(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.shape),\n triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null \|\| _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),\n text: mergeClasses(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null \|\| _props_styles5 === void 0 ? void 0 : _props_styles5.text),\n hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null \|\| _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),\n resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null \|\| _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),\n legendContainer: mergeClasses(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null \|\| _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),\n annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null \|\| _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)\n };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Legends/useLegendsStyles.styles.raw.js CHANGED Viewed

@@ -52,7 +52,11 @@ const useStyles = makeStyles({
         minWidth: 0,
         [HighContrastSelector]: {
             color: 'WindowText',
-            forcedColorAdjust: 'none'
+            forcedColorAdjust: 'none',
+            '&:focus-visible': {
+                outline: `${tokens.strokeWidthThick} solid canvasText`,
+                outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`
+            }
         },
         '&:hover': {
             [HighContrastSelector]: {

package/lib/components/Legends/useLegendsStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Legends/useLegendsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { LegendsProps, LegendsStyles } from './Legends.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n\n/*\n @internal\n */\nexport const legendClassNames: SlotClassNames<LegendsStyles> = {\n root: 'fui-legend__root',\n legend: 'fui-legend__legend',\n rect: 'fui-legend__rect',\n shape: 'fui-legend__shape',\n triangle: 'fui-legend__triangle',\n text: 'fui-legend__text',\n hoverChange: 'fui-legend__hoverChange',\n resizableArea: 'fui-legend__resizableArea',\n legendContainer: 'fui-legend__legendContainer',\n annotation: 'fui-legend__annotation',\n};\n\nconst useStyles = makeStyles({\n root: {\n // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n // in responsive charts where legends consist of multiple words.\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center',\n },\n legend: {\n // setting display to flex does not work\n // display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n cursor: 'pointer',\n border: 'none',\n padding: `${LEGEND_PADDING}px`,\n textTransform: 'capitalize',\n // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n // cartesian charts to resize properly within a flexbox or grid layout.\n minWidth: 0,\n [HighContrastSelector]: {\n color: 'WindowText',\n forcedColorAdjust: 'none',\n },\n '&:hover': {\n [HighContrastSelector]: {\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n },\n },\n },\n rect: {\n [HighContrastSelector]: {\n content: 'var(--rect-content-high-contrast)',\n opacity: 'var(--rect-opacity-high-contrast)',\n },\n width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n border: `${LEGEND_SHAPE_BORDER}px solid`,\n },\n shape: {\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n },\n // TO DO Add props when these styles are used in the component\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n marginRight: tokens.spacingHorizontalS,\n },\n // TO DO Add props when these styles are used in the component\n text: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n // TO DO Add props when these styles are used in the component\n hoverChange: {\n width: '12px',\n height: '12px',\n marginRight: tokens.spacingHorizontalS,\n border: '1px solid',\n },\n resizableArea: {\n position: 'relative',\n textAlign: 'left',\n transform: 'translate(-50%, 0)',\n top: 'auto',\n left: '50%',\n minWidth: '200px',\n maxWidth: '800px',\n '::after': {\n padding: '1px 4px 1px',\n borderTop: '-2px',\n borderLeft: '-2px',\n },\n },\n legendContainer: {\n flex: '0 1 auto',\n margin: '4px',\n },\n annotation: {\n display: 'flex',\n alignItems: 'center',\n gap: '4px',\n },\n});\n\nexport const useLegendStyles = (props: LegendsProps): LegendsStyles => {\n const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(legendClassNames.root, baseStyles.root, className, props.styles?.root),\n legend: mergeClasses(legendClassNames.legend, baseStyles.legend, props.styles?.legend),\n rect: mergeClasses(legendClassNames.rect, baseStyles.rect, props.styles?.rect),\n shape: mergeClasses(legendClassNames.shape, baseStyles.shape, props.styles?.shape),\n triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, props.styles?.triangle),\n text: mergeClasses(legendClassNames.text, baseStyles.text, props.styles?.text),\n hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, props.styles?.hoverChange),\n resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, props.styles?.resizableArea),\n legendContainer: mergeClasses(\n legendClassNames.legendContainer,\n baseStyles.legendContainer,\n props.styles?.legendContainer,\n ),\n annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, props.styles?.annotation),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","whiteSpace","width","alignItems","justifyContent","cursor","border","padding","textTransform","minWidth","color","forcedColorAdjust","content","opacity","marginRight","height","borderLeft","borderRight","borderTop","spacingHorizontalS","caption1","colorNeutralForeground1","position","textAlign","transform","top","left","maxWidth","flex","margin","display","gap","useLegendStyles","props","className","baseStyles","styles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,gEAAgE;AAChE,OAAO,MAAMC,8BAA8B,EAAE;AAC7C,OAAO,MAAMC,gCAAgC,GAAG;AAChD,OAAO,MAAMC,iBAAiB,EAAE;AAChC,OAAO,MAAMC,gBAAgB,GAAG;AAChC,OAAO,MAAMC,sBAAsB,EAAE;AACrC,MAAMC,mCAAmC;AACzC,iGAAiG;AACjG,uGAAuG;AACvG,gCAAgC;AAChC,OAAO,MAAMC,oBAAoBD,mCAAmCD,oBAAoB;AACxF,OAAO,MAAMG,0BAA0B,EAAE;AACzC,OAAO,MAAMC,+BAA+B,KAAK;AAEjD;;CAEC,GACD,OAAO,MAAMC,mBAAkD;IAC7DC,MAAM;IACNC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,UAAU;IACVC,MAAM;IACNC,aAAa;IACbC,eAAe;IACfC,iBAAiB;IACjBC,YAAY;AACd,EAAE;AAEF,MAAMC,YAAYzB,WAAW;IAC3Be,MAAM;QACJ,6FAA6F;QAC7F,kGAAkG;QAClG,gEAAgE;QAChEW,YAAY;QACZC,OAAO;QACPC,YAAY;IACd;IACAZ,QAAQ;QACN,wCAAwC;QACxC,mBAAmB;QACnBY,YAAY;QACZC,gBAAgB;QAChBC,QAAQ;QACRC,QAAQ;QACRC,SAAS,GAAGzB,eAAe,EAAE,CAAC;QAC9B0B,eAAe;QACf,2FAA2F;QAC3F,uEAAuE;QACvEC,UAAU;QACV,CAAC9B,qBAAqB,EAAE;YACtB+B,OAAO;YACPC,mBAAmB;~~QACrB~~;QACA,WAAW;YACT,~~CAAChC~~,qBAAqB,EAAE;gBACtB+B,OAAO;gBACPC,mBAAmB;YACrB;QACF;IACF;IACAnB,MAAM;QACJ,CAACb,qBAAqB,EAAE;~~YACtBiC~~,SAAS;YACTC,SAAS;QACX;~~QACAX~~,OAAO,GAAGjB,iCAAiC,EAAE,CAAC;~~QAC9C6B~~,aAAa,~~GAAG3B~~,wBAAwB,EAAE,CAAC;QAC3CmB,QAAQ,GAAGtB,oBAAoB,QAAQ,CAAC;IAC1C;IACAS,OAAO;~~QACLqB~~,aAAa,~~GAAG3B~~,wBAAwB,EAAE,CAAC;IAC7C;IACA,8DAA8D;IAC9DO,UAAU;QACRQ,OAAO;~~QACPa~~,QAAQ;QACRC,YAAY;QACZC,aAAa;QACbC,WAAW;QACXJ,~~aAAarC~~,~~OAAO0C~~,kBAAkB;IACxC;IACA,8DAA8D;~~IAC9DxB~~,MAAM;QACJ,GAAGjB,~~iBAAiB0C~~,QAAQ;~~QAC5BV~~,OAAOjC,~~OAAO4C~~,uBAAuB;~~QACrCV~~,mBAAmB;IACrB;IACA,8DAA8D;IAC9Df,aAAa;QACXM,OAAO;~~QACPa~~,QAAQ;QACRD,~~aAAarC~~,~~OAAO0C~~,kBAAkB;~~QACtCb~~,QAAQ;IACV;IACAT,eAAe;~~QACbyB~~,UAAU;QACVC,WAAW;QACXC,WAAW;QACXC,KAAK;QACLC,MAAM;~~QACNjB~~,UAAU;~~QACVkB~~,UAAU;QACV,WAAW;~~YACTpB~~,SAAS;~~YACTW~~,WAAW;YACXF,YAAY;QACd;IACF;~~IACAlB~~,iBAAiB;~~QACf8B~~,MAAM;QACNC,QAAQ;IACV;~~IACA9B~~,YAAY;~~QACV+B~~,SAAS;~~QACT3B~~,YAAY;~~QACZ4B~~,KAAK;IACP;AACF;AAEA,OAAO,MAAMC,kBAAkB,CAACC;QAK0CA,eACLA,gBACNA,gBACGA,gBACSA,gBACZA,gBACqBA,gBACMA,gBAIpFA,gBAE2EA;IAjB/E,MAAM,EAAEC,SAAS,EAAE,GAAGD,OAAO,qEAAqE;IAClG,MAAME,~~aAAanC~~;IAEnB,OAAO;QACLV,MAAMd,aAAaa,iBAAiBC,IAAI,~~EAAE6C~~,~~WAAW7C~~,IAAI,~~EAAE4C~~,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,~~cAAc3C~~,IAAI;QACxFC,QAAQf,aAAaa,iBAAiBE,MAAM,~~EAAE4C~~,~~WAAW5C~~,MAAM,~~GAAE0C~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAc1C~~,MAAM;QACrFC,MAAMhB,aAAaa,iBAAiBG,IAAI,~~EAAE2C~~,~~WAAW3C~~,IAAI,~~GAAEyC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAczC~~,IAAI;QAC7EC,OAAOjB,aAAaa,iBAAiBI,KAAK,~~EAAE0C~~,~~WAAW1C~~,KAAK,~~GAAEwC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAcxC~~,KAAK;QACjFC,UAAUlB,aAAaa,iBAAiBK,QAAQ,~~EAAEyC~~,~~WAAWzC~~,QAAQ,~~GAAEuC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAcvC~~,QAAQ;QAC7FC,MAAMnB,aAAaa,iBAAiBM,IAAI,~~EAAEwC~~,~~WAAWxC~~,IAAI,~~GAAEsC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAActC~~,IAAI;QAC7EC,aAAapB,aAAaa,iBAAiBO,WAAW,~~EAAEuC~~,~~WAAWvC~~,WAAW,~~GAAEqC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAcrC~~,WAAW;QACzGC,eAAerB,aAAaa,iBAAiBQ,aAAa,~~EAAEsC~~,~~WAAWtC~~,aAAa,~~GAAEoC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAcpC~~,aAAa;QACjHC,iBAAiBtB,aACfa,iBAAiBS,eAAe,~~EAChCqC~~,~~WAAWrC~~,eAAe,~~GAC1BmC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAcnC~~,eAAe;QAE/BC,YAAYvB,aAAaa,iBAAiBU,UAAU,~~EAAEoC~~,~~WAAWpC~~,UAAU,~~GAAEkC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAclC~~,UAAU;IACvG;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/Legends/useLegendsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { LegendsProps, LegendsStyles } from './Legends.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n\n/*\n @internal\n /\nexport const legendClassNames: SlotClassNames<LegendsStyles> = {\n root: 'fui-legend__root',\n legend: 'fui-legend__legend',\n rect: 'fui-legend__rect',\n shape: 'fui-legend__shape',\n triangle: 'fui-legend__triangle',\n text: 'fui-legend__text',\n hoverChange: 'fui-legend__hoverChange',\n resizableArea: 'fui-legend__resizableArea',\n legendContainer: 'fui-legend__legendContainer',\n annotation: 'fui-legend__annotation',\n};\n\nconst useStyles = makeStyles({\n root: {\n // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n // in responsive charts where legends consist of multiple words.\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center',\n },\n legend: {\n // setting display to flex does not work\n // display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n cursor: 'pointer',\n border: 'none',\n padding: `${LEGEND_PADDING}px`,\n textTransform: 'capitalize',\n // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n // cartesian charts to resize properly within a flexbox or grid layout.\n minWidth: 0,\n [HighContrastSelector]: {\n color: 'WindowText',\n forcedColorAdjust: 'none',\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid canvasText`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`,\n },\n },\n '&:hover': {\n [HighContrastSelector]: {\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n },\n },\n },\n rect: {\n [HighContrastSelector]: {\n content: 'var(--rect-content-high-contrast)',\n opacity: 'var(--rect-opacity-high-contrast)',\n },\n width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n border: `${LEGEND_SHAPE_BORDER}px solid`,\n },\n shape: {\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n },\n // TO DO Add props when these styles are used in the component\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n marginRight: tokens.spacingHorizontalS,\n },\n // TO DO Add props when these styles are used in the component\n text: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n // TO DO Add props when these styles are used in the component\n hoverChange: {\n width: '12px',\n height: '12px',\n marginRight: tokens.spacingHorizontalS,\n border: '1px solid',\n },\n resizableArea: {\n position: 'relative',\n textAlign: 'left',\n transform: 'translate(-50%, 0)',\n top: 'auto',\n left: '50%',\n minWidth: '200px',\n maxWidth: '800px',\n '::after': {\n padding: '1px 4px 1px',\n borderTop: '-2px',\n borderLeft: '-2px',\n },\n },\n legendContainer: {\n flex: '0 1 auto',\n margin: '4px',\n },\n annotation: {\n display: 'flex',\n alignItems: 'center',\n gap: '4px',\n },\n});\n\nexport const useLegendStyles = (props: LegendsProps): LegendsStyles => {\n const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(legendClassNames.root, baseStyles.root, className, props.styles?.root),\n legend: mergeClasses(legendClassNames.legend, baseStyles.legend, props.styles?.legend),\n rect: mergeClasses(legendClassNames.rect, baseStyles.rect, props.styles?.rect),\n shape: mergeClasses(legendClassNames.shape, baseStyles.shape, props.styles?.shape),\n triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, props.styles?.triangle),\n text: mergeClasses(legendClassNames.text, baseStyles.text, props.styles?.text),\n hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, props.styles?.hoverChange),\n resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, props.styles?.resizableArea),\n legendContainer: mergeClasses(\n legendClassNames.legendContainer,\n baseStyles.legendContainer,\n props.styles?.legendContainer,\n ),\n annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, props.styles?.annotation),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","whiteSpace","width","alignItems","justifyContent","cursor","border","padding","textTransform","minWidth","color","forcedColorAdjust","outline","strokeWidthThick","outlineOffset","content","opacity","marginRight","height","borderLeft","borderRight","borderTop","spacingHorizontalS","caption1","colorNeutralForeground1","position","textAlign","transform","top","left","maxWidth","flex","margin","display","gap","useLegendStyles","props","className","baseStyles","styles"],"mappings":"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"}

package/lib/utilities/getWindow.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { canUseDOM } from '@fluentui/react-utilities';
 let _window = undefined;
 // Note: Accessing "window" in IE11 is somewhat expensive, and calling "typeof window"

package/lib/utilities/getWindow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utilities/getWindow.ts"],"sourcesContent":["~~import~~ { canUseDOM } from '@fluentui/react-utilities';\n\nlet _window: Window \| undefined = undefined;\n\n// Note: Accessing \"window\" in IE11 is somewhat expensive, and calling \"typeof window\"\n// hits a memory leak, whereas aliasing it and calling \"typeof _window\" does not.\n// Caching the window value at the file scope lets us minimize the impact.\ntry {\n _window = window;\n} catch (e) {\n /* no-op /\n}\n\n/\n Helper to get the window object. The helper will make sure to use a cached variable\n * of \"window\", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the\n * window object won't match the \"global\" window object, and for these scenarios, you should\n * pass in an element hosted within the popup.\n \n @public\n */\nexport function getWindow(rootElement?: Element \| null): Window \| undefined {\n if (!canUseDOM() \|\| typeof _window === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n"],"names":["canUseDOM","_window","undefined","window","e","getWindow","rootElement","el","ownerDocument","defaultView"],"mappings":"AAAA,SAASA,SAAS,QAAQ,4BAA4B;AAEtD,IAAIC,UAA8BC;AAElC,sFAAsF;AACtF,iFAAiF;AACjF,0EAA0E;AAC1E,IAAI;IACFD,UAAUE;AACZ,EAAE,OAAOC,GAAG;AACV,SAAS,GACX;AAEA;;;;;;;CAOC,GACD,OAAO,SAASC,UAAUC,WAA4B;IACpD,IAAI,CAACN,eAAe,OAAOC,YAAY,aAAa;QAClD,OAAOC;IACT,OAAO;QACL,MAAMK,KAAKD;QAEX,OAAOC,MAAMA,GAAGC,aAAa,IAAID,GAAGC,aAAa,CAACC,WAAW,GAAGF,GAAGC,aAAa,CAACC,WAAW,GAAGR;IACjG;AACF"}
1	+ {"version":3,"sources":["../src/utilities/getWindow.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM } from '@fluentui/react-utilities';\n\nlet _window: Window \| undefined = undefined;\n\n// Note: Accessing \"window\" in IE11 is somewhat expensive, and calling \"typeof window\"\n// hits a memory leak, whereas aliasing it and calling \"typeof _window\" does not.\n// Caching the window value at the file scope lets us minimize the impact.\ntry {\n _window = window;\n} catch (e) {\n /* no-op /\n}\n\n/\n Helper to get the window object. The helper will make sure to use a cached variable\n * of \"window\", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the\n * window object won't match the \"global\" window object, and for these scenarios, you should\n * pass in an element hosted within the popup.\n \n @public\n */\nexport function getWindow(rootElement?: Element \| null): Window \| undefined {\n if (!canUseDOM() \|\| typeof _window === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n"],"names":["canUseDOM","_window","undefined","window","e","getWindow","rootElement","el","ownerDocument","defaultView"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,4BAA4B;AAEtD,IAAIC,UAA8BC;AAElC,sFAAsF;AACtF,iFAAiF;AACjF,0EAA0E;AAC1E,IAAI;IACFD,UAAUE;AACZ,EAAE,OAAOC,GAAG;AACV,SAAS,GACX;AAEA;;;;;;;CAOC,GACD,OAAO,SAASC,UAAUC,WAA4B;IACpD,IAAI,CAACN,eAAe,OAAOC,YAAY,aAAa;QAClD,OAAOC;IACT,OAAO;QACL,MAAMK,KAAKD;QAEX,OAAOC,MAAMA,GAAGC,aAAa,IAAID,GAAGC,aAAa,CAACC,WAAW,GAAGF,GAAGC,aAAa,CAACC,WAAW,GAAGR;IACjG;AACF"}

package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js CHANGED Viewed

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

package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAnnotationOnlyChartStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const useAnnotationOnlyChartStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n rowGap: '8px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: typographyStyles.body1.fontFamily\n },\n content: {\n position: 'relative',\n flexGrow: 1,\n backgroundColor: 'transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box'\n },\n title: {\n textAlign: 'center'\n }\n});\n"],"names":["__styles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","qhf8xq","mc9l5x","Beiy3e4","Belr9w4","De3pzq","sj55zd","Bahqtrf","content","Bh6795r","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","title","fsow6f","d","p"],"mappings":"~~;;;;+BAEaG~~,4BAA4B;;;;;;uBAFd,gBAAgB;AAEpC,qCAAkC,WAAA,OAAGH,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAQ,OAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAoB3C,CAAC"}
1	+ {"version":3,"sources":["useAnnotationOnlyChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const useAnnotationOnlyChartStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n rowGap: '8px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: typographyStyles.body1.fontFamily\n },\n content: {\n position: 'relative',\n flexGrow: 1,\n backgroundColor: 'transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box'\n },\n title: {\n textAlign: 'center'\n }\n});\n"],"names":["__styles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","qhf8xq","mc9l5x","Beiy3e4","Belr9w4","De3pzq","sj55zd","Bahqtrf","content","Bh6795r","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","title","fsow6f","d","p"],"mappings":"AAAA,YAAY;;;;;+BAGCG,4BAA4B;;;;;;uBAFd,gBAAgB;AAEpC,qCAAkC,WAAA,OAAGH,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAQ,OAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAoB3C,CAAC"}

package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js CHANGED Viewed

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

package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.ts"],"sourcesContent":["~~import~~ { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const useAnnotationOnlyChartStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n rowGap: '8px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: typographyStyles.body1.fontFamily,\n },\n content: {\n position: 'relative',\n flexGrow: 1,\n backgroundColor: 'transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n },\n title: {\n textAlign: 'center',\n },\n});\n"],"names":["makeStyles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","position","display","flexDirection","rowGap","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","fontFamily","body1","content","flexGrow","borderRadius","borderRadiusMedium","boxSizing","title","textAlign"],"mappings":"~~;;;;+BAGaG;;;;;;uBAHc~~,iBAAiB;4BACH,wBAAwB;AAE1D,~~yCAAqCH~~,iBAAAA,EAAW;IACrDI,MAAM;QACJC,UAAU;QACVC,SAAS;QACTC,eAAe;QACfC,QAAQ;QACRC,iBAAiBR,kBAAAA,CAAOS,uBAAuB;QAC/CC,OAAOV,kBAAAA,CAAOW,uBAAuB;QACrCC,YAAYX,4BAAAA,CAAiBY,KAAK,CAACD,UAAU;IAC/C;IACAE,SAAS;QACPV,UAAU;QACVW,UAAU;QACVP,iBAAiB;QACjBQ,cAAchB,kBAAAA,CAAOiB,kBAAkB;QACvCC,WAAW;IACb;IACAC,OAAO;QACLC,WAAW;IACb;AACF,GAAG"}
1	+ {"version":3,"sources":["../src/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const useAnnotationOnlyChartStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n rowGap: '8px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: typographyStyles.body1.fontFamily,\n },\n content: {\n position: 'relative',\n flexGrow: 1,\n backgroundColor: 'transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n },\n title: {\n textAlign: 'center',\n },\n});\n"],"names":["makeStyles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","position","display","flexDirection","rowGap","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","fontFamily","body1","content","flexGrow","borderRadius","borderRadiusMedium","boxSizing","title","textAlign"],"mappings":"AAAA;;;;;;;;;;;uBAE2B,iBAAiB;4BACH,wBAAwB;AAE1D,MAAMG,mCAA+BH,iBAAAA,EAAW;IACrDI,MAAM;QACJC,UAAU;QACVC,SAAS;QACTC,eAAe;QACfC,QAAQ;QACRC,iBAAiBR,kBAAAA,CAAOS,uBAAuB;QAC/CC,OAAOV,kBAAAA,CAAOW,uBAAuB;QACrCC,YAAYX,4BAAAA,CAAiBY,KAAK,CAACD,UAAU;IAC/C;IACAE,SAAS;QACPV,UAAU;QACVW,UAAU;QACVP,iBAAiB;QACjBQ,cAAchB,kBAAAA,CAAOiB,kBAAkB;QACvCC,WAAW;IACb;IACAC,OAAO;QACLC,WAAW;IACb;AACF,GAAG"}

package/lib-commonjs/components/Legends/useLegendsStyles.styles.js CHANGED Viewed

@@ -102,6 +102,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bf4jedk: "fy77jfu",
         ixv5ic: "f4ji673",
         Bkoo3cm: "fbcj00p",
+        F23esa: 0,
+        Icej2d: 0,
+        B9gsw3i: 0,
+        swriq4: "fzc3p5w",
+        awn1t: "f9kwof",
         Blj5yig: "f15ldg54",
         Fdtwhm: "f1mwmwal"
     },
@@ -393,6 +398,19 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
                 m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
             }
         ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fzc3p5w:focus-visible{outline:var(--strokeWidthThick) solid canvasText;}}",
+            {
+                p: -1,
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f9kwof:focus-visible{outline-offset:calc(var(--strokeWidthThick) * -1);}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
         [
             "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15ldg54:hover{color:HighlightText;}}",
             {

package/lib-commonjs/components/Legends/useLegendsStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useLegendsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n/*\n @internal\n */ export const legendClassNames = {\n root: 'fui-legend__root',\n legend: 'fui-legend__legend',\n rect: 'fui-legend__rect',\n shape: 'fui-legend__shape',\n triangle: 'fui-legend__triangle',\n text: 'fui-legend__text',\n hoverChange: 'fui-legend__hoverChange',\n resizableArea: 'fui-legend__resizableArea',\n legendContainer: 'fui-legend__legendContainer',\n annotation: 'fui-legend__annotation'\n};\nconst useStyles = makeStyles({\n root: {\n // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n // in responsive charts where legends consist of multiple words.\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center'\n },\n legend: {\n // setting display to flex does not work\n // display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n cursor: 'pointer',\n border: 'none',\n padding: `${LEGEND_PADDING}px`,\n textTransform: 'capitalize',\n // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n // cartesian charts to resize properly within a flexbox or grid layout.\n minWidth: 0,\n [HighContrastSelector]: {\n color: 'WindowText',\n forcedColorAdjust: 'none'\n },\n '&:hover': {\n [HighContrastSelector]: {\n color: 'HighlightText',\n forcedColorAdjust: 'none'\n }\n }\n },\n rect: {\n [HighContrastSelector]: {\n content: 'var(--rect-content-high-contrast)',\n opacity: 'var(--rect-opacity-high-contrast)'\n },\n width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n border: `${LEGEND_SHAPE_BORDER}px solid`\n },\n shape: {\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`\n },\n // TO DO Add props when these styles are used in the component\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n marginRight: tokens.spacingHorizontalS\n },\n // TO DO Add props when these styles are used in the component\n text: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n // TO DO Add props when these styles are used in the component\n hoverChange: {\n width: '12px',\n height: '12px',\n marginRight: tokens.spacingHorizontalS,\n border: '1px solid'\n },\n resizableArea: {\n position: 'relative',\n textAlign: 'left',\n transform: 'translate(-50%, 0)',\n top: 'auto',\n left: '50%',\n minWidth: '200px',\n maxWidth: '800px',\n '::after': {\n padding: '1px 4px 1px',\n borderTop: '-2px',\n borderLeft: '-2px'\n }\n },\n legendContainer: {\n flex: '0 1 auto',\n margin: '4px'\n },\n annotation: {\n display: 'flex',\n alignItems: 'center',\n gap: '4px'\n }\n});\nexport const useLegendStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;\n const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n const baseStyles = useStyles();\n return {\n root: mergeClasses(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n legend: mergeClasses(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.legend),\n rect: mergeClasses(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.rect),\n shape: mergeClasses(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.shape),\n triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null \|\| _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),\n text: mergeClasses(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null \|\| _props_styles5 === void 0 ? void 0 : _props_styles5.text),\n hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null \|\| _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),\n resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null \|\| _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),\n legendContainer: mergeClasses(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null \|\| _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),\n annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null \|\| _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)\n };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","Huce71","a9b677","Bt984gj","Brf1p80","Bceei9c","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B9bfxx9","Bf4jedk","ixv5ic","Bkoo3cm","Blj5yig","Fdtwhm","Blctwrt","Bh9kdj0","t21cq0","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","sj55zd","Bvjb7m6","qhf8xq","fsow6f","Bz10aip","Bhzewxz","oyh7mz","B2u0y6b","B4uzyy","Be2s5ez","u6pn5x","smv486","B1nu0jp","B0n5ga8","Bm2nyyq","xrcqlc","wywymt","Gp14am","vfts7","Bhxzhr1","Du69r6","xawz","Bh6795r","Bnnss6s","fkmc3a","jrapky","Frg6f3","B6of3ja","B74szlk","mc9l5x","i8kkvl","Belr9w4","rmohyg","d","p","m","useLegendStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","_props_styles9","className","baseStyles","styles"],"mappings":"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"}
1	+ {"version":3,"sources":["useLegendsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n/*\n @internal\n / export const legendClassNames = {\n root: 'fui-legend__root',\n legend: 'fui-legend__legend',\n rect: 'fui-legend__rect',\n shape: 'fui-legend__shape',\n triangle: 'fui-legend__triangle',\n text: 'fui-legend__text',\n hoverChange: 'fui-legend__hoverChange',\n resizableArea: 'fui-legend__resizableArea',\n legendContainer: 'fui-legend__legendContainer',\n annotation: 'fui-legend__annotation'\n};\nconst useStyles = makeStyles({\n root: {\n // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n // in responsive charts where legends consist of multiple words.\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center'\n },\n legend: {\n // setting display to flex does not work\n // display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n cursor: 'pointer',\n border: 'none',\n padding: `${LEGEND_PADDING}px`,\n textTransform: 'capitalize',\n // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n // cartesian charts to resize properly within a flexbox or grid layout.\n minWidth: 0,\n [HighContrastSelector]: {\n color: 'WindowText',\n forcedColorAdjust: 'none',\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid canvasText`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`\n }\n },\n '&:hover': {\n [HighContrastSelector]: {\n color: 'HighlightText',\n forcedColorAdjust: 'none'\n }\n }\n },\n rect: {\n [HighContrastSelector]: {\n content: 'var(--rect-content-high-contrast)',\n opacity: 'var(--rect-opacity-high-contrast)'\n },\n width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n border: `${LEGEND_SHAPE_BORDER}px solid`\n },\n shape: {\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`\n },\n // TO DO Add props when these styles are used in the component\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n marginRight: tokens.spacingHorizontalS\n },\n // TO DO Add props when these styles are used in the component\n text: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n // TO DO Add props when these styles are used in the component\n hoverChange: {\n width: '12px',\n height: '12px',\n marginRight: tokens.spacingHorizontalS,\n border: '1px solid'\n },\n resizableArea: {\n position: 'relative',\n textAlign: 'left',\n transform: 'translate(-50%, 0)',\n top: 'auto',\n left: '50%',\n minWidth: '200px',\n maxWidth: '800px',\n '::after': {\n padding: '1px 4px 1px',\n borderTop: '-2px',\n borderLeft: '-2px'\n }\n },\n legendContainer: {\n flex: '0 1 auto',\n margin: '4px'\n },\n annotation: {\n display: 'flex',\n alignItems: 'center',\n gap: '4px'\n }\n});\nexport const useLegendStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;\n const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n const baseStyles = useStyles();\n return {\n root: mergeClasses(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n legend: mergeClasses(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.legend),\n rect: mergeClasses(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.rect),\n shape: mergeClasses(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.shape),\n triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null \|\| _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),\n text: mergeClasses(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null \|\| _props_styles5 === void 0 ? void 0 : _props_styles5.text),\n hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null \|\| _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),\n resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null \|\| _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),\n legendContainer: mergeClasses(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null \|\| _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),\n annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null \|\| _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)\n };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","Huce71","a9b677","Bt984gj","Brf1p80","Bceei9c","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B9bfxx9","Bf4jedk","ixv5ic","Bkoo3cm","F23esa","Icej2d","B9gsw3i","swriq4","awn1t","Blj5yig","Fdtwhm","Blctwrt","Bh9kdj0","t21cq0","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","sj55zd","Bvjb7m6","qhf8xq","fsow6f","Bz10aip","Bhzewxz","oyh7mz","B2u0y6b","B4uzyy","Be2s5ez","u6pn5x","smv486","B1nu0jp","B0n5ga8","Bm2nyyq","xrcqlc","wywymt","Gp14am","vfts7","Bhxzhr1","Du69r6","xawz","Bh6795r","Bnnss6s","fkmc3a","jrapky","Frg6f3","B6of3ja","B74szlk","mc9l5x","i8kkvl","Belr9w4","rmohyg","d","p","m","useLegendStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","_props_styles9","className","baseStyles","styles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAgBCa,4BAA4B;;;IAV5BP,6BAA6B;;;+BADF;;;iBAGd;;;kBADC;;;IAEdG,mBAAmB;;;2BAMI;eAAvBG;;qBADiB;;;oBAKG;;;mBA0GL;eAAfgG;;;uBA5H4B,gBAAgB;AAIlD,MAAMvG,8BAA8B,CAAC;AACrC,sCAAsC,EAAE;AACxC,MAAME,iBAAiB,CAAC;AACxB,MAAMC,gBAAgB,EAAE;AACxB,4BAA4B,CAAC;AACpC,MAAME,gCAAgC,GAAG,EAAE;AAIpC,MAAMC,oBAAoBD,gCAAgC,GAAGD,mBAAmB;AAChF,gCAAgC,CAAC;AACjC,qCAAqC,IAAI;AAGrC,MAAMK,mBAAmB;IAChCC,IAAI,EAAE,kBAAkB;IACxBC,MAAM,EAAE,oBAAoB;IAC5BC,IAAI,EAAE,kBAAkB;IACxBC,KAAK,EAAE,mBAAmB;IAC1BC,QAAQ,EAAE,sBAAsB;IAChCC,IAAI,EAAE,kBAAkB;IACxBC,WAAW,EAAE,yBAAyB;IACtCC,aAAa,EAAE,2BAA2B;IAC1CC,eAAe,EAAE,6BAA6B;IAC9CC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGzB,eAAA,EAAA;IAAAe,IAAA,EAAA;QAAAW,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAZ,MAAA,EAAA;QAAAY,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA9C,IAAA,EAAA;QAAA+C,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAtC,MAAA,EAAA;QAAAuC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAnC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA7B,KAAA,EAAA;QAAAgD,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA/C,QAAA,EAAA;QAAAQ,MAAA,EAAA;QAAAwC,OAAA,EAAA;QAAA/B,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAH,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAH,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAH,MAAA,EAAA;QAAAuB,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA9C,IAAA,EAAA;QAAAgD,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAApD,WAAA,EAAA;QAAAM,MAAA,EAAA;QAAAwC,OAAA,EAAA;QAAAD,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAnC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAzB,aAAA,EAAA;QAAAoD,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAxB,OAAA,EAAA;QAAAyB,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAArE,eAAA,EAAA;QAAAsE,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAhC,MAAA,EAAA;QAAAiC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA5E,UAAA,EAAA;QAAA6E,MAAA,EAAA;QAAAzE,OAAA,EAAA;QAAA0E,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAD,CAAA,EAAA,CAAA;gBAAAC,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA6FjB,CAAC;AACK,wBAAyBE,KAAK,IAAG;IACpC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;IACjK,MAAM,EAAEC,SAAAA,EAAW,GAAGX,KAAK,CAAC,CAAC,qEAAA;IAC7B,MAAMY,UAAU,GAAGhG,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHV,IAAI,MAAEd,mBAAY,EAACa,gBAAgB,CAACC,IAAI,EAAE0G,UAAU,CAAC1G,IAAI,EAAEyG,SAAS,EAAE,CAACV,aAAa,GAAGD,KAAK,CAACa,MAAAA,AAAM,MAAM,IAAI,IAAIZ,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC/F,IAAI,CAAC;QACxKC,MAAM,MAAEf,mBAAY,EAACa,gBAAgB,CAACE,MAAM,EAAEyG,UAAU,CAACzG,MAAM,EAAE,CAAC+F,cAAc,GAAGF,KAAK,CAACa,MAAAA,AAAM,MAAM,IAAI,IAAIX,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC/F,MAAM,CAAC;QACxKC,IAAI,MAAEhB,mBAAY,EAACa,gBAAgB,CAACG,IAAI,EAAEwG,UAAU,CAACxG,IAAI,EAAE,CAAC+F,cAAc,GAAGH,KAAK,CAACa,MAAM,AAANA,MAAY,IAAI,IAAIV,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC/F,IAAI,CAAC;QAChKC,KAAK,EAAEjB,uBAAY,EAACa,gBAAgB,CAACI,KAAK,EAAEuG,UAAU,CAACvG,KAAK,EAAE,CAAC+F,cAAc,GAAGJ,KAAK,CAACa,MAAM,AAANA,MAAY,IAAI,IAAIT,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC/F,KAAK,CAAC;QACpKC,QAAQ,MAAElB,mBAAY,EAACa,gBAAgB,CAACK,QAAQ,EAAEsG,UAAU,CAACtG,QAAQ,EAAE,CAAC+F,cAAc,GAAGL,KAAK,CAACa,MAAAA,AAAM,MAAM,IAAI,IAAIR,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC/F,QAAQ,CAAC;QAChLC,IAAI,MAAEnB,mBAAY,EAACa,gBAAgB,CAACM,IAAI,EAAEqG,UAAU,CAACrG,IAAI,EAAE,CAAC+F,cAAc,GAAGN,KAAK,CAACa,MAAM,AAANA,MAAY,IAAI,IAAIP,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC/F,IAAI,CAAC;QAChKC,WAAW,MAAEpB,mBAAY,EAACa,gBAAgB,CAACO,WAAW,EAAEoG,UAAU,CAACpG,WAAW,EAAE,CAAC+F,cAAc,GAAGP,KAAK,CAACa,MAAAA,AAAM,MAAM,IAAI,IAAIN,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC/F,WAAW,CAAC;QAC5LC,aAAa,MAAErB,mBAAY,EAACa,gBAAgB,CAACQ,aAAa,EAAEmG,UAAU,CAACnG,aAAa,EAAE,CAAC+F,cAAc,GAAGR,KAAK,CAACa,MAAAA,AAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC/F,aAAa,CAAC;QACpMC,eAAe,MAAEtB,mBAAY,EAACa,gBAAgB,CAACS,eAAe,EAAEkG,UAAU,CAAClG,eAAe,EAAE,CAAC+F,cAAc,GAAGT,KAAK,CAACa,MAAAA,AAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC/F,eAAe,CAAC;QAC5MC,UAAU,MAAEvB,mBAAY,EAACa,gBAAgB,CAACU,UAAU,EAAEiG,UAAU,CAACjG,UAAU,EAAE,CAAC+F,cAAc,GAAGV,KAAK,CAACa,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC/F,UAAU;IAC3L,CAAC;AACL,CAAC"}

package/lib-commonjs/components/Legends/useLegendsStyles.styles.raw.js CHANGED Viewed

@@ -88,7 +88,11 @@ const useStyles = (0, _react.makeStyles)({
         minWidth: 0,
         [_index.HighContrastSelector]: {
             color: 'WindowText',
-            forcedColorAdjust: 'none'
+            forcedColorAdjust: 'none',
+            '&:focus-visible': {
+                outline: `${_reacttheme.tokens.strokeWidthThick} solid canvasText`,
+                outlineOffset: `calc(${_reacttheme.tokens.strokeWidthThick} * -1)`
+            }
         },
         '&:hover': {
             [_index.HighContrastSelector]: {

package/lib-commonjs/components/Legends/useLegendsStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Legends/useLegendsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { LegendsProps, LegendsStyles } from './Legends.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n\n/*\n @internal\n */\nexport const legendClassNames: SlotClassNames<LegendsStyles> = {\n root: 'fui-legend__root',\n legend: 'fui-legend__legend',\n rect: 'fui-legend__rect',\n shape: 'fui-legend__shape',\n triangle: 'fui-legend__triangle',\n text: 'fui-legend__text',\n hoverChange: 'fui-legend__hoverChange',\n resizableArea: 'fui-legend__resizableArea',\n legendContainer: 'fui-legend__legendContainer',\n annotation: 'fui-legend__annotation',\n};\n\nconst useStyles = makeStyles({\n root: {\n // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n // in responsive charts where legends consist of multiple words.\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center',\n },\n legend: {\n // setting display to flex does not work\n // display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n cursor: 'pointer',\n border: 'none',\n padding: `${LEGEND_PADDING}px`,\n textTransform: 'capitalize',\n // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n // cartesian charts to resize properly within a flexbox or grid layout.\n minWidth: 0,\n [HighContrastSelector]: {\n color: 'WindowText',\n forcedColorAdjust: 'none',\n },\n '&:hover': {\n [HighContrastSelector]: {\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n },\n },\n },\n rect: {\n [HighContrastSelector]: {\n content: 'var(--rect-content-high-contrast)',\n opacity: 'var(--rect-opacity-high-contrast)',\n },\n width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n border: `${LEGEND_SHAPE_BORDER}px solid`,\n },\n shape: {\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n },\n // TO DO Add props when these styles are used in the component\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n marginRight: tokens.spacingHorizontalS,\n },\n // TO DO Add props when these styles are used in the component\n text: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n // TO DO Add props when these styles are used in the component\n hoverChange: {\n width: '12px',\n height: '12px',\n marginRight: tokens.spacingHorizontalS,\n border: '1px solid',\n },\n resizableArea: {\n position: 'relative',\n textAlign: 'left',\n transform: 'translate(-50%, 0)',\n top: 'auto',\n left: '50%',\n minWidth: '200px',\n maxWidth: '800px',\n '::after': {\n padding: '1px 4px 1px',\n borderTop: '-2px',\n borderLeft: '-2px',\n },\n },\n legendContainer: {\n flex: '0 1 auto',\n margin: '4px',\n },\n annotation: {\n display: 'flex',\n alignItems: 'center',\n gap: '4px',\n },\n});\n\nexport const useLegendStyles = (props: LegendsProps): LegendsStyles => {\n const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(legendClassNames.root, baseStyles.root, className, props.styles?.root),\n legend: mergeClasses(legendClassNames.legend, baseStyles.legend, props.styles?.legend),\n rect: mergeClasses(legendClassNames.rect, baseStyles.rect, props.styles?.rect),\n shape: mergeClasses(legendClassNames.shape, baseStyles.shape, props.styles?.shape),\n triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, props.styles?.triangle),\n text: mergeClasses(legendClassNames.text, baseStyles.text, props.styles?.text),\n hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, props.styles?.hoverChange),\n resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, props.styles?.resizableArea),\n legendContainer: mergeClasses(\n legendClassNames.legendContainer,\n baseStyles.legendContainer,\n props.styles?.legendContainer,\n ),\n annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, props.styles?.annotation),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","whiteSpace","width","alignItems","justifyContent","cursor","border","padding","textTransform","minWidth","color","forcedColorAdjust","content","opacity","marginRight","height","borderLeft","borderRight","borderTop","spacingHorizontalS","caption1","colorNeutralForeground1","position","textAlign","transform","top","left","maxWidth","flex","margin","display","gap","useLegendStyles","props","className","baseStyles","styles"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Legends/useLegendsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { LegendsProps, LegendsStyles } from './Legends.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n\n/*\n @internal\n /\nexport const legendClassNames: SlotClassNames<LegendsStyles> = {\n root: 'fui-legend__root',\n legend: 'fui-legend__legend',\n rect: 'fui-legend__rect',\n shape: 'fui-legend__shape',\n triangle: 'fui-legend__triangle',\n text: 'fui-legend__text',\n hoverChange: 'fui-legend__hoverChange',\n resizableArea: 'fui-legend__resizableArea',\n legendContainer: 'fui-legend__legendContainer',\n annotation: 'fui-legend__annotation',\n};\n\nconst useStyles = makeStyles({\n root: {\n // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n // in responsive charts where legends consist of multiple words.\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center',\n },\n legend: {\n // setting display to flex does not work\n // display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n cursor: 'pointer',\n border: 'none',\n padding: `${LEGEND_PADDING}px`,\n textTransform: 'capitalize',\n // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n // cartesian charts to resize properly within a flexbox or grid layout.\n minWidth: 0,\n [HighContrastSelector]: {\n color: 'WindowText',\n forcedColorAdjust: 'none',\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid canvasText`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`,\n },\n },\n '&:hover': {\n [HighContrastSelector]: {\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n },\n },\n },\n rect: {\n [HighContrastSelector]: {\n content: 'var(--rect-content-high-contrast)',\n opacity: 'var(--rect-opacity-high-contrast)',\n },\n width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n border: `${LEGEND_SHAPE_BORDER}px solid`,\n },\n shape: {\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n },\n // TO DO Add props when these styles are used in the component\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n marginRight: tokens.spacingHorizontalS,\n },\n // TO DO Add props when these styles are used in the component\n text: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n // TO DO Add props when these styles are used in the component\n hoverChange: {\n width: '12px',\n height: '12px',\n marginRight: tokens.spacingHorizontalS,\n border: '1px solid',\n },\n resizableArea: {\n position: 'relative',\n textAlign: 'left',\n transform: 'translate(-50%, 0)',\n top: 'auto',\n left: '50%',\n minWidth: '200px',\n maxWidth: '800px',\n '::after': {\n padding: '1px 4px 1px',\n borderTop: '-2px',\n borderLeft: '-2px',\n },\n },\n legendContainer: {\n flex: '0 1 auto',\n margin: '4px',\n },\n annotation: {\n display: 'flex',\n alignItems: 'center',\n gap: '4px',\n },\n});\n\nexport const useLegendStyles = (props: LegendsProps): LegendsStyles => {\n const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(legendClassNames.root, baseStyles.root, className, props.styles?.root),\n legend: mergeClasses(legendClassNames.legend, baseStyles.legend, props.styles?.legend),\n rect: mergeClasses(legendClassNames.rect, baseStyles.rect, props.styles?.rect),\n shape: mergeClasses(legendClassNames.shape, baseStyles.shape, props.styles?.shape),\n triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, props.styles?.triangle),\n text: mergeClasses(legendClassNames.text, baseStyles.text, props.styles?.text),\n hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, props.styles?.hoverChange),\n resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, props.styles?.resizableArea),\n legendContainer: mergeClasses(\n legendClassNames.legendContainer,\n baseStyles.legendContainer,\n props.styles?.legendContainer,\n ),\n annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, props.styles?.annotation),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","whiteSpace","width","alignItems","justifyContent","cursor","border","padding","textTransform","minWidth","color","forcedColorAdjust","outline","strokeWidthThick","outlineOffset","content","opacity","marginRight","height","borderLeft","borderRight","borderTop","spacingHorizontalS","caption1","colorNeutralForeground1","position","textAlign","transform","top","left","maxWidth","flex","margin","display","gap","useLegendStyles","props","className","baseStyles","styles"],"mappings":"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"}

package/lib-commonjs/utilities/getWindow.js CHANGED Viewed

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

package/lib-commonjs/utilities/getWindow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utilities/getWindow.ts"],"sourcesContent":["~~import~~ { canUseDOM } from '@fluentui/react-utilities';\n\nlet _window: Window \| undefined = undefined;\n\n// Note: Accessing \"window\" in IE11 is somewhat expensive, and calling \"typeof window\"\n// hits a memory leak, whereas aliasing it and calling \"typeof _window\" does not.\n// Caching the window value at the file scope lets us minimize the impact.\ntry {\n _window = window;\n} catch (e) {\n /* no-op /\n}\n\n/\n Helper to get the window object. The helper will make sure to use a cached variable\n * of \"window\", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the\n * window object won't match the \"global\" window object, and for these scenarios, you should\n * pass in an element hosted within the popup.\n \n @public\n */\nexport function getWindow(rootElement?: Element \| null): Window \| undefined {\n if (!canUseDOM() \|\| typeof _window === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n"],"names":["canUseDOM","_window","undefined","window","e","getWindow","rootElement","el","ownerDocument","defaultView"],"mappings":"~~;;;;+BAqBgBK;;;;;;gCArBU~~,4BAA4B;AAEtD,~~IAAIJ~~,UAA8BC;AAElC,sFAAsF;AACtF,iFAAiF;AACjF,0EAA0E;AAC1E,IAAI;IACFD,UAAUE;AACZ,EAAE,OAAOC,GAAG;AACV,SAAS,GACX;AAUO,~~mBAAmBE~~,WAA4B;IACpD,IAAI,KAACN,yBAAAA,OAAe,OAAOC,YAAY,aAAa;QAClD,OAAOC;IACT,OAAO;QACL,MAAMK,KAAKD;QAEX,OAAOC,MAAMA,GAAGC,aAAa,IAAID,GAAGC,aAAa,CAACC,WAAW,GAAGF,GAAGC,aAAa,CAACC,WAAW,GAAGR;IACjG;AACF"}
1	+ {"version":3,"sources":["../src/utilities/getWindow.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM } from '@fluentui/react-utilities';\n\nlet _window: Window \| undefined = undefined;\n\n// Note: Accessing \"window\" in IE11 is somewhat expensive, and calling \"typeof window\"\n// hits a memory leak, whereas aliasing it and calling \"typeof _window\" does not.\n// Caching the window value at the file scope lets us minimize the impact.\ntry {\n _window = window;\n} catch (e) {\n /* no-op /\n}\n\n/\n Helper to get the window object. The helper will make sure to use a cached variable\n * of \"window\", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the\n * window object won't match the \"global\" window object, and for these scenarios, you should\n * pass in an element hosted within the popup.\n \n @public\n */\nexport function getWindow(rootElement?: Element \| null): Window \| undefined {\n if (!canUseDOM() \|\| typeof _window === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n"],"names":["canUseDOM","_window","undefined","window","e","getWindow","rootElement","el","ownerDocument","defaultView"],"mappings":"AAAA;;;;;;;;;;;gCAE0B,4BAA4B;AAEtD,IAAIC,UAA8BC;AAElC,sFAAsF;AACtF,iFAAiF;AACjF,0EAA0E;AAC1E,IAAI;IACFD,UAAUE;AACZ,EAAE,OAAOC,GAAG;AACV,SAAS,GACX;AAUO,SAASC,UAAUC,WAA4B;IACpD,IAAI,KAACN,yBAAAA,OAAe,OAAOC,YAAY,aAAa;QAClD,OAAOC;IACT,OAAO;QACL,MAAMK,KAAKD;QAEX,OAAOC,MAAMA,GAAGC,aAAa,IAAID,GAAGC,aAAa,CAACC,WAAW,GAAGF,GAAGC,aAAa,CAACC,WAAW,GAAGR;IACjG;AACF"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charts",
-  "version": "9.3.10",
+  "version": "9.3.12",
   "description": "React web chart controls for Microsoft fluentui v9 system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,15 +22,15 @@
   },
   "dependencies": {
     "@fluentui/chart-utilities": "^1.1.38",
-    "@fluentui/react-button": "^9.8.0",
-    "@fluentui/react-jsx-runtime": "^9.3.5",
-    "@fluentui/react-overflow": "^9.6.7",
-    "@fluentui/react-popover": "^9.13.0",
-    "@fluentui/react-shared-contexts": "^9.26.1",
-    "@fluentui/react-tabster": "^9.26.12",
+    "@fluentui/react-button": "^9.8.2",
+    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-overflow": "^9.7.1",
+    "@fluentui/react-popover": "^9.13.2",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-tabster": "^9.26.13",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-tooltip": "^9.9.0",
-    "@fluentui/react-utilities": "^9.26.1",
+    "@fluentui/react-tooltip": "^9.9.2",
+    "@fluentui/react-utilities": "^9.26.2",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1",
     "@types/d3-array": "^3.0.0",