From a8454b4f5ae920c79c45fdbcaeab1938b65ac6bd Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Thu, 2 Nov 2023 11:51:33 +0000
Subject: [PATCH] chore: throws if FlatTree is used as a subtree

---
 ...ee-0174e77b-7502-4cae-aaff-b17e91eb770e.json |  7 +++++++
 .../src/components/FlatTree/useFlatTree.ts      | 17 +++--------------
 .../react-tree/src/components/Tree/useTree.ts   | 17 +++++++++++------
 3 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 change/@fluentui-react-tree-0174e77b-7502-4cae-aaff-b17e91eb770e.json

diff --git a/change/@fluentui-react-tree-0174e77b-7502-4cae-aaff-b17e91eb770e.json b/change/@fluentui-react-tree-0174e77b-7502-4cae-aaff-b17e91eb770e.json
new file mode 100644
index 00000000000000..81f74922c4d882
--- /dev/null
+++ b/change/@fluentui-react-tree-0174e77b-7502-4cae-aaff-b17e91eb770e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: throws if FlatTree is used as a subtree",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/src/components/FlatTree/useFlatTree.ts b/packages/react-components/react-tree/src/components/FlatTree/useFlatTree.ts
index 41df3fe9e027d1..efb675efa87800 100644
--- a/packages/react-components/react-tree/src/components/FlatTree/useFlatTree.ts
+++ b/packages/react-components/react-tree/src/components/FlatTree/useFlatTree.ts
@@ -5,9 +5,8 @@ import { useFlatTreeNavigation } from './useFlatTreeNavigation';
 import { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { treeItemFilter } from '../../utils/treeItemFilter';
-import { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import type { TreeNavigationData_unstable, TreeNavigationEvent_unstable } from '../Tree/Tree.types';
-import { useTreeContext_unstable } from '../../contexts/treeContext';
 import { useSubtree } from '../../hooks/useSubtree';
 import { ImmutableSet } from '../../utils/ImmutableSet';
 import { ImmutableMap } from '../../utils/ImmutableMap';
@@ -56,18 +55,10 @@ function useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): Fla
 
 function useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {
   if (process.env.NODE_ENV === 'development') {
-    // eslint-disable-next-line no-console
-    console.error(/* #__DE-INDENT__ */ `
+    throw new Error(/* #__DE-INDENT__ */ `
       @fluentui/react-tree [useFlatTree]:
       Subtrees are not allowed in a FlatTree!
-      You cannot use a <FlatTree> component inside of another <FlatTree> component.
-    `);
-  }
-  if (useTreeContext_unstable(ctx => ctx.treeType) === 'nested' && process.env.NODE_ENV === 'development') {
-    // eslint-disable-next-line no-console
-    console.error(/* #__DE-INDENT__ */ `
-      @fluentui/react-tree [useFlatTree]:
-      Error: <FlatTree> component cannot be used inside of a nested <Tree> component and vice versa.
+      You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!
     `);
   }
   return {
@@ -84,8 +75,6 @@ function useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): Flat
     size: 'medium',
     // ------ defaultTreeContextValue
     open: false,
-    components: { root: React.Fragment },
-    root: slot.always(props, { elementType: React.Fragment }),
   };
 }
 
diff --git a/packages/react-components/react-tree/src/components/Tree/useTree.ts b/packages/react-components/react-tree/src/components/Tree/useTree.ts
index bbd3a929eded9e..7c55cd37873021 100644
--- a/packages/react-components/react-tree/src/components/Tree/useTree.ts
+++ b/packages/react-components/react-tree/src/components/Tree/useTree.ts
@@ -90,12 +90,17 @@ function useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeS
 }
 
 function useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {
-  if (useTreeContext_unstable(ctx => ctx.treeType) === 'flat' && process.env.NODE_ENV === 'development') {
-    // eslint-disable-next-line no-console
-    console.error(/* #__DE-INDENT__ */ `
-      @fluentui/react-tree [useTree]:
-      Error: <Tree> component cannot be used inside of a nested <FlatTree> component and vice versa.
-    `);
+  if (process.env.NODE_ENV === 'development') {
+    // this doesn't break rule of hooks, as environment is a static value
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const treeType = useTreeContext_unstable(ctx => ctx.treeType);
+    if (treeType === 'flat') {
+      throw new Error(/* #__DE-INDENT__ */ `
+        @fluentui/react-tree [useTree]:
+        Subtrees are not allowed in a FlatTree!
+        You cannot use a <Tree> component inside of a <FlatTree> component!
+      `);
+    }
   }
   return useSubtree(props, ref);
 }