feature(react-tree): TreeRootReset component

change/@fluentui-react-components-8e070f58-09e6-4a66-bd63-bbd13b27db88.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: TreeRootReset component",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-b452026f-0282-4a88-a922-34c2a983c77c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: TreeRootReset component",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-components/src/index.ts

@@ -1306,6 +1306,7 @@ export {
   useTreeItem_unstable,
   useTreeStyles_unstable,
   useTree_unstable,
+  TreeRootReset,
 } from '@fluentui/react-tree';
 
 export type {

packages/react-components/react-tree/library/etc/react-tree.api.md

@@ -383,6 +383,9 @@ export const TreeProvider: {
     displayName: string;
 };
 
+// @public (undocumented)
+export const TreeRootReset: (props: TreeRootResetProps) => JSX.Element;
+
 // @public (undocumented)
 export type TreeSelectionValue = MultiSelectValue | SingleSelectValue;
 

packages/react-components/react-tree/library/src/components/TreeProvider.cy.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { mount as mountBase } from '@cypress/react';
+import { Tree } from '../Tree';
+import { TreeItem, TreeItemProps } from '../TreeItem';
+import { TreeItemLayout } from '../TreeItemLayout';
+import { TreeRootReset } from './TreeProvider';
+import {
+  Popover,
+  PopoverTrigger,
+  Button,
+  PopoverSurface,
+  FluentProvider,
+  teamsLightTheme,
+  useRestoreFocusTarget,
+} from '@fluentui/react-components';
+
+const mount = (element: JSX.Element) => {
+  mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);
+};
+
+describe('TreeRootReset', () => {
+  it('ensure that a subtree will be treated as a root tree', () => {
+    const handleOpenChange1 = cy.spy().as('handleOpenChange1');
+    const handleOpenChange2 = cy.spy().as('handleOpenChange2');
+
+    mount(
+      <Tree openItems={['item1']} onOpenChange={handleOpenChange1}>
+        <TreeItem value="item1" data-testid="tree-item" itemType="branch">
+          <TreeItemLayout
+            actions={
+              <>
+                <TreeRootReset>
+                  <Tree onOpenChange={handleOpenChange2}>
+                    <TreeItem data-testid="item1" id="item1" value="item1" itemType="branch">
+                      <TreeItemLayout>branch</TreeItemLayout>
+                      <Tree>
+                        <TreeItem data-testid="item2" value="item2" itemType="leaf">
+                          leaf
+                        </TreeItem>
+                      </Tree>
+                    </TreeItem>
+                  </Tree>
+                </TreeRootReset>
+              </>
+            }
+          />
+        </TreeItem>
+      </Tree>,
+    );
+    cy.get('[data-testid="item2"]').should('not.exist');
+    cy.get('[data-testid="tree-item"]').focus();
+    cy.get('[data-testid="item1"]').realClick();
+    cy.get('@handleOpenChange1').should('not.have.been.called');
+    cy.get('@handleOpenChange2').should('have.been.called');
+    cy.get('[data-testid="item2"]').should('exist');
+  });
+  it('ensures basic navigation between multiple trees', () => {
+    mount(<Actions />);
+    cy.get('[data-testid="item1"]').should('exist').focus();
+    cy.get('[data-testid="item2"]').should('not.exist');
+    cy.get('[data-testid="action-button"]').should('exist').realClick();
+    cy.get('[data-testid="item2"]').should('exist').focus().realPress('{esc}');
+    cy.get('[data-testid="action-button"]').should('be.focused').realPress(['Shift', 'Tab']);
+    cy.get('[data-testid="item1"]').should('exist').should('be.focused');
+  });
+});
+
+type CustomTreeItemProps = TreeItemProps;
+
+const CustomTreeItem = ({ children, ...props }: CustomTreeItemProps) => {
+  const focusTargetAttribute = useRestoreFocusTarget();
+  const [layoutChildren, subtree] = React.Children.toArray(children);
+
+  return (
+    <TreeItem aria-description="has actions" {...focusTargetAttribute} {...props}>
+      <TreeItemLayout
+        actions={
+          <>
+            <Popover>
+              <PopoverTrigger>
+                <Button data-testid="action-button" aria-label="Edit" appearance="subtle" icon={<div />} />
+              </PopoverTrigger>
+              <PopoverSurface>
+                <TreeRootReset>
+                  <Tree aria-label="foo">
+                    <TreeItem itemType="leaf">
+                      <TreeItemLayout>Foo</TreeItemLayout>
+                    </TreeItem>
+                    <TreeItem itemType="leaf">
+                      <TreeItemLayout>Foo</TreeItemLayout>
+                    </TreeItem>
+                    <TreeItem data-testid="item2" itemType="branch">
+                      <TreeItemLayout>Foo</TreeItemLayout>
+                      <Tree>
+                        <TreeItem itemType="leaf">
+                          <TreeItemLayout>Foo</TreeItemLayout>
+                        </TreeItem>
+                        <TreeItem itemType="leaf">
+                          <TreeItemLayout>Foo</TreeItemLayout>
+                        </TreeItem>
+                      </Tree>
+                    </TreeItem>
+                  </Tree>
+                </TreeRootReset>
+              </PopoverSurface>
+            </Popover>
+          </>
+        }
+      >
+        {layoutChildren}
+      </TreeItemLayout>
+      {subtree}
+    </TreeItem>
+  );
+};
+
+const Actions = () => {
+  return (
+    <Tree aria-label="Actions">
+      <CustomTreeItem data-testid="item1" itemType="branch">
+        item 1
+        <Tree>
+          <CustomTreeItem itemType="branch">
+            item 1-1
+            <Tree>
+              <CustomTreeItem itemType="leaf">item 1-1-1</CustomTreeItem>
+              <CustomTreeItem itemType="leaf">item 1-1-2</CustomTreeItem>
+              <CustomTreeItem itemType="leaf">item 1-1-3</CustomTreeItem>
+            </Tree>
+          </CustomTreeItem>
+          <CustomTreeItem itemType="leaf">item 1-2</CustomTreeItem>
+          <CustomTreeItem itemType="leaf">item 1-3</CustomTreeItem>
+        </Tree>
+      </CustomTreeItem>
+      <CustomTreeItem itemType="branch">
+        item 2
+        <Tree>
+          <CustomTreeItem itemType="branch">
+            item 2-1
+            <Tree>
+              <CustomTreeItem itemType="leaf">item 2-1-1</CustomTreeItem>
+            </Tree>
+          </CustomTreeItem>
+
+          <CustomTreeItem itemType="branch">
+            item 3
+            <Tree>
+              <CustomTreeItem itemType="leaf">item 3-1</CustomTreeItem>
+              <CustomTreeItem itemType="leaf">item 3-2</CustomTreeItem>
+              <CustomTreeItem itemType="leaf">item 3-3</CustomTreeItem>
+            </Tree>
+          </CustomTreeItem>
+        </Tree>
+      </CustomTreeItem>
+    </Tree>
+  );
+};

packages/react-components/react-tree/library/src/components/TreeProvider.tsx

@@ -21,3 +21,13 @@ export const TreeProvider = (props: React.ProviderProps<TreeContextValue | Subtr
 };
 
 TreeProvider.displayName = 'TreeProvider';
+
+export type TreeRootResetProps = {
+  children?: React.ReactNode;
+};
+
+export const TreeRootReset = (props: TreeRootResetProps) => (
+  <SubtreeContext.Provider value={undefined as unknown as SubtreeContextValue}>
+    {props.children}
+  </SubtreeContext.Provider>
+);

packages/react-components/react-tree/library/src/hooks/useRovingTabIndexes.ts

@@ -2,7 +2,14 @@ import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { HTMLElementWalker } from '../utils/createHTMLElementWalker';
 import { useFocusedElementChange } from '@fluentui/react-tabster';
-import { elementContains } from '@fluentui/react-utilities';
+
+const findTreeItemRoot = (element: HTMLElement) => {
+  let parent = element.parentElement;
+  while (parent && parent.getAttribute('role') !== 'tree') {
+    parent = parent.parentElement;
+  }
+  return parent;
+};
 
 /**
  * @internal
@@ -14,11 +21,11 @@ export function useRovingTabIndex() {
   const { targetDocument } = useFluent();
 
   useFocusedElementChange(element => {
-    if (
-      element?.getAttribute('role') === 'treeitem' &&
-      walkerRef.current &&
-      elementContains(walkerRef.current.root, element)
-    ) {
+    if (element?.getAttribute('role') === 'treeitem' && walkerRef.current && walkerRef.current.root.contains(element)) {
+      const treeitemRoot = findTreeItemRoot(element);
+      if (walkerRef.current.root !== treeitemRoot) {
+        return;
+      }
       rove(element);
     }
   });

packages/react-components/react-tree/library/src/index.ts

@@ -32,7 +32,7 @@ export {
 
 export type { FlatTreeSlots, FlatTreeProps, FlatTreeState } from './FlatTree';
 
-export { TreeProvider } from './components/TreeProvider';
+export { TreeProvider, TreeRootReset } from './components/TreeProvider';
 
 export {
   useTreeContext_unstable,