From 50c0027b4359a44cc0c9647063a7c000d0912ed6 Mon Sep 17 00:00:00 2001
From: Elaina Lee <hyehwalee@microsoft.com>
Date: Sun, 22 Dec 2024 23:46:32 -0800
Subject: [PATCH] changed callout to focusTrap & assigned outside clickable to
 mouse

---
 libs/designer-ui/src/lib/tokenpicker/index.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/libs/designer-ui/src/lib/tokenpicker/index.tsx b/libs/designer-ui/src/lib/tokenpicker/index.tsx
index 5918a9b5240..0092aa47152 100644
--- a/libs/designer-ui/src/lib/tokenpicker/index.tsx
+++ b/libs/designer-ui/src/lib/tokenpicker/index.tsx
@@ -13,8 +13,8 @@ import { TokenPickerHeader } from './tokenpickerheader';
 import { TokenPickerPivot } from './tokenpickerpivot';
 import type { GetValueSegmentHandler } from './tokenpickersection/tokenpickeroption';
 import { TokenPickerSection } from './tokenpickersection/tokenpickersection';
-import type { ICalloutContentStyles, ISearchBox, PivotItem } from '@fluentui/react';
-import { SearchBox, DirectionalHint, Callout } from '@fluentui/react';
+import type { ICalloutContentStyles, IFocusTrapZoneProps, ISearchBox, PivotItem } from '@fluentui/react';
+import { SearchBox, DirectionalHint, FocusTrapCallout } from '@fluentui/react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getSelection, type LexicalEditor, type NodeKey } from 'lexical';
 import { useEffect, useRef, useState } from 'react';
@@ -222,14 +222,17 @@ export function TokenPicker({
     description: 'Button text for the create expression with copilot feature',
   });
 
+  const focusTrapProps: IFocusTrapZoneProps = { isClickableOutsideFocusTrap: true };
+
   const nl2fExpressionPane = (
-    <Callout
+    <FocusTrapCallout
       role="dialog"
       ariaLabelledBy={labelId}
       gapSpace={gapSpace}
       target={`#${editorId}`}
       beakWidth={beakWidth}
       directionalHint={directionalHint}
+      focusTrapProps={focusTrapProps}
       onMouseMove={handleExpressionEditorMoveDistance}
       onMouseUp={() => {
         if (isDraggingExpressionEditor) {
@@ -277,7 +280,7 @@ export function TokenPicker({
           setExpressionEditorError={setExpressionEditorError}
         />
       </div>
-    </Callout>
+    </FocusTrapCallout>
   );
 
   if (isNl2fExpression) {
@@ -286,13 +289,14 @@ export function TokenPicker({
 
   return (
     <>
-      <Callout
+      <FocusTrapCallout
         role="dialog"
         ariaLabelledBy={labelId}
         gapSpace={gapSpace}
         target={`#${editorId}`}
         beakWidth={beakWidth}
         directionalHint={directionalHint}
+        focusTrapProps={focusTrapProps}
         onMouseMove={handleExpressionEditorMoveDistance}
         onMouseUp={() => {
           if (isDraggingExpressionEditor) {
@@ -414,7 +418,7 @@ export function TokenPicker({
             ) : null}
           </div>
         </div>
-      </Callout>
+      </FocusTrapCallout>
       {tokenClickedCallback ? null : <TokenPickerHandler handleUpdateExpressionToken={handleUpdateExpressionToken} />}
       {tokenClickedCallback ? null : <UpdateTokenNode />}
     </>