feat(react-tree): adds useFlatTreeItems hook to introduce flattening by bsunderhus · Pull Request #26856 · microsoft/fluentui

bsunderhus · 2023-02-15T12:39:09Z

New Behavior

Introduces useFlatTreeItems hook to allow the usage of a flat tree structure in the Tree component.
Introduces flattenTree method to allow the usage of a nested tree structure for the consumption of the useFlatTreeItems hook.
Introduces flattenTreeFromElements method to allow the usage of a nested tree structure that derives from Tree and TreeItem elements for the consumption of the useFlatTreeItems hook.

const defaultItems: FlatTreeItemProps[] = [
  {
    id: '1',
    children: <TreeItemLayout>Level 1, item 1</TreeItemLayout>,
  },
  {
    id: '1-1',
    parentId: '1',
    children: <TreeItemLayout>Level 2, item 1</TreeItemLayout>,
  },
  {
    id: '1-2',
    parentId: '1',
    children: <TreeItemLayout>Level 2, item 2</TreeItemLayout>,
  },
  {
    id: '1-3',
    parentId: '1',
    children: <TreeItemLayout>Level 2, item 3</TreeItemLayout>,
  },
  {
    id: '2',
    children: <TreeItemLayout>Level 1, item 2</TreeItemLayout>,
  },
  {
    id: '2-1',
    parentId: '2',
    children: <TreeItemLayout>Level 2, item 1</TreeItemLayout>,
  },
  {
    id: '2-1-1',
    parentId: '2-1',
    children: <TreeItemLayout>Level 3, item 1</TreeItemLayout>,
  },
  {
    id: '2-2',
    parentId: '2',
    children: <TreeItemLayout>Level 2, item 2</TreeItemLayout>,
  },
  {
    id: '2-2-1',
    parentId: '2-2',
    children: <TreeItemLayout>Level 3, item 1</TreeItemLayout>,
  },
  {
    id: '2-2-2',
    parentId: '2-2',
    children: <TreeItemLayout>Level 3, item 2</TreeItemLayout>,
  },
  {
    id: '2-2-3',
    parentId: '2-2',
    children: <TreeItemLayout>Level 3, item 3</TreeItemLayout>,
  },
  {
    id: '3',
    children: <TreeItemLayout>Level 1, item 3</TreeItemLayout>,
  },
];

export const UseFlatTreeItems = () => {
  const [treeProps, flatTreeItems] = useFlatTreeItems_unstable(defaultItems);
  return (
    <Tree {...treeProps} aria-label="Tree">
      {flatTreeItems.map(treeItemProps => (
        <TreeItem {...treeItemProps} key={treeItemProps.id} />
      ))}
    </Tree>
  );
};

fabricteam · 2023-02-15T12:50:40Z

📊 Bundle size report

_{🤖 This report was generated against 7bf995b3b64f3ffb07291fc6f7efedb00611f2de}

codesandbox-ci · 2023-02-15T12:55:11Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7098af7:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2023-02-15T12:55:11Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 7bf995b3b64f3ffb07291fc6f7efedb00611f2de (build)

fabricteam · 2023-02-20T23:09:12Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1267	1277	5000
Button	mount	910	913	5000
Field	mount	1955	1948	5000
FluentProvider	mount	1526	1534	5000
FluentProviderWithTheme	mount	577	588	10
FluentProviderWithTheme	virtual-rerender	538	548	10
FluentProviderWithTheme	virtual-rerender-with-unmount	578	565	10
InfoButton	mount	521	528	5000
MakeStyles	mount	1981	1961	50000
Persona	mount	2860	2804	5000
SpinButton	mount	2291	2271	5000

fabricteam · 2023-02-20T23:17:24Z

Perf Analysis (`@fluentui/react-northstar`)

⚠️ No perf measurements available

fabricteam · 2023-02-20T23:18:27Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-02-20T23:28:25Z

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam · 2023-02-20T23:30:12Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1477	1476	5000
Breadcrumb	mount	3623	3635	1000
Checkbox	mount	3309	3248	5000
CheckboxBase	mount	2884	2965	5000
ChoiceGroup	mount	5534	5551	5000
ComboBox	mount	1569	1537	1000
CommandBar	mount	11882	11938	1000
ContextualMenu	mount	16911	16992	1000
DefaultButton	mount	1767	1738	5000
DetailsRow	mount	4299	4310	5000
DetailsRowFast	mount	4391	4430	5000
DetailsRowNoStyles	mount	4165	4104	5000
Dialog	mount	3794	3827	1000
DocumentCardTitle	mount	727	713	1000
Dropdown	mount	4031	4011	5000
FocusTrapZone	mount	2471	2533	5000
FocusZone	mount	2469	2493	5000
GroupedList	mount	63870	70233	2
GroupedList	virtual-rerender	29973	29800	2
GroupedList	virtual-rerender-with-unmount	112664	111706	2
GroupedListV2	mount	722	707	2
GroupedListV2	virtual-rerender	678	670	2
GroupedListV2	virtual-rerender-with-unmount	697	708	2
IconButton	mount	2451	2457	5000
Label	mount	910	914	5000
Layer	mount	5494	5458	5000
Link	mount	999	1026	5000
MenuButton	mount	2124	2084	5000
MessageBar	mount	2931	2893	5000
Nav	mount	4028	4118	1000
OverflowSet	mount	1701	1673	5000
Panel	mount	3152	3164	1000
Persona	mount	1663	1649	1000
Pivot	mount	2047	2040	1000
PrimaryButton	mount	1912	1979	5000
Rating	mount	8723	8857	5000
SearchBox	mount	1855	1854	5000
Shimmer	mount	3600	3517	5000
Slider	mount	2706	2658	5000
SpinButton	mount	5765	5815	5000
Spinner	mount	1006	986	5000
SplitButton	mount	3875	3910	5000
Stack	mount	1012	1039	5000
StackWithIntrinsicChildren	mount	2899	2830	5000
StackWithTextChildren	mount	6054	6014	5000
SwatchColorPicker	mount	12932	13022	5000
TagPicker	mount	3278	3182	5000
TeachingBubble	mount	109797	111292	5000
Text	mount	987	1015	5000
TextField	mount	1991	2035	5000
ThemeProvider	mount	1940	1930	5000
ThemeProvider	virtual-rerender	1350	1375	5000
ThemeProvider	virtual-rerender-with-unmount	2726	2738	5000
Toggle	mount	1423	1405	5000
buttonNative	mount	695	677	5000

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

packages/react-components/react-tree/src/components/Tree/useTree.ts

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

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

packages/react-components/react-tree/stories/Tree/Virtualization.stories.tsx

packages/react-components/react-tree/stories/Tree/flattenTreeFromElements.stories.tsx

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

bsunderhus self-assigned this Feb 15, 2023

github-actions bot added this to the February Project Cycle Q1 2023 milestone Feb 15, 2023

bsunderhus force-pushed the react-tree/feat--useFlatTreeItems branch 4 times, most recently from 8d6d89c to 5244cd4 Compare February 17, 2023 12:57

bsunderhus force-pushed the react-tree/feat--useFlatTreeItems branch 3 times, most recently from 36a55d0 to 784735c Compare February 24, 2023 16:51

fabricteam reviewed Feb 24, 2023

View reviewed changes

packages/react-components/react-tree/etc/react-tree.api.md Show resolved Hide resolved

bsunderhus force-pushed the react-tree/feat--useFlatTreeItems branch 4 times, most recently from 3fba050 to 1c49e6e Compare February 25, 2023 21:01

bsunderhus marked this pull request as ready for review February 25, 2023 21:02

bsunderhus requested a review from a team as a code owner February 25, 2023 21:02

bsunderhus added 6 commits February 27, 2023 09:21

feat(react-tree): adds useFlatTreeItems hook to introduce flattening

6ec963a

feat: adds flattenTree helper methods

5af3058

chore: updates API

71b47c9

chore: creates ImmutableSet instead of using arrays for openItems

96e9953

chore: adds Virtualization story

32f74db

chore: improves useFlatTreeItems internal algorithm to reduce iterations

59d1fd6

bsunderhus added 3 commits February 27, 2023 09:21

chore: improves performance for useFlatTreeItems

f41a448

chore: fix react-window version

f0f6e3b

chore: update useFlatTreeItem story

ebec91e

bsunderhus force-pushed the react-tree/feat--useFlatTreeItems branch from 48219fb to ebec91e Compare February 27, 2023 12:21