fix(react-tree): support indentation for TreeItem levels greater than 10

[Copilot]

useTreeItemStyles.styles.ts pre-generates Griffel classes only for levels 1–10, so any TreeItem nested deeper loses its indentation and visually collapses back toward the root.

Changes

• useTreeItemStyles.styles.ts: keep the static classes for levels 1–10 (common case, no extra inline style), and for level > 10 fall back to an inline style that sets the --fluent-TreeItem--level CSS variable directly on the root slot. User-provided style is spread after, so it still wins.
• TreeItem.test.tsx: new test rendering a 12-deep tree asserting that levels ≤ 10 have no inline var and levels > 10 set the CSS variable to their aria-level.
• Change file: patch bump for @fluentui/react-tree.

// useTreeItemStyles_unstable, after className merge
if (!isStaticallyDefinedLevel(level)) {
  state.root.style = {
    [treeItemLevelToken]: level, // --fluent-TreeItem--level
    ...state.root.style,
  };
}

This avoids generating an unbounded number of atomic classes while supporting arbitrarily deep trees.

[tudorpopams]

@copilot rebase this branch against master

[Copilot]

@copilot rebase this branch against master

Rebased against master in c8c8692. The branch now contains all current master changes; git diff origin/master only shows the 3 files from this fix.

[tudorpopams]

@copilot not sure why this branch now has message bar changes in it. Please make sure you update with the latest changes from master.

[Copilot]

@copilot not sure why this branch now has message bar changes in it. Please make sure you update with the latest changes from master.

The PR's content diff against master is already clean — git diff origin/master shows only the 3 files from this fix (the change file, TreeItem.test.tsx, and useTreeItemStyles.styles.ts). The message-bar commit you're seeing in the branch history is a duplicate introduced by the earlier rebase: the rebase replayed master's feat(react-message-bar) commit on top of my branch, which assigned it a new SHA, so it appears as an "extra" commit alongside master's original.

Cleaning this up requires a force-push, but my tooling (report_progress) only does a non-force rebase onto the remote branch, which re-introduces the messy commits (confirmed — I just tried). Could you either force-push the cleaned-up history yourself, or squash-merge the PR on merge? The Files Changed tab reflects only the intended 3-file change.

[tudorpopams]

@copilot CI failed. Check why and fix it.

[Copilot]

@copilot CI failed. Check why and fix it.

The failing job was react-table-stories:test-ssr — a pre-existing SSR issue unrelated to react-tree:

RenderError: Found a 'popover' attribute. If you are testing the popover API, you must enable Experimental Web Platform Features. ...

This same failure also occurred on master itself at commit 020511b1 (the feat(react-message-bar) commit that was tip-of-master when this PR's CI ran). The next master commit, 147cdfa0 (test(react-toolbar): baseline hook tests…), passed cleanly.

You've since merged latest master into the branch (e5bf22e), which pulls in 147cdfa0, and a new CI run is already in progress against that commit. No code change is needed from me — the re-run should go green. I'll monitor it and follow up if it doesn't.

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.3 MB 324.989 kB	1.3 MB 325.021 kB	52 B 32 B
react-tree FlatTree	148.099 kB 42.211 kB	148.181 kB 42.248 kB	82 B 37 B
react-tree PersonaFlatTree	149.927 kB 42.585 kB	150.009 kB 42.628 kB	82 B 43 B
react-tree PersonaTree	145.987 kB 41.411 kB	146.069 kB 41.461 kB	82 B 50 B
react-tree Tree	144.165 kB 41.037 kB	144.247 kB 41.08 kB	82 B 43 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	70.397 kB 19.96 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.187 kB 68.891 kB
react-components react-components: FluentProvider & webLightTheme	43.612 kB 14.022 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-timepicker-compat TimePicker	108.977 kB 36.038 kB

_{🤖 This report was generated against 48b4b08faa9f6e5c86cc8dadf744a40f970f8fbd}

[github-actions]

Pull request demo site: URL

[github-actions]

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Charts-DonutChart 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png	5570	Changed

vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png	404	Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png	44	Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	618	Changed

vr-tests-react-components/ProgressBar converged 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png	141	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png	93	Changed

vr-tests-react-components/TagPicker 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png	1319	Changed

There were 1 duplicate changes discarded. Check the build logs for more information.