feat(react-headless-components-preview): add headless Overflow by mainframev · Pull Request #36305 · microsoft/fluentui

mainframev · 2026-06-12T10:20:08Z

Previous Behavior

@fluentui/react-headless-components-preview had no overflow primitive, so teams building custom design systems had no unstyled Overflow.

New Behavior

Adds a headless Overflow with a new ./overflow entrypoint. It reuses the building blocks exposed by @fluentui/react-overflow (see #36304):

Overflow — thin root that provides the overflow context; uses useOverflow_unstable + renderOverflow_unstable and intentionally skips the styles hook.
useOverflow / renderOverflow / useOverflowContextValues — direct re-exports of the _unstable hooks from @fluentui/react-overflow.
useOverflowMenu, OverflowItem, OverflowDivider, OverflowReorderObserver and the consumer hooks (useOverflowCount, useIsOverflowItemVisible, useIsOverflowGroupVisible, useOverflowVisibility, useOverflowContext) plus the DATA_* constants are re-exported as-is.

Consistent with the package's data-attribute convention, the overflow engine sets data-overflowing / data-overflow-menu and the consumer styles them — the package ships no CSS. The two layout rules the engine relies on are documented in the story and component description:

[data-overflowing] {
  display: none;
} /* removes overflowed items from layout */
[data-overflow-menu] {
  flex-shrink: 0;
} /* keeps the overflow menu at full size for measurement */

Note

Depends on #36304

github-actions · 2026-06-12T10:57:44Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-headless-components-preview` react-headless-components-preview: entire library	`236.96 kB` `67.865 kB`	`248.42 kB` `71.443 kB`	`11.46 kB` `3.578 kB`

_{🤖 This report was generated against a90442996224b76904a73761ad77f9b1f68239a3}

github-actions · 2026-06-12T10:59:45Z

Pull request demo site: URL

github-actions · 2026-06-12T11:43:41Z

@@ -0,0 +1,7 @@
+{


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

vr-tests-react-components/Avatar Converged 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png 3 Changed

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 2375 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.submenus open.chromium.png 413 Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Positioning.Positioning end.chromium.png 883 Changed

vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 861 Changed

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

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 48 Changed

vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 187 Changed

vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 171 Changed

vr-tests-react-components/TagPicker 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/TagPicker.disabled - Dark Mode.chromium.png 658 Changed

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

dmytrokirpa · 2026-06-16T11:25:09Z

+  beforeAll(() => {
+    // jsdom does not implement ResizeObserver, which the overflow manager observes the container with.
+    // https://github.com/jsdom/jsdom/issues/3368
+    global.ResizeObserver = class ResizeObserver {


why do we need this? it's done in https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-headless-components-preview/library/config/tests.js#L6

dmytrokirpa · 2026-06-16T11:26:41Z

+/**
+ * Overflow Props
+ */
+export type OverflowProps = OverflowBaseProps;


lets re-export from @fluentui/react-overflow

dmytrokirpa · 2026-06-16T11:27:54Z

+import * as React from 'react';
+import { Overflow, OverflowItem } from '@fluentui/react-headless-components-preview/overflow';
+
+import { OverflowMenu } from './OverflowMenu';


this might not work in export to sandbox scenario, can you please double check?

dmytrokirpa · 2026-06-16T11:29:51Z

+
+  return (
+    <>
+      <button


consider using headless menu component

dmytrokirpa · 2026-06-16T11:32:23Z

+ * reference implementation.
+ */
+const MenuGroupDivider: React.FC<{ groupId: number }> = ({ groupId }) => {
+  const groupVisibilities = Object.values(GROUPS).map(group => ({


do we have such complexity in v9 examples as well? can we simplify it somehow?

dmytrokirpa · 2026-06-16T11:32:34Z

+  const groupVisibilities = Object.values(GROUPS).map(group => ({
+    group,
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    visibility: useIsOverflowGroupVisible(group.toString()),


we'll also need to fix this

dmytrokirpa · 2026-06-16T11:35:38Z

@mainframev could you please also add Overflow components to bundle size report

Copilot

Pull request overview

Adds a new headless Overflow primitive to @fluentui/react-headless-components-preview via a dedicated ./overflow entrypoint, primarily by re-exporting the engine/hooks from @fluentui/react-overflow and providing a thin, unstyled Overflow root plus Storybook documentation/examples.

Changes:

Add ./overflow entrypoint exporting Overflow plus relevant hooks/components/constants, backed by @fluentui/react-overflow.
Add Storybook stories + docs + CSS module demonstrating usage patterns (default, vertical, reverse order, pinned, dividers, priority).
Add unit tests + API report + Beachball change file, and update package exports/deps.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/react-components/react-headless-components-preview/stories/src/Overflow/OverflowVertical.stories.tsx	Adds vertical overflow story example.
packages/react-components/react-headless-components-preview/stories/src/Overflow/OverflowReverseDomOrder.stories.tsx	Adds reverse DOM overflow direction story example.
packages/react-components/react-headless-components-preview/stories/src/Overflow/OverflowPriorityWithDividers.stories.tsx	Adds priority + divider handling example (advanced scenario).
packages/react-components/react-headless-components-preview/stories/src/Overflow/OverflowPinned.stories.tsx	Adds pinned-items example story.
packages/react-components/react-headless-components-preview/stories/src/Overflow/OverflowMenu.tsx	Adds shared overflow menu example built from headless hooks.
packages/react-components/react-headless-components-preview/stories/src/Overflow/OverflowLargerDividers.stories.tsx	Adds `OverflowDivider` usage example story.
packages/react-components/react-headless-components-preview/stories/src/Overflow/OverflowDescription.md	Documents required data-attribute CSS rules + composition guidance.
packages/react-components/react-headless-components-preview/stories/src/Overflow/OverflowDefault.stories.tsx	Adds default overflow story example.
packages/react-components/react-headless-components-preview/stories/src/Overflow/overflow.module.css	Provides demo styling + required data-attribute layout rules for stories.
packages/react-components/react-headless-components-preview/stories/src/Overflow/index.stories.tsx	Registers the Overflow stories and docs description.
packages/react-components/react-headless-components-preview/library/src/overflow.ts	Creates the public `overflow` entrypoint exports/types.
packages/react-components/react-headless-components-preview/library/src/components/Overflow/useOverflowContextValues.ts	Re-exports `useOverflowContextValues_unstable` under headless entrypoint.
packages/react-components/react-headless-components-preview/library/src/components/Overflow/useOverflow.ts	Re-exports `useOverflow_unstable` under headless entrypoint.
packages/react-components/react-headless-components-preview/library/src/components/Overflow/renderOverflow.ts	Re-exports `renderOverflow_unstable` under headless entrypoint.
packages/react-components/react-headless-components-preview/library/src/components/Overflow/Overflow.types.ts	Defines exported headless `Overflow` types (largely aliases to `react-overflow`).
packages/react-components/react-headless-components-preview/library/src/components/Overflow/Overflow.tsx	Adds thin headless `Overflow` root (use + context-values + render; no styles hook).
packages/react-components/react-headless-components-preview/library/src/components/Overflow/Overflow.test.tsx	Adds conformance + behavioral unit tests for headless Overflow.
packages/react-components/react-headless-components-preview/library/src/components/Overflow/index.ts	Exposes Overflow + re-exports advanced hooks/components/constants from `react-overflow`.
packages/react-components/react-headless-components-preview/library/package.json	Adds dependency on `@fluentui/react-overflow` and export map entry for `./overflow`.
packages/react-components/react-headless-components-preview/library/etc/overflow.api.md	Adds API Extractor report for the new entrypoint.
change/@fluentui-react-headless-components-preview-4bdc7f70-88bc-4b7a-8c35-7ddd600b9a3c.json	Adds Beachball change file for publishing the new entrypoint.

mainframev self-assigned this Jun 12, 2026

mainframev added the Headless label Jun 12, 2026

microsoft-github-policy-service Bot added the PR: API Modified label Jun 12, 2026

mainframev force-pushed the feat/headless-overflow branch from 8477420 to 5658487 Compare June 12, 2026 10:52

github-actions Bot reviewed Jun 12, 2026

View reviewed changes

mainframev force-pushed the feat/headless-overflow branch from 5658487 to 8270b2b Compare June 15, 2026 15:26

mainframev marked this pull request as ready for review June 15, 2026 15:26

mainframev requested a review from a team as a code owner June 15, 2026 15:26

dmytrokirpa reviewed Jun 16, 2026

View reviewed changes

dmytrokirpa requested a review from Copilot June 16, 2026 11:34

Copilot started reviewing on behalf of dmytrokirpa June 16, 2026 11:34 View session

Copilot AI reviewed Jun 16, 2026

View reviewed changes

mainframev added 2 commits June 16, 2026 15:18

feat(react-headless-components-preview): add headless Overflow component

76233ad

fix: address fixes after review

747370f

mainframev force-pushed the feat/headless-overflow branch from 98b8f52 to 747370f Compare June 16, 2026 13:19

mainframev added 2 commits June 16, 2026 16:04

fixup! fix: address fixes after review

684bdf6

fixup! fix: address fixes after review

bc12e7f

mainframev requested a review from dmytrokirpa June 16, 2026 15:30

dmytrokirpa approved these changes Jun 18, 2026

View reviewed changes

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

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png	48	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png	187	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png	171	Changed

Conversation

mainframev commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Uh oh!

github-actions Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

github-actions Bot Jun 12, 2026

Choose a reason for hiding this comment

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

Uh oh!

Uh oh!

dmytrokirpa Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

dmytrokirpa Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

dmytrokirpa Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

mainframev Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

dmytrokirpa Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

dmytrokirpa Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

dmytrokirpa Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

dmytrokirpa commented Jun 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mainframev commented Jun 12, 2026 •

edited

Loading

github-actions Bot commented Jun 12, 2026 •

edited

Loading