feat(react-menu): add opt-in autofocus suppression

change/@fluentui-react-headless-components-preview-1d127060-0216-4392-bc0a-a24e871a1445.json

@@ -0,0 +1,6 @@
+{
+  "type": "patch",
+  "comment": "fix(react-headless-components-preview): exclude unsupported styled Menu composition props",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "paulmardling@microsoft.com"
+}

change/@fluentui-react-menu-30d61893-5bcf-4c48-81a4-eead2c836beb.json

@@ -0,0 +1,6 @@
+{
+  "type": "minor",
+  "comment": "feat(react-menu): add opt-in autofocus suppression and external trigger registration",
+  "packageName": "@fluentui/react-menu",
+  "email": "paulmardling@microsoft.com"
+}

packages/react-components/react-headless-components-preview/library/etc/menu.api.md

@@ -184,7 +184,7 @@ export { MenuPopoverSlots }
 export { MenuPopoverState }
 
 // @public (undocumented)
-export type MenuProps = Omit<MenuBaseProps, 'positioning'> & {
+export type MenuProps = Omit<MenuBaseProps, 'positioning' | 'unstable_disableAutoFocus' | 'unstable_triggerElement'> & {
     positioning?: PositioningShorthand;
 };
 

packages/react-components/react-headless-components-preview/library/src/components/Menu/Menu.test.tsx

@@ -16,6 +16,26 @@ import { MenuGroupHeader } from './MenuGroupHeader/MenuGroupHeader';
 import { MenuSplitGroup } from './MenuSplitGroup/MenuSplitGroup';
 
 describe('Menu', () => {
+  it('compile-time: does not accept unsupported autofocus suppression', () => {
+    const element = (
+      // @ts-expect-error The headless Menu has its own autofocus implementation.
+      <Menu unstable_disableAutoFocus>
+        <MenuPopover />
+      </Menu>
+    );
+    expect(element).toBeDefined();
+  });
+
+  it('compile-time: does not accept unsupported external trigger registration', () => {
+    const element = (
+      // @ts-expect-error The headless Menu does not register external triggers.
+      <Menu unstable_triggerElement={null}>
+        <MenuPopover />
+      </Menu>
+    );
+    expect(element).toBeDefined();
+  });
+
   it('renders trigger and surface children when open', () => {
     const { getByText } = render(
       <Menu defaultOpen>

packages/react-components/react-headless-components-preview/library/src/components/Menu/Menu.types.ts

@@ -1,7 +1,7 @@
 import type { MenuBaseProps } from '@fluentui/react-menu';
 import type { PositioningShorthand } from '../../positioning';
 
-export type MenuProps = Omit<MenuBaseProps, 'positioning'> & {
+export type MenuProps = Omit<MenuBaseProps, 'positioning' | 'unstable_disableAutoFocus' | 'unstable_triggerElement'> & {
   /**
    * Configures the positioned menu.
    */

packages/react-components/react-menu/library/etc/react-menu.api.md

@@ -355,6 +355,8 @@ export type MenuPopoverState = ComponentState<MenuPopoverSlots> & Pick<PortalPro
 
 // @public
 export type MenuProps = ComponentProps<Partial<MenuSlots>> & Pick<PortalProps, 'mountNode'> & Pick<MenuListProps, 'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'> & {
+    unstable_disableAutoFocus?: boolean;
+    unstable_triggerElement?: HTMLElement | null;
     children: [JSXElement, JSXElement] | JSXElement;
     hoverDelay?: number;
     inline?: boolean;