bugfix(react-tree): fix VisibleFlatTreeItemGenerator omitting visible items

Author: bsunderhus

change/@fluentui-react-tree-e91902ae-b031-47c0-99be-2f7450c3f3f7.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "bugfix: fix VisibleFlatTreeItemGenerator omitting visible items",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tree/src/utils/createFlatTreeItems.ts

@@ -109,12 +109,12 @@ export function* VisibleFlatTreeItemGenerator<Props extends FlatTreeItemProps<un
 ) {
   for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {
     const item = flatTreeItems.getByIndex(index) as FlatTreeItem<Props>;
-    const parent = item.parentValue ? flatTreeItems.get(item.parentValue) ?? flatTreeItems.root : flatTreeItems.root;
     if (isItemVisible(item, openItems, flatTreeItems)) {
       item.index = visibleIndex++;
       yield item;
     } else {
-      index += parent.childrenSize - 1 + item.childrenSize;
+      // Jump the amount of children the current item has, since those items will also be hidden
+      index += item.childrenSize;
     }
   }
 }

packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx

@@ -1,45 +1,51 @@
+import {
+  Tree,
+  TreeItem,
+  TreeItemLayout,
+  useFlatTree_unstable,
+  FlatTreeItemProps,
+} from '@fluentui/react-components/unstable';
 import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, FlatTreeItemProps } from '@fluentui/react-tree';
-import story from './useFlatTree.md';
 
-type Item = FlatTreeItemProps & { content: string };
-
-const defaultItems: Item[] = [
-  { value: '1', content: 'Level 1, item 1' },
-  { value: '1-1', parentValue: '1', content: 'Level 2, item 1' },
-  { value: '1-2', parentValue: '1', content: 'Level 2, item 2' },
-  { value: '1-3', parentValue: '1', content: 'Level 2, item 3' },
-  { value: '2', content: 'Level 1, item 2' },
-  { value: '2-1', parentValue: '2', content: 'Level 2, item 1' },
-  { value: '2-1-1', parentValue: '2-1', content: 'Level 3, item 1' },
-  { value: '2-2', parentValue: '2', content: 'Level 2, item 2' },
-  { value: '2-2-1', parentValue: '2-2', content: 'Level 3, item 1' },
-  { value: '2-2-2', parentValue: '2-2', content: 'Level 3, item 2' },
-  { value: '2-2-3', parentValue: '2-2', content: 'Level 3, item 3' },
-  { value: '3', content: 'Level 1, item 3' },
+const defaultItems: FlatTreeItemProps[] = [
+  {
+    value: '1',
+    children: <TreeItemLayout>Level 1, item 1</TreeItemLayout>,
+  },
+  {
+    value: '1-1',
+    parentValue: '1',
+    children: <TreeItemLayout>Level 2, item 1</TreeItemLayout>,
+  },
+  {
+    value: '1-1-1',
+    parentValue: '1-1',
+    children: <TreeItemLayout>Level 3, item 1</TreeItemLayout>,
+  },
+  {
+    value: '1-1-1-1',
+    parentValue: '1-1-1',
+    children: <TreeItemLayout>Level 4, item 1</TreeItemLayout>,
+  },
+  {
+    value: '1-2',
+    parentValue: '1',
+    children: <TreeItemLayout>Level 2, item 2</TreeItemLayout>,
+  },
+  {
+    value: '2',
+    children: <TreeItemLayout>Level 1, item 2</TreeItemLayout>,
+  },
 ];
 
 export const UseFlatTree = () => {
   const flatTree = useFlatTree_unstable(defaultItems);
 
   return (
     <Tree {...flatTree.getTreeProps()} aria-label="Tree">
-      {Array.from(flatTree.items(), flatTreeItem => {
-        const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps();
-        return (
-          <TreeItem {...treeItemProps} key={flatTreeItem.value}>
-            <TreeItemLayout>{content}</TreeItemLayout>
-          </TreeItem>
-        );
-      })}
+      {Array.from(flatTree.items(), flatTreeItem => (
+        <TreeItem {...flatTreeItem.getTreeItemProps()} key={flatTreeItem.value} />
+      ))}
     </Tree>
   );
 };
-
-UseFlatTree.parameters = {
-  docs: {
-    description: {
-      story,
-    },
-  },
-};