feat(react-tree): TreeItem itemType restructure

[bsunderhus]

Previous Behavior

The TreeItem expects a certain positioning of the internal children to ensure the presence of a subtree

New Behavior

This PR ensures that TreeItem is agnostic regarding it's children content by:

1. introducing itemType property to make it the users responsibility to declare if a TreeItem is either a leaf or a branch
2. moves slots definitions (expandIcon and actions were moved) from TreeItem to TreeItemLayout and TreeItemPersonaLayout to follow up with TreeItem component lack of ability to differ from layout content and subtree content.
3. makes subtree Tree declaration responsible for it's own visibility, instead of TreeItem
4. starts using CSS grid display on TreeItem to ensure actions and aside slots will occupy the same visual space without the requirement of using any sort of absolute positioning

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	707	714	5000
Button	mount	367	370	5000
Field	mount	1269	1284	5000
FluentProvider	mount	919	891	5000
FluentProviderWithTheme	mount	114	122	10
FluentProviderWithTheme	virtual-rerender	98	106	10
FluentProviderWithTheme	virtual-rerender-with-unmount	115	111	10
InfoButton	mount	19	21	5000
MakeStyles	mount	1121	1111	50000
Persona	mount	2067	2057	5000
SpinButton	mount	1597	1569	5000

[size-auditor]

Asset size changes

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

Baseline commit: 27f252e27361df75a94c5bc5b09fc0097fefd969 (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 b4cd954:

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

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	64.855 kB 17.852 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	203.885 kB 57.081 kB
react-components react-components: FluentProvider & webLightTheme	36.086 kB 11.9 kB
react-portal-compat PortalCompatProvider	6.446 kB 2.186 kB

_{🤖 This report was generated against 27f252e27361df75a94c5bc5b09fc0097fefd969}

[msft-fluent-ui-bot]

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[layershifter]

nit: as you may need to apply styles via re-composition, it might be useful to defined isSubtree under state

[layershifter]

nit: spacing is a bit strange there, also would invert a condition 🐱

  const open = useTreeItemContext_unstable(ctx => ctx.open);
  const { dir } = useFluent_unstable();

  const expandIconRotation = open ? 90 : dir === 'rtl' ? 180 : 0;

[layershifter]

import type { ButtonContextValue } from '@fluentui/react-button';

nit:

[layershifter]

nit: you may want to render a provider conditionally

{state.isActionsVisible && slots.actions && (
  <ButtonContextProvider value={state.buttonContextValue}>
    <slots.actions {...slotProps.actions} />
  </ButtonContextProvider>
)}

Or even:

{state.isActionsVisible && slots.actions && (
  <slots.actions {...slotProps.actions}>
    <ButtonContextProvider value={state.buttonContextValue}>
      {slotProps.actions.children}
    </ButtonContextProvider>
  </slots.actions {...slotProps.actions}>
)}

[layershifter]

import type { ButtonContextValue } from '@fluentui/react-button';

nit

[layershifter]

import type { ButtonContextValue } from '@fluentui/react-button';

nit

[layershifter]

Should expandIcon={null} be to avoid slot rendering?