Skip to content

Conversation

@dmytrokirpa
Copy link
Contributor

@dmytrokirpa dmytrokirpa commented Jan 10, 2026

Previous Behavior

New Behavior

Added use${Component}Base__unstable hook for every component that contains state for logic, slots (but not default implementations), but not design-related props as per #35623. Exports are commented out intentionally, as we'll uncomment them in experimental branch for experimental release.

Example how to compose a custom Popover component:

import * as React from 'react';
import type { 
  PopoverBaseProps, 
  PopoverState,  
  PopoverSurfaceBaseProps,
  PopoverSurfaceState, 
} from '@fluentui/react-popover';
import { 
  PopoverTrigger,
  renderPopover_unstable, 
  usePopoverBase_unstable,
  renderPopoverSurface_unstable,
  usePopoverSurfaceBase_unstable,
} from '@fluentui/react-popover';

export const CustomPopover = React.forwardRef<HTMLDivElement, PopoverBaseProps>((props, ref) => {
  const state = usePopoverBase_unstable(props);
  return renderPopover_unstable(state as PopoverState);
});

export const CustomPopoverSurface = React.forwardRef<HTMLDivElement, PopoverSurfaceBaseProps>((props, ref) => {
  const state = usePopoverSurfaceBase_unstable(props, ref);
   
// Add custom class names to slots
  state.root.className = ['popover-surface', state.root.className].filter(Boolean).join(' ');
  state.arrowClassName = ['popover-surface__arrow', state.arrowClassName].filter(Boolean).join(' ');

  return renderPopoverSurface_unstable(state as PopoverSurfaceState);
});

export const CustomPopoverTrigger = PopoverTrigger;

const Example = () => {
  return (
    <CustomPopover defaultOpen positioning={{ position: 'after' }}>
      <CustomPopoverTrigger>
        <button>Open Popover</button>
      </CustomPopoverTrigger>
      <CustomPopoverSurface>This is the popover content.</CustomPopoverSurface>
    </CustomPopover>
  );
};

Note: No public API or behavior changes to existing components, all unit/VR tests are passing.

Related Issue(s)

@dmytrokirpa dmytrokirpa self-assigned this Jan 10, 2026
@github-actions
Copy link

github-actions bot commented Jan 10, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-charts
AreaChart
406.828 kB
124.501 kB
406.992 kB
124.673 kB
164 B
172 B
react-charts
DeclarativeChart
754.414 kB
217.519 kB
754.578 kB
217.559 kB
164 B
40 B
react-charts
DonutChart
317.269 kB
94.591 kB
317.433 kB
94.646 kB
164 B
55 B
react-charts
FunnelChart
308.819 kB
91.48 kB
308.983 kB
91.535 kB
164 B
55 B
react-charts
GanttChart
389.937 kB
118.202 kB
390.101 kB
118.231 kB
164 B
29 B
react-charts
GaugeChart
316.704 kB
93.959 kB
316.868 kB
94.011 kB
164 B
52 B
react-charts
GroupedVerticalBarChart
397.815 kB
120.816 kB
397.979 kB
120.848 kB
164 B
32 B
react-charts
HeatMapChart
392.018 kB
119.877 kB
392.182 kB
119.984 kB
164 B
107 B
react-charts
HorizontalBarChart
296.996 kB
87.191 kB
297.16 kB
86.21 kB
164 B
-981 B
react-charts
LineChart
417.39 kB
126.557 kB
417.554 kB
126.587 kB
164 B
30 B
react-charts
PolarChart
345.876 kB
105.617 kB
346.044 kB
105.649 kB
168 B
32 B
react-charts
SankeyChart
218.05 kB
67.242 kB
214.767 kB
65.946 kB
-3.283 kB
-1.296 kB
react-charts
ScatterChart
397.217 kB
120.705 kB
397.381 kB
120.74 kB
164 B
35 B
react-charts
VerticalBarChart
432.827 kB
126.141 kB
432.991 kB
126.176 kB
164 B
35 B
react-charts
VerticalStackedBarChart
403.729 kB
121.617 kB
403.893 kB
121.675 kB
164 B
58 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
237.447 kB
68.609 kB
237.62 kB
68.66 kB
173 B
51 B
react-components
react-components: entire library
1.286 MB
322.184 kB
1.286 MB
322.236 kB
154 B
52 B
react-popover
Popover
131.362 kB
40.859 kB
128.086 kB
39.594 kB
-3.276 kB
-1.265 kB
react-teaching-popover
TeachingPopover
101.867 kB
30.488 kB
102.017 kB
30.539 kB
150 B
51 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-avatar
Avatar
48.532 kB
15.449 kB
react-avatar
AvatarGroup
18.323 kB
7.316 kB
react-avatar
AvatarGroupItem
61.784 kB
19.45 kB
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-charts
Legends
236.071 kB
69.561 kB
react-charts
Sparkline
91.393 kB
28.708 kB
react-components
react-components: Button, FluentProvider & webLightTheme
70.309 kB
20.074 kB
react-components
react-components: FluentProvider & webLightTheme
43.608 kB
14.165 kB
react-datepicker-compat
DatePicker Compat
225.887 kB
63.911 kB
react-dialog
Dialog (including children components)
102.951 kB
30.715 kB
react-persona
Persona
55.423 kB
17.327 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-table
DataGrid
160.182 kB
45.256 kB
react-table
Table (Primitives only)
41.87 kB
13.485 kB
react-table
Table as DataGrid
131.397 kB
36.257 kB
react-table
Table (Selection only)
69.785 kB
19.62 kB
react-table
Table (Sort only)
68.428 kB
19.236 kB
react-tag-picker
@fluentui/react-tag-picker - package
187.407 kB
56.165 kB
react-tags
InteractionTag
14.539 kB
5.779 kB
react-tags
Tag
30.394 kB
9.712 kB
react-tags
TagGroup
83.084 kB
24.483 kB
react-timepicker-compat
TimePicker
109.023 kB
36.011 kB
react-tree
FlatTree
148.508 kB
42.451 kB
react-tree
PersonaFlatTree
150.334 kB
42.836 kB
react-tree
PersonaTree
146.394 kB
41.664 kB
react-tree
Tree
144.574 kB
41.291 kB
🤖 This report was generated against d685a5d72d905ddaf49d887b3754500b89754b2b

@github-actions
Copy link

Pull request demo site: URL

@dmytrokirpa dmytrokirpa force-pushed the feat/add-popover-base-hooks branch from ba0a874 to 75dd277 Compare January 20, 2026 10:24
@dmytrokirpa dmytrokirpa merged commit d6f0fdc into microsoft:master Jan 20, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants