[pull] main from adobe:main

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

@@ -10,7 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMRef, forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
+import {
+  AriaLabelingProps,
+  DOMProps,
+  DOMRef,
+  forwardRefType,
+  GlobalDOMAttributes
+} from '@react-types/shared';
 import {baseColor, focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {BasicHorizontalCard} from './HorizontalCard';
 import {Button} from 'react-aria-components/Button';
@@ -22,7 +28,7 @@ import {ImageContext} from '@react-spectrum/s2/Image';
 import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
 import {pressScale} from '@react-spectrum/s2/pressScale';
 import {ProgressCircle} from '@react-spectrum/s2/ProgressCircle';
-import {StyleString} from './types';
+import {StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {
   Tag,
   TagGroup,
@@ -120,6 +126,7 @@ const CloseButton = function CloseButton(props) {
 
 export interface AttachmentListProps<T>
   extends
+    DOMProps,
     Omit<
       TagGroupProps,
       | 'children'
@@ -148,12 +155,13 @@ export const AttachmentList = (forwardRef as forwardRefType)(function Attachment
   props: AttachmentListProps<T>,
   ref: DOMRef<HTMLDivElement>
 ) {
+  let {styles, items, children, dependencies, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   return (
-    <TagGroup {...props} className={props.styles} ref={domRef}>
+    <TagGroup {...otherProps} className={styles} ref={domRef}>
       <TagList
-        items={props.items}
-        dependencies={props.dependencies}
+        items={items}
+        dependencies={dependencies}
         className={style({
           display: 'flex',
           flexDirection: 'row',
@@ -162,7 +170,7 @@ export const AttachmentList = (forwardRef as forwardRefType)(function Attachment
           alignItems: 'center',
           width: 'full'
         })}>
-        {props.children}
+        {children}
       </TagList>
     </TagGroup>
   );
@@ -172,7 +180,7 @@ export interface AttachmentProps
   extends
     Omit<CardProps, 'styles' | 'UNSAFE_className' | 'UNSAFE_style'>,
     AriaLabelingProps,
-    Pick<TagProps, 'id' | 'textValue'> {
+    Pick<TagProps, 'id' | 'textValue' | 'render'> {
   /** The children of the Attachment. */
   children: ReactNode | ((renderProps: AttachmentRenderProps) => ReactNode);
   uploadProgress?: number;
@@ -200,6 +208,7 @@ export const Attachment = forwardRef(function Attachment(
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
+    styles,
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
@@ -211,7 +220,7 @@ export const Attachment = forwardRef(function Attachment(
       aria-labelledby={ariaLabelledby}
       aria-describedby={ariaDescribedby}
       ref={domRef}
-      className={renderProps => mergeStyles(tagStyles({...renderProps}), props.styles)}>
+      className={renderProps => mergeStyles(tagStyles({...renderProps}), styles)}>
       <BasicHorizontalCard {...otherProps}>
         {props.uploadProgress != null && props.uploadProgress < 100 && (
           <div

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

@@ -23,9 +23,9 @@ import {
   useRef,
   useState
 } from 'react';
-import type {CSSProperties} from 'react';
 import {DEFAULT_SLOT, Provider} from 'react-aria-components/slots';
 import {DOMRef, forwardRefType} from '@react-types/shared';
+import {focusRing, style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {
   GridList,
   GridListItem,
@@ -34,7 +34,7 @@ import {
 } from 'react-aria-components/GridList';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
 import {useDOMRef} from './useDOMRef';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 import {useFocusWithin} from 'react-aria/useFocusWithin';
@@ -92,16 +92,21 @@ const ThreadScrollButtonContext = createContext<ThreadScrollButtonContextValue>(
 
 // TODO: make this more RAC like (aka default class name and other RAC prop)
 export interface ChatProps {
-  className?: string;
-  style?: CSSProperties;
+  /**
+   * Spectrum-defined styles, returned by the `style()` macro.
+   */
+  styles?: StyleString;
+  /**
+   * Children of the chat, such as Thread, PromptField, and ThreadScrollButton.
+   */
   children?: ReactNode;
 }
 
 export const Chat = /*#__PURE__*/ (forwardRef as forwardRefType)(function Chat(
   props: ChatProps,
   ref: DOMRef<HTMLDivElement>
 ) {
-  let {children, className, style} = props;
+  let {children, styles} = props;
   let domRef = useDOMRef(ref);
   let isFieldFocusedRef = useRef(false);
   let isChatFocusWithinRef = useRef(false);
@@ -190,24 +195,28 @@ export const Chat = /*#__PURE__*/ (forwardRef as forwardRefType)(function Chat(
           }
         ]
       ]}>
-      <div ref={domRef} className={className} style={style} {...focusWithinProps}>
+      <div ref={domRef} className={styles} {...focusWithinProps}>
         {children}
       </div>
     </Provider>
   );
 });
 
-// TODO: update the items/className/children/etc type to reflect a thread specific classname once we finalize API
 export interface ThreadProps<T extends object> extends Pick<
   GridListProps<T>,
-  'items' | 'children' | 'UNSTABLE_focusOnEntry' | 'aria-label' | 'aria-labelledby' | 'className'
-> {}
+  'items' | 'children' | 'UNSTABLE_focusOnEntry' | 'aria-label' | 'aria-labelledby'
+> {
+  /**
+   * Spectrum-defined styles, returned by the `style()` macro.
+   */
+  styles?: StyleString;
+}
 
 export function Thread<T extends object>(props: ThreadProps<T>) {
   let {
     items,
     children,
-    className,
+    styles,
     UNSTABLE_focusOnEntry,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby
@@ -267,7 +276,7 @@ export function Thread<T extends object>(props: ThreadProps<T>) {
         boxSizing: 'border-box',
         minWidth: 0
       }}
-      className={className}>
+      className={styles}>
       {children}
     </GridList>
   );
@@ -314,19 +323,24 @@ function ThreadScrollButtonInner({domRef, isExiting, children}: ThreadScrollButt
   );
 }
 
-// TODO: update the className type to reflect a thread specific classname once we finalize API
-export interface ThreadItemProps extends Pick<
-  GridListItemProps,
-  'className' | 'children' | 'textValue'
-> {
+const threadItemBase = style({
+  ...focusRing(),
+  borderRadius: 'default'
+});
+
+export interface ThreadItemProps extends Pick<GridListItemProps, 'children' | 'textValue'> {
+  /**
+   * Spectrum-defined styles, returned by the `style()` macro.
+   */
+  styles?: StyleString;
   /** Whether or not the item's content is currently being streamed in. */
   isStreaming?: boolean;
   /** Announce textValue on mount even when isStreaming is provided. */
   shouldAnnounceOnMount?: boolean;
 }
 
 export function ThreadItem(props: ThreadItemProps) {
-  let {className, children, textValue = ' ', isStreaming, shouldAnnounceOnMount} = props;
+  let {styles, children, textValue = ' ', isStreaming, shouldAnnounceOnMount} = props;
   let {announceItem} = useContext(InternalChatContext);
 
   // TODO: using aria-live on the gridlist item was pretty chatty and the streaming causes the text announcement
@@ -354,7 +368,9 @@ export function ThreadItem(props: ThreadItemProps) {
   }, [isStreaming, isStreamingNow, textValue, announceItem]);
 
   return (
-    <GridListItem textValue={textValue} className={className}>
+    <GridListItem
+      textValue={textValue}
+      className={renderProps => mergeStyles(threadItemBase({...renderProps}), styles)}>
       {children}
     </GridListItem>
   );

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

@@ -36,7 +36,7 @@ import {LinkButtonContext} from '@react-spectrum/s2/LinkButton';
 import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
 import {pressScale} from '@react-spectrum/s2/pressScale';
 import {SkeletonContext, useIsSkeleton} from '@react-spectrum/s2/Skeleton';
-import {StyleString} from './types';
+import {StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {TextContext} from '@react-spectrum/s2/Text';
 import {useDOMRef} from './useDOMRef';
 interface HorizontalCardRenderProps {

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

@@ -16,7 +16,7 @@ import {forwardRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {SlotProps} from 'react-aria-components/slots';
-import {StyleString} from './types';
+import {StylesPropWithHeight} from '@react-spectrum/s2';
 import ThumbDown from '@react-spectrum/s2/icons/ThumbDown';
 import ThumbUp from '@react-spectrum/s2/icons/ThumbUp';
 import {ToggleButton} from '@react-spectrum/s2/ToggleButton';
@@ -39,10 +39,8 @@ export interface MessageFeedbackProps extends DOMProps, AriaLabelingProps, SlotP
   thumbUpLabel?: string;
   /** Accessible label for the thumbs down button. */
   thumbDownLabel?: string;
-  /**
-   * Spectrum-defined styles, returned by the `style()` macro.
-   */
-  styles?: StyleString;
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: StylesPropWithHeight;
 }
 
 function selectionToValue(selection: Selection): MessageFeedbackValue {
@@ -83,9 +81,7 @@ export const MessageFeedback = forwardRef(function MessageFeedback(
       defaultSelectedKeys={defaultSelectedKeys}
       onSelectionChange={handleSelectionChange}
       isDisabled={isDisabled}
-      // Pass styles to UNSAFE because S2 ToggleButtonGroup styles have type StylesPropWithHeight which restrict what can be overridden
-      //@ts-ignore
-      UNSAFE_className={styles}>
+      styles={styles}>
       <ToggleButton
         id="up"
         isQuiet

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

@@ -31,19 +31,15 @@ import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
 import {NumberFormatter} from '@internationalized/number';
 import React, {createContext, forwardRef, useContext} from 'react';
 import {SlotProps} from 'react-aria-components/slots';
-import {StyleString} from './types';
+import {StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 
 export interface MessageSourceProps extends Omit<
   DisclosureProps,
-  'isQuiet' | 'styles' | 'UNSAFE_className' | 'UNSAFE_style'
+  'isQuiet' | 'UNSAFE_className' | 'UNSAFE_style'
 > {
   label: string;
-  /**
-   * Spectrum-defined styles, returned by the `style()` macro.
-   */
-  styles?: StyleString;
 }
 
 const MessageSourceInternalContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});
@@ -62,13 +58,7 @@ export const MessageSource = (forwardRef as forwardRefType)(function MessageSour
   return (
     <MessageSourceInternalContext.Provider value={{size}}>
       <NumberBadgeContext.Provider value={{size}}>
-        <Disclosure
-          {...otherProps}
-          //@ts-ignore
-          UNSAFE_className={styles}
-          size={size}
-          ref={ref}
-          isQuiet>
+        <Disclosure {...otherProps} styles={styles} size={size} ref={ref} isQuiet>
           <DisclosureTitle>{label}</DisclosureTitle>
           {children}
         </Disclosure>
@@ -96,15 +86,7 @@ const itemStyles = style({
   gap: 8
 });
 
-export interface SourceListProps extends Omit<
-  DisclosurePanelProps,
-  'styles' | 'UNSAFE_className' | 'UNSAFE_style'
-> {
-  /**
-   * Spectrum-defined styles, returned by the `style()` macro.
-   */
-  styles?: StyleString;
-}
+export interface SourceListProps extends DisclosurePanelProps {}
 
 /**
  * A SourceList displays an ordered list of sources inside a MessageSource.
@@ -114,18 +96,14 @@ export const SourceList = (forwardRef as forwardRefType)(function SourceList(
   props: SourceListProps,
   ref: DOMRef<HTMLDivElement>
 ) {
-  let {children, styles, ...otherProps} = props;
+  let {children, ...otherProps} = props;
 
   let numberedChildren = React.Children.map(children, (child, i) => (
     <SourceListIndexContext.Provider value={i + 1}>{child}</SourceListIndexContext.Provider>
   ));
 
   return (
-    <DisclosurePanel
-      {...otherProps}
-      // @ts-ignore
-      UNSAFE_className={styles}
-      ref={ref}>
+    <DisclosurePanel {...otherProps} ref={ref}>
       <ol className={listStyles}>{numberedChildren}</ol>
     </DisclosurePanel>
   );
@@ -147,7 +125,7 @@ const linkStyles = style({
 });
 
 export interface SourceListItemProps
-  extends Omit<LinkProps, 'className' | 'style' | keyof GlobalDOMAttributes>, DOMProps {
+  extends Omit<LinkProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, DOMProps {
   /** The content of the source list item. */
   children: React.ReactNode;
   /**

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

@@ -26,7 +26,7 @@ import {IconContext} from '@react-spectrum/s2/Icon';
 import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
 import {pressScale} from '@react-spectrum/s2';
 import {Provider, SlotProps} from 'react-aria-components/slots';
-import {StyleString} from './types';
+import {StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 
@@ -42,15 +42,17 @@ const controlSizeM = {
 
 export interface MessageSuggestionProps extends Omit<
   ButtonProps,
-  'style' | 'className' | 'isPending' | 'isDisabled' | keyof GlobalDOMAttributes
+  'style' | 'className' | 'isPending' | 'isDisabled' | 'render' | keyof GlobalDOMAttributes
 > {
   /** The text content of the suggestion. */
   children: ReactNode;
-  /** The size of the MessageSuggestion. */
-  size?: 'S' | 'M' | 'L' | 'XL';
   /**
-   * Spectrum-defined styles, returned by the `style()` macro.
+   * The size of the MessageSuggestion.
+   *
+   * @default 'M'
    */
+  size?: 'S' | 'M' | 'L' | 'XL';
+  /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StyleString;
 }