@fluentui/react-charting 5.23.12 → 5.23.14

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

@@ -1,314 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LegendsBase = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var HoverCard_1 = require("@fluentui/react/lib/HoverCard");
-var Utilities_1 = require("@fluentui/react/lib/Utilities");
-var ResizeGroup_1 = require("@fluentui/react/lib/ResizeGroup");
-var OverflowSet_1 = require("@fluentui/react/lib/OverflowSet");
-var react_focus_1 = require("@fluentui/react-focus");
-var shape_1 = require("./shape");
-var getClassNames = (0, Utilities_1.classNamesFunction)();
-var LegendsBase = /** @class */ (function (_super) {
-    tslib_1.__extends(LegendsBase, _super);
-    function LegendsBase(props) {
-        var _a;
-        var _this = this;
-        var _b;
-        _this = _super.call(this, props) || this;
-        /** Boolean variable to check if one or more legends are selected */
-        _this._isLegendSelected = false;
-        _this._onRenderData = function (data) {
-            var _a = _this.props, overflowProps = _a.overflowProps, _b = _a.allowFocusOnLegends, allowFocusOnLegends = _b === void 0 ? true : _b, _c = _a.canSelectMultipleLegends, canSelectMultipleLegends = _c === void 0 ? false : _c;
-            var rootStyles = {
-                root: {
-                    justifyContent: _this.props.centerLegends ? 'center' : 'unset',
-                    flexWrap: 'wrap',
-                },
-            };
-            return (React.createElement(react_focus_1.FocusZone, tslib_1.__assign({}, (allowFocusOnLegends && {
-                role: 'listbox',
-                'aria-label': 'Legends',
-                'aria-multiselectable': canSelectMultipleLegends,
-            })),
-                React.createElement(OverflowSet_1.OverflowSet, tslib_1.__assign({ items: data.primary, overflowItems: data.overflow, onRenderItem: _this._renderButton, onRenderOverflowButton: _this._renderOverflowItems }, overflowProps, { styles: tslib_1.__assign(tslib_1.__assign({}, rootStyles), overflowProps === null || overflowProps === void 0 ? void 0 : overflowProps.styles) }))));
-        };
-        _this._onReduceData = function (currentdata) {
-            if (currentdata.primary.length === 0) {
-                return;
-            }
-            var overflow = tslib_1.__spreadArray(tslib_1.__spreadArray([], currentdata.primary.slice(-1), true), currentdata.overflow, true);
-            var primary = currentdata.primary.slice(0, -1);
-            return { primary: primary, overflow: overflow };
-        };
-        _this._onGrowData = function (currentdata) {
-            if (currentdata.overflow.length === 0) {
-                return;
-            }
-            var overflow = currentdata.overflow.slice(1);
-            var primary = tslib_1.__spreadArray(tslib_1.__spreadArray([], currentdata.primary, true), currentdata.overflow.slice(0, 1), true);
-            return { primary: primary, overflow: overflow };
-        };
-        /**
-         * This function will get called when there is an ability to
-         * select  multiple legends
-         * @param legend ILegend
-         */
-        _this._canSelectMultipleLegends = function (legend) {
-            var selectedLegends = tslib_1.__assign({}, _this.state.selectedLegends);
-            if (selectedLegends[legend.title]) {
-                // Delete entry for the deselected legend to make
-                // the number of keys equal to the number of selected legends
-                delete selectedLegends[legend.title];
-            }
-            else {
-                selectedLegends[legend.title] = true;
-                // Clear set if all legends are selected
-                if (Object.keys(selectedLegends).length === _this.props.legends.length) {
-                    selectedLegends = {};
-                }
-            }
-            _this.setState({ selectedLegends: selectedLegends });
-            return selectedLegends;
-        };
-        /**
-         * This function will get called when there is
-         * ability to select only single legend
-         * @param legend ILegend
-         */
-        _this._canSelectOnlySingleLegend = function (legend) {
-            var _a;
-            if (_this.state.selectedLegends[legend.title]) {
-                _this.setState({ selectedLegends: {} });
-                return false;
-            }
-            else {
-                _this.setState({ selectedLegends: (_a = {}, _a[legend.title] = true, _a) });
-                return true;
-            }
-        };
-        _this._onClick = function (legend, event) {
-            var _a, _b, _c;
-            var _d = _this.props.canSelectMultipleLegends, canSelectMultipleLegends = _d === void 0 ? false : _d;
-            var selectedLegends = [];
-            if (canSelectMultipleLegends) {
-                var nextSelectedLegends = _this._canSelectMultipleLegends(legend);
-                selectedLegends = Object.keys(nextSelectedLegends);
-            }
-            else {
-                var isSelected = _this._canSelectOnlySingleLegend(legend);
-                selectedLegends = isSelected ? [legend.title] : [];
-            }
-            (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, selectedLegends, event, legend);
-            (_c = legend.action) === null || _c === void 0 ? void 0 : _c.call(legend);
-        };
-        _this._onRenderCompactCard = function (expandingCard) {
-            var _a = _this.props, _b = _a.allowFocusOnLegends, allowFocusOnLegends = _b === void 0 ? true : _b, className = _a.className, styles = _a.styles, theme = _a.theme, _c = _a.canSelectMultipleLegends, canSelectMultipleLegends = _c === void 0 ? false : _c;
-            var overflowHoverCardLegends = [];
-            var classNames = getClassNames(styles, {
-                theme: theme,
-                className: className,
-            });
-            expandingCard.renderData.forEach(function (legend, index) {
-                var hoverCardElement = _this._renderButton(legend, index, true);
-                overflowHoverCardLegends.push(hoverCardElement);
-            });
-            var hoverCardData = (React.createElement(react_focus_1.FocusZone, tslib_1.__assign({}, (allowFocusOnLegends && {
-                role: 'listbox',
-                'aria-label': 'Legends',
-                'aria-multiselectable': canSelectMultipleLegends,
-            }), { direction: react_focus_1.FocusZoneDirection.vertical, handleTabKey: react_focus_1.FocusZoneTabbableElements.all, isCircularNavigation: true }, _this.props.focusZonePropsInHoverCard, { className: classNames.hoverCardRoot }), overflowHoverCardLegends));
-            return hoverCardData;
-        };
-        _this._renderOverflowItems = function (legends) {
-            var _a = _this.props.allowFocusOnLegends, allowFocusOnLegends = _a === void 0 ? true : _a;
-            var items = [];
-            legends.forEach(function (legend, i) {
-                items.push({ key: i.toString(), name: legend.title, onClick: legend.action });
-            });
-            var renderOverflowData = { renderData: legends };
-            var _b = _this.props, theme = _b.theme, className = _b.className, styles = _b.styles, overflowText = _b.overflowText;
-            var classNames = getClassNames(styles, {
-                theme: theme,
-                className: className,
-            });
-            var plainCardProps = {
-                onRenderPlainCard: _this._onRenderCompactCard,
-                renderData: renderOverflowData,
-            };
-            var overflowString = overflowText ? overflowText : 'more';
-            // execute similar to "_onClick" and "_onLeave" logic at HoverCard onCardHide event
-            var onHoverCardHideHandler = function () {
-                _this.setState({ isHoverCardVisible: false });
-                // Unhighlight the focused legend in the hover card
-                var activeOverflowItem = (0, Utilities_1.find)(legends, function (legend) { return legend.title === _this.state.activeLegend; });
-                if (activeOverflowItem) {
-                    _this.setState({ activeLegend: '' });
-                    if (activeOverflowItem.onMouseOutAction) {
-                        activeOverflowItem.onMouseOutAction();
-                    }
-                }
-            };
-            return (React.createElement(HoverCard_1.HoverCard, { type: HoverCard_1.HoverCardType.plain, plainCardProps: plainCardProps, instantOpenOnClick: true, 
-                // eslint-disable-next-line react/jsx-no-bind
-                onCardHide: onHoverCardHideHandler, setInitialFocus: true, trapFocus: true, onCardVisible: _this._hoverCardVisible, styles: classNames.subComponentStyles.hoverCardStyles, cardDismissDelay: 300, target: _this._hoverCardRef },
-                React.createElement("div", { role: "option" },
-                    React.createElement("div", tslib_1.__assign({ className: classNames.overflowIndicationTextStyle, ref: function (rootElem) { return (_this._hoverCardRef = rootElem); } }, (allowFocusOnLegends && {
-                        role: 'button',
-                        'aria-expanded': _this.state.isHoverCardVisible,
-                        'aria-label': "".concat(items.length, " ").concat(overflowString),
-                    }), { "data-is-focusable": allowFocusOnLegends }),
-                        items.length,
-                        " ",
-                        overflowString))));
-        };
-        _this._hoverCardVisible = function () {
-            _this.setState({ isHoverCardVisible: true });
-        };
-        _this._onHoverOverLegend = function (legend) {
-            if (legend.hoverAction) {
-                _this.setState({ activeLegend: legend.title });
-                legend.hoverAction();
-            }
-        };
-        _this._onLeave = function (legend) {
-            if (legend.onMouseOutAction) {
-                _this.setState({ activeLegend: '' });
-                legend.onMouseOutAction();
-            }
-        };
-        _this._renderButton = function (data, index, overflow) {
-            var _a = _this.props.allowFocusOnLegends, allowFocusOnLegends = _a === void 0 ? true : _a;
-            var 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,
-            };
-            var color = _this._getColor(legend.title, legend.color);
-            var _b = _this.props, theme = _b.theme, className = _b.className, styles = _b.styles;
-            var classNames = getClassNames(styles, {
-                theme: theme,
-                className: className,
-                colorOnSelectedState: color,
-                borderColor: legend.color,
-                overflow: overflow,
-                stripePattern: legend.stripePattern,
-                isLineLegendInBarChart: legend.isLineLegendInBarChart,
-                opacity: legend.opacity,
-            });
-            var onClickHandler = function (event) {
-                _this._onClick(legend, event);
-            };
-            var onHoverHandler = function () {
-                _this._onHoverOverLegend(legend);
-            };
-            var onMouseOut = function () {
-                _this._onLeave(legend);
-            };
-            var shape = _this._getShape(classNames, legend, color);
-            return (React.createElement("button", tslib_1.__assign({}, (allowFocusOnLegends && {
-                'aria-selected': !!_this.state.selectedLegends[legend.title],
-                role: 'option',
-                'aria-label': "".concat(legend.title),
-                'aria-setsize': data['aria-setsize'],
-                'aria-posinset': data['aria-posinset'],
-            }), (data.nativeButtonProps && tslib_1.__assign({}, data.nativeButtonProps)), { key: index, className: classNames.legend, onClick: onClickHandler, onMouseOver: onHoverHandler, onMouseOut: onMouseOut, onFocus: onHoverHandler, onBlur: onMouseOut, "data-is-focusable": allowFocusOnLegends }),
-                shape,
-                React.createElement("div", { className: classNames.text }, legend.title)));
-        };
-        var defaultSelectedLegends = {};
-        if (props.canSelectMultipleLegends) {
-            defaultSelectedLegends =
-                ((_b = props.defaultSelectedLegends) === null || _b === void 0 ? void 0 : _b.reduce(function (combinedDict, key) {
-                    var _a;
-                    return (tslib_1.__assign((_a = {}, _a[key] = true, _a), combinedDict));
-                }, {})) || {};
-        }
-        else if (props.defaultSelectedLegend) {
-            defaultSelectedLegends = (_a = {}, _a[props.defaultSelectedLegend] = true, _a);
-        }
-        _this.state = {
-            activeLegend: '',
-            isHoverCardVisible: false,
-            selectedLegends: defaultSelectedLegends,
-        };
-        return _this;
-    }
-    LegendsBase.prototype.render = function () {
-        var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles;
-        this._classNames = getClassNames(styles, {
-            theme: theme,
-            className: className,
-        });
-        this._isLegendSelected = Object.keys(this.state.selectedLegends).length > 0;
-        var dataToRender = this._generateData();
-        return (React.createElement("div", { className: this._classNames.root }, this.props.enabledWrapLines ? (this._onRenderData(dataToRender)) : (React.createElement(ResizeGroup_1.ResizeGroup, { data: dataToRender, onReduceData: this._onReduceData, onRenderData: this._onRenderData, onGrowData: this._onGrowData }))));
-    };
-    LegendsBase.prototype._generateData = function () {
-        var _this = this;
-        var _a = this.props, _b = _a.allowFocusOnLegends, allowFocusOnLegends = _b === void 0 ? true : _b, shape = _a.shape;
-        var dataItems = this.props.legends.map(function (legend, index) {
-            return tslib_1.__assign(tslib_1.__assign({}, (allowFocusOnLegends && {
-                nativeButtonProps: (0, Utilities_1.getNativeProps)(legend, Utilities_1.buttonProperties, [
-                    'title',
-                ]),
-                'aria-setsize': _this.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 });
-        });
-        var result = {
-            primary: dataItems,
-            overflow: [],
-        };
-        return result;
-    };
-    LegendsBase.prototype._getShape = function (classNames, legend, color) {
-        var svgParentProps = {
-            className: classNames.shape,
-        };
-        var svgChildProps = {
-            fill: color,
-            strokeWidth: 2,
-            stroke: legend.color,
-        };
-        return (React.createElement(shape_1.Shape, { svgProps: svgParentProps, pathProps: svgChildProps, shape: legend.shape, classNameForNonSvg: classNames.rect }));
-    };
-    LegendsBase.prototype._getColor = function (title, color) {
-        var theme = this.props.theme;
-        var legendColor = color;
-        // if one or more legends are selected
-        if (this._isLegendSelected) {
-            // if the given legend (title) is one of the selected legends
-            if (this.state.selectedLegends[title]) {
-                legendColor = color;
-            }
-            // if the given legend is unselected
-            else {
-                legendColor = theme.semanticColors.buttonBackground;
-            }
-        }
-        // if no legend is selected
-        else {
-            // if the given legend is hovered
-            // or none of the legends is hovered
-            if (this.state.activeLegend === title || this.state.activeLegend === '') {
-                legendColor = color;
-            }
-            // if there is a hovered legend but the given legend is not the one
-            else {
-                legendColor = theme.semanticColors.buttonBackground;
-            }
-        }
-        return legendColor;
-    };
-    return LegendsBase;
-}(React.Component));
-exports.LegendsBase = LegendsBase;
-//# sourceMappingURL=Legends.base.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Legends.base.js","sourceRoot":"../src/","sources":["components/Legends/Legends.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAG/B,2DAA8F;AAC9F,2DAA2G;AAC3G,+DAA8D;AAE9D,+DAAqF;AACrF,qDAAiG;AASjG,iCAAgC;AAEhC,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAqC,CAAC;AAuB9E;IAAiC,uCAA4C;IAM3E,qBAAmB,KAAoB;;QAAvC,iBAeC;;gBAdC,kBAAM,KAAK,CAAC;QAJd,oEAAoE;QAC5D,uBAAiB,GAAG,KAAK,CAAC;QAyE1B,mBAAa,GAAG,UAAC,IAAiD;YAClE,IAAA,KAAkF,KAAI,CAAC,KAAK,EAA1F,aAAa,mBAAA,EAAE,2BAA0B,EAA1B,mBAAmB,mBAAG,IAAI,KAAA,EAAE,gCAAgC,EAAhC,wBAAwB,mBAAG,KAAK,KAAe,CAAC;YACnG,IAAM,UAAU,GAAG;gBACjB,IAAI,EAAE;oBACJ,cAAc,EAAE,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;oBAC7D,QAAQ,EAAE,MAAM;iBACjB;aACF,CAAC;YACF,OAAO,CACL,oBAAC,uBAAS,uBACJ,CAAC,mBAAmB,IAAI;gBAC1B,IAAI,EAAE,SAAS;gBACf,YAAY,EAAE,SAAS;gBACvB,sBAAsB,EAAE,wBAAwB;aACjD,CAAC;gBAEF,oBAAC,yBAAW,qBACV,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,aAAa,EAAE,IAAI,CAAC,QAAQ,EAC5B,YAAY,EAAE,KAAI,CAAC,aAAa,EAChC,sBAAsB,EAAE,KAAI,CAAC,oBAAoB,IAC7C,aAAa,IACjB,MAAM,wCAAO,UAAU,GAAK,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,KACjD,CACQ,CACb,CAAC;QACJ,CAAC,CAAC;QAEM,mBAAa,GAAG,UAAC,WAAkC;YACzD,IAAI,WAAW,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACpC,OAAO;aACR;YACD,IAAM,QAAQ,mDAAO,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAK,WAAW,CAAC,QAAQ,OAAC,CAAC;YAC7E,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACjD,OAAO,EAAE,OAAO,SAAA,EAAE,QAAQ,UAAA,EAAE,CAAC;QAC/B,CAAC,CAAC;QAEM,iBAAW,GAAG,UAAC,WAAkC;YACvD,IAAI,WAAW,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;gBACrC,OAAO;aACR;YACD,IAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC/C,IAAM,OAAO,mDAAO,WAAW,CAAC,OAAO,SAAK,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,OAAC,CAAC;YAC9E,OAAO,EAAE,OAAO,SAAA,EAAE,QAAQ,UAAA,EAAE,CAAC;QAC/B,CAAC,CAAC;QAEF;;;;WAIG;QACK,+BAAyB,GAAG,UAAC,MAAe;YAClD,IAAI,eAAe,wBAAQ,KAAI,CAAC,KAAK,CAAC,eAAe,CAAE,CAAC;YACxD,IAAI,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;gBACjC,iDAAiD;gBACjD,6DAA6D;gBAC7D,OAAO,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACtC;iBAAM;gBACL,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;gBACrC,wCAAwC;gBACxC,IAAI,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,KAAK,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;oBACrE,eAAe,GAAG,EAAE,CAAC;iBACtB;aACF;YACD,KAAI,CAAC,QAAQ,CAAC,EAAE,eAAe,iBAAA,EAAE,CAAC,CAAC;YACnC,OAAO,eAAe,CAAC;QACzB,CAAC,CAAC;QAEF;;;;WAIG;QAEK,gCAA0B,GAAG,UAAC,MAAe;;YACnD,IAAI,KAAI,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;gBAC5C,KAAI,CAAC,QAAQ,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;gBACvC,OAAO,KAAK,CAAC;aACd;iBAAM;gBACL,KAAI,CAAC,QAAQ,CAAC,EAAE,eAAe,YAAI,GAAC,MAAM,CAAC,KAAK,IAAG,IAAI,KAAE,EAAE,CAAC,CAAC;gBAC7D,OAAO,IAAI,CAAC;aACb;QACH,CAAC,CAAC;QAEM,cAAQ,GAAG,UAAC,MAAe,EAAE,KAA0C;;YACrE,IAAA,KAAqC,KAAI,CAAC,KAAK,yBAAf,EAAhC,wBAAwB,mBAAG,KAAK,KAAA,CAAgB;YACxD,IAAI,eAAe,GAAa,EAAE,CAAC;YACnC,IAAI,wBAAwB,EAAE;gBAC5B,IAAM,mBAAmB,GAAG,KAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,CAAC;gBACnE,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;aACpD;iBAAM;gBACL,IAAM,UAAU,GAAG,KAAI,CAAC,0BAA0B,CAAC,MAAM,CAAC,CAAC;gBAC3D,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;aACpD;YACD,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,QAAQ,mDAAG,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;YACtD,MAAA,MAAM,CAAC,MAAM,sDAAI,CAAC;QACpB,CAAC,CAAC;QAEM,0BAAoB,GAAG,UAAC,aAAkC;YAC1D,IAAA,KAA6F,KAAI,CAAC,KAAK,EAArG,2BAA0B,EAA1B,mBAAmB,mBAAG,IAAI,KAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,gCAAgC,EAAhC,wBAAwB,mBAAG,KAAK,KAAe,CAAC;YAC9G,IAAM,wBAAwB,GAAkB,EAAE,CAAC;YACnD,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,SAAS,WAAA;aACV,CAAC,CAAC;YACH,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,UAAC,MAA6B,EAAE,KAAa;gBAC5E,IAAM,gBAAgB,GAAG,KAAI,CAAC,aAAa,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;gBACjE,wBAAwB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAClD,CAAC,CAAC,CAAC;YACH,IAAM,aAAa,GAAG,CACpB,oBAAC,uBAAS,uBACJ,CAAC,mBAAmB,IAAI;gBAC1B,IAAI,EAAE,SAAS;gBACf,YAAY,EAAE,SAAS;gBACvB,sBAAsB,EAAE,wBAAwB;aACjD,CAAC,IACF,SAAS,EAAE,gCAAkB,CAAC,QAAQ,EACtC,YAAY,EAAE,uCAAyB,CAAC,GAAG,EAC3C,oBAAoB,EAAE,IAAI,IACtB,KAAI,CAAC,KAAK,CAAC,yBAAyB,IACxC,SAAS,EAAE,UAAU,CAAC,aAAa,KAElC,wBAAwB,CACf,CACb,CAAC;YACF,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;QAEM,0BAAoB,GAAG,UAAC,OAAkB;YACxC,IAAA,KAA+B,KAAI,CAAC,KAAK,oBAAf,EAA1B,mBAAmB,mBAAG,IAAI,KAAA,CAAgB;YAClD,IAAM,KAAK,GAA0B,EAAE,CAAC;YACxC,OAAO,CAAC,OAAO,CAAC,UAAC,MAAe,EAAE,CAAS;gBACzC,KAAK,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;YAChF,CAAC,CAAC,CAAC;YACH,IAAM,kBAAkB,GAAwB,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;YAClE,IAAA,KAA6C,KAAI,CAAC,KAAK,EAArD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,YAAY,kBAAe,CAAC;YAC9D,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,SAAS,WAAA;aACV,CAAC,CAAC;YACH,IAAM,cAAc,GAAG;gBACrB,iBAAiB,EAAE,KAAI,CAAC,oBAAoB;gBAC5C,UAAU,EAAE,kBAAkB;aAC/B,CAAC;YAEF,IAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC;YAC5D,mFAAmF;YACnF,IAAM,sBAAsB,GAAG;gBAC7B,KAAI,CAAC,QAAQ,CAAC,EAAE,kBAAkB,EAAE,KAAK,EAAE,CAAC,CAAC;gBAC7C,mDAAmD;gBACnD,IAAM,kBAAkB,GAAG,IAAA,gBAAI,EAAC,OAAO,EAAE,UAAC,MAAe,IAAK,OAAA,MAAM,CAAC,KAAK,KAAK,KAAI,CAAC,KAAK,CAAC,YAAY,EAAxC,CAAwC,CAAC,CAAC;gBACxG,IAAI,kBAAkB,EAAE;oBACtB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;oBACpC,IAAI,kBAAkB,CAAC,gBAAgB,EAAE;wBACvC,kBAAkB,CAAC,gBAAgB,EAAE,CAAC;qBACvC;iBACF;YACH,CAAC,CAAC;YACF,OAAO,CACL,oBAAC,qBAAS,IACR,IAAI,EAAE,yBAAa,CAAC,KAAK,EACzB,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE,IAAI;gBACxB,6CAA6C;gBAC7C,UAAU,EAAE,sBAAsB,EAClC,eAAe,EAAE,IAAI,EACrB,SAAS,EAAE,IAAI,EACf,aAAa,EAAE,KAAI,CAAC,iBAAiB,EACrC,MAAM,EAAE,UAAU,CAAC,kBAAkB,CAAC,eAAe,EACrD,gBAAgB,EAAE,GAAG,EACrB,MAAM,EAAE,KAAI,CAAC,aAAa;gBAG1B,6BAAK,IAAI,EAAC,QAAQ;oBAChB,8CACE,SAAS,EAAE,UAAU,CAAC,2BAA2B,EACjD,GAAG,EAAE,UAAC,QAAwB,IAAK,OAAA,CAAC,KAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,EAA/B,CAA+B,IAC9D,CAAC,mBAAmB,IAAI;wBAC1B,IAAI,EAAE,QAAQ;wBACd,eAAe,EAAE,KAAI,CAAC,KAAK,CAAC,kBAAkB;wBAC9C,YAAY,EAAE,UAAG,KAAK,CAAC,MAAM,cAAI,cAAc,CAAE;qBAClD,CAAC,yBACiB,mBAAmB;wBAErC,KAAK,CAAC,MAAM;;wBAAG,cAAc,CAC1B,CACF,CACI,CACb,CAAC;QACJ,CAAC,CAAC;QAEM,uBAAiB,GAAG;YAC1B,KAAI,CAAC,QAAQ,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEM,wBAAkB,GAAG,UAAC,MAAe;YAC3C,IAAI,MAAM,CAAC,WAAW,EAAE;gBACtB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC9C,MAAM,CAAC,WAAW,EAAE,CAAC;aACtB;QACH,CAAC,CAAC;QAEM,cAAQ,GAAG,UAAC,MAAe;YACjC,IAAI,MAAM,CAAC,gBAAgB,EAAE;gBAC3B,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;gBACpC,MAAM,CAAC,gBAAgB,EAAE,CAAC;aAC3B;QACH,CAAC,CAAC;QAEM,mBAAa,GAAG,UAAC,IAA2B,EAAE,KAAc,EAAE,QAAkB;YAC9E,IAAA,KAA+B,KAAI,CAAC,KAAK,oBAAf,EAA1B,mBAAmB,mBAAG,IAAI,KAAA,CAAgB;YAClD,IAAM,MAAM,GAAY;gBACtB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gBACvC,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB;gBACnD,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC;YACF,IAAM,KAAK,GAAG,KAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;YACnD,IAAA,KAA+B,KAAI,CAAC,KAAK,EAAvC,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAe,CAAC;YAChD,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,SAAS,WAAA;gBACT,oBAAoB,EAAE,KAAK;gBAC3B,WAAW,EAAE,MAAM,CAAC,KAAK;gBACzB,QAAQ,UAAA;gBACR,aAAa,EAAE,MAAM,CAAC,aAAa;gBACnC,sBAAsB,EAAE,MAAM,CAAC,sBAAsB;gBACrD,OAAO,EAAE,MAAM,CAAC,OAAO;aACxB,CAAC,CAAC;YACH,IAAM,cAAc,GAAG,UAAC,KAA0C;gBAChE,KAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YAC/B,CAAC,CAAC;YACF,IAAM,cAAc,GAAG;gBACrB,KAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;YAClC,CAAC,CAAC;YACF,IAAM,UAAU,GAAG;gBACjB,KAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;YACxB,CAAC,CAAC;YACF,IAAM,KAAK,GAAG,KAAI,CAAC,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;YACxD,OAAO,CACL,mDACM,CAAC,mBAAmB,IAAI;gBAC1B,eAAe,EAAE,CAAC,CAAC,KAAI,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC;gBAC3D,IAAI,EAAE,QAAQ;gBACd,YAAY,EAAE,UAAG,MAAM,CAAC,KAAK,CAAE;gBAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;gBACpC,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC;aACvC,CAAC,EACE,CAAC,IAAI,CAAC,iBAAiB,yBAAS,IAAI,CAAC,iBAAiB,CAAE,CAAC,IAC7D,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,UAAU,CAAC,MAAM,EAC5B,OAAO,EAAE,cAAc,EACvB,WAAW,EAAE,cAAc,EAC3B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,cAAc,EACvB,MAAM,EAAE,UAAU,uBACC,mBAAmB;gBAGrC,KAAK;gBACN,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,IAAG,MAAM,CAAC,KAAK,CAAO,CAC9C,CACV,CAAC;QACJ,CAAC,CAAC;QAjVA,IAAI,sBAAsB,GAAG,EAAE,CAAC;QAChC,IAAI,KAAK,CAAC,wBAAwB,EAAE;YAClC,sBAAsB;gBACpB,CAAA,MAAA,KAAK,CAAC,sBAAsB,0CAAE,MAAM,CAAC,UAAC,YAAY,EAAE,GAAG;;oBAAK,OAAA,+BAAI,GAAG,IAAG,IAAI,OAAK,YAAY,EAAG;gBAAlC,CAAkC,EAAE,EAAE,CAAC,KAAI,EAAE,CAAC;SAC7G;aAAM,IAAI,KAAK,CAAC,qBAAqB,EAAE;YACtC,sBAAsB,aAAK,GAAC,KAAK,CAAC,qBAAqB,IAAG,IAAI,KAAE,CAAC;SAClE;QAED,KAAI,CAAC,KAAK,GAAG;YACX,YAAY,EAAE,EAAE;YAChB,kBAAkB,EAAE,KAAK;YACzB,eAAe,EAAE,sBAAsB;SACxC,CAAC;;IACJ,CAAC;IAEM,4BAAM,GAAb;QACQ,IAAA,KAA+B,IAAI,CAAC,KAAK,EAAvC,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAe,CAAC;QAChD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,SAAS,WAAA;SACV,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QAC5E,IAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1C,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,IAClC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAC7B,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CACjC,CAAC,CAAC,CAAC,CACF,oBAAC,yBAAW,IACV,IAAI,EAAE,YAAY,EAClB,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,UAAU,EAAE,IAAI,CAAC,WAAW,GAC5B,CACH,CACG,CACP,CAAC;IACJ,CAAC;IAEO,mCAAa,GAArB;QAAA,iBA4BC;QA3BO,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,2BAA0B,EAA1B,mBAAmB,mBAAG,IAAI,KAAA,EAAE,KAAK,WAAe,CAAC;QACzD,IAAM,SAAS,GAAkB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,MAAe,EAAE,KAAa;YACrF,6CACK,CAAC,mBAAmB,IAAI;gBACzB,iBAAiB,EAAE,IAAA,0BAAc,EAA0C,MAAM,EAAE,4BAAgB,EAAE;oBACnG,OAAO;iBACR,CAAC;gBACF,cAAc,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;gBACzC,eAAe,EAAE,KAAK,GAAG,CAAC;aAC3B,CAAC,KACF,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,MAAM,EAAE,MAAM,CAAC,MAAO,EACtB,WAAW,EAAE,MAAM,CAAC,WAAY,EAChC,gBAAgB,EAAE,MAAM,CAAC,gBAAiB,EAC1C,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EACnC,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,sBAAsB,EAAE,MAAM,CAAC,sBAAsB,EACrD,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,GAAG,EAAE,KAAK,IACV;QACJ,CAAC,CAAC,CAAC;QACH,IAAM,MAAM,GAAwB;YAClC,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,EAAE;SACb,CAAC;QACF,OAAO,MAAM,CAAC;IAChB,CAAC;IAgRO,+BAAS,GAAjB,UACE,UAA8C,EAC9C,MAAe,EACf,KAAa;QAEb,IAAM,cAAc,GAAoC;YACtD,SAAS,EAAE,UAAU,CAAC,KAAK;SAC5B,CAAC;QACF,IAAM,aAAa,GAAoC;YACrD,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,CAAC;YACd,MAAM,EAAE,MAAM,CAAC,KAAK;SACrB,CAAC;QACF,OAAO,CACL,oBAAC,aAAK,IACJ,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,MAAM,CAAC,KAAoB,EAClC,kBAAkB,EAAE,UAAU,CAAC,IAAI,GACnC,CACH,CAAC;IACJ,CAAC;IAEO,+BAAS,GAAjB,UAAkB,KAAa,EAAE,KAAa;QACpC,IAAA,KAAK,GAAK,IAAI,CAAC,KAAK,MAAf,CAAgB;QAC7B,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,sCAAsC;QACtC,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,6DAA6D;YAC7D,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;gBACrC,WAAW,GAAG,KAAK,CAAC;aACrB;YACD,oCAAoC;iBAC/B;gBACH,WAAW,GAAG,KAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC;aACtD;SACF;QACD,2BAA2B;aACtB;YACH,iCAAiC;YACjC,oCAAoC;YACpC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,EAAE,EAAE;gBACvE,WAAW,GAAG,KAAK,CAAC;aACrB;YACD,mEAAmE;iBAC9D;gBACH,WAAW,GAAG,KAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC;aACtD;SACF;QACD,OAAO,WAAW,CAAC;IACrB,CAAC;IACH,kBAAC;AAAD,CAAC,AA9YD,CAAiC,KAAK,CAAC,SAAS,GA8Y/C;AA9YY,kCAAW","sourcesContent":["import * as React from 'react';\n\nimport { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';\nimport { HoverCard, HoverCardType, IExpandingCardProps } from '@fluentui/react/lib/HoverCard';\nimport { classNamesFunction, find, getNativeProps, buttonProperties } from '@fluentui/react/lib/Utilities';\nimport { ResizeGroup } from '@fluentui/react/lib/ResizeGroup';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport {\n  ILegend,\n  ILegendsProps,\n  LegendShape,\n  ILegendsStyles,\n  ILegendStyleProps,\n  ILegendOverflowData,\n} from './Legends.types';\nimport { Shape } from './shape';\n\nconst getClassNames = classNamesFunction<ILegendStyleProps, ILegendsStyles>();\n\n// This is an internal interface used for rendering the legends with unique key\ninterface ILegendItem 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\nexport interface ILegendState {\n  activeLegend: string;\n  isHoverCardVisible: boolean;\n  /** Set of legends selected, both for multiple selection and single selection */\n  selectedLegends: { [key: string]: boolean };\n}\nexport class LegendsBase extends React.Component<ILegendsProps, ILegendState> {\n  private _hoverCardRef: HTMLDivElement;\n  private _classNames: IProcessedStyleSet<ILegendsStyles>;\n  /** Boolean variable to check if one or more legends are selected */\n  private _isLegendSelected = false;\n\n  public constructor(props: ILegendsProps) {\n    super(props);\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    this.state = {\n      activeLegend: '',\n      isHoverCardVisible: false,\n      selectedLegends: defaultSelectedLegends,\n    };\n  }\n\n  public render(): JSX.Element {\n    const { theme, className, styles } = this.props;\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    this._isLegendSelected = Object.keys(this.state.selectedLegends).length > 0;\n    const dataToRender = this._generateData();\n    return (\n      <div className={this._classNames.root}>\n        {this.props.enabledWrapLines ? (\n          this._onRenderData(dataToRender)\n        ) : (\n          <ResizeGroup\n            data={dataToRender}\n            onReduceData={this._onReduceData}\n            onRenderData={this._onRenderData}\n            onGrowData={this._onGrowData}\n          />\n        )}\n      </div>\n    );\n  }\n\n  private _generateData(): ILegendOverflowData {\n    const { allowFocusOnLegends = true, shape } = this.props;\n    const dataItems: ILegendItem[] = this.props.legends.map((legend: ILegend, index: number) => {\n      return {\n        ...(allowFocusOnLegends && {\n          nativeButtonProps: getNativeProps<React.HTMLAttributes<HTMLButtonElement>>(legend, buttonProperties, [\n            'title',\n          ]),\n          'aria-setsize': this.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    const result: ILegendOverflowData = {\n      primary: dataItems,\n      overflow: [],\n    };\n    return result;\n  }\n\n  private _onRenderData = (data: IOverflowSetItemProps | ILegendOverflowData): JSX.Element => {\n    const { overflowProps, allowFocusOnLegends = true, canSelectMultipleLegends = false } = this.props;\n    const rootStyles = {\n      root: {\n        justifyContent: this.props.centerLegends ? 'center' : 'unset',\n        flexWrap: 'wrap',\n      },\n    };\n    return (\n      <FocusZone\n        {...(allowFocusOnLegends && {\n          role: 'listbox',\n          'aria-label': 'Legends',\n          'aria-multiselectable': canSelectMultipleLegends,\n        })}\n      >\n        <OverflowSet\n          items={data.primary}\n          overflowItems={data.overflow}\n          onRenderItem={this._renderButton}\n          onRenderOverflowButton={this._renderOverflowItems}\n          {...overflowProps}\n          styles={{ ...rootStyles, ...overflowProps?.styles }}\n        />\n      </FocusZone>\n    );\n  };\n\n  private _onReduceData = (currentdata: IOverflowSetItemProps): {} | void => {\n    if (currentdata.primary.length === 0) {\n      return;\n    }\n    const overflow = [...currentdata.primary.slice(-1), ...currentdata.overflow];\n    const primary = currentdata.primary.slice(0, -1);\n    return { primary, overflow };\n  };\n\n  private _onGrowData = (currentdata: IOverflowSetItemProps): {} | void => {\n    if (currentdata.overflow.length === 0) {\n      return;\n    }\n    const overflow = currentdata.overflow.slice(1);\n    const primary = [...currentdata.primary, ...currentdata.overflow.slice(0, 1)];\n    return { primary, overflow };\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  private _canSelectMultipleLegends = (legend: ILegend): { [key: string]: boolean } => {\n    let selectedLegends = { ...this.state.selectedLegends };\n    if (selectedLegends[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 selectedLegends[legend.title];\n    } else {\n      selectedLegends[legend.title] = true;\n      // Clear set if all legends are selected\n      if (Object.keys(selectedLegends).length === this.props.legends.length) {\n        selectedLegends = {};\n      }\n    }\n    this.setState({ selectedLegends });\n    return selectedLegends;\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  private _canSelectOnlySingleLegend = (legend: ILegend): boolean => {\n    if (this.state.selectedLegends[legend.title]) {\n      this.setState({ selectedLegends: {} });\n      return false;\n    } else {\n      this.setState({ selectedLegends: { [legend.title]: true } });\n      return true;\n    }\n  };\n\n  private _onClick = (legend: ILegend, event: React.MouseEvent<HTMLButtonElement>): void => {\n    const { canSelectMultipleLegends = false } = this.props;\n    let selectedLegends: string[] = [];\n    if (canSelectMultipleLegends) {\n      const nextSelectedLegends = this._canSelectMultipleLegends(legend);\n      selectedLegends = Object.keys(nextSelectedLegends);\n    } else {\n      const isSelected = this._canSelectOnlySingleLegend(legend);\n      selectedLegends = isSelected ? [legend.title] : [];\n    }\n    this.props.onChange?.(selectedLegends, event, legend);\n    legend.action?.();\n  };\n\n  private _onRenderCompactCard = (expandingCard: IExpandingCardProps): JSX.Element => {\n    const { allowFocusOnLegends = true, className, styles, theme, canSelectMultipleLegends = false } = this.props;\n    const overflowHoverCardLegends: JSX.Element[] = [];\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    expandingCard.renderData.forEach((legend: IOverflowSetItemProps, index: number) => {\n      const hoverCardElement = this._renderButton(legend, index, true);\n      overflowHoverCardLegends.push(hoverCardElement);\n    });\n    const hoverCardData = (\n      <FocusZone\n        {...(allowFocusOnLegends && {\n          role: 'listbox',\n          'aria-label': 'Legends',\n          'aria-multiselectable': canSelectMultipleLegends,\n        })}\n        direction={FocusZoneDirection.vertical}\n        handleTabKey={FocusZoneTabbableElements.all}\n        isCircularNavigation={true}\n        {...this.props.focusZonePropsInHoverCard}\n        className={classNames.hoverCardRoot}\n      >\n        {overflowHoverCardLegends}\n      </FocusZone>\n    );\n    return hoverCardData;\n  };\n\n  private _renderOverflowItems = (legends: ILegend[]) => {\n    const { allowFocusOnLegends = true } = this.props;\n    const items: IContextualMenuItem[] = [];\n    legends.forEach((legend: ILegend, i: number) => {\n      items.push({ key: i.toString(), name: legend.title, onClick: legend.action });\n    });\n    const renderOverflowData: IExpandingCardProps = { renderData: legends };\n    const { theme, className, styles, overflowText } = this.props;\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    const plainCardProps = {\n      onRenderPlainCard: this._onRenderCompactCard,\n      renderData: renderOverflowData,\n    };\n\n    const overflowString = overflowText ? overflowText : 'more';\n    // execute similar to \"_onClick\" and \"_onLeave\" logic at HoverCard onCardHide event\n    const onHoverCardHideHandler = () => {\n      this.setState({ isHoverCardVisible: false });\n      // Unhighlight the focused legend in the hover card\n      const activeOverflowItem = find(legends, (legend: ILegend) => legend.title === this.state.activeLegend);\n      if (activeOverflowItem) {\n        this.setState({ activeLegend: '' });\n        if (activeOverflowItem.onMouseOutAction) {\n          activeOverflowItem.onMouseOutAction();\n        }\n      }\n    };\n    return (\n      <HoverCard\n        type={HoverCardType.plain}\n        plainCardProps={plainCardProps}\n        instantOpenOnClick={true}\n        // eslint-disable-next-line react/jsx-no-bind\n        onCardHide={onHoverCardHideHandler}\n        setInitialFocus={true}\n        trapFocus={true}\n        onCardVisible={this._hoverCardVisible}\n        styles={classNames.subComponentStyles.hoverCardStyles}\n        cardDismissDelay={300}\n        target={this._hoverCardRef}\n      >\n        {/* \"button\" role is not allowed as a child of parent role \"listbox\" */}\n        <div role=\"option\">\n          <div\n            className={classNames.overflowIndicationTextStyle}\n            ref={(rootElem: HTMLDivElement) => (this._hoverCardRef = rootElem)}\n            {...(allowFocusOnLegends && {\n              role: 'button',\n              'aria-expanded': this.state.isHoverCardVisible,\n              'aria-label': `${items.length} ${overflowString}`,\n            })}\n            data-is-focusable={allowFocusOnLegends}\n          >\n            {items.length} {overflowString}\n          </div>\n        </div>\n      </HoverCard>\n    );\n  };\n\n  private _hoverCardVisible = () => {\n    this.setState({ isHoverCardVisible: true });\n  };\n\n  private _onHoverOverLegend = (legend: ILegend) => {\n    if (legend.hoverAction) {\n      this.setState({ activeLegend: legend.title });\n      legend.hoverAction();\n    }\n  };\n\n  private _onLeave = (legend: ILegend) => {\n    if (legend.onMouseOutAction) {\n      this.setState({ activeLegend: '' });\n      legend.onMouseOutAction();\n    }\n  };\n\n  private _renderButton = (data: IOverflowSetItemProps, index?: number, overflow?: boolean) => {\n    const { allowFocusOnLegends = true } = this.props;\n    const legend: ILegend = {\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 = this._getColor(legend.title, legend.color);\n    const { theme, className, styles } = this.props;\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n      colorOnSelectedState: color,\n      borderColor: legend.color,\n      overflow,\n      stripePattern: legend.stripePattern,\n      isLineLegendInBarChart: legend.isLineLegendInBarChart,\n      opacity: legend.opacity,\n    });\n    const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n      this._onClick(legend, event);\n    };\n    const onHoverHandler = () => {\n      this._onHoverOverLegend(legend);\n    };\n    const onMouseOut = () => {\n      this._onLeave(legend);\n    };\n    const shape = this._getShape(classNames, legend, color);\n    return (\n      <button\n        {...(allowFocusOnLegends && {\n          'aria-selected': !!this.state.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={classNames.legend}\n        onClick={onClickHandler}\n        onMouseOver={onHoverHandler}\n        onMouseOut={onMouseOut}\n        onFocus={onHoverHandler}\n        onBlur={onMouseOut}\n        data-is-focusable={allowFocusOnLegends}\n        /* eslint-enable react/jsx-no-bind */\n      >\n        {shape}\n        <div className={classNames.text}>{legend.title}</div>\n      </button>\n    );\n  };\n\n  private _getShape(\n    classNames: IProcessedStyleSet<ILegendsStyles>,\n    legend: ILegend,\n    color: string,\n  ): React.ReactNode | string {\n    const svgParentProps: React.SVGAttributes<SVGElement> = {\n      className: classNames.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={classNames.rect}\n      />\n    );\n  }\n\n  private _getColor(title: string, color: string): string {\n    const { theme } = this.props;\n    let legendColor = color;\n    // if one or more legends are selected\n    if (this._isLegendSelected) {\n      // if the given legend (title) is one of the selected legends\n      if (this.state.selectedLegends[title]) {\n        legendColor = color;\n      }\n      // if the given legend is unselected\n      else {\n        legendColor = theme!.semanticColors.buttonBackground;\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 (this.state.activeLegend === title || this.state.activeLegend === '') {\n        legendColor = color;\n      }\n      // if there is a hovered legend but the given legend is not the one\n      else {\n        legendColor = theme!.semanticColors.buttonBackground;\n      }\n    }\n    return legendColor;\n  }\n}\n"]}

package/lib-commonjs/components/Legends/Legends.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { ILegendsProps } from './Legends.types';
-/**
- * Legends component
- * {@docCategory Legends}
- */
-export declare const Legends: React.FunctionComponent<ILegendsProps>;

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

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Legends = void 0;
-var Utilities_1 = require("@fluentui/react/lib/Utilities");
-var Legends_base_1 = require("./Legends.base");
-var Legends_styles_1 = require("./Legends.styles");
-/**
- * Legends component
- * {@docCategory Legends}
- */
-exports.Legends = (0, Utilities_1.styled)(Legends_base_1.LegendsBase, Legends_styles_1.getStyles);
-//# sourceMappingURL=Legends.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Legends.js","sourceRoot":"../src/","sources":["components/Legends/Legends.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD,+CAA6C;AAC7C,mDAA6C;AAE7C;;;GAGG;AACU,QAAA,OAAO,GAA2C,IAAA,kBAAM,EACnE,0BAAW,EACX,0BAAS,CACV,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ILegendsProps, ILegendStyleProps, ILegendsStyles } from './Legends.types';\nimport { LegendsBase } from './Legends.base';\nimport { getStyles } from './Legends.styles';\n\n/**\n * Legends component\n * {@docCategory Legends}\n */\nexport const Legends: React.FunctionComponent<ILegendsProps> = styled<ILegendsProps, ILegendStyleProps, ILegendsStyles>(\n  LegendsBase,\n  getStyles,\n);\n"]}

package/lib-commonjs/components/Legends/Legends.styles.d.ts

@@ -1,2 +0,0 @@
-import { ILegendsStyles, ILegendStyleProps } from './Legends.types';
-export declare const getStyles: (props: ILegendStyleProps) => ILegendsStyles;

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

@@ -1,111 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStyles = void 0;
-var tslib_1 = require("tslib");
-var Styling_1 = require("@fluentui/react/lib/Styling");
-var getStyles = function (props) {
-    var _a, _b;
-    var className = props.className, theme = props.theme, _c = props.isLineLegendInBarChart, isLineLegendInBarChart = _c === void 0 ? false : _c;
-    var _d = theme, palette = _d.palette, fonts = _d.fonts;
-    var options = {
-        inset: undefined,
-        position: undefined,
-        highContrastStyle: {
-            outlineColor: theme.semanticColors.focusBorder,
-        },
-        borderColor: 'transparent',
-        outlineColor: undefined,
-    };
-    return {
-        root: [
-            {
-                whiteSpace: 'nowrap',
-                width: '100%',
-                alignItems: 'center',
-                margin: '-8px 0 0 -8px',
-            },
-            className,
-        ],
-        legend: [
-            (0, Styling_1.getFocusStyle)(theme, options),
-            {
-                display: 'flex',
-                alignItems: 'center',
-                cursor: 'pointer',
-                border: 'none',
-                padding: '8px',
-                background: 'none',
-                textTransform: 'capitalize',
-            },
-        ],
-        rect: {
-            selectors: (_a = {},
-                _a[Styling_1.HighContrastSelector] = {
-                    content: "linear-gradient(to right, ".concat(props.colorOnSelectedState, ", ").concat(props.colorOnSelectedState, ")"),
-                    opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground ? '0.6' : '',
-                },
-                _a),
-            width: '12px',
-            height: isLineLegendInBarChart ? '4px' : '12px',
-            backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,
-            marginRight: '8px',
-            border: '1px solid',
-            borderColor: props.borderColor ? props.borderColor : theme === null || theme === void 0 ? void 0 : theme.semanticColors.buttonBorder,
-            content: props.stripePattern
-                ? // eslint-disable-next-line @fluentui/max-len
-                    "repeating-linear-gradient(135deg, transparent, transparent 3px, ".concat(props.colorOnSelectedState, " 1px, ").concat(props.colorOnSelectedState, " 4px)")
-                : '',
-        },
-        shape: [
-            {
-                marginRight: '8px',
-            },
-        ],
-        triangle: {
-            width: '0',
-            height: '0',
-            borderLeft: '6px solid transparent',
-            borderRight: '6px solid transparent',
-            borderTop: '10.4px solid',
-            borderTopColor: props.colorOnSelectedState,
-            marginRight: '8px',
-            opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground
-                ? '0.6'
-                : props.opacity
-                    ? props.opacity
-                    : '',
-            selectors: (_b = {},
-                _b[Styling_1.HighContrastSelector] = {
-                    border: '0px',
-                    height: '10.4px',
-                    width: '10.4px',
-                    clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
-                    backgroundImage: "linear-gradient(to right, ".concat(props.colorOnSelectedState, ", ").concat(props.colorOnSelectedState, ")"),
-                },
-                _b),
-        },
-        text: tslib_1.__assign(tslib_1.__assign({}, fonts.small), { lineHeight: '16px', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground ? '0.67' : '' }),
-        hoverChange: {
-            width: '12px',
-            height: '12px',
-            backgroundColor: theme.semanticColors.buttonBackground,
-            marginRight: '8px',
-            border: '1px solid',
-            borderColor: props.borderColor ? props.borderColor : palette.black,
-        },
-        overflowIndicationTextStyle: [
-            (0, Styling_1.getFocusStyle)(theme, options),
-            tslib_1.__assign(tslib_1.__assign({ cursor: 'pointer', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText }, fonts.small), { lineHeight: '16px', padding: '8px' }),
-        ],
-        hoverCardRoot: {
-            padding: '8px',
-        },
-        subComponentStyles: {
-            hoverCardStyles: {
-                host: [(0, Styling_1.getFocusStyle)(theme, options)],
-            },
-        },
-    };
-};
-exports.getStyles = getStyles;
-//# sourceMappingURL=Legends.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Legends.styles.js","sourceRoot":"../src/","sources":["components/Legends/Legends.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ILegendsStyles, ILegendStyleProps } from './Legends.types';\nimport { HighContrastSelector, getFocusStyle, IGetFocusStylesOptions, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: ILegendStyleProps): ILegendsStyles => {\n  const { className, theme, isLineLegendInBarChart = false } = props;\n  const { palette, fonts } = theme!;\n  const options: IGetFocusStylesOptions = {\n    inset: undefined,\n    position: undefined,\n    highContrastStyle: {\n      outlineColor: theme!.semanticColors.focusBorder,\n    },\n    borderColor: 'transparent',\n    outlineColor: undefined,\n  };\n  return {\n    root: [\n      {\n        whiteSpace: 'nowrap',\n        width: '100%',\n        alignItems: 'center',\n        margin: '-8px 0 0 -8px',\n      },\n      className,\n    ],\n    legend: [\n      getFocusStyle(theme!, options),\n      {\n        display: 'flex',\n        alignItems: 'center',\n        cursor: 'pointer',\n        border: 'none',\n        padding: '8px',\n        background: 'none',\n        textTransform: 'capitalize',\n      },\n    ],\n    rect: {\n      selectors: {\n        [HighContrastSelector]: {\n          content: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n          opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? '0.6' : '',\n        },\n      },\n      width: '12px',\n      height: isLineLegendInBarChart ? '4px' : '12px',\n      backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,\n      marginRight: '8px',\n      border: '1px solid',\n      borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,\n      content: props.stripePattern\n        ? // eslint-disable-next-line @fluentui/max-len\n          `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`\n        : '',\n    },\n    shape: [\n      {\n        marginRight: '8px',\n      },\n    ],\n    triangle: {\n      width: '0',\n      height: '0',\n      borderLeft: '6px solid transparent',\n      borderRight: '6px solid transparent',\n      borderTop: '10.4px solid',\n      borderTopColor: props.colorOnSelectedState,\n      marginRight: '8px',\n      opacity:\n        props.colorOnSelectedState === theme!.semanticColors.buttonBackground\n          ? '0.6'\n          : props.opacity\n          ? props.opacity\n          : '',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '10.4px',\n          width: '10.4px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n        } as IStyle,\n      },\n    },\n    text: {\n      ...fonts.small,\n      lineHeight: '16px',\n      color: theme?.semanticColors.bodyText,\n      opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? '0.67' : '',\n    },\n    hoverChange: {\n      width: '12px',\n      height: '12px',\n      backgroundColor: theme!.semanticColors.buttonBackground,\n      marginRight: '8px',\n      border: '1px solid',\n      borderColor: props.borderColor ? props.borderColor : palette.black,\n    },\n    overflowIndicationTextStyle: [\n      getFocusStyle(theme!, options),\n      {\n        cursor: 'pointer',\n        color: theme?.semanticColors.bodyText,\n        ...fonts.small,\n        lineHeight: '16px',\n        padding: '8px',\n      },\n    ],\n    hoverCardRoot: {\n      padding: '8px',\n    },\n    subComponentStyles: {\n      hoverCardStyles: {\n        host: [getFocusStyle(theme!, options)],\n      },\n    },\n  };\n};\n"]}