feat: (WIP) Allowing for more user provided events in PromptField for analytics tracking

packages/@react-spectrum/ai/exports/index.ts

@@ -49,6 +49,7 @@ export type {
   PromptFieldToolbarProps,
   PromptFieldTokenValue,
   InsertMenuItemProps,
+  AttachFileMenuItemProps,
   PromptFieldVoiceButtonProps,
   InsertTokenMenuItemProps,
   InsertTextMenuItemProps,

packages/@react-spectrum/ai/src/PromptField.tsx

@@ -33,7 +33,7 @@ import {
 } from 'react';
 import {FocusableRef} from '@react-types/shared';
 import {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';
-import {IconContext} from '@react-spectrum/s2';
+import {IconContext, MenuTriggerProps} from '@react-spectrum/s2';
 import {Image, Text} from '@react-spectrum/s2/Card';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -941,15 +941,17 @@ function buildVoicePrompt(base: TokenFieldValue, voiceText: string): PromptField
   return base.replaceRange(base.caretPosition, base.caretPosition, voiceText) as PromptFieldValue;
 }
 
-export interface InsertMenuItemProps {
+// TODO: how do we feed about these extending menutrigger props? IMO the "InsertMenuButton" makes
+// it a bit weird to pass MenuTrigger props to it
+export interface InsertMenuItemProps extends Pick<MenuTriggerProps, 'onOpenChange'> {
   children: React.ReactNode;
 }
 
 export function InsertMenuButton(props: InsertMenuItemProps) {
-  let {children} = props;
+  let {children, onOpenChange} = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai');
   return (
-    <MenuTrigger>
+    <MenuTrigger onOpenChange={onOpenChange}>
       <ActionButton
         isQuiet
         staticColor="auto"
@@ -960,12 +962,29 @@ export function InsertMenuButton(props: InsertMenuItemProps) {
     </MenuTrigger>
   );
 }
+export interface AttachFileMenuItemProps extends Omit<
+  MenuItemProps,
+  | 'children'
+  | 'UNSAFE_className'
+  | 'UNSAFE_style'
+  | 'download'
+  | 'href'
+  | 'hrefLang'
+  | 'ping'
+  | 'referrerPolicy'
+  | 'rel'
+  | 'routerOptions'
+  | 'target'
+> {}
 
-export function AttachFileMenuItem() {
+export function AttachFileMenuItem(props: AttachFileMenuItemProps) {
+  let {onAction, ...otherProps} = props;
   let {acceptedAttachmentTypes, setAttachments, onAddAttachments} = useContext(PromptFieldContext);
   return (
     <MenuItem
+      {...otherProps}
       onAction={() => {
+        onAction?.();
         let input = document.createElement('input');
         input.type = 'file';
         if (acceptedAttachmentTypes) {

packages/@react-spectrum/ai/test/PromptField.test.tsx

@@ -11,14 +11,20 @@
  */
 
 import {act, screen, waitFor} from '@react-spectrum/test-utils-internal';
+import {
+  AttachFileMenuItem,
+  InsertMenuButton,
+  PromptField,
+  PromptFieldToolbar,
+  PromptTokenField
+} from '../src/PromptField';
 import {
   imageAttachment,
   installRangePolyfill,
   PromptFieldValue,
   renderPromptField,
   tokenTexts
 } from './utils/promptFieldTestUtils';
-import {PromptField, PromptTokenField} from '../src/PromptField';
 import React from 'react';
 import {render} from '@react-spectrum/test-utils-internal';
 import userEvent from '@testing-library/user-event';
@@ -444,6 +450,41 @@ describeOrSkip('PromptField', () => {
     });
   });
 
+  describe('InsertMenuButton', () => {
+    it('calls onOpenChange when the menu is opened', async () => {
+      let onOpenChange = jest.fn();
+      let {getByRole} = render(
+        <PromptField>
+          <PromptTokenField />
+          <PromptFieldToolbar>
+            <InsertMenuButton onOpenChange={onOpenChange}>
+              <AttachFileMenuItem />
+            </InsertMenuButton>
+          </PromptFieldToolbar>
+        </PromptField>
+      );
+      await user.click(getByRole('button', {name: 'Add'}));
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+
+    it('calls AttachFileMenuItem onAction when the item is selected', async () => {
+      let onAction = jest.fn();
+      let {getByRole} = render(
+        <PromptField>
+          <PromptTokenField />
+          <PromptFieldToolbar>
+            <InsertMenuButton>
+              <AttachFileMenuItem onAction={onAction} />
+            </InsertMenuButton>
+          </PromptFieldToolbar>
+        </PromptField>
+      );
+      await user.click(getByRole('button', {name: 'Add'}));
+      await user.click(await findMenuItem('Attach a file'));
+      expect(onAction).toHaveBeenCalled();
+    });
+  });
+
   it('fires onKeyDown when a key is pressed in the token field', async () => {
     let onKeyDown = jest.fn();
     let {getByRole} = render(