@fluentui/react-charts 1.2.0 → 9.0.0

package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js

@@ -0,0 +1,163 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { HorizontalBarChartVariant } from './index';
+import { HighContrastSelector } from '../../utilities/index';
+/**
+ * @internal
+ */
+export const hbcClassNames = {
+  root: 'fui-hbc__root',
+  items: 'fui-hbc__items',
+  chart: 'fui-hbc__chart',
+  chartTitle: 'fui-hbc__chartTitle',
+  barWrapper: 'fui-hbc__barWrapper',
+  chartTitleLeft: 'fui-hbc__chartTitleLeft',
+  chartTitleRight: 'fui-hbc__chartTitleRight',
+  chartDataTextDenominator: 'fui-hbc__textDenom',
+  benchmarkContainer: 'fui-hbc__benchmark',
+  triangle: 'fui-hbc__triangle',
+  barLabel: 'fui-hbc__barLabel',
+  chartWrapper: 'fui-hbc__chartWrapper',
+  legendContainer: 'fui-hbc__legendContainer'
+};
+/**
+ * Base Styles
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    a9b677: "fly5x3f"
+  },
+  items10pMargin: {
+    jrapky: "f1rfdi54"
+  },
+  items16pMargin: {
+    jrapky: "fbxl46w"
+  },
+  chart: {
+    a9b677: "fly5x3f",
+    Bqenvij: "fvblgha",
+    mc9l5x: "ftgm304",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1gl81tg"
+  },
+  barWrapper: {},
+  chartTitle: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    mc9l5x: "f22iagw",
+    Brf1p80: "f1869bpl"
+  },
+  chartTitleLeft: {
+    ygn44y: "f1cmbuwj",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    Huce71: "fz5stix",
+    mc9l5x: "ftgm304",
+    sj55zd: "f19n0e5"
+  },
+  chartTitleLeft4pMargin: {
+    jrapky: "fd1gkq"
+  },
+  chartTitleLeft5pMargin: {
+    jrapky: "f475ppk"
+  },
+  chartTitleRight: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi",
+    sj55zd: "f19n0e5"
+  },
+  chartDataTextDenominator: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    sj55zd: "f19n0e5"
+  },
+  benchmarkContainer: {
+    qhf8xq: "f10pi13n",
+    Bqenvij: "f7u49ja",
+    B6of3ja: "f1h5g6v3",
+    jrapky: "fmxx68s"
+  },
+  triangle: {
+    a9b677: "f3tsq5r",
+    Bqenvij: "fniina8",
+    ibv6hh: ["fbdn13q", "fdo4c7f"],
+    wvpqe5: ["fjik90z", "fcdblym"],
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Bekrc4i: ["fdo4c7f", "fbdn13q"],
+    vrafjx: ["fcdblym", "fjik90z"],
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B4j52fo: "f1st6vq5",
+    icvyot: "fzkkow9",
+    g2u3we: "f1bpgvfk",
+    jrapky: "f8l5zjj",
+    qhf8xq: "f1euv43f"
+  },
+  barLabel: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fwrc4pm",
+    Bkfmm31: "fhuob2q",
+    a6j6cd: "f1j86lqe",
+    B93v9kj: "f15mrrko"
+  },
+  chartWrapper40ppadding: {
+    z189sj: ["f1emi2st", "f53ee3v"]
+  },
+  chartWrapper0ppadding: {
+    z189sj: ["flk2ux3", "fkl3uby"]
+  },
+  legendContainer: {
+    z8tnut: "fikn0iw"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fly5x3f{width:100%;}", ".f1rfdi54{margin-bottom:var(--spacingVerticalMNudge);}", ".fbxl46w{margin-bottom:var(--spacingVerticalL);}", ".fvblgha{height:12px;}", ".ftgm304{display:block;}", [".f1gl81tg{overflow:visible;}", {
+    p: -1
+  }], ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1869bpl{justify-content:space-between;}", ".f1cmbuwj{text-overflow:ellipsis;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], ".fz5stix{white-space:nowrap;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fd1gkq{margin-bottom:4px;}", ".f475ppk{margin-bottom:5px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f10pi13n{position:relative;}", ".f7u49ja{height:7px;}", ".f1h5g6v3{margin-top:-3px;}", ".fmxx68s{margin-bottom:-1px;}", ".f3tsq5r{width:0;}", ".fniina8{height:0;}", ".fbdn13q{border-left-width:4px;}", ".fdo4c7f{border-right-width:4px;}", ".fjik90z{border-left-style:solid;}", ".fcdblym{border-right-style:solid;}", ".f1pdflbu{border-left-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1st6vq5{border-top-width:7px;}", ".fzkkow9{border-top-style:solid;}", ".f1bpgvfk{border-top-color:var(--colorPaletteBlueBorderActive);}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".f1euv43f{position:absolute;}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".f1emi2st{padding-right:40p;}", ".f53ee3v{padding-left:40p;}", ".flk2ux3{padding-right:var(--spacingHorizontalNone);}", ".fkl3uby{padding-left:var(--spacingHorizontalNone);}", ".fikn0iw{padding-top:var(--spacingVerticalL);}"],
+  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1j86lqe{fill: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)"
+  }]]
+});
+/**
+ * Apply styling to the Carousel slots based on the state
+ */
+export const useHorizontalBarChartStyles = props => {
+  var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12;
+  const {
+    className,
+    showTriangle,
+    variant,
+    hideLabels
+  } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.
+  const baseStyles = useStyles();
+  return {
+    root: mergeClasses(hbcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+    items: mergeClasses(hbcClassNames.items, showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.items16pMargin : baseStyles.items10pMargin, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.items),
+    chart: mergeClasses(hbcClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),
+    chartTitle: mergeClasses(hbcClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),
+    barWrapper: mergeClasses(hbcClassNames.barWrapper, baseStyles.barWrapper, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.barWrapper),
+    chartTitleLeft: mergeClasses(hbcClassNames.chartTitleLeft, baseStyles.chartTitleLeft, variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.chartTitleLeft4pMargin : baseStyles.chartTitleLeft5pMargin, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitleLeft),
+    chartTitleRight: mergeClasses(hbcClassNames.chartTitleRight, baseStyles.chartTitleRight, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitleRight),
+    chartDataTextDenominator: mergeClasses(hbcClassNames.chartDataTextDenominator, baseStyles.chartDataTextDenominator, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.chartDataTextDenominator),
+    benchmarkContainer: mergeClasses(hbcClassNames.benchmarkContainer, baseStyles.benchmarkContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.benchmarkContainer),
+    triangle: mergeClasses(hbcClassNames.triangle, baseStyles.triangle, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.triangle),
+    barLabel: mergeClasses(hbcClassNames.barLabel, baseStyles.barLabel, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.barLabel),
+    chartWrapper: mergeClasses(hbcClassNames.chartWrapper, variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? baseStyles.chartWrapper40ppadding : baseStyles.chartWrapper0ppadding, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.chartWrapper),
+    legendContainer: mergeClasses(hbcClassNames.legendContainer, baseStyles.legendContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.legendContainer)
+  };
+};
+//# sourceMappingURL=useHorizontalBarChartStyles.styles.js.map

package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HorizontalBarChartVariant","HighContrastSelector","hbcClassNames","root","items","chart","chartTitle","barWrapper","chartTitleLeft","chartTitleRight","chartDataTextDenominator","benchmarkContainer","triangle","barLabel","chartWrapper","legendContainer","useStyles","mc9l5x","Beiy3e4","a9b677","items10pMargin","jrapky","items16pMargin","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Brf1p80","ygn44y","Huce71","sj55zd","chartTitleLeft4pMargin","chartTitleLeft5pMargin","qhf8xq","B6of3ja","ibv6hh","wvpqe5","zhjwy3","Bekrc4i","vrafjx","h3c5rm","B4j52fo","icvyot","g2u3we","Bkfmm31","a6j6cd","B93v9kj","chartWrapper40ppadding","z189sj","chartWrapper0ppadding","z8tnut","d","p","m","useHorizontalBarChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","_props_styles9","_props_styles10","_props_styles11","_props_styles12","className","showTriangle","variant","hideLabels","baseStyles","styles","AbsoluteScale"],"sources":["useHorizontalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HorizontalBarChartVariant } from './index';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const hbcClassNames = {\n    root: 'fui-hbc__root',\n    items: 'fui-hbc__items',\n    chart: 'fui-hbc__chart',\n    chartTitle: 'fui-hbc__chartTitle',\n    barWrapper: 'fui-hbc__barWrapper',\n    chartTitleLeft: 'fui-hbc__chartTitleLeft',\n    chartTitleRight: 'fui-hbc__chartTitleRight',\n    chartDataTextDenominator: 'fui-hbc__textDenom',\n    benchmarkContainer: 'fui-hbc__benchmark',\n    triangle: 'fui-hbc__triangle',\n    barLabel: 'fui-hbc__barLabel',\n    chartWrapper: 'fui-hbc__chartWrapper',\n    legendContainer: 'fui-hbc__legendContainer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%'\n    },\n    items10pMargin: {\n        marginBottom: tokens.spacingVerticalMNudge\n    },\n    items16pMargin: {\n        marginBottom: tokens.spacingVerticalL\n    },\n    chart: {\n        width: '100%',\n        height: '12px',\n        display: 'block',\n        overflow: 'visible'\n    },\n    barWrapper: {},\n    chartTitle: {\n        ...typographyStyles.caption1,\n        display: 'flex',\n        justifyContent: 'space-between'\n    },\n    chartTitleLeft: {\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        display: 'block',\n        color: tokens.colorNeutralForeground1\n    },\n    chartTitleLeft4pMargin: {\n        marginBottom: '4px'\n    },\n    chartTitleLeft5pMargin: {\n        marginBottom: '5px'\n    },\n    chartTitleRight: {\n        ...typographyStyles.body1Strong,\n        color: tokens.colorNeutralForeground1\n    },\n    chartDataTextDenominator: {\n        ...typographyStyles.body1,\n        color: tokens.colorNeutralForeground1\n    },\n    benchmarkContainer: {\n        position: 'relative',\n        height: '7px',\n        marginTop: '-3px',\n        marginBottom: '-1px'\n    },\n    triangle: {\n        width: '0',\n        height: '0',\n        ...shorthands.borderLeft('4px', 'solid', 'transparent'),\n        ...shorthands.borderRight('4px', 'solid', 'transparent'),\n        ...shorthands.borderTop('7px', 'solid'),\n        borderTopColor: tokens.colorPaletteBlueBorderActive,\n        marginBottom: tokens.spacingVerticalXS,\n        position: 'absolute'\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'WindowText',\n            forcedColorAdjust: 'none'\n        }\n    },\n    chartWrapper40ppadding: {\n        paddingRight: '40p'\n    },\n    chartWrapper0ppadding: {\n        paddingRight: tokens.spacingHorizontalNone\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useHorizontalBarChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12;\n    const { className, showTriangle, variant, hideLabels } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(hbcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        items: mergeClasses(hbcClassNames.items, showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.items16pMargin : baseStyles.items10pMargin, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.items),\n        chart: mergeClasses(hbcClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),\n        chartTitle: mergeClasses(hbcClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),\n        barWrapper: mergeClasses(hbcClassNames.barWrapper, baseStyles.barWrapper, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.barWrapper),\n        chartTitleLeft: mergeClasses(hbcClassNames.chartTitleLeft, baseStyles.chartTitleLeft, variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.chartTitleLeft4pMargin : baseStyles.chartTitleLeft5pMargin, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitleLeft),\n        chartTitleRight: mergeClasses(hbcClassNames.chartTitleRight, baseStyles.chartTitleRight, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitleRight),\n        chartDataTextDenominator: mergeClasses(hbcClassNames.chartDataTextDenominator, baseStyles.chartDataTextDenominator, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.chartDataTextDenominator),\n        benchmarkContainer: mergeClasses(hbcClassNames.benchmarkContainer, baseStyles.benchmarkContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.benchmarkContainer),\n        triangle: mergeClasses(hbcClassNames.triangle, baseStyles.triangle, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.triangle),\n        barLabel: mergeClasses(hbcClassNames.barLabel, baseStyles.barLabel, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.barLabel),\n        chartWrapper: mergeClasses(hbcClassNames.chartWrapper, variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? baseStyles.chartWrapper40ppadding : baseStyles.chartWrapper0ppadding, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.chartWrapper),\n        legendContainer: mergeClasses(hbcClassNames.legendContainer, baseStyles.legendContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.legendContainer)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Legends/Legends.js

@@ -0,0 +1,302 @@
+import * as React from 'react';
+import { Button } from '@fluentui/react-button';
+import { Shape } from './shape';
+import { useLegendStyles } from './useLegendsStyles.styles';
+import { Overflow, OverflowItem } from '@fluentui/react-overflow';
+import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { OverflowMenu } from './OverflowMenu';
+import { tokens } from '@fluentui/react-theme';
+export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    /** Boolean variable to check if one or more legends are selected */ let _isLegendSelected = false;
+    // set states separately for each instance of the component
+    const [activeLegend, setActiveLegend] = React.useState('');
+    const [selectedLegends, setSelectedLegends] = React.useState({});
+    const focusAttributes = useFocusableGroup();
+    const arrowAttributes = useArrowNavigationGroup({
+        axis: 'horizontal',
+        memorizeCurrent: true
+    });
+    React.useEffect(()=>{
+        let defaultSelectedLegends = {};
+        if (props.canSelectMultipleLegends) {
+            var _props_defaultSelectedLegends;
+            defaultSelectedLegends = ((_props_defaultSelectedLegends = props.defaultSelectedLegends) === null || _props_defaultSelectedLegends === void 0 ? void 0 : _props_defaultSelectedLegends.reduce((combinedDict, key)=>({
+                    [key]: true,
+                    ...combinedDict
+                }), {})) || {};
+        } else if (props.defaultSelectedLegend) {
+            defaultSelectedLegends = {
+                [props.defaultSelectedLegend]: true
+            };
+        }
+        setSelectedLegends(defaultSelectedLegends);
+    }, [
+        props.canSelectMultipleLegends,
+        props.defaultSelectedLegend,
+        props.defaultSelectedLegends
+    ]);
+    _isLegendSelected = Object.keys(selectedLegends).length > 0;
+    const dataToRender = _generateData();
+    const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;
+    const classes = useLegendStyles(props);
+    const itemIds = dataToRender.map((_item, index)=>index.toString());
+    const overflowHoverCardLegends = [];
+    props.legends.map((legend, index)=>{
+        const hoverCardElement = _renderButton(legend, index);
+        overflowHoverCardLegends.push(hoverCardElement);
+    });
+    const overflowString = props.overflowText ? props.overflowText : 'more';
+    return props.enabledWrapLines ? renderWrappedLegends() : renderLegends();
+    function renderLegends() {
+        return /*#__PURE__*/ React.createElement("div", {
+            ...focusAttributes,
+            ...arrowAttributes,
+            ...allowFocusOnLegends && {
+                role: 'listbox',
+                'aria-label': 'Legends',
+                'aria-multiselectable': canSelectMultipleLegends
+            },
+            className: classes.root
+        }, /*#__PURE__*/ React.createElement(Overflow, null, /*#__PURE__*/ React.createElement("div", {
+            className: classes.resizableArea,
+            style: {
+                textAlign: props.centerLegends ? 'center' : 'unset'
+            }
+        }, dataToRender.map((item, id)=>/*#__PURE__*/ React.createElement(OverflowItem, {
+                key: id,
+                id: id.toString()
+            }, _renderButton(item))), /*#__PURE__*/ React.createElement(OverflowMenu, {
+            itemIds: itemIds,
+            title: `${overflowString}`,
+            items: overflowHoverCardLegends
+        }))));
+    }
+    function renderWrappedLegends() {
+        return /*#__PURE__*/ React.createElement("div", {
+            ...focusAttributes,
+            ...arrowAttributes,
+            ...allowFocusOnLegends && {
+                role: 'listbox',
+                'aria-label': 'Legends',
+                'aria-multiselectable': canSelectMultipleLegends
+            },
+            style: {
+                justifyContent: props.centerLegends ? 'center' : 'unset',
+                flexWrap: 'wrap',
+                ...overflowStyles
+            },
+            className: classes.root
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: classes.resizableArea,
+            style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                overflow: 'auto'
+            }
+        }, dataToRender.map((item, id)=>/*#__PURE__*/ React.createElement("div", {
+                key: id,
+                style: {
+                    flex: '0 1 auto',
+                    margin: '4px'
+                }
+            }, _renderButton(item)))));
+    }
+    function _generateData() {
+        const { shape } = props;
+        const dataItems = props.legends.map((legend, index)=>{
+            return {
+                /* ...(allowFocusOnLegends && {
+            nativeButtonProps: getIntrinsicElementProps(
+              'div',
+              {
+                legend,
+                ...buttonProperties,
+              },
+              ['title'],
+            ),
+            'aria-setsize': props.legends.length,
+            'aria-posinset': index + 1,
+          }), */ title: legend.title,
+                action: legend.action,
+                hoverAction: legend.hoverAction,
+                onMouseOutAction: legend.onMouseOutAction,
+                color: legend.color,
+                shape: shape ? shape : legend.shape,
+                stripePattern: legend.stripePattern,
+                isLineLegendInBarChart: legend.isLineLegendInBarChart,
+                opacity: legend.opacity,
+                key: index
+            };
+        });
+        return dataItems;
+    }
+    /**
+     * This function will get called when there is an ability to
+     * select  multiple legends
+     * @param legend ILegend
+     */ function _canSelectMultipleLegends(legend) {
+        let legendsSelected = {
+            ...selectedLegends
+        };
+        if (legendsSelected[legend.title]) {
+            // Delete entry for the deselected legend to make
+            // the number of keys equal to the number of selected legends
+            delete legendsSelected[legend.title];
+        } else {
+            legendsSelected[legend.title] = true;
+            // Clear set if all legends are selected
+            if (Object.keys(legendsSelected).length === props.legends.length) {
+                legendsSelected = {};
+            }
+        }
+        setSelectedLegends(legendsSelected);
+        return legendsSelected;
+    }
+    /**
+     * This function will get called when there is
+     * ability to select only single legend
+     * @param legend ILegend
+     */ function _canSelectOnlySingleLegend(legend) {
+        if (selectedLegends[legend.title]) {
+            setSelectedLegends({});
+            return false;
+        } else {
+            setSelectedLegends({
+                [legend.title]: true
+            });
+            return true;
+        }
+    }
+    function _onClick(legend, event) {
+        var _props_onChange, _legend_action;
+        const { canSelectMultipleLegends = false } = props;
+        let selectedLegends = [];
+        if (canSelectMultipleLegends) {
+            const nextSelectedLegends = _canSelectMultipleLegends(legend);
+            selectedLegends = Object.keys(nextSelectedLegends);
+        } else {
+            const isSelected = _canSelectOnlySingleLegend(legend);
+            selectedLegends = isSelected ? [
+                legend.title
+            ] : [];
+        }
+        (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, selectedLegends, event, legend);
+        (_legend_action = legend.action) === null || _legend_action === void 0 ? void 0 : _legend_action.call(legend);
+    }
+    function _onHoverOverLegend(legend) {
+        if (legend.hoverAction) {
+            setActiveLegend(legend.title);
+            legend.hoverAction();
+        }
+    }
+    function _onLeave(legend) {
+        if (legend.onMouseOutAction) {
+            setActiveLegend('');
+            legend.onMouseOutAction();
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function _renderButton(data, index) {
+        const { allowFocusOnLegends = true } = props;
+        const legend = {
+            title: data.title,
+            color: data.color,
+            shape: data.shape,
+            action: data.action,
+            hoverAction: data.hoverAction,
+            onMouseOutAction: data.onMouseOutAction,
+            stripePattern: data.stripePattern,
+            isLineLegendInBarChart: data.isLineLegendInBarChart,
+            opacity: data.opacity
+        };
+        const color = _getColor(legend.title, legend.color);
+        const onClickHandler = (event)=>{
+            _onClick(legend, event);
+        };
+        const onHoverHandler = ()=>{
+            _onHoverOverLegend(legend);
+        };
+        const onMouseOut = ()=>{
+            _onLeave(legend);
+        };
+        const shape = _getShape(legend, color);
+        return /*#__PURE__*/ React.createElement(Button, {
+            ...allowFocusOnLegends && {
+                'aria-selected': !!selectedLegends[legend.title],
+                role: 'option',
+                'aria-label': `${legend.title}`,
+                'aria-setsize': data['aria-setsize'],
+                'aria-posinset': data['aria-posinset']
+            },
+            ...data.nativeButtonProps && {
+                ...data.nativeButtonProps
+            },
+            key: index,
+            className: classes.legend,
+            onClick: onClickHandler,
+            onMouseOver: onHoverHandler,
+            onMouseOut: onMouseOut,
+            onFocus: onHoverHandler,
+            onBlur: onMouseOut,
+            appearance: 'outline',
+            size: "small",
+            style: {
+                '--rect-height': legend.isLineLegendInBarChart ? '4px' : '12px',
+                '--rect-backgroundColor': legend.stripePattern ? '' : color,
+                '--rect-borderColor': legend.color ? legend.color : tokens.colorNeutralStroke1,
+                '--rect-content': legend.stripePattern ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)` : ''
+            }
+        }, shape, /*#__PURE__*/ React.createElement("div", {
+            className: classes.text,
+            style: {
+                opacity: color === tokens.colorNeutralBackground1 ? '0.67' : ''
+            }
+        }, legend.title));
+    }
+    function _getShape(legend, color) {
+        const svgParentProps = {
+            className: classes.shape
+        };
+        const svgChildProps = {
+            fill: color,
+            strokeWidth: 2,
+            stroke: legend.color
+        };
+        return /*#__PURE__*/ React.createElement(Shape, {
+            svgProps: svgParentProps,
+            pathProps: svgChildProps,
+            shape: legend.shape,
+            classNameForNonSvg: classes.rect,
+            style: {
+                height: legend.isLineLegendInBarChart ? '4px' : '12px',
+                backgroundColor: legend.stripePattern ? '' : color,
+                borderColor: legend.color ? legend.color : tokens.colorNeutralStroke1,
+                content: legend.stripePattern ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)` : '',
+                '--rect-content-high-contrast': `linear-gradient(to right, ${color}, ${color})`,
+                '--rect-opacity-high-contrast': color === tokens.colorNeutralBackground1 ? '0.6' : ''
+            }
+        });
+    }
+    function _getColor(title, color) {
+        let legendColor = color;
+        // if one or more legends are selected
+        if (_isLegendSelected) {
+            // if the given legend (title) is one of the selected legends
+            if (selectedLegends[title]) {
+                legendColor = color;
+            } else {
+                legendColor = tokens.colorNeutralBackground1;
+            }
+        } else {
+            // if the given legend is hovered
+            // or none of the legends is hovered
+            if (activeLegend === title || activeLegend === '') {
+                legendColor = color;
+            } else {
+                legendColor = tokens.colorNeutralBackground1;
+            }
+        }
+        return legendColor;
+    }
+});
+Legends.displayName = 'Legends';

package/lib/components/Legends/Legends.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Legends.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '@fluentui/react-button';\nimport { Legend, LegendsProps, LegendShape } from './Legends.types';\nimport { Shape } from './shape';\nimport { useLegendStyles } from './useLegendsStyles.styles';\nimport { Overflow, OverflowItem } from '@fluentui/react-overflow';\nimport { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { OverflowMenu } from './OverflowMenu';\nimport { tokens } from '@fluentui/react-theme';\n\n// This is an internal interface used for rendering the legends with unique key\ninterface LegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  name?: string;\n  title: string;\n  action: VoidFunction;\n  hoverAction: VoidFunction;\n  onMouseOutAction: VoidFunction;\n  color: string;\n  shape?: LegendShape;\n  key: number;\n  opacity?: number;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\ninterface LegendMap {\n  [key: string]: boolean;\n}\n\nexport interface LegendState {\n  activeLegend: string;\n  /** Set of legends selected, both for multiple selection and single selection */\n  selectedLegends: LegendMap;\n}\nexport const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<HTMLDivElement, LegendsProps>(\n  (props, forwardedRef) => {\n    /** Boolean variable to check if one or more legends are selected */\n    let _isLegendSelected = false;\n\n    // set states separately for each instance of the component\n    const [activeLegend, setActiveLegend] = React.useState('');\n    const [selectedLegends, setSelectedLegends] = React.useState<LegendMap>({});\n    const focusAttributes = useFocusableGroup();\n    const arrowAttributes = useArrowNavigationGroup({ axis: 'horizontal', memorizeCurrent: true });\n\n    React.useEffect(() => {\n      let defaultSelectedLegends = {};\n      if (props.canSelectMultipleLegends) {\n        defaultSelectedLegends =\n          props.defaultSelectedLegends?.reduce((combinedDict, key) => ({ [key]: true, ...combinedDict }), {}) || {};\n      } else if (props.defaultSelectedLegend) {\n        defaultSelectedLegends = { [props.defaultSelectedLegend]: true };\n      }\n\n      setSelectedLegends(defaultSelectedLegends);\n    }, [props.canSelectMultipleLegends, props.defaultSelectedLegend, props.defaultSelectedLegends]);\n\n    _isLegendSelected = Object.keys(selectedLegends).length > 0;\n    const dataToRender = _generateData();\n    const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;\n    const classes = useLegendStyles(props);\n    const itemIds = dataToRender.map((_item, index) => index.toString());\n    const overflowHoverCardLegends: JSX.Element[] = [];\n    props.legends.map((legend, index) => {\n      const hoverCardElement = _renderButton(legend, index);\n      overflowHoverCardLegends.push(hoverCardElement);\n    });\n    const overflowString = props.overflowText ? props.overflowText : 'more';\n    return props.enabledWrapLines ? renderWrappedLegends() : renderLegends();\n\n    function renderLegends(): JSX.Element {\n      return (\n        <div\n          {...focusAttributes}\n          {...arrowAttributes}\n          {...(allowFocusOnLegends && {\n            role: 'listbox',\n            'aria-label': 'Legends',\n            'aria-multiselectable': canSelectMultipleLegends,\n          })}\n          className={classes.root}\n        >\n          <Overflow>\n            <div className={classes.resizableArea} style={{ textAlign: props.centerLegends ? 'center' : 'unset' }}>\n              {dataToRender.map((item, id) => (\n                <OverflowItem key={id} id={id.toString()}>\n                  {_renderButton(item)}\n                </OverflowItem>\n              ))}\n              <OverflowMenu itemIds={itemIds} title={`${overflowString}`} items={overflowHoverCardLegends} />\n            </div>\n          </Overflow>\n        </div>\n      );\n    }\n\n    function renderWrappedLegends(): JSX.Element {\n      return (\n        <div\n          {...focusAttributes}\n          {...arrowAttributes}\n          {...(allowFocusOnLegends && {\n            role: 'listbox',\n            'aria-label': 'Legends',\n            'aria-multiselectable': canSelectMultipleLegends,\n          })}\n          style={{ justifyContent: props.centerLegends ? 'center' : 'unset', flexWrap: 'wrap', ...overflowStyles }}\n          className={classes.root}\n        >\n          <div className={classes.resizableArea} style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}>\n            {dataToRender.map((item, id) => (\n              <div key={id} style={{ flex: '0 1 auto', margin: '4px' }}>\n                {_renderButton(item)}\n              </div>\n            ))}\n          </div>\n        </div>\n      );\n    }\n\n    function _generateData(): LegendItem[] {\n      const { /*allowFocusOnLegends = true,*/ shape } = props;\n      const dataItems: LegendItem[] = props.legends.map((legend: Legend, index: number) => {\n        return {\n          /* ...(allowFocusOnLegends && {\n            nativeButtonProps: getIntrinsicElementProps(\n              'div',\n              {\n                legend,\n                ...buttonProperties,\n              },\n              ['title'],\n            ),\n            'aria-setsize': props.legends.length,\n            'aria-posinset': index + 1,\n          }), */\n          title: legend.title,\n          action: legend.action!,\n          hoverAction: legend.hoverAction!,\n          onMouseOutAction: legend.onMouseOutAction!,\n          color: legend.color,\n          shape: shape ? shape : legend.shape,\n          stripePattern: legend.stripePattern,\n          isLineLegendInBarChart: legend.isLineLegendInBarChart,\n          opacity: legend.opacity,\n          key: index,\n        };\n      });\n      return dataItems;\n    }\n\n    /**\n     * This function will get called when there is an ability to\n     * select  multiple legends\n     * @param legend ILegend\n     */\n    function _canSelectMultipleLegends(legend: Legend): { [key: string]: boolean } {\n      let legendsSelected = { ...selectedLegends };\n      if (legendsSelected[legend.title]) {\n        // Delete entry for the deselected legend to make\n        // the number of keys equal to the number of selected legends\n        delete legendsSelected[legend.title];\n      } else {\n        legendsSelected[legend.title] = true;\n        // Clear set if all legends are selected\n        if (Object.keys(legendsSelected).length === props.legends.length) {\n          legendsSelected = {};\n        }\n      }\n      setSelectedLegends(legendsSelected);\n      return legendsSelected;\n    }\n\n    /**\n     * This function will get called when there is\n     * ability to select only single legend\n     * @param legend ILegend\n     */\n\n    function _canSelectOnlySingleLegend(legend: Legend): boolean {\n      if (selectedLegends[legend.title]) {\n        setSelectedLegends({});\n        return false;\n      } else {\n        setSelectedLegends({ [legend.title]: true });\n        return true;\n      }\n    }\n\n    function _onClick(legend: Legend, event: React.MouseEvent<HTMLButtonElement>): void {\n      const { canSelectMultipleLegends = false } = props;\n      let selectedLegends: string[] = [];\n      if (canSelectMultipleLegends) {\n        const nextSelectedLegends = _canSelectMultipleLegends(legend);\n        selectedLegends = Object.keys(nextSelectedLegends);\n      } else {\n        const isSelected = _canSelectOnlySingleLegend(legend);\n        selectedLegends = isSelected ? [legend.title] : [];\n      }\n      props.onChange?.(selectedLegends, event, legend);\n      legend.action?.();\n    }\n\n    function _onHoverOverLegend(legend: Legend) {\n      if (legend.hoverAction) {\n        setActiveLegend(legend.title);\n        legend.hoverAction();\n      }\n    }\n\n    function _onLeave(legend: Legend) {\n      if (legend.onMouseOutAction) {\n        setActiveLegend('');\n        legend.onMouseOutAction();\n      }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function _renderButton(data: any, index?: number) {\n      const { allowFocusOnLegends = true } = props;\n      const legend: Legend = {\n        title: data.title,\n        color: data.color,\n        shape: data.shape,\n        action: data.action,\n        hoverAction: data.hoverAction,\n        onMouseOutAction: data.onMouseOutAction,\n        stripePattern: data.stripePattern,\n        isLineLegendInBarChart: data.isLineLegendInBarChart,\n        opacity: data.opacity,\n      };\n      const color = _getColor(legend.title, legend.color);\n      const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n        _onClick(legend, event);\n      };\n      const onHoverHandler = () => {\n        _onHoverOverLegend(legend);\n      };\n      const onMouseOut = () => {\n        _onLeave(legend);\n      };\n      const shape = _getShape(legend, color);\n      return (\n        <Button\n          {...(allowFocusOnLegends && {\n            'aria-selected': !!selectedLegends[legend.title],\n            role: 'option',\n            'aria-label': `${legend.title}`,\n            'aria-setsize': data['aria-setsize'],\n            'aria-posinset': data['aria-posinset'],\n          })}\n          {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n          key={index}\n          className={classes.legend}\n          onClick={onClickHandler}\n          onMouseOver={onHoverHandler}\n          onMouseOut={onMouseOut}\n          onFocus={onHoverHandler}\n          onBlur={onMouseOut}\n          appearance={'outline'}\n          size=\"small\"\n          style={{\n            '--rect-height': legend.isLineLegendInBarChart ? '4px' : '12px',\n            '--rect-backgroundColor': legend.stripePattern ? '' : color,\n            '--rect-borderColor': legend.color ? legend.color : tokens.colorNeutralStroke1,\n            '--rect-content': legend.stripePattern\n              ? // eslint-disable-next-line @fluentui/max-len\n                `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n              : '',\n          }} /* eslint-enable react/jsx-no-bind */\n        >\n          {shape}\n          <div className={classes.text} style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}>\n            {legend.title}\n          </div>\n        </Button>\n      );\n    }\n\n    function _getShape(legend: Legend, color: string): React.ReactNode | string {\n      const svgParentProps: React.SVGAttributes<SVGElement> = {\n        className: classes.shape,\n      };\n      const svgChildProps: React.SVGAttributes<SVGElement> = {\n        fill: color,\n        strokeWidth: 2,\n        stroke: legend.color,\n      };\n      return (\n        <Shape\n          svgProps={svgParentProps}\n          pathProps={svgChildProps}\n          shape={legend.shape as LegendShape}\n          classNameForNonSvg={classes.rect}\n          style={\n            {\n              height: legend.isLineLegendInBarChart ? '4px' : '12px',\n              backgroundColor: legend.stripePattern ? '' : color,\n              borderColor: legend.color ? legend.color : tokens.colorNeutralStroke1,\n              content: legend.stripePattern\n                ? // eslint-disable-next-line @fluentui/max-len\n                  `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n                : '',\n              '--rect-content-high-contrast': `linear-gradient(to right, ${color}, ${color})`,\n              '--rect-opacity-high-contrast': color === tokens.colorNeutralBackground1 ? '0.6' : '',\n            } as React.CSSProperties\n          }\n        />\n      );\n    }\n\n    function _getColor(title: string, color: string): string {\n      let legendColor = color;\n      // if one or more legends are selected\n      if (_isLegendSelected) {\n        // if the given legend (title) is one of the selected legends\n        if (selectedLegends[title]) {\n          legendColor = color;\n        }\n        // if the given legend is unselected\n        else {\n          legendColor = tokens.colorNeutralBackground1;\n        }\n      }\n      // if no legend is selected\n      else {\n        // if the given legend is hovered\n        // or none of the legends is hovered\n        if (activeLegend === title || activeLegend === '') {\n          legendColor = color;\n        }\n        // if there is a hovered legend but the given legend is not the one\n        else {\n          legendColor = tokens.colorNeutralBackground1;\n        }\n      }\n      return legendColor;\n    }\n  },\n);\nLegends.displayName = 'Legends';\n"],"names":["React","Button","Shape","useLegendStyles","Overflow","OverflowItem","useFocusableGroup","useArrowNavigationGroup","OverflowMenu","tokens","Legends","forwardRef","props","forwardedRef","_isLegendSelected","activeLegend","setActiveLegend","useState","selectedLegends","setSelectedLegends","focusAttributes","arrowAttributes","axis","memorizeCurrent","useEffect","defaultSelectedLegends","canSelectMultipleLegends","reduce","combinedDict","key","defaultSelectedLegend","Object","keys","length","dataToRender","_generateData","overflowStyles","allowFocusOnLegends","classes","itemIds","map","_item","index","toString","overflowHoverCardLegends","legends","legend","hoverCardElement","_renderButton","push","overflowString","overflowText","enabledWrapLines","renderWrappedLegends","renderLegends","div","role","className","root","resizableArea","style","textAlign","centerLegends","item","id","title","items","justifyContent","flexWrap","display","overflow","flex","margin","shape","dataItems","action","hoverAction","onMouseOutAction","color","stripePattern","isLineLegendInBarChart","opacity","_canSelectMultipleLegends","legendsSelected","_canSelectOnlySingleLegend","_onClick","event","nextSelectedLegends","isSelected","onChange","_onHoverOverLegend","_onLeave","data","_getColor","onClickHandler","onHoverHandler","onMouseOut","_getShape","nativeButtonProps","onClick","onMouseOver","onFocus","onBlur","appearance","size","colorNeutralStroke1","text","colorNeutralBackground1","svgParentProps","svgChildProps","fill","strokeWidth","stroke","svgProps","pathProps","classNameForNonSvg","rect","height","backgroundColor","borderColor","content","legendColor","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/Legends/Legends.types.js

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

package/lib/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":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Legends/OverflowMenu.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';
+import { MenuButton } from '@fluentui/react-button';
+import { useOverflowMenu } from '@fluentui/react-overflow';
+export const OverflowMenu = ({ itemIds, title, items })=>{
+    const { ref, overflowCount, isOverflowing } = 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(MenuItem, {
+            tabIndex: -1,
+            key: i
+        }, items[i]));
+    }
+    return /*#__PURE__*/ React.createElement(Menu, null, /*#__PURE__*/ React.createElement(MenuTrigger, {
+        disableButtonEnhancement: true
+    }, /*#__PURE__*/ React.createElement(MenuButton, {
+        ref: ref
+    }, displayLabel)), /*#__PURE__*/ React.createElement(MenuPopover, null, /*#__PURE__*/ React.createElement(MenuList, null, menuList)));
+};

package/lib/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":["React","Menu","MenuTrigger","MenuPopover","MenuList","MenuItem","MenuButton","useOverflowMenu","OverflowMenu","itemIds","title","items","ref","overflowCount","isOverflowing","displayLabel","remainingItemsCount","length","menuList","i","push","tabIndex","key","disableButtonEnhancement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,WAAW,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,uBAAuB;AAC1F,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,OAAO,MAAMC,eAAqF,CAAC,EACjGC,OAAO,EACPC,KAAK,EACLC,KAAK,EACN;IACC,MAAM,EAAEC,GAAG,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGP;IAC9C,IAAIQ,eAAeL;IACnBK,eAAeL,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,MAAME,sBAAsBP,QAAQQ,MAAM,GAAGJ;IAC7C,MAAMK,WAAW,EAAE;IACnB,IAAK,IAAIC,IAAIH,qBAAqBG,IAAIV,QAAQQ,MAAM,EAAEE,IAAK;QACzDD,SAASE,IAAI,eACX,oBAACf;YAASgB,UAAU,CAAC;YAAGC,KAAKH;WAC1BR,KAAK,CAACQ,EAAE;IAGf;IACA,qBACE,oBAAClB,0BACC,oBAACC;QAAYqB,0BAAAA;qBACX,oBAACjB;QAAWM,KAAKA;OAAMG,8BAGzB,oBAACZ,iCACC,oBAACC,gBAAUc;AAInB,EAAE"}

package/lib/components/Legends/index.js

@@ -0,0 +1,3 @@
+export * from './Legends';
+export * from './Legends.types';
+export * from './shape';

package/lib/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":"AAAA,cAAc,YAAY;AAC1B,cAAc,kBAAkB;AAChC,cAAc,UAAU"}

package/lib/components/Legends/shape.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { CustomPoints, Points } from '../../utilities/utilities';
+const pointPath = {
+    [`${Points[Points.circle]}`]: 'M1 6 A5 5 0 1 0  12 6 M1 6 A5 5 0 0 1  12 6',
+    [`${Points[Points.square]}`]: 'M1 1 L12 1 L12 12  L1 12 L1 1 Z',
+    [`${Points[Points.triangle]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',
+    [`${Points[Points.pyramid]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',
+    [`${Points[Points.diamond]}`]: 'M2 2 L10 2 L10 10  L2 10 L2 2 Z',
+    [`${Points[Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z',
+    [`${Points[Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',
+    [`${Points[Points.octagon]}`]: 'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',
+    [`${CustomPoints[CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13'
+};
+export 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 === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0}, 0, 0)`,
+        style: {
+            width: '14px',
+            height: '14px'
+        }
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: pointPath[shape],
+        ...pathProps
+    }));
+});