@fluentui/react-charts 9.2.4 → 9.3.0

package/lib/components/LineChart/eventAnnotation/LabelLink.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { Textbox } from './Textbox';
 import { getColorFromToken } from '../../../utilities/colors';

package/lib/components/LineChart/eventAnnotation/LabelLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/eventAnnotation/LabelLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { EventAnnotation } from '../../../types/EventAnnotation';\nimport { Textbox } from './Textbox';\nimport { getColorFromToken } from '../../../utilities/colors';\nimport { tokens } from '@fluentui/react-theme';\n\nexport interface LineDef extends EventAnnotation {\n  x: number;\n}\n\nexport interface LabelDef {\n  x: number;\n  aggregatedIdx: number[];\n  anchor: 'start' | 'end';\n}\n\ninterface LabelLinkProps {\n  lineDefs: LineDef[];\n  labelDef: LabelDef;\n  textY: number;\n  textWidth: number;\n  textLineHeight: number;\n  textFontSize: string;\n  textColor: string | undefined;\n  mergedLabel: (count: number) => string;\n}\n\nexport const LabelLink: React.FunctionComponent<LabelLinkProps> = props => {\n  const gRef = React.useRef<SVGGElement>(null);\n  const [showCard, setShowCard] = React.useState(false);\n  const onClick = () => setShowCard(true);\n\n  let callout: React.ReactNode = null;\n  if (showCard) {\n    const cards = props.labelDef.aggregatedIdx.map(i => props.lineDefs[i].onRenderCard!).filter(c => !!c);\n    if (cards.length > 0) {\n      callout = null;\n      // TODO - need to replace callout with popover\n      /*callout = {\n        /* <Callout\n          target={gRef.current}\n          // eslint-disable-next-line react/jsx-no-bind\n          onDismiss={onDismiss}\n          setInitialFocus={true}\n          role=\"dialog\"\n        >\n          <FocusZone isCircularNavigation={true} direction={FocusZoneDirection.vertical}>\n            <List<() => React.ReactNode>\n              items={cards}\n              // eslint-disable-next-line react/jsx-no-bind\n              onRenderCell={onRenderCell}\n            />\n          </FocusZone>\n        </Callout>\n      };*/\n    }\n  }\n\n  let text: string;\n  const fill: string | undefined = props.textColor\n    ? getColorFromToken(props.textColor, false)\n    : tokens.colorNeutralForeground1;\n\n  if (props.labelDef.aggregatedIdx.length === 1) {\n    text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;\n  } else {\n    text = props.mergedLabel(props.labelDef.aggregatedIdx.length);\n  }\n\n  return (\n    <>\n      <g ref={gRef} onClick={onClick} data-is-focusable={false} style={{ cursor: 'pointer' }} role=\"button\">\n        <Textbox\n          text={text}\n          x={props.labelDef.x}\n          y={props.textY}\n          width={props.textWidth}\n          lineHeight={props.textLineHeight}\n          textAnchor={props.labelDef.anchor}\n          fontSize={props.textFontSize}\n          fill={fill}\n        />\n      </g>\n      {callout}\n    </>\n  );\n};\n"],"names":["React","Textbox","getColorFromToken","tokens","LabelLink","props","gRef","useRef","showCard","setShowCard","useState","onClick","callout","cards","labelDef","aggregatedIdx","map","i","lineDefs","onRenderCard","filter","c","length","text","fill","textColor","colorNeutralForeground1","event","mergedLabel","g","ref","data-is-focusable","style","cursor","role","x","y","textY","width","textWidth","lineHeight","textLineHeight","textAnchor","anchor","fontSize","textFontSize"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,MAAM,QAAQ,wBAAwB;AAuB/C,OAAO,MAAMC,YAAqDC,CAAAA;IAChE,MAAMC,OAAON,MAAMO,MAAM,CAAc;IACvC,MAAM,CAACC,UAAUC,YAAY,GAAGT,MAAMU,QAAQ,CAAC;IAC/C,MAAMC,UAAU,IAAMF,YAAY;IAElC,IAAIG,UAA2B;IAC/B,IAAIJ,UAAU;QACZ,MAAMK,QAAQR,MAAMS,QAAQ,CAACC,aAAa,CAACC,GAAG,CAACC,CAAAA,IAAKZ,MAAMa,QAAQ,CAACD,EAAE,CAACE,YAAY,EAAGC,MAAM,CAACC,CAAAA,IAAK,CAAC,CAACA;QACnG,IAAIR,MAAMS,MAAM,GAAG,GAAG;YACpBV,UAAU;QACV,8CAA8C;QAC9C;;;;;;;;;;;;;;;;QAgBE,GACJ;IACF;IAEA,IAAIW;IACJ,MAAMC,OAA2BnB,MAAMoB,SAAS,GAC5CvB,kBAAkBG,MAAMoB,SAAS,EAAE,SACnCtB,OAAOuB,uBAAuB;IAElC,IAAIrB,MAAMS,QAAQ,CAACC,aAAa,CAACO,MAAM,KAAK,GAAG;QAC7CC,OAAOlB,MAAMa,QAAQ,CAACb,MAAMS,QAAQ,CAACC,aAAa,CAAC,EAAE,CAAC,CAACY,KAAK;IAC9D,OAAO;QACLJ,OAAOlB,MAAMuB,WAAW,CAACvB,MAAMS,QAAQ,CAACC,aAAa,CAACO,MAAM;IAC9D;IAEA,qBACE,wDACE,oBAACO;QAAEC,KAAKxB;QAAMK,SAASA;QAASoB,qBAAmB;QAAOC,OAAO;YAAEC,QAAQ;QAAU;QAAGC,MAAK;qBAC3F,oBAACjC;QACCsB,MAAMA;QACNY,GAAG9B,MAAMS,QAAQ,CAACqB,CAAC;QACnBC,GAAG/B,MAAMgC,KAAK;QACdC,OAAOjC,MAAMkC,SAAS;QACtBC,YAAYnC,MAAMoC,cAAc;QAChCC,YAAYrC,MAAMS,QAAQ,CAAC6B,MAAM;QACjCC,UAAUvC,MAAMwC,YAAY;QAC5BrB,MAAMA;SAGTZ;AAGP,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/eventAnnotation/LabelLink.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { EventAnnotation } from '../../../types/EventAnnotation';\nimport { Textbox } from './Textbox';\nimport { getColorFromToken } from '../../../utilities/colors';\nimport { tokens } from '@fluentui/react-theme';\n\nexport interface LineDef extends EventAnnotation {\n  x: number;\n}\n\nexport interface LabelDef {\n  x: number;\n  aggregatedIdx: number[];\n  anchor: 'start' | 'end';\n}\n\ninterface LabelLinkProps {\n  lineDefs: LineDef[];\n  labelDef: LabelDef;\n  textY: number;\n  textWidth: number;\n  textLineHeight: number;\n  textFontSize: string;\n  textColor: string | undefined;\n  mergedLabel: (count: number) => string;\n}\n\nexport const LabelLink: React.FunctionComponent<LabelLinkProps> = props => {\n  const gRef = React.useRef<SVGGElement>(null);\n  const [showCard, setShowCard] = React.useState(false);\n  const onClick = () => setShowCard(true);\n\n  let callout: React.ReactNode = null;\n  if (showCard) {\n    const cards = props.labelDef.aggregatedIdx.map(i => props.lineDefs[i].onRenderCard!).filter(c => !!c);\n    if (cards.length > 0) {\n      callout = null;\n      // TODO - need to replace callout with popover\n      /*callout = {\n        /* <Callout\n          target={gRef.current}\n          // eslint-disable-next-line react/jsx-no-bind\n          onDismiss={onDismiss}\n          setInitialFocus={true}\n          role=\"dialog\"\n        >\n          <FocusZone isCircularNavigation={true} direction={FocusZoneDirection.vertical}>\n            <List<() => React.ReactNode>\n              items={cards}\n              // eslint-disable-next-line react/jsx-no-bind\n              onRenderCell={onRenderCell}\n            />\n          </FocusZone>\n        </Callout>\n      };*/\n    }\n  }\n\n  let text: string;\n  const fill: string | undefined = props.textColor\n    ? getColorFromToken(props.textColor, false)\n    : tokens.colorNeutralForeground1;\n\n  if (props.labelDef.aggregatedIdx.length === 1) {\n    text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;\n  } else {\n    text = props.mergedLabel(props.labelDef.aggregatedIdx.length);\n  }\n\n  return (\n    <>\n      <g ref={gRef} onClick={onClick} data-is-focusable={false} style={{ cursor: 'pointer' }} role=\"button\">\n        <Textbox\n          text={text}\n          x={props.labelDef.x}\n          y={props.textY}\n          width={props.textWidth}\n          lineHeight={props.textLineHeight}\n          textAnchor={props.labelDef.anchor}\n          fontSize={props.textFontSize}\n          fill={fill}\n        />\n      </g>\n      {callout}\n    </>\n  );\n};\n"],"names":["React","Textbox","getColorFromToken","tokens","LabelLink","props","gRef","useRef","showCard","setShowCard","useState","onClick","callout","cards","labelDef","aggregatedIdx","map","i","lineDefs","onRenderCard","filter","c","length","text","fill","textColor","colorNeutralForeground1","event","mergedLabel","g","ref","data-is-focusable","style","cursor","role","x","y","textY","width","textWidth","lineHeight","textLineHeight","textAnchor","anchor","fontSize","textFontSize"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,MAAM,QAAQ,wBAAwB;AAuB/C,OAAO,MAAMC,YAAqDC,CAAAA;IAChE,MAAMC,OAAON,MAAMO,MAAM,CAAc;IACvC,MAAM,CAACC,UAAUC,YAAY,GAAGT,MAAMU,QAAQ,CAAC;IAC/C,MAAMC,UAAU,IAAMF,YAAY;IAElC,IAAIG,UAA2B;IAC/B,IAAIJ,UAAU;QACZ,MAAMK,QAAQR,MAAMS,QAAQ,CAACC,aAAa,CAACC,GAAG,CAACC,CAAAA,IAAKZ,MAAMa,QAAQ,CAACD,EAAE,CAACE,YAAY,EAAGC,MAAM,CAACC,CAAAA,IAAK,CAAC,CAACA;QACnG,IAAIR,MAAMS,MAAM,GAAG,GAAG;YACpBV,UAAU;QACV,8CAA8C;QAC9C;;;;;;;;;;;;;;;;QAgBE,GACJ;IACF;IAEA,IAAIW;IACJ,MAAMC,OAA2BnB,MAAMoB,SAAS,GAC5CvB,kBAAkBG,MAAMoB,SAAS,EAAE,SACnCtB,OAAOuB,uBAAuB;IAElC,IAAIrB,MAAMS,QAAQ,CAACC,aAAa,CAACO,MAAM,KAAK,GAAG;QAC7CC,OAAOlB,MAAMa,QAAQ,CAACb,MAAMS,QAAQ,CAACC,aAAa,CAAC,EAAE,CAAC,CAACY,KAAK;IAC9D,OAAO;QACLJ,OAAOlB,MAAMuB,WAAW,CAACvB,MAAMS,QAAQ,CAACC,aAAa,CAACO,MAAM;IAC9D;IAEA,qBACE,wDACE,oBAACO;QAAEC,KAAKxB;QAAMK,SAASA;QAASoB,qBAAmB;QAAOC,OAAO;YAAEC,QAAQ;QAAU;QAAGC,MAAK;qBAC3F,oBAACjC;QACCsB,MAAMA;QACNY,GAAG9B,MAAMS,QAAQ,CAACqB,CAAC;QACnBC,GAAG/B,MAAMgC,KAAK;QACdC,OAAOjC,MAAMkC,SAAS;QACtBC,YAAYnC,MAAMoC,cAAc;QAChCC,YAAYrC,MAAMS,QAAQ,CAAC6B,MAAM;QACjCC,UAAUvC,MAAMwC,YAAY;QAC5BrB,MAAMA;SAGTZ;AAGP,EAAE"}

package/lib/components/LineChart/eventAnnotation/Textbox.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { select } from 'd3-selection';
 import { getSecureProps } from '../../../utilities/utilities';

package/lib/components/LineChart/eventAnnotation/Textbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/eventAnnotation/Textbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { select } from 'd3-selection';\nimport { getSecureProps } from '../../../utilities/utilities';\n\ninterface TextboxProps {\n  text: string;\n  width: number;\n  x: number;\n  y: number;\n  lineHeight: number;\n  textAnchor?: 'start' | 'middle' | 'end';\n  fontSize?: string;\n  fill?: string;\n}\n\nexport const Textbox: React.FunctionComponent<TextboxProps> = props => {\n  const textElementRef: React.RefObject<SVGTextElement> = React.useRef(null);\n\n  const wrapWords = () => {\n    if (!textElementRef.current) {\n      return;\n    }\n    const text = select(textElementRef.current);\n    const words = props.text.split(/\\s+/);\n    let line: string[] = [];\n    let tspan = text.append<SVGTSpanElement>('tspan');\n    let numLines = 0;\n\n    words.forEach(word => {\n      line.push(word);\n      tspan.text(line.join(' '));\n      const node = tspan.node();\n      if (node && node.getComputedTextLength() > props.width && line.length > 1) {\n        numLines++;\n        line.pop();\n        tspan.text(line.join(' '));\n        line = [word];\n        tspan = text.append<SVGTSpanElement>('tspan').text(word).attr('dy', props.lineHeight).attr('x', props.x);\n      }\n    });\n    // bottom aligns text\n    text.attr('dy', -numLines * props.lineHeight);\n\n    return () => {\n      text.selectAll('tspan').remove();\n    };\n  };\n  React.useEffect(wrapWords);\n\n  const { lineHeight, ...rest } = props;\n\n  return <text ref={textElementRef} {...getSecureProps(rest)} />;\n};\n"],"names":["React","select","getSecureProps","Textbox","props","textElementRef","useRef","wrapWords","current","text","words","split","line","tspan","append","numLines","forEach","word","push","join","node","getComputedTextLength","width","length","pop","attr","lineHeight","x","selectAll","remove","useEffect","rest","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,cAAc,QAAQ,+BAA+B;AAa9D,OAAO,MAAMC,UAAiDC,CAAAA;IAC5D,MAAMC,iBAAkDL,MAAMM,MAAM,CAAC;IAErE,MAAMC,YAAY;QAChB,IAAI,CAACF,eAAeG,OAAO,EAAE;YAC3B;QACF;QACA,MAAMC,OAAOR,OAAOI,eAAeG,OAAO;QAC1C,MAAME,QAAQN,MAAMK,IAAI,CAACE,KAAK,CAAC;QAC/B,IAAIC,OAAiB,EAAE;QACvB,IAAIC,QAAQJ,KAAKK,MAAM,CAAkB;QACzC,IAAIC,WAAW;QAEfL,MAAMM,OAAO,CAACC,CAAAA;YACZL,KAAKM,IAAI,CAACD;YACVJ,MAAMJ,IAAI,CAACG,KAAKO,IAAI,CAAC;YACrB,MAAMC,OAAOP,MAAMO,IAAI;YACvB,IAAIA,QAAQA,KAAKC,qBAAqB,KAAKjB,MAAMkB,KAAK,IAAIV,KAAKW,MAAM,GAAG,GAAG;gBACzER;gBACAH,KAAKY,GAAG;gBACRX,MAAMJ,IAAI,CAACG,KAAKO,IAAI,CAAC;gBACrBP,OAAO;oBAACK;iBAAK;gBACbJ,QAAQJ,KAAKK,MAAM,CAAkB,SAASL,IAAI,CAACQ,MAAMQ,IAAI,CAAC,MAAMrB,MAAMsB,UAAU,EAAED,IAAI,CAAC,KAAKrB,MAAMuB,CAAC;YACzG;QACF;QACA,qBAAqB;QACrBlB,KAAKgB,IAAI,CAAC,MAAM,CAACV,WAAWX,MAAMsB,UAAU;QAE5C,OAAO;YACLjB,KAAKmB,SAAS,CAAC,SAASC,MAAM;QAChC;IACF;IACA7B,MAAM8B,SAAS,CAACvB;IAEhB,MAAM,EAAEmB,UAAU,EAAE,GAAGK,MAAM,GAAG3B;IAEhC,qBAAO,oBAACK;QAAKuB,KAAK3B;QAAiB,GAAGH,eAAe6B,KAAK;;AAC5D,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/eventAnnotation/Textbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { select } from 'd3-selection';\nimport { getSecureProps } from '../../../utilities/utilities';\n\ninterface TextboxProps {\n  text: string;\n  width: number;\n  x: number;\n  y: number;\n  lineHeight: number;\n  textAnchor?: 'start' | 'middle' | 'end';\n  fontSize?: string;\n  fill?: string;\n}\n\nexport const Textbox: React.FunctionComponent<TextboxProps> = props => {\n  const textElementRef: React.RefObject<SVGTextElement> = React.useRef(null);\n\n  const wrapWords = () => {\n    if (!textElementRef.current) {\n      return;\n    }\n    const text = select(textElementRef.current);\n    const words = props.text.split(/\\s+/);\n    let line: string[] = [];\n    let tspan = text.append<SVGTSpanElement>('tspan');\n    let numLines = 0;\n\n    words.forEach(word => {\n      line.push(word);\n      tspan.text(line.join(' '));\n      const node = tspan.node();\n      if (node && node.getComputedTextLength() > props.width && line.length > 1) {\n        numLines++;\n        line.pop();\n        tspan.text(line.join(' '));\n        line = [word];\n        tspan = text.append<SVGTSpanElement>('tspan').text(word).attr('dy', props.lineHeight).attr('x', props.x);\n      }\n    });\n    // bottom aligns text\n    text.attr('dy', -numLines * props.lineHeight);\n\n    return () => {\n      text.selectAll('tspan').remove();\n    };\n  };\n  React.useEffect(wrapWords);\n\n  const { lineHeight, ...rest } = props;\n\n  return <text ref={textElementRef} {...getSecureProps(rest)} />;\n};\n"],"names":["React","select","getSecureProps","Textbox","props","textElementRef","useRef","wrapWords","current","text","words","split","line","tspan","append","numLines","forEach","word","push","join","node","getComputedTextLength","width","length","pop","attr","lineHeight","x","selectAll","remove","useEffect","rest","ref"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,cAAc,QAAQ,+BAA+B;AAa9D,OAAO,MAAMC,UAAiDC,CAAAA;IAC5D,MAAMC,iBAAkDL,MAAMM,MAAM,CAAC;IAErE,MAAMC,YAAY;QAChB,IAAI,CAACF,eAAeG,OAAO,EAAE;YAC3B;QACF;QACA,MAAMC,OAAOR,OAAOI,eAAeG,OAAO;QAC1C,MAAME,QAAQN,MAAMK,IAAI,CAACE,KAAK,CAAC;QAC/B,IAAIC,OAAiB,EAAE;QACvB,IAAIC,QAAQJ,KAAKK,MAAM,CAAkB;QACzC,IAAIC,WAAW;QAEfL,MAAMM,OAAO,CAACC,CAAAA;YACZL,KAAKM,IAAI,CAACD;YACVJ,MAAMJ,IAAI,CAACG,KAAKO,IAAI,CAAC;YACrB,MAAMC,OAAOP,MAAMO,IAAI;YACvB,IAAIA,QAAQA,KAAKC,qBAAqB,KAAKjB,MAAMkB,KAAK,IAAIV,KAAKW,MAAM,GAAG,GAAG;gBACzER;gBACAH,KAAKY,GAAG;gBACRX,MAAMJ,IAAI,CAACG,KAAKO,IAAI,CAAC;gBACrBP,OAAO;oBAACK;iBAAK;gBACbJ,QAAQJ,KAAKK,MAAM,CAAkB,SAASL,IAAI,CAACQ,MAAMQ,IAAI,CAAC,MAAMrB,MAAMsB,UAAU,EAAED,IAAI,CAAC,KAAKrB,MAAMuB,CAAC;YACzG;QACF;QACA,qBAAqB;QACrBlB,KAAKgB,IAAI,CAAC,MAAM,CAACV,WAAWX,MAAMsB,UAAU;QAE5C,OAAO;YACLjB,KAAKmB,SAAS,CAAC,SAASC,MAAM;QAChC;IACF;IACA7B,MAAM8B,SAAS,CAACvB;IAEhB,MAAM,EAAEmB,UAAU,EAAE,GAAGK,MAAM,GAAG3B;IAEhC,qBAAO,oBAACK;QAAKuB,KAAK3B;QAAiB,GAAGH,eAAe6B,KAAK;;AAC5D,EAAE"}

package/lib/components/LineChart/useLineChartStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';

package/lib/components/LineChart/useLineChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","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","Bkfmm31","jzqdnp","a6j6cd","ojy3ng","Bpvj6i6","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: getTooltipStyle(),\n    markerLabel: getMarkerLabelStyle(),\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAuB;AAC5E;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGxB,QAAA;EAAAO,OAAA;IAAAkB,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;EAAApC,WAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAkB,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAxC,UAAA;IAAAyC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGhC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEN,YAAY,CAACK,mBAAmB,CAACC,OAAO,EAAEiD,UAAU,CAACjD,OAAO,CAAC,yBAA0B,CAAC;IACjGC,UAAU,EAAEP,YAAY,CAACK,mBAAmB,CAACE,UAAU,EAAEgD,UAAU,CAAChD,UAAU,CAAC,4BAA6B,CAAC;IAC7GC,WAAW,EAAER,YAAY,CAACK,mBAAmB,CAACG,WAAW,EAAE+C,UAAU,CAAC/C,WAAW,CAAC,6BAA8B;EACpH,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","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","Bkfmm31","jzqdnp","a6j6cd","ojy3ng","Bpvj6i6","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: getTooltipStyle(),\n    markerLabel: getMarkerLabelStyle(),\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAuB;AAC5E;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGxB,QAAA;EAAAO,OAAA;IAAAkB,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;EAAApC,WAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAkB,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAxC,UAAA;IAAAyC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGhC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEN,YAAY,CAACK,mBAAmB,CAACC,OAAO,EAAEiD,UAAU,CAACjD,OAAO,CAAC,yBAA0B,CAAC;IACjGC,UAAU,EAAEP,YAAY,CAACK,mBAAmB,CAACE,UAAU,EAAEgD,UAAU,CAAChD,UAAU,CAAC,4BAA6B,CAAC;IAC7GC,WAAW,EAAER,YAAY,CAACK,mBAAmB,CAACG,WAAW,EAAE+C,UAAU,CAAC/C,WAAW,CAAC,6BAA8B;EACpH,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/LineChart/useLineChartStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';

package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: getTooltipStyle() as GriffelStyle,\n  markerLabel: getMarkerLabelStyle() as GriffelStyle,\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","stroke","colorNeutralBackground1","useLineChartStyles","props","baseStyles"],"mappings":"AAAA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACxE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB;AAE7E;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,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;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BO,SAASF;IACTI,aAAaL;IACbI,YAAY;QACViB,QAAQvB,OAAOwB,uBAAuB;QACtC,CAACvB,qBAAqB,EAAE;YACtBsB,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,qBAAqB,CAACC;IACjC,MAAMC,aAAaL;IACnB,OAAO;QACLjB,SAASN,aAAaK,oBAAoBC,OAAO,EAAEsB,WAAWtB,OAAO,CAAC,uBAAuB;QAC7FC,YAAYP,aAAaK,oBAAoBE,UAAU,EAAEqB,WAAWrB,UAAU,CAAC,0BAA0B;QACzGC,aAAaR,aAAaK,oBAAoBG,WAAW,EAAEoB,WAAWpB,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: getTooltipStyle() as GriffelStyle,\n  markerLabel: getMarkerLabelStyle() as GriffelStyle,\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","stroke","colorNeutralBackground1","useLineChartStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACxE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB;AAE7E;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,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;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BO,SAASF;IACTI,aAAaL;IACbI,YAAY;QACViB,QAAQvB,OAAOwB,uBAAuB;QACtC,CAACvB,qBAAqB,EAAE;YACtBsB,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,qBAAqB,CAACC;IACjC,MAAMC,aAAaL;IACnB,OAAO;QACLjB,SAASN,aAAaK,oBAAoBC,OAAO,EAAEsB,WAAWtB,OAAO,CAAC,uBAAuB;QAC7FC,YAAYP,aAAaK,oBAAoBE,UAAU,EAAEqB,WAAWrB,UAAU,CAAC,0BAA0B;QACzGC,aAAaR,aAAaK,oBAAoBG,WAAW,EAAEoB,WAAWpB,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}

package/lib/components/ResponsiveContainer/ResponsiveContainer.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getWindow } from '../../utilities/getWindow';
 import { useResponsiveChildStyles } from './useResponsiveChildStyles.styles';

package/lib/components/ResponsiveContainer/ResponsiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ResponsiveContainer/ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getWindow } from '../../utilities/getWindow';\nimport { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';\nimport { useResponsiveChildStyles } from './useResponsiveChildStyles.styles';\nimport { mergeClasses } from '@griffel/react';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n  const childClasses = useResponsiveChildStyles();\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n\n  React.useEffect(() => {\n    const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n    let animationFrameId: number | undefined;\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window && _window.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const chartContent = React.useMemo(() => {\n    let calculatedWidth = size.containerWidth;\n    let calculatedHeight = size.containerHeight;\n\n    if (typeof props.aspect === 'number' && props.aspect > 0) {\n      if (calculatedWidth) {\n        calculatedHeight = calculatedWidth / props.aspect;\n      } else if (calculatedHeight) {\n        calculatedWidth = calculatedHeight * props.aspect;\n      }\n\n      if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n        calculatedHeight = props.maxHeight;\n      }\n    }\n\n    return React.Children.map(props.children, child => {\n      return React.cloneElement<ResponsiveChildProps>(child, {\n        width: calculatedWidth,\n        height: calculatedHeight,\n        // For SankeyChart\n        shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n        styles: {\n          root: mergeClasses(child.props.styles?.root, childClasses.root),\n          chartWrapper: mergeClasses(child.props.styles?.chartWrapper, childClasses.chartWrapper),\n          chart: mergeClasses(child.props.styles?.chart, childClasses.chart),\n        },\n      });\n    });\n  }, [size, props.aspect, props.maxHeight, props.children]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: props.width ?? '100%',\n        height: props.height ?? '100%',\n        minWidth: props.minWidth,\n        minHeight: props.minHeight,\n        maxHeight: props.maxHeight,\n      }}\n    >\n      {chartContent}\n    </div>\n  );\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["React","getWindow","useResponsiveChildStyles","mergeClasses","ResponsiveContainer","props","containerRef","useRef","onResizeRef","childClasses","size","setSize","useState","current","onResize","useEffect","_window","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","chartContent","useMemo","calculatedWidth","calculatedHeight","aspect","maxHeight","Children","map","children","child","cloneElement","shouldResize","styles","root","chartWrapper","chart","div","ref","style","minWidth","minHeight","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ResponsiveContainer/ResponsiveContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getWindow } from '../../utilities/getWindow';\nimport { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';\nimport { useResponsiveChildStyles } from './useResponsiveChildStyles.styles';\nimport { mergeClasses } from '@griffel/react';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n  const childClasses = useResponsiveChildStyles();\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n\n  React.useEffect(() => {\n    const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n    let animationFrameId: number | undefined;\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window && _window.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const chartContent = React.useMemo(() => {\n    let calculatedWidth = size.containerWidth;\n    let calculatedHeight = size.containerHeight;\n\n    if (typeof props.aspect === 'number' && props.aspect > 0) {\n      if (calculatedWidth) {\n        calculatedHeight = calculatedWidth / props.aspect;\n      } else if (calculatedHeight) {\n        calculatedWidth = calculatedHeight * props.aspect;\n      }\n\n      if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n        calculatedHeight = props.maxHeight;\n      }\n    }\n\n    return React.Children.map(props.children, child => {\n      return React.cloneElement<ResponsiveChildProps>(child, {\n        width: calculatedWidth,\n        height: calculatedHeight,\n        // For SankeyChart\n        shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n        styles: {\n          root: mergeClasses(child.props.styles?.root, childClasses.root),\n          chartWrapper: mergeClasses(child.props.styles?.chartWrapper, childClasses.chartWrapper),\n          chart: mergeClasses(child.props.styles?.chart, childClasses.chart),\n        },\n      });\n    });\n  }, [size, props.aspect, props.maxHeight, props.children]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: props.width ?? '100%',\n        height: props.height ?? '100%',\n        minWidth: props.minWidth,\n        minHeight: props.minHeight,\n        maxHeight: props.maxHeight,\n      }}\n    >\n      {chartContent}\n    </div>\n  );\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["React","getWindow","useResponsiveChildStyles","mergeClasses","ResponsiveContainer","props","containerRef","useRef","onResizeRef","childClasses","size","setSize","useState","current","onResize","useEffect","_window","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","chartContent","useMemo","calculatedWidth","calculatedHeight","aspect","maxHeight","Children","map","children","child","cloneElement","shouldResize","styles","root","chartWrapper","chart","div","ref","style","minWidth","minHeight","displayName"],"mappings":"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"}

package/lib/components/ResponsiveContainer/useResponsiveChildStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 export const responsiveChildClassNames = {
   root: 'fui-charts-resp-child__root',

package/lib/components/ResponsiveContainer/useResponsiveChildStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","responsiveChildClassNames","root","chartWrapper","chart","useStyles","a9b677","Bqenvij","d","useResponsiveChildStyles","baseStyles"],"sources":["useResponsiveChildStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const responsiveChildClassNames = {\n    root: 'fui-charts-resp-child__root',\n    chartWrapper: 'fui-charts-resp-child__chartWrapper',\n    chart: 'fui-charts-resp-child__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        height: '100%'\n    },\n    chartWrapper: {\n        width: '100%'\n    },\n    chart: {\n        // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n        // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n        width: '100%'\n    }\n});\nexport const useResponsiveChildStyles = ()=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n        chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n        chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,6BAA6B;EACnCC,YAAY,EAAE,qCAAqC;EACnDC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAG,IAAA;IAAAI,MAAA;IAAAC,OAAA;EAAA;EAAAJ,YAAA;IAAAG,MAAA;EAAA;EAAAF,KAAA;IAAAE,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAajB,CAAC;AACF,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,KAAI;EACxC,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEF,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEQ,UAAU,CAACR,IAAI,CAAC;IACnEC,YAAY,EAAEH,YAAY,CAACC,yBAAyB,CAACE,YAAY,EAAEO,UAAU,CAACP,YAAY,CAAC;IAC3FC,KAAK,EAAEJ,YAAY,CAACC,yBAAyB,CAACG,KAAK,EAAEM,UAAU,CAACN,KAAK;EACzE,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","responsiveChildClassNames","root","chartWrapper","chart","useStyles","a9b677","Bqenvij","d","useResponsiveChildStyles","baseStyles"],"sources":["useResponsiveChildStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const responsiveChildClassNames = {\n    root: 'fui-charts-resp-child__root',\n    chartWrapper: 'fui-charts-resp-child__chartWrapper',\n    chart: 'fui-charts-resp-child__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        height: '100%'\n    },\n    chartWrapper: {\n        width: '100%'\n    },\n    chart: {\n        // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n        // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n        width: '100%'\n    }\n});\nexport const useResponsiveChildStyles = ()=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n        chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n        chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart)\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,6BAA6B;EACnCC,YAAY,EAAE,qCAAqC;EACnDC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAG,IAAA;IAAAI,MAAA;IAAAC,OAAA;EAAA;EAAAJ,YAAA;IAAAG,MAAA;EAAA;EAAAF,KAAA;IAAAE,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAajB,CAAC;AACF,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,KAAI;EACxC,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEF,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEQ,UAAU,CAACR,IAAI,CAAC;IACnEC,YAAY,EAAEH,YAAY,CAACC,yBAAyB,CAACE,YAAY,EAAEO,UAAU,CAACP,YAAY,CAAC;IAC3FC,KAAK,EAAEJ,YAAY,CAACC,yBAAyB,CAACG,KAAK,EAAEM,UAAU,CAACN,KAAK;EACzE,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/ResponsiveContainer/useResponsiveChildStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 export const responsiveChildClassNames = {
     root: 'fui-charts-resp-child__root',

package/lib/components/ResponsiveContainer/useResponsiveChildStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ResponsiveContainer/useResponsiveChildStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { ResponsiveChildStyles } from './ResponsiveContainer.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const responsiveChildClassNames: SlotClassNames<ResponsiveChildStyles> = {\n  root: 'fui-charts-resp-child__root',\n  chartWrapper: 'fui-charts-resp-child__chartWrapper',\n  chart: 'fui-charts-resp-child__chart',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    height: '100%',\n  },\n  chartWrapper: {\n    width: '100%',\n  },\n  chart: {\n    // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n    // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n    width: '100%',\n  },\n});\n\nexport const useResponsiveChildStyles = (): ResponsiveChildStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n    chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n    chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","responsiveChildClassNames","root","chartWrapper","chart","useStyles","width","height","useResponsiveChildStyles","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAAmE;IAC9EC,MAAM;IACNC,cAAc;IACdC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BG,MAAM;QACJI,OAAO;QACPC,QAAQ;IACV;IACAJ,cAAc;QACZG,OAAO;IACT;IACAF,OAAO;QACL,wGAAwG;QACxG,2GAA2G;QAC3GE,OAAO;IACT;AACF;AAEA,OAAO,MAAME,2BAA2B;IACtC,MAAMC,aAAaJ;IAEnB,OAAO;QACLH,MAAMF,aAAaC,0BAA0BC,IAAI,EAAEO,WAAWP,IAAI;QAClEC,cAAcH,aAAaC,0BAA0BE,YAAY,EAAEM,WAAWN,YAAY;QAC1FC,OAAOJ,aAAaC,0BAA0BG,KAAK,EAAEK,WAAWL,KAAK;IACvE;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ResponsiveContainer/useResponsiveChildStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { ResponsiveChildStyles } from './ResponsiveContainer.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const responsiveChildClassNames: SlotClassNames<ResponsiveChildStyles> = {\n  root: 'fui-charts-resp-child__root',\n  chartWrapper: 'fui-charts-resp-child__chartWrapper',\n  chart: 'fui-charts-resp-child__chart',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    height: '100%',\n  },\n  chartWrapper: {\n    width: '100%',\n  },\n  chart: {\n    // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n    // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n    width: '100%',\n  },\n});\n\nexport const useResponsiveChildStyles = (): ResponsiveChildStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n    chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n    chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","responsiveChildClassNames","root","chartWrapper","chart","useStyles","width","height","useResponsiveChildStyles","baseStyles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAAmE;IAC9EC,MAAM;IACNC,cAAc;IACdC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BG,MAAM;QACJI,OAAO;QACPC,QAAQ;IACV;IACAJ,cAAc;QACZG,OAAO;IACT;IACAF,OAAO;QACL,wGAAwG;QACxG,2GAA2G;QAC3GE,OAAO;IACT;AACF;AAEA,OAAO,MAAME,2BAA2B;IACtC,MAAMC,aAAaJ;IAEnB,OAAO;QACLH,MAAMF,aAAaC,0BAA0BC,IAAI,EAAEO,WAAWP,IAAI;QAClEC,cAAcH,aAAaC,0BAA0BE,YAAY,EAAEM,WAAWN,YAAY;QAC1FC,OAAOJ,aAAaC,0BAA0BG,KAAK,EAAEK,WAAWL,KAAK;IACvE;AACF,EAAE"}

package/lib/components/ResponsiveContainer/withResponsiveContainer.js

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react';
 import { ResponsiveContainer } from './ResponsiveContainer';
 /**

package/lib/components/ResponsiveContainer/withResponsiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ResponsiveContainer/withResponsiveContainer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { ResponsiveContainer } from './ResponsiveContainer';\nimport { ResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * An HOC to update wrapped component on container resize.\n * {@docCategory ResponsiveContainer}\n */\nexport function withResponsiveContainer<TProps extends Omit<ResponsiveContainerProps, 'children'>>(\n  WrappedComponent: React.ComponentType<TProps>,\n): React.FC<TProps> {\n  const ComponentWithResponsiveContainer: React.FC<TProps> = ({\n    aspect,\n    width,\n    height,\n    minWidth,\n    minHeight,\n    maxHeight,\n    onResize,\n    ...restProps\n  }) => {\n    return (\n      <ResponsiveContainer\n        aspect={aspect}\n        width={width}\n        height={height}\n        minWidth={minWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        onResize={onResize}\n      >\n        <WrappedComponent {...(restProps as any)} />\n      </ResponsiveContainer>\n    );\n  };\n\n  return ComponentWithResponsiveContainer;\n}\n"],"names":["React","ResponsiveContainer","withResponsiveContainer","WrappedComponent","ComponentWithResponsiveContainer","aspect","width","height","minWidth","minHeight","maxHeight","onResize","restProps"],"mappings":"AAAA,qDAAqD,GACrD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,wBAAwB;AAG5D;;;CAGC,GACD,OAAO,SAASC,wBACdC,gBAA6C;IAE7C,MAAMC,mCAAqD,CAAC,EAC1DC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ;QACC,qBACE,oBAACX;YACCI,QAAQA;YACRC,OAAOA;YACPC,QAAQA;YACRC,UAAUA;YACVC,WAAWA;YACXC,WAAWA;YACXC,UAAUA;yBAEV,oBAACR,kBAAsBS;IAG7B;IAEA,OAAOR;AACT"}
+{"version":3,"sources":["../src/components/ResponsiveContainer/withResponsiveContainer.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { ResponsiveContainer } from './ResponsiveContainer';\nimport { ResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * An HOC to update wrapped component on container resize.\n * {@docCategory ResponsiveContainer}\n */\nexport function withResponsiveContainer<TProps extends Omit<ResponsiveContainerProps, 'children'>>(\n  WrappedComponent: React.ComponentType<TProps>,\n): React.FC<TProps> {\n  const ComponentWithResponsiveContainer: React.FC<TProps> = ({\n    aspect,\n    width,\n    height,\n    minWidth,\n    minHeight,\n    maxHeight,\n    onResize,\n    ...restProps\n  }) => {\n    return (\n      <ResponsiveContainer\n        aspect={aspect}\n        width={width}\n        height={height}\n        minWidth={minWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        onResize={onResize}\n      >\n        <WrappedComponent {...(restProps as any)} />\n      </ResponsiveContainer>\n    );\n  };\n\n  return ComponentWithResponsiveContainer;\n}\n"],"names":["React","ResponsiveContainer","withResponsiveContainer","WrappedComponent","ComponentWithResponsiveContainer","aspect","width","height","minWidth","minHeight","maxHeight","onResize","restProps"],"mappings":"AAAA;AAEA,qDAAqD,GACrD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,wBAAwB;AAG5D;;;CAGC,GACD,OAAO,SAASC,wBACdC,gBAA6C;IAE7C,MAAMC,mCAAqD,CAAC,EAC1DC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ;QACC,qBACE,oBAACX;YACCI,QAAQA;YACRC,OAAOA;YACPC,QAAQA;YACRC,UAAUA;YACVC,WAAWA;YACXC,WAAWA;YACXC,UAAUA;yBAEV,oBAACR,kBAAsBS;IAG7B;IAEA,OAAOR;AACT"}

package/lib/components/SankeyChart/SankeyChart.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { tokens } from '@fluentui/react-theme';