[pull] master from microsoft:master

change/@fluentui-react-headless-components-preview-25f0894c-b02c-4b76-a05a-39a855967011.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: let a consumer-supplied popover attribute win over the default on the PopoverSurface, MenuPopover and Listbox slots",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "array.knight@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-headless-components-preview-30cabdfc-56c7-47ed-9b2a-a9b5824ad6d4.json

@@ -0,0 +1,6 @@
+{
+  "type": "patch",
+  "comment": "feat: expose the Avatar and AvatarGroup context readers from the headless entry points",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "vgenaev@gmail.com"
+}

change/@fluentui-react-utilities-2487f27f-0f06-4edf-8046-4f2016681dfd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Add loading to img element property whitelist",
+  "packageName": "@fluentui/react-utilities",
+  "email": "84954628+lukiod@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -29,6 +29,7 @@ import { renderAvatarGroup_unstable as renderAvatarGroup } from '@fluentui/react
 import { renderAvatarGroupItem_unstable as renderAvatarGroupItem } from '@fluentui/react-avatar';
 import type { Slot } from '@fluentui/react-utilities';
 import type { TooltipBaseProps } from '@fluentui/react-tooltip';
+import { useAvatarGroupContext_unstable as useAvatarGroupContext } from '@fluentui/react-avatar';
 
 // @public
 export const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;
@@ -105,6 +106,8 @@ export const renderAvatarGroupPopover: (state: AvatarGroupPopoverState, contextV
 // @public
 export const useAvatarGroup: (props: AvatarGroupProps, ref: React_2.Ref<HTMLDivElement>) => AvatarGroupState;
 
+export { useAvatarGroupContext }
+
 // @public
 export const useAvatarGroupContextValues: (state: AvatarGroupState) => AvatarGroupContextValues;
 

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

@@ -10,6 +10,7 @@ import { AvatarBaseState as AvatarState } from '@fluentui/react-avatar';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type * as React_2 from 'react';
 import { renderAvatar_unstable as renderAvatar } from '@fluentui/react-avatar';
+import { useAvatarContext } from '@fluentui/react-avatar';
 
 // @public
 export const Avatar: ForwardRefComponent<AvatarProps>;
@@ -25,6 +26,8 @@ export { renderAvatar }
 // @public
 export const useAvatar: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
 
+export { useAvatarContext }
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-components/react-headless-components-preview/library/src/avatar-group.ts

@@ -2,6 +2,7 @@ export {
   AvatarGroup,
   renderAvatarGroup,
   useAvatarGroup,
+  useAvatarGroupContext,
   useAvatarGroupContextValues,
   AvatarGroupItem,
   renderAvatarGroupItem,

packages/react-components/react-headless-components-preview/library/src/avatar.ts

@@ -1,2 +1,2 @@
-export { Avatar, renderAvatar, useAvatar } from './components/Avatar/index';
+export { Avatar, renderAvatar, useAvatar, useAvatarContext } from './components/Avatar/index';
 export type { AvatarSlots, AvatarProps, AvatarState } from './components/Avatar/index';

packages/react-components/react-headless-components-preview/library/src/components/Avatar/index.ts

@@ -1,4 +1,4 @@
 export { Avatar } from './Avatar';
 export { renderAvatar } from './renderAvatar';
-export { useAvatar } from './useAvatar';
+export { useAvatar, useAvatarContext } from './useAvatar';
 export type { AvatarSlots, AvatarProps, AvatarState } from './Avatar.types';

packages/react-components/react-headless-components-preview/library/src/components/Avatar/useAvatar.ts

@@ -14,3 +14,8 @@ export const useAvatar = (props: AvatarProps, ref: React.Ref<HTMLElement>): Avat
 
   return state;
 };
+
+/**
+ * Returns the value from the nearest Avatar context.
+ */
+export { useAvatarContext } from '@fluentui/react-avatar';

packages/react-components/react-headless-components-preview/library/src/components/AvatarGroup/index.ts

@@ -1,6 +1,6 @@
 export { AvatarGroup } from './AvatarGroup';
 export { renderAvatarGroup } from './renderAvatarGroup';
-export { useAvatarGroup } from './useAvatarGroup';
+export { useAvatarGroup, useAvatarGroupContext } from './useAvatarGroup';
 export { useAvatarGroupContextValues } from './useAvatarGroupContextValues';
 export type {
   AvatarGroupSlots,

packages/react-components/react-headless-components-preview/library/src/components/AvatarGroup/useAvatarGroup.ts

@@ -17,3 +17,8 @@ export const useAvatarGroup = (props: AvatarGroupProps, ref: React.Ref<HTMLDivEl
 
   return state;
 };
+
+/**
+ * Returns a selected value from the nearest AvatarGroup context.
+ */
+export { useAvatarGroupContext_unstable as useAvatarGroupContext } from '@fluentui/react-avatar';

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

@@ -38,6 +38,17 @@ describe('Dropdown', () => {
     expect(getAllByRole('option')).toHaveLength(3);
   });
 
+  it('lets a consumer override the popover attribute', () => {
+    const { getByRole } = render(
+      <Dropdown open listbox={{ popover: 'manual' }} placeholder="Select an option">
+        <Option>Option 1</Option>
+        <Option>Option 2</Option>
+      </Dropdown>,
+    );
+
+    expect(getByRole('listbox')).toHaveAttribute('popover', 'manual');
+  });
+
   it('sets data-selected="true" on the selected option', () => {
     const { getAllByRole } = render(
       <Dropdown open defaultSelectedOptions={['Dog']} placeholder="Select">

packages/react-components/react-headless-components-preview/library/src/components/Dropdown/Listbox/useListbox.ts

@@ -12,8 +12,8 @@ import type { ListboxProps, ListboxState } from './Listbox.types';
 export const useListbox = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {
   const state = useListbox_unstable(props, ref);
 
-  // eslint-disable-next-line react-hooks/immutability
-  state.root.popover = 'auto';
-
-  return state;
+  return {
+    ...state,
+    root: { popover: 'auto', ...state.root },
+  };
 };

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

@@ -306,6 +306,40 @@ describe('Menu', () => {
     expect(container.contains(getByRole('menu'))).toBe(true);
   });
 
+  it('promotes the MenuPopover with popover="auto" by default', () => {
+    const { getByRole } = render(
+      <Menu defaultOpen>
+        <MenuTrigger>
+          <button>Trigger</button>
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>Item 1</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>,
+    );
+
+    expect(getByRole('menu').parentElement).toHaveAttribute('popover', 'auto');
+  });
+
+  it('lets a consumer override the popover attribute', () => {
+    const { getByRole } = render(
+      <Menu defaultOpen>
+        <MenuTrigger>
+          <button>Trigger</button>
+        </MenuTrigger>
+        <MenuPopover popover="manual">
+          <MenuList>
+            <MenuItem>Item 1</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>,
+    );
+
+    expect(getByRole('menu').parentElement).toHaveAttribute('popover', 'manual');
+  });
+
   // Arrow navigation is handled by Tabster (useArrowNavigationGroup).
   // Tabster's behavior is comprehensively tested in @fluentui/react-tabster.
   // E2E and integration tests should verify arrow navigation works correctly in the browser.

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

@@ -15,7 +15,7 @@ export const useMenuPopover = (props: MenuPopoverProps, ref: React.Ref<HTMLEleme
 
   const state: MenuPopoverState = {
     ...baseState,
-    root: { ...baseState.root, popover: 'auto' } as MenuPopoverState['root'],
+    root: { popover: 'auto', ...baseState.root } as MenuPopoverState['root'],
   };
 
   const open = useMenuContext(ctx => ctx.open);

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

@@ -57,6 +57,19 @@ describe('PopoverSurface', () => {
     expect(getByRole('group', { hidden: true })).toHaveAttribute('popover', 'auto');
   });
 
+  it('lets a consumer override the popover attribute', () => {
+    const { getByRole } = render(
+      <Popover defaultOpen>
+        <PopoverTrigger>
+          <button>Trigger</button>
+        </PopoverTrigger>
+        <PopoverSurface popover="manual">Content</PopoverSurface>
+      </Popover>,
+    );
+
+    expect(getByRole('group', { hidden: true })).toHaveAttribute('popover', 'manual');
+  });
+
   it('mirrors a browser-driven `toggle` event into onOpenChange', () => {
     const onOpenChange = jest.fn();
 

packages/react-components/react-headless-components-preview/library/src/components/Popover/PopoverSurface/usePopoverSurface.ts

@@ -33,11 +33,15 @@ export const usePopoverSurface = (
         role: trapFocus ? 'dialog' : 'group',
         ...props,
         id: surfaceId,
-        popover: trapFocus ? undefined : 'auto',
         'data-popover-surface': '',
         'data-open': toDataAttributeValue(open),
       },
-      { elementType: 'dialog' },
+      {
+        defaultProps: {
+          popover: trapFocus ? undefined : 'auto',
+        },
+        elementType: 'dialog',
+      },
     ),
     'data-open': open ? 'true' : 'false',
   };

packages/react-components/react-utilities/src/utils/properties.test.ts

@@ -1,5 +1,12 @@
 import type * as React from 'react';
-import { getNativeProps, divProperties, inputProperties, anchorProperties, buttonProperties } from './properties';
+import {
+  getNativeProps,
+  divProperties,
+  inputProperties,
+  anchorProperties,
+  buttonProperties,
+  imgProperties,
+} from './properties';
 
 describe('getNativeProps', () => {
   it('can pass through data tags', () => {
@@ -113,6 +120,27 @@ describe('getNativeProps', () => {
     expect(result).not.toHaveProperty('foobar');
   });
 
+  it('can pass through img props including loading', () => {
+    const result = getNativeProps<React.ImgHTMLAttributes<HTMLImageElement>>(
+      {
+        src: 'https://example.com/image.png',
+        alt: 'An image',
+        loading: 'lazy',
+        // Non-img property
+        foobar: 1,
+      },
+      imgProperties,
+    );
+
+    expect(result).toMatchObject({
+      src: 'https://example.com/image.png',
+      alt: 'An image',
+      loading: 'lazy',
+    });
+
+    expect(result).not.toHaveProperty('foobar');
+  });
+
   describe('popover', () => {
     it('allows the popoverTarget attribute on button', () => {
       const result = getNativeProps<React.HTMLAttributes<HTMLButtonElement>>(

packages/react-components/react-utilities/src/utils/properties.ts

@@ -416,6 +416,7 @@ export const imgProperties = toObjectMap(htmlElementProperties, [
   'alt', // area, img, input
   'crossOrigin', // img
   'height', // canvas, embed, iframe, img, input, object, video
+  'loading', // img, iframe
   'src', // audio, embed, iframe, img, input, script, source, track, video
   'srcSet', // img, source
   'useMap', // img, object,