[pull] main from adobe:main

.circleci/build-skills.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 # Build agent skills for the current working tree and copy the resulting
-# .well-known/skills directories into $1 for later diffing.
+# .well-known/agent-skills directories into $1 for later diffing.
 #
 # Runs the two node scripts directly (rather than via yarn) so the command
 # works from a `git worktree` / `git archive` checkout that doesn't have
@@ -23,7 +23,7 @@ node packages/dev/s2-docs/scripts/generateAgentSkills.mjs
 rm -rf "$DEST"
 mkdir -p "$DEST"
 for lib in s2 react-aria; do
-  src="packages/dev/s2-docs/dist/$lib/.well-known/skills"
+  src="packages/dev/s2-docs/dist/$lib/.well-known/agent-skills"
   if [ -d "$src" ]; then
     mkdir -p "$DEST/$lib"
     cp -R "$src" "$DEST/$lib/"

.circleci/skills-diff.js

@@ -152,7 +152,7 @@ function colorCounts(counts) {
   return parts.join(' ');
 }
 
-// Map "s2/skills/<rest>" / "react-aria/skills/<rest>" (the layout produced
+// Map "s2/agent-skills/<rest>" / "react-aria/agent-skills/<rest>" (the layout produced
 // by build-skills.sh) to a cloudfront URL on the branch build.
 function fileUrl(relPath, sha) {
   if (!sha) {
@@ -161,7 +161,7 @@ function fileUrl(relPath, sha) {
   const parts = relPath.split(path.sep);
   const lib = parts[0];
   const rest = parts.slice(1).join('/');
-  // `rest` starts with "skills/...", the deploy lands it under /.well-known/
+  // `rest` starts with "agent-skills/...", the deploy lands it under /.well-known/
   let base;
   if (lib === 's2') {
     base = S2_BASE;

packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx

@@ -10,15 +10,23 @@
  * governing permissions and limitations under the License.
  */
 
+import {Avatar} from '../src/Avatar';
+import {Button} from '../src/Button';
+import {ButtonGroup} from '../src/ButtonGroup';
+import {ComboBox, ComboBoxItem} from '../src/ComboBox';
+import {Content, Heading, Text} from '../src/Content';
 import {Dialog} from '../src/Dialog';
 import {
   DialogContainerExample,
   DialogTriggerExample,
   Example,
   ExampleStoryType
 } from '../stories/Dialog.stories';
+import {DialogTrigger} from '../src/DialogTrigger';
+import {expect} from '@storybook/jest';
 import type {Meta, StoryObj} from '@storybook/react';
-import {userEvent, within} from 'storybook/test';
+import {Picker, PickerItem} from '../src/Picker';
+import {userEvent, waitFor, within} from 'storybook/test';
 
 const meta: Meta<typeof Dialog> = {
   component: Dialog,
@@ -57,3 +65,85 @@ export const DialogContainer: Story = {
   ...DialogContainerExample,
   play: async context => await Default.play!(context)
 };
+
+export const ComboBoxAvatarInDialog: Story = {
+  name: 'Combobox avatar in Dialog',
+  render: () => (
+    <DialogTrigger>
+      <Button variant="primary">Open dialog</Button>
+      <Dialog>
+        <Heading slot="title">Share with people</Heading>
+        <Content>
+          <ComboBox label="Add people">
+            <ComboBoxItem textValue="User One">
+              <Avatar slot="avatar" src="https://i.imgur.com/xIe7Wlb.png" />
+              <Text slot="label">User One</Text>
+              <Text slot="description">user.one@example.com</Text>
+            </ComboBoxItem>
+          </ComboBox>
+        </Content>
+        <ButtonGroup>
+          <Button variant="secondary">Cancel</Button>
+          <Button variant="accent">Share</Button>
+        </ButtonGroup>
+      </Dialog>
+    </DialogTrigger>
+  ),
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('{Enter}');
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('dialog');
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    let combobox = within(body).getByRole('combobox');
+    await userEvent.click(combobox);
+    await userEvent.keyboard('{ArrowDown}');
+    let listbox = await within(body).findByRole('listbox');
+    await waitFor(
+      () => {
+        expect(within(listbox).getByText('User One', {exact: false})).toBeInTheDocument();
+      },
+      {timeout: 5000}
+    );
+  }
+};
+
+export const PickerAvatarInDialog: Story = {
+  name: 'Picker avatar in Dialog',
+  render: () => (
+    <DialogTrigger>
+      <Button variant="primary">Open dialog</Button>
+      <Dialog>
+        <Heading slot="title">Share with people</Heading>
+        <Content>
+          <Picker label="Owner">
+            <PickerItem textValue="User One">
+              <Avatar slot="avatar" src="https://i.imgur.com/xIe7Wlb.png" />
+              <Text>User One</Text>
+            </PickerItem>
+          </Picker>
+        </Content>
+        <ButtonGroup>
+          <Button variant="secondary">Cancel</Button>
+          <Button variant="accent">Share</Button>
+        </ButtonGroup>
+      </Dialog>
+    </DialogTrigger>
+  ),
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('{Enter}');
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('dialog');
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    let picker = within(body).getByRole('button', {name: /Owner/i});
+    await userEvent.click(picker);
+    let listbox = await within(body).findByRole('listbox');
+    await waitFor(
+      () => {
+        expect(within(listbox).getByText('User One', {exact: false})).toBeInTheDocument();
+      },
+      {timeout: 5000}
+    );
+  }
+};

packages/@react-spectrum/s2/src/Avatar.tsx

@@ -20,7 +20,7 @@ import {
   StylesPropWithoutWidth,
   UnsafeStyles
 } from './style-utils' with {type: 'macro'};
-import {Image} from './Image';
+import {Image, ImageContext} from './Image';
 import {isDocsEnv} from './macros' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
@@ -93,19 +93,21 @@ export const Avatar = forwardRef(function Avatar(
   let remSize = isDocsEnv() ? `calc(${size / 16} * var(--rem, 1rem))` : `${size / 16}rem`;
   let isLarge = size >= 64;
   return (
-    <Image
-      {...domProps}
-      ref={domRef}
-      slot={slot}
-      alt={alt}
-      UNSAFE_style={{
-        ...UNSAFE_style,
-        width: remSize,
-        height: remSize
-      }}
-      UNSAFE_className={UNSAFE_className + ' ' + centerBaselineBefore}
-      styles={imageStyles({isOverBackground, isLarge}, props.styles)}
-      src={src}
-    />
+    <ImageContext.Provider value={{}}>
+      <Image
+        {...domProps}
+        ref={domRef}
+        slot={slot}
+        alt={alt}
+        UNSAFE_style={{
+          ...UNSAFE_style,
+          width: remSize,
+          height: remSize
+        }}
+        UNSAFE_className={UNSAFE_className + ' ' + centerBaselineBefore}
+        styles={imageStyles({isOverBackground, isLarge}, props.styles)}
+        src={src}
+      />
+    </ImageContext.Provider>
   );
 });