@fluentui/react-charts 1.1.0 → 9.0.0

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

@@ -0,0 +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.\n   * This prop is used for multiSelect scenarios.\n   * In other cases, defaultSelectedLegend should be used.\n   */\n  defaultSelectedLegends?: string[];\n\n  /**\n   * Key that will be initially used to set selected item.\n   * This prop is used for singleSelect scenarios.\n   */\n  defaultSelectedLegend?: 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":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverflowMenu", {
+    enumerable: true,
+    get: function() {
+        return OverflowMenu;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactmenu = require("@fluentui/react-menu");
+const _reactbutton = require("@fluentui/react-button");
+const _reactoverflow = require("@fluentui/react-overflow");
+const OverflowMenu = ({ itemIds, title, items })=>{
+    const { ref, overflowCount, isOverflowing } = (0, _reactoverflow.useOverflowMenu)();
+    let displayLabel = title;
+    displayLabel = title === '' ? `+${overflowCount} items` : `+${overflowCount} ${title}`;
+    if (!isOverflowing) {
+        return null;
+    }
+    const remainingItemsCount = itemIds.length - overflowCount;
+    const menuList = [];
+    for(let i = remainingItemsCount; i < itemIds.length; i++){
+        menuList.push(/*#__PURE__*/ _react.createElement(_reactmenu.MenuItem, {
+            tabIndex: -1,
+            key: i
+        }, items[i]));
+    }
+    return /*#__PURE__*/ _react.createElement(_reactmenu.Menu, null, /*#__PURE__*/ _react.createElement(_reactmenu.MenuTrigger, {
+        disableButtonEnhancement: true
+    }, /*#__PURE__*/ _react.createElement(_reactbutton.MenuButton, {
+        ref: ref
+    }, displayLabel)), /*#__PURE__*/ _react.createElement(_reactmenu.MenuPopover, null, /*#__PURE__*/ _react.createElement(_reactmenu.MenuList, null, menuList)));
+};

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

@@ -0,0 +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":["OverflowMenu","itemIds","title","items","ref","overflowCount","isOverflowing","useOverflowMenu","displayLabel","remainingItemsCount","length","menuList","i","push","React","createElement","MenuItem","tabIndex","key","Menu","MenuTrigger","disableButtonEnhancement","MenuButton","MenuPopover","MenuList"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;2BAC4C;6BACxC;+BACK;AAEzB,MAAMA,eAAqF,CAAC,EACjGC,OAAO,EACPC,KAAK,EACLC,KAAK,EACN;IACC,MAAM,EAAEC,GAAG,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGC,IAAAA,8BAAAA;IAC9C,IAAIC,eAAeN;IACnBM,eAAeN,UAAU,KAAK,CAAC,CAAC,EAAEG,cAAc,MAAM,CAAC,GAAG,CAAC,CAAC,EAAEA,cAAc,CAAC,EAAEH,MAAM,CAAC;IAEtF,IAAI,CAACI,eAAe;QAClB,OAAO;IACT;IACA,MAAMG,sBAAsBR,QAAQS,MAAM,GAAGL;IAC7C,MAAMM,WAAW,EAAE;IACnB,IAAK,IAAIC,IAAIH,qBAAqBG,IAAIX,QAAQS,MAAM,EAAEE,IAAK;QACzDD,SAASE,IAAI,CAAA,WAAA,GACXC,OAAAC,aAAA,CAACC,mBAAAA,EAAAA;YAASC,UAAU,CAAC;YAAGC,KAAKN;WAC1BT,KAAK,CAACS,EAAE;IAGf;IACA,OAAA,WAAA,GACEE,OAAAC,aAAA,CAACI,eAAAA,EAAAA,MAAAA,WAAAA,GACCL,OAAAC,aAAA,CAACK,sBAAAA,EAAAA;QAAYC,0BAAAA;qBACXP,OAAAC,aAAA,CAACO,uBAAAA,EAAAA;QAAWlB,KAAKA;OAAMI,gBAAAA,WAAAA,GAGzBM,OAAAC,aAAA,CAACQ,sBAAAA,EAAAA,MAAAA,WAAAA,GACCT,OAAAC,aAAA,CAACS,mBAAAA,EAAAA,MAAUb;AAInB"}

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Legends"), exports);
+_export_star._(require("./Legends.types"), exports);
+_export_star._(require("./shape"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Legends';\nexport * from './Legends.types';\nexport * from './shape';\n"],"names":[],"rangeMappings":";;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA"}

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Shape", {
+    enumerable: true,
+    get: function() {
+        return Shape;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _utilities = require("../../utilities/utilities");
+const pointPath = {
+    [`${_utilities.Points[_utilities.Points.circle]}`]: 'M1 6 A5 5 0 1 0  12 6 M1 6 A5 5 0 0 1  12 6',
+    [`${_utilities.Points[_utilities.Points.square]}`]: 'M1 1 L12 1 L12 12  L1 12 L1 1 Z',
+    [`${_utilities.Points[_utilities.Points.triangle]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',
+    [`${_utilities.Points[_utilities.Points.pyramid]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',
+    [`${_utilities.Points[_utilities.Points.diamond]}`]: 'M2 2 L10 2 L10 10  L2 10 L2 2 Z',
+    [`${_utilities.Points[_utilities.Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z',
+    [`${_utilities.Points[_utilities.Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',
+    [`${_utilities.Points[_utilities.Points.octagon]}`]: 'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',
+    [`${_utilities.CustomPoints[_utilities.CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13'
+};
+const Shape = /*#__PURE__*/ _react.forwardRef(({ svgProps, pathProps, shape, classNameForNonSvg, style }, forwardedRef)=>{
+    if (Object.keys(pointPath).indexOf(shape) === -1) {
+        return /*#__PURE__*/ _react.createElement("div", {
+            className: classNameForNonSvg,
+            style: style
+        });
+    }
+    return /*#__PURE__*/ _react.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: '-1 -1 14 14',
+        ...svgProps,
+        transform: `rotate(${shape === _utilities.Points[_utilities.Points.diamond] ? 45 : shape === _utilities.Points[_utilities.Points.pyramid] ? 180 : 0}, 0, 0)`,
+        style: {
+            width: '14px',
+            height: '14px'
+        }
+    }, /*#__PURE__*/ _react.createElement("path", {
+        d: pointPath[shape],
+        ...pathProps
+    }));
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["shape.tsx"],"sourcesContent":["import * as React from 'react';\nimport { LegendShape } from './Legends.types';\nimport { CustomPoints, Points } 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        {...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]} {...pathProps} />\n      </svg>\n    );\n  },\n);\n"],"names":["Shape","pointPath","Points","circle","square","triangle","pyramid","diamond","hexagon","pentagon","octagon","CustomPoints","dottedLine","React","forwardRef","svgProps","pathProps","shape","classNameForNonSvg","style","forwardedRef","Object","keys","indexOf","createElement","div","className","svg","width","height","viewBox","transform","path","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BaA;;;eAAAA;;;;iEA7BU;2BAEc;AAcrC,MAAMC,YAA2B;IAC/B,CAAC,CAAC,EAAEC,iBAAM,CAACA,iBAAAA,CAAOC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;IAC9B,CAAC,CAAC,EAAED,iBAAM,CAACA,iBAAAA,CAAOE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;IAC9B,CAAC,CAAC,EAAEF,iBAAM,CAACA,iBAAAA,CAAOG,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;IAChC,CAAC,CAAC,EAAEH,iBAAM,CAACA,iBAAAA,CAAOI,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;IAC/B,CAAC,CAAC,EAAEJ,iBAAM,CAACA,iBAAAA,CAAOK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;IAC/B,CAAC,CAAC,EAAEL,iBAAM,CAACA,iBAAAA,CAAOM,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;IAC/B,CAAC,CAAC,EAAEN,iBAAM,CAACA,iBAAAA,CAAOO,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;IAChC,CAAC,CAAC,EAAEP,iBAAM,CAACA,iBAAAA,CAAOQ,OAAO,CAAC,CAAC,CAAC,CAAC,EAC3B;IACF,CAAC,CAAC,EAAEC,uBAAY,CAACA,uBAAAA,CAAaC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE;AAChD;AAEO,MAAMZ,QAAAA,WAAAA,GAA6Ca,OAAMC,UAAU,CACxE,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,EAAEC;IAC1D,IAAIC,OAAOC,IAAI,CAACrB,WAAWsB,OAAO,CAACN,WAAW,CAAC,GAAG;QAChD,OAAA,WAAA,GAAOJ,OAAAW,aAAA,CAACC,OAAAA;YAAIC,WAAWR;YAAoBC,OAAOA;;IACpD;IACA,OAAA,WAAA,GACEN,OAAAW,aAAA,CAACG,OAAAA;QACCC,OAAO;QACPC,QAAQ;QACRC,SAAS;QACR,GAAGf,QAAQ;QACZgB,WAAW,CAAC,OAAO,EACjBd,UAAUf,iBAAM,CAACA,iBAAAA,CAAOK,OAAO,CAAC,GAAG,KAAKU,UAAUf,iBAAM,CAACA,iBAAAA,CAAOI,OAAO,CAAC,GAAG,MAAM,EAClF,OAAO,CAAC;QACTa,OAAO;YACLS,OAAO;YACPC,QAAQ;QACV;qBAEAhB,OAAAW,aAAA,CAACQ,QAAAA;QAAKC,GAAGhC,SAAS,CAACgB,MAAM;QAAG,GAAGD,SAAS;;AAG9C"}

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

@@ -0,0 +1,304 @@
+"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, {
+    legendClassNames: function() {
+        return legendClassNames;
+    },
+    useLegendStyles: function() {
+        return useLegendStyles;
+    }
+});
+const _react = require("@griffel/react");
+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'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Huce71: "fz5stix",
+        a9b677: "fly5x3f",
+        Bt984gj: "f122n59",
+        B6of3ja: "fpzxe1g",
+        t21cq0: [
+            "f705vk6",
+            "fqom4eq"
+        ],
+        jrapky: "fzpzak3",
+        Frg6f3: [
+            "fqom4eq",
+            "f705vk6"
+        ]
+    },
+    legend: {
+        Bt984gj: "f122n59",
+        Brf1p80: [
+            "fc7pyfw",
+            "fgbriwd"
+        ],
+        Bceei9c: "f1k6fduh",
+        icvyot: "f1ern45e",
+        vrafjx: [
+            "f1n71otn",
+            "f1deefiw"
+        ],
+        oivjwe: "f1h8hb77",
+        wvpqe5: [
+            "f1deefiw",
+            "f1n71otn"
+        ],
+        z8tnut: "f17mpqex",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "fdvome7",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        B9bfxx9: "fiwaqkr",
+        Bs92zhm: "fuhkvgp",
+        B93v9kj: "f15mrrko",
+        Ck9m1r: "f1vu5irt",
+        mkjk8h: "f1sdboh2"
+    },
+    rect: {
+        zpeayv: "f81dvq6",
+        Bcwlslt: "f1a000x3",
+        a9b677: "frx94fk",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "fpyyuzi",
+        t21cq0: [
+            "f1vcna3q",
+            "foyynoy"
+        ]
+    },
+    shape: {
+        t21cq0: [
+            "f1vcna3q",
+            "foyynoy"
+        ]
+    },
+    triangle: {
+        a9b677: "f3tsq5r",
+        Bqenvij: "fniina8",
+        ibv6hh: [
+            "fk1dseo",
+            "f1r9b9o"
+        ],
+        Bekrc4i: [
+            "f1r9b9o",
+            "fk1dseo"
+        ],
+        B4j52fo: "f1cm5upi",
+        t21cq0: [
+            "f1vcna3q",
+            "foyynoy"
+        ]
+    },
+    text: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        sj55zd: "f19n0e5",
+        Bs92zhm: "fuhkvgp",
+        B93v9kj: "f15mrrko"
+    },
+    hoverChange: {
+        a9b677: "frx94fk",
+        Bqenvij: "fvblgha",
+        t21cq0: [
+            "f1vcna3q",
+            "foyynoy"
+        ],
+        B4j52fo: "f1d7653x",
+        Bekrc4i: [
+            "f1maxq7k",
+            "f16g4l54"
+        ],
+        Bn0qgzm: "f1rzi0e7",
+        ibv6hh: [
+            "f16g4l54",
+            "f1maxq7k"
+        ]
+    },
+    resizableArea: {
+        qhf8xq: "f10pi13n",
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ],
+        Bz10aip: [
+            "f15ivbov",
+            "fjwp9lj"
+        ],
+        Bhzewxz: "f198g47y",
+        oyh7mz: [
+            "f1ktbn1t",
+            "ffenbu1"
+        ],
+        Bf4jedk: "f93ek0f",
+        B2u0y6b: "f1cgdal8",
+        smv486: "f2b5gy5",
+        u6pn5x: [
+            "fk27hbk",
+            "f1xelbol"
+        ],
+        B4uzyy: "f1gw7v5p",
+        Be2s5ez: [
+            "f1xelbol",
+            "fk27hbk"
+        ],
+        xrcqlc: "f196ehyi",
+        Bhxzhr1: [
+            "frlu5y9",
+            "f109kcev"
+        ]
+    }
+}, {
+    d: [
+        ".fz5stix{white-space:nowrap;}",
+        ".fly5x3f{width:100%;}",
+        ".f122n59{align-items:center;}",
+        ".fpzxe1g{margin-top:-8px 0 0 -8px;}",
+        ".f705vk6{margin-right:-8px 0 0 -8px;}",
+        ".fqom4eq{margin-left:-8px 0 0 -8px;}",
+        ".fzpzak3{margin-bottom:-8px 0 0 -8px;}",
+        ".fc7pyfw{justify-content:left;}",
+        ".fgbriwd{justify-content:right;}",
+        ".f1k6fduh{cursor:pointer;}",
+        ".f1ern45e{border-top-style:none;}",
+        ".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);}",
+        ".fiwaqkr{text-transform:capitalize;}",
+        ".frx94fk{width:12px;}",
+        [
+            ".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;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".fvblgha{height:12px;}",
+        ".f1d7653x{border-top-width:1px solid;}",
+        ".f1maxq7k{border-right-width:1px solid;}",
+        ".f16g4l54{border-left-width:1px solid;}",
+        ".f1rzi0e7{border-bottom-width:1px solid;}",
+        ".f10pi13n{position:relative;}",
+        ".f1o700av{text-align:left;}",
+        ".fes3tcz{text-align:right;}",
+        ".f15ivbov{transform:translate(-50%, 0);}",
+        ".fjwp9lj{transform:translate(50%, 0);}",
+        ".f198g47y{top:auto;}",
+        ".f1ktbn1t{left:50%;}",
+        ".ffenbu1{right:50%;}",
+        ".f93ek0f{min-width:200px;}",
+        ".f1cgdal8{max-width:800px;}",
+        ".f2b5gy5::after{padding-top:1px 4px 1px;}",
+        ".fk27hbk::after{padding-right:1px 4px 1px;}",
+        ".f1xelbol::after{padding-left:1px 4px 1px;}",
+        ".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;}"
+    ],
+    m: [
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fuhkvgp{color:WindowText;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15mrrko{forced-color-adjust:none;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1vu5irt:hover{color:HighlightText;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1sdboh2:hover{forced-color-adjust:none;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f81dvq6{content:var(--rect-content-high-contrast);}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1a000x3{opacity:var(--rect-opacity-high-contrast);}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useLegendStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7;
+    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)
+    };
+}; //# sourceMappingURL=useLegendsStyles.styles.js.map

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

@@ -0,0 +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        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        [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        [HighContrastSelector]: {\n            color: 'WindowText',\n            forcedColorAdjust: 'none'\n        }\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":["legendClassNames","useLegendStyles","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","useStyles","__styles","Huce71","a9b677","Bt984gj","B6of3ja","t21cq0","jrapky","Frg6f3","Brf1p80","Bceei9c","icvyot","vrafjx","oivjwe","wvpqe5","z8tnut","z189sj","Byoj8tv","uwmqm3","B9bfxx9","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","qhf8xq","fsow6f","Bz10aip","Bhzewxz","oyh7mz","Bf4jedk","B2u0y6b","smv486","u6pn5x","B4uzyy","Be2s5ez","xrcqlc","Bhxzhr1","d","p","m","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","className","baseStyles","mergeClasses","styles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}