@fluentui/react-charts 9.1.10 → 9.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["Legends.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\n/**\n * @public\n * Legends styles\n * {@docCategory Legends}\n */\nexport interface LegendsStyles {\n  /**\n   * Style set for the root of the legend component\n   */\n  root?: string;\n\n  /**\n   * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n   */\n  legend?: string;\n\n  /**\n   * Style set for the rectangle that represents a legend\n   */\n  rect?: string;\n\n  /**\n   * styles set for the shape that represents a legend\n   */\n  shape?: string;\n\n  /**\n   * Style set for the triangle that represents a legend\n   */\n  triangle?: string;\n\n  /**\n   * Style for the legend text\n   */\n  text?: string;\n\n  /**\n   * Style for the legend text\n   */\n  hoverChange?: string;\n\n  /**\n   * Style for the area that is resizable\n   */\n  resizableArea?: string;\n}\n\n/**\n * @public\n * ILegend interface\n * {@docCategory Legends}\n */\nexport interface Legend {\n  /**\n   * Defines the title of the legend\n   */\n  title: string;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  action?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverAction?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon moving the mouse away from the legend\n   */\n  onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n  /**\n   * The color for the legend\n   */\n  color: string;\n\n  /**\n   * The opacity of the legend color\n   */\n  opacity?: number;\n\n  /**\n   * The shape for the legend\n   */\n  shape?: LegendShape;\n\n  /**\n   * Indicated whether or not to apply stripe pattern\n   */\n  stripePattern?: boolean;\n\n  /**\n   * Indicates if the legend belongs to a line in the Bar Chart\n   */\n  isLineLegendInBarChart?: boolean;\n\n  /*\n   *  native button props for the legend button\n   */\n  nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * @public\n * Legend style properties\n * {@docCategory Legends}\n */\nexport interface LegendStyleProps {\n  className?: string;\n  colorOnSelectedState?: string;\n  borderColor?: string;\n  opacity?: number;\n  overflow?: boolean;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\n/**\n * @public\n * Legend properties\n * {@docCategory Legends}\n */\nexport interface LegendsProps {\n  /**\n   * Prop that takes list of legends\n   */\n  legends: Legend[];\n\n  /**\n   * Additional CSS class(es) to apply to the legneds component.\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LegendsStyles;\n\n  /**\n   * This prop makes the legends component align itself to the center in the container it is sitting in\n   */\n  centerLegends?: boolean;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledWrapLines?: boolean;\n\n  /**\n   * style for the overflow component\n   */\n  overflowStyles?: React.CSSProperties;\n\n  /**\n   * text for overflow legends string\n   */\n  overflowText?: string;\n\n  /**\n   * prop that decides if legends are focusable\n   * @default true\n   */\n  allowFocusOnLegends?: boolean;\n\n  /**\n   * prop that decide if we can select multiple legends or single legend at a time\n   * @default false\n   */\n  canSelectMultipleLegends?: boolean;\n\n  /**\n   * Callback issued when the selected option changes.\n   */\n  onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;\n\n  /**\n   * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when\n   * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegends instead.\n   *\n   * @see selectedLegends for setting the selected legends in controlled mode.\n   * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.\n   */\n  defaultSelectedLegends?: string[];\n\n  /**\n   * Key that will be initially used to set selected item. This prop is used for single-select scenarios when\n   * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegend instead.\n   *\n   * @see selectedLegend for setting the selected legend in controlled mode.\n   * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.\n   */\n  defaultSelectedLegend?: string;\n\n  /**\n   * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is\n   * true. For single-select, use selectedLegend.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.\n   * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.\n   */\n  selectedLegends?: string[];\n\n  /**\n   * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is\n   * false or unspecified. For multi-select, use selectedLegends.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.\n   * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.\n   */\n  selectedLegend?: string;\n\n  /**\n   * The shape for the legend.\n   */\n  shape?: LegendShape;\n}\n\n/**\n * @public\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Legends/Legends.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\n/**\n * @public\n * Legends styles\n * {@docCategory Legends}\n */\nexport interface LegendsStyles {\n  /**\n   * Style set for the root of the legend component\n   */\n  root?: string;\n\n  /**\n   * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n   */\n  legend?: string;\n\n  /**\n   * Style set for the rectangle that represents a legend\n   */\n  rect?: string;\n\n  /**\n   * styles set for the shape that represents a legend\n   */\n  shape?: string;\n\n  /**\n   * Style set for the triangle that represents a legend\n   */\n  triangle?: string;\n\n  /**\n   * Style for the legend text\n   */\n  text?: string;\n\n  /**\n   * Style for the legend text\n   */\n  hoverChange?: string;\n\n  /**\n   * Style for the area that is resizable\n   */\n  resizableArea?: string;\n\n  /*\n   * Style for the container that holds the legend and any optional JSX annotation from client is used\n   */\n  legendContainer?: string;\n\n  /**\n   * Style for the annotation that is used in the legend\n   */\n  annotation?: string;\n}\n\n/**\n * @public\n * ILegend interface\n * {@docCategory Legends}\n */\nexport interface Legend {\n  /**\n   * Defines the title of the legend\n   */\n  title: string;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  action?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverAction?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon moving the mouse away from the legend\n   */\n  onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n  /**\n   * The color for the legend\n   */\n  color: string;\n\n  /**\n   * The opacity of the legend color\n   */\n  opacity?: number;\n\n  /**\n   * The shape for the legend\n   */\n  shape?: LegendShape;\n\n  /**\n   * Indicated whether or not to apply stripe pattern\n   */\n  stripePattern?: boolean;\n\n  /**\n   * Indicates if the legend belongs to a line in the Bar Chart\n   */\n  isLineLegendInBarChart?: boolean;\n\n  /*\n   *  native button props for the legend button\n   */\n  nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n  /**\n   * The annotation for the legend, function returning a React node\n   */\n  legendAnnotation?: () => React.ReactNode;\n}\n\n/**\n * @public\n * Legend style properties\n * {@docCategory Legends}\n */\nexport interface LegendStyleProps {\n  className?: string;\n  colorOnSelectedState?: string;\n  borderColor?: string;\n  opacity?: number;\n  overflow?: boolean;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\n/**\n * @public\n * Legend properties\n * {@docCategory Legends}\n */\nexport interface LegendsProps {\n  /**\n   * Prop that takes list of legends\n   */\n  legends: Legend[];\n\n  /**\n   * Additional CSS class(es) to apply to the legneds component.\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LegendsStyles;\n\n  /**\n   * This prop makes the legends component align itself to the center in the container it is sitting in\n   */\n  centerLegends?: boolean;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledWrapLines?: boolean;\n\n  /**\n   * style for the overflow component\n   */\n  overflowStyles?: React.CSSProperties;\n\n  /**\n   * text for overflow legends string\n   */\n  overflowText?: string;\n\n  /**\n   * prop that decides if legends are focusable\n   * @default true\n   */\n  allowFocusOnLegends?: boolean;\n\n  /**\n   * prop that decide if we can select multiple legends or single legend at a time\n   * @default false\n   */\n  canSelectMultipleLegends?: boolean;\n\n  /**\n   * Callback issued when the selected option changes.\n   */\n  onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;\n\n  /**\n   * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when\n   * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegends instead.\n   *\n   * @see selectedLegends for setting the selected legends in controlled mode.\n   * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.\n   */\n  defaultSelectedLegends?: string[];\n\n  /**\n   * Key that will be initially used to set selected item. This prop is used for single-select scenarios when\n   * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegend instead.\n   *\n   * @see selectedLegend for setting the selected legend in controlled mode.\n   * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.\n   */\n  defaultSelectedLegend?: string;\n\n  /**\n   * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is\n   * true. For single-select, use selectedLegend.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.\n   * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.\n   */\n  selectedLegends?: string[];\n\n  /**\n   * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is\n   * false or unspecified. For multi-select, use selectedLegends.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.\n   * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.\n   */\n  selectedLegend?: string;\n\n  /**\n   * The shape for the legend.\n   */\n  shape?: LegendShape;\n\n  /**\n   * Callback to access the public methods and properties of the component.\n   */\n  legendRef?: React.RefObject<LegendContainer>;\n}\n\n/**\n * @public\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n\n/**\n * {@docCategory Legends}\n */\nexport interface LegendContainer {\n  toSVG: (\n    svgWidth: number,\n    isRTL?: boolean,\n  ) => {\n    node: SVGGElement | null;\n    width: number;\n    height: number;\n  };\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/Legends/OverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["OverflowMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { useOverflowMenu } from '@fluentui/react-overflow';\n\nexport const OverflowMenu: React.FC<{ itemIds: string[]; title: string; items: JSX.Element[] }> = ({\n  itemIds,\n  title,\n  items,\n}) => {\n  const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();\n  let displayLabel = title;\n  displayLabel = title === '' ? `+${overflowCount} items` : `+${overflowCount} ${title}`;\n\n  if (!isOverflowing) {\n    return null;\n  }\n  const remainingItemsCount = itemIds.length - overflowCount;\n  const menuList = [];\n  for (let i = remainingItemsCount; i < itemIds.length; i++) {\n    menuList.push(\n      <MenuItem tabIndex={-1} key={i}>\n        {items[i]}\n      </MenuItem>,\n    );\n  }\n  return (\n    <Menu>\n      <MenuTrigger disableButtonEnhancement>\n        <MenuButton ref={ref}>{displayLabel}</MenuButton>\n      </MenuTrigger>\n\n      <MenuPopover>\n        <MenuList>{menuList}</MenuList>\n      </MenuPopover>\n    </Menu>\n  );\n};\n"],"names":["React","Menu","MenuTrigger","MenuPopover","MenuList","MenuItem","MenuButton","useOverflowMenu","OverflowMenu","itemIds","title","items","ref","overflowCount","isOverflowing","displayLabel","remainingItemsCount","length","menuList","i","push","tabIndex","key","disableButtonEnhancement"],"mappings":";;;;+BAKaQ;;;;;;;iEALU,QAAQ;2BACoC,uBAAuB;6BAC/D,yBAAyB;+BACpB,2BAA2B;AAEpD,qBAA2F,CAAC,EACjGC,OAAO,EACPC,KAAK,EACLC,KAAK,EACN;IACC,MAAM,EAAEC,GAAG,EAAEC,aAAa,EAAEC,aAAa,EAAE,OAAGP,8BAAAA;IAC9C,IAAIQ,eAAeL;IACnBK,eAAeL,UAAU,KAAK,CAAC,CAAC,EAAEG,cAAc,MAAM,CAAC,GAAG,CAAC,CAAC,EAAEA,cAAc,CAAC,EAAEH,OAAO;IAEtF,IAAI,CAACI,eAAe;QAClB,OAAO;IACT;IACA,MAAME,sBAAsBP,QAAQQ,MAAM,GAAGJ;IAC7C,MAAMK,WAAW,EAAE;IACnB,IAAK,IAAIC,IAAIH,qBAAqBG,IAAIV,QAAQQ,MAAM,EAAEE,IAAK;QACzDD,SAASE,IAAI,CAAA,WAAA,GACX,OAAA,aAAA,CAACf,mBAAAA,EAAAA;YAASgB,UAAU,CAAC;YAAGC,KAAKH;WAC1BR,KAAK,CAACQ,EAAE;IAGf;IACA,OAAA,WAAA,GACE,OAAA,aAAA,CAAClB,eAAAA,EAAAA,MAAAA,WAAAA,GACC,OAAA,aAAA,CAACC,sBAAAA,EAAAA;QAAYqB,0BAAAA;qBACX,OAAA,aAAA,CAACjB,uBAAAA,EAAAA;QAAWM,KAAKA;OAAMG,gBAAAA,WAAAA,GAGzB,OAAA,aAAA,CAACZ,sBAAAA,EAAAA,MAAAA,WAAAA,GACC,OAAA,aAAA,CAACC,mBAAAA,EAAAA,MAAUc;AAInB,EAAE"}
+{"version":3,"sources":["../src/components/Legends/OverflowMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { useOverflowMenu } from '@fluentui/react-overflow';\n\nexport const OverflowMenu: React.FC<{\n  itemIds: string[];\n  title: string;\n  items: // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSX.Element[];\n}> = ({ itemIds, title, items }) => {\n  const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();\n  let displayLabel = title;\n  displayLabel = title === '' ? `+${overflowCount} items` : `+${overflowCount} ${title}`;\n\n  if (!isOverflowing) {\n    return null;\n  }\n  const remainingItemsCount = itemIds.length - overflowCount;\n  const menuList = [];\n  for (let i = remainingItemsCount; i < itemIds.length; i++) {\n    menuList.push(\n      <MenuItem tabIndex={-1} key={i}>\n        {items[i]}\n      </MenuItem>,\n    );\n  }\n  return (\n    <Menu>\n      <MenuTrigger disableButtonEnhancement>\n        <MenuButton ref={ref}>{displayLabel}</MenuButton>\n      </MenuTrigger>\n\n      <MenuPopover>\n        <MenuList>{menuList}</MenuList>\n      </MenuPopover>\n    </Menu>\n  );\n};\n"],"names":["React","Menu","MenuTrigger","MenuPopover","MenuList","MenuItem","MenuButton","useOverflowMenu","OverflowMenu","itemIds","title","items","ref","overflowCount","isOverflowing","displayLabel","remainingItemsCount","length","menuList","i","push","tabIndex","key","disableButtonEnhancement"],"mappings":";;;;+BAKaQ;;;;;;;iEALU,QAAQ;2BACoC,uBAAuB;6BAC/D,yBAAyB;+BACpB,2BAA2B;AAEpD,qBAKF,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,KAAK,EAAE;IAC7B,MAAM,EAAEC,GAAG,EAAEC,aAAa,EAAEC,aAAa,EAAE,OAAGP,8BAAAA;IAC9C,IAAIQ,eAAeL;IACnBK,eAAeL,UAAU,KAAK,CAAC,CAAC,EAAEG,cAAc,MAAM,CAAC,GAAG,CAAC,CAAC,EAAEA,cAAc,CAAC,EAAEH,OAAO;IAEtF,IAAI,CAACI,eAAe;QAClB,OAAO;IACT;IACA,MAAME,sBAAsBP,QAAQQ,MAAM,GAAGJ;IAC7C,MAAMK,WAAW,EAAE;IACnB,IAAK,IAAIC,IAAIH,qBAAqBG,IAAIV,QAAQQ,MAAM,EAAEE,IAAK;QACzDD,SAASE,IAAI,CAAA,WAAA,GACX,OAAA,aAAA,CAACf,mBAAAA,EAAAA;YAASgB,UAAU,CAAC;YAAGC,KAAKH;WAC1BR,KAAK,CAACQ,EAAE;IAGf;IACA,OAAA,WAAA,GACE,OAAA,aAAA,CAAClB,eAAAA,EAAAA,MAAAA,WAAAA,GACC,OAAA,aAAA,CAACC,sBAAAA,EAAAA;QAAYqB,0BAAAA;qBACX,OAAA,aAAA,CAACjB,uBAAAA,EAAAA;QAAWM,KAAKA;OAAMG,gBAAAA,WAAAA,GAGzB,OAAA,aAAA,CAACZ,sBAAAA,EAAAA,MAAAA,WAAAA,GACC,OAAA,aAAA,CAACC,mBAAAA,EAAAA,MAAUc;AAInB,EAAE"}

package/lib-commonjs/components/Legends/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Legends';\nexport * from './Legends.types';\nexport * from './shape';\n"],"names":[],"mappings":";;;;;uBAAc,YAAY;uBACZ,kBAAkB;uBAClB,UAAU"}
+{"version":3,"sources":["../src/components/Legends/index.ts"],"sourcesContent":["export * from './Legends';\nexport * from './Legends.types';\nexport * from './shape';\n"],"names":[],"mappings":";;;;;uBAAc,YAAY;uBACZ,kBAAkB;uBAClB,UAAU"}

package/lib-commonjs/components/Legends/shape.js.map

@@ -1 +1 @@
-{"version":3,"sources":["shape.tsx"],"sourcesContent":["import * as React from 'react';\nimport { LegendShape } from './Legends.types';\nimport { CustomPoints, Points, getSecureProps } from '../../utilities/utilities';\n\nexport interface ShapeProps {\n  svgProps: React.SVGAttributes<SVGElement>;\n  pathProps: React.SVGAttributes<SVGPathElement>;\n  shape: LegendShape;\n  classNameForNonSvg?: string;\n  style?: React.CSSProperties | undefined;\n}\n\ntype PointPathType = {\n  [key: string]: string;\n};\n\nconst pointPath: PointPathType = {\n  [`${Points[Points.circle]}`]: 'M1 6 A5 5 0 1 0  12 6 M1 6 A5 5 0 0 1  12 6',\n  [`${Points[Points.square]}`]: 'M1 1 L12 1 L12 12  L1 12 L1 1 Z',\n  [`${Points[Points.triangle]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n  [`${Points[Points.pyramid]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n  [`${Points[Points.diamond]}`]: 'M2 2 L10 2 L10 10  L2 10 L2 2 Z',\n  [`${Points[Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z',\n  [`${Points[Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',\n  [`${Points[Points.octagon]}`]:\n    'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',\n  [`${CustomPoints[CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13',\n};\n\nexport const Shape: React.FunctionComponent<ShapeProps> = React.forwardRef<HTMLDivElement, ShapeProps>(\n  ({ svgProps, pathProps, shape, classNameForNonSvg, style }, forwardedRef) => {\n    if (Object.keys(pointPath).indexOf(shape) === -1) {\n      return <div className={classNameForNonSvg} style={style} />;\n    }\n    return (\n      <svg\n        width={14}\n        height={14}\n        viewBox={'-1 -1 14 14'}\n        {...getSecureProps(svgProps)}\n        transform={`rotate(${\n          shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0\n        }, 0, 0)`}\n        style={{\n          width: '14px',\n          height: '14px',\n        }}\n      >\n        <path d={pointPath[shape]} {...getSecureProps(pathProps)} />\n      </svg>\n    );\n  },\n);\n"],"names":["React","CustomPoints","Points","getSecureProps","pointPath","circle","square","triangle","pyramid","diamond","hexagon","pentagon","octagon","dottedLine","Shape","forwardRef","svgProps","pathProps","shape","classNameForNonSvg","style","forwardedRef","Object","keys","indexOf","div","className","svg","width","height","viewBox","transform","path","d"],"mappings":";;;;+BA6Bac;;;;;;;iEA7BU,QAAQ;2BAEsB,4BAA4B;AAcjF,MAAMV,YAA2B;IAC/B,CAAC,GAAGF,iBAAM,CAACA,iBAAAA,CAAOG,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGH,iBAAM,CAACA,iBAAAA,CAAOI,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGJ,iBAAM,CAACA,iBAAAA,CAAOK,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGL,iBAAM,CAACA,iBAAAA,CAAOM,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGN,iBAAM,CAACA,iBAAAA,CAAOO,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGP,iBAAM,CAACA,iBAAAA,CAAOQ,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGR,iBAAM,CAACA,iBAAAA,CAAOS,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGT,iBAAM,CAACA,iBAAAA,CAAOU,OAAO,CAAC,EAAE,CAAC,EAC3B;IACF,CAAC,GAAGX,uBAAY,CAACA,uBAAAA,CAAaY,UAAU,CAAC,EAAE,CAAC,EAAE;AAChD;AAEO,cAAMC,WAAAA,GAA6Cd,OAAMe,UAAU,CACxE,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,EAAEC;IAC1D,IAAIC,OAAOC,IAAI,CAACnB,WAAWoB,OAAO,CAACN,WAAW,CAAC,GAAG;QAChD,OAAA,WAAA,GAAO,OAAA,aAAA,CAACO,OAAAA;YAAIC,WAAWP;YAAoBC,OAAOA;;IACpD;IACA,OAAA,WAAA,GACE,OAAA,aAAA,CAACO,OAAAA;QACCC,OAAO;QACPC,QAAQ;QACRC,SAAS;QACR,OAAG3B,yBAAAA,EAAea,SAAS;QAC5Be,WAAW,CAAC,OAAO,EACjBb,UAAUhB,iBAAM,CAACA,iBAAAA,CAAOO,OAAO,CAAC,GAAG,KAAKS,UAAUhB,iBAAM,CAACA,iBAAAA,CAAOM,OAAO,CAAC,GAAG,MAAM,EAClF,OAAO,CAAC;QACTY,OAAO;YACLQ,OAAO;YACPC,QAAQ;QACV;qBAEA,OAAA,aAAA,CAACG,QAAAA;QAAKC,GAAG7B,SAAS,CAACc,MAAM;QAAG,OAAGf,yBAAAA,EAAec,UAAU;;AAG9D,GACA"}
+{"version":3,"sources":["../src/components/Legends/shape.tsx"],"sourcesContent":["import * as React from 'react';\nimport { LegendShape } from './Legends.types';\nimport { CustomPoints, Points, getSecureProps } from '../../utilities/utilities';\n\nexport interface ShapeProps {\n  svgProps: React.SVGAttributes<SVGElement>;\n  pathProps: React.SVGAttributes<SVGPathElement>;\n  shape: LegendShape;\n  classNameForNonSvg?: string;\n  style?: React.CSSProperties | undefined;\n}\n\ntype PointPathType = {\n  [key: string]: string;\n};\n\nconst pointPath: PointPathType = {\n  [`${Points[Points.circle]}`]: 'M1 6 A5 5 0 1 0  12 6 M1 6 A5 5 0 0 1  12 6',\n  [`${Points[Points.square]}`]: 'M1 1 L12 1 L12 12  L1 12 L1 1 Z',\n  [`${Points[Points.triangle]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n  [`${Points[Points.pyramid]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n  [`${Points[Points.diamond]}`]: 'M2 2 L10 2 L10 10  L2 10 L2 2 Z',\n  [`${Points[Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z',\n  [`${Points[Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',\n  [`${Points[Points.octagon]}`]:\n    'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',\n  [`${CustomPoints[CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13',\n};\n\nexport const Shape: React.FunctionComponent<ShapeProps> = React.forwardRef<HTMLDivElement, ShapeProps>(\n  ({ svgProps, pathProps, shape, classNameForNonSvg, style }, forwardedRef) => {\n    if (Object.keys(pointPath).indexOf(shape) === -1) {\n      return <div className={classNameForNonSvg} style={style} />;\n    }\n    return (\n      <svg\n        width={14}\n        height={14}\n        viewBox={'-1 -1 14 14'}\n        {...getSecureProps(svgProps)}\n        transform={`rotate(${\n          shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0\n        }, 0, 0)`}\n        style={{\n          width: '14px',\n          height: '14px',\n        }}\n      >\n        <path d={pointPath[shape]} {...getSecureProps(pathProps)} />\n      </svg>\n    );\n  },\n);\n"],"names":["React","CustomPoints","Points","getSecureProps","pointPath","circle","square","triangle","pyramid","diamond","hexagon","pentagon","octagon","dottedLine","Shape","forwardRef","svgProps","pathProps","shape","classNameForNonSvg","style","forwardedRef","Object","keys","indexOf","div","className","svg","width","height","viewBox","transform","path","d"],"mappings":";;;;+BA6Bac;;;;;;;iEA7BU,QAAQ;2BAEsB,4BAA4B;AAcjF,MAAMV,YAA2B;IAC/B,CAAC,GAAGF,iBAAM,CAACA,iBAAAA,CAAOG,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGH,iBAAM,CAACA,iBAAAA,CAAOI,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGJ,iBAAM,CAACA,iBAAAA,CAAOK,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGL,iBAAM,CAACA,iBAAAA,CAAOM,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGN,iBAAM,CAACA,iBAAAA,CAAOO,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGP,iBAAM,CAACA,iBAAAA,CAAOQ,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGR,iBAAM,CAACA,iBAAAA,CAAOS,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGT,iBAAM,CAACA,iBAAAA,CAAOU,OAAO,CAAC,EAAE,CAAC,EAC3B;IACF,CAAC,GAAGX,uBAAY,CAACA,uBAAAA,CAAaY,UAAU,CAAC,EAAE,CAAC,EAAE;AAChD;AAEO,cAAMC,WAAAA,GAA6Cd,OAAMe,UAAU,CACxE,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,EAAEC;IAC1D,IAAIC,OAAOC,IAAI,CAACnB,WAAWoB,OAAO,CAACN,WAAW,CAAC,GAAG;QAChD,OAAA,WAAA,GAAO,OAAA,aAAA,CAACO,OAAAA;YAAIC,WAAWP;YAAoBC,OAAOA;;IACpD;IACA,OAAA,WAAA,GACE,OAAA,aAAA,CAACO,OAAAA;QACCC,OAAO;QACPC,QAAQ;QACRC,SAAS;QACR,OAAG3B,yBAAAA,EAAea,SAAS;QAC5Be,WAAW,CAAC,OAAO,EACjBb,UAAUhB,iBAAM,CAACA,iBAAAA,CAAOO,OAAO,CAAC,GAAG,KAAKS,UAAUhB,iBAAM,CAACA,iBAAAA,CAAOM,OAAO,CAAC,GAAG,MAAM,EAClF,OAAO,CAAC;QACTY,OAAO;YACLQ,OAAO;YACPC,QAAQ;QACV;qBAEA,OAAA,aAAA,CAACG,QAAAA;QAAKC,GAAG7B,SAAS,CAACc,MAAM;QAAG,OAAGf,yBAAAA,EAAec,UAAU;;AAG9D,GACA"}

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

@@ -9,6 +9,30 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    INACTIVE_LEGEND_TEXT_OPACITY: function() {
+        return INACTIVE_LEGEND_TEXT_OPACITY;
+    },
+    LEGEND_CONTAINER_MARGIN_START: function() {
+        return LEGEND_CONTAINER_MARGIN_START;
+    },
+    LEGEND_CONTAINER_MARGIN_TOP: function() {
+        return LEGEND_CONTAINER_MARGIN_TOP;
+    },
+    LEGEND_HEIGHT: function() {
+        return LEGEND_HEIGHT;
+    },
+    LEGEND_PADDING: function() {
+        return LEGEND_PADDING;
+    },
+    LEGEND_SHAPE_BORDER: function() {
+        return LEGEND_SHAPE_BORDER;
+    },
+    LEGEND_SHAPE_MARGIN_END: function() {
+        return LEGEND_SHAPE_MARGIN_END;
+    },
+    LEGEND_SHAPE_SIZE: function() {
+        return LEGEND_SHAPE_SIZE;
+    },
     legendClassNames: function() {
         return legendClassNames;
     },
@@ -17,6 +41,15 @@ _export(exports, {
     }
 });
 const _react = require("@griffel/react");
+const LEGEND_CONTAINER_MARGIN_TOP = 8;
+const LEGEND_CONTAINER_MARGIN_START = 12;
+const LEGEND_PADDING = 8;
+const LEGEND_HEIGHT = 32;
+const LEGEND_SHAPE_BORDER = 1;
+const LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;
+const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;
+const LEGEND_SHAPE_MARGIN_END = 8;
+const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;
 const legendClassNames = {
     root: 'fui-legend__root',
     legend: 'fui-legend__legend',
@@ -25,7 +58,9 @@ const legendClassNames = {
     triangle: 'fui-legend__triangle',
     text: 'fui-legend__text',
     hoverChange: 'fui-legend__hoverChange',
-    resizableArea: 'fui-legend__resizableArea'
+    resizableArea: 'fui-legend__resizableArea',
+    legendContainer: 'fui-legend__legendContainer',
+    annotation: 'fui-legend__annotation'
 };
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
@@ -60,16 +95,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "f1deefiw",
             "f1n71otn"
         ],
-        z8tnut: "f17mpqex",
-        z189sj: [
-            "f1vdfbxk",
-            "f1f5gg8d"
-        ],
-        Byoj8tv: "fdvome7",
-        uwmqm3: [
-            "f1f5gg8d",
-            "f1vdfbxk"
-        ],
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1t756mo",
         B9bfxx9: "fiwaqkr",
         Bf4jedk: "fy77jfu",
         Bs92zhm: "fuhkvgp",
@@ -81,6 +111,10 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         zpeayv: "f81dvq6",
         Bcwlslt: "f1a000x3",
         a9b677: "frx94fk",
+        t21cq0: [
+            "f1phki43",
+            "ff9s3yw"
+        ],
         Bgfg5da: 0,
         B9xav0g: 0,
         oivjwe: 0,
@@ -97,16 +131,12 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         g2u3we: 0,
         icvyot: 0,
         B4j52fo: 0,
-        irswps: "fpyyuzi",
-        t21cq0: [
-            "f1vcna3q",
-            "foyynoy"
-        ]
+        irswps: "fpyyuzi"
     },
     shape: {
         t21cq0: [
-            "f1vcna3q",
-            "foyynoy"
+            "f1phki43",
+            "ff9s3yw"
         ]
     },
     triangle: {
@@ -184,6 +214,24 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "frlu5y9",
             "f109kcev"
         ]
+    },
+    legendContainer: {
+        xawz: 0,
+        Bh6795r: 0,
+        Bnnss6s: 0,
+        fkmc3a: "fd43uyw",
+        jrapky: 0,
+        Frg6f3: 0,
+        t21cq0: 0,
+        B6of3ja: 0,
+        B74szlk: "fduql59"
+    },
+    annotation: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        i8kkvl: 0,
+        Belr9w4: 0,
+        rmohyg: "f4xv25i"
     }
 }, {
     d: [
@@ -201,26 +249,30 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1n71otn{border-right-style:none;}",
         ".f1deefiw{border-left-style:none;}",
         ".f1h8hb77{border-bottom-style:none;}",
-        ".f17mpqex{padding-top:var(--spacingHorizontalS);}",
-        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
-        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
-        ".fdvome7{padding-bottom:var(--spacingHorizontalS);}",
+        [
+            ".f1t756mo{padding:8px;}",
+            {
+                p: -1
+            }
+        ],
         ".fiwaqkr{text-transform:capitalize;}",
         ".fy77jfu{min-width:0;}",
         ".frx94fk{width:12px;}",
+        ".f1phki43{margin-right:8px;}",
+        ".ff9s3yw{margin-left:8px;}",
         [
             ".fpyyuzi{border:1px solid;}",
             {
                 p: -2
             }
         ],
-        ".f1vcna3q{margin-right:var(--spacingHorizontalS);}",
-        ".foyynoy{margin-left:var(--spacingHorizontalS);}",
         ".f3tsq5r{width:0;}",
         ".fniina8{height:0;}",
         ".fk1dseo{border-left-width:6px solid transparent;}",
         ".f1r9b9o{border-right-width:6px solid transparent;}",
         ".f1cm5upi{border-top-width:10.4px solid;}",
+        ".f1vcna3q{margin-right:var(--spacingHorizontalS);}",
+        ".foyynoy{margin-left:var(--spacingHorizontalS);}",
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".fy9rknc{font-size:var(--fontSizeBase200);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
@@ -248,7 +300,26 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1gw7v5p::after{padding-bottom:1px 4px 1px;}",
         ".f196ehyi::after{border-top-width:-2px;}",
         ".frlu5y9::after{border-left-width:-2px;}",
-        ".f109kcev::after{border-right-width:-2px;}"
+        ".f109kcev::after{border-right-width:-2px;}",
+        [
+            ".fd43uyw{flex:0 1 auto;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fduql59{margin:4px;}",
+            {
+                p: -1
+            }
+        ],
+        ".f22iagw{display:flex;}",
+        [
+            ".f4xv25i{gap:4px;}",
+            {
+                p: -1
+            }
+        ]
     ],
     m: [
         [
@@ -290,7 +361,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useLegendStyles = (props)=>{
-    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7;
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;
     const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.
     const baseStyles = useStyles();
     return {
@@ -301,6 +372,8 @@ const useLegendStyles = (props)=>{
         triangle: (0, _react.mergeClasses)(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),
         text: (0, _react.mergeClasses)(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.text),
         hoverChange: (0, _react.mergeClasses)(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),
-        resizableArea: (0, _react.mergeClasses)(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea)
+        resizableArea: (0, _react.mergeClasses)(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),
+        legendContainer: (0, _react.mergeClasses)(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),
+        annotation: (0, _react.mergeClasses)(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)
     };
-}; //# sourceMappingURL=useLegendsStyles.styles.js.map
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["useLegendsStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const legendClassNames = {\n    root: 'fui-legend__root',\n    legend: 'fui-legend__legend',\n    rect: 'fui-legend__rect',\n    shape: 'fui-legend__shape',\n    triangle: 'fui-legend__triangle',\n    text: 'fui-legend__text',\n    hoverChange: 'fui-legend__hoverChange',\n    resizableArea: 'fui-legend__resizableArea'\n};\nconst useStyles = makeStyles({\n    root: {\n        // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n        // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n        // in responsive charts where legends consist of multiple words.\n        whiteSpace: 'nowrap',\n        width: '100%',\n        alignItems: 'center',\n        ...shorthands.margin('-8px 0 0 -8px')\n    },\n    legend: {\n        // setting display to flex does not work\n        // display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'left',\n        cursor: 'pointer',\n        ...shorthands.border('none'),\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        textTransform: 'capitalize',\n        // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n        // cartesian charts to resize properly within a flexbox or grid layout.\n        minWidth: 0,\n        [HighContrastSelector]: {\n            color: 'WindowText',\n            forcedColorAdjust: 'none'\n        },\n        '&:hover': {\n            [HighContrastSelector]: {\n                color: 'HighlightText',\n                forcedColorAdjust: 'none'\n            }\n        }\n    },\n    rect: {\n        [HighContrastSelector]: {\n            content: 'var(--rect-content-high-contrast)',\n            opacity: 'var(--rect-opacity-high-contrast)'\n        },\n        width: '12px',\n        border: '1px solid',\n        marginRight: tokens.spacingHorizontalS\n    },\n    shape: {\n        marginRight: tokens.spacingHorizontalS\n    },\n    // TO DO Add props when these styles are used in the component\n    triangle: {\n        width: '0',\n        height: '0',\n        ...shorthands.borderLeft('6px solid transparent'),\n        ...shorthands.borderRight('6px solid transparent'),\n        ...shorthands.borderTop('10.4px solid'),\n        marginRight: tokens.spacingHorizontalS\n    },\n    // TO DO Add props when these styles are used in the component\n    text: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    },\n    // TO DO Add props when these styles are used in the component\n    hoverChange: {\n        width: '12px',\n        height: '12px',\n        marginRight: tokens.spacingHorizontalS,\n        ...shorthands.border('1px solid')\n    },\n    resizableArea: {\n        position: 'relative',\n        textAlign: 'left',\n        transform: 'translate(-50%, 0)',\n        top: 'auto',\n        left: '50%',\n        minWidth: '200px',\n        maxWidth: '800px',\n        '::after': {\n            ...shorthands.padding('1px 4px 1px'),\n            ...shorthands.borderTop('-2px'),\n            ...shorthands.borderLeft('-2px')\n        }\n    }\n});\nexport const useLegendStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7;\n    const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        legend: mergeClasses(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.legend),\n        rect: mergeClasses(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.rect),\n        shape: mergeClasses(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.shape),\n        triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),\n        text: mergeClasses(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.text),\n        hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),\n        resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea)\n    };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","useStyles","Huce71","a9b677","Bt984gj","B6of3ja","t21cq0","jrapky","Frg6f3","Brf1p80","Bceei9c","icvyot","vrafjx","oivjwe","wvpqe5","z8tnut","z189sj","Byoj8tv","uwmqm3","B9bfxx9","Bf4jedk","Bs92zhm","B93v9kj","Ck9m1r","mkjk8h","zpeayv","Bcwlslt","Bgfg5da","B9xav0g","Bn0qgzm","B4g9neb","zhjwy3","ibv6hh","u1mtju","h3c5rm","Bekrc4i","i8vvqc","g2u3we","B4j52fo","irswps","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","sj55zd","Bvjb7m6","qhf8xq","fsow6f","Bz10aip","Bhzewxz","oyh7mz","B2u0y6b","smv486","u6pn5x","B4uzyy","Be2s5ez","xrcqlc","Bhxzhr1","d","p","m","useLegendStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","className","baseStyles","styles"],"mappings":"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"}
+{"version":3,"sources":["useLegendsStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n/**\n * @internal\n */ export const legendClassNames = {\n    root: 'fui-legend__root',\n    legend: 'fui-legend__legend',\n    rect: 'fui-legend__rect',\n    shape: 'fui-legend__shape',\n    triangle: 'fui-legend__triangle',\n    text: 'fui-legend__text',\n    hoverChange: 'fui-legend__hoverChange',\n    resizableArea: 'fui-legend__resizableArea',\n    legendContainer: 'fui-legend__legendContainer',\n    annotation: 'fui-legend__annotation'\n};\nconst useStyles = makeStyles({\n    root: {\n        // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n        // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n        // in responsive charts where legends consist of multiple words.\n        whiteSpace: 'nowrap',\n        width: '100%',\n        alignItems: 'center',\n        ...shorthands.margin('-8px 0 0 -8px')\n    },\n    legend: {\n        // setting display to flex does not work\n        // display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'left',\n        cursor: 'pointer',\n        ...shorthands.border('none'),\n        padding: `${LEGEND_PADDING}px`,\n        textTransform: 'capitalize',\n        // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n        // cartesian charts to resize properly within a flexbox or grid layout.\n        minWidth: 0,\n        [HighContrastSelector]: {\n            color: 'WindowText',\n            forcedColorAdjust: 'none'\n        },\n        '&:hover': {\n            [HighContrastSelector]: {\n                color: 'HighlightText',\n                forcedColorAdjust: 'none'\n            }\n        }\n    },\n    rect: {\n        [HighContrastSelector]: {\n            content: 'var(--rect-content-high-contrast)',\n            opacity: 'var(--rect-opacity-high-contrast)'\n        },\n        width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n        marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n        border: `${LEGEND_SHAPE_BORDER}px solid`\n    },\n    shape: {\n        marginRight: `${LEGEND_SHAPE_MARGIN_END}px`\n    },\n    // TO DO Add props when these styles are used in the component\n    triangle: {\n        width: '0',\n        height: '0',\n        ...shorthands.borderLeft('6px solid transparent'),\n        ...shorthands.borderRight('6px solid transparent'),\n        ...shorthands.borderTop('10.4px solid'),\n        marginRight: tokens.spacingHorizontalS\n    },\n    // TO DO Add props when these styles are used in the component\n    text: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    },\n    // TO DO Add props when these styles are used in the component\n    hoverChange: {\n        width: '12px',\n        height: '12px',\n        marginRight: tokens.spacingHorizontalS,\n        ...shorthands.border('1px solid')\n    },\n    resizableArea: {\n        position: 'relative',\n        textAlign: 'left',\n        transform: 'translate(-50%, 0)',\n        top: 'auto',\n        left: '50%',\n        minWidth: '200px',\n        maxWidth: '800px',\n        '::after': {\n            ...shorthands.padding('1px 4px 1px'),\n            ...shorthands.borderTop('-2px'),\n            ...shorthands.borderLeft('-2px')\n        }\n    },\n    legendContainer: {\n        flex: '0 1 auto',\n        margin: '4px'\n    },\n    annotation: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: '4px'\n    }\n});\nexport const useLegendStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;\n    const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        legend: mergeClasses(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.legend),\n        rect: mergeClasses(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.rect),\n        shape: mergeClasses(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.shape),\n        triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),\n        text: mergeClasses(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.text),\n        hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),\n        resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),\n        legendContainer: mergeClasses(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),\n        annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)\n    };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","Huce71","a9b677","Bt984gj","B6of3ja","t21cq0","jrapky","Frg6f3","Brf1p80","Bceei9c","icvyot","vrafjx","oivjwe","wvpqe5","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B9bfxx9","Bf4jedk","Bs92zhm","B93v9kj","Ck9m1r","mkjk8h","zpeayv","Bcwlslt","Bgfg5da","B9xav0g","Bn0qgzm","B4g9neb","zhjwy3","ibv6hh","u1mtju","h3c5rm","Bekrc4i","i8vvqc","g2u3we","B4j52fo","irswps","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","sj55zd","Bvjb7m6","qhf8xq","fsow6f","Bz10aip","Bhzewxz","oyh7mz","B2u0y6b","smv486","u6pn5x","B4uzyy","Be2s5ez","xrcqlc","Bhxzhr1","xawz","Bh6795r","Bnnss6s","fkmc3a","B74szlk","mc9l5x","i8kkvl","Belr9w4","rmohyg","d","p","m","useLegendStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","_props_styles9","className","baseStyles","styles"],"mappings":"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"}

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

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    INACTIVE_LEGEND_TEXT_OPACITY: function() {
+        return INACTIVE_LEGEND_TEXT_OPACITY;
+    },
+    LEGEND_CONTAINER_MARGIN_START: function() {
+        return LEGEND_CONTAINER_MARGIN_START;
+    },
+    LEGEND_CONTAINER_MARGIN_TOP: function() {
+        return LEGEND_CONTAINER_MARGIN_TOP;
+    },
+    LEGEND_HEIGHT: function() {
+        return LEGEND_HEIGHT;
+    },
+    LEGEND_PADDING: function() {
+        return LEGEND_PADDING;
+    },
+    LEGEND_SHAPE_BORDER: function() {
+        return LEGEND_SHAPE_BORDER;
+    },
+    LEGEND_SHAPE_MARGIN_END: function() {
+        return LEGEND_SHAPE_MARGIN_END;
+    },
+    LEGEND_SHAPE_SIZE: function() {
+        return LEGEND_SHAPE_SIZE;
+    },
+    legendClassNames: function() {
+        return legendClassNames;
+    },
+    useLegendStyles: function() {
+        return useLegendStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _index = require("../../utilities/index");
+const LEGEND_CONTAINER_MARGIN_TOP = 8;
+const LEGEND_CONTAINER_MARGIN_START = 12;
+const LEGEND_PADDING = 8;
+const LEGEND_HEIGHT = 32;
+const LEGEND_SHAPE_BORDER = 1;
+const LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;
+const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;
+const LEGEND_SHAPE_MARGIN_END = 8;
+const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;
+const legendClassNames = {
+    root: 'fui-legend__root',
+    legend: 'fui-legend__legend',
+    rect: 'fui-legend__rect',
+    shape: 'fui-legend__shape',
+    triangle: 'fui-legend__triangle',
+    text: 'fui-legend__text',
+    hoverChange: 'fui-legend__hoverChange',
+    resizableArea: 'fui-legend__resizableArea',
+    legendContainer: 'fui-legend__legendContainer',
+    annotation: 'fui-legend__annotation'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        // FIXME: Removing this style allows the legend container in responsive donut chart to resize
+        // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues
+        // in responsive charts where legends consist of multiple words.
+        whiteSpace: 'nowrap',
+        width: '100%',
+        alignItems: 'center',
+        ..._react.shorthands.margin('-8px 0 0 -8px')
+    },
+    legend: {
+        // setting display to flex does not work
+        // display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'left',
+        cursor: 'pointer',
+        ..._react.shorthands.border('none'),
+        padding: `${LEGEND_PADDING}px`,
+        textTransform: 'capitalize',
+        // The default min-width is 64px. Setting it to 0 allows the legend container in responsive
+        // cartesian charts to resize properly within a flexbox or grid layout.
+        minWidth: 0,
+        [_index.HighContrastSelector]: {
+            color: 'WindowText',
+            forcedColorAdjust: 'none'
+        },
+        '&:hover': {
+            [_index.HighContrastSelector]: {
+                color: 'HighlightText',
+                forcedColorAdjust: 'none'
+            }
+        }
+    },
+    rect: {
+        [_index.HighContrastSelector]: {
+            content: 'var(--rect-content-high-contrast)',
+            opacity: 'var(--rect-opacity-high-contrast)'
+        },
+        width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,
+        marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,
+        border: `${LEGEND_SHAPE_BORDER}px solid`
+    },
+    shape: {
+        marginRight: `${LEGEND_SHAPE_MARGIN_END}px`
+    },
+    // TO DO Add props when these styles are used in the component
+    triangle: {
+        width: '0',
+        height: '0',
+        ..._react.shorthands.borderLeft('6px solid transparent'),
+        ..._react.shorthands.borderRight('6px solid transparent'),
+        ..._react.shorthands.borderTop('10.4px solid'),
+        marginRight: _reacttheme.tokens.spacingHorizontalS
+    },
+    // TO DO Add props when these styles are used in the component
+    text: {
+        ..._reacttheme.typographyStyles.caption1,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        forcedColorAdjust: 'auto'
+    },
+    // TO DO Add props when these styles are used in the component
+    hoverChange: {
+        width: '12px',
+        height: '12px',
+        marginRight: _reacttheme.tokens.spacingHorizontalS,
+        ..._react.shorthands.border('1px solid')
+    },
+    resizableArea: {
+        position: 'relative',
+        textAlign: 'left',
+        transform: 'translate(-50%, 0)',
+        top: 'auto',
+        left: '50%',
+        minWidth: '200px',
+        maxWidth: '800px',
+        '::after': {
+            ..._react.shorthands.padding('1px 4px 1px'),
+            ..._react.shorthands.borderTop('-2px'),
+            ..._react.shorthands.borderLeft('-2px')
+        }
+    },
+    legendContainer: {
+        flex: '0 1 auto',
+        margin: '4px'
+    },
+    annotation: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px'
+    }
+});
+const useLegendStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;
+    const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        legend: (0, _react.mergeClasses)(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.legend),
+        rect: (0, _react.mergeClasses)(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.rect),
+        shape: (0, _react.mergeClasses)(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.shape),
+        triangle: (0, _react.mergeClasses)(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),
+        text: (0, _react.mergeClasses)(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.text),
+        hoverChange: (0, _react.mergeClasses)(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),
+        resizableArea: (0, _react.mergeClasses)(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),
+        legendContainer: (0, _react.mergeClasses)(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),
+        annotation: (0, _react.mergeClasses)(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Legends/useLegendsStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { LegendsProps, LegendsStyles } from './Legends.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n\n/**\n * @internal\n */\nexport const legendClassNames: SlotClassNames<LegendsStyles> = {\n  root: 'fui-legend__root',\n  legend: 'fui-legend__legend',\n  rect: 'fui-legend__rect',\n  shape: 'fui-legend__shape',\n  triangle: 'fui-legend__triangle',\n  text: 'fui-legend__text',\n  hoverChange: 'fui-legend__hoverChange',\n  resizableArea: 'fui-legend__resizableArea',\n  legendContainer: 'fui-legend__legendContainer',\n  annotation: 'fui-legend__annotation',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n    // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n    // in responsive charts where legends consist of multiple words.\n    whiteSpace: 'nowrap',\n    width: '100%',\n    alignItems: 'center',\n    ...shorthands.margin('-8px 0 0 -8px'),\n  },\n  legend: {\n    // setting display to flex does not work\n    // display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'left',\n    cursor: 'pointer',\n    ...shorthands.border('none'),\n    padding: `${LEGEND_PADDING}px`,\n    textTransform: 'capitalize',\n    // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n    // cartesian charts to resize properly within a flexbox or grid layout.\n    minWidth: 0,\n    [HighContrastSelector]: {\n      color: 'WindowText',\n      forcedColorAdjust: 'none',\n    },\n    '&:hover': {\n      [HighContrastSelector]: {\n        color: 'HighlightText',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n  rect: {\n    [HighContrastSelector]: {\n      content: 'var(--rect-content-high-contrast)',\n      opacity: 'var(--rect-opacity-high-contrast)',\n    },\n    width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n    marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n    border: `${LEGEND_SHAPE_BORDER}px solid`,\n  },\n  shape: {\n    marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n  },\n  // TO DO Add props when these styles are used in the component\n  triangle: {\n    width: '0',\n    height: '0',\n    ...shorthands.borderLeft('6px solid transparent'),\n    ...shorthands.borderRight('6px solid transparent'),\n    ...shorthands.borderTop('10.4px solid'),\n    marginRight: tokens.spacingHorizontalS,\n  },\n  // TO DO Add props when these styles are used in the component\n  text: {\n    ...typographyStyles.caption1,\n    color: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n  // TO DO Add props when these styles are used in the component\n  hoverChange: {\n    width: '12px',\n    height: '12px',\n    marginRight: tokens.spacingHorizontalS,\n    ...shorthands.border('1px solid'),\n  },\n  resizableArea: {\n    position: 'relative',\n    textAlign: 'left',\n    transform: 'translate(-50%, 0)',\n    top: 'auto',\n    left: '50%',\n    minWidth: '200px',\n    maxWidth: '800px',\n    '::after': {\n      ...shorthands.padding('1px 4px 1px'),\n      ...shorthands.borderTop('-2px'),\n      ...shorthands.borderLeft('-2px'),\n    },\n  },\n  legendContainer: {\n    flex: '0 1 auto',\n    margin: '4px',\n  },\n  annotation: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '4px',\n  },\n});\n\nexport const useLegendStyles = (props: LegendsProps): LegendsStyles => {\n  const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(legendClassNames.root, baseStyles.root, className, props.styles?.root),\n    legend: mergeClasses(legendClassNames.legend, baseStyles.legend, props.styles?.legend),\n    rect: mergeClasses(legendClassNames.rect, baseStyles.rect, props.styles?.rect),\n    shape: mergeClasses(legendClassNames.shape, baseStyles.shape, props.styles?.shape),\n    triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, props.styles?.triangle),\n    text: mergeClasses(legendClassNames.text, baseStyles.text, props.styles?.text),\n    hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, props.styles?.hoverChange),\n    resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, props.styles?.resizableArea),\n    legendContainer: mergeClasses(\n      legendClassNames.legendContainer,\n      baseStyles.legendContainer,\n      props.styles?.legendContainer,\n    ),\n    annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, props.styles?.annotation),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","whiteSpace","width","alignItems","margin","justifyContent","cursor","border","padding","textTransform","minWidth","color","forcedColorAdjust","content","opacity","marginRight","height","borderLeft","borderRight","borderTop","spacingHorizontalS","caption1","colorNeutralForeground1","position","textAlign","transform","top","left","maxWidth","flex","display","gap","useLegendStyles","props","className","baseStyles","styles"],"mappings":"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"}

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

@@ -20,6 +20,7 @@ const _index1 = require("../../utilities/index");
 const _index2 = require("../../index");
 const _EventAnnotation = require("./eventAnnotation/EventAnnotation");
 const _reacttheme = require("@fluentui/react-theme");
+const _imageexportutils = require("../../utilities/image-export-utils");
 var PointSize = /*#__PURE__*/ function(PointSize) {
     PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
     PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
@@ -123,6 +124,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     let xAxisCalloutAccessibilityData = {};
     const cartesianChartRef = _react.useRef(null);
     let _yScaleSecondary;
+    const _legendsRef = _react.useRef(null);
     props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
     const [hoverXValue, setHoverXValue] = _react.useState('');
     const [activeLegend, setActiveLegend] = _react.useState('');
@@ -160,7 +162,11 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         var _cartesianChartRef_current;
         var _cartesianChartRef_current_chartContainer;
         return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null
+            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
+            toImage: (opts)=>{
+                var _cartesianChartRef_current, _legendsRef_current;
+                return (0, _imageexportutils.toImage)((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
+            }
         };
     }, []);
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
@@ -313,7 +319,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             ...isLegendMultiSelectEnabled && {
                 onLegendHoverCardLeave: _onHoverCardHide
             },
-            ...props.legendProps
+            ...props.legendProps,
+            legendRef: _legendsRef
         });
     }
     function _getBoxWidthOfShape(pointId, pointIndex, isLastPoint) {