feat(react-popover): add base hooks for Popover component

[dmytrokirpa]

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)

• Partially implements [Feature]: Headless core components in v9 #35562

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-charts AreaChart	406.15 kB 124.198 kB	406.33 kB 124.231 kB	180 B 33 B
react-charts DeclarativeChart	733.407 kB 211.904 kB	733.581 kB 211.938 kB	174 B 34 B
react-charts DonutChart	316.691 kB 94.341 kB	316.865 kB 94.234 kB	174 B -107 B
react-charts FunnelChart	308.219 kB 91.25 kB	308.393 kB 91.157 kB	174 B -93 B
react-charts GanttChart	389.274 kB 117.944 kB	389.448 kB 117.922 kB	174 B -22 B
react-charts GaugeChart	315.575 kB 93.529 kB	315.749 kB 93.422 kB	174 B -107 B
react-charts GroupedVerticalBarChart	397.157 kB 120.557 kB	397.331 kB 120.538 kB	174 B -19 B
react-charts HeatMapChart	391.358 kB 119.59 kB	391.538 kB 119.624 kB	180 B 34 B
react-charts HorizontalBarChart	296.747 kB 87.108 kB	296.927 kB 86.675 kB	180 B -433 B
react-charts LineChart	416.73 kB 126.297 kB	416.904 kB 126.273 kB	174 B -24 B
react-charts SankeyChart	217.624 kB 67.074 kB	217.804 kB 67.12 kB	180 B 46 B
react-charts ScatterChart	396.557 kB 120.458 kB	396.731 kB 120.427 kB	174 B -31 B
react-charts VerticalBarChart	432.167 kB 125.871 kB	432.347 kB 125.915 kB	180 B 44 B
react-charts VerticalStackedBarChart	403.069 kB 121.345 kB	403.237 kB 121.322 kB	168 B -23 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.407 kB 68.603 kB	237.585 kB 68.657 kB	178 B 54 B
react-components react-components: entire library	1.285 MB 321.878 kB	1.286 MB 321.847 kB	176 B -31 B
react-popover Popover	131.362 kB 40.859 kB	131.572 kB 40.912 kB	210 B 53 B
react-teaching-popover TeachingPopover	101.867 kB 30.488 kB	102.023 kB 30.534 kB	156 B 46 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	235.853 kB 69.476 kB
react-charts Sparkline	91.393 kB 28.708 kB
react-components react-components: Button, FluentProvider & webLightTheme	70.269 kB 20.055 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 f9fd012ebe9dd1d6ac7839f6952d0d153c46de19}

[github-actions]

Pull request demo site: URL