single state

packages/react-components/react-combobox/library/src/components/Option/useOption.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';
 import { useActiveDescendantContext } from '@fluentui/react-aria';
 import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
 import { useListboxContext_unstable } from '../../contexts/ListboxContext';
 import type { OptionValue } from '../../utils/OptionCollection.types';
 import type { OptionProps, OptionState } from './Option.types';
+import { useSetKeyboardNavigation } from '@fluentui/react-tabster';
 
 function getTextString(text: string | undefined, children: React.ReactNode) {
   if (text !== undefined) {
@@ -87,6 +88,15 @@ export const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElemen
     props.onClick?.(event);
   };
 
+  const setKeyboardNavigationState = useSetKeyboardNavigation();
+  const onMouseMove = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if (activeDescendantController.active() !== id) {
+      activeDescendantController.focus(id);
+    }
+
+    setKeyboardNavigationState(false);
+  });
+
   // register option data with context
   React.useEffect(() => {
     if (id && optionRef.current) {
@@ -114,6 +124,7 @@ export const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElemen
         ...semanticProps,
         ...props,
         onClick,
+        onMouseMove,
       }),
       { elementType: 'div' },
     ),

packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts

@@ -26,11 +26,11 @@ const useStyles = makeStyles({
     padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
     position: 'relative',
 
-    ':hover': {
-      backgroundColor: tokens.colorNeutralBackground1Hover,
-      color: tokens.colorNeutralForeground1Hover,
-      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),
-    },
+    // ':hover': {
+    //   backgroundColor: tokens.colorNeutralBackground1Hover,
+    //   color: tokens.colorNeutralForeground1Hover,
+    //   [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),
+    // },
 
     ':active': {
       backgroundColor: tokens.colorNeutralBackground1Pressed,
@@ -40,6 +40,11 @@ const useStyles = makeStyles({
   },
 
   active: {
+    [`&[data-activedescendant]`]: {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1Hover,
+      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),
+    },
     [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {
       content: '""',
       position: 'absolute',

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

@@ -230,6 +230,7 @@ export type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'hasIco
     toggleCheckbox?: SelectableHandler;
     selectRadio?: SelectableHandler;
     onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
+    mouseInputState?: MouseInputState;
 };
 
 // @public (undocumented)
@@ -260,6 +261,7 @@ export type MenuListState = ComponentState<MenuListSlots> & Required<Pick<MenuLi
     setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
     toggleCheckbox: SelectableHandler;
     hasMenuContext?: boolean;
+    mouseInputState?: MenuListContextValue['mouseInputState'];
 };
 
 // @public

packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx

@@ -21,6 +21,7 @@ import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
 import type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 
 // If it's not possible to position the submenu in smaller viewports, try
 // and fallback to this order of positions
@@ -269,9 +270,16 @@ const useMenuOpenState = (
   }, [findFirstFocusable, state.menuPopoverRef]);
 
   const firstMount = useFirstMount();
+  const mouseInputState = useMenuListContext_unstable(context => context.mouseInputState);
   React.useEffect(() => {
     if (open) {
-      focusFirst();
+      // TODO this should not be called when user is moving the mouse around
+      // This only applies to submenus
+      // Submenu should only read this state if it's wrapped by a menulist
+      // MenuList should set this state
+      if (!mouseInputState?.isMouseInput()) {
+        focusFirst();
+      }
     } else {
       if (!firstMount) {
         if (targetDocument?.activeElement === targetDocument?.body) {
@@ -287,7 +295,7 @@ const useMenuOpenState = (
     }
     // firstMount change should not re-run this effect
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);
+  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef, mouseInputState]);
 
   return [open, setOpen] as const;
 };

packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx

@@ -37,6 +37,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
 export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {
   const isSubmenuTrigger = useMenuTriggerContext_unstable();
   const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
+  const mouseInputState = useMenuListContext_unstable(ctx => ctx.mouseInputState);
   const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
   const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });
   const setOpen = useMenuContext_unstable(context => context.setOpen);
@@ -75,6 +76,10 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
             }
           }),
           onMouseMove: useEventCallback(event => {
+            if (!mouseInputState?.isMouseInput()) {
+              mouseInputState?.setMouseInput(true);
+            }
+
             if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
               innerRef.current?.focus();
             }

packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts

@@ -36,7 +36,9 @@ const useRootBaseStyles = makeResetStyles({
   cursor: 'pointer',
   gap: '4px',
 
-  ':hover': {
+  ...createFocusOutlineStyle(),
+  ':focus': {
+    outline: 'none',
     backgroundColor: tokens.colorNeutralBackground1Hover,
     color: tokens.colorNeutralForeground2Hover,
 
@@ -62,6 +64,7 @@ const useRootBaseStyles = makeResetStyles({
     [`& .${menuItemClassNames.subText}`]: {
       color: tokens.colorNeutralForeground3Pressed,
     },
+    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),
   },
 
   // High contrast styles
@@ -71,11 +74,9 @@ const useRootBaseStyles = makeResetStyles({
       borderColor: 'Highlight',
       color: 'Highlight',
     },
-    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),
   },
 
   userSelect: 'none',
-  ...createFocusOutlineStyle(),
 });
 
 const useContentBaseStyles = makeResetStyles({

packages/react-components/react-menu/library/src/components/MenuList/MenuList.types.ts

@@ -69,6 +69,8 @@ export type MenuListState = ComponentState<MenuListSlots> &
      * States if the MenuList is inside MenuContext
      */
     hasMenuContext?: boolean;
+
+    mouseInputState?: MenuListContextValue['mouseInputState'];
   };
 
 export type MenuListContextValues = {

packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts

@@ -11,12 +11,15 @@ import {
   useFocusFinders,
   TabsterMoveFocusEventName,
   type TabsterMoveFocusEvent,
+  useOnKeyboardNavigationChange,
+  useSetKeyboardNavigation,
 } from '@fluentui/react-tabster';
 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 { MenuListProps, MenuListState } from './MenuList.types';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 
 /**
  * Returns the props and state required to render the component
@@ -133,6 +136,8 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
     handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });
   });
 
+  const mouseInputState = useMouseInputState();
+
   return {
     components: {
       root: 'div',
@@ -157,6 +162,7 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
     setFocusByFirstCharacter,
     selectRadio,
     toggleCheckbox,
+    mouseInputState,
   };
 };
 
@@ -196,3 +202,23 @@ const usingPropsAndMenuContext = (
 
   return hasMenuContext && isUsingPropsAndContext;
 };
+
+const useMouseInputState = () => {
+  const parentContext = useMenuListContext_unstable(ctx => ctx.mouseInputState);
+  const setKeyboardNavigationState = useSetKeyboardNavigation();
+  const isMouseInputRef = React.useRef(!!parentContext?.isMouseInput());
+  const setMouseInput = React.useCallback(
+    (isMouseInput: boolean) => {
+      setKeyboardNavigationState(!isMouseInput);
+      parentContext?.setMouseInput(isMouseInput);
+      isMouseInputRef.current = isMouseInput;
+    },
+    [parentContext, setKeyboardNavigationState],
+  );
+
+  useOnKeyboardNavigationChange(isNavigatingWithKeyboard => {
+    setMouseInput(!isNavigatingWithKeyboard);
+  });
+
+  return { isMouseInput: () => isMouseInputRef.current, setMouseInput };
+};

packages/react-components/react-menu/library/src/components/MenuList/useMenuListContextValues.ts

@@ -1,7 +1,15 @@
 import type { MenuListContextValues, MenuListState } from './MenuList.types';
 
 export function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {
-  const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;
+  const {
+    checkedValues,
+    hasCheckmarks,
+    hasIcons,
+    selectRadio,
+    setFocusByFirstCharacter,
+    toggleCheckbox,
+    mouseInputState,
+  } = state;
 
   // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
   const menuList = {
@@ -11,6 +19,7 @@ export function useMenuListContextValues_unstable(state: MenuListState): MenuLis
     selectRadio,
     setFocusByFirstCharacter,
     toggleCheckbox,
+    mouseInputState,
   };
 
   return { menuList };

packages/react-components/react-menu/library/src/contexts/menuListContext.tsx

@@ -4,6 +4,11 @@ import type { ContextSelector, Context } from '@fluentui/react-context-selector'
 import type { SelectableHandler } from '../selectable/index';
 import type { MenuCheckedValueChangeData, MenuCheckedValueChangeEvent, MenuListProps } from '../components/index';
 
+export interface MouseInputState {
+  isMouseInput: () => boolean;
+  setMouseInput(isMouseInput: boolean): void;
+}
+
 export const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue | undefined>(
   undefined,
 ) as Context<MenuListContextValue>;
@@ -15,6 +20,7 @@ const menuListContextDefaultValue: MenuListContextValue = {
   selectRadio: () => null,
   hasIcons: false,
   hasCheckmarks: false,
+  mouseInputState: { isMouseInput: () => false, setMouseInput: () => null },
 };
 
 /**
@@ -34,6 +40,7 @@ export type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'hasIco
    * the signature remains just to avoid breaking changes
    */
   onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
+  mouseInputState?: MouseInputState;
 };
 
 export const MenuListProvider = MenuListContext.Provider;