@fluentui/react-charts 9.3.7 → 9.3.9

package/lib-commonjs/components/ChartTable/ChartTable.js

@@ -16,7 +16,9 @@ const _reacttheme = require("@fluentui/react-theme");
 const _d3color = /*#__PURE__*/ _interop_require_wildcard._(require("d3-color"));
 const _colors = require("../../utilities/colors");
 const _utilities = require("../../utilities/utilities");
+const _index = require("../../utilities/index");
 const _hooks = require("../../utilities/hooks");
+const _reacttabster = require("@fluentui/react-tabster");
 function invertHexColor(hex) {
     const color = _d3color.color(hex);
     if (!color) {
@@ -47,9 +49,12 @@ function getSafeBackgroundColor(chartContainer, foreground, background) {
     return invertedContrast >= 3 ? invertedBg : fallbackBg;
 }
 const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
-    const { headers, rows, width, height } = props;
+    const { headers, rows, width, height, chartTitle } = props;
     const { chartContainerRef: _rootElem } = (0, _hooks.useImageExport)(props.componentRef, true, false);
     const classes = (0, _useChartTableStylesstyles.useChartTableStyles)(props);
+    const arrowAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        axis: 'grid'
+    });
     if (!headers || headers.length === 0) {
         return /*#__PURE__*/ _react.createElement("div", null, "No data available");
     }
@@ -85,23 +90,36 @@ const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             }
         }
     }
+    const titleHeight = chartTitle ? 30 : 0;
+    const totalHeight = typeof height === 'number' ? height : 650;
+    const tableHeight = `${totalHeight - titleHeight}px`;
+    const svgWidth = typeof width === 'number' ? width : '100%';
+    const titleMaxWidth = typeof width === 'number' ? width - 20 : undefined;
+    const titleX = typeof width === 'number' ? width / 2 : 0;
     return /*#__PURE__*/ _react.createElement("div", {
         ref: (el)=>{
             _rootElem.current = el;
         },
         className: classes.root,
         style: {
-            height: height ? `${height}px` : '650px',
+            height: `${totalHeight}px`,
             overflow: 'hidden'
         }
     }, /*#__PURE__*/ _react.createElement("svg", {
-        width: width !== null && width !== void 0 ? width : '100%',
-        height: height !== null && height !== void 0 ? height : '650px'
-    }, /*#__PURE__*/ _react.createElement("foreignObject", {
+        width: svgWidth,
+        height: `${totalHeight}px`
+    }, chartTitle && /*#__PURE__*/ _react.createElement(_index.ChartTitle, {
+        title: chartTitle,
+        x: titleX,
+        maxWidth: titleMaxWidth,
+        className: classes.chartTitle,
+        titleStyles: props.titleStyles,
+        tooltipClassName: classes.svgTooltip
+    }), /*#__PURE__*/ _react.createElement("foreignObject", {
         x: "0",
-        y: "0",
+        y: titleHeight,
         width: "100%",
-        height: "100%"
+        height: tableHeight
     }, /*#__PURE__*/ _react.createElement("div", {
         style: {
             maxHeight: height ? `${height}px` : '650px',
@@ -112,7 +130,8 @@ const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         className: classes.table,
         style: {
             width: width ? `${width}px` : '100%'
-        }
+        },
+        ...arrowAttributes
     }, /*#__PURE__*/ _react.createElement("thead", null, /*#__PURE__*/ _react.createElement("tr", null, headers.map((header, idx)=>{
         const style = {
             ...header === null || header === void 0 ? void 0 : header.style

package/lib-commonjs/components/ChartTable/ChartTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\nimport { useImageExport } from '../../utilities/hooks';\n\nfunction invertHexColor(hex: string): string {\n  const color = d3.color(hex);\n  if (!color) {\n    return tokens.colorNeutralForeground1!;\n  }\n  const rgb = color.rgb();\n  return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string {\n  const fallbackFg = tokens.colorNeutralForeground1;\n  const fallbackBg = tokens.colorNeutralBackground1;\n  if (!chartContainer) {\n    return fallbackBg;\n  }\n\n  const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);\n  const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);\n\n  const fg = d3.color(resolvedFg);\n  const bg = d3.color(resolvedBg);\n\n  if (!fg || !bg) {\n    return resolvedBg;\n  }\n  const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n  if (contrast >= 3) {\n    return bg.formatHex();\n  }\n\n  const invertedBg = invertHexColor(bg.formatHex());\n  const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n  return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n  (props, forwardedRef) => {\n    const { headers, rows, width, height } = props;\n    const { chartContainerRef: _rootElem } = useImageExport(props.componentRef, true, false);\n    const classes = useChartTableStyles(props);\n\n    if (!headers || headers.length === 0) {\n      return <div>No data available</div>;\n    }\n\n    const bgColorSet = new Set<string>();\n    headers.forEach(header => {\n      const bg = header?.style?.backgroundColor;\n      const normalized = d3.color(bg || '')?.formatHex();\n      if (normalized) {\n        bgColorSet.add(normalized);\n      }\n    });\n    let sharedBackgroundColor: string | undefined;\n    let useSharedBackground = false;\n\n    /*\n    If we have only one or two unique background colors, we can consider using a shared background color\n    for the table headers. This is to ensure better contrast with the foreground text.\n    For size 1, we will consider that as default color if it satisfies the contrast ratio.\n    There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n    which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n    color won't run here. So will consider for size 2 as well.\n    For size greater than this, we will consider that user wants different colors and will let color contrast fail\n    if any.\n    */\n    if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n      const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n      for (const header of headers) {\n        const fg = header?.style?.color;\n        if (fg && getColorContrast(fg, candidateBg) >= 3) {\n          sharedBackgroundColor = candidateBg;\n          useSharedBackground = true;\n          break;\n        }\n      }\n    }\n\n    return (\n      <div\n        ref={el => {\n          _rootElem.current = el;\n        }}\n        className={classes.root as string}\n        style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n      >\n        <svg width={width ?? '100%'} height={height ?? '650px'}>\n          <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <div\n              style={{\n                maxHeight: height ? `${height}px` : '650px',\n                overflowY: 'auto',\n                overflowX: 'auto',\n              }}\n            >\n              <table\n                className={classes.table}\n                style={{\n                  width: width ? `${width}px` : '100%',\n                }}\n              >\n                <thead>\n                  <tr>\n                    {headers.map((header, idx) => {\n                      const style = { ...header?.style };\n                      const fg = style.color;\n                      const bg = style.backgroundColor;\n\n                      if (useSharedBackground) {\n                        style.backgroundColor = sharedBackgroundColor;\n                      } else if (fg || bg) {\n                        style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n                      }\n                      return (\n                        <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n                          {header.value}\n                        </th>\n                      );\n                    })}\n                  </tr>\n                </thead>\n                {rows && rows.length > 0 && (\n                  <tbody>\n                    {rows.map((row, rowIdx) => (\n                      <tr key={rowIdx}>\n                        {row.map((cell, colIdx) => {\n                          const style = { ...cell?.style };\n                          const fg = style.color;\n                          const bg = style.backgroundColor;\n                          if (fg || bg) {\n                            style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n                          }\n                          return (\n                            <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n                              {cell.value}\n                            </td>\n                          );\n                        })}\n                      </tr>\n                    ))}\n                  </tbody>\n                )}\n              </table>\n            </div>\n          </foreignObject>\n        </svg>\n      </div>\n    );\n  },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","tokens","d3","getColorContrast","resolveCSSVariables","useImageExport","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","chartContainer","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","resolvedFg","resolvedBg","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","chartContainerRef","_rootElem","componentRef","classes","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","ref","el","current","className","root","overflow","svg","foreignObject","x","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\nimport { ChartTitle } from '../../utilities/index';\nimport { useImageExport } from '../../utilities/hooks';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\nfunction invertHexColor(hex: string): string {\n  const color = d3.color(hex);\n  if (!color) {\n    return tokens.colorNeutralForeground1!;\n  }\n  const rgb = color.rgb();\n  return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string {\n  const fallbackFg = tokens.colorNeutralForeground1;\n  const fallbackBg = tokens.colorNeutralBackground1;\n  if (!chartContainer) {\n    return fallbackBg;\n  }\n\n  const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);\n  const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);\n\n  const fg = d3.color(resolvedFg);\n  const bg = d3.color(resolvedBg);\n\n  if (!fg || !bg) {\n    return resolvedBg;\n  }\n  const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n  if (contrast >= 3) {\n    return bg.formatHex();\n  }\n\n  const invertedBg = invertHexColor(bg.formatHex());\n  const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n  return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n  (props, forwardedRef) => {\n    const { headers, rows, width, height, chartTitle } = props;\n    const { chartContainerRef: _rootElem } = useImageExport(props.componentRef, true, false);\n    const classes = useChartTableStyles(props);\n    const arrowAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n    if (!headers || headers.length === 0) {\n      return <div>No data available</div>;\n    }\n\n    const bgColorSet = new Set<string>();\n    headers.forEach(header => {\n      const bg = header?.style?.backgroundColor;\n      const normalized = d3.color(bg || '')?.formatHex();\n      if (normalized) {\n        bgColorSet.add(normalized);\n      }\n    });\n    let sharedBackgroundColor: string | undefined;\n    let useSharedBackground = false;\n\n    /*\n    If we have only one or two unique background colors, we can consider using a shared background color\n    for the table headers. This is to ensure better contrast with the foreground text.\n    For size 1, we will consider that as default color if it satisfies the contrast ratio.\n    There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n    which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n    color won't run here. So will consider for size 2 as well.\n    For size greater than this, we will consider that user wants different colors and will let color contrast fail\n    if any.\n    */\n    if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n      const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n      for (const header of headers) {\n        const fg = header?.style?.color;\n        if (fg && getColorContrast(fg, candidateBg) >= 3) {\n          sharedBackgroundColor = candidateBg;\n          useSharedBackground = true;\n          break;\n        }\n      }\n    }\n\n    const titleHeight = chartTitle ? 30 : 0;\n    const totalHeight = typeof height === 'number' ? height : 650;\n    const tableHeight = `${totalHeight - titleHeight}px`;\n    const svgWidth = typeof width === 'number' ? width : '100%';\n    const titleMaxWidth = typeof width === 'number' ? width - 20 : undefined;\n    const titleX = typeof width === 'number' ? width / 2 : 0;\n\n    return (\n      <div\n        ref={el => {\n          _rootElem.current = el;\n        }}\n        className={classes.root as string}\n        style={{ height: `${totalHeight}px`, overflow: 'hidden' }}\n      >\n        <svg width={svgWidth} height={`${totalHeight}px`}>\n          {chartTitle && (\n            <ChartTitle\n              title={chartTitle}\n              x={titleX}\n              maxWidth={titleMaxWidth}\n              className={classes.chartTitle}\n              titleStyles={props.titleStyles}\n              tooltipClassName={classes.svgTooltip}\n            />\n          )}\n          <foreignObject x=\"0\" y={titleHeight} width=\"100%\" height={tableHeight}>\n            <div\n              style={{\n                maxHeight: height ? `${height}px` : '650px',\n                overflowY: 'auto',\n                overflowX: 'auto',\n              }}\n            >\n              <table\n                className={classes.table}\n                style={{\n                  width: width ? `${width}px` : '100%',\n                }}\n                {...arrowAttributes}\n              >\n                <thead>\n                  <tr>\n                    {headers.map((header, idx) => {\n                      const style = { ...header?.style };\n                      const fg = style.color;\n                      const bg = style.backgroundColor;\n\n                      if (useSharedBackground) {\n                        style.backgroundColor = sharedBackgroundColor;\n                      } else if (fg || bg) {\n                        style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n                      }\n                      return (\n                        <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n                          {header.value}\n                        </th>\n                      );\n                    })}\n                  </tr>\n                </thead>\n                {rows && rows.length > 0 && (\n                  <tbody>\n                    {rows.map((row, rowIdx) => (\n                      <tr key={rowIdx}>\n                        {row.map((cell, colIdx) => {\n                          const style = { ...cell?.style };\n                          const fg = style.color;\n                          const bg = style.backgroundColor;\n                          if (fg || bg) {\n                            style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n                          }\n                          return (\n                            <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n                              {cell.value}\n                            </td>\n                          );\n                        })}\n                      </tr>\n                    ))}\n                  </tbody>\n                )}\n              </table>\n            </div>\n          </foreignObject>\n        </svg>\n      </div>\n    );\n  },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","tokens","d3","getColorContrast","resolveCSSVariables","ChartTitle","useImageExport","useArrowNavigationGroup","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","chartContainer","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","resolvedFg","resolvedBg","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","chartTitle","chartContainerRef","_rootElem","componentRef","classes","arrowAttributes","axis","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","titleHeight","totalHeight","tableHeight","svgWidth","titleMaxWidth","undefined","titleX","ref","el","current","className","root","overflow","svg","title","x","maxWidth","titleStyles","tooltipClassName","svgTooltip","foreignObject","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}

package/lib-commonjs/components/ChartTable/ChartTable.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ChartTable/ChartTable.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Chart } from './index';\n\n/**\n * Chart Table properties\n * {@docCategory ChartTable}\n */\nexport interface ChartTableProps {\n  /**\n   * 1d or 2d Array of header values.\n   */\n  headers: { value: string | number | boolean | null; style?: React.CSSProperties }[];\n\n  /**\n   * Array of rows. Each row corresponds to one data entry under each column.\n   */\n  rows: { value: string | number | boolean | null; style?: React.CSSProperties }[][];\n\n  /**\n   * Optional width for the table\n   * @default '100%'\n   */\n  width?: string | number;\n\n  /**\n   * Optional height for the table\n   * @default '650px'\n   */\n  height?: string | number;\n\n  /**\n   * Additional class name(s) to apply to the table chart\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: ChartTableStyles;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n}\n\n/**\n * Table Chart styles\n * {@docCategory ChartTable}\n */\nexport interface ChartTableStyles {\n  root?: string | React.CSSProperties;\n  table?: string;\n  headerCell?: string;\n  bodyCell?: string;\n  chart?: string;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/ChartTable/ChartTable.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TitleStyles } from '../../utilities/Common.styles';\nimport { Chart } from './index';\n\n/**\n * Chart Table properties\n * {@docCategory ChartTable}\n */\nexport interface ChartTableProps {\n  /**\n   * Title styles configuration for the chart title\n   */\n  titleStyles?: TitleStyles;\n\n  /**\n   * 1d or 2d Array of header values.\n   */\n  headers: { value: string | number | boolean | null; style?: React.CSSProperties }[];\n\n  /**\n   * Array of rows. Each row corresponds to one data entry under each column.\n   */\n  rows: { value: string | number | boolean | null; style?: React.CSSProperties }[][];\n\n  /**\n   * Optional width for the table\n   * @default '100%'\n   */\n  width?: string | number;\n\n  /**\n   * Optional height for the table\n   * @default '650px'\n   */\n  height?: string | number;\n\n  /**\n   * Chart title to display above the table\n   */\n  chartTitle?: string;\n\n  /**\n   * Additional class name(s) to apply to the table chart\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: ChartTableStyles;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n}\n\n/**\n * Table Chart styles\n * {@docCategory ChartTable}\n */\nexport interface ChartTableStyles {\n  root?: string | React.CSSProperties;\n  table?: string;\n  headerCell?: string;\n  bodyCell?: string;\n  chart?: string;\n  chartTitle?: string;\n  svgTooltip?: string;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.js

@@ -23,7 +23,9 @@ const chartTableClassNames = {
     table: 'fui-ChartTable__table',
     headerCell: 'fui-ChartTable__headerCell',
     bodyCell: 'fui-ChartTable__bodyCell',
-    chart: 'fui-ChartTable__chart'
+    chart: 'fui-ChartTable__chart',
+    chartTitle: 'fui-ChartTable__chartTitle',
+    svgTooltip: 'fui-ChartTable__svgTooltip'
 };
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
@@ -102,6 +104,20 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fes3tcz"
         ],
         B7iucu3: "fhs7xo9"
+    },
+    chartTitle: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fcpl73t",
+        Bkfmm31: "fhuob2q",
+        Bvjb7m6: "fhv2zbx",
+        fsow6f: "f17mccla",
+        jrapky: "fqcjy3b"
+    },
+    svgTooltip: {
+        Bkfmm31: "f5q6cfr",
+        Bxms50k: "f1bgda6t"
     }
 }, {
     d: [
@@ -140,7 +156,14 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             {
                 p: -2
             }
-        ]
+        ],
+        ".f13mqy1h{font-size:var(--fontSizeBase100);}",
+        ".fcpl73t{line-height:var(--lineHeightBase100);}",
+        ".fhuob2q{fill:var(--colorNeutralForeground1);}",
+        ".fhv2zbx{forced-color-adjust:auto;}",
+        ".f17mccla{text-align:center;}",
+        ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}",
+        ".f5q6cfr{fill:var(--colorNeutralBackground1);}"
     ],
     m: [
         [
@@ -154,6 +177,12 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             {
                 m: "(forced-colors: active)"
             }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1bgda6t{fill:Canvas;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
         ]
     ]
 });
@@ -164,6 +193,8 @@ const useChartTableStyles = (props)=>{
         table: (0, _react.mergeClasses)(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),
         headerCell: (0, _react.mergeClasses)(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),
         bodyCell: (0, _react.mergeClasses)(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),
-        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ )
+        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ ),
+        chartTitle: (0, _react.mergeClasses)(chartTableClassNames.chartTitle, baseStyles.chartTitle /*props.styles?.chartTitle*/ ),
+        svgTooltip: (0, _react.mergeClasses)(chartTableClassNames.svgTooltip, baseStyles.svgTooltip /*props.styles?.svgTooltip*/ )
     };
 };

package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useChartTableStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const chartTableClassNames = {\n    root: 'fui-ChartTable__root',\n    table: 'fui-ChartTable__table',\n    headerCell: 'fui-ChartTable__headerCell',\n    bodyCell: 'fui-ChartTable__bodyCell',\n    chart: 'fui-ChartTable__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        overflowX: 'auto'\n    },\n    table: {\n        borderCollapse: 'collapse'\n    },\n    headerCell: {\n        ...typographyStyles.caption1,\n        fontWeight: tokens.fontWeightSemibold,\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground1,\n        padding: tokens.spacingHorizontalS,\n        textAlign: 'left',\n        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Window',\n            color: 'WindowText'\n        }\n    },\n    bodyCell: {\n        ...typographyStyles.caption1,\n        padding: tokens.spacingHorizontalS,\n        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n        color: tokens.colorNeutralForeground1,\n        textAlign: 'left',\n        '@media (forced-colors: active)': {\n            color: 'WindowText'\n        }\n    }\n});\n/**\n * Apply styling to the ChartTable slots based on the state\n */ export const useChartTableStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n        table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),\n        headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),\n        bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),\n        chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/ )\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","a9b677","B68tc82","po53p8","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","De3pzq","sj55zd","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","By8wz76","B7iucu3","d","p","m","useChartTableStyles","props","baseStyles"],"mappings":"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"}
+{"version":3,"sources":["useChartTableStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getChartTitleStyles, HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const chartTableClassNames = {\n    root: 'fui-ChartTable__root',\n    table: 'fui-ChartTable__table',\n    headerCell: 'fui-ChartTable__headerCell',\n    bodyCell: 'fui-ChartTable__bodyCell',\n    chart: 'fui-ChartTable__chart',\n    chartTitle: 'fui-ChartTable__chartTitle',\n    svgTooltip: 'fui-ChartTable__svgTooltip'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        overflowX: 'auto'\n    },\n    table: {\n        borderCollapse: 'collapse'\n    },\n    headerCell: {\n        ...typographyStyles.caption1,\n        fontWeight: tokens.fontWeightSemibold,\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground1,\n        padding: tokens.spacingHorizontalS,\n        textAlign: 'left',\n        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Window',\n            color: 'WindowText'\n        }\n    },\n    bodyCell: {\n        ...typographyStyles.caption1,\n        padding: tokens.spacingHorizontalS,\n        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n        color: tokens.colorNeutralForeground1,\n        textAlign: 'left',\n        '@media (forced-colors: active)': {\n            color: 'WindowText'\n        }\n    },\n    chartTitle: getChartTitleStyles(),\n    svgTooltip: {\n        fill: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the ChartTable slots based on the state\n */ export const useChartTableStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n        table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),\n        headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),\n        bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),\n        chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/ ),\n        chartTitle: mergeClasses(chartTableClassNames.chartTitle, baseStyles.chartTitle /*props.styles?.chartTitle*/ ),\n        svgTooltip: mergeClasses(chartTableClassNames.svgTooltip, baseStyles.svgTooltip /*props.styles?.svgTooltip*/ )\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","getChartTitleStyles","HighContrastSelector","chartTableClassNames","root","table","headerCell","bodyCell","chart","chartTitle","svgTooltip","useStyles","a9b677","B68tc82","po53p8","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","De3pzq","sj55zd","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","By8wz76","B7iucu3","Bkfmm31","Bvjb7m6","jrapky","Bxms50k","d","p","m","useChartTableStyles","props","baseStyles"],"mappings":"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"}

package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.raw.js

@@ -19,12 +19,15 @@ _export(exports, {
 });
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
+const _index = require("../../utilities/index");
 const chartTableClassNames = {
     root: 'fui-ChartTable__root',
     table: 'fui-ChartTable__table',
     headerCell: 'fui-ChartTable__headerCell',
     bodyCell: 'fui-ChartTable__bodyCell',
-    chart: 'fui-ChartTable__chart'
+    chart: 'fui-ChartTable__chart',
+    chartTitle: 'fui-ChartTable__chartTitle',
+    svgTooltip: 'fui-ChartTable__svgTooltip'
 };
 const useStyles = (0, _react.makeStyles)({
     root: {
@@ -56,6 +59,13 @@ const useStyles = (0, _react.makeStyles)({
         '@media (forced-colors: active)': {
             color: 'WindowText'
         }
+    },
+    chartTitle: (0, _index.getChartTitleStyles)(),
+    svgTooltip: {
+        fill: _reacttheme.tokens.colorNeutralBackground1,
+        [_index.HighContrastSelector]: {
+            fill: 'Canvas'
+        }
     }
 });
 const useChartTableStyles = (props)=>{
@@ -65,6 +75,8 @@ const useChartTableStyles = (props)=>{
         table: (0, _react.mergeClasses)(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),
         headerCell: (0, _react.mergeClasses)(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),
         bodyCell: (0, _react.mergeClasses)(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),
-        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ )
+        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ ),
+        chartTitle: (0, _react.mergeClasses)(chartTableClassNames.chartTitle, baseStyles.chartTitle /*props.styles?.chartTitle*/ ),
+        svgTooltip: (0, _react.mergeClasses)(chartTableClassNames.svgTooltip, baseStyles.svgTooltip /*props.styles?.svgTooltip*/ )
     };
 };

package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ChartTable/useChartTableStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ChartTableProps, ChartTableStyles } from './ChartTable.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\n/**\n * @internal\n */\nexport const chartTableClassNames: SlotClassNames<ChartTableStyles> = {\n  root: 'fui-ChartTable__root',\n  table: 'fui-ChartTable__table',\n  headerCell: 'fui-ChartTable__headerCell',\n  bodyCell: 'fui-ChartTable__bodyCell',\n  chart: 'fui-ChartTable__chart',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    overflowX: 'auto',\n  },\n  table: {\n    borderCollapse: 'collapse',\n  },\n  headerCell: {\n    ...typographyStyles.caption1,\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground1,\n    padding: tokens.spacingHorizontalS,\n    textAlign: 'left',\n    border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Window',\n      color: 'WindowText',\n    },\n  },\n  bodyCell: {\n    ...typographyStyles.caption1,\n    padding: tokens.spacingHorizontalS,\n    border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n    color: tokens.colorNeutralForeground1,\n    textAlign: 'left',\n    '@media (forced-colors: active)': {\n      color: 'WindowText',\n    },\n  },\n});\n\n/**\n * Apply styling to the ChartTable slots based on the state\n */\nexport const useChartTableStyles = (props: ChartTableProps): ChartTableStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/),\n    table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/),\n    headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/),\n    bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/),\n    chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","width","overflowX","borderCollapse","caption1","fontWeight","fontWeightSemibold","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground1","padding","spacingHorizontalS","textAlign","border","strokeWidthThick","colorNeutralStroke2","useChartTableStyles","props","baseStyles"],"mappings":"AAAA;;;;;;;;;;;;IAUaI,oBAAAA;;;IA4CAuB,mBAAAA;;;;uBApD4B,iBAAiB;4BAGjB,wBAAwB;AAK1D,6BAA+D;IACpEtB,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BK,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,4BAAAA,CAAiBW,QAAQ;QAC5BC,YAAYb,kBAAAA,CAAOc,kBAAkB;QACrCC,iBAAiBf,kBAAAA,CAAOgB,uBAAuB;QAC/CC,OAAOjB,kBAAAA,CAAOkB,uBAAuB;QACrCC,SAASnB,kBAAAA,CAAOoB,kBAAkB;QAClCC,WAAW;QACXC,QAAQ,GAAGtB,kBAAAA,CAAOuB,gBAAgB,CAAC,OAAO,EAAEvB,kBAAAA,CAAOwB,mBAAmB,EAAE;QACxE,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,4BAAAA,CAAiBW,QAAQ;QAC5BO,SAASnB,kBAAAA,CAAOoB,kBAAkB;QAClCE,QAAQ,GAAGtB,kBAAAA,CAAOuB,gBAAgB,CAAC,OAAO,EAAEvB,kBAAAA,CAAOwB,mBAAmB,EAAE;QACxEP,OAAOjB,kBAAAA,CAAOkB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAKO,4BAA4B,CAACS;IAClC,MAAMC,aAAanB;IAEnB,OAAO;QACLL,UAAMJ,mBAAAA,EAAaG,qBAAqBC,IAAI,EAAEwB,WAAWxB,IAAI,CAAC,oBAAoB;QAClFC,WAAOL,mBAAAA,EAAaG,qBAAqBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,qBAAqB;QACtFC,gBAAYN,mBAAAA,EAAaG,qBAAqBG,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;QAC1GC,cAAUP,mBAAAA,EAAaG,qBAAqBI,QAAQ,EAAEqB,WAAWrB,QAAQ,CAAC,wBAAwB;QAClGC,WAAOR,mBAAAA,EAAaG,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ChartTable/useChartTableStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ChartTableProps, ChartTableStyles } from './ChartTable.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getChartTitleStyles, HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const chartTableClassNames: SlotClassNames<ChartTableStyles> = {\n  root: 'fui-ChartTable__root',\n  table: 'fui-ChartTable__table',\n  headerCell: 'fui-ChartTable__headerCell',\n  bodyCell: 'fui-ChartTable__bodyCell',\n  chart: 'fui-ChartTable__chart',\n  chartTitle: 'fui-ChartTable__chartTitle',\n  svgTooltip: 'fui-ChartTable__svgTooltip',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    overflowX: 'auto',\n  },\n  table: {\n    borderCollapse: 'collapse',\n  },\n  headerCell: {\n    ...typographyStyles.caption1,\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground1,\n    padding: tokens.spacingHorizontalS,\n    textAlign: 'left',\n    border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Window',\n      color: 'WindowText',\n    },\n  },\n  bodyCell: {\n    ...typographyStyles.caption1,\n    padding: tokens.spacingHorizontalS,\n    border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n    color: tokens.colorNeutralForeground1,\n    textAlign: 'left',\n    '@media (forced-colors: active)': {\n      color: 'WindowText',\n    },\n  },\n  chartTitle: getChartTitleStyles() as GriffelStyle,\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n});\n\n/**\n * Apply styling to the ChartTable slots based on the state\n */\nexport const useChartTableStyles = (props: ChartTableProps): ChartTableStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/),\n    table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/),\n    headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/),\n    bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/),\n    chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/),\n    chartTitle: mergeClasses(chartTableClassNames.chartTitle, baseStyles.chartTitle /*props.styles?.chartTitle*/),\n    svgTooltip: mergeClasses(chartTableClassNames.svgTooltip, baseStyles.svgTooltip /*props.styles?.svgTooltip*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","getChartTitleStyles","HighContrastSelector","chartTableClassNames","root","table","headerCell","bodyCell","chart","chartTitle","svgTooltip","useStyles","width","overflowX","borderCollapse","caption1","fontWeight","fontWeightSemibold","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground1","padding","spacingHorizontalS","textAlign","border","strokeWidthThick","colorNeutralStroke2","fill","colorNeutralBackground1","useChartTableStyles","props","baseStyles"],"mappings":"AAAA;;;;;;;;;;;;IAWaM,oBAAAA;;;IAqDA2B,mBAAAA;;;;uBA9D0C,iBAAiB;4BAG/B,wBAAwB;uBACP,wBAAwB;AAK3E,6BAA+D;IACpE1B,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;IACPC,YAAY;IACZC,YAAY;AACd,EAAE;AAEF,MAAMC,gBAAYd,iBAAAA,EAAW;IAC3BO,MAAM;QACJQ,OAAO;QACPC,WAAW;IACb;IACAR,OAAO;QACLS,gBAAgB;IAClB;IACAR,YAAY;QACV,GAAGN,4BAAAA,CAAiBe,QAAQ;QAC5BC,YAAYjB,kBAAAA,CAAOkB,kBAAkB;QACrCC,iBAAiBnB,kBAAAA,CAAOoB,uBAAuB;QAC/CC,OAAOrB,kBAAAA,CAAOsB,uBAAuB;QACrCC,SAASvB,kBAAAA,CAAOwB,kBAAkB;QAClCC,WAAW;QACXC,QAAQ,GAAG1B,kBAAAA,CAAO2B,gBAAgB,CAAC,OAAO,EAAE3B,kBAAAA,CAAO4B,mBAAmB,EAAE;QACxE,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAb,UAAU;QACR,GAAGP,4BAAAA,CAAiBe,QAAQ;QAC5BO,SAASvB,kBAAAA,CAAOwB,kBAAkB;QAClCE,QAAQ,GAAG1B,kBAAAA,CAAO2B,gBAAgB,CAAC,OAAO,EAAE3B,kBAAAA,CAAO4B,mBAAmB,EAAE;QACxEP,OAAOrB,kBAAAA,CAAOsB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;IACAX,gBAAYR,0BAAAA;IACZS,YAAY;QACVkB,MAAM7B,kBAAAA,CAAO8B,uBAAuB;QACpC,CAAC3B,2BAAAA,CAAqB,EAAE;YACtB0B,MAAM;QACR;IACF;AACF;AAKO,4BAA4B,CAACG;IAClC,MAAMC,aAAarB;IAEnB,OAAO;QACLP,UAAMN,mBAAAA,EAAaK,qBAAqBC,IAAI,EAAE4B,WAAW5B,IAAI,CAAC,oBAAoB;QAClFC,WAAOP,mBAAAA,EAAaK,qBAAqBE,KAAK,EAAE2B,WAAW3B,KAAK,CAAC,qBAAqB;QACtFC,YAAYR,uBAAAA,EAAaK,qBAAqBG,UAAU,EAAE0B,WAAW1B,UAAU,CAAC,0BAA0B;QAC1GC,cAAUT,mBAAAA,EAAaK,qBAAqBI,QAAQ,EAAEyB,WAAWzB,QAAQ,CAAC,wBAAwB;QAClGC,WAAOV,mBAAAA,EAAaK,qBAAqBK,KAAK,CAAC,qBAAqB;QACpEC,gBAAYX,mBAAAA,EAAaK,qBAAqBM,UAAU,EAAEuB,WAAWvB,UAAU,CAAC,0BAA0B;QAC1GC,gBAAYZ,mBAAAA,EAAaK,qBAAqBO,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;IAC5G;AACF,EAAE"}

package/lib-commonjs/components/CommonComponents/Annotations/ChartAnnotationLayer.js

@@ -25,10 +25,6 @@ const ARROW_SIZE_SCALE = 0.35;
 const MAX_SIMPLE_MARKUP_DEPTH = 5;
 const CHAR_CODE_LESS_THAN = '<'.codePointAt(0);
 const CHAR_CODE_GREATER_THAN = '>'.codePointAt(0);
-const getAnnotationKey = (annotation, index)=>{
-    var _annotation_id, _ref;
-    return (_ref = (_annotation_id = annotation.id) !== null && _annotation_id !== void 0 ? _annotation_id : typeof annotation.text === 'string' || typeof annotation.text === 'number' ? String(annotation.text) : undefined) !== null && _ref !== void 0 ? _ref : `annotation-${index}`;
-};
 const decodeSimpleMarkupInput = (input)=>{
     const namedEntities = {
         amp: '&',
@@ -227,6 +223,40 @@ const normalizeBandOffset = (scale, value)=>{
     return position;
 };
 const clamp = (value, min, max)=>Math.max(min, Math.min(max, value));
+const resolveDataCoordinate = (axis, value, context, yAxis = 'primary')=>{
+    if (axis === 'x') {
+        const xScale = context.xScale;
+        if (!xScale) {
+            return undefined;
+        }
+        const parsedValue = value instanceof Date ? value.getTime() : value;
+        return normalizeBandOffset(xScale, parsedValue);
+    }
+    const yScale = yAxis === 'secondary' ? context.yScaleSecondary : context.yScalePrimary;
+    if (!yScale) {
+        return undefined;
+    }
+    const parsedValue = value instanceof Date ? value.getTime() : value;
+    return normalizeBandOffset(yScale, parsedValue);
+};
+const resolveAxisCoordinate = (axis, coordinateType, value, context, options = {})=>{
+    switch(coordinateType){
+        case 'data':
+            return resolveDataCoordinate(axis, value, context, options.yAxis);
+        case 'relative':
+            if (typeof value !== 'number' || Number.isNaN(value)) {
+                return undefined;
+            }
+            return axis === 'x' ? context.plotRect.x + context.plotRect.width * value : context.plotRect.y + context.plotRect.height * value;
+        case 'pixel':
+            if (typeof value !== 'number' || Number.isNaN(value)) {
+                return undefined;
+            }
+            return axis === 'x' ? context.plotRect.x + value : context.plotRect.y + value;
+        default:
+            return undefined;
+    }
+};
 const createMeasurementSignature = (annotationContentSignature, containerStyle, contentStyle, layoutClassName, styleClassName)=>JSON.stringify({
         annotationContentSignature,
         containerStyle,
@@ -234,58 +264,58 @@ const createMeasurementSignature = (annotationContentSignature, containerStyle,
         layoutClassName: layoutClassName !== null && layoutClassName !== void 0 ? layoutClassName : '',
         styleClassName: styleClassName !== null && styleClassName !== void 0 ? styleClassName : ''
     });
+const getCoordinateDescriptor = (coordinates)=>{
+    switch(coordinates.type){
+        case 'data':
+            return {
+                xType: 'data',
+                yType: 'data',
+                yAxis: coordinates.yAxis
+            };
+        case 'relative':
+            return {
+                xType: 'relative',
+                yType: 'relative'
+            };
+        case 'pixel':
+            return {
+                xType: 'pixel',
+                yType: 'pixel'
+            };
+        case 'mixed':
+            return {
+                xType: coordinates.xCoordinateType,
+                yType: coordinates.yCoordinateType,
+                yAxis: coordinates.yAxis
+            };
+        default:
+            return undefined;
+    }
+};
 const resolveCoordinates = (annotation, context)=>{
     const { coordinates, layout } = annotation;
     if (!coordinates) {
         return undefined;
     }
+    const descriptor = getCoordinateDescriptor(coordinates);
+    if (!descriptor) {
+        return undefined;
+    }
     var _layout_offsetX;
     const offsetX = (_layout_offsetX = layout === null || layout === void 0 ? void 0 : layout.offsetX) !== null && _layout_offsetX !== void 0 ? _layout_offsetX : 0;
     var _layout_offsetY;
     const offsetY = (_layout_offsetY = layout === null || layout === void 0 ? void 0 : layout.offsetY) !== null && _layout_offsetY !== void 0 ? _layout_offsetY : 0;
+    const anchorX = resolveAxisCoordinate('x', descriptor.xType, coordinates.x, context);
+    const anchorY = resolveAxisCoordinate('y', descriptor.yType, coordinates.y, context, {
+        yAxis: descriptor.yAxis
+    });
+    if (anchorX === undefined || anchorY === undefined) {
+        return undefined;
+    }
     const anchor = {
-        x: 0,
-        y: 0
+        x: anchorX,
+        y: anchorY
     };
-    switch(coordinates.type){
-        case 'data':
-            {
-                const { x, y, yAxis = 'primary' } = coordinates;
-                const xScale = context.xScale;
-                const yScale = yAxis === 'secondary' ? context.yScaleSecondary : context.yScalePrimary;
-                if (!xScale || !yScale) {
-                    return undefined;
-                }
-                const xValue = normalizeBandOffset(xScale, x instanceof Date ? x.getTime() : x);
-                const yValue = normalizeBandOffset(yScale, y instanceof Date ? y.getTime() : y);
-                if (typeof xValue !== 'number' || typeof yValue !== 'number') {
-                    return undefined;
-                }
-                anchor.x = xValue;
-                anchor.y = yValue;
-                break;
-            }
-        case 'relative':
-            {
-                if (typeof coordinates.x !== 'number' || typeof coordinates.y !== 'number') {
-                    return undefined;
-                }
-                anchor.x = context.plotRect.x + context.plotRect.width * coordinates.x;
-                anchor.y = context.plotRect.y + context.plotRect.height * coordinates.y;
-                break;
-            }
-        case 'pixel':
-            {
-                if (typeof coordinates.x !== 'number' || typeof coordinates.y !== 'number') {
-                    return undefined;
-                }
-                anchor.x = context.plotRect.x + coordinates.x;
-                anchor.y = context.plotRect.y + coordinates.y;
-                break;
-            }
-        default:
-            return undefined;
-    }
     let left = anchor.x + offsetX;
     let top = anchor.y + offsetY;
     if (layout === null || layout === void 0 ? void 0 : layout.clipToBounds) {
@@ -301,15 +331,23 @@ const resolveCoordinates = (annotation, context)=>{
     };
 };
 const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
-    const { annotations: annotationsProp, context } = props;
+    const { annotations: annotationsProp, context, hideDefaultStyles } = props;
     const classes = (0, _useChartAnnotationLayerstyles.useChartAnnotationLayerStyles)(props);
     const idPrefix = (0, _reactutilities.useId)('chart-annotation');
+    const autoKeyPrefix = (0, _reactutilities.useId)('chart-annotation-item');
     const [measurements, setMeasurements] = _react.useState({});
-    const resolvedAnnotations = _react.useMemo(()=>(annotationsProp !== null && annotationsProp !== void 0 ? annotationsProp : []).map((annotation, index)=>({
+    const resolvedAnnotations = _react.useMemo(()=>{
+        let fallbackIndex = 0;
+        return (annotationsProp !== null && annotationsProp !== void 0 ? annotationsProp : []).map((annotation)=>{
+            var _annotation_id;
+            return {
                 annotation,
-                key: getAnnotationKey(annotation, index)
-            })), [
-        annotationsProp
+                key: (_annotation_id = annotation.id) !== null && _annotation_id !== void 0 ? _annotation_id : `${autoKeyPrefix}-${fallbackIndex++}`
+            };
+        });
+    }, [
+        annotationsProp,
+        autoKeyPrefix
     ]);
     _react.useEffect(()=>{
         setMeasurements((prev)=>{
@@ -365,7 +403,7 @@ const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
     const measurementElements = [];
     const connectors = [];
     resolvedAnnotations.forEach(({ annotation, key })=>{
-        var _annotation_style, _annotation_style1, _annotation_style2, _annotation_style3, _annotation_style4, _annotation_style5, _annotation_style6, _annotation_style7, _annotation_style8, _annotation_style9, _annotation_style10, _annotation_style11, _annotation_style12, _annotation_style13, _annotation_style14, _annotation_style15, _annotation_style16, _annotation_style17, _annotation_accessibility, _annotation_accessibility1, _annotation_accessibility2;
+        var _annotation_style, _annotation_style1, _annotation_style2, _annotation_style3, _annotation_style4, _annotation_style5, _annotation_style6, _annotation_style7, _annotation_style8, _annotation_style9, _annotation_style10, _annotation_style11, _annotation_style12, _annotation_style13, _annotation_style14, _annotation_style15, _annotation_style16, _annotation_style17, _annotation_style18, _annotation_accessibility, _annotation_accessibility1, _annotation_accessibility2;
         const resolved = resolveCoordinates(annotation, context);
         if (!resolved) {
             return;
@@ -387,28 +425,30 @@ const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
         const containerStyle = {
             maxWidth: layout === null || layout === void 0 ? void 0 : layout.maxWidth,
             ...hasCustomBackground ? {
-                backgroundColor: (0, _useChartAnnotationLayerstyles.applyOpacityToColor)(baseBackgroundColor, backgroundOpacity)
-            } : {
+                backgroundColor: (0, _useChartAnnotationLayerstyles.applyOpacityToColor)(baseBackgroundColor, backgroundOpacity, {
+                    preserveOriginalOpacity: ((_annotation_style4 = annotation.style) === null || _annotation_style4 === void 0 ? void 0 : _annotation_style4.opacity) === undefined
+                })
+            } : hideDefaultStyles ? {} : {
                 backgroundColor: (0, _useChartAnnotationLayerstyles.applyOpacityToColor)(_reacttheme.tokens.colorNeutralBackground1, _useChartAnnotationLayerstyles.DEFAULT_ANNOTATION_BACKGROUND_OPACITY)
             },
-            borderColor: (_annotation_style4 = annotation.style) === null || _annotation_style4 === void 0 ? void 0 : _annotation_style4.borderColor,
-            borderWidth: (_annotation_style5 = annotation.style) === null || _annotation_style5 === void 0 ? void 0 : _annotation_style5.borderWidth,
-            borderStyle: (_annotation_style_borderStyle = (_annotation_style6 = annotation.style) === null || _annotation_style6 === void 0 ? void 0 : _annotation_style6.borderStyle) !== null && _annotation_style_borderStyle !== void 0 ? _annotation_style_borderStyle : ((_annotation_style7 = annotation.style) === null || _annotation_style7 === void 0 ? void 0 : _annotation_style7.borderColor) ? 'solid' : undefined,
-            borderRadius: (_annotation_style8 = annotation.style) === null || _annotation_style8 === void 0 ? void 0 : _annotation_style8.borderRadius,
-            padding: (_annotation_style9 = annotation.style) === null || _annotation_style9 === void 0 ? void 0 : _annotation_style9.padding,
-            boxShadow: (_annotation_style10 = annotation.style) === null || _annotation_style10 === void 0 ? void 0 : _annotation_style10.boxShadow
+            borderColor: (_annotation_style5 = annotation.style) === null || _annotation_style5 === void 0 ? void 0 : _annotation_style5.borderColor,
+            borderWidth: (_annotation_style6 = annotation.style) === null || _annotation_style6 === void 0 ? void 0 : _annotation_style6.borderWidth,
+            borderStyle: (_annotation_style_borderStyle = (_annotation_style7 = annotation.style) === null || _annotation_style7 === void 0 ? void 0 : _annotation_style7.borderStyle) !== null && _annotation_style_borderStyle !== void 0 ? _annotation_style_borderStyle : ((_annotation_style8 = annotation.style) === null || _annotation_style8 === void 0 ? void 0 : _annotation_style8.borderColor) ? 'solid' : undefined,
+            borderRadius: (_annotation_style9 = annotation.style) === null || _annotation_style9 === void 0 ? void 0 : _annotation_style9.borderRadius,
+            padding: (_annotation_style10 = annotation.style) === null || _annotation_style10 === void 0 ? void 0 : _annotation_style10.padding,
+            boxShadow: (_annotation_style11 = annotation.style) === null || _annotation_style11 === void 0 ? void 0 : _annotation_style11.boxShadow
         };
         const contentStyle = {
-            color: (_annotation_style11 = annotation.style) === null || _annotation_style11 === void 0 ? void 0 : _annotation_style11.textColor,
-            fontSize: (_annotation_style12 = annotation.style) === null || _annotation_style12 === void 0 ? void 0 : _annotation_style12.fontSize,
-            fontWeight: (_annotation_style13 = annotation.style) === null || _annotation_style13 === void 0 ? void 0 : _annotation_style13.fontWeight,
+            color: (_annotation_style12 = annotation.style) === null || _annotation_style12 === void 0 ? void 0 : _annotation_style12.textColor,
+            fontSize: (_annotation_style13 = annotation.style) === null || _annotation_style13 === void 0 ? void 0 : _annotation_style13.fontSize,
+            fontWeight: (_annotation_style14 = annotation.style) === null || _annotation_style14 === void 0 ? void 0 : _annotation_style14.fontWeight,
             opacity: 1
         };
-        if (typeof ((_annotation_style14 = annotation.style) === null || _annotation_style14 === void 0 ? void 0 : _annotation_style14.rotation) === 'number' && !Number.isNaN(annotation.style.rotation)) {
+        if (typeof ((_annotation_style15 = annotation.style) === null || _annotation_style15 === void 0 ? void 0 : _annotation_style15.rotation) === 'number' && !Number.isNaN(annotation.style.rotation)) {
             containerStyle.transform = `rotate(${annotation.style.rotation}deg)`;
             containerStyle.transformOrigin = '50% 50%';
         }
-        const measurementSignature = createMeasurementSignature(annotationMarkupSignature, containerStyle, contentStyle, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style15 = annotation.style) === null || _annotation_style15 === void 0 ? void 0 : _annotation_style15.className);
+        const measurementSignature = createMeasurementSignature(annotationMarkupSignature, containerStyle, contentStyle, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style16 = annotation.style) === null || _annotation_style16 === void 0 ? void 0 : _annotation_style16.className);
         const measurementEntry = measurements[key];
         const isMeasurementValid = (measurementEntry === null || measurementEntry === void 0 ? void 0 : measurementEntry.signature) === measurementSignature;
         const measuredSize = isMeasurementValid ? measurementEntry : undefined;
@@ -474,8 +514,9 @@ const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
             visibility: 'hidden',
             ...containerStyle
         };
+        const annotationClass = hideDefaultStyles ? classes.annotationNoDefaults : classes.annotation;
         if (!isMeasurementValid) {
-            var _annotation_style18, _annotation_style19;
+            var _annotation_style19, _annotation_style20;
             measurementElements.push(/*#__PURE__*/ _react.createElement("div", {
                 key: `${key}-measurement`,
                 ref: (node)=>{
@@ -486,13 +527,13 @@ const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
                         }
                     }
                 },
-                className: (0, _react1.mergeClasses)(classes.annotation, classes.measurement, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style18 = annotation.style) === null || _annotation_style18 === void 0 ? void 0 : _annotation_style18.className),
+                className: (0, _react1.mergeClasses)(annotationClass, classes.measurement, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style19 = annotation.style) === null || _annotation_style19 === void 0 ? void 0 : _annotation_style19.className),
                 style: measurementStyle,
                 "aria-hidden": true,
                 "data-annotation-key": key,
                 "data-chart-annotation-measurement": "true"
             }, /*#__PURE__*/ _react.createElement("div", {
-                className: (0, _react1.mergeClasses)(classes.annotationContent, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style19 = annotation.style) === null || _annotation_style19 === void 0 ? void 0 : _annotation_style19.className),
+                className: (0, _react1.mergeClasses)(classes.annotationContent, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style20 = annotation.style) === null || _annotation_style20 === void 0 ? void 0 : _annotation_style20.className),
                 style: contentStyle
             }, renderSimpleMarkup(annotationMarkupNodes, `${key}-measurement`))));
         }
@@ -506,15 +547,16 @@ const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
             className: (0, _react1.mergeClasses)(classes.annotationForeignObject),
             "data-annotation-key": key
         }, /*#__PURE__*/ _react.createElement("div", {
-            className: (0, _react1.mergeClasses)(classes.annotation, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style16 = annotation.style) === null || _annotation_style16 === void 0 ? void 0 : _annotation_style16.className),
+            className: (0, _react1.mergeClasses)(annotationClass, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style17 = annotation.style) === null || _annotation_style17 === void 0 ? void 0 : _annotation_style17.className),
             style: containerStyle,
             "data-annotation-key": key
         }, /*#__PURE__*/ _react.createElement("div", {
-            className: (0, _react1.mergeClasses)(classes.annotationContent, (_annotation_style17 = annotation.style) === null || _annotation_style17 === void 0 ? void 0 : _annotation_style17.className),
+            className: (0, _react1.mergeClasses)(classes.annotationContent, classes.annotationContentInteractive, (_annotation_style18 = annotation.style) === null || _annotation_style18 === void 0 ? void 0 : _annotation_style18.className),
             style: contentStyle,
             role: (_annotation_accessibility_role = (_annotation_accessibility = annotation.accessibility) === null || _annotation_accessibility === void 0 ? void 0 : _annotation_accessibility.role) !== null && _annotation_accessibility_role !== void 0 ? _annotation_accessibility_role : 'note',
             "aria-label": (_annotation_accessibility_ariaLabel = (_annotation_accessibility1 = annotation.accessibility) === null || _annotation_accessibility1 === void 0 ? void 0 : _annotation_accessibility1.ariaLabel) !== null && _annotation_accessibility_ariaLabel !== void 0 ? _annotation_accessibility_ariaLabel : annotationPlainText ? annotationPlainText : undefined,
             "aria-describedby": (_annotation_accessibility2 = annotation.accessibility) === null || _annotation_accessibility2 === void 0 ? void 0 : _annotation_accessibility2.ariaDescribedBy,
+            tabIndex: 0,
             "data-chart-annotation": "true",
             "data-annotation-key": key
         }, renderSimpleMarkup(annotationMarkupNodes, `${key}-content`)))));