npm - @fluentui/react-charts - Versions diffs - 9.3.22 → 9.3.24 - Mend

@fluentui/react-charts 9.3.22 → 9.3.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (755) hide show

package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { HorizontalBarChartWithAxisProps, HorizontalBarChartWithAxisStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\nexport const hbcWithAxisClassNames: SlotClassNames<HorizontalBarChartWithAxisStyles> = {\n opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n xAxisTicks: 'fui-hbcwa__xAxisTicks',\n tooltip: 'fui-hbcwa__tooltip',\n barLabel: 'fui-hbcwa__barLabel',\n chartLabel: '',\n xAxisDomain: '',\n xAxisText: '',\n yAxisDomain: '',\n yAxisTicks: '',\n yAxisText: '',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n plotContainer: '',\n annotationLayer: '',\n};\n\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n opacity: 0.1, // supports custom opacity\n },\n\n xAxisTicks: {},\n\n barLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n stroke: 'CanvasText',\n },\n },\n});\n\n/*\n Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */\nexport const useHorizontalBarChartWithAxisStyles = (\n props: HorizontalBarChartWithAxisProps,\n): HorizontalBarChartWithAxisStyles => {\n const baseStyles = useStyles();\n\n return {\n opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks),\n barLabel: mergeClasses(hbcWithAxisClassNames.barLabel, baseStyles.barLabel),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","barLabel","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","opacity","caption1Strong","fill","colorNeutralForeground1","stroke","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,QAAQ,~~wBAAwB~~;AAE7D,OAAO,MAAMC,wBAA0E;IACrFC,sBAAsB;IACtBC,YAAY;IACZC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,aAAa;IACbC,WAAW;IACXC,aAAa;IACbC,YAAY;IACZC,WAAW;IACXC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;IAChBC,eAAe;IACfC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,YAAY/B,WAAW;IAC3BM,sBAAsB;QACpB0B,SAAS;IACX;IAEAzB,YAAY,CAAC;IAEbE,UAAU;QACR,GAAGN,iBAAiB8B,cAAc;QAClCC,MAAMhC,OAAOiC,uBAAuB;QACpC,CAAC/B,qBAAqB,EAAE;YACtBgC,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CACjDC;IAEA,MAAMC,aAAaR;IAEnB,OAAO;QACLzB,sBAAsBL,aAAaI,sBAAsBC,oBAAoB,EAAEiC,WAAWjC,oBAAoB;QAC9GC,YAAYN,aAAaI,sBAAsBE,UAAU,EAAEgC,WAAWhC,UAAU;QAChFE,UAAUR,aAAaI,sBAAsBI,QAAQ,EAAE8B,WAAW9B,QAAQ;IAC5E;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { HorizontalBarChartWithAxisProps, HorizontalBarChartWithAxisStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\nexport const hbcWithAxisClassNames: SlotClassNames<HorizontalBarChartWithAxisStyles> = {\n opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n xAxisTicks: 'fui-hbcwa__xAxisTicks',\n tooltip: 'fui-hbcwa__tooltip',\n barLabel: 'fui-hbcwa__barLabel',\n chartLabel: '',\n xAxisDomain: '',\n xAxisText: '',\n yAxisDomain: '',\n yAxisTicks: '',\n yAxisText: '',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n plotContainer: '',\n annotationLayer: '',\n};\n\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n opacity: 0.1, // supports custom opacity\n },\n\n xAxisTicks: {},\n\n barLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n stroke: 'CanvasText',\n },\n },\n});\n\n/*\n Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */\nexport const useHorizontalBarChartWithAxisStyles = (\n props: HorizontalBarChartWithAxisProps,\n): HorizontalBarChartWithAxisStyles => {\n const baseStyles = useStyles();\n\n return {\n opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks),\n barLabel: mergeClasses(hbcWithAxisClassNames.barLabel, baseStyles.barLabel),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","barLabel","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","opacity","caption1Strong","fill","colorNeutralForeground1","stroke","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,QAAQ,2BAAwB;AAE7D,OAAO,MAAMC,wBAA0E;IACrFC,sBAAsB;IACtBC,YAAY;IACZC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,aAAa;IACbC,WAAW;IACXC,aAAa;IACbC,YAAY;IACZC,WAAW;IACXC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;IAChBC,eAAe;IACfC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,YAAY/B,WAAW;IAC3BM,sBAAsB;QACpB0B,SAAS;IACX;IAEAzB,YAAY,CAAC;IAEbE,UAAU;QACR,GAAGN,iBAAiB8B,cAAc;QAClCC,MAAMhC,OAAOiC,uBAAuB;QACpC,CAAC/B,qBAAqB,EAAE;YACtBgC,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CACjDC;IAEA,MAAMC,aAAaR;IAEnB,OAAO;QACLzB,sBAAsBL,aAAaI,sBAAsBC,oBAAoB,EAAEiC,WAAWjC,oBAAoB;QAC9GC,YAAYN,aAAaI,sBAAsBE,UAAU,EAAEgC,WAAWhC,UAAU;QAChFE,UAAUR,aAAaI,sBAAsBI,QAAQ,EAAE8B,WAAW9B,QAAQ;IAC5E;AACF,EAAE"}

package/lib/components/Legends/Legends.js CHANGED Viewed

@@ -1,14 +1,14 @@
 'use client';
-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';
-import { cloneLegendsToSVG } from '../../utilities/image-export-utils';
-import { mergeClasses } from '@griffel/react';
+import * as React from "react";
+import { Button } from "@fluentui/react-button";
+import { Shape } from "./shape.js";
+import { useLegendStyles } from "./useLegendsStyles.styles.js";
+import { Overflow, OverflowItem } from "@fluentui/react-overflow";
+import { useFocusableGroup, useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { OverflowMenu } from "./OverflowMenu.js";
+import { tokens } from "@fluentui/react-theme";
+import { cloneLegendsToSVG } from "../../utilities/image-export-utils.js";
+import { mergeClasses } from "@griffel/react";
 export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     /** Boolean variable to check if one or more legends are selected */ let _isLegendSelected = false;
     const _rootElem = React.useRef(null);
@@ -70,7 +70,7 @@ export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const itemIds = dataToRender.map((_item, index)=>index.toString());
     const overflowHoverCardLegends = [];
     dataToRender.map((legend, index)=>{
-        const hoverCardElement = _renderButton(legend, index);
+        const hoverCardElement = _renderButton(legend, index, true);
         overflowHoverCardLegends.push(hoverCardElement);
     });
     const overflowString = props.overflowText ? props.overflowText : 'more';
@@ -79,11 +79,6 @@ export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         return /*#__PURE__*/ React.createElement("div", {
             ...focusAttributes,
             ...arrowAttributes,
-            ...allowFocusOnLegends && {
-                role: 'listbox',
-                'aria-label': 'Legends',
-                'aria-multiselectable': canSelectMultipleLegends
-            },
             className: classes.root,
             ref: _rootElem
         }, /*#__PURE__*/ React.createElement(Overflow, null, /*#__PURE__*/ React.createElement("div", {
@@ -91,10 +86,19 @@ export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             style: {
                 textAlign: props.centerLegends ? 'center' : 'unset'
             }
+        }, /*#__PURE__*/ React.createElement("div", {
+            ...allowFocusOnLegends && {
+                role: 'listbox',
+                'aria-label': 'Legends',
+                'aria-multiselectable': canSelectMultipleLegends
+            },
+            style: {
+                display: 'contents'
+            }
         }, dataToRender.map((item, id)=>/*#__PURE__*/ React.createElement(OverflowItem, {
                 key: id,
                 id: id.toString()
-            }, _renderButton(item))), /*#__PURE__*/ React.createElement(OverflowMenu, {
+            }, _renderButton(item, id)))), /*#__PURE__*/ React.createElement(OverflowMenu, {
             itemIds: itemIds,
             title: `${overflowString}`,
             items: overflowHoverCardLegends
@@ -123,10 +127,10 @@ export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                 flexWrap: 'wrap',
                 overflow: 'auto'
             }
-        }, dataToRender.map((item)=>/*#__PURE__*/ React.createElement("div", {
+        }, dataToRender.map((item, id)=>/*#__PURE__*/ React.createElement("div", {
                 className: mergeClasses(classes.legendContainer, item.legendAnnotation && classes.annotation),
                 key: item.key
-            }, _renderButton(item), item.legendAnnotation && /*#__PURE__*/ React.createElement("div", null, item.legendAnnotation())))));
+            }, _renderButton(item, id), item.legendAnnotation && /*#__PURE__*/ React.createElement("div", null, item.legendAnnotation())))));
     }
     function _generateData() {
         const { shape } = props;
@@ -217,8 +221,10 @@ export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         }
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function _renderButton(data, index) {
+    function _renderButton(data, index, isOverflowItem) {
         const { allowFocusOnLegends = true } = props;
+        // Overflow legends are rendered inside a menu, not the listbox, so they must not carry `option` semantics.
+        const showListboxOption = allowFocusOnLegends && !isOverflowItem;
         const legend = {
             title: data.title,
             color: data.color,
@@ -241,38 +247,62 @@ export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             _onLeave(legend);
         };
         const shape = _getShape(legend, color);
+        const legendStyle = {
+            '--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)` : ''
+        };
+        const legendContent = /*#__PURE__*/ React.createElement(React.Fragment, null, shape, /*#__PURE__*/ React.createElement("div", {
+            className: classes.text,
+            style: {
+                opacity: color === tokens.colorNeutralBackground1 ? '0.67' : ''
+            }
+        }, legend.title));
+        // Shared by the listbox Button and the overflow div. Hover/focus handlers are included so the overflow
+        // menu can forward them to its item (the div itself never receives focus).
+        const commonProps = {
+            className: classes.legend,
+            onClick: onClickHandler,
+            onMouseOver: onHoverHandler,
+            onMouseOut: onMouseOut,
+            onFocus: onHoverHandler,
+            onBlur: onMouseOut,
+            style: legendStyle
+        };
+        if (isOverflowItem) {
+            // In the overflow menu the item itself is interactive, so keep this content a non-interactive div to
+            // avoid nested clickable elements. display:flex lays the swatch and label out inline (a bare div would
+            // stack them). data-selected / data-title are read by the overflow menu to drive its checked state.
+            return /*#__PURE__*/ React.createElement("div", {
+                key: index,
+                ...commonProps,
+                "data-selected": !!selectedLegends[legend.title],
+                "data-title": legend.title,
+                style: {
+                    ...legendStyle,
+                    display: 'flex',
+                    alignItems: 'center'
+                }
+            }, legendContent);
+        }
         return /*#__PURE__*/ React.createElement(Button, {
-            ...allowFocusOnLegends && {
+            ...showListboxOption && {
                 'aria-selected': !!selectedLegends[legend.title],
                 role: 'option',
                 'aria-label': `${legend.title}`,
-                'aria-setsize': data['aria-setsize'],
-                'aria-posinset': data['aria-posinset']
+                // Full-list position so counts match the overflow menu.
+                'aria-setsize': props.legends.length,
+                'aria-posinset': (index !== null && index !== void 0 ? index : 0) + 1
             },
             ...data.nativeButtonProps && {
                 ...data.nativeButtonProps
             },
             key: index,
-            className: classes.legend,
-            onClick: onClickHandler,
-            onMouseOver: onHoverHandler,
-            onMouseOut: onMouseOut,
-            onFocus: onHoverHandler,
-            onBlur: onMouseOut,
+            ...commonProps,
             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));
+            size: "small"
+        }, legendContent);
     }
     function _getShape(legend, color) {
         const svgParentProps = {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Legends/Legends.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { Button } from '@fluentui/react-button';\nimport type { 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';\nimport { cloneLegendsToSVG } from '../../utilities/image-export-utils';\nimport { mergeClasses } from '@griffel/react';\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 legendAnnotation?: () => React.ReactNode;\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 const _rootElem = React.useRef<HTMLDivElement \| null>(null);\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 const classes = useLegendStyles(props);\n const toSVG = React.useCallback(\n (svgWidth: number, isRTL: boolean = false) => {\n return cloneLegendsToSVG(\n props.legends,\n svgWidth,\n {\n selectedLegends,\n centerLegends: !!props.centerLegends,\n textClassName: classes.text!,\n isRTL,\n },\n _rootElem.current,\n );\n },\n [props.legends, props.centerLegends, selectedLegends, classes.text],\n );\n\n React.useImperativeHandle(props.legendRef, () => ({\n toSVG,\n }));\n\n React.useEffect(() => {\n const initialSelectedLegends = props.selectedLegends ?? props.defaultSelectedLegends;\n const initialSelectedLegend = props.selectedLegend ?? props.defaultSelectedLegend;\n let selectedLegendsState = {};\n if (props.canSelectMultipleLegends) {\n selectedLegendsState =\n (initialSelectedLegends ?? [])?.reduce(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (combineDict: any, key: any) => ({ [key]: true, ...combineDict }),\n {},\n ) \|\| {};\n setSelectedLegends(selectedLegendsState);\n } else if (initialSelectedLegend !== undefined) {\n selectedLegendsState = { [initialSelectedLegend]: true };\n setSelectedLegends(selectedLegendsState);\n }\n }, [\n props.canSelectMultipleLegends,\n props.defaultSelectedLegend,\n props.defaultSelectedLegends,\n props.selectedLegend,\n props.selectedLegends,\n ]);\n\n _isLegendSelected = Object.keys(selectedLegends).length > 0;\n const dataToRender = _generateData();\n const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;\n const itemIds = dataToRender.map((_item, index) => index.toString());\n const overflowHoverCardLegends: JSXElement[] = [];\n dataToRender.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(): JSXElement {\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 ref={_rootElem}\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(): JSXElement {\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 ref={_rootElem}\n >\n <div className={classes.resizableArea} style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}>\n {dataToRender.map(item => (\n <div\n className={mergeClasses(classes.legendContainer, item.legendAnnotation && classes.annotation)}\n key={item.key}\n >\n {_renderButton(item)}\n {item.legendAnnotation && <div>{item.legendAnnotation()}</div>}\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 legendAnnotation: legend.legendAnnotation,\n };\n });\n return dataItems;\n }\n\n /\n Determine whether the component is in \"controlled\" mode for selections, where the selected legend(s) are\n * determined entirely by props passed in from the parent component.\n /\n function _isInControlledMode(): boolean {\n return props.canSelectMultipleLegends ? props.selectedLegends !== undefined : props.selectedLegend !== undefined;\n }\n\n /\n Get the new selected legends based on the legend that was clicked when multi-select is enabled.\n * @param legend The legend that was clicked\n * @returns An object with the new selected legend(s) state data.\n /\n function _getNewSelectedLegendsForMultiselect(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 return legendsSelected;\n }\n\n /\n Get the new selected legends based on the legend that was clicked when single-select is enabled.\n * @param legend The legend that was clicked\n * @returns An object with the new selected legend state data.\n */\n function _getNewSelectedLegendsForSingleSelect(legend: Legend): { [key: string]: boolean } {\n return selectedLegends[legend.title] ? {} : { [legend.title]: true };\n }\n\n function _onClick(legend: Legend, event: React.MouseEvent<HTMLButtonElement>): void {\n const { canSelectMultipleLegends = false } = props;\n const nextSelectedLegends = canSelectMultipleLegends\n ? _getNewSelectedLegendsForMultiselect(legend)\n : _getNewSelectedLegendsForSingleSelect(legend);\n\n if (!_isInControlledMode()) {\n setSelectedLegends(nextSelectedLegends);\n }\n props.onChange?.(Object.keys(nextSelectedLegends), 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 ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n : '',\n }}\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 ? `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","cloneLegendsToSVG","mergeClasses","Legends","forwardRef","props","forwardedRef","_isLegendSelected","_rootElem","useRef","activeLegend","setActiveLegend","useState","selectedLegends","setSelectedLegends","focusAttributes","arrowAttributes","axis","memorizeCurrent","classes","toSVG","useCallback","svgWidth","isRTL","legends","centerLegends","textClassName","text","current","useImperativeHandle","legendRef","useEffect","initialSelectedLegends","defaultSelectedLegends","initialSelectedLegend","selectedLegend","defaultSelectedLegend","selectedLegendsState","canSelectMultipleLegends","reduce","combineDict","key","undefined","Object","keys","length","dataToRender","_generateData","overflowStyles","allowFocusOnLegends","itemIds","map","_item","index","toString","overflowHoverCardLegends","legend","hoverCardElement","_renderButton","push","overflowString","overflowText","enabledWrapLines","renderWrappedLegends","renderLegends","div","role","className","root","ref","resizableArea","style","textAlign","item","id","title","items","justifyContent","flexWrap","display","overflow","legendContainer","legendAnnotation","annotation","shape","dataItems","action","hoverAction","onMouseOutAction","color","stripePattern","isLineLegendInBarChart","opacity","_isInControlledMode","_getNewSelectedLegendsForMultiselect","legendsSelected","_getNewSelectedLegendsForSingleSelect","_onClick","event","nextSelectedLegends","onChange","_onHoverOverLegend","_onLeave","data","_getColor","onClickHandler","onHoverHandler","onMouseOut","_getShape","nativeButtonProps","onClick","onMouseOver","onFocus","onBlur","appearance","size","colorNeutralStroke1","colorNeutralBackground1","svgParentProps","svgChildProps","fill","strokeWidth","stroke","svgProps","pathProps","classNameForNonSvg","rect","height","backgroundColor","borderColor","content","legendColor","displayName"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Legends/Legends.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { Button } from '@fluentui/react-button';\nimport type { 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';\nimport { cloneLegendsToSVG } from '../../utilities/image-export-utils';\nimport { mergeClasses } from '@griffel/react';\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 legendAnnotation?: () => React.ReactNode;\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 const _rootElem = React.useRef<HTMLDivElement \| null>(null);\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 const classes = useLegendStyles(props);\n const toSVG = React.useCallback(\n (svgWidth: number, isRTL: boolean = false) => {\n return cloneLegendsToSVG(\n props.legends,\n svgWidth,\n {\n selectedLegends,\n centerLegends: !!props.centerLegends,\n textClassName: classes.text!,\n isRTL,\n },\n _rootElem.current,\n );\n },\n [props.legends, props.centerLegends, selectedLegends, classes.text],\n );\n\n React.useImperativeHandle(props.legendRef, () => ({\n toSVG,\n }));\n\n React.useEffect(() => {\n const initialSelectedLegends = props.selectedLegends ?? props.defaultSelectedLegends;\n const initialSelectedLegend = props.selectedLegend ?? props.defaultSelectedLegend;\n let selectedLegendsState = {};\n if (props.canSelectMultipleLegends) {\n selectedLegendsState =\n (initialSelectedLegends ?? [])?.reduce(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (combineDict: any, key: any) => ({ [key]: true, ...combineDict }),\n {},\n ) \|\| {};\n setSelectedLegends(selectedLegendsState);\n } else if (initialSelectedLegend !== undefined) {\n selectedLegendsState = { [initialSelectedLegend]: true };\n setSelectedLegends(selectedLegendsState);\n }\n }, [\n props.canSelectMultipleLegends,\n props.defaultSelectedLegend,\n props.defaultSelectedLegends,\n props.selectedLegend,\n props.selectedLegends,\n ]);\n\n _isLegendSelected = Object.keys(selectedLegends).length > 0;\n const dataToRender = _generateData();\n const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;\n const itemIds = dataToRender.map((_item, index) => index.toString());\n const overflowHoverCardLegends: JSXElement[] = [];\n dataToRender.map((legend, index) => {\n const hoverCardElement = _renderButton(legend, index, true);\n overflowHoverCardLegends.push(hoverCardElement);\n });\n const overflowString = props.overflowText ? props.overflowText : 'more';\n return props.enabledWrapLines ? renderWrappedLegends() : renderLegends();\n\n function renderLegends(): JSXElement {\n return (\n <div {...focusAttributes} {...arrowAttributes} className={classes.root} ref={_rootElem}>\n <Overflow>\n <div className={classes.resizableArea} style={{ textAlign: props.centerLegends ? 'center' : 'unset' }}>\n {/\n Only the selectable options belong to the listbox; the overflow trigger stays a sibling so a\n menu button is not treated as a listbox child. `display: contents` keeps the options as direct\n flex participants so overflow measurement is unaffected.\n /}\n <div\n {...(allowFocusOnLegends && {\n role: 'listbox',\n 'aria-label': 'Legends',\n 'aria-multiselectable': canSelectMultipleLegends,\n })}\n style={{ display: 'contents' }}\n >\n {dataToRender.map((item, id) => (\n <OverflowItem key={id} id={id.toString()}>\n {_renderButton(item, id)}\n </OverflowItem>\n ))}\n </div>\n <OverflowMenu itemIds={itemIds} title={`${overflowString}`} items={overflowHoverCardLegends} />\n </div>\n </Overflow>\n </div>\n );\n }\n\n function renderWrappedLegends(): JSXElement {\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 ref={_rootElem}\n >\n <div className={classes.resizableArea} style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}>\n {dataToRender.map((item, id) => (\n <div\n className={mergeClasses(classes.legendContainer, item.legendAnnotation && classes.annotation)}\n key={item.key}\n >\n {_renderButton(item, id)}\n {item.legendAnnotation && <div>{item.legendAnnotation()}</div>}\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 legendAnnotation: legend.legendAnnotation,\n };\n });\n return dataItems;\n }\n\n /\n Determine whether the component is in \"controlled\" mode for selections, where the selected legend(s) are\n * determined entirely by props passed in from the parent component.\n /\n function _isInControlledMode(): boolean {\n return props.canSelectMultipleLegends ? props.selectedLegends !== undefined : props.selectedLegend !== undefined;\n }\n\n /\n Get the new selected legends based on the legend that was clicked when multi-select is enabled.\n * @param legend The legend that was clicked\n * @returns An object with the new selected legend(s) state data.\n /\n function _getNewSelectedLegendsForMultiselect(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 return legendsSelected;\n }\n\n /\n Get the new selected legends based on the legend that was clicked when single-select is enabled.\n * @param legend The legend that was clicked\n * @returns An object with the new selected legend state data.\n */\n function _getNewSelectedLegendsForSingleSelect(legend: Legend): { [key: string]: boolean } {\n return selectedLegends[legend.title] ? {} : { [legend.title]: true };\n }\n\n function _onClick(legend: Legend, event: React.MouseEvent<HTMLButtonElement>): void {\n const { canSelectMultipleLegends = false } = props;\n const nextSelectedLegends = canSelectMultipleLegends\n ? _getNewSelectedLegendsForMultiselect(legend)\n : _getNewSelectedLegendsForSingleSelect(legend);\n\n if (!_isInControlledMode()) {\n setSelectedLegends(nextSelectedLegends);\n }\n props.onChange?.(Object.keys(nextSelectedLegends), 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, isOverflowItem?: boolean) {\n const { allowFocusOnLegends = true } = props;\n // Overflow legends are rendered inside a menu, not the listbox, so they must not carry `option` semantics.\n const showListboxOption = allowFocusOnLegends && !isOverflowItem;\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<HTMLElement>) => {\n _onClick(legend, event as React.MouseEvent<HTMLButtonElement>);\n };\n const onHoverHandler = () => {\n _onHoverOverLegend(legend);\n };\n const onMouseOut = () => {\n _onLeave(legend);\n };\n const shape = _getShape(legend, color);\n const legendStyle = {\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 ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n : '',\n } as React.CSSProperties;\n const legendContent = (\n <>\n {shape}\n <div className={classes.text} style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}>\n {legend.title}\n </div>\n </>\n );\n // Shared by the listbox Button and the overflow div. Hover/focus handlers are included so the overflow\n // menu can forward them to its item (the div itself never receives focus).\n const commonProps: React.HTMLAttributes<HTMLElement> = {\n className: classes.legend,\n onClick: onClickHandler,\n onMouseOver: onHoverHandler,\n onMouseOut: onMouseOut,\n onFocus: onHoverHandler,\n onBlur: onMouseOut,\n style: legendStyle,\n };\n if (isOverflowItem) {\n // In the overflow menu the item itself is interactive, so keep this content a non-interactive div to\n // avoid nested clickable elements. display:flex lays the swatch and label out inline (a bare div would\n // stack them). data-selected / data-title are read by the overflow menu to drive its checked state.\n return (\n <div\n key={index}\n {...commonProps}\n data-selected={!!selectedLegends[legend.title]}\n data-title={legend.title}\n style={{ ...legendStyle, display: 'flex', alignItems: 'center' }}\n >\n {legendContent}\n </div>\n );\n }\n return (\n <Button\n {...(showListboxOption && {\n 'aria-selected': !!selectedLegends[legend.title],\n role: 'option',\n 'aria-label': `${legend.title}`,\n // Full-list position so counts match the overflow menu.\n 'aria-setsize': props.legends.length,\n 'aria-posinset': (index ?? 0) + 1,\n })}\n {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n key={index}\n {...commonProps}\n appearance={'outline'}\n size=\"small\"\n >\n {legendContent}\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 ? `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","cloneLegendsToSVG","mergeClasses","Legends","forwardRef","props","forwardedRef","_isLegendSelected","_rootElem","useRef","activeLegend","setActiveLegend","useState","selectedLegends","setSelectedLegends","focusAttributes","arrowAttributes","axis","memorizeCurrent","classes","toSVG","useCallback","svgWidth","isRTL","legends","centerLegends","textClassName","text","current","useImperativeHandle","legendRef","useEffect","initialSelectedLegends","defaultSelectedLegends","initialSelectedLegend","selectedLegend","defaultSelectedLegend","selectedLegendsState","canSelectMultipleLegends","reduce","combineDict","key","undefined","Object","keys","length","dataToRender","_generateData","overflowStyles","allowFocusOnLegends","itemIds","map","_item","index","toString","overflowHoverCardLegends","legend","hoverCardElement","_renderButton","push","overflowString","overflowText","enabledWrapLines","renderWrappedLegends","renderLegends","div","className","root","ref","resizableArea","style","textAlign","role","display","item","id","title","items","justifyContent","flexWrap","overflow","legendContainer","legendAnnotation","annotation","shape","dataItems","action","hoverAction","onMouseOutAction","color","stripePattern","isLineLegendInBarChart","opacity","_isInControlledMode","_getNewSelectedLegendsForMultiselect","legendsSelected","_getNewSelectedLegendsForSingleSelect","_onClick","event","nextSelectedLegends","onChange","_onHoverOverLegend","_onLeave","data","isOverflowItem","showListboxOption","_getColor","onClickHandler","onHoverHandler","onMouseOut","_getShape","legendStyle","colorNeutralStroke1","legendContent","colorNeutralBackground1","commonProps","onClick","onMouseOver","onFocus","onBlur","data-selected","data-title","alignItems","nativeButtonProps","appearance","size","svgParentProps","svgChildProps","fill","strokeWidth","stroke","svgProps","pathProps","classNameForNonSvg","rect","height","backgroundColor","borderColor","content","legendColor","displayName"],"mappings":"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"}

package/lib/components/Legends/OverflowMenu.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
-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';
+import * as React from "react";
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemCheckbox } 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;
@@ -11,23 +11,61 @@ export const OverflowMenu = ({ itemIds, title, items })=>{
         return null;
     }
     const remainingItemsCount = itemIds.length - overflowCount;
+    const checkedLegends = [];
     const menuList = [];
     for(let i = remainingItemsCount; i < itemIds.length; i++){
         const buttonElement = items[i];
-        menuList.push(/*#__PURE__*/ React.createElement(MenuItem, {
-            tabIndex: -1,
+        var _buttonElement_props_datatitle;
+        const value = `${(_buttonElement_props_datatitle = buttonElement.props['data-title']) !== null && _buttonElement_props_datatitle !== void 0 ? _buttonElement_props_datatitle : i}`;
+        if (buttonElement.props['data-selected']) {
+            checkedLegends.push(value);
+        }
+        menuList.push(/*#__PURE__*/ React.createElement(MenuItemCheckbox, {
             key: i,
+            name: "legends",
+            value: value,
+            // Full-list position so counts match the listbox.
+            "aria-setsize": itemIds.length,
+            "aria-posinset": i + 1,
+            // Hide the checkmark so the row matches the listbox legend; selection is conveyed via aria-checked.
+            checkmark: null,
             onClick: (e)=>{
-                const button = buttonElement.props;
-                if (button.onClick) {
-                    button.onClick(e);
-                }
+                var _buttonElement_props_onClick, _buttonElement_props;
+                return (_buttonElement_props_onClick = (_buttonElement_props = buttonElement.props).onClick) === null || _buttonElement_props_onClick === void 0 ? void 0 : _buttonElement_props_onClick.call(_buttonElement_props, e);
+            },
+            // The content is smaller than the row, so handle hover/focus on the item to cover its full area.
+            onMouseEnter: ()=>{
+                var _buttonElement_props_onMouseOver, _buttonElement_props;
+                return (_buttonElement_props_onMouseOver = (_buttonElement_props = buttonElement.props).onMouseOver) === null || _buttonElement_props_onMouseOver === void 0 ? void 0 : _buttonElement_props_onMouseOver.call(_buttonElement_props);
+            },
+            onMouseLeave: ()=>{
+                var _buttonElement_props_onMouseOut, _buttonElement_props;
+                return (_buttonElement_props_onMouseOut = (_buttonElement_props = buttonElement.props).onMouseOut) === null || _buttonElement_props_onMouseOut === void 0 ? void 0 : _buttonElement_props_onMouseOut.call(_buttonElement_props);
+            },
+            onFocus: ()=>{
+                var _buttonElement_props_onFocus, _buttonElement_props;
+                return (_buttonElement_props_onFocus = (_buttonElement_props = buttonElement.props).onFocus) === null || _buttonElement_props_onFocus === void 0 ? void 0 : _buttonElement_props_onFocus.call(_buttonElement_props);
+            },
+            onBlur: ()=>{
+                var _buttonElement_props_onBlur, _buttonElement_props;
+                return (_buttonElement_props_onBlur = (_buttonElement_props = buttonElement.props).onBlur) === null || _buttonElement_props_onBlur === void 0 ? void 0 : _buttonElement_props_onBlur.call(_buttonElement_props);
             }
-        }, buttonElement));
+        }, /*#__PURE__*/ React.cloneElement(buttonElement, {
+            onClick: undefined,
+            onMouseOver: undefined,
+            onMouseOut: undefined,
+            onFocus: undefined,
+            onBlur: undefined
+        })));
     }
     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)));
+    }, displayLabel)), /*#__PURE__*/ React.createElement(MenuPopover, null, /*#__PURE__*/ React.createElement(MenuList, {
+        "aria-label": "Legends",
+        checkedValues: {
+            legends: checkedLegends
+        }
+    }, menuList)));
 };

package/lib/components/Legends/OverflowMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Legends/OverflowMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Menu, MenuTrigger, MenuPopover, MenuList, ~~MenuItem~~ } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { useOverflowMenu } from '@fluentui/react-overflow';\n\nexport const OverflowMenu: React.FC<{\n itemIds: string[];\n title: string;\n items: JSXElement[];\n}> = ({ itemIds, title, items }) => {\n const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();\n let displayLabel = title;\n displayLabel = title === '' ? `+${overflowCount} items` : `+${overflowCount} ${title}`;\n\n if (!isOverflowing) {\n return null;\n }\n const remainingItemsCount = itemIds.length - overflowCount;\n const menuList = [];\n for (let i = remainingItemsCount; i < itemIds.length; i++) {\n const buttonElement = items[i];\n menuList.push(\n <~~MenuItem~~\n ~~tabIndex~~={-1}\n ~~key~~={i}\n onClick={e => {\n ~~const~~ ~~button~~ = buttonElement.props;\n if (~~button.onClick~~) {\n ~~button~~.~~onClick~~(e)~~;\n~~ }\n }}\n >\n {buttonElement}\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","buttonElement","~~push~~","~~tabIndex~~","key","onClick","e","~~button~~","~~props~~","disableButtonEnhancement"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/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,eAIR,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,KAAK,EAAE;IAC7B,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,OAAO;IAEtF,IAAI,CAACI,eAAe;QAClB,OAAO;IACT;IACA,MAAME,sBAAsBP,QAAQQ,MAAM,GAAGJ;IAC7C,MAAMK,WAAW,EAAE;IACnB,IAAK,IAAIC,~~IAAIH~~,~~qBAAqBG~~,~~IAAIV~~,QAAQQ,MAAM,~~EAAEE~~,IAAK;QACzD,MAAMC,~~gBAAgBT~~,KAAK,~~CAACQ~~,EAAE;~~QAC9BD~~,~~SAASG~~,IAAI,eACX,~~oBAAChB~~;~~YACCiB~~,~~UAAU~~,~~CAAC~~;~~YACXC~~,~~KAAKJ~~;~~YACLK~~,SAASC,CAAAA;~~gBACP~~,~~MAAMC~~,~~SAASN~~,~~cAAcO~~,KAAK;~~gBAClC~~,~~IAAID~~,~~OAAOF~~,~~OAAO~~,~~EAAE~~;~~oBAClBE~~,~~OAAOF~~,OAAO,~~CAACC~~;~~gBACjB~~;~~YACF~~;~~WAECL~~;~~IAGP~~;IACA,qBACE,~~oBAACnB~~,0BACC,oBAACC;~~QAAY0B~~,0BAAAA;qBACX,~~oBAACtB~~;QAAWM,KAAKA;OAAMG,8BAGzB,oBAACZ,iCACC,oBAACC,~~gBAAUc~~;~~AAInB~~,EAAE"}
1	+ {"version":3,"sources":["../src/components/Legends/OverflowMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemCheckbox } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { useOverflowMenu } from '@fluentui/react-overflow';\n\nexport const OverflowMenu: React.FC<{\n itemIds: string[];\n title: string;\n items: JSXElement[];\n}> = ({ itemIds, title, items }) => {\n const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();\n let displayLabel = title;\n displayLabel = title === '' ? `+${overflowCount} items` : `+${overflowCount} ${title}`;\n\n if (!isOverflowing) {\n return null;\n }\n const remainingItemsCount = itemIds.length - overflowCount;\n const checkedLegends: string[] = [];\n const menuList = [];\n for (let i = remainingItemsCount; i < itemIds.length; i++) {\n const buttonElement = items[i];\n const value = `${buttonElement.props['data-title'] ?? i}`;\n if (buttonElement.props['data-selected']) {\n checkedLegends.push(value);\n }\n menuList.push(\n <MenuItemCheckbox\n key={i}\n name=\"legends\"\n value={value}\n // Full-list position so counts match the listbox.\n aria-setsize={itemIds.length}\n aria-posinset={i + 1}\n // Hide the checkmark so the row matches the listbox legend; selection is conveyed via aria-checked.\n checkmark={null}\n onClick={e => buttonElement.props.onClick?.(e)}\n // The content is smaller than the row, so handle hover/focus on the item to cover its full area.\n onMouseEnter={() => buttonElement.props.onMouseOver?.()}\n onMouseLeave={() => buttonElement.props.onMouseOut?.()}\n onFocus={() => buttonElement.props.onFocus?.()}\n onBlur={() => buttonElement.props.onBlur?.()}\n >\n {React.cloneElement(buttonElement, {\n onClick: undefined,\n onMouseOver: undefined,\n onMouseOut: undefined,\n onFocus: undefined,\n onBlur: undefined,\n })}\n </MenuItemCheckbox>,\n );\n }\n return (\n <Menu>\n <MenuTrigger disableButtonEnhancement>\n <MenuButton ref={ref}>{displayLabel}</MenuButton>\n </MenuTrigger>\n\n <MenuPopover>\n <MenuList aria-label=\"Legends\" checkedValues={{ legends: checkedLegends }}>\n {menuList}\n </MenuList>\n </MenuPopover>\n </Menu>\n );\n};\n"],"names":["React","Menu","MenuTrigger","MenuPopover","MenuList","MenuItemCheckbox","MenuButton","useOverflowMenu","OverflowMenu","itemIds","title","items","ref","overflowCount","isOverflowing","displayLabel","remainingItemsCount","length","checkedLegends","menuList","i","buttonElement","value","props","push","key","name","aria-setsize","aria-posinset","checkmark","onClick","e","onMouseEnter","onMouseOver","onMouseLeave","onMouseOut","onFocus","onBlur","cloneElement","undefined","disableButtonEnhancement","aria-label","checkedValues","legends"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,EAAEC,WAAW,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,gBAAgB,QAAQ,uBAAuB;AAClG,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,OAAO,MAAMC,eAIR,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,KAAK,EAAE;IAC7B,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,OAAO;IAEtF,IAAI,CAACI,eAAe;QAClB,OAAO;IACT;IACA,MAAME,sBAAsBP,QAAQQ,MAAM,GAAGJ;IAC7C,MAAMK,iBAA2B,EAAE;IACnC,MAAMC,WAAW,EAAE;IACnB,IAAK,IAAIC,IAAIJ,qBAAqBI,IAAIX,QAAQQ,MAAM,EAAEG,IAAK;QACzD,MAAMC,gBAAgBV,KAAK,CAACS,EAAE;YACbC;QAAjB,MAAMC,QAAQ,GAAGD,CAAAA,iCAAAA,cAAcE,KAAK,CAAC,aAAa,cAAjCF,4CAAAA,iCAAqCD,GAAG;QACzD,IAAIC,cAAcE,KAAK,CAAC,gBAAgB,EAAE;YACxCL,eAAeM,IAAI,CAACF;QACtB;QACAH,SAASK,IAAI,eACX,oBAACnB;YACCoB,KAAKL;YACLM,MAAK;YACLJ,OAAOA;YACP,kDAAkD;YAClDK,gBAAclB,QAAQQ,MAAM;YAC5BW,iBAAeR,IAAI;YACnB,oGAAoG;YACpGS,WAAW;YACXC,SAASC,CAAAA;oBAAKV,8BAAAA;wBAAAA,+BAAAA,CAAAA,uBAAAA,cAAcE,KAAK,EAACO,OAAO,cAA3BT,mDAAAA,kCAAAA,sBAA8BU;;YAC5C,iGAAiG;YACjGC,cAAc;oBAAMX,kCAAAA;wBAAAA,mCAAAA,CAAAA,uBAAAA,cAAcE,KAAK,EAACU,WAAW,cAA/BZ,uDAAAA,sCAAAA;;YACpBa,cAAc;oBAAMb,iCAAAA;wBAAAA,kCAAAA,CAAAA,uBAAAA,cAAcE,KAAK,EAACY,UAAU,cAA9Bd,sDAAAA,qCAAAA;;YACpBe,SAAS;oBAAMf,8BAAAA;wBAAAA,+BAAAA,CAAAA,uBAAAA,cAAcE,KAAK,EAACa,OAAO,cAA3Bf,mDAAAA,kCAAAA;;YACfgB,QAAQ;oBAAMhB,6BAAAA;wBAAAA,8BAAAA,CAAAA,uBAAAA,cAAcE,KAAK,EAACc,MAAM,cAA1BhB,kDAAAA,iCAAAA;;yBAEbrB,MAAMsC,YAAY,CAACjB,eAAe;YACjCS,SAASS;YACTN,aAAaM;YACbJ,YAAYI;YACZH,SAASG;YACTF,QAAQE;QACV;IAGN;IACA,qBACE,oBAACtC,0BACC,oBAACC;QAAYsC,0BAAAA;qBACX,oBAAClC;QAAWM,KAAKA;OAAMG,8BAGzB,oBAACZ,iCACC,oBAACC;QAASqC,cAAW;QAAUC,eAAe;YAAEC,SAASzB;QAAe;OACrEC;AAKX,EAAE"}

package/lib/components/Legends/index.js CHANGED Viewed

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

package/lib/components/Legends/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Legends/index.ts"],"sourcesContent":["export * from './Legends';\nexport * from './Legends.types';\nexport * from './shape';\n"],"names":[],"mappings":"AAAA,cAAc,~~YAAY~~;AAC1B,cAAc,~~kBAAkB~~;AAChC,cAAc,~~UAAU~~"}
1	+ {"version":3,"sources":["../src/components/Legends/index.ts"],"sourcesContent":["export * from './Legends';\nexport * from './Legends.types';\nexport * from './shape';\n"],"names":[],"mappings":"AAAA,cAAc,eAAY;AAC1B,cAAc,qBAAkB;AAChC,cAAc,aAAU"}

package/lib/components/Legends/shape.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import * as React from 'react';
-import { CustomPoints, Points, getSecureProps } from '../../utilities/utilities';
+import * as React from "react";
+import { CustomPoints, Points, getSecureProps } from "../../utilities/utilities.js";
 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',

package/lib/components/Legends/shape.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Legends/shape.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { LegendShape } from './Legends.types';\nimport { CustomPoints, Points, getSecureProps } from '../../utilities/utilities';\n\nexport interface ShapeProps {\n svgProps: React.SVGAttributes<SVGElement>;\n pathProps: React.SVGAttributes<SVGPathElement>;\n shape: LegendShape;\n classNameForNonSvg?: string;\n style?: React.CSSProperties \| undefined;\n}\n\ntype PointPathType = {\n [key: string]: string;\n};\n\nconst pointPath: PointPathType = {\n [`${Points[Points.circle]}`]: 'M1 6 A5 5 0 1 0 12 6 M1 6 A5 5 0 0 1 12 6',\n [`${Points[Points.square]}`]: 'M1 1 L12 1 L12 12 L1 12 L1 1 Z',\n [`${Points[Points.triangle]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n [`${Points[Points.pyramid]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n [`${Points[Points.diamond]}`]: 'M2 2 L10 2 L10 10 L2 10 L2 2 Z',\n [`${Points[Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z',\n [`${Points[Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',\n [`${Points[Points.octagon]}`]:\n 'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',\n [`${CustomPoints[CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13',\n};\n\nexport const Shape: React.FunctionComponent<ShapeProps> = React.forwardRef<HTMLDivElement, ShapeProps>(\n ({ svgProps, pathProps, shape, classNameForNonSvg, style }, forwardedRef) => {\n if (Object.keys(pointPath).indexOf(shape) === -1) {\n return <div className={classNameForNonSvg} style={style} />;\n }\n return (\n <svg\n width={14}\n height={14}\n viewBox={'-1 -1 14 14'}\n {...getSecureProps(svgProps)}\n transform={`rotate(${\n shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0\n }, 0, 0)`}\n style={{\n width: '14px',\n height: '14px',\n }}\n >\n <path d={pointPath[shape]} {...getSecureProps(pathProps)} />\n </svg>\n );\n },\n);\n"],"names":["React","CustomPoints","Points","getSecureProps","pointPath","circle","square","triangle","pyramid","diamond","hexagon","pentagon","octagon","dottedLine","Shape","forwardRef","svgProps","pathProps","shape","classNameForNonSvg","style","forwardedRef","Object","keys","indexOf","div","className","svg","width","height","viewBox","transform","path","d"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,YAAY,EAAEC,MAAM,EAAEC,cAAc,QAAQ~~,4BAA4B~~;AAcjF,MAAMC,YAA2B;IAC/B,CAAC,GAAGF,MAAM,CAACA,OAAOG,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGH,MAAM,CAACA,OAAOI,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGJ,MAAM,CAACA,OAAOK,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGL,MAAM,CAACA,OAAOM,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGN,MAAM,CAACA,OAAOO,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGP,MAAM,CAACA,OAAOQ,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGR,MAAM,CAACA,OAAOS,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGT,MAAM,CAACA,OAAOU,OAAO,CAAC,EAAE,CAAC,EAC3B;IACF,CAAC,GAAGX,YAAY,CAACA,aAAaY,UAAU,CAAC,EAAE,CAAC,EAAE;AAChD;AAEA,OAAO,MAAMC,sBAA6Cd,MAAMe,UAAU,CACxE,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,EAAEC;IAC1D,IAAIC,OAAOC,IAAI,CAACnB,WAAWoB,OAAO,CAACN,WAAW,CAAC,GAAG;QAChD,qBAAO,oBAACO;YAAIC,WAAWP;YAAoBC,OAAOA;;IACpD;IACA,qBACE,oBAACO;QACCC,OAAO;QACPC,QAAQ;QACRC,SAAS;QACR,GAAG3B,eAAea,SAAS;QAC5Be,WAAW,CAAC,OAAO,EACjBb,UAAUhB,MAAM,CAACA,OAAOO,OAAO,CAAC,GAAG,KAAKS,UAAUhB,MAAM,CAACA,OAAOM,OAAO,CAAC,GAAG,MAAM,EAClF,OAAO,CAAC;QACTY,OAAO;YACLQ,OAAO;YACPC,QAAQ;QACV;qBAEA,oBAACG;QAAKC,GAAG7B,SAAS,CAACc,MAAM;QAAG,GAAGf,eAAec,UAAU;;AAG9D,GACA"}
1	+ {"version":3,"sources":["../src/components/Legends/shape.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { LegendShape } from './Legends.types';\nimport { CustomPoints, Points, getSecureProps } from '../../utilities/utilities';\n\nexport interface ShapeProps {\n svgProps: React.SVGAttributes<SVGElement>;\n pathProps: React.SVGAttributes<SVGPathElement>;\n shape: LegendShape;\n classNameForNonSvg?: string;\n style?: React.CSSProperties \| undefined;\n}\n\ntype PointPathType = {\n [key: string]: string;\n};\n\nconst pointPath: PointPathType = {\n [`${Points[Points.circle]}`]: 'M1 6 A5 5 0 1 0 12 6 M1 6 A5 5 0 0 1 12 6',\n [`${Points[Points.square]}`]: 'M1 1 L12 1 L12 12 L1 12 L1 1 Z',\n [`${Points[Points.triangle]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n [`${Points[Points.pyramid]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n [`${Points[Points.diamond]}`]: 'M2 2 L10 2 L10 10 L2 10 L2 2 Z',\n [`${Points[Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z',\n [`${Points[Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',\n [`${Points[Points.octagon]}`]:\n 'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',\n [`${CustomPoints[CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13',\n};\n\nexport const Shape: React.FunctionComponent<ShapeProps> = React.forwardRef<HTMLDivElement, ShapeProps>(\n ({ svgProps, pathProps, shape, classNameForNonSvg, style }, forwardedRef) => {\n if (Object.keys(pointPath).indexOf(shape) === -1) {\n return <div className={classNameForNonSvg} style={style} />;\n }\n return (\n <svg\n width={14}\n height={14}\n viewBox={'-1 -1 14 14'}\n {...getSecureProps(svgProps)}\n transform={`rotate(${\n shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0\n }, 0, 0)`}\n style={{\n width: '14px',\n height: '14px',\n }}\n >\n <path d={pointPath[shape]} {...getSecureProps(pathProps)} />\n </svg>\n );\n },\n);\n"],"names":["React","CustomPoints","Points","getSecureProps","pointPath","circle","square","triangle","pyramid","diamond","hexagon","pentagon","octagon","dottedLine","Shape","forwardRef","svgProps","pathProps","shape","classNameForNonSvg","style","forwardedRef","Object","keys","indexOf","div","className","svg","width","height","viewBox","transform","path","d"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,YAAY,EAAEC,MAAM,EAAEC,cAAc,QAAQ,+BAA4B;AAcjF,MAAMC,YAA2B;IAC/B,CAAC,GAAGF,MAAM,CAACA,OAAOG,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGH,MAAM,CAACA,OAAOI,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGJ,MAAM,CAACA,OAAOK,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGL,MAAM,CAACA,OAAOM,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGN,MAAM,CAACA,OAAOO,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGP,MAAM,CAACA,OAAOQ,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGR,MAAM,CAACA,OAAOS,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGT,MAAM,CAACA,OAAOU,OAAO,CAAC,EAAE,CAAC,EAC3B;IACF,CAAC,GAAGX,YAAY,CAACA,aAAaY,UAAU,CAAC,EAAE,CAAC,EAAE;AAChD;AAEA,OAAO,MAAMC,sBAA6Cd,MAAMe,UAAU,CACxE,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,EAAEC;IAC1D,IAAIC,OAAOC,IAAI,CAACnB,WAAWoB,OAAO,CAACN,WAAW,CAAC,GAAG;QAChD,qBAAO,oBAACO;YAAIC,WAAWP;YAAoBC,OAAOA;;IACpD;IACA,qBACE,oBAACO;QACCC,OAAO;QACPC,QAAQ;QACRC,SAAS;QACR,GAAG3B,eAAea,SAAS;QAC5Be,WAAW,CAAC,OAAO,EACjBb,UAAUhB,MAAM,CAACA,OAAOO,OAAO,CAAC,GAAG,KAAKS,UAAUhB,MAAM,CAACA,OAAOM,OAAO,CAAC,GAAG,MAAM,EAClF,OAAO,CAAC;QACTY,OAAO;YACLQ,OAAO;YACPC,QAAQ;QACV;qBAEA,oBAACG;QAAKC,GAAG7B,SAAS,CAACc,MAAM;QAAG,GAAGf,eAAec,UAAU;;AAG9D,GACA"}

package/lib/components/Legends/useLegendsStyles.styles.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
-import { __styles, mergeClasses } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/index';
+import { __styles, mergeClasses } from "@griffel/react";
+import { tokens, typographyStyles } from "@fluentui/react-theme";
+import { HighContrastSelector } from "../../utilities/index.js";
 // Constants needed to create legends using SVG for image export
 export const LEGEND_CONTAINER_MARGIN_TOP = 8;
 export const LEGEND_CONTAINER_MARGIN_START = 12;

package/lib/components/Legends/useLegendsStyles.styles.js.map CHANGED Viewed

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

package/lib/components/Legends/useLegendsStyles.styles.raw.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/index';
+import { makeStyles, mergeClasses } from "@griffel/react";
+import { tokens, typographyStyles } from "@fluentui/react-theme";
+import { HighContrastSelector } from "../../utilities/index.js";
 // Constants needed to create legends using SVG for image export
 export const LEGEND_CONTAINER_MARGIN_TOP = 8;
 export const LEGEND_CONTAINER_MARGIN_START = 12;