chore: improves internal headless signature

change/@fluentui-react-tree-b70a6941-a063-49d6-a196-4dbd7abfd90c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: improves internal headless signature",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -332,7 +332,7 @@ export const useFlatTree_unstable: (props: FlatTreeProps, ref: React_2.Ref<HTMLE
 export const useFlatTreeStyles_unstable: (state: TreeState) => TreeState;
 
 // @public
-export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(flatTreeItemProps: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTree<Props>;
+export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(props: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTree<Props>;
 
 // @public (undocumented)
 export const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;

packages/react-components/react-tree/src/components/FlatTree/useHeadlessFlatTree.ts

@@ -104,17 +104,17 @@ export type HeadlessFlatTreeOptions = Pick<
  * It should be used on cases where more complex interactions with a Tree is required.
  * On simple scenarios it is advised to simply use a nested structure instead.
  *
- * @param flatTreeItemProps - a list of tree items
+ * @param props - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
 export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(
-  flatTreeItemProps: Props[],
+  props: Props[],
   options: HeadlessFlatTreeOptions = {},
 ): HeadlessFlatTree<Props> {
-  const flatTreeItems = React.useMemo(() => createHeadlessTree(flatTreeItemProps), [flatTreeItemProps]);
+  const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);
   const [openItems, setOpenItems] = useControllableOpenItems(options);
   const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options);
-  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
+  const [navigate, navigationRef] = useFlatTreeNavigation(headlessTree);
   const treeRef = React.useRef<HTMLDivElement>(null);
   const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
     options.onOpenChange?.(event, data);
@@ -123,7 +123,7 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
 
   const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {
     options.onCheckedChange?.(event, data);
-    setCheckedItems(createNextFlatCheckedItems(data, checkedItems, flatTreeItems));
+    setCheckedItems(createNextFlatCheckedItems(data, checkedItems, headlessTree));
   });
 
   const handleNavigation = useEventCallback(
@@ -135,13 +135,13 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
 
   const getNextNavigableItem = useEventCallback(
     (visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable) => {
-      const item = flatTreeItems.get(data.value);
+      const item = headlessTree.get(data.value);
       if (item) {
         switch (data.type) {
           case treeDataTypes.TypeAhead:
             return item;
           case treeDataTypes.ArrowLeft:
-            return flatTreeItems.get(item.parentValue!);
+            return headlessTree.get(item.parentValue!);
           case treeDataTypes.ArrowRight:
             return visibleItems[item.index + 1];
           case treeDataTypes.End:
@@ -178,7 +178,7 @@ export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps
     [openItems, checkedItems],
   );
 
-  const items = React.useCallback(() => flatTreeItems.visibleItems(openItems), [openItems, flatTreeItems]);
+  const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);
 
   return React.useMemo<HeadlessFlatTree<Props>>(
     () => ({ navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items }),

packages/react-components/react-tree/src/contexts/treeItemContext.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
 import type { TreeItemType, TreeItemValue } from '../TreeItem';
+import { virtualTreeRootId } from '../utils/createHeadlessTree';
 
 export type TreeItemContextValue = {
   isActionsVisible: boolean;
@@ -16,7 +17,7 @@ export type TreeItemContextValue = {
 };
 
 const defaultContextValue: TreeItemContextValue = {
-  value: '',
+  value: virtualTreeRootId,
   selectionRef: React.createRef(),
   layoutRef: React.createRef(),
   subtreeRef: React.createRef(),

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

@@ -28,10 +28,6 @@ export function useRovingTabIndex(filter?: HTMLElementFilter) {
     walker.currentElement = walker.root;
     tabbableChild ??= walker.firstChild();
     if (!tabbableChild) {
-      if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.warn('useRovingTabIndexes: internal error, no tabbable element was found');
-      }
       return;
     }
     tabbableChild.tabIndex = 0;