@fluentui/react-charts 9.3.4 → 9.3.6

package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js

@@ -34,7 +34,9 @@ const verticalstackedbarchartClassNames = {
     chartWrapper: '',
     svgTooltip: '',
     chart: '',
-    axisAnnotation: ''
+    axisAnnotation: '',
+    plotContainer: '',
+    annotationLayer: ''
 };
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     opacityChangeOnHover: {
@@ -47,16 +49,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bg96gwp: "f1i3iumi",
         mc9l5x: "f22iagw",
         Beiy3e4: "f1vx9l62",
-        z8tnut: "f17mpqex",
-        z189sj: [
-            "f1vdfbxk",
-            "f1f5gg8d"
-        ],
-        Byoj8tv: "fdvome7",
-        uwmqm3: [
-            "f1f5gg8d",
-            "f1vdfbxk"
-        ],
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1bnz8pu",
         qhf8xq: "f1euv43f",
         fsow6f: "f17mccla",
         Bhzewxz: "fr6rvge",
@@ -86,10 +83,12 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1i3iumi{line-height:var(--lineHeightBase300);}",
         ".f22iagw{display:flex;}",
         ".f1vx9l62{flex-direction:column;}",
-        ".f17mpqex{padding-top:var(--spacingHorizontalS);}",
-        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
-        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
-        ".fdvome7{padding-bottom:var(--spacingHorizontalS);}",
+        [
+            ".f1bnz8pu{padding:var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
         ".f1euv43f{position:absolute;}",
         ".f17mccla{text-align:center;}",
         ".fr6rvge{top:var(--spacingVerticalNone);}",

package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useVerticalStackedBarChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\nexport const verticalstackedbarchartClassNames = {\n    opacityChangeOnHover: 'fui-vsbc__opacityChangeOnHover',\n    tooltip: 'fui-vsbc__tooltip',\n    barLabel: 'fui-vsbc__barLabel',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {\n        cursor: 'default'\n    },\n    tooltip: getTooltipStyle(),\n    barLabel: getBarLabelStyle()\n});\nexport const useVerticalStackedBarChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(verticalstackedbarchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover, props.href ? 'pointer' : 'default'),\n        tooltip: mergeClasses(verticalstackedbarchartClassNames.tooltip, baseStyles.tooltip),\n        barLabel: mergeClasses(verticalstackedbarchartClassNames.barLabel, baseStyles.barLabel)\n    };\n};\n"],"names":["__styles","mergeClasses","getBarLabelStyle","getTooltipStyle","verticalstackedbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bceei9c","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","Bvjb7m6","d","p","useVerticalStackedBarChartStyles","props","baseStyles","href"],"mappings":"AAAA,YAAY;;;;;;;;;;;;oCA4BiC;eAAhCgD;;IAzBA5C,iCAAiC;;;;uBAFL,gBAAgB;AAElD,0CAA0C;IAC7CC,oBAAoB,EAAE,gCAAgC;IACtDC,OAAO,EAAE,mBAAmB;IAC5BC,QAAQ,EAAE,oBAAoB;IAC9BC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGrB,eAAA,EAAA;IAAAK,oBAAA,EAAA;QAAAiB,OAAA,EAAA;IAAA;IAAAhB,OAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAApC,QAAA,EAAA;QAAAgB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMjB,CAAC;AACK,0CAA0CE,KAAK,IAAG;IACrD,MAAMC,UAAU,GAAG7B,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHhB,oBAAoB,MAAEJ,mBAAY,EAACG,iCAAiC,CAACC,oBAAoB,EAAE6C,UAAU,CAAC7C,oBAAoB,EAAE4C,KAAK,CAACE,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;QAC/J7C,OAAO,MAAEL,mBAAY,EAACG,iCAAiC,CAACE,OAAO,EAAE4C,UAAU,CAAC5C,OAAO,CAAC;QACpFC,QAAQ,MAAEN,mBAAY,EAACG,iCAAiC,CAACG,QAAQ,EAAE2C,UAAU,CAAC3C,QAAQ;IAC1F,CAAC;AACL,CAAC"}
+{"version":3,"sources":["useVerticalStackedBarChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\nexport const verticalstackedbarchartClassNames = {\n    opacityChangeOnHover: 'fui-vsbc__opacityChangeOnHover',\n    tooltip: 'fui-vsbc__tooltip',\n    barLabel: 'fui-vsbc__barLabel',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: '',\n    plotContainer: '',\n    annotationLayer: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {\n        cursor: 'default'\n    },\n    tooltip: getTooltipStyle(),\n    barLabel: getBarLabelStyle()\n});\nexport const useVerticalStackedBarChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(verticalstackedbarchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover, props.href ? 'pointer' : 'default'),\n        tooltip: mergeClasses(verticalstackedbarchartClassNames.tooltip, baseStyles.tooltip),\n        barLabel: mergeClasses(verticalstackedbarchartClassNames.barLabel, baseStyles.barLabel)\n    };\n};\n"],"names":["__styles","mergeClasses","getBarLabelStyle","getTooltipStyle","verticalstackedbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bceei9c","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","Bvjb7m6","d","p","useVerticalStackedBarChartStyles","props","baseStyles","href"],"mappings":"AAAA,YAAY;;;;;;;;;;;;oCA8BiC;eAAhCmD;;IA3BA/C,iCAAiC;;;;uBAFL,gBAAgB;AAElD,0CAA0C;IAC7CC,oBAAoB,EAAE,gCAAgC;IACtDC,OAAO,EAAE,mBAAmB;IAC5BC,QAAQ,EAAE,oBAAoB;IAC9BC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE,EAAE;IAClBC,aAAa,EAAE,EAAE;IACjBC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGvB,eAAA,EAAA;IAAAK,oBAAA,EAAA;QAAAmB,OAAA,EAAA;IAAA;IAAAlB,OAAA,EAAA;QAAAmB,OAAA,EAAA;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,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAvC,QAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAmB,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMjB,CAAC;AACK,0CAA0CE,KAAK,IAAG;IACrD,MAAMC,UAAU,GAAG9B,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHlB,oBAAoB,MAAEJ,mBAAY,EAACG,iCAAiC,CAACC,oBAAoB,EAAEgD,UAAU,CAAChD,oBAAoB,EAAE+C,KAAK,CAACE,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;QAC/JhD,OAAO,MAAEL,mBAAY,EAACG,iCAAiC,CAACE,OAAO,EAAE+C,UAAU,CAAC/C,OAAO,CAAC;QACpFC,QAAQ,MAAEN,mBAAY,EAACG,iCAAiC,CAACG,QAAQ,EAAE8C,UAAU,CAAC9C,QAAQ;IAC1F,CAAC;AACL,CAAC"}

package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js

@@ -35,7 +35,9 @@ const verticalstackedbarchartClassNames = {
     chartWrapper: '',
     svgTooltip: '',
     chart: '',
-    axisAnnotation: ''
+    axisAnnotation: '',
+    plotContainer: '',
+    annotationLayer: ''
 };
 const useStyles = (0, _react.makeStyles)({
     opacityChangeOnHover: {

package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { VerticalStackedBarChartProps, VerticalStackedBarChartStyles } from './VerticalStackedBarChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const verticalstackedbarchartClassNames: SlotClassNames<VerticalStackedBarChartStyles> = {\n  opacityChangeOnHover: 'fui-vsbc__opacityChangeOnHover',\n  tooltip: 'fui-vsbc__tooltip',\n  barLabel: 'fui-vsbc__barLabel',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n  opacityChangeOnHover: {\n    cursor: 'default',\n  },\n  tooltip: getTooltipStyle() as GriffelStyle,\n  barLabel: getBarLabelStyle() as GriffelStyle,\n});\n\nexport const useVerticalStackedBarChartStyles = (\n  props: VerticalStackedBarChartProps,\n): VerticalStackedBarChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    opacityChangeOnHover: mergeClasses(\n      verticalstackedbarchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover,\n      props.href ? 'pointer' : 'default',\n    ),\n    tooltip: mergeClasses(verticalstackedbarchartClassNames.tooltip, baseStyles.tooltip),\n    barLabel: mergeClasses(verticalstackedbarchartClassNames.barLabel, baseStyles.barLabel),\n  };\n};\n"],"names":["makeStyles","mergeClasses","getBarLabelStyle","getTooltipStyle","verticalstackedbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","cursor","useVerticalStackedBarChartStyles","props","baseStyles","href"],"mappings":"AAAA;;;;;;;;;;;;IAkCauB,gCAAAA;;;qCA3BAnB;;;;uBAL0C,iBAAiB;uBAGtB,wBAAwB;AAEnE,MAAMA,oCAAmF;IAC9FC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,gBAAYrB,iBAAAA,EAAW;IAC3BK,sBAAsB;QACpBiB,QAAQ;IACV;IACAhB,aAASH,sBAAAA;IACTI,cAAUL,uBAAAA;AACZ;AAEO,yCAAyC,CAC9CsB;IAEA,MAAMC,aAAaJ;IAEnB,OAAO;QACLhB,0BAAsBJ,mBAAAA,EACpBG,kCAAkCC,oBAAoB,EACtDoB,WAAWpB,oBAAoB,EAC/BmB,MAAME,IAAI,GAAG,YAAY;QAE3BpB,aAASL,mBAAAA,EAAaG,kCAAkCE,OAAO,EAAEmB,WAAWnB,OAAO;QACnFC,cAAUN,mBAAAA,EAAaG,kCAAkCG,QAAQ,EAAEkB,WAAWlB,QAAQ;IACxF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { VerticalStackedBarChartProps, VerticalStackedBarChartStyles } from './VerticalStackedBarChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const verticalstackedbarchartClassNames: SlotClassNames<VerticalStackedBarChartStyles> = {\n  opacityChangeOnHover: 'fui-vsbc__opacityChangeOnHover',\n  tooltip: 'fui-vsbc__tooltip',\n  barLabel: 'fui-vsbc__barLabel',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n  plotContainer: '',\n  annotationLayer: '',\n};\n\nconst useStyles = makeStyles({\n  opacityChangeOnHover: {\n    cursor: 'default',\n  },\n  tooltip: getTooltipStyle() as GriffelStyle,\n  barLabel: getBarLabelStyle() as GriffelStyle,\n});\n\nexport const useVerticalStackedBarChartStyles = (\n  props: VerticalStackedBarChartProps,\n): VerticalStackedBarChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    opacityChangeOnHover: mergeClasses(\n      verticalstackedbarchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover,\n      props.href ? 'pointer' : 'default',\n    ),\n    tooltip: mergeClasses(verticalstackedbarchartClassNames.tooltip, baseStyles.tooltip),\n    barLabel: mergeClasses(verticalstackedbarchartClassNames.barLabel, baseStyles.barLabel),\n  };\n};\n"],"names":["makeStyles","mergeClasses","getBarLabelStyle","getTooltipStyle","verticalstackedbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","cursor","useVerticalStackedBarChartStyles","props","baseStyles","href"],"mappings":"AAAA;;;;;;;;;;;;IAoCayB,gCAAAA;;;qCA7BArB;;;;uBAL0C,iBAAiB;uBAGtB,wBAAwB;AAEnE,MAAMA,oCAAmF;IAC9FC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;IAChBC,eAAe;IACfC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,gBAAYvB,iBAAAA,EAAW;IAC3BK,sBAAsB;QACpBmB,QAAQ;IACV;IACAlB,aAASH,sBAAAA;IACTI,cAAUL,uBAAAA;AACZ;AAEO,yCAAyC,CAC9CwB;IAEA,MAAMC,aAAaJ;IAEnB,OAAO;QACLlB,0BAAsBJ,mBAAAA,EACpBG,kCAAkCC,oBAAoB,EACtDsB,WAAWtB,oBAAoB,EAC/BqB,MAAME,IAAI,GAAG,YAAY;QAE3BtB,aAASL,mBAAAA,EAAaG,kCAAkCE,OAAO,EAAEqB,WAAWrB,OAAO;QACnFC,cAAUN,mBAAAA,EAAaG,kCAAkCG,QAAQ,EAAEoB,WAAWpB,QAAQ;IACxF;AACF,EAAE"}

package/lib-commonjs/index.js

@@ -26,3 +26,4 @@ _export_star._(require("./SankeyChart"), exports);
 _export_star._(require("./FunnelChart"), exports);
 _export_star._(require("./GanttChart"), exports);
 _export_star._(require("./ChartTable"), exports);
+_export_star._(require("./AnnotationOnlyChart"), exports);

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './Sparkline';\nexport * from './ScatterChart';\nexport * from './GaugeChart';\nexport * from './utilities/colors';\nexport * from './Popover';\nexport * from './ResponsiveContainer';\nexport * from './DeclarativeChart';\nexport * from './AreaChart';\nexport * from './HorizontalBarChartWithAxis';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './FunnelChart';\nexport * from './GanttChart';\nexport * from './ChartTable';\n"],"names":[],"mappings":";;;;;uBAAc,uBAAuB;uBACvB,eAAe;uBACf,YAAY;uBACZ,cAAc;uBACd,qBAAqB;uBACrB,4BAA4B;uBAC5B,4BAA4B;uBAC5B,mBAAmB;uBACnB,gBAAgB;uBAChB,cAAc;uBACd,iBAAiB;uBACjB,eAAe;uBACf,qBAAqB;uBACrB,YAAY;uBACZ,wBAAwB;uBACxB,qBAAqB;uBACrB,cAAc;uBACd,+BAA+B;uBAC/B,iBAAiB;uBACjB,gBAAgB;uBAChB,gBAAgB;uBAChB,eAAe;uBACf,eAAe"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './Sparkline';\nexport * from './ScatterChart';\nexport * from './GaugeChart';\nexport * from './utilities/colors';\nexport * from './Popover';\nexport * from './ResponsiveContainer';\nexport * from './DeclarativeChart';\nexport * from './AreaChart';\nexport * from './HorizontalBarChartWithAxis';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './FunnelChart';\nexport * from './GanttChart';\nexport * from './ChartTable';\nexport * from './AnnotationOnlyChart';\n"],"names":[],"mappings":";;;;;uBAAc,uBAAuB;uBACvB,eAAe;uBACf,YAAY;uBACZ,cAAc;uBACd,qBAAqB;uBACrB,4BAA4B;uBAC5B,4BAA4B;uBAC5B,mBAAmB;uBACnB,gBAAgB;uBAChB,cAAc;uBACd,iBAAiB;uBACjB,eAAe;uBACf,qBAAqB;uBACrB,YAAY;uBACZ,wBAAwB;uBACxB,qBAAqB;uBACrB,cAAc;uBACd,+BAA+B;uBAC/B,iBAAiB;uBACjB,gBAAgB;uBAChB,gBAAgB;uBAChB,eAAe;uBACf,eAAe;uBACf,wBAAwB"}

package/lib-commonjs/types/ChartAnnotation.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/types/ChartAnnotation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types/ChartAnnotation.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ChartAnnotationCoordinate = {\n  /** Cartesian data coordinates mapped through the chart scales or\n   * Normalised coordinates within the plot area (0-1) or\n   * Absolute pixel position relative to the chart's SVG origin\n   */\n  type: 'data' | 'relative' | 'pixel';\n  /** x-axis value in the data domain */\n  x: number | string | Date;\n  /** y-axis value in the data domain */\n  y: number | string | Date;\n  /** Use the secondary y scale when available */\n  yAxis?: 'primary' | 'secondary';\n};\n\nexport type ChartAnnotationHorizontalAlign = 'start' | 'center' | 'end';\nexport type ChartAnnotationVerticalAlign = 'top' | 'middle' | 'bottom';\n\nexport type ChartAnnotationArrowHead = 'none' | 'start' | 'end' | 'both';\n\nexport interface ChartAnnotationConnectorProps {\n  /** Distance in pixels between the annotation element and the start of the connector. */\n  startPadding?: number;\n  /** Distance in pixels between the anchor point and the end of the connector. */\n  endPadding?: number;\n  /** Stroke colour for the connector. */\n  strokeColor?: string;\n  /** Stroke width in pixels. */\n  strokeWidth?: number;\n  /** SVG stroke dash array for dashed connectors. */\n  dashArray?: string;\n  /** Arrow head placement. Defaults to `'end'`. */\n  arrow?: ChartAnnotationArrowHead;\n}\n\nexport interface ChartAnnotationLayoutProps {\n  /** Horizontal alignment of the annotation relative to the anchor point */\n  align?: ChartAnnotationHorizontalAlign;\n  /** Vertical alignment of the annotation relative to the anchor point */\n  verticalAlign?: ChartAnnotationVerticalAlign;\n  /** Horizontal offset in pixels applied after alignment */\n  offsetX?: number;\n  /** Vertical offset in pixels applied after alignment */\n  offsetY?: number;\n  /** Optional maximum width for wrapped text */\n  maxWidth?: number;\n  /** Whether the annotation should remain inside the plot area */\n  clipToBounds?: boolean;\n  /** Additional CSS classes applied to the annotation wrapper */\n  className?: string;\n}\n\nexport interface ChartAnnotationStyleProps {\n  /** Text colour */\n  textColor?: string;\n  /** Background colour for the annotation container */\n  backgroundColor?: string;\n  /** Border colour */\n  borderColor?: string;\n  /** Border width */\n  borderWidth?: number;\n  /** Border style (solid, dashed, etc.) */\n  borderStyle?: React.CSSProperties['borderStyle'];\n  /** Border radius */\n  borderRadius?: number;\n  /** Box shadow applied to annotation */\n  boxShadow?: string;\n  /** Font size override */\n  fontSize?: string;\n  /** Font weight override */\n  fontWeight?: React.CSSProperties['fontWeight'];\n  /** Padding around the text. Accepts CSS shorthand notation */\n  padding?: string;\n  /** Opacity for the annotation container */\n  opacity?: number;\n  /** Optional class name applied to the annotation element */\n  className?: string;\n  /** Rotation, in degrees, applied to the annotation container */\n  rotation?: number;\n}\n\nexport interface ChartAnnotationAccessibilityProps {\n  /** Accessible label announced by assistive technologies */\n  ariaLabel?: string;\n  /** Accessible description id */\n  ariaDescribedBy?: string;\n  /** Custom role */\n  role?: string;\n}\n\nexport interface ChartAnnotation {\n  /** Optional id for React reconciliation */\n  id?: string;\n  /** Primary textual content */\n  text: string;\n  /** Coordinates describing where the annotation should be anchored */\n  coordinates: ChartAnnotationCoordinate;\n  /** Layout customisation */\n  layout?: ChartAnnotationLayoutProps;\n  /** Visual styling */\n  style?: ChartAnnotationStyleProps;\n  /** Optional connector line that links the annotation to its anchor. */\n  connector?: ChartAnnotationConnectorProps;\n  /** Accessibility metadata */\n  accessibility?: ChartAnnotationAccessibilityProps;\n  /** Optional application specific metadata */\n  data?: Record<string, unknown>;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/types/index.js

@@ -5,3 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 const _export_star = require("@swc/helpers/_/_export_star");
 _export_star._(require("./DataPoint"), exports);
 _export_star._(require("./LegendDataItem"), exports);
+_export_star._(require("./ChartAnnotation"), exports);

package/lib-commonjs/types/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types/index.ts"],"sourcesContent":["export * from './DataPoint';\nexport * from './LegendDataItem';\n"],"names":[],"mappings":";;;;;uBAAc,cAAc;uBACd,mBAAmB"}
+{"version":3,"sources":["../src/types/index.ts"],"sourcesContent":["export * from './DataPoint';\nexport * from './LegendDataItem';\nexport * from './ChartAnnotation';\n"],"names":[],"mappings":";;;;;uBAAc,cAAc;uBACd,mBAAmB;uBACnB,oBAAoB"}

package/lib-commonjs/utilities/Common.styles.js

@@ -24,13 +24,12 @@ _export(exports, {
 });
 const _utilities = require("../utilities/utilities");
 const _reacttheme = require("@fluentui/react-theme");
-const _react = require("@griffel/react");
 const getTooltipStyle = ()=>{
     return {
         ..._reacttheme.typographyStyles.body1,
         display: 'flex',
         flexDirection: 'column',
-        ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
+        padding: _reacttheme.tokens.spacingHorizontalS,
         position: 'absolute',
         textAlign: 'center',
         top: _reacttheme.tokens.spacingVerticalNone,

package/lib-commonjs/utilities/Common.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Common.styles.js"],"sourcesContent":["import { HighContrastSelector } from '../utilities/utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nexport const getTooltipStyle = ()=>{\n    return {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        backgroundColor: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none',\n        color: tokens.colorNeutralForeground1\n    };\n};\nexport const getAxisTitleStyle = ()=>{\n    return {\n        ...typographyStyles.caption2Strong,\n        fontStyle: 'normal',\n        textAlign: 'center',\n        color: tokens.colorNeutralForeground2,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    };\n};\nexport const getBarLabelStyle = ()=>{\n    return {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    };\n};\nexport const getMarkerLabelStyle = ()=>{\n    return {\n        ...typographyStyles.body1,\n        fill: tokens.colorNeutralForeground1,\n        textAnchor: 'middle',\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    };\n};\n"],"names":["HighContrastSelector","tokens","typographyStyles","shorthands","getTooltipStyle","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","getAxisTitleStyle","caption2Strong","fontStyle","colorNeutralForeground2","fill","getBarLabelStyle","caption1Strong","forcedColorAdjust","getMarkerLabelStyle","textAnchor"],"mappings":";;;;;;;;;;;IAkBaqB,iBAAiB;;;IAYjBK,gBAAgB;;;uBAOG;eAAnBG;;mBAlCe;;;;2BAHS,wBAAwB;4BACpB,uBAAuB;uBACrC,gBAAgB;AACpC,MAAMzB,kBAAkBA,CAAA,KAAI;IAC/B,OAAO;QACH,GAAGF,4BAAgB,CAACG,KAAK;QACzBC,OAAO,EAAE,MAAM;QACfC,aAAa,EAAE,QAAQ;QACvB,GAAGJ,iBAAU,CAACK,OAAO,CAACP,kBAAM,CAACQ,kBAAkB,CAAC;QAChDC,QAAQ,EAAE,UAAU;QACpBC,SAAS,EAAE,QAAQ;QACnBC,GAAG,EAAEX,kBAAM,CAACY,mBAAmB;QAC/BC,eAAe,EAAEb,kBAAM,CAACc,uBAAuB;QAC/CC,YAAY,EAAEf,kBAAM,CAACgB,iBAAiB;QACtCC,aAAa,EAAE,MAAM;QACrBC,KAAK,EAAElB,kBAAM,CAACmB,uBAAAA;IAClB,CAAC;AACL,CAAC;AACM,0BAA0BC,CAAA,KAAI;IACjC,OAAO;QACH,GAAGnB,4BAAgB,CAACoB,cAAc;QAClCC,SAAS,EAAE,QAAQ;QACnBZ,SAAS,EAAE,QAAQ;QACnBQ,KAAK,EAAElB,kBAAM,CAACuB,uBAAuB;QACrCC,IAAI,EAAExB,kBAAM,CAACmB,uBAAuB;QACpC,CAACpB,+BAAoB,CAAA,EAAG;YACpByB,IAAI,EAAE;QACV;IACJ,CAAC;AACL,CAAC;AACM,yBAAyBC,CAAA,KAAI;IAChC,OAAO;QACH,GAAGxB,4BAAgB,CAACyB,cAAc;QAClCF,IAAI,EAAExB,kBAAM,CAACmB,uBAAuB;QACpCQ,iBAAiB,EAAE;IACvB,CAAC;AACL,CAAC;AACM,4BAA4BC,CAAA,KAAI;IACnC,OAAO;QACH,GAAG3B,4BAAgB,CAACG,KAAK;QACzBoB,IAAI,EAAExB,kBAAM,CAACmB,uBAAuB;QACpCU,UAAU,EAAE,QAAQ;QACpB,CAAC9B,+BAAoB,CAAA,EAAG;YACpByB,IAAI,EAAE;QACV;IACJ,CAAC;AACL,CAAC"}
+{"version":3,"sources":["Common.styles.js"],"sourcesContent":["import { HighContrastSelector } from '../utilities/utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const getTooltipStyle = ()=>{\n    return {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        padding: tokens.spacingHorizontalS,\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        backgroundColor: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none',\n        color: tokens.colorNeutralForeground1\n    };\n};\nexport const getAxisTitleStyle = ()=>{\n    return {\n        ...typographyStyles.caption2Strong,\n        fontStyle: 'normal',\n        textAlign: 'center',\n        color: tokens.colorNeutralForeground2,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    };\n};\nexport const getBarLabelStyle = ()=>{\n    return {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    };\n};\nexport const getMarkerLabelStyle = ()=>{\n    return {\n        ...typographyStyles.body1,\n        fill: tokens.colorNeutralForeground1,\n        textAnchor: 'middle',\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    };\n};\n"],"names":["HighContrastSelector","tokens","typographyStyles","getTooltipStyle","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","getAxisTitleStyle","caption2Strong","fontStyle","colorNeutralForeground2","fill","getBarLabelStyle","caption1Strong","forcedColorAdjust","getMarkerLabelStyle","textAnchor"],"mappings":";;;;;;;;;;;IAiBaoB,iBAAiB;;;oBAYD;;;IAOhBQ,mBAAmB;;;mBAlCJ;;;;2BAFS,wBAAwB;4BACpB,uBAAuB;AACzD,MAAMzB,kBAAkBA,CAAA,KAAI;IAC/B,OAAO;QACH,GAAGD,4BAAgB,CAACE,KAAK;QACzBC,OAAO,EAAE,MAAM;QACfC,aAAa,EAAE,QAAQ;QACvBC,OAAO,EAAEN,kBAAM,CAACO,kBAAkB;QAClCC,QAAQ,EAAE,UAAU;QACpBC,SAAS,EAAE,QAAQ;QACnBC,GAAG,EAAEV,kBAAM,CAACW,mBAAmB;QAC/BC,eAAe,EAAEZ,kBAAM,CAACa,uBAAuB;QAC/CC,YAAY,EAAEd,kBAAM,CAACe,iBAAiB;QACtCC,aAAa,EAAE,MAAM;QACrBC,KAAK,EAAEjB,kBAAM,CAACkB,uBAAAA;IAClB,CAAC;AACL,CAAC;AACM,0BAA0BC,CAAA,KAAI;IACjC,OAAO;QACH,GAAGlB,4BAAgB,CAACmB,cAAc;QAClCC,SAAS,EAAE,QAAQ;QACnBZ,SAAS,EAAE,QAAQ;QACnBQ,KAAK,EAAEjB,kBAAM,CAACsB,uBAAuB;QACrCC,IAAI,EAAEvB,kBAAM,CAACkB,uBAAuB;QACpC,CAACnB,+BAAoB,CAAA,EAAG;YACpBwB,IAAI,EAAE;QACV;IACJ,CAAC;AACL,CAAC;AACM,MAAMC,mBAAmBA,CAAA,KAAI;IAChC,OAAO;QACH,GAAGvB,4BAAgB,CAACwB,cAAc;QAClCF,IAAI,EAAEvB,kBAAM,CAACkB,uBAAuB;QACpCQ,iBAAiB,EAAE;IACvB,CAAC;AACL,CAAC;AACM,4BAA4BC,CAAA,KAAI;IACnC,OAAO;QACH,GAAG1B,4BAAgB,CAACE,KAAK;QACzBoB,IAAI,EAAEvB,kBAAM,CAACkB,uBAAuB;QACpCU,UAAU,EAAE,QAAQ;QACpB,CAAC7B,+BAAoB,CAAA,EAAG;YACpBwB,IAAI,EAAE;QACV;IACJ,CAAC;AACL,CAAC"}

package/lib-commonjs/utilities/Common.styles.raw.js

@@ -24,13 +24,12 @@ _export(exports, {
 });
 const _utilities = require("../utilities/utilities");
 const _reacttheme = require("@fluentui/react-theme");
-const _react = require("@griffel/react");
 const getTooltipStyle = ()=>{
     return {
         ..._reacttheme.typographyStyles.body1,
         display: 'flex',
         flexDirection: 'column',
-        ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
+        padding: _reacttheme.tokens.spacingHorizontalS,
         position: 'absolute',
         textAlign: 'center',
         top: _reacttheme.tokens.spacingVerticalNone,

package/lib-commonjs/utilities/Common.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utilities/Common.styles.ts"],"sourcesContent":["import { HighContrastSelector } from '../utilities/utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { shorthands, type GriffelStyle } from '@griffel/react';\n\nexport const getTooltipStyle = (): GriffelStyle => {\n  return {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n    color: tokens.colorNeutralForeground1,\n  };\n};\n\nexport const getAxisTitleStyle = (): GriffelStyle => {\n  return {\n    ...typographyStyles.caption2Strong,\n    fontStyle: 'normal',\n    textAlign: 'center',\n    color: tokens.colorNeutralForeground2,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  };\n};\n\nexport const getBarLabelStyle = (): GriffelStyle => {\n  return {\n    ...typographyStyles.caption1Strong, // Confirm styles\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  };\n};\n\nexport const getMarkerLabelStyle = (): GriffelStyle => {\n  return {\n    ...typographyStyles.body1,\n    fill: tokens.colorNeutralForeground1,\n    textAnchor: 'middle',\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  };\n};\n"],"names":["HighContrastSelector","tokens","typographyStyles","shorthands","getTooltipStyle","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","getAxisTitleStyle","caption2Strong","fontStyle","colorNeutralForeground2","fill","getBarLabelStyle","caption1Strong","forcedColorAdjust","getMarkerLabelStyle","textAnchor"],"mappings":";;;;;;;;;;;IAoBaqB,iBAAAA;;;IAaAK,gBAAAA;;;uBAQAG;eAAAA;;mBArCAzB;;;;2BAJwB,yBAAyB;4BACrB,wBAAwB;uBACnB,iBAAiB;AAExD,MAAMA,kBAAkB;IAC7B,OAAO;QACL,GAAGF,4BAAAA,CAAiBG,KAAK;QACzBC,SAAS;QACTC,eAAe;QACf,GAAGJ,iBAAAA,CAAWK,OAAO,CAACP,kBAAAA,CAAOQ,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAKX,kBAAAA,CAAOY,mBAAmB;QAC/BC,iBAAiBb,kBAAAA,CAAOc,uBAAuB;QAC/CC,cAAcf,kBAAAA,CAAOgB,iBAAiB;QACtCC,eAAe;QACfC,OAAOlB,kBAAAA,CAAOmB,uBAAuB;IACvC;AACF,EAAE;AAEK,0BAA0B;IAC/B,OAAO;QACL,GAAGlB,4BAAAA,CAAiBoB,cAAc;QAClCC,WAAW;QACXZ,WAAW;QACXQ,OAAOlB,kBAAAA,CAAOuB,uBAAuB;QACrCC,MAAMxB,kBAAAA,CAAOmB,uBAAuB;QACpC,CAACpB,+BAAAA,CAAqB,EAAE;YACtByB,MAAM;QACR;IACF;AACF,EAAE;AAEK,yBAAyB;IAC9B,OAAO;QACL,GAAGvB,4BAAAA,CAAiByB,cAAc;QAClCF,MAAMxB,kBAAAA,CAAOmB,uBAAuB;QACpCQ,mBAAmB;IACrB;AACF,EAAE;AAEK,4BAA4B;IACjC,OAAO;QACL,GAAG1B,4BAAAA,CAAiBG,KAAK;QACzBoB,MAAMxB,kBAAAA,CAAOmB,uBAAuB;QACpCU,YAAY;QACZ,CAAC9B,+BAAAA,CAAqB,EAAE;YACtByB,MAAM;QACR;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/utilities/Common.styles.ts"],"sourcesContent":["import { HighContrastSelector } from '../utilities/utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { type GriffelStyle } from '@griffel/react';\n\nexport const getTooltipStyle = (): GriffelStyle => {\n  return {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    padding: tokens.spacingHorizontalS,\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n    color: tokens.colorNeutralForeground1,\n  };\n};\n\nexport const getAxisTitleStyle = (): GriffelStyle => {\n  return {\n    ...typographyStyles.caption2Strong,\n    fontStyle: 'normal',\n    textAlign: 'center',\n    color: tokens.colorNeutralForeground2,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  };\n};\n\nexport const getBarLabelStyle = (): GriffelStyle => {\n  return {\n    ...typographyStyles.caption1Strong, // Confirm styles\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  };\n};\n\nexport const getMarkerLabelStyle = (): GriffelStyle => {\n  return {\n    ...typographyStyles.body1,\n    fill: tokens.colorNeutralForeground1,\n    textAnchor: 'middle',\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  };\n};\n"],"names":["HighContrastSelector","tokens","typographyStyles","getTooltipStyle","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","getAxisTitleStyle","caption2Strong","fontStyle","colorNeutralForeground2","fill","getBarLabelStyle","caption1Strong","forcedColorAdjust","getMarkerLabelStyle","textAnchor"],"mappings":";;;;;;;;;;;IAoBaoB,iBAAAA;;;oBAaAK;;;IAQAG,mBAAAA;;;mBArCAzB;;;;2BAJwB,yBAAyB;4BACrB,wBAAwB;AAG1D,MAAMA,kBAAkB;IAC7B,OAAO;QACL,GAAGD,4BAAAA,CAAiBE,KAAK;QACzBC,SAAS;QACTC,eAAe;QACfC,SAASN,kBAAAA,CAAOO,kBAAkB;QAClCC,UAAU;QACVC,WAAW;QACXC,KAAKV,kBAAAA,CAAOW,mBAAmB;QAC/BC,iBAAiBZ,kBAAAA,CAAOa,uBAAuB;QAC/CC,cAAcd,kBAAAA,CAAOe,iBAAiB;QACtCC,eAAe;QACfC,OAAOjB,kBAAAA,CAAOkB,uBAAuB;IACvC;AACF,EAAE;AAEK,0BAA0B;IAC/B,OAAO;QACL,GAAGjB,4BAAAA,CAAiBmB,cAAc;QAClCC,WAAW;QACXZ,WAAW;QACXQ,OAAOjB,kBAAAA,CAAOsB,uBAAuB;QACrCC,MAAMvB,kBAAAA,CAAOkB,uBAAuB;QACpC,CAACnB,+BAAAA,CAAqB,EAAE;YACtBwB,MAAM;QACR;IACF;AACF,EAAE;AAEK,MAAMC,mBAAmB;IAC9B,OAAO;QACL,GAAGvB,4BAAAA,CAAiBwB,cAAc;QAClCF,MAAMvB,kBAAAA,CAAOkB,uBAAuB;QACpCQ,mBAAmB;IACrB;AACF,EAAE;AAEK,4BAA4B;IACjC,OAAO;QACL,GAAGzB,4BAAAA,CAAiBE,KAAK;QACzBoB,MAAMvB,kBAAAA,CAAOkB,uBAAuB;QACpCU,YAAY;QACZ,CAAC7B,+BAAAA,CAAqB,EAAE;YACtBwB,MAAM;QACR;IACF;AACF,EAAE"}

package/lib-commonjs/utilities/FocusableTooltipText.js

@@ -19,7 +19,7 @@ const FocusableTooltipText = /*#__PURE__*/ _react.forwardRef((props, forwardedRe
     const [textOverflow, setTextOverflow] = (0, _react.useState)(false);
     const tooltipChild = (0, _react.useRef)(null);
     const async = (0, _react.useRef)(new _asyncutils.Async()).current;
-    const resizeObserver = (0, _react.useRef)();
+    const resizeObserver = (0, _react.useRef)(undefined);
     const getTargetElement = (0, _react.useCallback)(()=>{
         if (!tooltipChild.current || !tooltipChild.current.parentElement) {
             return undefined;

package/lib-commonjs/utilities/FocusableTooltipText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utilities/FocusableTooltipText.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable no-restricted-globals */\nimport * as React from 'react';\nimport { useCallback, useState, useEffect, useRef } from 'react';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { hasOverflow } from './overflow-utils';\nimport { getAccessibleDataObject } from './index';\nimport { AccessibilityProps } from '../types/index';\nimport { Async } from './async-utils';\n\ninterface IFocusableTooltipTextProps {\n  className?: string;\n  content:\n    | string\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    | JSXElement\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    | JSXElement[];\n  accessibilityData?: AccessibilityProps;\n}\n\nexport const FocusableTooltipText: React.FunctionComponent<IFocusableTooltipTextProps> = React.forwardRef<\n  HTMLDivElement,\n  IFocusableTooltipTextProps\n>((props, forwardedRef) => {\n  const [textOverflow, setTextOverflow] = useState(false);\n  const tooltipChild = useRef<HTMLSpanElement>(null);\n  const async = useRef(new Async()).current;\n  const resizeObserver = useRef<ResizeObserver>();\n\n  const getTargetElement = useCallback((): HTMLElement | undefined => {\n    if (!tooltipChild.current || !tooltipChild.current.parentElement) {\n      return undefined;\n    }\n    return tooltipChild.current.parentElement;\n  }, [tooltipChild]);\n\n  const checkTextOverflow = useCallback(() => {\n    const overflowElement = getTargetElement();\n    const isTextOverflow = !!overflowElement && hasOverflow(overflowElement);\n    if (isTextOverflow !== textOverflow) {\n      setTextOverflow(isTextOverflow);\n    }\n  }, [getTargetElement, textOverflow, setTextOverflow]);\n\n  useEffect(() => {\n    checkTextOverflow();\n  }, [checkTextOverflow]);\n\n  useEffect(() => {\n    // setup part executed only when the component mounts/updates\n    const overflowElement = getTargetElement();\n    if (window.ResizeObserver && overflowElement) {\n      resizeObserver.current = new window.ResizeObserver(async.debounce(checkTextOverflow, 500));\n      resizeObserver.current.observe(overflowElement);\n    }\n    // cleanup part executed only when the component unmounts\n    return () => {\n      resizeObserver.current?.disconnect();\n      async.dispose();\n    };\n  }, [async, checkTextOverflow, getTargetElement]);\n\n  return (\n    <div className={props.className}>\n      <Tooltip content={props.content} relationship=\"description\">\n        <span {...getAccessibleDataObject(props.accessibilityData)} ref={tooltipChild} data-is-focusable={textOverflow}>\n          {props.content}\n        </span>\n      </Tooltip>\n    </div>\n  );\n});\n"],"names":["React","useCallback","useState","useEffect","useRef","Tooltip","hasOverflow","getAccessibleDataObject","Async","FocusableTooltipText","forwardRef","props","forwardedRef","textOverflow","setTextOverflow","tooltipChild","async","current","resizeObserver","getTargetElement","parentElement","undefined","checkTextOverflow","overflowElement","isTextOverflow","window","ResizeObserver","debounce","observe","disconnect","dispose","div","className","content","relationship","span","accessibilityData","ref","data-is-focusable"],"mappings":"AAAA;;;;;+BAuBaS;;;;;;;iEApBU,QAAQ;8BAEP,0BAA0B;+BAEtB,mBAAmB;uBACP,UAAU;4BAE5B,gBAAgB;AAa/B,6BAAMA,WAAAA,GAA4ET,OAAMU,UAAU,CAGvG,CAACC,OAAOC;IACR,MAAM,CAACC,cAAcC,gBAAgB,OAAGZ,eAAAA,EAAS;IACjD,MAAMa,mBAAeX,aAAAA,EAAwB;IAC7C,MAAMY,YAAQZ,aAAAA,EAAO,IAAII,iBAAAA,IAASS,OAAO;IACzC,MAAMC,qBAAiBd,aAAAA;IAEvB,MAAMe,uBAAmBlB,kBAAAA,EAAY;QACnC,IAAI,CAACc,aAAaE,OAAO,IAAI,CAACF,aAAaE,OAAO,CAACG,aAAa,EAAE;YAChE,OAAOC;QACT;QACA,OAAON,aAAaE,OAAO,CAACG,aAAa;IAC3C,GAAG;QAACL;KAAa;IAEjB,MAAMO,wBAAoBrB,kBAAAA,EAAY;QACpC,MAAMsB,kBAAkBJ;QACxB,MAAMK,iBAAiB,CAAC,CAACD,uBAAmBjB,0BAAAA,EAAYiB;QACxD,IAAIC,mBAAmBX,cAAc;YACnCC,gBAAgBU;QAClB;IACF,GAAG;QAACL;QAAkBN;QAAcC;KAAgB;QAEpDX,gBAAAA,EAAU;QACRmB;IACF,GAAG;QAACA;KAAkB;QAEtBnB,gBAAAA,EAAU;QACR,6DAA6D;QAC7D,MAAMoB,kBAAkBJ;QACxB,IAAIM,OAAOC,cAAc,IAAIH,iBAAiB;YAC5CL,eAAeD,OAAO,GAAG,IAAIQ,OAAOC,cAAc,CAACV,MAAMW,QAAQ,CAACL,mBAAmB;YACrFJ,eAAeD,OAAO,CAACW,OAAO,CAACL;QACjC;QACA,yDAAyD;QACzD,OAAO;gBACLL;YAAAA,2BAAAA,eAAeD,OAAAA,AAAO,MAAA,QAAtBC,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBW,UAAU;YAClCb,MAAMc,OAAO;QACf;IACF,GAAG;QAACd;QAAOM;QAAmBH;KAAiB;IAE/C,OAAA,WAAA,GACE,OAAA,aAAA,CAACY,OAAAA;QAAIC,WAAWrB,MAAMqB,SAAS;qBAC7B,OAAA,aAAA,CAAC3B,qBAAAA,EAAAA;QAAQ4B,SAAStB,MAAMsB,OAAO;QAAEC,cAAa;qBAC5C,OAAA,aAAA,CAACC,QAAAA;QAAM,OAAG5B,8BAAAA,EAAwBI,MAAMyB,iBAAiB,CAAC;QAAEC,KAAKtB;QAAcuB,qBAAmBzB;OAC/FF,MAAMsB,OAAO;AAKxB,GAAG"}
+{"version":3,"sources":["../src/utilities/FocusableTooltipText.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable no-restricted-globals */\nimport * as React from 'react';\nimport { useCallback, useState, useEffect, useRef } from 'react';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { hasOverflow } from './overflow-utils';\nimport { getAccessibleDataObject } from './index';\nimport { AccessibilityProps } from '../types/index';\nimport { Async } from './async-utils';\n\ninterface IFocusableTooltipTextProps {\n  className?: string;\n  content:\n    | string\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    | JSXElement\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    | JSXElement[];\n  accessibilityData?: AccessibilityProps;\n}\n\nexport const FocusableTooltipText: React.FunctionComponent<IFocusableTooltipTextProps> = React.forwardRef<\n  HTMLDivElement,\n  IFocusableTooltipTextProps\n>((props, forwardedRef) => {\n  const [textOverflow, setTextOverflow] = useState(false);\n  const tooltipChild = useRef<HTMLSpanElement>(null);\n  const async = useRef(new Async()).current;\n  const resizeObserver = useRef<ResizeObserver | undefined>(undefined);\n\n  const getTargetElement = useCallback((): HTMLElement | undefined => {\n    if (!tooltipChild.current || !tooltipChild.current.parentElement) {\n      return undefined;\n    }\n    return tooltipChild.current.parentElement;\n  }, [tooltipChild]);\n\n  const checkTextOverflow = useCallback(() => {\n    const overflowElement = getTargetElement();\n    const isTextOverflow = !!overflowElement && hasOverflow(overflowElement);\n    if (isTextOverflow !== textOverflow) {\n      setTextOverflow(isTextOverflow);\n    }\n  }, [getTargetElement, textOverflow, setTextOverflow]);\n\n  useEffect(() => {\n    checkTextOverflow();\n  }, [checkTextOverflow]);\n\n  useEffect(() => {\n    // setup part executed only when the component mounts/updates\n    const overflowElement = getTargetElement();\n    if (window.ResizeObserver && overflowElement) {\n      resizeObserver.current = new window.ResizeObserver(async.debounce(checkTextOverflow, 500));\n      resizeObserver.current.observe(overflowElement);\n    }\n    // cleanup part executed only when the component unmounts\n    return () => {\n      resizeObserver.current?.disconnect();\n      async.dispose();\n    };\n  }, [async, checkTextOverflow, getTargetElement]);\n\n  return (\n    <div className={props.className}>\n      <Tooltip content={props.content} relationship=\"description\">\n        <span {...getAccessibleDataObject(props.accessibilityData)} ref={tooltipChild} data-is-focusable={textOverflow}>\n          {props.content}\n        </span>\n      </Tooltip>\n    </div>\n  );\n});\n"],"names":["React","useCallback","useState","useEffect","useRef","Tooltip","hasOverflow","getAccessibleDataObject","Async","FocusableTooltipText","forwardRef","props","forwardedRef","textOverflow","setTextOverflow","tooltipChild","async","current","resizeObserver","undefined","getTargetElement","parentElement","checkTextOverflow","overflowElement","isTextOverflow","window","ResizeObserver","debounce","observe","disconnect","dispose","div","className","content","relationship","span","accessibilityData","ref","data-is-focusable"],"mappings":"AAAA;;;;;+BAuBaS;;;;;;;iEApBU,QAAQ;8BAEP,0BAA0B;+BAEtB,mBAAmB;uBACP,UAAU;4BAE5B,gBAAgB;AAa/B,6BAAMA,WAAAA,GAA4ET,OAAMU,UAAU,CAGvG,CAACC,OAAOC;IACR,MAAM,CAACC,cAAcC,gBAAgB,OAAGZ,eAAAA,EAAS;IACjD,MAAMa,mBAAeX,aAAAA,EAAwB;IAC7C,MAAMY,YAAQZ,aAAAA,EAAO,IAAII,iBAAAA,IAASS,OAAO;IACzC,MAAMC,qBAAiBd,aAAAA,EAAmCe;IAE1D,MAAMC,uBAAmBnB,kBAAAA,EAAY;QACnC,IAAI,CAACc,aAAaE,OAAO,IAAI,CAACF,aAAaE,OAAO,CAACI,aAAa,EAAE;YAChE,OAAOF;QACT;QACA,OAAOJ,aAAaE,OAAO,CAACI,aAAa;IAC3C,GAAG;QAACN;KAAa;IAEjB,MAAMO,wBAAoBrB,kBAAAA,EAAY;QACpC,MAAMsB,kBAAkBH;QACxB,MAAMI,iBAAiB,CAAC,CAACD,uBAAmBjB,0BAAAA,EAAYiB;QACxD,IAAIC,mBAAmBX,cAAc;YACnCC,gBAAgBU;QAClB;IACF,GAAG;QAACJ;QAAkBP;QAAcC;KAAgB;QAEpDX,gBAAAA,EAAU;QACRmB;IACF,GAAG;QAACA;KAAkB;QAEtBnB,gBAAAA,EAAU;QACR,6DAA6D;QAC7D,MAAMoB,kBAAkBH;QACxB,IAAIK,OAAOC,cAAc,IAAIH,iBAAiB;YAC5CL,eAAeD,OAAO,GAAG,IAAIQ,OAAOC,cAAc,CAACV,MAAMW,QAAQ,CAACL,mBAAmB;YACrFJ,eAAeD,OAAO,CAACW,OAAO,CAACL;QACjC;QACA,yDAAyD;QACzD,OAAO;gBACLL;aAAAA,0BAAAA,eAAeD,OAAAA,AAAO,MAAA,QAAtBC,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBW,UAAU;YAClCb,MAAMc,OAAO;QACf;IACF,GAAG;QAACd;QAAOM;QAAmBF;KAAiB;IAE/C,OAAA,WAAA,GACE,OAAA,aAAA,CAACW,OAAAA;QAAIC,WAAWrB,MAAMqB,SAAS;qBAC7B,OAAA,aAAA,CAAC3B,qBAAAA,EAAAA;QAAQ4B,SAAStB,MAAMsB,OAAO;QAAEC,cAAa;qBAC5C,OAAA,aAAA,CAACC,QAAAA;QAAM,OAAG5B,8BAAAA,EAAwBI,MAAMyB,iBAAiB,CAAC;QAAEC,KAAKtB;QAAcuB,qBAAmBzB;OAC/FF,MAAMsB,OAAO;AAKxB,GAAG"}

package/lib-commonjs/utilities/SVGTooltipText.js

@@ -16,16 +16,21 @@ const _reacttooltip = require("@fluentui/react-tooltip");
 const _asyncutils = require("./async-utils");
 const _KeyCodes = require("./KeyCodes");
 const _reactutilities = require("@fluentui/react-utilities");
-const SVGTooltipText = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+const SVGTooltipText = /*#__PURE__*/ _react.forwardRef(({ delay = 0, showBackground = false, ...restProps }, forwardedRef)=>{
     var _props_textProps, _props_textProps1, _props_textProps2;
+    const props = {
+        delay,
+        showBackground,
+        ...restProps
+    };
     const [isTooltipVisible, setIsTooltipVisible] = (0, _react.useState)(false);
     const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
     const [textWidth, setTextWidth] = (0, _react.useState)(0);
     const [textHeight, setTextHeight] = (0, _react.useState)(0);
     const tooltipHostRef = (0, _react.useRef)(null);
     const async = (0, _react.useRef)(new _asyncutils.Async()).current;
-    const dismissTimerId = (0, _react.useRef)();
-    const openTimerId = (0, _react.useRef)();
+    const dismissTimerId = (0, _react.useRef)(undefined);
+    const openTimerId = (0, _react.useRef)(undefined);
     const tooltipHostId = (0, _react.useRef)((0, _reactutilities.useId)('tooltip-host')).current;
     const ignoreNextFocusEvent = (0, _react.useRef)(false);
     const portalMountNode = (0, _reactsharedcontexts.usePortalMountNode)();
@@ -182,8 +187,3 @@ const SVGTooltipText = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         "data-is-focusable": props.shouldReceiveFocus && isOverflowing
     }, props.content)));
 });
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-SVGTooltipText.defaultProps = {
-    delay: 0,
-    showBackground: false
-};

package/lib-commonjs/utilities/SVGTooltipText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utilities/SVGTooltipText.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\n\nexport interface SVGTooltipTextProps {\n  closeDelay?: number;\n  content: string;\n  delay?: number;\n  tooltipProps?: React.ComponentProps<typeof Tooltip>;\n  textProps?: React.SVGAttributes<SVGTextElement>;\n  maxWidth?: number;\n  maxHeight?: number;\n  shouldReceiveFocus?: boolean;\n  isTooltipVisibleProp?: boolean;\n  wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n  showBackground?: boolean;\n  className?: string;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n  HTMLDivElement,\n  SVGTooltipTextProps\n>((props, forwardedRef) => {\n  const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const [textWidth, setTextWidth] = useState(0);\n  const [textHeight, setTextHeight] = useState(0);\n\n  const tooltipHostRef = useRef<SVGTextElement>(null);\n  const async = useRef(new Async()).current;\n  const dismissTimerId = useRef<number>();\n  const openTimerId = useRef<number>();\n  const tooltipHostId = useRef(useId('tooltip-host')).current;\n  const ignoreNextFocusEvent = useRef(false);\n  const portalMountNode = usePortalMountNode();\n  const PADDING = 3;\n\n  const wrapContentCallback = useCallback(() => {\n    if (\n      props.content &&\n      props.wrapContent &&\n      props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n      // ToDo - Specify a correct fallback value here\n    ) {\n      setIsOverflowing(true);\n    } else {\n      setIsOverflowing(false);\n    }\n  }, [props, tooltipHostId]);\n\n  const measureText = useCallback((): void => {\n    if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n      const bbox = tooltipHostRef.current.getBBox();\n      setTextWidth(bbox.width);\n      setTextHeight(bbox.height);\n    }\n  }, []);\n\n  useEffect(() => {\n    wrapContentCallback();\n    return () => {\n      async.dispose();\n    };\n  }, [wrapContentCallback, async]);\n\n  useEffect(() => {\n    wrapContentCallback();\n  }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n  useEffect(() => {\n    if (isTooltipVisible) {\n      measureText();\n    }\n  }, [isTooltipVisible, measureText]);\n\n  useEffect(() => {\n    // Recalculate text dimensions when content or dimensions change\n    measureText();\n  }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n  const hideTooltip = useCallback(() => {\n    async.clearTimeout(openTimerId.current!);\n    async.clearTimeout(dismissTimerId.current!);\n    setIsTooltipVisible(false);\n  }, [async]);\n\n  const onTooltipMouseEnter = useCallback(\n    (ev: React.MouseEvent<SVGElement>) => {\n      if (!isOverflowing) {\n        return;\n      }\n\n      if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n        return;\n      }\n\n      async.clearTimeout(dismissTimerId.current!);\n      async.clearTimeout(openTimerId.current!);\n\n      if (props.delay !== 0) {\n        openTimerId.current = async.setTimeout(() => {\n          setIsTooltipVisible(true);\n        }, props.delay!);\n      } else {\n        setIsTooltipVisible(true);\n      }\n    },\n    [isOverflowing, portalMountNode, async, props.delay],\n  );\n\n  const onTooltipMouseLeave = useCallback(\n    (ev: React.MouseEvent<SVGElement>) => {\n      async.clearTimeout(dismissTimerId.current!);\n      async.clearTimeout(openTimerId.current!);\n\n      if (props.closeDelay) {\n        dismissTimerId.current = async.setTimeout(() => {\n          setIsTooltipVisible(false);\n        }, props.closeDelay);\n      } else {\n        setIsTooltipVisible(false);\n      }\n    },\n    [async, props.closeDelay],\n  );\n\n  const onTooltipFocus = useCallback(\n    (ev: React.FocusEvent<SVGElement>) => {\n      if (ignoreNextFocusEvent.current) {\n        ignoreNextFocusEvent.current = false;\n        return;\n      }\n      onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n    },\n    [onTooltipMouseEnter],\n  );\n\n  const onTooltipBlur = useCallback(\n    (ev: React.FocusEvent<SVGElement>) => {\n      ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n      dismissTimerId.current = async.setTimeout(() => {\n        setIsTooltipVisible(false);\n      }, 0);\n    },\n    [async],\n  );\n\n  const onTooltipKeyDown = useCallback(\n    (ev: React.KeyboardEvent<SVGElement>) => {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n        hideTooltip();\n        ev.stopPropagation();\n      }\n    },\n    [isTooltipVisible, hideTooltip],\n  );\n\n  const showTooltip =\n    (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n  const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n  const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - 2 * PADDING;\n\n  return (\n    <>\n      {props.showBackground && (\n        <rect\n          x={rectX}\n          y={rectY}\n          width={(textWidth ?? 0) + 2 * PADDING}\n          height={(textHeight ?? 0) + PADDING}\n          transform={props.textProps?.transform}\n          className={props.className}\n        />\n      )}\n      <Tooltip\n        relationship=\"description\"\n        {...props.tooltipProps}\n        withArrow\n        content={props.content}\n        // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n        visible={showTooltip}\n      >\n        <text\n          {...props.textProps}\n          id={tooltipHostId}\n          ref={tooltipHostRef}\n          onFocusCapture={onTooltipFocus}\n          onBlurCapture={onTooltipBlur}\n          onMouseEnter={onTooltipMouseEnter}\n          onMouseLeave={onTooltipMouseLeave}\n          onKeyDown={onTooltipKeyDown}\n          data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n        >\n          {props.content}\n        </text>\n      </Tooltip>\n    </>\n  );\n});\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nSVGTooltipText.defaultProps = {\n  delay: 0,\n  showBackground: false,\n};\n"],"names":["React","useState","useRef","useEffect","useCallback","usePortalMountNode","Tooltip","Async","KeyCodes","useId","SVGTooltipText","forwardRef","props","forwardedRef","isTooltipVisible","setIsTooltipVisible","isOverflowing","setIsOverflowing","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","async","current","dismissTimerId","openTimerId","tooltipHostId","ignoreNextFocusEvent","portalMountNode","PADDING","wrapContentCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","width","height","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","delay","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","rectX","x","rectY","y","showBackground","rect","transform","className","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["../src/utilities/SVGTooltipText.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\n\nexport interface SVGTooltipTextProps {\n  closeDelay?: number;\n  content: string;\n  delay?: number;\n  tooltipProps?: React.ComponentProps<typeof Tooltip>;\n  textProps?: React.SVGAttributes<SVGTextElement>;\n  maxWidth?: number;\n  maxHeight?: number;\n  shouldReceiveFocus?: boolean;\n  isTooltipVisibleProp?: boolean;\n  wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n  showBackground?: boolean;\n  className?: string;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n  HTMLDivElement,\n  SVGTooltipTextProps\n>(({ delay = 0, showBackground = false, ...restProps }, forwardedRef) => {\n  const props = { delay, showBackground, ...restProps };\n  const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const [textWidth, setTextWidth] = useState(0);\n  const [textHeight, setTextHeight] = useState(0);\n\n  const tooltipHostRef = useRef<SVGTextElement>(null);\n  const async = useRef(new Async()).current;\n  const dismissTimerId = useRef<number | undefined>(undefined);\n  const openTimerId = useRef<number | undefined>(undefined);\n  const tooltipHostId = useRef(useId('tooltip-host')).current;\n  const ignoreNextFocusEvent = useRef<boolean>(false);\n  const portalMountNode = usePortalMountNode();\n  const PADDING = 3;\n\n  const wrapContentCallback = useCallback(() => {\n    if (\n      props.content &&\n      props.wrapContent &&\n      props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n      // ToDo - Specify a correct fallback value here\n    ) {\n      setIsOverflowing(true);\n    } else {\n      setIsOverflowing(false);\n    }\n  }, [props, tooltipHostId]);\n\n  const measureText = useCallback((): void => {\n    if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n      const bbox = tooltipHostRef.current.getBBox();\n      setTextWidth(bbox.width);\n      setTextHeight(bbox.height);\n    }\n  }, []);\n\n  useEffect(() => {\n    wrapContentCallback();\n    return () => {\n      async.dispose();\n    };\n  }, [wrapContentCallback, async]);\n\n  useEffect(() => {\n    wrapContentCallback();\n  }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n  useEffect(() => {\n    if (isTooltipVisible) {\n      measureText();\n    }\n  }, [isTooltipVisible, measureText]);\n\n  useEffect(() => {\n    // Recalculate text dimensions when content or dimensions change\n    measureText();\n  }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n  const hideTooltip = useCallback(() => {\n    async.clearTimeout(openTimerId.current!);\n    async.clearTimeout(dismissTimerId.current!);\n    setIsTooltipVisible(false);\n  }, [async]);\n\n  const onTooltipMouseEnter = useCallback(\n    (ev: React.MouseEvent<SVGElement>) => {\n      if (!isOverflowing) {\n        return;\n      }\n\n      if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n        return;\n      }\n\n      async.clearTimeout(dismissTimerId.current!);\n      async.clearTimeout(openTimerId.current!);\n\n      if (props.delay !== 0) {\n        openTimerId.current = async.setTimeout(() => {\n          setIsTooltipVisible(true);\n        }, props.delay!);\n      } else {\n        setIsTooltipVisible(true);\n      }\n    },\n    [isOverflowing, portalMountNode, async, props.delay],\n  );\n\n  const onTooltipMouseLeave = useCallback(\n    (ev: React.MouseEvent<SVGElement>) => {\n      async.clearTimeout(dismissTimerId.current!);\n      async.clearTimeout(openTimerId.current!);\n\n      if (props.closeDelay) {\n        dismissTimerId.current = async.setTimeout(() => {\n          setIsTooltipVisible(false);\n        }, props.closeDelay);\n      } else {\n        setIsTooltipVisible(false);\n      }\n    },\n    [async, props.closeDelay],\n  );\n\n  const onTooltipFocus = useCallback(\n    (ev: React.FocusEvent<SVGElement>) => {\n      if (ignoreNextFocusEvent.current) {\n        ignoreNextFocusEvent.current = false;\n        return;\n      }\n      onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n    },\n    [onTooltipMouseEnter],\n  );\n\n  const onTooltipBlur = useCallback(\n    (ev: React.FocusEvent<SVGElement>) => {\n      ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n      dismissTimerId.current = async.setTimeout(() => {\n        setIsTooltipVisible(false);\n      }, 0);\n    },\n    [async],\n  );\n\n  const onTooltipKeyDown = useCallback(\n    (ev: React.KeyboardEvent<SVGElement>) => {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n        hideTooltip();\n        ev.stopPropagation();\n      }\n    },\n    [isTooltipVisible, hideTooltip],\n  );\n\n  const showTooltip =\n    (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n  const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n  const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - 2 * PADDING;\n\n  return (\n    <>\n      {props.showBackground && (\n        <rect\n          x={rectX}\n          y={rectY}\n          width={(textWidth ?? 0) + 2 * PADDING}\n          height={(textHeight ?? 0) + PADDING}\n          transform={props.textProps?.transform}\n          className={props.className}\n        />\n      )}\n      <Tooltip\n        relationship=\"description\"\n        {...props.tooltipProps}\n        withArrow\n        content={props.content}\n        // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n        visible={showTooltip}\n      >\n        <text\n          {...props.textProps}\n          id={tooltipHostId}\n          ref={tooltipHostRef}\n          onFocusCapture={onTooltipFocus}\n          onBlurCapture={onTooltipBlur}\n          onMouseEnter={onTooltipMouseEnter}\n          onMouseLeave={onTooltipMouseLeave}\n          onKeyDown={onTooltipKeyDown}\n          data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n        >\n          {props.content}\n        </text>\n      </Tooltip>\n    </>\n  );\n});\n"],"names":["React","useState","useRef","useEffect","useCallback","usePortalMountNode","Tooltip","Async","KeyCodes","useId","SVGTooltipText","forwardRef","delay","showBackground","restProps","forwardedRef","props","isTooltipVisible","setIsTooltipVisible","isOverflowing","setIsOverflowing","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","async","current","dismissTimerId","undefined","openTimerId","tooltipHostId","ignoreNextFocusEvent","portalMountNode","PADDING","wrapContentCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","width","height","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","rectX","x","rectY","y","rect","transform","className","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus"],"mappings":"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"}

package/lib-commonjs/utilities/image-export-utils.js

@@ -18,6 +18,7 @@ _export(exports, {
     }
 });
 const _d3selection = require("d3-selection");
+const _reactutilities = require("@fluentui/react-utilities");
 const _index = require("./index");
 const _useLegendsStylesstyles = require("../components/Legends/useLegendsStyles.styles");
 function toImage(chartContainer, legendsToSvgCallback, isRTL = false, opts = {}) {
@@ -71,6 +72,55 @@ const SVG_TEXT_STYLE_PROPERTIES = [
     'text-align',
     'border'
 ];
+const ANNOTATION_HTML_STYLE_PROPERTIES = [
+    'align-items',
+    'background',
+    'background-color',
+    'border',
+    'border-radius',
+    'box-shadow',
+    'box-sizing',
+    'color',
+    'column-gap',
+    'display',
+    'flex',
+    'flex-direction',
+    'font-family',
+    'font-size',
+    'font-style',
+    'font-weight',
+    'gap',
+    'height',
+    'justify-content',
+    'letter-spacing',
+    'line-height',
+    'margin',
+    'max-height',
+    'max-width',
+    'min-height',
+    'min-width',
+    'opacity',
+    'overflow',
+    'padding',
+    'pointer-events',
+    'position',
+    'row-gap',
+    'text-align',
+    'text-decoration',
+    'text-transform',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'visibility',
+    'white-space',
+    'width',
+    'z-index'
+];
+const ANNOTATION_FOREIGN_OBJECT_STYLE_PROPERTIES = [
+    'overflow',
+    'pointer-events'
+];
 function toSVG(chartContainer, legendsToSvgCallback, isRTL, background) {
     const svg = chartContainer.querySelector('svg');
     if (!svg) {
@@ -105,6 +155,27 @@ function toSVG(chartContainer, legendsToSvgCallback, isRTL, background) {
     svgElements = null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     clonedSvgElements = null;
+    const originalForeignObjects = svg.querySelectorAll('foreignObject');
+    const clonedForeignObjects = clonedSvg.node().querySelectorAll('foreignObject');
+    originalForeignObjects.forEach((originalFo, index)=>{
+        const clonedFo = clonedForeignObjects[index];
+        if (!clonedFo) {
+            return;
+        }
+        const originalRoot = originalFo.firstElementChild;
+        const clonedRoot = clonedFo.firstElementChild;
+        if (originalRoot && clonedRoot) {
+            (0, _index.copyStyle)(ANNOTATION_HTML_STYLE_PROPERTIES, originalRoot, clonedRoot);
+        }
+        const originalHtmlElements = originalFo.querySelectorAll('*');
+        const clonedHtmlElements = clonedFo.querySelectorAll('*');
+        originalHtmlElements.forEach((originalEl, elementIndex)=>{
+            const clonedEl = clonedHtmlElements[elementIndex];
+            if (clonedEl) {
+                (0, _index.copyStyle)(ANNOTATION_HTML_STYLE_PROPERTIES, originalEl, clonedEl);
+            }
+        });
+    });
     const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();
     const legendGroup = typeof legendsToSvgCallback === 'function' ? legendsToSvgCallback(svgWidth, isRTL) : {
         node: null,
@@ -113,12 +184,49 @@ function toSVG(chartContainer, legendsToSvgCallback, isRTL, background) {
     };
     const w1 = Math.max(svgWidth, legendGroup.width);
     const h1 = svgHeight + legendGroup.height;
+    const annotationSvg = chartContainer.querySelector('[data-chart-annotation-svg="true"]');
+    let annotationClone = null;
+    if (annotationSvg) {
+        annotationClone = annotationSvg.cloneNode(true);
+        (0, _index.copyStyle)(SVG_STYLE_PROPERTIES, annotationSvg, annotationClone);
+        const annotationElements = annotationSvg.getElementsByTagName('*');
+        const clonedAnnotationElements = annotationClone.getElementsByTagName('*');
+        for(let i = 0; i < annotationElements.length; i++){
+            const original = annotationElements[i];
+            const cloned = clonedAnnotationElements[i];
+            const tag = original.tagName.toLowerCase();
+            const isSvgElement = original instanceof SVGElement;
+            const isTextElement = tag === 'text';
+            const isHtmlElement = (0, _reactutilities.isHTMLElement)(original);
+            if (isSvgElement) {
+                if (isTextElement) {
+                    (0, _index.copyStyle)([
+                        ...SVG_STYLE_PROPERTIES,
+                        ...SVG_TEXT_STYLE_PROPERTIES
+                    ], original, cloned);
+                } else {
+                    (0, _index.copyStyle)(SVG_STYLE_PROPERTIES, original, cloned);
+                }
+            }
+            if (isHtmlElement) {
+                (0, _index.copyStyle)(ANNOTATION_HTML_STYLE_PROPERTIES, original, cloned);
+            }
+            if (tag === 'foreignobject') {
+                (0, _index.copyStyle)(ANNOTATION_FOREIGN_OBJECT_STYLE_PROPERTIES, original, cloned);
+            }
+        }
+    }
     if (legendGroup.node) {
         (0, _d3selection.select)(legendGroup.node).attr('transform', `translate(0, ${svgHeight})`);
         clonedSvg.append(()=>legendGroup.node);
     }
     clonedSvg.insert('rect', ':first-child').attr('x', 0).attr('y', 0).attr('width', w1).attr('height', h1).attr('fill', background);
     clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`).attr('direction', isRTL ? 'rtl' : 'ltr');
+    if (annotationClone) {
+        clonedSvg.selectAll('[data-chart-annotation-layer="true"]').remove();
+        (0, _d3selection.select)(annotationClone).attr('x', 0).attr('y', 0).attr('width', svgWidth).attr('height', svgHeight);
+        clonedSvg.append(()=>annotationClone);
+    }
     const result = {
         node: clonedSvg.node(),
         width: w1,