feat(react-tree): value property over id

[bsunderhus]

Previous Behavior

The id attribute would be used internally to decide whether or not a tree node is opened or closed

New Behavior

1. Adds value property to work as a reference to decide wether or not a node is opened or closed
2. Uses id as the default value for value property in the default case to simplify basic usage.

export const DefaultOpenTrees = () => {
  const defaultOpenTrees = ['default-subtree-1', 'default-subtree-2', 'default-subtree-2-1'];

  return (
    <Tree aria-label="Tree" defaultOpenItems={defaultOpenTrees}>
      <TreeItem value="default-subtree-1">
        <TreeItemLayout>level 1, item 1</TreeItemLayout>
        <Tree>
          <TreeItem>
            <TreeItemLayout>level 2, item 1</TreeItemLayout>
          </TreeItem>
          <TreeItem>
            <TreeItemLayout>level 2, item 2</TreeItemLayout>
          </TreeItem>
          <TreeItem>
            <TreeItemLayout>level 2, item 3</TreeItemLayout>
          </TreeItem>
        </Tree>
      </TreeItem>
      <TreeItem value="default-subtree-2">
        <TreeItemLayout>level 1, item 2</TreeItemLayout>
        <Tree>
          <TreeItem value="default-subtree-2-1">
            <TreeItemLayout>level 2, item 1</TreeItemLayout>
            <Tree>
              <TreeItem>
                <TreeItemLayout>level 3, item 1</TreeItemLayout>
              </TreeItem>
              <TreeItem>
                <TreeItemLayout>level 3, item 2</TreeItemLayout>
              </TreeItem>
              <TreeItem>
                <TreeItemLayout>level 3, item 3</TreeItemLayout>
              </TreeItem>
            </Tree>
          </TreeItem>
        </Tree>
      </TreeItem>
    </Tree>
  );
};

Related Issue(s)

• Fixes [Feature]: Use arbitrary data type to identify a TreeItem in Tree #27485

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	68.075 kB 18.416 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	207.606 kB 57.581 kB
react-components react-components: FluentProvider & webLightTheme	38.778 kB 12.337 kB
react-portal-compat PortalCompatProvider	6.446 kB 2.185 kB

_{🤖 This report was generated against e5c39d1494652e5803b6e8822a2e3fb894aec811}

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
InfoButton	mount	22	19	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	711	695	5000
Button	mount	381	366	5000
Field	mount	1272	1239	5000
FluentProvider	mount	871	860	5000
FluentProviderWithTheme	mount	110	116	10
FluentProviderWithTheme	virtual-rerender	91	101	10
FluentProviderWithTheme	virtual-rerender-with-unmount	104	108	10
InfoButton	mount	22	19	5000	Possible regression
MakeStyles	mount	1134	1132	50000
Persona	mount	1952	1906	5000
SpinButton	mount	1591	1527	5000

[size-auditor]

Asset size changes

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

Baseline commit: e5c39d1494652e5803b6e8822a2e3fb894aec811 (build)

[codesandbox-ci]

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 4397720:

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