feat(react-headless-components-preview): add Menu component and stories

change/@fluentui-react-headless-components-preview-d14be094-ae2a-4f19-9dcb-1b6c49a089cb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add Menu component (Menu, MenuTrigger, MenuList, MenuItem, MenuPopover, MenuDivider) — wraps v9 useMenu*Base_unstable hooks; uses native popover='auto' for top-layer rendering instead of Portal",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "viktorgenaev@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-d76677a3-6018-4f05-a403-e59905ec8e5f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: expose react-menu base hooks",
+  "packageName": "@fluentui/react-menu",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js

@@ -11,6 +11,7 @@ import * as Drawer from '@fluentui/react-headless-components-preview/drawer';
 import * as Field from '@fluentui/react-headless-components-preview/field';
 import * as Input from '@fluentui/react-headless-components-preview/input';
 import * as Link from '@fluentui/react-headless-components-preview/link';
+import * as Menu from '@fluentui/react-headless-components-preview/menu';
 import * as MessageBar from '@fluentui/react-headless-components-preview/message-bar';
 import * as ProgressBar from '@fluentui/react-headless-components-preview/progress-bar';
 import * as Popover from '@fluentui/react-headless-components-preview/popover';
@@ -45,6 +46,7 @@ console.log({
   Field,
   Input,
   Link,
+  Menu,
   MessageBar,
   ProgressBar,
   Popover,

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

@@ -0,0 +1,282 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ARIAButtonElement } from '@fluentui/react-aria';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { JSXElement } from '@fluentui/react-utilities';
+import type { MenuBaseProps } from '@fluentui/react-menu';
+import type { MenuBaseState } from '@fluentui/react-menu';
+import type { MenuContextValue } from '@fluentui/react-menu';
+import { MenuDividerProps } from '@fluentui/react-menu';
+import { MenuDividerSlots } from '@fluentui/react-menu';
+import { MenuDividerState } from '@fluentui/react-menu';
+import { MenuGroupContextValues } from '@fluentui/react-menu';
+import { MenuGroupHeaderProps } from '@fluentui/react-menu';
+import { MenuGroupHeaderSlots } from '@fluentui/react-menu';
+import { MenuGroupHeaderState } from '@fluentui/react-menu';
+import { MenuGroupProps } from '@fluentui/react-menu';
+import { MenuGroupSlots } from '@fluentui/react-menu';
+import { MenuGroupState } from '@fluentui/react-menu';
+import { MenuItemCheckboxProps } from '@fluentui/react-menu';
+import { MenuItemCheckboxState } from '@fluentui/react-menu';
+import { MenuItemLinkProps } from '@fluentui/react-menu';
+import { MenuItemLinkSlots } from '@fluentui/react-menu';
+import { MenuItemLinkState } from '@fluentui/react-menu';
+import { MenuItemProps } from '@fluentui/react-menu';
+import { MenuItemRadioBaseProps as MenuItemRadioProps } from '@fluentui/react-menu';
+import { MenuItemRadioBaseState as MenuItemRadioState } from '@fluentui/react-menu';
+import { MenuItemRadioState as MenuItemRadioState_2 } from '@fluentui/react-menu';
+import { MenuItemSlots } from '@fluentui/react-menu';
+import { MenuItemState } from '@fluentui/react-menu';
+import { MenuItemSwitchProps } from '@fluentui/react-menu';
+import { MenuItemSwitchSlots } from '@fluentui/react-menu';
+import { MenuItemSwitchState } from '@fluentui/react-menu';
+import { MenuListContextValues } from '@fluentui/react-menu';
+import type { MenuListProps as MenuListProps_2 } from '@fluentui/react-menu';
+import type { MenuListSlots } from '@fluentui/react-menu';
+import { MenuListState as MenuListState_2 } from '@fluentui/react-menu';
+import type { MenuOpenChangeData } from '@fluentui/react-menu';
+import type { MenuOpenEvent } from '@fluentui/react-menu';
+import { MenuPopoverProps } from '@fluentui/react-menu';
+import { MenuPopoverSlots } from '@fluentui/react-menu';
+import { MenuPopoverState } from '@fluentui/react-menu';
+import { MenuSplitGroupProps } from '@fluentui/react-menu';
+import { MenuSplitGroupSlots } from '@fluentui/react-menu';
+import { MenuSplitGroupState } from '@fluentui/react-menu';
+import { MenuTriggerChildProps } from '@fluentui/react-menu';
+import { MenuTriggerProps } from '@fluentui/react-menu';
+import { MenuTriggerState } from '@fluentui/react-menu';
+import type { PositioningShorthand } from '@fluentui/react-positioning';
+import * as React_2 from 'react';
+import { useMenuContext_unstable as useMenuContext } from '@fluentui/react-menu';
+
+// @public
+export const Menu: React_2.FC<MenuProps>;
+
+export { MenuContextValue }
+
+// @public (undocumented)
+export type MenuContextValues = {
+    menu: MenuContextValue;
+};
+
+// @public
+export const MenuDivider: ForwardRefComponent<MenuDividerProps>;
+
+export { MenuDividerProps }
+
+export { MenuDividerSlots }
+
+export { MenuDividerState }
+
+// @public
+export const MenuGroup: ForwardRefComponent<MenuGroupProps>;
+
+export { MenuGroupContextValues }
+
+// @public
+export const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
+
+export { MenuGroupHeaderProps }
+
+export { MenuGroupHeaderSlots }
+
+export { MenuGroupHeaderState }
+
+export { MenuGroupProps }
+
+export { MenuGroupSlots }
+
+export { MenuGroupState }
+
+// @public
+export const MenuItem: ForwardRefComponent<MenuItemProps>;
+
+// @public
+export const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
+
+export { MenuItemCheckboxProps }
+
+export { MenuItemCheckboxState }
+
+// @public
+export const MenuItemLink: ForwardRefComponent<MenuItemLinkProps>;
+
+export { MenuItemLinkProps }
+
+export { MenuItemLinkSlots }
+
+export { MenuItemLinkState }
+
+export { MenuItemProps }
+
+// @public
+export const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
+
+export { MenuItemRadioProps }
+
+export { MenuItemRadioState }
+
+export { MenuItemSlots }
+
+export { MenuItemState }
+
+// @public
+export const MenuItemSwitch: ForwardRefComponent<MenuItemSwitchProps>;
+
+export { MenuItemSwitchProps }
+
+export { MenuItemSwitchSlots }
+
+export { MenuItemSwitchState }
+
+// @public
+export const MenuList: ForwardRefComponent<MenuListProps>;
+
+// @public (undocumented)
+export type MenuListProps = MenuListProps_2;
+
+export { MenuListSlots }
+
+// @public (undocumented)
+export type MenuListState = MenuListState_2 & {
+    root: {
+        focusgroup?: string;
+    };
+};
+
+export { MenuOpenChangeData }
+
+export { MenuOpenEvent }
+
+// @public
+export const MenuPopover: ForwardRefComponent<MenuPopoverProps>;
+
+export { MenuPopoverProps }
+
+export { MenuPopoverSlots }
+
+export { MenuPopoverState }
+
+// @public
+export type MenuProps = Omit<MenuBaseProps, 'positioning'> & {
+    positioning?: PositioningShorthand;
+};
+
+// @public
+export const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
+
+export { MenuSplitGroupProps }
+
+export { MenuSplitGroupSlots }
+
+export { MenuSplitGroupState }
+
+// @public (undocumented)
+export type MenuState = MenuBaseState;
+
+// @public
+export const MenuTrigger: React_2.FC<MenuTriggerProps>;
+
+export { MenuTriggerChildProps }
+
+export { MenuTriggerProps }
+
+export { MenuTriggerState }
+
+// @public (undocumented)
+export const renderMenu: (state: MenuState, contextValues: MenuContextValues) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuDivider: (state: MenuDividerState) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuGroup: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuGroupHeader: (state: MenuGroupHeaderState) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuItem: (state: MenuItemState) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuItemCheckbox: (state: MenuItemCheckboxState) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuItemLink: (state: MenuItemLinkState) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuItemRadio: (state: MenuItemRadioState_2) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuItemSwitch: (state: MenuItemSwitchState) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuList: (state: MenuListState_2, contextValues: MenuListContextValues) => JSXElement;
+
+// @public
+export const renderMenuPopover: (state: MenuPopoverState) => JSXElement;
+
+// @public (undocumented)
+export const renderMenuSplitGroup: (state: MenuSplitGroupState, contexts?: {
+    menuSplitGroup: {
+        setMultiline: (multiline: boolean) => void;
+    };
+}) => JSXElement;
+
+// @public
+export const renderMenuTrigger: (state: MenuTriggerState) => JSXElement;
+
+// @public (undocumented)
+export const useMenu: (props: MenuProps) => MenuState;
+
+export { useMenuContext }
+
+// @public (undocumented)
+export const useMenuContextValues: (state: MenuState) => MenuContextValues;
+
+// @public
+export const useMenuDivider: (props: MenuDividerProps, ref: React_2.Ref<HTMLElement>) => MenuDividerState;
+
+// @public
+export const useMenuGroup: (props: MenuGroupProps, ref: React_2.Ref<HTMLElement>) => MenuGroupState;
+
+// @public (undocumented)
+export const useMenuGroupContextValues: (state: MenuGroupState) => MenuGroupContextValues;
+
+// @public
+export const useMenuGroupHeader: (props: MenuGroupHeaderProps, ref: React_2.Ref<HTMLElement>) => MenuGroupHeaderState;
+
+// @public
+export const useMenuItem: (props: MenuItemProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemState;
+
+// @public
+export const useMenuItemCheckbox: (props: MenuItemCheckboxProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemCheckboxState;
+
+// @public
+export const useMenuItemLink: (props: MenuItemLinkProps, ref: React_2.Ref<HTMLAnchorElement>) => MenuItemLinkState;
+
+// @public
+export const useMenuItemRadio: (props: MenuItemRadioProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemRadioState;
+
+// @public
+export const useMenuItemSwitch: (props: MenuItemSwitchProps, ref: React_2.Ref<HTMLDivElement>) => MenuItemSwitchState;
+
+// @public
+export const useMenuList: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;
+
+// @public
+export const useMenuPopover: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;
+
+// @public
+export const useMenuSplitGroup: (props: MenuSplitGroupProps, ref: React_2.Ref<HTMLElement>) => MenuSplitGroupState;
+
+// @public
+export const useMenuTrigger: (props: MenuTriggerProps) => MenuTriggerState;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/package.json

@@ -35,6 +35,7 @@
     "@fluentui/react-input": "^9.8.2",
     "@fluentui/react-label": "^9.4.1",
     "@fluentui/react-link": "^9.8.1",
+    "@fluentui/react-menu": "^9.24.1",
     "@fluentui/react-message-bar": "^9.7.0",
     "@fluentui/react-persona": "^9.7.3",
     "@fluentui/react-popover": "^9.14.2",
@@ -147,6 +148,12 @@
       "import": "./lib/link.js",
       "require": "./lib-commonjs/link.js"
     },
+    "./menu": {
+      "types": "./dist/menu.d.ts",
+      "node": "./lib-commonjs/menu.js",
+      "import": "./lib/menu.js",
+      "require": "./lib-commonjs/menu.js"
+    },
     "./message-bar": {
       "types": "./dist/message-bar.d.ts",
       "node": "./lib-commonjs/message-bar.js",