@fluentui/react-charts 9.3.5 → 9.3.7

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';
 // Constants needed to create legends using SVG for image export
@@ -35,20 +35,29 @@ const useStyles = /*#__PURE__*/__styles({
   root: {
     Huce71: "fz5stix",
     a9b677: "fly5x3f",
-    Bt984gj: "f122n59",
-    B6of3ja: "fpzxe1g",
-    t21cq0: ["f705vk6", "fqom4eq"],
-    jrapky: "fzpzak3",
-    Frg6f3: ["fqom4eq", "f705vk6"]
+    Bt984gj: "f122n59"
   },
   legend: {
     Bt984gj: "f122n59",
     Brf1p80: ["fc7pyfw", "fgbriwd"],
     Bceei9c: "f1k6fduh",
-    icvyot: "f1ern45e",
-    vrafjx: ["f1n71otn", "f1deefiw"],
-    oivjwe: "f1h8hb77",
-    wvpqe5: ["f1deefiw", "f1n71otn"],
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh",
     Byoj8tv: 0,
     uwmqm3: 0,
     z189sj: 0,
@@ -56,14 +65,14 @@ const useStyles = /*#__PURE__*/__styles({
     B0ocmuz: "f1t756mo",
     B9bfxx9: "fiwaqkr",
     Bf4jedk: "fy77jfu",
-    Bs92zhm: "fuhkvgp",
-    B93v9kj: "f15mrrko",
-    Ck9m1r: "f1vu5irt",
-    mkjk8h: "f1sdboh2"
+    ixv5ic: "f4ji673",
+    Bkoo3cm: "fbcj00p",
+    Blj5yig: "f15ldg54",
+    Fdtwhm: "f1mwmwal"
   },
   rect: {
-    zpeayv: "f81dvq6",
-    Bcwlslt: "f1a000x3",
+    Blctwrt: "fdv7tct",
+    Bh9kdj0: "f1cdg9pe",
     a9b677: "frx94fk",
     t21cq0: ["f1phki43", "ff9s3yw"],
     Bgfg5da: 0,
@@ -90,9 +99,18 @@ const useStyles = /*#__PURE__*/__styles({
   triangle: {
     a9b677: "f3tsq5r",
     Bqenvij: "fniina8",
-    ibv6hh: ["fk1dseo", "f1r9b9o"],
-    Bekrc4i: ["f1r9b9o", "fk1dseo"],
-    B4j52fo: "f1cm5upi",
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    B4g9neb: ["fnw0r6y", "f1rx5fa6"],
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    u1mtju: ["f1rx5fa6", "fnw0r6y"],
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    i8vvqc: "f8yytl1",
     t21cq0: ["f1vcna3q", "foyynoy"]
   },
   text: {
@@ -107,10 +125,23 @@ const useStyles = /*#__PURE__*/__styles({
     a9b677: "frx94fk",
     Bqenvij: "fvblgha",
     t21cq0: ["f1vcna3q", "foyynoy"],
-    B4j52fo: "f1d7653x",
-    Bekrc4i: ["f1maxq7k", "f16g4l54"],
-    Bn0qgzm: "f1rzi0e7",
-    ibv6hh: ["f16g4l54", "f1maxq7k"]
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fpyyuzi"
   },
   resizableArea: {
     qhf8xq: "f10pi13n",
@@ -120,12 +151,19 @@ const useStyles = /*#__PURE__*/__styles({
     oyh7mz: ["f1ktbn1t", "ffenbu1"],
     Bf4jedk: "f93ek0f",
     B2u0y6b: "f1cgdal8",
-    smv486: "f2b5gy5",
-    u6pn5x: ["fk27hbk", "f1xelbol"],
-    B4uzyy: "f1gw7v5p",
-    Be2s5ez: ["f1xelbol", "fk27hbk"],
-    xrcqlc: "f196ehyi",
-    Bhxzhr1: ["frlu5y9", "f109kcev"]
+    B4uzyy: 0,
+    Be2s5ez: 0,
+    u6pn5x: 0,
+    smv486: 0,
+    B1nu0jp: "fhpgs2q",
+    B0n5ga8: 0,
+    Bm2nyyq: 0,
+    xrcqlc: 0,
+    wywymt: "f3dcgnf",
+    Gp14am: 0,
+    vfts7: 0,
+    Bhxzhr1: 0,
+    Du69r6: ["ft9y50a", "f1lazvcb"]
   },
   legendContainer: {
     xawz: 0,
@@ -146,28 +184,50 @@ const useStyles = /*#__PURE__*/__styles({
     rmohyg: "f4xv25i"
   }
 }, {
-  d: [".fz5stix{white-space:nowrap;}", ".fly5x3f{width:100%;}", ".f122n59{align-items:center;}", ".fpzxe1g{margin-top:-8px 0 0 -8px;}", ".f705vk6{margin-right:-8px 0 0 -8px;}", ".fqom4eq{margin-left:-8px 0 0 -8px;}", ".fzpzak3{margin-bottom:-8px 0 0 -8px;}", ".fc7pyfw{justify-content:left;}", ".fgbriwd{justify-content:right;}", ".f1k6fduh{cursor:pointer;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", [".f1t756mo{padding:8px;}", {
+  d: [".fz5stix{white-space:nowrap;}", ".fly5x3f{width:100%;}", ".f122n59{align-items:center;}", ".fc7pyfw{justify-content:left;}", ".fgbriwd{justify-content:right;}", ".f1k6fduh{cursor:pointer;}", [".f3bhgqh{border:none;}", {
+    p: -2
+  }], [".f1t756mo{padding:8px;}", {
     p: -1
   }], ".fiwaqkr{text-transform:capitalize;}", ".fy77jfu{min-width:0;}", ".frx94fk{width:12px;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", [".fpyyuzi{border:1px solid;}", {
     p: -2
-  }], ".f3tsq5r{width:0;}", ".fniina8{height:0;}", ".fk1dseo{border-left-width:6px solid transparent;}", ".f1r9b9o{border-right-width:6px solid transparent;}", ".f1cm5upi{border-top-width:10.4px solid;}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fhv2zbx{forced-color-adjust:auto;}", ".fvblgha{height:12px;}", ".f1d7653x{border-top-width:1px solid;}", ".f1maxq7k{border-right-width:1px solid;}", ".f16g4l54{border-left-width:1px solid;}", ".f1rzi0e7{border-bottom-width:1px solid;}", ".f10pi13n{position:relative;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f15ivbov{transform:translate(-50%, 0);}", ".fjwp9lj{transform:translate(50%, 0);}", ".f198g47y{top:auto;}", ".f1ktbn1t{left:50%;}", ".ffenbu1{right:50%;}", ".f93ek0f{min-width:200px;}", ".f1cgdal8{max-width:800px;}", ".f2b5gy5::after{padding-top:1px 4px 1px;}", ".fk27hbk::after{padding-right:1px 4px 1px;}", ".f1xelbol::after{padding-left:1px 4px 1px;}", ".f1gw7v5p::after{padding-bottom:1px 4px 1px;}", ".f196ehyi::after{border-top-width:-2px;}", ".frlu5y9::after{border-left-width:-2px;}", ".f109kcev::after{border-right-width:-2px;}", [".fd43uyw{flex:0 1 auto;}", {
+  }], ".f3tsq5r{width:0;}", ".fniina8{height:0;}", [".fnw0r6y{border-left:6px solid transparent;}", {
+    p: -1
+  }], [".f1rx5fa6{border-right:6px solid transparent;}", {
+    p: -1
+  }], [".f1rx5fa6{border-right:6px solid transparent;}", {
+    p: -1
+  }], [".fnw0r6y{border-left:6px solid transparent;}", {
+    p: -1
+  }], [".f8yytl1{border-top:10.4px solid;}", {
+    p: -1
+  }], ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fhv2zbx{forced-color-adjust:auto;}", ".fvblgha{height:12px;}", [".fpyyuzi{border:1px solid;}", {
+    p: -2
+  }], ".f10pi13n{position:relative;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f15ivbov{transform:translate(-50%, 0);}", ".fjwp9lj{transform:translate(50%, 0);}", ".f198g47y{top:auto;}", ".f1ktbn1t{left:50%;}", ".ffenbu1{right:50%;}", ".f93ek0f{min-width:200px;}", ".f1cgdal8{max-width:800px;}", [".fhpgs2q::after{padding:1px 4px 1px;}", {
+    p: -1
+  }], [".f3dcgnf::after{border-top:-2px;}", {
+    p: -1
+  }], [".ft9y50a::after{border-left:-2px;}", {
+    p: -1
+  }], [".f1lazvcb::after{border-right:-2px;}", {
+    p: -1
+  }], [".fd43uyw{flex:0 1 auto;}", {
     p: -1
   }], [".fduql59{margin:4px;}", {
     p: -1
   }], ".f22iagw{display:flex;}", [".f4xv25i{gap:4px;}", {
     p: -1
   }]],
-  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fuhkvgp{color:WindowText;}}", {
+  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f4ji673{color:WindowText;}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
-  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15mrrko{forced-color-adjust:none;}}", {
+  }], ["@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){.f1vu5irt:hover{color:HighlightText;}}", {
+  }], ["@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){.f1sdboh2:hover{forced-color-adjust:none;}}", {
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1mwmwal:hover{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){.f81dvq6{content:var(--rect-content-high-contrast);}}", {
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fdv7tct{content:var(--rect-content-high-contrast);}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
-  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1a000x3{opacity:var(--rect-opacity-high-contrast);}}", {
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1cdg9pe{opacity:var(--rect-opacity-high-contrast);}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
   }]]
 });

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","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","B6of3ja","t21cq0","jrapky","Frg6f3","Brf1p80","Bceei9c","icvyot","vrafjx","oivjwe","wvpqe5","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B9bfxx9","Bf4jedk","Bs92zhm","B93v9kj","Ck9m1r","mkjk8h","zpeayv","Bcwlslt","Bgfg5da","B9xav0g","Bn0qgzm","B4g9neb","zhjwy3","ibv6hh","u1mtju","h3c5rm","Bekrc4i","i8vvqc","g2u3we","B4j52fo","irswps","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","sj55zd","Bvjb7m6","qhf8xq","fsow6f","Bz10aip","Bhzewxz","oyh7mz","B2u0y6b","smv486","u6pn5x","B4uzyy","Be2s5ez","xrcqlc","Bhxzhr1","xawz","Bh6795r","Bnnss6s","fkmc3a","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, shorthands } 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        ...shorthands.margin('-8px 0 0 -8px')\n    },\n    legend: {\n        // setting display to flex does not work\n        // display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'left',\n        cursor: 'pointer',\n        ...shorthands.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        ...shorthands.borderLeft('6px solid transparent'),\n        ...shorthands.borderRight('6px solid transparent'),\n        ...shorthands.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        ...shorthands.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            ...shorthands.padding('1px 4px 1px'),\n            ...shorthands.borderTop('-2px'),\n            ...shorthands.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":[]}
+{"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":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D;AACA,OAAO,MAAMC,2BAA2B,GAAG,CAAC;AAC5C,OAAO,MAAMC,6BAA6B,GAAG,EAAE;AAC/C,OAAO,MAAMC,cAAc,GAAG,CAAC;AAC/B,OAAO,MAAMC,aAAa,GAAG,EAAE;AAC/B,OAAO,MAAMC,mBAAmB,GAAG,CAAC;AACpC,MAAMC,gCAAgC,GAAG,EAAE;AAC3C;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGD,gCAAgC,GAAGD,mBAAmB;AACvF,OAAO,MAAMG,uBAAuB,GAAG,CAAC;AACxC,OAAO,MAAMC,4BAA4B,GAAG,IAAI;AAChD;AACA;AACA;AAAI,OAAO,MAAMC,gBAAgB,GAAG;EAChCC,IAAI,EAAE,kBAAkB;EACxBC,MAAM,EAAE,oBAAoB;EAC5BC,IAAI,EAAE,kBAAkB;EACxBC,KAAK,EAAE,mBAAmB;EAC1BC,QAAQ,EAAE,sBAAsB;EAChCC,IAAI,EAAE,kBAAkB;EACxBC,WAAW,EAAE,yBAAyB;EACtCC,aAAa,EAAE,2BAA2B;EAC1CC,eAAe,EAAE,6BAA6B;EAC9CC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,SAAS,gBAAGzB,QAAA;EAAAe,IAAA;IAAAW,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,MAAA;IAAAY,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAzC,IAAA;IAAA0C,OAAA;IAAAC,OAAA;IAAAjC,MAAA;IAAAkC,MAAA;IAAA9B,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7B,KAAA;IAAA2C,MAAA;EAAA;EAAA1C,QAAA;IAAAQ,MAAA;IAAAmC,OAAA;IAAA1B,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAH,OAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAH,MAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAH,MAAA;IAAAkB,MAAA;EAAA;EAAAzC,IAAA;IAAA2C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA/C,WAAA;IAAAM,MAAA;IAAAmC,OAAA;IAAAD,MAAA;IAAA9B,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAzB,aAAA;IAAA+C,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAnB,OAAA;IAAAoB,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAhE,eAAA;IAAAiE,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAhC,MAAA;IAAAiC,OAAA;IAAAC,OAAA;EAAA;EAAAvE,UAAA;IAAAwE,MAAA;IAAApE,OAAA;IAAAqE,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyFjB,CAAC;AACF,OAAO,MAAMC,eAAe,GAAIC,KAAK,IAAG;EACpC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;EACjK,MAAM;IAAEC;EAAU,CAAC,GAAGX,KAAK,CAAC,CAAC;EAC7B,MAAMY,UAAU,GAAG3F,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHV,IAAI,EAAEd,YAAY,CAACa,gBAAgB,CAACC,IAAI,EAAEqG,UAAU,CAACrG,IAAI,EAAEoG,SAAS,EAAE,CAACV,aAAa,GAAGD,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIZ,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC1F,IAAI,CAAC;IACxKC,MAAM,EAAEf,YAAY,CAACa,gBAAgB,CAACE,MAAM,EAAEoG,UAAU,CAACpG,MAAM,EAAE,CAAC0F,cAAc,GAAGF,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIX,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1F,MAAM,CAAC;IACxKC,IAAI,EAAEhB,YAAY,CAACa,gBAAgB,CAACG,IAAI,EAAEmG,UAAU,CAACnG,IAAI,EAAE,CAAC0F,cAAc,GAAGH,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIV,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1F,IAAI,CAAC;IAChKC,KAAK,EAAEjB,YAAY,CAACa,gBAAgB,CAACI,KAAK,EAAEkG,UAAU,CAAClG,KAAK,EAAE,CAAC0F,cAAc,GAAGJ,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIT,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1F,KAAK,CAAC;IACpKC,QAAQ,EAAElB,YAAY,CAACa,gBAAgB,CAACK,QAAQ,EAAEiG,UAAU,CAACjG,QAAQ,EAAE,CAAC0F,cAAc,GAAGL,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIR,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1F,QAAQ,CAAC;IAChLC,IAAI,EAAEnB,YAAY,CAACa,gBAAgB,CAACM,IAAI,EAAEgG,UAAU,CAAChG,IAAI,EAAE,CAAC0F,cAAc,GAAGN,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIP,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1F,IAAI,CAAC;IAChKC,WAAW,EAAEpB,YAAY,CAACa,gBAAgB,CAACO,WAAW,EAAE+F,UAAU,CAAC/F,WAAW,EAAE,CAAC0F,cAAc,GAAGP,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIN,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1F,WAAW,CAAC;IAC5LC,aAAa,EAAErB,YAAY,CAACa,gBAAgB,CAACQ,aAAa,EAAE8F,UAAU,CAAC9F,aAAa,EAAE,CAAC0F,cAAc,GAAGR,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1F,aAAa,CAAC;IACpMC,eAAe,EAAEtB,YAAY,CAACa,gBAAgB,CAACS,eAAe,EAAE6F,UAAU,CAAC7F,eAAe,EAAE,CAAC0F,cAAc,GAAGT,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1F,eAAe,CAAC;IAC5MC,UAAU,EAAEvB,YAAY,CAACa,gBAAgB,CAACU,UAAU,EAAE4F,UAAU,CAAC5F,UAAU,EAAE,CAAC0F,cAAc,GAAGV,KAAK,CAACa,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1F,UAAU;EAC3L,CAAC;AACL,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 'use client';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';
 // Constants needed to create legends using SVG for image export
@@ -36,8 +36,7 @@ const useStyles = makeStyles({
         // in responsive charts where legends consist of multiple words.
         whiteSpace: 'nowrap',
         width: '100%',
-        alignItems: 'center',
-        ...shorthands.margin('-8px 0 0 -8px')
+        alignItems: 'center'
     },
     legend: {
         // setting display to flex does not work
@@ -45,7 +44,7 @@ const useStyles = makeStyles({
         alignItems: 'center',
         justifyContent: 'left',
         cursor: 'pointer',
-        ...shorthands.border('none'),
+        border: 'none',
         padding: `${LEGEND_PADDING}px`,
         textTransform: 'capitalize',
         // The default min-width is 64px. Setting it to 0 allows the legend container in responsive
@@ -78,9 +77,9 @@ const useStyles = makeStyles({
     triangle: {
         width: '0',
         height: '0',
-        ...shorthands.borderLeft('6px solid transparent'),
-        ...shorthands.borderRight('6px solid transparent'),
-        ...shorthands.borderTop('10.4px solid'),
+        borderLeft: '6px solid transparent',
+        borderRight: '6px solid transparent',
+        borderTop: '10.4px solid',
         marginRight: tokens.spacingHorizontalS
     },
     // TO DO Add props when these styles are used in the component
@@ -94,7 +93,7 @@ const useStyles = makeStyles({
         width: '12px',
         height: '12px',
         marginRight: tokens.spacingHorizontalS,
-        ...shorthands.border('1px solid')
+        border: '1px solid'
     },
     resizableArea: {
         position: 'relative',
@@ -105,9 +104,9 @@ const useStyles = makeStyles({
         minWidth: '200px',
         maxWidth: '800px',
         '::after': {
-            ...shorthands.padding('1px 4px 1px'),
-            ...shorthands.borderTop('-2px'),
-            ...shorthands.borderLeft('-2px')
+            padding: '1px 4px 1px',
+            borderTop: '-2px',
+            borderLeft: '-2px'
         }
     },
     legendContainer: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Legends/useLegendsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } 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    ...shorthands.margin('-8px 0 0 -8px'),\n  },\n  legend: {\n    // setting display to flex does not work\n    // display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'left',\n    cursor: 'pointer',\n    ...shorthands.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    ...shorthands.borderLeft('6px solid transparent'),\n    ...shorthands.borderRight('6px solid transparent'),\n    ...shorthands.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    ...shorthands.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      ...shorthands.padding('1px 4px 1px'),\n      ...shorthands.borderTop('-2px'),\n      ...shorthands.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","shorthands","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","margin","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","display","gap","useLegendStyles","props","className","baseStyles","styles"],"mappings":"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"}
+{"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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"}

package/lib/components/LineChart/LineChart.js

@@ -12,9 +12,9 @@ import { CartesianChart } from '../../index';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { tokens } from '@fluentui/react-theme';
 import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, useRtl, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize } from '../../utilities/index';
-import { toImage } from '../../utilities/image-export-utils';
 import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
+import { useImageExport } from '../../utilities/hooks';
 var PointSize = /*#__PURE__*/ function(PointSize) {
     PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
     PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
@@ -125,9 +125,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
     const _colorFillBarId = useId('_colorFillBarId');
     const _isRTL = useRtl();
     let xAxisCalloutAccessibilityData = {};
-    const cartesianChartRef = React.useRef(null);
+    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
     let _yScaleSecondary;
-    const _legendsRef = React.useRef(null);
     props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
     const [hoverXValue, setHoverXValue] = React.useState('');
     const [activeLegend, setActiveLegend] = React.useState('');
@@ -165,18 +164,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
         props.width,
         props.data
     ]);
-    React.useImperativeHandle(props.componentRef, ()=>{
-        var _cartesianChartRef_current;
-        var _cartesianChartRef_current_chartContainer;
-        return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
-            toImage: (opts)=>{
-                var _cartesianChartRef_current, _legendsRef_current;
-                return toImage((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
-            }
-        };
-    }, []);
-    function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+    function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
         let domainNRangeValue;
         if (xAxisType === XAxisTypes.NumericAxis) {
             domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, props.xScaleType, _hasMarkersMode);
@@ -237,7 +225,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : null;
     }
     function _getNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
         const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale, useSecondaryYScale ? props.secondaryYScaleType : props.yScaleType);
         let yPadding = {
             start: 0,
@@ -443,7 +430,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 secondaryYScaleType: props.secondaryYScaleType
             }) : 0;
             if (_points[i].data.length === 1) {
-                // eslint-disable-next-line @typescript-eslint/no-shadow
                 const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[0];
                 const xPoint = _xAxisScale(x1);
                 const yPoint = yScale(y1);
@@ -997,12 +983,18 @@ const PATH_MULTIPLY_SIZE = 2.5;
         const formattedDate = xPointToHighlight instanceof Date ? formatDateToLocaleString(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
         const found = findCalloutPoints(calloutPointsRef.current, xPointToHighlight);
         const pointToHighlight = lineChartData[linenumber].data[index];
+        // Check if this point is plottable. If not, close the popover and return.
+        const xPoint = _xAxisScale(pointToHighlight.x);
+        const yPoint = yScale(pointToHighlight.y);
+        if (!isPlottable(xPoint, yPoint)) {
+            return;
+        }
         const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
         // if no points need to be called out then don't show vertical line and callout card
         if (found && pointToHighlightUpdated) {
             _uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
-            d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${_xAxisScale(pointToHighlight.x)}`).attr('cy', `${yScale(pointToHighlight.y)}`).attr('visibility', 'visibility');
-            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(pointToHighlight.x)}, ${yScale(pointToHighlight.y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(pointToHighlight.y)}`);
+            d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${xPoint}`).attr('cy', `${yPoint}`).attr('visibility', 'visibility');
+            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${xPoint}, ${yPoint})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yPoint}`);
             const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
             const rect = targetElement.getBoundingClientRect();
             setNearestCircleToHighlight(pointToHighlight);
@@ -1262,7 +1254,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
         onChartMouseLeave: _handleChartMouseLeave,
         enableFirstRenderOptimization: props.enablePerfOptimization && _firstRenderOptimization,
         componentRef: cartesianChartRef,
-        /* eslint-disable react/jsx-no-bind */ // eslint-disable-next-line react/no-children-prop
         children: (props)=>{
             _xAxisScale = props.xScale;
             _yScalePrimary = props.yScalePrimary;