@react-spectrum/s2 0.11.1 → 0.12.0

package/src/Disclosure.tsx

@@ -297,20 +297,23 @@ export interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'cla
 
 const panelStyles = style({
   font: 'body',
-  paddingTop: {
-    isExpanded: 8
-  },
-  paddingBottom: {
-    isExpanded: 16
-  },
+  height: '--disclosure-panel-height',
+  overflow: 'clip',
+  transition: {
+    default: '[height]',
+    '@media (prefers-reduced-motion: reduce)': 'none'
+  }
+});
+
+const panelInner = style({
+  paddingTop: 8,
+  paddingBottom: 16,
   paddingX: {
-    isExpanded: {
-      size: {
-        S: 8,
-        M: space(9),
-        L: 12,
-        XL: space(15)
-      }
+    size: {
+      S: 8,
+      M: space(9),
+      L: 12,
+      XL: space(15)
     }
   }
 });
@@ -326,15 +329,16 @@ export const DisclosurePanel = forwardRef(function DisclosurePanel(props: Disclo
   } = props;
   const domProps = filterDOMProps(otherProps);
   let {size} = useSlottedContext(DisclosureContext)!;
-  let {isExpanded} = useContext(DisclosureStateContext)!;
   let panelRef = useDOMRef(ref);
   return (
     <RACDisclosurePanel
       {...domProps}
       ref={panelRef}
       style={UNSAFE_style}
-      className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>
-      {props.children}
+      className={(UNSAFE_className ?? '') + panelStyles}>
+      <div className={panelInner({size})}>
+        {props.children}
+      </div>
     </RACDisclosurePanel>
   );
 });

package/src/DropZone.tsx

@@ -29,14 +29,17 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
   children: ReactNode,
   /** Whether the drop zone has been filled. */
   isFilled?: boolean,
-  /** The message to replace the default banner message that is shown when the drop zone is filled. */
+  /**
+   * The message to replace the default banner message that is shown when the drop zone is filled.
+   * @default 'Drop file to replace'
+   */
   replaceMessage?: string,
   /**
    * The size of the DropZone.
    *
    * @default 'M'
    */
-    size?: 'S' | 'M' | 'L'
+  size?: 'S' | 'M' | 'L'
 }
 
 export const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);

package/src/Field.tsx

@@ -231,7 +231,10 @@ export const Input = forwardRef(function Input(props: InputProps, ref: Forwarded
       className={UNSAFE_className + mergeStyles(style({
         padding: 0,
         backgroundColor: 'transparent',
-        color: 'inherit',
+        color: {
+          default: 'inherit',
+          '::placeholder': 'gray-600'
+        },
         fontFamily: 'inherit',
         fontSize: 'inherit',
         fontWeight: 'inherit',

package/src/FullscreenDialog.tsx

@@ -52,7 +52,7 @@ const content =  style({
   overflowY: {
     default: 'auto',
     // Make the whole dialog scroll rather than only the content when the height it small.
-    [`@media (height < ${400 / 16}rem)`]: 'visible'
+    [`@container (height < ${400 / 16}rem)`]: 'visible'
   },
   font: 'body'
 });

package/src/Image.tsx

@@ -1,5 +1,5 @@
 import {ContextValue, SlotProps} from 'react-aria-components';
-import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';
+import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, JSX, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';
 import {DefaultImageGroup, ImageGroup} from './ImageCoordinator';
 import {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';
 import {mergeStyles} from '../style/runtime';
@@ -42,6 +42,16 @@ export interface ImageProps extends UnsafeStyles, SlotProps {
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).
    */
   referrerPolicy?: HTMLAttributeReferrerPolicy,
+  /**
+   * The intrinsic width of the image.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).
+   */
+  width?: number,
+  /**
+   * The intrinsic height of the image.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).
+   */
+  height?: number,
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StyleString,
   /** A function that is called to render a fallback when the image fails to load. */
@@ -133,7 +143,10 @@ const imgStyles = style({
   transitionDuration: 500
 });
 
-export const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
+/**
+ * An image with support for skeleton loading and custom error states.
+ */
+export const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>): JSX.Element | null {
   [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);
 
   let {
@@ -152,7 +165,9 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
     fetchPriority,
     loading,
     referrerPolicy,
-    slot
+    slot,
+    width,
+    height
   } = props;
   let hidden = (props as ImageContextValue).hidden;
   
@@ -198,10 +213,15 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
     }
 
     // If the image is already loaded, update state immediately instead of waiting for onLoad.
-    if (state === 'loading' && imgRef.current?.complete) {
-      // Queue a microtask so we don't hit React's update limit.
-      // TODO: is this necessary?
-      queueMicrotask(onLoad);
+    let img = imgRef.current;
+    if (state === 'loading' && img?.complete) {
+      if (img.naturalWidth === 0 && img.naturalHeight === 0) {
+        // Queue a microtask so we don't hit React's update limit.
+        // TODO: is this necessary?
+        queueMicrotask(onError);
+      } else {
+        queueMicrotask(onLoad);
+      }
     }
 
     animation(domRef.current);
@@ -234,13 +254,15 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
           decoding={decoding}
           loading={loading}
           referrerPolicy={referrerPolicy}
+          width={width}
+          height={height}
           ref={imgRef}
           onLoad={onLoad}
           onError={onError}
           className={imgStyles({isRevealed, isTransitioning})} />
         )}
     </div>
-  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);
+  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, width, height, onLoad, onError, isRevealed, isTransitioning]);
 });
 
 function getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {

package/src/InlineAlert.tsx

@@ -121,7 +121,7 @@ const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
 }, getAllowedOverrides());
 
 const icon = style<InlineStylesProps>({
-  gridArea: 'icon',
+  float: 'inline-end',
   '--iconPrimary': {
     type: 'fill',
     value: {
@@ -155,18 +155,6 @@ const icon = style<InlineStylesProps>({
   }
 });
 
-const grid = style({
-  display: 'grid',
-  columnGap: 24,
-  gridTemplateColumns: '1fr auto',
-  gridTemplateRows: 'auto auto auto',
-  width: 'full',
-  gridTemplateAreas: [
-    'heading icon',
-    'content content'
-  ]
-});
-
 let ICONS = {
   informative: InfoCircle,
   positive: CheckmarkCircle,
@@ -177,7 +165,6 @@ let ICONS = {
 
 const heading = style({
   marginTop: 0,
-  gridArea: 'heading',
   font: 'title-sm',
   color: {
     default: 'title',
@@ -193,7 +180,6 @@ const heading = style({
 });
 
 const content = style({
-  gridArea: 'content',
   font: 'body-sm',
   color: {
     default: 'body',
@@ -256,18 +242,15 @@ export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props:
         fillStyle,
         isFocusVisible
       }, props.styles)}>
-      <div
-        className={grid}>
-        <Provider
-          values={[
-            [HeadingContext, {styles: heading({fillStyle})}],
-            [ContentContext, {styles: content({fillStyle})}],
-            [IconContext, {styles: icon({variant, fillStyle})}]
-          ]}>
-          {Icon && <Icon aria-label={iconAlt} />}
-          {children}
-        </Provider>
-      </div>
+      <Provider
+        values={[
+          [HeadingContext, {styles: heading({fillStyle})}],
+          [ContentContext, {styles: content({fillStyle})}],
+          [IconContext, {styles: icon({variant, fillStyle})}]
+        ]}>
+        {Icon && <Icon aria-label={iconAlt} />}
+        {children}
+      </Provider>
     </div>
   );
 });

package/src/Menu.tsx

@@ -41,10 +41,10 @@ import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon'; // chevron right removed??
 import {ImageContext} from './Image';
+import {InPopoverContext, Popover, PopoverContext} from './Popover';
 import LinkOutIcon from '../ui-icons/LinkOut';
 import {mergeStyles} from '../style/runtime';
 import {Placement, useLocale} from 'react-aria';
-import {PopoverBase} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {useGlobalListeners} from '@react-aria/utils';
@@ -211,7 +211,7 @@ export let checkmark = style({
   aspectRatio: 'square'
 });
 
-let checkbox = style({
+export let checkbox = style({
   gridArea: 'checkmark',
   marginEnd: 'text-to-control'
 });
@@ -320,6 +320,11 @@ let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu
 
 let InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);
 
+let wrappingDiv = style({
+  display: 'flex',
+  size: 'full'
+});
+
 /**
  * Menus display a list of actions or options that a user can choose.
  */
@@ -335,27 +340,9 @@ export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T
     hideLinkOutIcon = false
   } = props;
   let ctx = useContext(InternalMenuTriggerContext);
-  let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};
-
-  // TODO: change offset/crossoffset based on size? scale?
-  // actual values?
-  let initialPlacement: Placement;
-  switch (direction) {
-    case 'left':
-    case 'right':
-    case 'start':
-    case 'end':
-      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;
-      break;
-    case 'bottom':
-    case 'top':
-    default:
-      initialPlacement = `${direction} ${align}` as Placement;
-  }
-  if (isSubmenu) {
-    initialPlacement = 'end top' as Placement;
-  }
+  let inPopover = useContext(InPopoverContext);
 
+  let isPopover = (ctx || isSubmenu) && !inPopover;
   let content = (
     <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>
       <Provider
@@ -370,34 +357,30 @@ export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T
             slots: {
               'description': {styles: description({size})}
             }
-          }]
+          }],
+          [InPopoverContext, false]
         ]}>
         <AriaMenu
           {...props}
-          className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>
+          className={menu({size, isPopover}, isPopover ? null : styles)}>
           {children}
         </AriaMenu>
       </Provider>
     </InternalMenuContext.Provider>
   );
 
-  if (ctx || isSubmenu) {
+  if (isPopover) {
     return (
-      <PopoverBase
+      <Popover
         ref={ref}
-        hideArrow
-        placement={initialPlacement}
-        shouldFlip={shouldFlip}
-        // For submenus, the offset from the edge of the popover should be 10px.
-        // Subtract 8px for the padding around the parent menu.
-        offset={isSubmenu ? -2 : 8}
-        // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.
-        crossOffset={isSubmenu ? -9 : 0}
-        UNSAFE_style={UNSAFE_style}
-        UNSAFE_className={UNSAFE_className}
-        styles={styles}>
-        {content}
-      </PopoverBase>
+        padding="none"
+        hideArrow>
+        <div
+          style={UNSAFE_style}
+          className={(UNSAFE_className || '') + wrappingDiv}>
+          {content}
+        </div>
+      </Popover>
     );
   }
 
@@ -564,6 +547,21 @@ function MenuTrigger(props: MenuTriggerProps): ReactNode {
     }, {once: true, capture: true});
   };
 
+  let {align = 'start', direction = 'bottom', shouldFlip} = props;
+  let placement: Placement;
+  switch (direction) {
+    case 'left':
+    case 'right':
+    case 'start':
+    case 'end':
+      placement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;
+      break;
+    case 'bottom':
+    case 'top':
+    default:
+      placement = `${direction} ${align}` as Placement;
+  }
+
   return (
     <InternalMenuTriggerContext.Provider
       value={{
@@ -571,18 +569,32 @@ function MenuTrigger(props: MenuTriggerProps): ReactNode {
         direction: props.direction,
         shouldFlip: props.shouldFlip
       }}>
-      <AriaMenuTrigger {...props}>
-        <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
-          {props.children}
-        </PressResponder>
-      </AriaMenuTrigger>
+      <PopoverContext.Provider value={{hideArrow: true, offset: 8, crossOffset: 0, placement, shouldFlip}}>
+        <AriaMenuTrigger {...props}>
+          <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
+            {props.children}
+          </PressResponder>
+        </AriaMenuTrigger>
+      </PopoverContext.Provider>
     </InternalMenuTriggerContext.Provider>
   );
 }
 
 export interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}
 
-const SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;
+function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element {
+  // For submenus, the offset from the edge of the popover should be 10px.
+  // Subtract 8px for the padding around the parent menu.
+  // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.
+  return (
+    <AriaSubmenuTrigger {...props}>
+      {props.children[0]}
+      <PopoverContext.Provider value={{hideArrow: true, offset: -2, crossOffset: -8, placement: 'end top'}}>
+        {props.children[1]}
+      </PopoverContext.Provider>
+    </AriaSubmenuTrigger>
+  );
+}
 
 export {MenuTrigger, SubmenuTrigger};
 

package/src/Modal.tsx

@@ -24,18 +24,18 @@ interface ModalProps extends ModalOverlayProps {
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'
+  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover'
 }
 
 const modalOverlayStyles = style({
   ...colorScheme(),
-  position: 'fixed',
-  inset: 0,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: 'full',
+  height: '--page-height',
   isolation: 'isolate',
   backgroundColor: 'transparent-black-500',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
   opacity: {
     isEntering: 0,
     isExiting: 0
@@ -47,6 +47,22 @@ const modalOverlayStyles = style({
   }
 });
 
+const modalWrapper = style({
+  position: 'sticky',
+  top: 0,
+  left: 0,
+  width: 'full',
+  height: '--visual-viewport-height',
+  display: 'flex',
+  alignItems: {
+    default: 'center',
+    size: {
+      fullscreenTakeover: 'start'
+    }
+  },
+  justifyContent: 'center'
+});
+
 /**
  * A modal is an overlay element which blocks interaction with elements outside it.
  */
@@ -68,74 +84,83 @@ export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HT
     <ModalOverlay
       {...props}
       className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>
-      <RACModal
-        {...props}
-        ref={modalRef}
-        className={renderProps => style({
-          display: 'flex',
-          flexDirection: 'column',
-          borderRadius: {
-            default: 'xl',
-            size: {
-              fullscreenTakeover: 'none'
-            }
-          },
-          width: {
-            size: {
-              // Copied from designs, not sure if correct.
-              S: 400,
-              M: 480,
-              L: 640,
-              fullscreen: 'calc(100% - 40px)',
-              fullscreenTakeover: 'full'
-            }
-          },
-          height: {
-            size: {
-              fullscreen: 'calc(100% - 40px)',
-              fullscreenTakeover: 'full'
-            }
-          },
-          maxWidth: {
-            default: '90vw',
-            size: {
-              fullscreen: 'none',
-              fullscreenTakeover: 'none'
-            }
-          },
-          maxHeight: {
-            default: '90vh',
-            size: {
-              fullscreen: 'none',
-              fullscreenTakeover: 'none'
-            }
-          },
-          '--s2-container-bg': {
-            type: 'backgroundColor',
-            value: 'layer-2'
-          },
-          backgroundColor: '--s2-container-bg',
-          opacity: {
-            isEntering: 0,
-            isExiting: 0
-          },
-          translateY: {
-            isEntering: 20
-          },
-          transition: '[opacity, translate]',
-          transitionDuration: {
-            default: 250,
-            isExiting: 130
-          },
-          transitionDelay: {
-            default: 160,
-            isExiting: 0
-          },
-          // Transparent outline for WHCM.
-          outlineStyle: 'solid',
-          outlineWidth: 1,
-          outlineColor: 'transparent'
-        })({...renderProps, size: props.size})} />
+      <div className={modalWrapper({size: props.size})} style={{containerType: 'size'} as any}>
+        <RACModal
+          {...props}
+          ref={modalRef}
+          className={renderProps => style({
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: {
+              default: 'xl',
+              size: {
+                fullscreenTakeover: 'none'
+              }
+            },
+            width: {
+              size: {
+                // Copied from designs, not sure if correct.
+                S: 400,
+                M: 480,
+                L: 640,
+                XL: 960,
+                fullscreen: 'calc(100% - 40px)',
+                fullscreenTakeover: 'full'
+              }
+            },
+            height: {
+              size: {
+                fullscreen: 'calc(100% - 40px)',
+                fullscreenTakeover: 'full'
+              }
+            },
+            maxWidth: {
+              default: '90vw',
+              size: {
+                fullscreen: 'none',
+                fullscreenTakeover: 'none'
+              }
+            },
+            maxHeight: {
+              default: '90%',
+              size: {
+                fullscreen: 'none',
+                fullscreenTakeover: 'none'
+              }
+            },
+            paddingBottom: {
+              size: {
+                // Extend background behind the iOS Safari toolbar and keyboard.
+                fullscreenTakeover: '[100vh]'
+              }
+            },
+            '--s2-container-bg': {
+              type: 'backgroundColor',
+              value: 'layer-2'
+            },
+            backgroundColor: '--s2-container-bg',
+            opacity: {
+              isEntering: 0,
+              isExiting: 0
+            },
+            translateY: {
+              isEntering: 20
+            },
+            transition: '[opacity, translate]',
+            transitionDuration: {
+              default: 250,
+              isExiting: 130
+            },
+            transitionDelay: {
+              default: 160,
+              isExiting: 0
+            },
+            // Transparent outline for WHCM.
+            outlineStyle: 'solid',
+            outlineWidth: 1,
+            outlineColor: 'transparent'
+          })({...renderProps, size: props.size})} />
+      </div>
     </ModalOverlay>
   );
 });

package/src/NumberField.tsx

@@ -19,6 +19,7 @@ import {
   ButtonRenderProps,
   ContextValue,
   InputContext,
+  InputProps,
   useContextProps
 } from 'react-aria-components';
 import {baseColor, space, style} from '../style' with {type: 'macro'};
@@ -40,7 +41,8 @@ export interface NumberFieldProps extends
   Omit<AriaNumberFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
   StyleProps,
   SpectrumLabelableProps,
-  HelpTextProps {
+  HelpTextProps,
+  Pick<InputProps, 'placeholder'> {
   /**
    * Whether to hide the increment and decrement buttons.
    * @default false
@@ -173,7 +175,6 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
     }
   }));
 
-
   return (
     <AriaNumberField
       ref={domRef}