@react-spectrum/s2 1.3.0 → 1.4.0

package/src/TimeField.tsx

@@ -10,39 +10,58 @@
  * governing permissions and limitations under the License.
  */
 
-import {TimeField as AriaTimeField, TimeFieldProps as AriaTimeFieldProps, TimeValue} from 'react-aria-components/TimeField';
+import {
+  TimeField as AriaTimeField,
+  TimeFieldProps as AriaTimeFieldProps,
+  TimeValue
+} from 'react-aria-components/TimeField';
 import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef, ReactElement, Ref, useContext} from 'react';
 import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
-import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {
+  field,
+  fieldInput,
+  getAllowedOverrides,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText} from './Field';
 import {FormContext} from 'react-aria-components/Form';
-import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {
+  forwardRefType,
+  GlobalDOMAttributes,
+  HelpTextProps,
+  SpectrumLabelableProps
+} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface TimeFieldProps<T extends TimeValue> extends
-  Omit<AriaTimeFieldProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
-  StyleProps,
-  SpectrumLabelableProps,
-  HelpTextProps {
-    /**
-     * The size of the TimeField.
-     *
-     * @default 'M'
-     */
-    size?: 'S' | 'M' | 'L' | 'XL'
+export interface TimeFieldProps<T extends TimeValue>
+  extends
+    Omit<
+      AriaTimeFieldProps<T>,
+      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+    >,
+    StyleProps,
+    SpectrumLabelableProps,
+    HelpTextProps {
+  /**
+   * The size of the TimeField.
+   *
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL';
 }
 
-export const TimeFieldContext = createContext<ContextValue<Partial<TimeFieldProps<any>>, HTMLDivElement>>(null);
+export const TimeFieldContext =
+  createContext<ContextValue<Partial<TimeFieldProps<any>>, HTMLDivElement>>(null);
 
 /**
  * TimeFields allow users to enter and edit time values using a keyboard.
  * Each part of the time is displayed in an individually editable segment.
  */
-export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TimeField<T extends TimeValue>(
-  props: TimeFieldProps<T>, ref: Ref<HTMLDivElement>
-): ReactElement {
+export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TimeField<
+  T extends TimeValue
+>(props: TimeFieldProps<T>, ref: Ref<HTMLDivElement>): ReactElement {
   [props, ref] = useSpectrumContextProps(props, ref, TimeFieldContext);
   let {
     label,
@@ -67,11 +86,17 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
       isRequired={isRequired}
       {...timeFieldProps}
       style={UNSAFE_style}
-      className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({
-        isInForm: !!formContext,
-        labelPosition,
-        size
-      }, styles)}>
+      className={
+        (UNSAFE_className || '') +
+        style(field(), getAllowedOverrides())(
+          {
+            isInForm: !!formContext,
+            labelPosition,
+            size
+          },
+          styles
+        )
+      }>
       {({isDisabled, isInvalid}) => {
         return (
           <>

package/src/Toast.module.css

@@ -4,7 +4,13 @@ html.toast-remove,
 html.toast-expand,
 html.toast-collapse,
 html.toast-clear,
-html:active-view-transition-type(toast-add, toast-remove, toast-expand, toast-collapse, toast-clear) {
+html:active-view-transition-type(
+  toast-add,
+  toast-remove,
+  toast-expand,
+  toast-collapse,
+  toast-clear
+) {
   view-transition-name: none;
 
   .toast-controls {
@@ -63,21 +69,21 @@ html:active-view-transition-type(toast-add, toast-remove) {
     --slideX: 0;
     --slideY: calc(100% + 12px);
   }
-  
+
   &::view-transition-group(.toast.top) {
     --slideX: 0;
     --slideY: calc(-100% - 12px);
   }
-  
+
   &::view-transition-group(.toast.start) {
     --slideX: calc(-100% - 12px);
     --slideY: 0;
   }
-  
+
   &::view-transition-group(.toast.end) {
     --slideX: calc(100% + 12px);
     --slideY: 0;
-  }  
+  }
 }
 
 /* Make the "Show all" button animate slightly faster/slower than other components when expanding/collapsing.

package/src/Toast.tsx

@@ -49,34 +49,38 @@ import {useModalOverlay} from 'react-aria/useModalOverlay';
 import {useOverlayTriggerState} from 'react-stately/useOverlayTriggerState';
 
 export type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end';
-export interface ToastContainerProps extends Omit<ToastRegionProps<SpectrumToastValue>, 'queue' | 'children' | 'style' | 'className' | 'render'> {
+export interface ToastContainerProps extends Omit<
+  ToastRegionProps<SpectrumToastValue>,
+  'queue' | 'children' | 'style' | 'className' | 'render'
+> {
   /**
    * Placement of the toast container on the page.
-   * @default "bottom"
+   *
+   * @default 'bottom'
    */
-  placement?: ToastPlacement
+  placement?: ToastPlacement;
 }
 
 export interface ToastOptions extends Omit<RACToastOptions, 'priority'>, DOMProps {
   /** A label for the action button within the toast. */
-  actionLabel?: string,
+  actionLabel?: string;
   /** Handler that is called when the action button is pressed. */
-  onAction?: () => void,
+  onAction?: () => void;
   /** Whether the toast should automatically close when an action is performed. */
-  shouldCloseOnAction?: boolean
+  shouldCloseOnAction?: boolean;
 }
 
 export interface SpectrumToastValue extends DOMProps {
   /** The content of the toast. */
-  children: string,
+  children: string;
   /** The variant (i.e. color) of the toast. */
-  variant: 'positive' | 'negative' | 'info' | 'neutral',
+  variant: 'positive' | 'negative' | 'info' | 'neutral';
   /** A label for the action button within the toast. */
-  actionLabel?: string,
+  actionLabel?: string;
   /** Handler that is called when the action button is pressed. */
-  onAction?: () => void,
+  onAction?: () => void;
   /** Whether the toast should automatically close when an action is performed. */
-  shouldCloseOnAction?: boolean
+  shouldCloseOnAction?: boolean;
 }
 
 let globalReduceMotion = false;
@@ -114,7 +118,11 @@ function getGlobalToastQueue() {
   return globalToastQueue;
 }
 
-function addToast(children: string, variant: SpectrumToastValue['variant'], options: ToastOptions = {}) {
+function addToast(
+  children: string,
+  variant: SpectrumToastValue['variant'],
+  options: ToastOptions = {}
+) {
   let value = {
     children,
     variant,
@@ -127,7 +135,8 @@ function addToast(children: string, variant: SpectrumToastValue['variant'], opti
   // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible
   // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.
   // It is debatable whether non-actionable toasts would also fail.
-  let timeout = options.timeout && !options.actionLabel ? Math.max(options.timeout, 5000) : undefined;
+  let timeout =
+    options.timeout && !options.actionLabel ? Math.max(options.timeout, 5000) : undefined;
   let queue = getGlobalToastQueue();
   let key = queue.add(value, {timeout, onClose: options.onClose});
   return () => queue.close(key);
@@ -297,10 +306,7 @@ const toastBody = style({
     isSingle: 'flex'
   },
   gridTemplateColumns: ['auto', '1fr', 'auto'],
-  gridTemplateAreas: [
-    'content content content',
-    'expand  .       action'
-  ],
+  gridTemplateAreas: ['content content content', 'expand  .       action'],
   flexGrow: 1,
   flexWrap: 'wrap',
   alignItems: 'center',
@@ -341,8 +347,8 @@ const ICONS = {
 };
 
 interface ToastContainerContextValue {
-  isExpanded: boolean,
-  toggleExpanded: () => void
+  isExpanded: boolean;
+  toggleExpanded: () => void;
 }
 
 const ToastContainerContext = createContext<ToastContainerContextValue | null>(null);
@@ -352,9 +358,7 @@ const ToastContainerContext = createContext<ToastContainerContextValue | null>(n
  * at the root of the app.
  */
 export function ToastContainer(props: ToastContainerProps): ReactNode {
-  let {
-    placement = 'bottom'
-  } = props;
+  let {placement = 'bottom'} = props;
   let queue = getGlobalToastQueue();
   let align = 'center';
   [placement, align = 'center'] = placement.split(' ') as any;
@@ -363,19 +367,19 @@ export function ToastContainer(props: ToastContainerProps): ReactNode {
 
   let state = useOverlayTriggerState({});
   let {isOpen: isExpanded, close, toggle} = state;
-  let ctx = useMemo(() => ({
-    isExpanded,
-    toggleExpanded() {
-      if (!isExpanded && queue.visibleToasts.length <= 1) {
-        return;
-      }
+  let ctx = useMemo(
+    () => ({
+      isExpanded,
+      toggleExpanded() {
+        if (!isExpanded && queue.visibleToasts.length <= 1) {
+          return;
+        }
 
-      startViewTransition(
-        () => toggle(),
-        isExpanded ? 'toast-collapse' : 'toast-expand'
-      );
-    }
-  }), [isExpanded, toggle, queue]);
+        startViewTransition(() => toggle(), isExpanded ? 'toast-collapse' : 'toast-expand');
+      }
+    }),
+    [isExpanded, toggle, queue]
+  );
 
   // Set the state to collapsed whenever the queue is emptied.
   useEffect(() => {
@@ -394,11 +398,17 @@ export function ToastContainer(props: ToastContainerProps): ReactNode {
   // Prevent scroll, aria hide outside, and contain focus when expanded, since we take over the whole screen.
   // Attach event handler to the ref since ToastRegion doesn't pass through onKeyDown.
   useModalOverlay({}, state, regionRef);
-  useEvent(regionRef, 'keydown', isExpanded ? (e) => {
-    if (e.key === 'Escape') {
-      collapse();
-    }
-  } : undefined);
+  useEvent(
+    regionRef,
+    'keydown',
+    isExpanded
+      ? e => {
+          if (e.key === 'Escape') {
+            collapse();
+          }
+        }
+      : undefined
+  );
 
   let prefersReducedMotion = useMediaQuery('(prefers-reduced-motion)');
   let reduceMotion = props['PRIVATE_forceReducedMotion'] ?? prefersReducedMotion;
@@ -411,28 +421,31 @@ export function ToastContainer(props: ToastContainerProps): ReactNode {
   }, [reduceMotion]);
 
   return (
-    (<ToastRegion
+    <ToastRegion
       {...props}
       ref={regionRef}
       queue={queue}
-      className={renderProps => toastRegion({
-        ...renderProps,
-        placement,
-        align,
-        isExpanded
-      })}>
+      className={renderProps =>
+        toastRegion({
+          ...renderProps,
+          placement,
+          align,
+          isExpanded
+        })
+      }>
       <FocusScope contain={isExpanded}>
         <ToastContainerContext.Provider value={ctx}>
           {isExpanded && (
             // eslint-disable-next-line
-            (<div
-              className={toastCss['toast-background'] + style({position: 'fixed', inset: 0, backgroundColor: 'transparent-black-500'})}
-              onClick={collapse} />)
+            <div
+              className={
+                toastCss['toast-background'] +
+                style({position: 'fixed', inset: 0, backgroundColor: 'transparent-black-500'})
+              }
+              onClick={collapse}
+            />
           )}
-          <SpectrumToastList
-            placement={placement}
-            align={align}
-            reduceMotion={reduceMotion} />
+          <SpectrumToastList placement={placement} align={align} reduceMotion={reduceMotion} />
           <div className={toastCss['toast-controls'] + controls({isExpanded})}>
             <ActionButton
               size="S"
@@ -441,16 +454,13 @@ export function ToastContainer(props: ToastContainerProps): ReactNode {
               UNSAFE_style={{outlineColor: 'white'}}>
               {stringFormatter.format('toast.clearAll')}
             </ActionButton>
-            <ActionButton
-              size="S"
-              onPress={collapse}
-              UNSAFE_style={{outlineColor: 'white'}}>
+            <ActionButton size="S" onPress={collapse} UNSAFE_style={{outlineColor: 'white'}}>
               {stringFormatter.format('toast.collapse')}
             </ActionButton>
           </div>
         </ToastContainerContext.Provider>
       </FocusScope>
-    </ToastRegion>)
+    </ToastRegion>
   );
 }
 
@@ -459,7 +469,7 @@ function SpectrumToastList({placement, align, reduceMotion}) {
 
   // Attach click handler to ref since ToastList doesn't pass through onClick/onPress.
   let toastListRef = useRef(null);
-  useEvent(toastListRef, 'click', (e) => {
+  useEvent(toastListRef, 'click', e => {
     // Have to check if this is a button because stopPropagation in react events doesn't affect native events.
     if (!isExpanded && !(getEventTarget(e) as Element)?.closest('button')) {
       toggleExpanded();
@@ -473,26 +483,31 @@ function SpectrumToastList({placement, align, reduceMotion}) {
         let origin = isHovered ? 95 : 55;
         return {
           perspective: 80,
-          perspectiveOrigin: 'center ' + (placement === 'top' ? `calc(100% + ${origin}px)` : `${-origin}px`),
+          perspectiveOrigin:
+            'center ' + (placement === 'top' ? `calc(100% + ${origin}px)` : `${-origin}px`),
           transition: 'perspective-origin 400ms'
         };
       }}
-      className={toastCss[isExpanded ? 'toast-list-expanded' : 'toast-list-collapsed'] + toastList({placement, align, isExpanded})}>
+      className={
+        toastCss[isExpanded ? 'toast-list-expanded' : 'toast-list-collapsed'] +
+        toastList({placement, align, isExpanded})
+      }>
       {({toast}) => (
         <SpectrumToast
           toast={toast}
           placement={placement}
           align={align}
-          reduceMotion={reduceMotion} />
+          reduceMotion={reduceMotion}
+        />
       )}
     </ToastList>
   );
 }
 
 interface SpectrumToastProps extends ToastProps<SpectrumToastValue> {
-  placement?: 'top' | 'bottom',
-  align?: 'start' | 'center' | 'end',
-  reduceMotion?: boolean
+  placement?: 'top' | 'bottom';
+  align?: 'start' | 'center' | 'end';
+  reduceMotion?: boolean;
 }
 
 // Exported locally for stories.
@@ -530,10 +545,15 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
           // so that adding/removing a toast cross fades instead of transitioning the position.
           // This works because the toasts are seen as separate elements instead of the same one when their index changes.
           viewTransitionName: toast.key + (props.reduceMotion ? '-' + index : ''),
-          viewTransitionClass: [toastCss.toast, toastCss['background-toast']].map(c => CSS.escape(c)).join(' ')
+          viewTransitionClass: [toastCss.toast, toastCss['background-toast']]
+            .map(c => CSS.escape(c))
+            .join(' ')
         }}
-        className={toastCss.toast + toastStyle({variant: toast.content.variant || 'info', index, isExpanded})}
-        ref={fixSafariTransform} />
+        className={
+          toastCss.toast + toastStyle({variant: toast.content.variant || 'info', index, isExpanded})
+        }
+        ref={fixSafariTransform}
+      />
     );
   }
 
@@ -544,24 +564,38 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
       style={{
         zIndex: visibleToasts.length - index - 1,
         viewTransitionName: toast.key,
-        viewTransitionClass: [toastCss.toast, !isMain ? toastCss['background-toast'] : '', toastCss[placement], toastCss[align]].filter(Boolean).map(c => CSS.escape(c)).join(' ')
+        viewTransitionClass: [
+          toastCss.toast,
+          !isMain ? toastCss['background-toast'] : '',
+          toastCss[placement],
+          toastCss[align]
+        ]
+          .filter(Boolean)
+          .map(c => CSS.escape(c))
+          .join(' ')
       }}
-      className={renderProps => toastCss.toast + toastStyle({
-        ...renderProps,
-        variant: toast.content.variant || 'info',
-        index,
-        isExpanded
-      })}>
-      <div role="presentation" className={toastBody({isSingle: !isMain || visibleToasts.length <= 1 || isExpanded})}>
-        <ToastContent className={toastContent + (ctx && isMain ? ` ${toastCss['toast-content']}` : null)}>
-          {Icon &&
+      className={renderProps =>
+        toastCss.toast +
+        toastStyle({
+          ...renderProps,
+          variant: toast.content.variant || 'info',
+          index,
+          isExpanded
+        })
+      }>
+      <div
+        role="presentation"
+        className={toastBody({isSingle: !isMain || visibleToasts.length <= 1 || isExpanded})}>
+        <ToastContent
+          className={toastContent + (ctx && isMain ? ` ${toastCss['toast-content']}` : null)}>
+          {Icon && (
             <CenterBaseline>
               <Icon />
             </CenterBaseline>
-          }
+          )}
           <Text slot="title">{toast.content.children}</Text>
         </ToastContent>
-        {!isExpanded && visibleToasts.length > 1 &&
+        {!isExpanded && visibleToasts.length > 1 && (
           <ActionButton
             isQuiet
             staticColor="white"
@@ -578,8 +612,8 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
             {/* @ts-ignore */}
             <Chevron UNSAFE_style={{rotate: placement === 'bottom' ? '180deg' : undefined}} />
           </ActionButton>
-        }
-        {toast.content.actionLabel &&
+        )}
+        {toast.content.actionLabel && (
           <Button
             variant="secondary"
             fillStyle="outline"
@@ -594,11 +628,12 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
             styles={style({marginStart: 'auto', gridArea: 'action'})}>
             {toast.content.actionLabel}
           </Button>
-        }
+        )}
       </div>
       <CloseButton
         staticColor="white"
-        UNSAFE_className={ctx && isMain ? toastCss['toast-close'] : undefined} />
+        UNSAFE_className={ctx && isMain ? toastCss['toast-close'] : undefined}
+      />
     </Toast>
   );
 }

package/src/ToggleButton.tsx

@@ -13,34 +13,66 @@
 import {ActionButtonStyleProps, btnStyles} from './ActionButton';
 import {centerBaseline} from './CenterBaseline';
 import {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';
+import CornerTriangle from '../ui-icons/CornerTriangle';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';
-import {fontRelative, style} from '../style' with {type: 'macro'};
+import {fontRelative, space, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
-import {ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components/ToggleButton';
+import {
+  ToggleButton as RACToggleButton,
+  ToggleButtonProps as RACToggleButtonProps
+} from 'react-aria-components/ToggleButton';
 import {SkeletonContext} from './Skeleton';
 import {StyleProps} from './style-utils';
 import {Text, TextContext} from './Content';
 import {ToggleButtonGroupContext} from './ToggleButtonGroup';
 import {useFocusableRef} from './useDOMRef';
 import {useFormProps} from './Form';
+import {useLocale} from 'react-aria/I18nProvider';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
+export interface ToggleButtonProps
+  extends
+    Omit<
+      RACToggleButtonProps,
+      | 'className'
+      | 'style'
+      | 'render'
+      | 'children'
+      | 'onHover'
+      | 'onHoverStart'
+      | 'onHoverEnd'
+      | 'onHoverChange'
+      | 'onClick'
+      | keyof GlobalDOMAttributes
+    >,
+    StyleProps,
+    ActionButtonStyleProps {
   /** The content to display in the button. */
-  children: ReactNode,
-  /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
-  isEmphasized?: boolean
+  children: ReactNode;
+  /**
+   * Whether the button should be displayed with an [emphasized
+   * style](https://spectrum.adobe.com/page/action-button/#Emphasis).
+   */
+  isEmphasized?: boolean;
 }
 
-export const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+interface ToggleButtonContextProps extends Partial<ToggleButtonProps> {
+  holdAffordance?: boolean;
+}
+
+export const ToggleButtonContext =
+  createContext<ContextValue<ToggleButtonContextProps, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ToggleButtons allow users to toggle a selection on or off, for example
  * switching between two states or modes.
  */
-export const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ToggleButton = forwardRef(function ToggleButton(
+  props: ToggleButtonProps,
+  ref: FocusableRef<HTMLButtonElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
@@ -56,6 +88,8 @@ export const ToggleButton = forwardRef(function ToggleButton(props: ToggleButton
     size = props.size || 'M',
     isDisabled = props.isDisabled
   } = ctx || {};
+  let {holdAffordance} = props as ToggleButtonContextProps;
+  let {direction} = useLocale();
 
   return (
     <RACToggleButton
@@ -63,30 +97,70 @@ export const ToggleButton = forwardRef(function ToggleButton(props: ToggleButton
       isDisabled={isDisabled}
       ref={domRef}
       style={pressScale(domRef, props.UNSAFE_style)}
-      className={renderProps => (props.UNSAFE_className || '') + btnStyles({
-        ...renderProps,
-        staticColor,
-        isStaticColor: !!staticColor,
-        size,
-        isQuiet,
-        isEmphasized,
-        isPending: false,
-        density,
-        isJustified,
-        orientation,
-        isInGroup
-      }, props.styles)}>
+      className={renderProps =>
+        (props.UNSAFE_className || '') +
+        btnStyles(
+          {
+            ...renderProps,
+            staticColor,
+            isStaticColor: !!staticColor,
+            size,
+            isQuiet,
+            isEmphasized,
+            isPending: false,
+            density,
+            isJustified,
+            orientation,
+            isInGroup
+          },
+          props.styles
+        )
+      }>
       <Provider
         values={[
           [SkeletonContext, null],
           [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
-          }]
+          [
+            IconContext,
+            {
+              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+            }
+          ]
         ]}>
         {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
       </Provider>
+      {holdAffordance && (
+        <CornerTriangle
+          size={size === 'XS' ? 'S' : size}
+          className={style({
+            position: 'absolute',
+            insetEnd: {
+              size: {
+                XS: space(3),
+                S: space(3),
+                M: 4,
+                L: space(5),
+                XL: space(6)
+              }
+            },
+            bottom: {
+              size: {
+                XS: space(3),
+                S: space(3),
+                M: 4,
+                L: space(5),
+                XL: space(6)
+              }
+            },
+            scaleX: {
+              direction: {
+                rtl: -1
+              }
+            }
+          })({direction, size})}
+        />
+      )}
     </RACToggleButton>
   );
 });