Add slot contexts to all S2 components (#6856)

Author: devongovett

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

@@ -11,15 +11,16 @@
  */
 
 import {baseColor, fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };
-import {ButtonProps, ButtonRenderProps, OverlayTriggerStateContext, Provider, Button as RACButton, Text} from 'react-aria-components';
+import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, Text} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {FocusableRef} from '@react-types/shared';
+import {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' };
-import {forwardRef, ReactNode, useContext} from 'react';
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ActionButtonStyleProps {
   /**
@@ -170,7 +171,10 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   disableTapHighlight: true
 }, getAllowedOverrides());
 
+export const ActionButtonContext = createContext<ContextValue<ActionButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+
 function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
@@ -189,9 +193,9 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
       }, props.styles)}>
       <Provider
         values={[
-          [TextContext, {className: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
+          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
           [IconContext, {
-            render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
           }]
         ]}>

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

@@ -11,13 +11,15 @@
  */
 
 import {ActionButton, ActionButtonProps} from './ActionButton';
-import {AriaLabelingProps, DOMProps, FocusableRef} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {ContextValue} from 'react-aria-components';
+import {createContext, forwardRef} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
-import {forwardRef} from 'react';
 import {forwardRefType} from './types';
 import {Menu, MenuProps, MenuTrigger, MenuTriggerProps} from './Menu';
 import MoreIcon from '../s2wf-icons/S2_Icon_More_20_N.svg';
 import {StyleProps} from './style-utils' with { type: 'macro' };
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ActionMenuProps<T> extends
   Pick<MenuTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'align' | 'direction' | 'shouldFlip'>,
@@ -26,7 +28,10 @@ export interface ActionMenuProps<T> extends
   StyleProps, DOMProps, AriaLabelingProps {
   }
 
+export const ActionMenuContext = createContext<ContextValue<ActionMenuProps<any>, FocusableRefValue<HTMLButtonElement>>>(null);
+
 function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ActionMenuContext);
   let buttonProps = filterDOMProps(props, {labelable: true});
 
   // size independently controlled?

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

@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, useContextProps} from 'react-aria-components';
+import {ContextValue} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
-import {DOMProps, DOMRef} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface AvatarProps extends StyleProps, DOMProps {
   /** Text description of the avatar. */
@@ -40,11 +41,11 @@ const imageStyles = style({
   disableTapHighlight: true
 }, getAllowedOverrides({height: true}));
 
-export const AvatarContext = createContext<ContextValue<AvatarContextProps, HTMLImageElement>>({});
+export const AvatarContext = createContext<ContextValue<AvatarContextProps, DOMRefValue<HTMLImageElement>>>(null);
 
 function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);
   let domRef = useDOMRef(ref);
-  [props, domRef] = useContextProps(props, domRef, AvatarContext);
   let {
     alt = '',
     src,

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

@@ -10,16 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {ContextValue, Provider, SlotProps} from 'react-aria-components';
 import {filterDOMProps} from '@react-aria/utils';
 import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {IconContext} from './Icon';
-import {Provider} from 'react-aria-components';
-import React, {forwardRef, ReactNode} from 'react';
+import React, {createContext, forwardRef, ReactNode} from 'react';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface BadgeStyleProps {
   /**
@@ -36,13 +37,15 @@ export interface BadgeStyleProps {
   variant: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver'
 }
 
-export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps{
+export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {
   /**
    * The content to display in the badge.
    */
   children: ReactNode
 }
 
+export const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);
+
 const badge = style<BadgeStyleProps>({
   display: 'flex',
   font: 'control',
@@ -115,6 +118,7 @@ const badge = style<BadgeStyleProps>({
 }, getAllowedOverrides());
 
 function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);
   let {
     children,
     variant = 'neutral',
@@ -127,9 +131,9 @@ function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <Provider
       values={[
-        [TextContext, {className: style({paddingY: '--labelPadding', order: 1})}],
+        [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
         [IconContext, {
-          render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+          render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
           styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
         }]
       ]}>

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

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {Breadcrumb as AriaBreadcrumb, BreadcrumbsProps as AriaBreadcrumbsProps, HeadingContext, Link, Provider, Breadcrumbs as RACBreadcrumbs} from 'react-aria-components';
+import {Breadcrumb as AriaBreadcrumb, BreadcrumbsProps as AriaBreadcrumbsProps, ContextValue, HeadingContext, Link, Provider, Breadcrumbs as RACBreadcrumbs, useSlottedContext} from 'react-aria-components';
 import {AriaBreadcrumbItemProps} from 'react-aria';
 import ChevronIcon from '../ui-icons/Chevron';
-import {Children, cloneElement, createContext, forwardRef, isValidElement, ReactElement, ReactNode, useContext, useRef} from 'react';
+import {createContext, forwardRef, ReactNode, useRef} from 'react';
+import {DOMRefValue, LinkDOMProps} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {forwardRefType} from './types';
-import {LinkDOMProps} from '@react-types/shared';
 import {size, style} from '../style/spectrum-theme' with { type: 'macro' };
 
 interface BreadcrumbsStyleProps {
@@ -41,6 +41,8 @@ export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'chil
   children?: ReactNode
 }
 
+export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLDivElement>>>(null);
+
 const wrapper = style<BreadcrumbsStyleProps>({
   display: 'flex',
   justifyContent: 'start',
@@ -67,38 +69,27 @@ const wrapper = style<BreadcrumbsStyleProps>({
   }
 }, getAllowedOverrides());
 
-const BreadcrumbsInternalContext = createContext<BreadcrumbsProps<any> & {length: number}>({length: 0});
-
-function Breadcrumbs<T extends object>({
+function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
+  let {
     UNSAFE_className = '',
     UNSAFE_style,
     styles,
-    ...props
-}: BreadcrumbsProps<T>) {
-  let {size = 'M', isDisabled} = props;
+    size = 'M',
+    children,
+    ...otherProps
+  } = props;
   let ref = useRef(null);
-  // TODO: Remove when https://github.com/adobe/react-spectrum/pull/6440 is released
-  let childArray: ReactElement[] = [];
-  Children.forEach(props.children, (child, index) => {
-    if (isValidElement<{index: number}>(child)) {
-      child = cloneElement(child, {key: index, index});
-      childArray.push(child);
-    }
-  });
   return (
     <RACBreadcrumbs
-      {...props}
+      {...otherProps}
       ref={ref}
       style={UNSAFE_style}
       className={UNSAFE_className + wrapper({
         size
       }, styles)}>
-      <Provider
-        values={[
-          [BreadcrumbsInternalContext, {size, isDisabled, length: childArray.length}]
-        ]}>
-        {childArray}
-      </Provider>
+      <BreadcrumbsContext.Provider value={props}>
+        {children}
+      </BreadcrumbsContext.Provider>
     </RACBreadcrumbs>
   );
 }
@@ -192,43 +183,43 @@ export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children
 
 export function Breadcrumb({children, ...props}: BreadcrumbProps) {
   let {href, target, rel, download, ping, referrerPolicy, ...other} = props;
-  let {size = 'M', length, isDisabled} = useContext(BreadcrumbsInternalContext);
+  let {size = 'M', isDisabled} = useSlottedContext(BreadcrumbsContext)!;
   let ref = useRef(null);
-  // TODO: use isCurrent render prop when https://github.com/adobe/react-spectrum/pull/6440 is released
-  let isCurrent = (props as BreadcrumbProps & {index: number}).index === length - 1;
   return (
     <AriaBreadcrumb
       {...other}
       ref={ref}
-      className={breadcrumbStyles({size, isCurrent})} >
-      {isCurrent ?
-        <span
-          className={currentStyles({size})}>
-          <Provider
-            values={[
-              [HeadingContext, {className: heading}]
-            ]}>
-            {children}
-          </Provider>
-        </span>
-        : (
-          <>
-            <Link
-              style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}
-              href={href}
-              target={target}
-              rel={rel}
-              download={download}
-              ping={ping}
-              referrerPolicy={referrerPolicy}
-              isDisabled={isDisabled || isCurrent}
-              className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isCurrent, isPressed})}>
+      className={({isCurrent}) => breadcrumbStyles({size, isCurrent})}>
+      {({isCurrent}) => (
+        isCurrent ?
+          <span
+            className={currentStyles({size})}>
+            <Provider
+              values={[
+                [HeadingContext, {className: heading}]
+              ]}>
               {children}
-            </Link>
-            <ChevronIcon
-              size="M"
-              className={chevronStyles} />
-          </>
+            </Provider>
+          </span>
+          : (
+            <>
+              <Link
+                style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}
+                href={href}
+                target={target}
+                rel={rel}
+                download={download}
+                ping={ping}
+                referrerPolicy={referrerPolicy}
+                isDisabled={isDisabled || isCurrent}
+                className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isCurrent, isPressed})}>
+                {children}
+              </Link>
+              <ChevronIcon
+                size="M"
+                className={chevronStyles} />
+            </>
+          )
         )}
     </AriaBreadcrumb>
   );

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

@@ -11,16 +11,16 @@
  */
 
 import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
-import {ButtonRenderProps, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
+import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
-import {mergeProps} from 'react-aria';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ButtonStyleProps {
   /**
@@ -55,12 +55,8 @@ export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' |
   children?: ReactNode
 }
 
-interface ButtonContextValue extends ButtonStyleProps, StyleProps {
-  /** Whether the Button is disabled. */
-  isDisabled?: boolean
-}
-
-export const ButtonContext = createContext<ButtonContextValue>({});
+export const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const button = style<ButtonRenderProps & ButtonStyleProps>({
   ...focusRing(),
@@ -275,9 +271,8 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
 }, getAllowedOverrides());
 
 function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);
   let domRef = useFocusableRef(ref);
-  let ctx = useContext(ButtonContext);
-  props = mergeProps(ctx, props);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
   return (
@@ -296,9 +291,9 @@ function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
       }, props.styles)}>
       <Provider
         values={[
-          [TextContext, {className: style({paddingY: '--labelPadding', order: 1})}],
+          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
           [IconContext, {
-            render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
           }]
         ]}>
@@ -317,9 +312,8 @@ let _Button = forwardRef(Button);
 export {_Button as Button};
 
 function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);
   let domRef = useFocusableRef(ref);
-  let ctx = useContext(ButtonContext);
-  props = mergeProps(ctx, props);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
   return (
@@ -338,9 +332,9 @@ function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>
       }, props.styles)}>
       <Provider
         values={[
-          [TextContext, {className: style({paddingY: '--labelPadding', order: 1})}],
+          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
           [IconContext, {
-            render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
           }]
         ]}>