@fluentui/react-charts 9.3.4 → 9.3.6

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';\nimport { toImage as exportToImage } from '../../utilities/image-export-utils';\nimport { useRtl } from '../../utilities';\nimport { useAnnotationOnlyChartStyles } from './useAnnotationOnlyChartStyles.styles';\nimport type { AnnotationOnlyChartProps } from './AnnotationOnlyChart.types';\nimport type { Chart, ImageExportOptions } from '../../types/index';\nimport type { ChartAnnotationContext } from '../CommonComponents/Annotations/ChartAnnotationLayer.types';\n\nconst DEFAULT_HEIGHT = 650;\nconst FALLBACK_WIDTH = 400;\n\nconst buildPadding = (margin: AnnotationOnlyChartProps['margin']): string | undefined => {\n  if (!margin) {\n    return undefined;\n  }\n\n  const top = margin.t ?? 0;\n  const right = margin.r ?? 0;\n  const bottom = margin.b ?? 0;\n  const left = margin.l ?? 0;\n\n  if (top === 0 && right === 0 && bottom === 0 && left === 0) {\n    return undefined;\n  }\n\n  return `${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nexport const AnnotationOnlyChart: React.FC<AnnotationOnlyChartProps> = props => {\n  const {\n    annotations,\n    chartTitle,\n    description,\n    width,\n    height,\n    paperBackgroundColor,\n    plotBackgroundColor,\n    fontColor,\n    fontFamily,\n    margin,\n    componentRef,\n  } = props;\n\n  const isRtl = useRtl();\n  const classes = useAnnotationOnlyChartStyles();\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  const [measuredWidth, setMeasuredWidth] = React.useState<number>(width ?? 0);\n  const [contentHeight, setContentHeight] = React.useState<number>(height ?? DEFAULT_HEIGHT);\n\n  React.useEffect(() => {\n    if (typeof width === 'number' && width > 0) {\n      setMeasuredWidth(width);\n      return;\n    }\n\n    const node = containerRef.current;\n    if (!node || typeof ResizeObserver === 'undefined') {\n      const rect = node?.getBoundingClientRect();\n      if (rect && rect.width > 0) {\n        setMeasuredWidth(rect.width);\n      } else {\n        setMeasuredWidth(prev => (prev > 0 ? prev : FALLBACK_WIDTH));\n      }\n      return;\n    }\n\n    const observer = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) {\n        return;\n      }\n      const newWidth = entry.contentRect.width;\n      if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {\n        setMeasuredWidth(newWidth);\n      }\n    });\n\n    const rect = node.getBoundingClientRect();\n    if (rect.width > 0) {\n      setMeasuredWidth(rect.width);\n    }\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [width, measuredWidth]);\n\n  const resolvedWidth = Math.max(measuredWidth || FALLBACK_WIDTH, 1);\n  const resolvedHeight = Math.max(height ?? DEFAULT_HEIGHT, 1);\n\n  React.useEffect(() => {\n    const node = contentRef.current;\n    if (!node) {\n      setContentHeight(prev => (prev > 0 ? prev : resolvedHeight));\n      return;\n    }\n\n    if (typeof ResizeObserver === 'undefined') {\n      const rect = node.getBoundingClientRect();\n      setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n      return;\n    }\n\n    const observer = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) {\n        return;\n      }\n\n      const newHeight = entry.contentRect.height;\n      if (newHeight > 0) {\n        setContentHeight(prev => (Math.abs(prev - newHeight) > 0.5 ? newHeight : prev));\n      }\n    });\n\n    const rect = node.getBoundingClientRect();\n    setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [\n    resolvedHeight,\n    resolvedWidth,\n    annotations,\n    chartTitle,\n    description,\n    margin,\n    plotBackgroundColor,\n    paperBackgroundColor,\n    fontColor,\n    fontFamily,\n  ]);\n\n  const svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);\n\n  const context: ChartAnnotationContext = {\n    plotRect: { x: 0, y: 0, width: resolvedWidth, height: resolvedHeight },\n    svgRect: { width: resolvedWidth, height: resolvedHeight },\n    isRtl,\n  };\n\n  const padding = buildPadding(margin);\n\n  // Inline styles for dynamic values that can't be in makeStyles\n  const rootStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      width: width ? `${width}px` : '100%',\n      minHeight: resolvedHeight,\n      ...(paperBackgroundColor && { backgroundColor: paperBackgroundColor }),\n      ...(fontColor && { color: fontColor }),\n      ...(fontFamily && { fontFamily }),\n      ...(padding && { padding }),\n    }),\n    [fontColor, fontFamily, paperBackgroundColor, padding, resolvedHeight, width],\n  );\n\n  const contentStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      ...(plotBackgroundColor && { backgroundColor: plotBackgroundColor }),\n    }),\n    [plotBackgroundColor],\n  );\n\n  const resolvedAnnotations = annotations ?? [];\n  const hasAnnotations = resolvedAnnotations.length > 0;\n  const ariaLabel = hasAnnotations ? description ?? chartTitle : undefined;\n\n  React.useImperativeHandle(\n    componentRef,\n    () => {\n      const chartHandle: Chart = {\n        chartContainer: containerRef.current,\n        toImage: (opts?: ImageExportOptions) => {\n          if (!containerRef.current) {\n            return Promise.reject(new Error('Chart container is not defined'));\n          }\n\n          return exportToImage(containerRef.current, undefined, isRtl, opts);\n        },\n      };\n\n      return chartHandle;\n    },\n    [isRtl],\n  );\n\n  return (\n    <div ref={containerRef} data-chart-annotation-container=\"true\">\n      <svg\n        width={resolvedWidth}\n        height={svgHeight}\n        viewBox={`0 0 ${resolvedWidth} ${svgHeight}`}\n        style={{ width: width ? `${width}px` : '100%', height: `${svgHeight}px`, display: 'block' }}\n        role={ariaLabel ? 'img' : undefined}\n        aria-label={ariaLabel}\n      >\n        <foreignObject x={0} y={0} width={resolvedWidth} height={svgHeight}>\n          <div\n            ref={contentRef}\n            className={classes.root}\n            style={rootStyle}\n            data-chart-annotation-only=\"true\"\n            aria-label={ariaLabel}\n          >\n            {chartTitle && (\n              <span className={classes.title} aria-hidden=\"true\">\n                {chartTitle}\n              </span>\n            )}\n            <div className={classes.content} style={contentStyle} role=\"presentation\">\n              {hasAnnotations ? <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} /> : null}\n            </div>\n          </div>\n        </foreignObject>\n      </svg>\n    </div>\n  );\n};\n\nAnnotationOnlyChart.displayName = 'AnnotationOnlyChart';\n"],"names":["React","ChartAnnotationLayer","toImage","exportToImage","useRtl","useAnnotationOnlyChartStyles","DEFAULT_HEIGHT","FALLBACK_WIDTH","buildPadding","margin","undefined","top","t","right","r","bottom","b","left","l","AnnotationOnlyChart","props","annotations","chartTitle","description","width","height","paperBackgroundColor","plotBackgroundColor","fontColor","fontFamily","componentRef","isRtl","classes","containerRef","useRef","contentRef","measuredWidth","setMeasuredWidth","useState","contentHeight","setContentHeight","useEffect","node","current","ResizeObserver","rect","getBoundingClientRect","prev","observer","entries","entry","newWidth","contentRect","Math","abs","observe","disconnect","resolvedWidth","max","resolvedHeight","newHeight","svgHeight","ceil","context","plotRect","x","y","svgRect","padding","rootStyle","useMemo","minHeight","backgroundColor","color","contentStyle","resolvedAnnotations","hasAnnotations","length","ariaLabel","useImperativeHandle","chartHandle","chartContainer","opts","Promise","reject","Error","div","ref","data-chart-annotation-container","svg","viewBox","style","display","role","aria-label","foreignObject","className","root","data-chart-annotation-only","span","title","aria-hidden","content","displayName"],"mappings":"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"}

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/AnnotationOnlyChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ChartAnnotation } from '../../types/ChartAnnotation';\nimport type { Chart } from '../../types/index';\nimport type { Margin } from '@fluentui/chart-utilities';\n\n/**\n * Props for the annotation-only chart renderer.\n */\nexport interface AnnotationOnlyChartProps {\n  /**\n   * Collection of annotations to render.\n   */\n  annotations: ChartAnnotation[];\n  /** Optional layout title extracted from the Plotly schema. */\n  chartTitle?: string;\n  /** Optional descriptive text for accessibility. */\n  description?: string;\n  /** Desired width in pixels (if absent the chart will grow to fit the container). */\n  width?: number;\n  /** Desired height in pixels. */\n  height?: number;\n  /** Paper/background colour specified in the Plotly layout. */\n  paperBackgroundColor?: string;\n  /** Plot area background colour specified in the Plotly layout. */\n  plotBackgroundColor?: string;\n  /** Global layout font colour. */\n  fontColor?: string;\n  /** Global layout font family. */\n  fontFamily?: string;\n  /** Layout margin converted to padding for the outer wrapper. */\n  margin?: Partial<Margin>;\n  /** Component ref propagated by the DeclarativeChart surface. */\n  componentRef?: React.RefObject<Chart>;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/AnnotationOnlyChart/index.js

@@ -0,0 +1,2 @@
+export * from './AnnotationOnlyChart';
+export * from './AnnotationOnlyChart.types';

package/lib/components/AnnotationOnlyChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/index.ts"],"sourcesContent":["export * from './AnnotationOnlyChart';\nexport * from './AnnotationOnlyChart.types';\n"],"names":[],"mappings":"AAAA,cAAc,wBAAwB;AACtC,cAAc,8BAA8B"}

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

@@ -0,0 +1,31 @@
+import { __styles } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const useAnnotationOnlyChartStyles = /*#__PURE__*/__styles({
+  root: {
+    qhf8xq: "f10pi13n",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Belr9w4: "fn67r4l",
+    De3pzq: "fxugw4r",
+    sj55zd: "f19n0e5",
+    Bahqtrf: "fk6fouc"
+  },
+  content: {
+    qhf8xq: "f10pi13n",
+    Bh6795r: "fqerorx",
+    De3pzq: "f3rmtva",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
+    B7ck84d: "f1ewtqcl"
+  },
+  title: {
+    fsow6f: "f17mccla"
+  }
+}, {
+  d: [".f10pi13n{position:relative;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fn67r4l{row-gap:8px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fqerorx{flex-grow:1;}", ".f3rmtva{background-color:transparent;}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f1ewtqcl{box-sizing:border-box;}", ".f17mccla{text-align:center;}"]
+});

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

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

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

@@ -0,0 +1,23 @@
+import { makeStyles } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const useAnnotationOnlyChartStyles = makeStyles({
+    root: {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: '8px',
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1,
+        fontFamily: typographyStyles.body1.fontFamily
+    },
+    content: {
+        position: 'relative',
+        flexGrow: 1,
+        backgroundColor: 'transparent',
+        borderRadius: tokens.borderRadiusMedium,
+        boxSizing: 'border-box'
+    },
+    title: {
+        textAlign: 'center'
+    }
+});

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

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

package/lib/components/AreaChart/useAreaChartStyles.styles.js

@@ -17,7 +17,9 @@ export const areaChartClassNames = {
   chartWrapper: '',
   svgTooltip: '',
   chart: '',
-  axisAnnotation: ''
+  axisAnnotation: '',
+  plotContainer: '',
+  annotationLayer: ''
 };
 const useStyles = /*#__PURE__*/__styles({
   tooltip: {
@@ -27,10 +29,11 @@ const useStyles = /*#__PURE__*/__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",
@@ -44,7 +47,9 @@ const useStyles = /*#__PURE__*/__styles({
     sj55zd: "f19n0e5"
   }
 }, {
-  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".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);}", ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
     p: -1
   }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}"]
 });

package/lib/components/AreaChart/useAreaChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","useAreaChartStyles","props","baseStyles"],"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const areaChartClassNames = {\n    tooltip: 'fui-ac__tooltip',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n    tooltip: getTooltipStyle()\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,OAAO,EAAE,iBAAiB;EAC1BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,gBAAGnB,QAAA;EAAAI,OAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAEjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAG1B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHf,OAAO,EAAEH,YAAY,CAACE,mBAAmB,CAACC,OAAO,EAAEyC,UAAU,CAACzC,OAAO,CAAC,yBAA0B;EACpG,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","useAreaChartStyles","props","baseStyles"],"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const areaChartClassNames = {\n    tooltip: 'fui-ac__tooltip',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: '',\n    plotContainer: '',\n    annotationLayer: ''\n};\nconst useStyles = makeStyles({\n    tooltip: getTooltipStyle()\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,OAAO,EAAE,iBAAiB;EAC1BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE,EAAE;EAClBC,aAAa,EAAE,EAAE;EACjBC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAI,OAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAEjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAG3B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEH,YAAY,CAACE,mBAAmB,CAACC,OAAO,EAAE4C,UAAU,CAAC5C,OAAO,CAAC,yBAA0B;EACpG,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js

@@ -16,7 +16,9 @@ export const areaChartClassNames = {
     chartWrapper: '',
     svgTooltip: '',
     chart: '',
-    axisAnnotation: ''
+    axisAnnotation: '',
+    plotContainer: '',
+    annotationLayer: ''
 };
 const useStyles = makeStyles({
     tooltip: getTooltipStyle()

package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AreaChart/useAreaChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { AreaChartProps, AreaChartStyles } from './index';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const areaChartClassNames: SlotClassNames<AreaChartStyles> = {\n  tooltip: 'fui-ac__tooltip',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  opacityChangeOnHover: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n  tooltip: getTooltipStyle() as GriffelStyle,\n});\n\n/**\n * Apply styling to the AreaChart slots based on the state\n */\nexport const useAreaChartStyles = (props: AreaChartProps): AreaChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","useAreaChartStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,eAAe,QAAQ,wBAAwB;AAExD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,YAAYnB,WAAW;IAC3BI,SAASF;AACX;AAEA;;CAEC,GACD,OAAO,MAAMkB,qBAAqB,CAACC;IACjC,MAAMC,aAAaH;IAEnB,OAAO;QACLf,SAASH,aAAaE,oBAAoBC,OAAO,EAAEkB,WAAWlB,OAAO,CAAC,uBAAuB;IAC/F;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AreaChart/useAreaChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { AreaChartProps, AreaChartStyles } from './index';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const areaChartClassNames: SlotClassNames<AreaChartStyles> = {\n  tooltip: 'fui-ac__tooltip',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  opacityChangeOnHover: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n  plotContainer: '',\n  annotationLayer: '',\n};\n\nconst useStyles = makeStyles({\n  tooltip: getTooltipStyle() as GriffelStyle,\n});\n\n/**\n * Apply styling to the AreaChart slots based on the state\n */\nexport const useAreaChartStyles = (props: AreaChartProps): AreaChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","useAreaChartStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,eAAe,QAAQ,wBAAwB;AAExD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;IAChBC,eAAe;IACfC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,YAAYrB,WAAW;IAC3BI,SAASF;AACX;AAEA;;CAEC,GACD,OAAO,MAAMoB,qBAAqB,CAACC;IACjC,MAAMC,aAAaH;IAEnB,OAAO;QACLjB,SAASH,aAAaE,oBAAoBC,OAAO,EAAEoB,WAAWpB,OAAO,CAAC,uBAAuB;IAC/F;AACF,EAAE"}

package/lib/components/ChartTable/ChartTable.js

@@ -83,7 +83,9 @@ export const ChartTable = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
         }
     }
     return /*#__PURE__*/ React.createElement("div", {
-        ref: (el)=>_rootElem.current = el,
+        ref: (el)=>{
+            _rootElem.current = el;
+        },
         className: classes.root,
         style: {
             height: height ? `${height}px` : '650px',

package/lib/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 { useRtl } from '../../utilities/utilities';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\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 _isRTL: boolean = useRtl();\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const classes = useChartTableStyles(props);\n\n    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, undefined, _isRTL, opts);\n        },\n      }),\n      [],\n    );\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 => (_rootElem.current = el)}\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","useRtl","toImage","tokens","d3","getColorContrast","resolveCSSVariables","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","_isRTL","_rootElem","useRef","classes","useImperativeHandle","componentRef","current","opts","undefined","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","ref","el","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 { useRtl } from '../../utilities/utilities';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\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 _isRTL: boolean = useRtl();\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const classes = useChartTableStyles(props);\n\n    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, undefined, _isRTL, opts);\n        },\n      }),\n      [],\n    );\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","useRtl","toImage","tokens","d3","getColorContrast","resolveCSSVariables","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","_isRTL","_rootElem","useRef","classes","useImperativeHandle","componentRef","current","opts","undefined","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","ref","el","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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"}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 /**
  * @internal
@@ -27,56 +27,76 @@ const useStyles = /*#__PURE__*/__styles({
     Bg96gwp: "fwrc4pm",
     De3pzq: "f16xq7d1",
     sj55zd: "f19n0e5",
-    z8tnut: "f17mpqex",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "fdvome7",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1bnz8pu",
     fsow6f: ["f1o700av", "fes3tcz"],
-    B4j52fo: "f18zi460",
-    Bekrc4i: ["f1wpluaz", "fsfsuhs"],
-    Bn0qgzm: "fmklw6v",
-    ibv6hh: ["fsfsuhs", "f1wpluaz"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "f68mrw8",
-    h3c5rm: ["f7pw515", "fw35ms5"],
-    B9xav0g: "frpde29",
-    zhjwy3: ["fw35ms5", "f7pw515"],
-    Bsw6fvg: "f8pusc0",
-    Bbusuzp: "fqgauei"
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fox1scm",
+    By8wz76: "ftx6bta",
+    B7iucu3: "fhs7xo9"
   },
   bodyCell: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
     Bhrd7zp: "figsok6",
     Bg96gwp: "fwrc4pm",
-    z8tnut: "f17mpqex",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "fdvome7",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
-    B4j52fo: "f18zi460",
-    Bekrc4i: ["f1wpluaz", "fsfsuhs"],
-    Bn0qgzm: "fmklw6v",
-    ibv6hh: ["fsfsuhs", "f1wpluaz"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "f68mrw8",
-    h3c5rm: ["f7pw515", "fw35ms5"],
-    B9xav0g: "frpde29",
-    zhjwy3: ["fw35ms5", "f7pw515"],
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1bnz8pu",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fox1scm",
     sj55zd: "f19n0e5",
     fsow6f: ["f1o700av", "fes3tcz"],
-    Bbusuzp: "fqgauei"
+    B7iucu3: "fhs7xo9"
   }
 }, {
-  d: [".fly5x3f{width:100%;}", ".f1oy3dpc{overflow-x:auto;}", ".fgkb47j{border-collapse:collapse;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".figsok6{font-weight:var(--fontWeightRegular);}"],
-  m: [["@media (forced-colors: active){.f8pusc0{background-color:Window;}}", {
+  d: [".fly5x3f{width:100%;}", ".f1oy3dpc{overflow-x:auto;}", ".fgkb47j{border-collapse:collapse;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", [".fox1scm{border:var(--strokeWidthThick) solid var(--colorNeutralStroke2);}", {
+    p: -2
+  }], ".figsok6{font-weight:var(--fontWeightRegular);}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
+    p: -1
+  }], [".fox1scm{border:var(--strokeWidthThick) solid var(--colorNeutralStroke2);}", {
+    p: -2
+  }]],
+  m: [["@media (forced-colors: active){.ftx6bta{background-color:Window;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fqgauei{color:WindowText;}}", {
+  }], ["@media (forced-colors: active){.fhs7xo9{color:WindowText;}}", {
     m: "(forced-colors: active)"
   }]]
 });

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","a9b677","B68tc82","po53p8","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","De3pzq","sj55zd","z8tnut","z189sj","Byoj8tv","uwmqm3","fsow6f","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bsw6fvg","Bbusuzp","d","m","useChartTableStyles","props","baseStyles"],"sources":["useChartTableStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } 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        ...shorthands.padding(tokens.spacingHorizontalS),\n        textAlign: 'left',\n        ...shorthands.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        ...shorthands.padding(tokens.spacingHorizontalS),\n        ...shorthands.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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,sBAAsB;EAC5BC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,QAAQ,EAAE,0BAA0B;EACpCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGX,QAAA;EAAAM,IAAA;IAAAM,MAAA;IAAAC,OAAA;EAAA;EAAAN,KAAA;IAAAO,MAAA;EAAA;EAAAN,UAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA9B,QAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAjB,MAAA;IAAAK,MAAA;IAAAc,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA+BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,MAAMC,UAAU,GAAGjC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEL,YAAY,CAACI,oBAAoB,CAACC,IAAI,EAAEsC,UAAU,CAACtC,IAAI,CAAC,sBAAuB,CAAC;IACtFC,KAAK,EAAEN,YAAY,CAACI,oBAAoB,CAACE,KAAK,EAAEqC,UAAU,CAACrC,KAAK,CAAC,uBAAwB,CAAC;IAC1FC,UAAU,EAAEP,YAAY,CAACI,oBAAoB,CAACG,UAAU,EAAEoC,UAAU,CAACpC,UAAU,CAAC,4BAA6B,CAAC;IAC9GC,QAAQ,EAAER,YAAY,CAACI,oBAAoB,CAACI,QAAQ,EAAEmC,UAAU,CAACnC,QAAQ,CAAC,0BAA2B,CAAC;IACtGC,KAAK,EAAET,YAAY,CAACI,oBAAoB,CAACK,KAAK,CAAC,uBAAwB;EAC3E,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,sBAAsB;EAC5BC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,QAAQ,EAAE,0BAA0B;EACpCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGV,QAAA;EAAAK,IAAA;IAAAM,MAAA;IAAAC,OAAA;EAAA;EAAAN,KAAA;IAAAO,MAAA;EAAA;EAAAN,UAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAApC,QAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAvB,MAAA;IAAAM,MAAA;IAAAmB,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA+BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,MAAMC,UAAU,GAAGxC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEJ,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAE6C,UAAU,CAAC7C,IAAI,CAAC,sBAAuB,CAAC;IACtFC,KAAK,EAAEL,YAAY,CAACG,oBAAoB,CAACE,KAAK,EAAE4C,UAAU,CAAC5C,KAAK,CAAC,uBAAwB,CAAC;IAC1FC,UAAU,EAAEN,YAAY,CAACG,oBAAoB,CAACG,UAAU,EAAE2C,UAAU,CAAC3C,UAAU,CAAC,4BAA6B,CAAC;IAC9GC,QAAQ,EAAEP,YAAY,CAACG,oBAAoB,CAACI,QAAQ,EAAE0C,UAAU,CAAC1C,QAAQ,CAAC,0BAA2B,CAAC;IACtGC,KAAK,EAAER,YAAY,CAACG,oBAAoB,CAACK,KAAK,CAAC,uBAAwB;EAC3E,CAAC;AACL,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 'use client';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 /**
  * @internal
@@ -23,9 +23,9 @@ const useStyles = makeStyles({
         fontWeight: tokens.fontWeightSemibold,
         backgroundColor: tokens.colorNeutralBackground3,
         color: tokens.colorNeutralForeground1,
-        ...shorthands.padding(tokens.spacingHorizontalS),
+        padding: tokens.spacingHorizontalS,
         textAlign: 'left',
-        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
+        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,
         '@media (forced-colors: active)': {
             backgroundColor: 'Window',
             color: 'WindowText'
@@ -33,8 +33,8 @@ const useStyles = makeStyles({
     },
     bodyCell: {
         ...typographyStyles.caption1,
-        ...shorthands.padding(tokens.spacingHorizontalS),
-        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
+        padding: tokens.spacingHorizontalS,
+        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,
         color: tokens.colorNeutralForeground1,
         textAlign: 'left',
         '@media (forced-colors: active)': {

package/lib/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, shorthands } 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    ...shorthands.padding(tokens.spacingHorizontalS),\n    textAlign: 'left',\n    ...shorthands.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    ...shorthands.padding(tokens.spacingHorizontalS),\n    ...shorthands.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","shorthands","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;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE;;CAEC,GACD,OAAO,MAAMC,uBAAyD;IACpEC,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYX,WAAW;IAC3BM,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,iBAAiBW,QAAQ;QAC5BC,YAAYb,OAAOc,kBAAkB;QACrCC,iBAAiBf,OAAOgB,uBAAuB;QAC/CC,OAAOjB,OAAOkB,uBAAuB;QACrC,GAAGnB,WAAWoB,OAAO,CAACnB,OAAOoB,kBAAkB,CAAC;QAChDC,WAAW;QACX,GAAGtB,WAAWuB,MAAM,CAACtB,OAAOuB,gBAAgB,EAAE,SAASvB,OAAOwB,mBAAmB,CAAC;QAClF,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,iBAAiBW,QAAQ;QAC5B,GAAGb,WAAWoB,OAAO,CAACnB,OAAOoB,kBAAkB,CAAC;QAChD,GAAGrB,WAAWuB,MAAM,CAACtB,OAAOuB,gBAAgB,EAAE,SAASvB,OAAOwB,mBAAmB,CAAC;QAClFP,OAAOjB,OAAOkB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,sBAAsB,CAACC;IAClC,MAAMC,aAAanB;IAEnB,OAAO;QACLL,MAAML,aAAaI,qBAAqBC,IAAI,EAAEwB,WAAWxB,IAAI,CAAC,oBAAoB;QAClFC,OAAON,aAAaI,qBAAqBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,qBAAqB;QACtFC,YAAYP,aAAaI,qBAAqBG,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;QAC1GC,UAAUR,aAAaI,qBAAqBI,QAAQ,EAAEqB,WAAWrB,QAAQ,CAAC,wBAAwB;QAClGC,OAAOT,aAAaI,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}
+{"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;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE;;CAEC,GACD,OAAO,MAAMC,uBAAyD;IACpEC,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYV,WAAW;IAC3BK,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,iBAAiBW,QAAQ;QAC5BC,YAAYb,OAAOc,kBAAkB;QACrCC,iBAAiBf,OAAOgB,uBAAuB;QAC/CC,OAAOjB,OAAOkB,uBAAuB;QACrCC,SAASnB,OAAOoB,kBAAkB;QAClCC,WAAW;QACXC,QAAQ,GAAGtB,OAAOuB,gBAAgB,CAAC,OAAO,EAAEvB,OAAOwB,mBAAmB,EAAE;QACxE,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,iBAAiBW,QAAQ;QAC5BO,SAASnB,OAAOoB,kBAAkB;QAClCE,QAAQ,GAAGtB,OAAOuB,gBAAgB,CAAC,OAAO,EAAEvB,OAAOwB,mBAAmB,EAAE;QACxEP,OAAOjB,OAAOkB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,sBAAsB,CAACC;IAClC,MAAMC,aAAanB;IAEnB,OAAO;QACLL,MAAMJ,aAAaG,qBAAqBC,IAAI,EAAEwB,WAAWxB,IAAI,CAAC,oBAAoB;QAClFC,OAAOL,aAAaG,qBAAqBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,qBAAqB;QACtFC,YAAYN,aAAaG,qBAAqBG,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;QAC1GC,UAAUP,aAAaG,qBAAqBI,QAAQ,EAAEqB,WAAWrB,QAAQ,CAAC,wBAAwB;QAClGC,OAAOR,aAAaG,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}