fixup! feat(react-menu): add base hooks for Menu, MenuList and export them

mainframev · mainframev · commit 1cdc3373f075 · 2026-05-05T11:42:19.000+02:00
diff --git a/packages/react-components/react-menu/library/etc/react-menu.api.md b/packages/react-components/react-menu/library/etc/react-menu.api.md
@@ -32,6 +32,12 @@ export const Menu: React_2.FC<MenuProps>;
 // @public
 export const MENU_ENTER_EVENT = "fuimenuenter";
 
+// @public (undocumented)
+export type MenuBaseProps = Omit<MenuProps, 'surfaceMotion'>;
+
+// @public (undocumented)
+export type MenuBaseState = Omit<MenuState, 'surfaceMotion' | 'components'>;
+
 // @public (undocumented)
 export type MenuCheckedValueChangeData = {
     checkedItems: string[];
@@ -167,6 +173,12 @@ export type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'conten
 // @public
 export const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
 
+// @public
+export type MenuItemRadioBaseProps = MenuItemRadioProps;
+
+// @public
+export type MenuItemRadioBaseState = MenuItemRadioState;
+
 // @public (undocumented)
 export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
 
@@ -482,6 +494,13 @@ export const useMenu_unstable: (props: MenuProps & {
     };
 }) => MenuState;
 
+// @public
+export const useMenuBase_unstable: (props: MenuBaseProps & {
+    safeZone?: boolean | {
+        timeout?: number;
+    };
+}) => MenuBaseState;
+
 // @public (undocumented)
 export const useMenuContext_unstable: <T>(selector: ContextSelector<MenuContextValue, T>) => T;
 
@@ -515,21 +534,33 @@ export const useMenuGroupStyles_unstable: (state: MenuGroupState) => MenuGroupSt
 // @public
 export const useMenuItem_unstable: (props: MenuItemProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemState;
 
+// @public
+export const useMenuItemBase_unstable: (props: MenuItemProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemState;
+
 // @public
 export const useMenuItemCheckbox_unstable: (props: MenuItemCheckboxProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemCheckboxState;
 
+// @public
+export const useMenuItemCheckboxBase_unstable: (props: MenuItemCheckboxProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemCheckboxState;
+
 // @public (undocumented)
 export const useMenuItemCheckboxStyles_unstable: (state: MenuItemCheckboxState) => MenuItemCheckboxState;
 
 // @public
 export const useMenuItemLink_unstable: (props: MenuItemLinkProps, ref: React_2.Ref<HTMLAnchorElement>) => MenuItemLinkState;
 
+// @public
+export const useMenuItemLinkBase_unstable: (props: MenuItemLinkProps, ref: React_2.Ref<HTMLAnchorElement>) => MenuItemLinkState;
+
 // @public
 export const useMenuItemLinkStyles_unstable: (state: MenuItemLinkState) => MenuItemLinkState;
 
 // @public
 export const useMenuItemRadio_unstable: (props: MenuItemRadioProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemRadioState;
 
+// @public
+export const useMenuItemRadioBase_unstable: (props: MenuItemRadioBaseProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemRadioBaseState;
+
 // @public (undocumented)
 export const useMenuItemRadioStyles_unstable: (state: MenuItemRadioState) => void;
 
@@ -539,12 +570,18 @@ export const useMenuItemStyles_unstable: (state: MenuItemState) => MenuItemState
 // @public
 export const useMenuItemSwitch_unstable: (props: MenuItemSwitchProps, ref: React_2.Ref<HTMLDivElement>) => MenuItemSwitchState;
 
+// @public
+export const useMenuItemSwitchBase_unstable: (props: MenuItemSwitchProps, ref: React_2.Ref<HTMLDivElement>) => MenuItemSwitchState;
+
 // @public
 export const useMenuItemSwitchStyles_unstable: (state: MenuItemSwitchState) => MenuItemSwitchState;
 
 // @public
 export const useMenuList_unstable: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;
 
+// @public
+export const useMenuListBase_unstable: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;
+
 // @public (undocumented)
 export const useMenuListContext_unstable: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;
 
@@ -557,6 +594,9 @@ export const useMenuListStyles_unstable: (state: MenuListState) => MenuListState
 // @public
 export const useMenuPopover_unstable: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;
 
+// @public
+export const useMenuPopoverBase_unstable: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;
+
 // @public
 export const useMenuPopoverStyles_unstable: (state: MenuPopoverState) => MenuPopoverState;
 
diff --git a/packages/react-components/react-menu/library/src/MenuItemLink.ts b/packages/react-components/react-menu/library/src/MenuItemLink.ts
@@ -3,6 +3,7 @@ export {
   MenuItemLink,
   menuItemLinkClassNames,
   renderMenuItemLink_unstable,
+  useMenuItemLinkBase_unstable,
   useMenuItemLinkStyles_unstable,
   useMenuItemLink_unstable,
 } from './components/MenuItemLink/index';
diff --git a/packages/react-components/react-menu/library/src/MenuItemRadio.ts b/packages/react-components/react-menu/library/src/MenuItemRadio.ts
@@ -1,9 +1,14 @@
-export type { MenuItemRadioProps, MenuItemRadioState } from './components/MenuItemRadio/index';
+export type {
+  MenuItemRadioBaseProps,
+  MenuItemRadioBaseState,
+  MenuItemRadioProps,
+  MenuItemRadioState,
+} from './components/MenuItemRadio/index';
 export {
   MenuItemRadio,
   menuItemRadioClassNames,
   renderMenuItemRadio_unstable,
+  useMenuItemRadioBase_unstable,
   useMenuItemRadioStyles_unstable,
   useMenuItemRadio_unstable,
-  useMenuItemRadioBase_unstable,
 } from './components/MenuItemRadio/index';
diff --git a/packages/react-components/react-menu/library/src/MenuList.ts b/packages/react-components/react-menu/library/src/MenuList.ts
@@ -1,8 +1,6 @@
 export type {
   MenuCheckedValueChangeData,
   MenuCheckedValueChangeEvent,
-  MenuListBaseProps,
-  MenuListBaseState,
   MenuListContextValues,
   MenuListProps,
   MenuListSlots,
diff --git a/packages/react-components/react-menu/library/src/MenuPopover.ts b/packages/react-components/react-menu/library/src/MenuPopover.ts
@@ -3,6 +3,7 @@ export {
   MenuPopover,
   menuPopoverClassNames,
   renderMenuPopover_unstable,
+  useMenuPopoverBase_unstable,
   useMenuPopoverStyles_unstable,
   useMenuPopover_unstable,
 } from './components/MenuPopover/index';
diff --git a/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts b/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts
@@ -187,17 +187,9 @@ export type MenuState = ComponentState<InternalMenuSlots> &
     safeZone?: React.ReactElement | null;
   };
 
-/**
- * MenuBase Props - omits the design-related `surfaceMotion` slot.
- */
 export type MenuBaseProps = Omit<MenuProps, 'surfaceMotion'>;
 
-/**
- * MenuBase State - omits the design-related `surfaceMotion` slot and its `components` entry.
- */
-export type MenuBaseState = Omit<MenuState, 'surfaceMotion' | 'components'> & {
-  components: Record<string, never>;
-};
+export type MenuBaseState = Omit<MenuState, 'surfaceMotion' | 'components'>;
 
 export type MenuContextValues = {
   menu: MenuContextValue;
diff --git a/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx
@@ -57,14 +57,15 @@ const submenuFallbackPositions: PositioningShorthandValue[] = [
  * @param props - props from this instance of Menu
  */
 export const useMenu_unstable = (props: MenuProps & { safeZone?: boolean | { timeout?: number } }): MenuState => {
-  const baseState = useMenuBase_unstable(props);
+  const { surfaceMotion, ...baseProps } = props;
+  const baseState = useMenuBase_unstable(baseProps);
 
   return {
     ...baseState,
     components: {
       surfaceMotion: MenuSurfaceMotion,
     },
-    surfaceMotion: presenceMotionSlot(props.surfaceMotion, {
+    surfaceMotion: presenceMotionSlot(surfaceMotion, {
       elementType: MenuSurfaceMotion,
       defaultProps: {
         visible: baseState.open,
@@ -79,7 +80,7 @@ export const useMenu_unstable = (props: MenuProps & { safeZone?: boolean | { tim
  * Base hook for Menu component, produces state required to render the component.
  * It doesn't set any design-related slots specific to Menu such as `surfaceMotion`.
  *
- * @internal
+ * @param props - props from this instance of Menu
  */
 export const useMenuBase_unstable = (
   props: MenuBaseProps & { safeZone?: boolean | { timeout?: number } },
@@ -224,7 +225,6 @@ export const useMenuBase_unstable = (
     mountNode,
     triggerRef,
     menuPopoverRef,
-    components: {},
     openOnContext,
     open,
     setOpen,
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
@@ -48,8 +48,6 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
 /**
  * Base hook for MenuItem component, produces state required to render the component.
  * It doesn't set any design-related props specific to MenuItem such as submenu indicator icon.
- *
- * @internal
  */
 export const useMenuItemBase_unstable = (
   props: MenuItemProps,
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx
@@ -25,8 +25,6 @@ export const useMenuItemCheckbox_unstable = (
 
 /**
  * Base hook for MenuItemCheckbox component, produces state required to render the component
- *
- * @internal
  */
 export const useMenuItemCheckboxBase_unstable = (
   props: MenuItemCheckboxProps,
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemLink/index.ts b/packages/react-components/react-menu/library/src/components/MenuItemLink/index.ts
@@ -1,5 +1,5 @@
 export { MenuItemLink } from './MenuItemLink';
 export type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';
 export { renderMenuItemLink_unstable } from './renderMenuItemLink';
-export { useMenuItemLink_unstable } from './useMenuItemLink';
+export { useMenuItemLinkBase_unstable, useMenuItemLink_unstable } from './useMenuItemLink';
 export { menuItemLinkClassNames, useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts b/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts
@@ -4,7 +4,7 @@ import type * as React from 'react';
 import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';
-import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
+import { useMenuItemBase_unstable, useMenuItem_unstable } from '../MenuItem/useMenuItem';
 import type { MenuItemProps } from '../MenuItem/MenuItem.types';
 
 /**
@@ -43,3 +43,34 @@ export const useMenuItemLink_unstable = (
     ),
   };
 };
+
+/**
+ * Base hook for MenuItemLink, mirrors `useMenuItemLink_unstable` but composes with
+ * `useMenuItemBase_unstable`.
+ *
+ * @param props - props from this instance of MenuItemLink
+ * @param ref - reference to root HTMLElement of MenuItemLink
+ */
+export const useMenuItemLinkBase_unstable = (
+  props: MenuItemLinkProps,
+  ref: React.Ref<HTMLAnchorElement>,
+): MenuItemLinkState => {
+  const baseState = useMenuItemBase_unstable(props as MenuItemProps, null);
+  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };
+
+  return {
+    ...baseState,
+    components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
+      ...baseState.components,
+      root: 'a',
+    },
+    root: slot.always(
+      getIntrinsicElementProps('a', {
+        role: 'menuitem',
+        ..._props,
+      }),
+      { elementType: 'a' },
+    ),
+  };
+};
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.tsx b/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.tsx
@@ -33,8 +33,6 @@ export const useMenuItemRadio_unstable = (
 /**
  * Base hook for MenuItemRadio component, produces state required to render the component.
  * It doesn't set any design-related props specific to MenuItemRadio.
- *
- * @internal
  */
 export const useMenuItemRadioBase_unstable = (
   props: MenuItemRadioBaseProps,
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitch.tsx b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitch.tsx
@@ -34,7 +34,6 @@ export const useMenuItemSwitch_unstable = (
  * Base hook for MenuItemSwitch component, produces state required to render the component.
  * It doesn't set any design-related props specific to MenuItemSwitch.
  *
- * @internal
  * @param props - props from this instance of MenuItemSwitch
  * @param ref - reference to root HTMLDivElement of MenuItemSwitch
  */
diff --git a/packages/react-components/react-menu/library/src/components/MenuList/MenuList.types.ts b/packages/react-components/react-menu/library/src/components/MenuList/MenuList.types.ts
@@ -71,16 +71,6 @@ export type MenuListState = ComponentState<MenuListSlots> &
     hasMenuContext?: boolean;
   };
 
-/**
- * MenuListBase Props - omits design-related props (`hasIcons`, `hasCheckmarks`).
- */
-export type MenuListBaseProps = Omit<MenuListProps, 'hasIcons' | 'hasCheckmarks'>;
-
-/**
- * MenuListBase State - omits design-related state (`hasIcons`, `hasCheckmarks`).
- */
-export type MenuListBaseState = Omit<MenuListState, 'hasIcons' | 'hasCheckmarks'>;
-
 export type MenuListContextValues = {
   menuList: MenuListContextValue;
 };
diff --git a/packages/react-components/react-menu/library/src/components/MenuList/index.ts b/packages/react-components/react-menu/library/src/components/MenuList/index.ts
@@ -2,8 +2,6 @@ export { MenuList } from './MenuList';
 export type {
   MenuCheckedValueChangeData,
   MenuCheckedValueChangeEvent,
-  MenuListBaseProps,
-  MenuListBaseState,
   MenuListContextValues,
   MenuListProps,
   MenuListSlots,
diff --git a/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts b/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts
@@ -18,7 +18,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { MenuContext } from '../../contexts/menuContext';
-import type { MenuListBaseProps, MenuListBaseState, MenuListProps, MenuListState } from './MenuList.types';
+import type { MenuListProps, MenuListState } from './MenuList.types';
 import { useValidateNesting } from '../../utils/useValidateNesting';
 
 const MENU_ITEM_ROLES = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
@@ -55,7 +55,8 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
 
   React.useEffect(() => {
     const element = wrapperRef.current;
-    if (!targetDocument || !element) {
+
+    if (!hasMenuContext || !targetDocument || !element) {
       return;
     }
 
@@ -71,7 +72,7 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
     return () => {
       targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);
     };
-  }, [targetDocument]);
+  }, [hasMenuContext, targetDocument]);
 
   const setFocusByFirstCharacter = React.useCallback(
     (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {
@@ -90,32 +91,32 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
   return {
     ...baseState,
     root: {
-      ...baseState.root,
       ...focusAttributes,
+      ...baseState.root,
       ref: mergedRootRef,
     },
     setFocusByFirstCharacter,
-    hasIcons: menuContext.hasIcons || false,
-    hasCheckmarks: menuContext.hasCheckmarks || false,
   };
 };
 
 /**
  * Base hook for MenuList component, produces state required to render the component.
  *
- * Tabster-free: this hook does not import from `@fluentui/react-tabster` and does
- * not couple consumers to Tabster's runtime. It drops the design-related slot
- * alignment hints (`hasIcons`, `hasCheckmarks`), the arrow-key navigation
- * data-attributes, the `TabsterMoveFocusEvent` listener that coordinates Tab
- * key handling with `useMenuPopover_unstable`, and uses a native DOM walker
- * for `setFocusByFirstCharacter`.
+ * Does not invoke any Tabster APIs internally: arrow-key navigation and the
+ * focus-aware `setFocusByFirstCharacter` are added by the wrapper
+ * `useMenuList_unstable`. The base's `setFocusByFirstCharacter` walks the DOM
+ * via `querySelectorAll` and does not filter by Tabster's focusability rules,
+ * so consumers integrating their own focus management should layer that on top.
  *
- * @internal
+ * @param props - props from this instance of MenuList
+ * @param ref - reference to root HTMLElement of MenuList
  */
-export const useMenuListBase_unstable = (props: MenuListBaseProps, ref: React.Ref<HTMLElement>): MenuListBaseState => {
+export const useMenuListBase_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {
   const triggerId = useMenuContext_unstable(context => context.triggerId);
   const checkedValuesContext = useMenuContext_unstable(context => context.checkedValues);
   const onCheckedValueChangeContext = useMenuContext_unstable(context => context.onCheckedValueChange);
+  const hasIconsContext = useMenuContext_unstable(context => context.hasIcons);
+  const hasCheckmarksContext = useMenuContext_unstable(context => context.hasCheckmarks);
   const hasMenuContext = useHasParentContext(MenuContext);
 
   const innerRef = React.useRef<HTMLElement>(null);
@@ -176,6 +177,8 @@ export const useMenuListBase_unstable = (props: MenuListBaseProps, ref: React.Re
       { elementType: 'div' },
     ),
     checkedValues,
+    hasIcons: props.hasIcons ?? hasIconsContext ?? false,
+    hasCheckmarks: props.hasCheckmarks ?? hasCheckmarksContext ?? false,
     hasMenuContext,
     setFocusByFirstCharacter,
     selectRadio,
diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/index.ts b/packages/react-components/react-menu/library/src/components/MenuPopover/index.ts
diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/useMenuPopover.ts b/packages/react-components/react-menu/library/src/components/MenuPopover/useMenuPopover.ts
diff --git a/packages/react-components/react-menu/library/src/index.ts b/packages/react-components/react-menu/library/src/index.ts
