From e3eed45d6d445d574c2a1580a3b2cbaf2cef3929 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Tue, 27 Dec 2022 18:05:11 +0000
Subject: [PATCH 1/6] feat(react-tree): properly position actions

---
 .../BaseTreeItem/BaseTreeItem.types.ts        | 11 +---
 .../BaseTreeItem/useBaseTreeItem.ts           | 57 +++++++++---------
 .../src/components/Tree/Tree.types.ts         | 17 ++++--
 .../src/components/TreeItem/TreeItem.types.ts | 14 +----
 .../components/TreeItem/renderTreeItem.tsx    | 18 +++---
 .../src/components/TreeItem/useTreeItem.tsx   | 59 +++++++++++++------
 .../components/TreeItem/useTreeItemStyles.ts  | 30 ++++++----
 .../stories/Tree/TreeActions.stories.tsx      | 17 +++++-
 8 files changed, 130 insertions(+), 93 deletions(-)

diff --git a/packages/react-components/react-tree/src/components/BaseTreeItem/BaseTreeItem.types.ts b/packages/react-components/react-tree/src/components/BaseTreeItem/BaseTreeItem.types.ts
index 15a60b4e5c5ec..c6a016bf475b4 100644
--- a/packages/react-components/react-tree/src/components/BaseTreeItem/BaseTreeItem.types.ts
+++ b/packages/react-components/react-tree/src/components/BaseTreeItem/BaseTreeItem.types.ts
@@ -1,16 +1,7 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonSlotProps } from '@fluentui/react-aria';
-
-export type BaseTreeItemElement = ARIAButtonElement;
-
-/** @internal */
-export type BaseTreeItemElementIntersection = ARIAButtonElementIntersection;
 
 export type BaseTreeItemSlots = {
-  /**
-   * BaseTreeItem root wraps around `props.content`
-   */
-  root: Slot<ARIAButtonSlotProps>;
+  root: Slot<'div'>;
 };
 
 /**
diff --git a/packages/react-components/react-tree/src/components/BaseTreeItem/useBaseTreeItem.ts b/packages/react-components/react-tree/src/components/BaseTreeItem/useBaseTreeItem.ts
index 1cd1af387ac38..86b3bf3f8be89 100644
--- a/packages/react-components/react-tree/src/components/BaseTreeItem/useBaseTreeItem.ts
+++ b/packages/react-components/react-tree/src/components/BaseTreeItem/useBaseTreeItem.ts
@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';
-import type {
-  BaseTreeItemElement,
-  BaseTreeItemElementIntersection,
-  BaseTreeItemProps,
-  BaseTreeItemState,
-} from './BaseTreeItem.types';
-import { useARIAButtonProps } from '@fluentui/react-aria';
-import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
+import type { BaseTreeItemProps, BaseTreeItemState } from './BaseTreeItem.types';
+import { ArrowRight, ArrowLeft, Enter } from '@fluentui/keyboard-keys';
 import { useTreeContext_unstable } from '../../contexts/treeContext';
 /**
  * Create the state required to render BaseTreeItem.
@@ -20,7 +14,7 @@ import { useTreeContext_unstable } from '../../contexts/treeContext';
  */
 export const useBaseTreeItem_unstable = (
   props: BaseTreeItemProps,
-  ref: React.Ref<BaseTreeItemElement>,
+  ref: React.Ref<HTMLDivElement>,
 ): BaseTreeItemState => {
   const { 'aria-owns': ariaOwns, as = 'div', onKeyDown, ...rest } = props;
 
@@ -32,12 +26,12 @@ export const useBaseTreeItem_unstable = (
   const isBranch = typeof ariaOwns === 'string';
   const open = useTreeContext_unstable(ctx => isBranch && ctx.openSubtrees.includes(ariaOwns!));
 
-  const handleClick = useEventCallback((event: React.MouseEvent<BaseTreeItemElementIntersection>) => {
+  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
     if (isBranch) {
       requestOpenChange({ event, open: !open, type: 'click', id: ariaOwns! });
     }
   });
-  const handleArrowRight = (event: React.KeyboardEvent<BaseTreeItemElementIntersection>) => {
+  const handleArrowRight = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (open && isBranch) {
       focusFirstSubtreeItem(event.currentTarget);
     }
@@ -45,7 +39,7 @@ export const useBaseTreeItem_unstable = (
       requestOpenChange({ event, open: true, type: 'arrowRight', id: ariaOwns! });
     }
   };
-  const handleArrowLeft = (event: React.KeyboardEvent<BaseTreeItemElementIntersection>) => {
+  const handleArrowLeft = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (!isBranch || !open) {
       focusSubtreeOwnerItem(event.currentTarget);
     }
@@ -53,12 +47,20 @@ export const useBaseTreeItem_unstable = (
       requestOpenChange({ event, open: false, type: 'arrowLeft', id: ariaOwns! });
     }
   };
-  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<BaseTreeItemElementIntersection>) => {
+  const handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (isBranch) {
+      requestOpenChange({ event, open: !open, type: 'enter', id: ariaOwns! });
+    }
+  };
+  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
     onKeyDown?.(event);
     if (event.isDefaultPrevented()) {
       return;
     }
-    switch (event.code) {
+    switch (event.key) {
+      case Enter: {
+        return handleEnter(event);
+      }
       case ArrowRight: {
         return handleArrowRight(event);
       }
@@ -73,20 +75,17 @@ export const useBaseTreeItem_unstable = (
     },
     isLeaf: !isBranch,
     open,
-    root: getNativeElementProps(
-      as,
-      useARIAButtonProps(as, {
-        ...rest,
-        // casting here is required to convert union to intersection
-        ref: ref as React.Ref<BaseTreeItemElementIntersection>,
-        'aria-owns': ariaOwns,
-        'aria-level': level,
-        // FIXME: tabster fails to navigate when aria-expanded is true
-        // 'aria-expanded': isBranch ? isOpen : undefined,
-        role: 'treeitem',
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-      }),
-    ),
+    root: getNativeElementProps(as, {
+      ...rest,
+      ref,
+      tabIndex: 0,
+      'aria-owns': ariaOwns,
+      'aria-level': level,
+      // FIXME: tabster fails to navigate when aria-expanded is true
+      // 'aria-expanded': isBranch ? isOpen : undefined,
+      role: 'treeitem',
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+    }),
   };
 };
diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.types.ts b/packages/react-components/react-tree/src/components/Tree/Tree.types.ts
index fb1bdd91c67ac..4e26e1fea3a96 100644
--- a/packages/react-components/react-tree/src/components/Tree/Tree.types.ts
+++ b/packages/react-components/react-tree/src/components/Tree/Tree.types.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { BaseTreeItemElement } from '../BaseTreeItem/BaseTreeItem.types';
 import { TreeContextValue } from '../../contexts/treeContext';
 
 export type TreeSlots = {
@@ -9,16 +8,24 @@ export type TreeSlots = {
 
 export type TreeOpenChangeData = { open: boolean; id: string } & (
   | {
-      event: React.MouseEvent<BaseTreeItemElement>;
+      event: React.MouseEvent<HTMLElement>;
       type: 'expandIconClick';
     }
   | {
-      event: React.MouseEvent<BaseTreeItemElement>;
+      event: React.MouseEvent<HTMLElement>;
       type: 'click';
     }
   | {
-      event: React.KeyboardEvent<BaseTreeItemElement>;
-      type: 'arrowRight' | 'arrowLeft';
+      event: React.KeyboardEvent<HTMLElement>;
+      type: 'enter';
+    }
+  | {
+      event: React.KeyboardEvent<HTMLElement>;
+      type: 'arrowRight';
+    }
+  | {
+      event: React.KeyboardEvent<HTMLElement>;
+      type: 'arrowLeft';
     }
 );
 
diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
index 4fe814c7abf87..862a726f29e0d 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
@@ -1,16 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import {
-  BaseTreeItemElement,
-  BaseTreeItemElementIntersection,
-  BaseTreeItemProps,
-  BaseTreeItemSlots,
-  BaseTreeItemState,
-} from '../BaseTreeItem/index';
-
-export type TreeItemElement = BaseTreeItemElement;
-
-/** @internal */
-export type TreeItemElementIntersection = BaseTreeItemElementIntersection;
+import { BaseTreeItemProps, BaseTreeItemSlots, BaseTreeItemState } from '../BaseTreeItem/index';
 
 export type TreeItemSlots = BaseTreeItemSlots & {
   /**
@@ -35,6 +24,7 @@ export type TreeItemSlots = BaseTreeItemSlots & {
    * when the item is hovered/focused
    */
   actions?: Slot<'span'>;
+  groupper: NonNullable<Slot<'span'>>;
 };
 
 /**
diff --git a/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx
index fc9a376575b50..6ebab4c66f968 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx
@@ -9,13 +9,15 @@ export const renderTreeItem_unstable = (state: TreeItemState) => {
   const { slots, slotProps } = getSlots<TreeItemSlots>(state);
 
   return (
-    <slots.root {...slotProps.root}>
-      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}
-      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}
-      {slotProps.root.children}
-      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}
-      {slots.badges && <slots.badges {...slotProps.badges} />}
-      {slots.actions && <slots.actions {...slotProps.actions} />}
-    </slots.root>
+    <slots.groupper {...slotProps.groupper}>
+      <slots.root {...slotProps.root}>
+        {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}
+        {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}
+        {slotProps.root.children}
+        {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}
+        {slots.badges && <slots.badges {...slotProps.badges} />}
+        {slots.actions && <slots.actions {...slotProps.actions} />}
+      </slots.root>
+    </slots.groupper>
   );
 };
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
index f30bcd068fc15..2732354504016 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
@@ -1,10 +1,14 @@
 import * as React from 'react';
-import { isResolvedShorthand, resolveShorthand } from '@fluentui/react-utilities';
-import type { TreeItemElement, TreeItemProps, TreeItemState } from './TreeItem.types';
+import { ExtractSlotProps, isResolvedShorthand, resolveShorthand, Slot } from '@fluentui/react-utilities';
 import { ChevronRightRegular } from '@fluentui/react-icons';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { useBaseTreeItem_unstable } from '../BaseTreeItem/index';
 import { useEventCallback } from '@fluentui/react-utilities';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { expandIconInlineStyles } from './useTreeItemStyles';
+import type { TreeItemProps, TreeItemState } from './TreeItem.types';
+import { useBaseTreeItem_unstable } from '../BaseTreeItem/index';
+import { Enter } from '@fluentui/keyboard-keys';
+import { useMergedRefs } from '@fluentui/react-utilities';
 
 /**
  * Create the state required to render TreeItem.
@@ -15,19 +19,14 @@ import { useEventCallback } from '@fluentui/react-utilities';
  * @param props - props from this instance of TreeItem
  * @param ref - reference to root HTMLElement of TreeItem
  */
-export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<TreeItemElement>): TreeItemState => {
+export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState => {
   const treeItemState = useBaseTreeItem_unstable(props, ref);
-  const { expandIcon, iconBefore, iconAfter, actions, badges } = props;
+  const { expandIcon, iconBefore, iconAfter, actions, badges, groupper } = props;
   const { dir } = useFluent_unstable();
   const expandIconRotation = treeItemState.open ? 90 : dir !== 'rtl' ? 0 : 180;
+  const groupperProps = useFocusableGroup();
 
-  // prevent default of a click from actions to ensure it doesn't open the treeitem
-  const handleActionsClick = useEventCallback((event: React.MouseEvent<HTMLElement>) => {
-    if (isResolvedShorthand(actions)) {
-      actions.onClick?.(event);
-    }
-    event.preventDefault();
-  });
+  const actionsRef = React.useRef<HTMLElement>(null);
 
   return {
     ...treeItemState,
@@ -38,7 +37,35 @@ export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<TreeIt
       iconAfter: 'span',
       actions: 'span',
       badges: 'span',
+      groupper: 'span',
+    },
+    root: {
+      ...treeItemState.root,
+      onClick: useEventCallback(event => {
+        //  if click event comer from actions, ignore it
+        if (actionsRef.current && actionsRef.current?.contains(event.target as Node)) {
+          return;
+        }
+        // if click event comes from a portal, e.g: MenuItem click, ignore it
+        if (!event.currentTarget.contains(event.target as Node)) {
+          return;
+        }
+        treeItemState.root.onClick?.(event);
+      }),
+      onKeyDown: useEventCallback(event => {
+        if (event.key === Enter) {
+          // if Enter keydown event comes from actions, ignore it
+          if (actionsRef.current && actionsRef.current.contains(event.target as Node)) {
+            return;
+          }
+        }
+        treeItemState.root.onKeyDown?.(event);
+      }),
     },
+    groupper: resolveShorthand(groupper, {
+      required: true,
+      defaultProps: groupperProps as ExtractSlotProps<Slot<'span'>>,
+    }),
     iconBefore: resolveShorthand(iconBefore, {
       defaultProps: { 'aria-hidden': true },
     }),
@@ -48,7 +75,7 @@ export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<TreeIt
     expandIcon: resolveShorthand(expandIcon, {
       required: !treeItemState.isLeaf,
       defaultProps: {
-        children: <ChevronRightRegular style={{ transform: `rotate(${expandIconRotation}deg)` }} />,
+        children: <ChevronRightRegular style={expandIconInlineStyles[expandIconRotation]} />,
         'aria-hidden': true,
       },
     }),
@@ -57,12 +84,10 @@ export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<TreeIt
         'aria-hidden': true,
       },
     }),
+    // FIXME: Menu only works if it's inline since actions is not available to properly position anchor.
     actions: resolveShorthand(actions, {
       defaultProps: {
-        // FIXME: this should not be aria-hidden as this should be reachable through tab
-        //  without aria-hidden tabster navigation is breaking.
-        'aria-hidden': true,
-        onClick: handleActionsClick,
+        ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef),
       },
     }),
   };
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
index 50f410d3a5cba..f4ece77b7f662 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
@@ -13,6 +13,7 @@ export const treeItemClassNames: SlotClassNames<TreeItemSlots> = {
   iconAfter: 'fui-TreeItem__iconAfter',
   actions: 'fui-TreeItem__actions',
   badges: 'fui-TreeItem__badges',
+  groupper: 'fui-TreeItem__groupper',
 };
 
 const treeItemTokens = {
@@ -45,24 +46,22 @@ const useRootStyles = makeStyles({
     },
     ':focus': {
       [`& .${treeItemClassNames.actions}`]: {
-        display: 'flex',
         opacity: '1',
         position: 'relative',
-        width: 'unset',
-        height: 'unset',
-        right: 'unset',
+      },
+    },
+    ':focus-within': {
+      [`& .${treeItemClassNames.actions}`]: {
+        opacity: '1',
+        position: 'relative',
       },
     },
     ':hover': {
       color: tokens.colorNeutralForeground2Hover,
       backgroundColor: tokens.colorSubtleBackgroundHover,
       [`& .${treeItemClassNames.actions}`]: {
-        display: 'flex',
         opacity: '1',
         position: 'relative',
-        width: 'unset',
-        height: 'unset',
-        right: 'unset',
       },
       [`& .${treeItemClassNames.expandIcon}`]: {
         color: tokens.colorNeutralForeground3Hover,
@@ -75,6 +74,11 @@ const useRootStyles = makeStyles({
         display: 'none',
       },
     },
+    ':focus-within': {
+      [`& .${treeItemClassNames.badges}`]: {
+        display: 'none',
+      },
+    },
     ':hover': {
       [`& .${treeItemClassNames.badges}`]: {
         display: 'none',
@@ -184,16 +188,22 @@ const useBadgesStyles = makeStyles({
  */
 const useActionsStyles = makeStyles({
   base: {
+    display: 'flex',
     opacity: '0',
     position: 'absolute',
-    width: 0,
-    height: 0,
     right: 0,
+    top: 0,
     marginLeft: 'auto',
     ...shorthands.padding(0, tokens.spacingHorizontalXS),
   },
 });
 
+export const expandIconInlineStyles = {
+  90: { transform: `rotate(90deg)` },
+  0: { transform: `rotate(0deg)` },
+  180: { transform: `rotate(180deg)` },
+} as const;
+
 /**
  * Apply styling to the TreeItem slots based on the state
  */
diff --git a/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx
index ec0814ae73fab..a5403d8fe265b 100644
--- a/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx
+++ b/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx
@@ -1,12 +1,25 @@
 import * as React from 'react';
 import { Tree, TreeItem } from '@fluentui/react-tree';
 import { Edit20Regular, MoreHorizontal20Regular } from '@fluentui/react-icons';
-import { Button } from '@fluentui/react-components';
+import { Button, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
 
 const RenderActions = () => (
   <>
     <Button appearance="subtle" icon={<Edit20Regular />} />
-    <Button appearance="subtle" icon={<MoreHorizontal20Regular />} />
+    <Menu inline>
+      <MenuTrigger disableButtonEnhancement>
+        <Button appearance="subtle" icon={<MoreHorizontal20Regular />} />
+      </MenuTrigger>
+
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>New </MenuItem>
+          <MenuItem>New Window</MenuItem>
+          <MenuItem disabled>Open File</MenuItem>
+          <MenuItem>Open Folder</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
   </>
 );
 

From f8e722cd929b4b5c4050258e632b1a9ebce9c49f Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Tue, 27 Dec 2022 18:21:15 +0000
Subject: [PATCH 2/6] chore: updates API

---
 .../react-components/react-tree/etc/react-tree.api.md    | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
index 468b8d734a330..c11618ec4c6ee 100644
--- a/packages/react-components/react-tree/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -6,8 +6,6 @@
 
 /// <reference types="react" />
 
-import type { ARIAButtonElement } from '@fluentui/react-aria';
-import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
@@ -30,7 +28,7 @@ export type BaseTreeItemProps = ComponentProps<BaseTreeItemSlots>;
 
 // @public (undocumented)
 export type BaseTreeItemSlots = {
-    root: Slot<ARIAButtonSlotProps>;
+    root: Slot<'div'>;
 };
 
 // @public
@@ -81,6 +79,7 @@ export type TreeItemSlots = BaseTreeItemSlots & {
     iconAfter?: Slot<'span'>;
     badges?: Slot<'span'>;
     actions?: Slot<'span'>;
+    groupper: NonNullable<Slot<'span'>>;
 };
 
 // @public
@@ -109,7 +108,7 @@ export type TreeState = ComponentState<TreeSlots> & TreeContextValue & {
 };
 
 // @public
-export const useBaseTreeItem_unstable: (props: BaseTreeItemProps, ref: React_2.Ref<BaseTreeItemElement>) => BaseTreeItemState;
+export const useBaseTreeItem_unstable: (props: BaseTreeItemProps, ref: React_2.Ref<HTMLDivElement>) => BaseTreeItemState;
 
 // @public
 export const useBaseTreeItemStyles_unstable: (state: BaseTreeItemState) => BaseTreeItemState;
@@ -121,7 +120,7 @@ export const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>)
 export const useTreeContext_unstable: <T>(selector: ContextSelector<TreeContextValue, T>) => T;
 
 // @public
-export const useTreeItem_unstable: (props: TreeItemProps, ref: React_2.Ref<TreeItemElement>) => TreeItemState;
+export const useTreeItem_unstable: (props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>) => TreeItemState;
 
 // @public
 export const useTreeItemStyles_unstable: (state: TreeItemState) => TreeItemState;

From a3cd13099eda28205b60cc003e788be3d3cda71f Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Tue, 27 Dec 2022 18:37:29 +0000
Subject: [PATCH 3/6] chore: fix tests and groupper className

---
 .../src/components/TreeItem/TreeItem.test.tsx |  6 ++++++
 .../__snapshots__/TreeItem.test.tsx.snap      | 21 ++++++++++++-------
 .../components/TreeItem/useTreeItemStyles.ts  |  2 ++
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx
index 79512cdfa7064..d61afb40fb348 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx
@@ -3,11 +3,17 @@ import { render } from '@testing-library/react';
 import { TreeItem } from './TreeItem';
 import { isConformant } from '../../testing/isConformant';
 import { TreeItemProps } from './TreeItem.types';
+import { treeItemClassNames } from './useTreeItemStyles';
 
 describe('TreeItem', () => {
   isConformant<TreeItemProps>({
     Component: TreeItem,
     displayName: 'TreeItem',
+    // primarySlot: 'groupper',
+    getTargetElement(renderResult, attr) {
+      return renderResult.container.querySelector(`.${treeItemClassNames.root}`) ?? renderResult.container;
+    },
+    disabledTests: ['component-has-static-classnames-object'],
     testOptions: {
       'has-static-classnames': [
         {
diff --git a/packages/react-components/react-tree/src/components/TreeItem/__snapshots__/TreeItem.test.tsx.snap b/packages/react-components/react-tree/src/components/TreeItem/__snapshots__/TreeItem.test.tsx.snap
index 0a31ffa7e10d4..9a032bbdd5403 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/__snapshots__/TreeItem.test.tsx.snap
+++ b/packages/react-components/react-tree/src/components/TreeItem/__snapshots__/TreeItem.test.tsx.snap
@@ -2,14 +2,19 @@
 
 exports[`TreeItem renders a default state 1`] = `
 <div>
-  <div
-    aria-level="0"
-    class="fui-TreeItem"
-    role="treeitem"
-    style="--fluent-TreeItem--level: -1;"
-    tabindex="0"
+  <span
+    class="fui-TreeItem__groupper"
+    data-tabster="{\\"groupper\\":{}}"
   >
-    Default TreeItem
-  </div>
+    <div
+      aria-level="0"
+      class="fui-TreeItem"
+      role="treeitem"
+      style="--fluent-TreeItem--level: -1;"
+      tabindex="0"
+    >
+      Default TreeItem
+    </div>
+  </span>
 </div>
 `;
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
index f4ece77b7f662..0b38cfdd1781c 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
@@ -233,6 +233,8 @@ export const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState
     state.root.className,
   );
 
+  state.groupper.className = mergeClasses(treeItemClassNames.groupper, state.groupper.className);
+
   state.root.style = {
     ...state.root.style,
     [treeItemTokens.level]: level,

From d5cd7a504524edec1f22f6a30a0bc6cde0162ad4 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Wed, 4 Jan 2023 10:38:01 -0300
Subject: [PATCH 4/6] Update
 packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx

Co-authored-by: ling1726 <lingfangao@hotmail.com>
---
 .../react-tree/src/components/TreeItem/useTreeItem.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
index 2732354504016..d616351fde176 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
@@ -42,7 +42,7 @@ export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDi
     root: {
       ...treeItemState.root,
       onClick: useEventCallback(event => {
-        //  if click event comer from actions, ignore it
+        //  if click event originates from actions, ignore it
         if (actionsRef.current && actionsRef.current?.contains(event.target as Node)) {
           return;
         }

From 19ba7a266203080d1c4b6637caddb30b7303a413 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Wed, 4 Jan 2023 18:25:23 +0000
Subject: [PATCH 5/6] chore: ensures functionality with Menu

---
 .../react-tree/etc/react-tree.api.md          |  4 +-
 .../react-components/react-tree/package.json  |  1 +
 .../src/components/TreeItem/TreeItem.types.ts |  8 ++-
 .../src/components/TreeItem/useTreeItem.tsx   | 63 ++++++++++++-------
 .../components/TreeItem/useTreeItemStyles.ts  | 11 +++-
 .../stories/Tree/TreeActions.stories.tsx      | 38 +++++------
 6 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
index c11618ec4c6ee..0aeb610ba2e3c 100644
--- a/packages/react-components/react-tree/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -83,7 +83,9 @@ export type TreeItemSlots = BaseTreeItemSlots & {
 };
 
 // @public
-export type TreeItemState = ComponentState<TreeItemSlots> & BaseTreeItemState;
+export type TreeItemState = ComponentState<TreeItemSlots> & BaseTreeItemState & {
+    keepActionsOpen: boolean;
+};
 
 // @public (undocumented)
 export type TreeProps = ComponentProps<TreeSlots> & {
diff --git a/packages/react-components/react-tree/package.json b/packages/react-components/react-tree/package.json
index 5b21cee332a8d..c3bda21dce8fd 100644
--- a/packages/react-components/react-tree/package.json
+++ b/packages/react-components/react-tree/package.json
@@ -35,6 +35,7 @@
     "@fluentui/react-shared-contexts": "^9.1.4",
     "@fluentui/react-aria": "^9.3.4",
     "@fluentui/react-tabster": "^9.3.5",
+    "@fluentui/react-portal": "^9.0.15",
     "@fluentui/keyboard-keys": "^9.0.1",
     "@fluentui/react-theme": "^9.1.5",
     "@fluentui/react-utilities": "^9.3.1",
diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
index 862a726f29e0d..60a8e04a24efd 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
@@ -35,4 +35,10 @@ export type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & BaseTreeIte
 /**
  * State used in rendering TreeItem
  */
-export type TreeItemState = ComponentState<TreeItemSlots> & BaseTreeItemState;
+export type TreeItemState = ComponentState<TreeItemSlots> &
+  BaseTreeItemState & {
+    /**
+     * boolean indicating that actions should remain open due to focus on some portal
+     */
+    keepActionsOpen: boolean;
+  };
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
index d616351fde176..03762a669c3aa 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
@@ -5,10 +5,11 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { useEventCallback } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { expandIconInlineStyles } from './useTreeItemStyles';
-import type { TreeItemProps, TreeItemState } from './TreeItem.types';
 import { useBaseTreeItem_unstable } from '../BaseTreeItem/index';
 import { Enter } from '@fluentui/keyboard-keys';
 import { useMergedRefs } from '@fluentui/react-utilities';
+import { elementContains } from '@fluentui/react-portal';
+import type { TreeItemProps, TreeItemState } from './TreeItem.types';
 
 /**
  * Create the state required to render TreeItem.
@@ -22,14 +23,49 @@ import { useMergedRefs } from '@fluentui/react-utilities';
 export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState => {
   const treeItemState = useBaseTreeItem_unstable(props, ref);
   const { expandIcon, iconBefore, iconAfter, actions, badges, groupper } = props;
-  const { dir } = useFluent_unstable();
+  const { dir, targetDocument } = useFluent_unstable();
   const expandIconRotation = treeItemState.open ? 90 : dir !== 'rtl' ? 0 : 180;
   const groupperProps = useFocusableGroup();
 
   const actionsRef = React.useRef<HTMLElement>(null);
 
+  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    //  if click event originates from actions, ignore it
+    if (actionsRef.current && elementContains(actionsRef.current, event.target as Node)) {
+      return;
+    }
+    treeItemState.root.onClick?.(event);
+  });
+
+  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === Enter) {
+      // if Enter keydown event comes from actions, ignore it
+      if (actionsRef.current && elementContains(actionsRef.current, event.target as Node)) {
+        return;
+      }
+    }
+    treeItemState.root.onKeyDown?.(event);
+  });
+
+  const [keepActionsOpen, setKeepActionsOpen] = React.useState(false);
+
+  // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios
+  // TODO: find a better way to ensure this behavior
+  React.useEffect(() => {
+    if (actionsRef.current) {
+      const handleFocusOut = (event: FocusEvent) => {
+        setKeepActionsOpen(elementContains(actionsRef.current, event.relatedTarget as Node));
+      };
+      targetDocument?.addEventListener('focusout', handleFocusOut, { passive: true });
+      return () => {
+        targetDocument?.removeEventListener('focusout', handleFocusOut);
+      };
+    }
+  }, [targetDocument]);
+
   return {
     ...treeItemState,
+    keepActionsOpen,
     components: {
       ...treeItemState.components,
       expandIcon: 'span',
@@ -41,26 +77,8 @@ export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDi
     },
     root: {
       ...treeItemState.root,
-      onClick: useEventCallback(event => {
-        //  if click event originates from actions, ignore it
-        if (actionsRef.current && actionsRef.current?.contains(event.target as Node)) {
-          return;
-        }
-        // if click event comes from a portal, e.g: MenuItem click, ignore it
-        if (!event.currentTarget.contains(event.target as Node)) {
-          return;
-        }
-        treeItemState.root.onClick?.(event);
-      }),
-      onKeyDown: useEventCallback(event => {
-        if (event.key === Enter) {
-          // if Enter keydown event comes from actions, ignore it
-          if (actionsRef.current && actionsRef.current.contains(event.target as Node)) {
-            return;
-          }
-        }
-        treeItemState.root.onKeyDown?.(event);
-      }),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
     },
     groupper: resolveShorthand(groupper, {
       required: true,
@@ -84,7 +102,6 @@ export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDi
         'aria-hidden': true,
       },
     }),
-    // FIXME: Menu only works if it's inline since actions is not available to properly position anchor.
     actions: resolveShorthand(actions, {
       defaultProps: {
         ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef),
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
index 0b38cfdd1781c..106d5c80cdef7 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts
@@ -196,6 +196,10 @@ const useActionsStyles = makeStyles({
     marginLeft: 'auto',
     ...shorthands.padding(0, tokens.spacingHorizontalXS),
   },
+  open: {
+    opacity: '1',
+    position: 'relative',
+  },
 });
 
 export const expandIconInlineStyles = {
@@ -268,7 +272,12 @@ export const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState
   }
 
   if (actions) {
-    actions.className = mergeClasses(treeItemClassNames.actions, actionsStyles.base, actions.className);
+    actions.className = mergeClasses(
+      treeItemClassNames.actions,
+      actionsStyles.base,
+      state.keepActionsOpen && actionsStyles.open,
+      actions.className,
+    );
   }
   if (badges) {
     badges.className = mergeClasses(treeItemClassNames.badges, badgesStyles.base, badges.className);
diff --git a/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx
index a5403d8fe265b..cdd2cfbed1683 100644
--- a/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx
+++ b/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx
@@ -3,25 +3,27 @@ import { Tree, TreeItem } from '@fluentui/react-tree';
 import { Edit20Regular, MoreHorizontal20Regular } from '@fluentui/react-icons';
 import { Button, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
 
-const RenderActions = () => (
-  <>
-    <Button appearance="subtle" icon={<Edit20Regular />} />
-    <Menu inline>
-      <MenuTrigger disableButtonEnhancement>
-        <Button appearance="subtle" icon={<MoreHorizontal20Regular />} />
-      </MenuTrigger>
+const RenderActions = () => {
+  return (
+    <>
+      <Button appearance="subtle" icon={<Edit20Regular />} />
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <Button appearance="subtle" icon={<MoreHorizontal20Regular />} />
+        </MenuTrigger>
 
-      <MenuPopover>
-        <MenuList>
-          <MenuItem>New </MenuItem>
-          <MenuItem>New Window</MenuItem>
-          <MenuItem disabled>Open File</MenuItem>
-          <MenuItem>Open Folder</MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  </>
-);
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>New </MenuItem>
+            <MenuItem>New Window</MenuItem>
+            <MenuItem disabled>Open File</MenuItem>
+            <MenuItem>Open Folder</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </>
+  );
+};
 
 export const Actions = () => (
   <Tree aria-label="Tree">

From 8dda994ea86265b7a1ff2dc06a5784256c6a9811 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Mon, 9 Jan 2023 11:51:22 +0000
Subject: [PATCH 6/6] chore: adds role presentation to groupper

---
 .../TreeItem/__snapshots__/TreeItem.test.tsx.snap          | 1 +
 .../react-tree/src/components/TreeItem/useTreeItem.tsx     | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-tree/src/components/TreeItem/__snapshots__/TreeItem.test.tsx.snap b/packages/react-components/react-tree/src/components/TreeItem/__snapshots__/TreeItem.test.tsx.snap
index 9a032bbdd5403..d48c13a7ea3e0 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/__snapshots__/TreeItem.test.tsx.snap
+++ b/packages/react-components/react-tree/src/components/TreeItem/__snapshots__/TreeItem.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`TreeItem renders a default state 1`] = `
   <span
     class="fui-TreeItem__groupper"
     data-tabster="{\\"groupper\\":{}}"
+    role="presentation"
   >
     <div
       aria-level="0"
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
index 03762a669c3aa..4bd12049fd7ac 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExtractSlotProps, isResolvedShorthand, resolveShorthand, Slot } from '@fluentui/react-utilities';
+import { isResolvedShorthand, resolveShorthand } from '@fluentui/react-utilities';
 import { ChevronRightRegular } from '@fluentui/react-icons';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { useEventCallback } from '@fluentui/react-utilities';
@@ -82,7 +82,10 @@ export const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDi
     },
     groupper: resolveShorthand(groupper, {
       required: true,
-      defaultProps: groupperProps as ExtractSlotProps<Slot<'span'>>,
+      defaultProps: {
+        role: 'presentation',
+        ...groupperProps,
+      },
     }),
     iconBefore: resolveShorthand(iconBefore, {
       defaultProps: { 'aria-hidden': true },