@react-spectrum/s2 3.0.0-nightly-086ad3115-240912 → 3.0.0-nightly-73414999f-240914

package/src/Form.tsx

@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';
 import {DOMRef, SpectrumLabelableProps} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {Form as RACForm, FormProps as RACFormProps} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useIsSkeleton} from './Skeleton';
 
 interface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'contextualHelp'> {
   /**
@@ -36,11 +37,29 @@ export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className
 export const FormContext = createContext<FormStyleProps | null>(null);
 export function useFormProps<T extends FormStyleProps>(props: T): T {
   let ctx = useContext(FormContext);
-  if (ctx) {
-    return {...ctx, ...props};
-  }
+  let isSkeleton = useIsSkeleton();
+  return useMemo(() => {
+    let result: T = props;
+    if (ctx || isSkeleton) {
+      result = {...props};
+    }
 
-  return props;
+    if (ctx) {
+      // This is a subset of mergeProps. We just need to merge non-undefined values.
+      for (let key in ctx) {
+        if (result[key] === undefined) {
+          result[key] = ctx[key];
+        }
+      }
+    }
+
+    // Skeleton always wins over local props.
+    if (isSkeleton) {
+      result.isDisabled = true;
+    }
+
+    return result;
+  }, [ctx, props, isSkeleton]);
 }
 
 function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {

package/src/Image.tsx

@@ -0,0 +1,240 @@
+import {ContextValue, SlotProps} from 'react-aria-components';
+import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef} from 'react';
+import {DefaultImageGroup, ImageGroup} from './ImageCoordinator';
+import {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';
+import {mergeStyles} from '../style/runtime';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {StyleString} from '../style/types';
+import {UnsafeStyles} from './style-utils';
+import {useLayoutEffect} from '@react-aria/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+export interface ImageProps extends UnsafeStyles, SlotProps {
+  /** The URL of the image. */
+  src?: string,
+  // TODO
+  // srcSet?: string,
+  // sizes?: string,
+  /** Accessible alt text for the image. */
+  alt?: string,
+  /**
+   * Indicates if the fetching of the image must be done using a CORS request.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials',
+  /**
+   * Whether the browser should decode images synchronously or asynchronously.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).
+   */
+  decoding?: 'async' | 'auto' | 'sync',
+  // Only supported in React 19...
+  // fetchPriority?: 'high' | 'low' | 'auto',
+  /**
+   * Whether the image should be loaded immediately or lazily when scrolled into view.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).
+   */
+  loading?: 'eager' | 'lazy',
+  /**
+   * A string indicating which referrer to use when fetching the resource.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).
+   */
+  referrerPolicy?: HTMLAttributeReferrerPolicy,
+  /** 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. */
+  renderError?: () => ReactNode,
+  /**
+   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.
+   * If not provided, the default image group is used.
+   */
+  group?: ImageGroup
+}
+
+interface ImageContextValue extends ImageProps {
+  hidden?: boolean
+}
+
+export const ImageContext = createContext<ContextValue<ImageContextValue, HTMLDivElement>>(null);
+
+type ImageState = 'loading' | 'loaded' | 'revealed' | 'error';
+interface State {
+  state: ImageState,
+  src: string,
+  startTime: number,
+  loadTime: number
+}
+
+type Action = 
+  | {type: 'update', src: string}
+  | {type: 'loaded'}
+  | {type: 'revealed'}
+  | {type: 'error'};
+
+function createState(src: string): State {
+  return {
+    state: 'loading',
+    src,
+    startTime: Date.now(),
+    loadTime: 0
+  };
+} 
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'update': {
+      return {
+        state: 'loading',
+        src: action.src,
+        startTime: Date.now(),
+        loadTime: 0
+      };
+    }
+    case 'loaded':
+    case 'error': {
+      return {
+        ...state,
+        state: action.type
+      };
+    }
+    case 'revealed': {
+      return {
+        ...state,
+        state: 'revealed',
+        loadTime: Date.now() - state.startTime
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+const wrapperStyles = style({
+  backgroundColor: 'gray-100',
+  overflow: 'hidden'
+});
+
+const imgStyles = style({
+  display: 'block',
+  width: 'full',
+  height: 'full',
+  objectFit: '[inherit]',
+  objectPosition: '[inherit]',
+  opacity: {
+    default: 0,
+    isRevealed: 1
+  },
+  transition: {
+    default: 'none',
+    isTransitioning: 'opacity'
+  },
+  transitionDuration: 500
+});
+
+function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
+  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);
+
+  let {
+    src = '',
+    styles,
+    UNSAFE_className = '',
+    UNSAFE_style,
+    renderError,
+    group = DefaultImageGroup,
+    // TODO
+    // srcSet,
+    // sizes,
+    alt,
+    crossOrigin,
+    decoding,
+    loading,
+    referrerPolicy
+  } = props;
+  let hidden = (props as ImageContextValue).hidden;
+  
+  let {revealAll, register, unregister, load} = useContext(group);
+  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);
+
+  if (src !== lastSrc && !hidden) {
+    dispatch({type: 'update', src});
+  }
+
+  if (state === 'loaded' && revealAll && !hidden) {
+    dispatch({type: 'revealed'});
+  }
+
+  let imgRef = useRef<HTMLImageElement | null>(null);
+  useLayoutEffect(() => {
+    if (hidden) {
+      return;
+    }
+
+    register(src);
+    return () => {
+      unregister(src);
+    };
+  }, [hidden, register, unregister, src]);
+
+  let onLoad = useCallback(() => {
+    load(src);
+    dispatch({type: 'loaded'});
+  }, [load, src]);
+
+  let onError = useCallback(() => {
+    dispatch({type: 'error'});
+    unregister(src);
+  }, [unregister, src]);
+
+  let isSkeleton = useIsSkeleton();
+  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';
+  let animation = useLoadingAnimation(isAnimating);
+  useLayoutEffect(() => {
+    if (hidden) {
+      return;
+    }
+
+    // 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);
+    }
+
+    animation(domRef.current);
+  });
+
+  if (props.alt == null) {
+    console.warn(
+      'The `alt` prop was not provided to an image. ' +
+      'Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image ' +
+      'is decorative or redundant with displayed text and should not be announced by screen readers.'
+    );
+  }
+
+  let errorState = !isSkeleton && state === 'error' && renderError?.();
+  let isRevealed = state === 'revealed' && !isSkeleton;
+  let isTransitioning = isRevealed && loadTime > 200;
+  return useMemo(() => hidden ? null : (
+    <div
+      ref={domRef}
+      style={UNSAFE_style}
+      className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>
+      {errorState}
+      {!errorState && (
+        <img
+          src={src}
+          alt={alt}
+          crossOrigin={crossOrigin}
+          decoding={decoding}
+          loading={loading}
+          referrerPolicy={referrerPolicy}
+          ref={imgRef}
+          onLoad={onLoad}
+          onError={onError}
+          className={imgStyles({isRevealed, isTransitioning})} />
+        )}
+    </div>
+  ), [hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);
+}
+
+const _Image = forwardRef(Image);
+export {_Image as Image};

package/src/ImageCoordinator.tsx

@@ -0,0 +1,163 @@
+import {Context, createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useReducer} from 'react';
+
+export interface ImageCoordinatorProps {
+  /** Children within the ImageCoordinator. */
+  children: ReactNode,
+  /**
+   * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.
+   * @default 5000
+   */
+  timeout?: number,
+  /**
+   * A group of images to coordinate between, matching the group passed to the `<Image>` component.
+   * If not provided, the default image group is used.
+   */
+  group?: ImageGroup
+}
+
+export type ImageGroup = Context<ImageGroupValue>;
+
+interface ImageGroupValue {
+  revealAll: boolean,
+  register(url: string): void,
+  unregister(url: string): void,
+  load(url: string): void
+}
+
+const defaultContext: ImageGroupValue = {
+  revealAll: true,
+  register() {},
+  unregister() {},
+  load() {}
+};
+
+export const DefaultImageGroup = createImageGroup();
+
+export function createImageGroup(): ImageGroup {
+  return createContext(defaultContext);
+}
+
+interface State {
+  loadedAll: boolean,
+  timedOut: boolean,
+  loadStartTime: number,
+  loaded: Map<string, boolean>
+}
+
+type Action = 
+  | {type: 'register', url: string}
+  | {type: 'unregister', url: string}
+  | {type: 'load', url: string}
+  | {type: 'timeout'};
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'register': {
+      if (state.loaded.get(action.url) !== false) {
+        let loaded = new Map(state.loaded);
+        loaded.set(action.url, false);
+        return {
+          loadedAll: false,
+          // If we had previously loaded all items, then reset the timed out state
+          // since this is the first item of a new batch.
+          timedOut: state.loadedAll ? false : state.timedOut,
+          loadStartTime: state.loadedAll ? Date.now() : state.loadStartTime,
+          loaded
+        };
+      }
+      return state;
+    }
+    case 'unregister': {
+      if (state.loaded.has(action.url)) {
+        let loaded = new Map(state.loaded);
+        loaded.delete(action.url);
+        return {
+          loadedAll: isAllLoaded(loaded),
+          timedOut: state.timedOut,
+          loadStartTime: state.loadStartTime,
+          loaded
+        };
+      }
+      return state;
+    }
+    case 'load': {
+      if (state.loaded.get(action.url) === false) {
+        let loaded = new Map(state.loaded);
+        loaded.set(action.url, true);
+        return {
+          loadedAll: isAllLoaded(loaded),
+          timedOut: state.timedOut,
+          loadStartTime: state.loadStartTime,
+          loaded
+        };
+      }
+      return state;
+    }
+    case 'timeout': {
+      if (!state.loadedAll && !state.timedOut) {
+        return {
+          ...state,
+          timedOut: true
+        };
+      }
+      return state;
+    }
+    default:
+      return state;
+  }
+}
+
+function isAllLoaded(loaded: Map<string, boolean>) {
+  for (let isLoaded of loaded.values()) {
+    if (!isLoaded) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * An ImageCoordinator coordinates loading behavior for a group of images.
+ * Images within an ImageCoordinator are revealed together once all of them have loaded.
+ */
+export function ImageCoordinator(props: ImageCoordinatorProps) {
+  // If we are already inside another ImageCoordinator, just pass
+  // through children and coordinate loading at the root.
+  let ctx = useContext(props.group || DefaultImageGroup);
+  if (ctx !== defaultContext) {
+    return props.children;
+  }
+
+  return <ImageCoordinatorRoot {...props} />;
+}
+
+function ImageCoordinatorRoot(props: ImageCoordinatorProps) {
+  let {children, timeout = 5000, group = DefaultImageGroup} = props;
+  let [{loadedAll, timedOut, loadStartTime}, dispatch] = useReducer(reducer, {
+    loadedAll: true,
+    timedOut: false,
+    loadStartTime: 0,
+    loaded: new Map()
+  });
+  
+  let register = useCallback((url: string) => dispatch({type: 'register', url}), []);
+  let unregister = useCallback((url: string) => dispatch({type: 'unregister', url}), []);
+  let load = useCallback((url: string) => dispatch({type: 'load', url}), []);
+
+  useEffect(() => {
+    if (!loadedAll) {
+      let timeoutId = setTimeout(() => {
+        dispatch({type: 'timeout'});
+      }, loadStartTime + timeout - Date.now());
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [loadStartTime, loadedAll, timeout]);
+
+  let revealAll = loadedAll || timedOut;
+  return useMemo(() => (
+    <group.Provider value={{revealAll, register, unregister, load}}>
+      {children}
+    </group.Provider>
+  ), [group, children, revealAll, register, unregister, load]);
+}

package/src/Link.tsx

@@ -11,11 +11,13 @@
  */
 
 import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';
-import {createContext, forwardRef, ReactNode} from 'react';
+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 {SkeletonContext, useSkeletonText} from './Skeleton';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface LinkStyleProps {
@@ -38,7 +40,7 @@ export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className'
 
 export const LinkContext = createContext<ContextValue<LinkProps, FocusableRefValue<HTMLAnchorElement>>>(null);
 
-const link = style<LinkRenderProps & LinkStyleProps>({
+const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
   ...focusRing(),
   borderRadius: 'sm',
   font: {
@@ -83,15 +85,27 @@ const link = style<LinkRenderProps & LinkStyleProps>({
 
 function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkContext);
-  let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles} = props;
+  let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;
 
   let domRef = useFocusableRef(ref);
+  let isSkeleton = useContext(SkeletonContext) || false;
+  [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);
+
+  useLayoutEffect(() => {
+    if (domRef.current) {
+      // TODO: should RAC Link pass through inert?
+      domRef.current.inert = isSkeleton;
+    }
+  }, [domRef, isSkeleton]);
+
   return (
     <RACLink
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isQuiet, isStandalone}, styles)} />
+      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>
+      {children}
+    </RACLink>
   );
 }
 

package/src/Menu.tsx

@@ -36,8 +36,9 @@ import {createContext, forwardRef, JSX, ReactNode, useContext, useRef} from 'rea
 import {divider} from './Divider';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {forwardRefType} from './types';
-import {HeaderContext, HeadingContext, ImageContext, KeyboardContext, Text, TextContext} from './Content';
+import {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon'; // chevron right removed??
+import {ImageContext} from './Image';
 import LinkOutIcon from '../ui-icons/LinkOut';
 import {mergeStyles} from '../style/runtime';
 import {Placement, useLocale} from 'react-aria';
@@ -228,6 +229,7 @@ let image = style({
   marginEnd: 'text-to-visual',
   marginTop: fontRelative(6), // made up, need feedback
   alignSelf: 'center',
+  borderRadius: 'sm',
   size: {
     default: 40,
     size: {
@@ -470,7 +472,7 @@ export function MenuItem(props: MenuItemProps) {
                   }
                 }],
                 [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],
-                [ImageContext, {className: image({size})}]
+                [ImageContext, {styles: image({size})}]
               ]}>
               {renderProps.selectionMode === 'single' && !isLink && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
               {renderProps.selectionMode === 'multiple' && !isLink && !renderProps.hasSubmenu && (

package/src/Meter.tsx

@@ -21,6 +21,8 @@ import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {SkeletonWrapper} from './Skeleton';
+import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -121,10 +123,12 @@ function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
       {({percentage, valueText}) => (
         <>
           {label && <FieldLabel size={size} labelAlign="start" labelPosition="top" staticColor={staticColor}>{label}</FieldLabel>}
-          {label && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}
-          <div className={trackStyles({staticColor, size})}>
-            <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />
-          </div>
+          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}
+          <SkeletonWrapper>
+            <div className={trackStyles({staticColor, size})}>
+              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />
+            </div>
+          </SkeletonWrapper>
         </>
       )}
     </AriaMeter>