Prevent menu open on right click by bubbling layer events

microsoft · Dec 25, 2024 · 998286e · 998286e
1 parent b672101
commit 998286e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 0 deletions.
diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
@@ -144,6 +144,8 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}
           legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends}}
           componentRef={chartRef}
+          // Bubble event to prevent right click to open menu on the callout
+          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
         />
       );
     case 'bar':
@@ -154,6 +156,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
             {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}
             legendProps={legendProps}
             componentRef={chartRef}
+            calloutProps={{layerProps: {eventBubblingEnabled: true}}}
           />
         );
       } else {
@@ -163,6 +166,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
               {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}
               legendProps={legendProps}
               componentRef={chartRef}
+              calloutProps={{layerProps: {eventBubblingEnabled: true}}}
             />
           );
         }
@@ -171,6 +175,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
             {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}
             legendProps={legendProps}
             componentRef={chartRef}
+            calloutProps={{layerProps: {eventBubblingEnabled: true}}}
           />
         );
       }
@@ -183,6 +188,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
               {...transformPlotlyJsonToScatterChartProps({ data, layout }, true, colorMap, isDarkTheme)}
               legendProps={legendProps}
               componentRef={chartRef}
+              calloutProps={{layerProps: {eventBubblingEnabled: true}}}
             />
           );
         }
@@ -191,6 +197,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
             {...transformPlotlyJsonToScatterChartProps({ data, layout }, false, colorMap, isDarkTheme)}
             legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends}}
             componentRef={chartRef}
+            calloutProps={{layerProps: {eventBubblingEnabled: true}}}
           />
         );
       }
@@ -199,6 +206,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}
           legendProps={legendProps}
           componentRef={chartRef}
+          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
         />
       );
     case 'heatmap':
@@ -207,13 +215,15 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           {...transformPlotlyJsonToHeatmapProps(plotlySchema)}
           legendProps={legendProps}
           componentRef={chartRef}
+          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
         />
       );
     case 'sankey':
       return (
         <SankeyChart
           {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}
           componentRef={chartRef}
+          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
         />
       );
     case 'indicator':
@@ -223,6 +233,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
             {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}
             legendProps={legendProps}
             componentRef={chartRef}
+            calloutProps={{layerProps: {eventBubblingEnabled: true}}}
           />
         );
       }
@@ -233,6 +244,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}
           legendProps={legendProps}
           componentRef={chartRef}
+          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
         />
       );
     default:

diff --git a/packages/charts/react-charting/src/components/SankeyChart/SankeyChart.base.tsx b/packages/charts/react-charting/src/components/SankeyChart/SankeyChart.base.tsx
@@ -834,6 +834,7 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
         onDismiss: this._onCloseCallout,
         className: classNames.calloutContentRoot,
         preventDismissOnLostFocus: true,
+        ...this.props.calloutProps!,
       };
       return (
         <div

diff --git a/packages/charts/react-charting/src/components/SankeyChart/SankeyChart.types.ts b/packages/charts/react-charting/src/components/SankeyChart/SankeyChart.types.ts
@@ -1,5 +1,6 @@
 import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { IChart, IChartProps } from '../../types/IDataPoint';
 
 export type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint';
@@ -90,6 +91,11 @@ export interface ISankeyChartProps {
    * the public methods and properties of the component.
    */
   componentRef?: IRefObject<IChart>;
+
+    /**
+     * props for the callout in the chart
+     */
+    calloutProps?: Partial<ICalloutProps>;
 }
 
 /**

diff --git a/...ges/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/...ges/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx
@@ -67,6 +67,12 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
     this._lastKnownValidLegends = selectedLegends;
   }
 
+  componentDidMount() {
+    document.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+    });
+  };
+
   public render(): JSX.Element {
     return <div>{this._createDeclarativeChart()}</div>;
   }